.elementor-15145 .elementor-element.elementor-element-5ee6193{overflow:hidden;padding:0px 0px 0px 0px;}.elementor-15145 .elementor-element.elementor-element-481ea01 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-457f778 *//* =============================================
       DESIGN TOKENS & CSS VARIABLES
    ============================================= */
    :root {
      --color-brand-blue:     #2172b9;
      --color-brand-sky:      #72b9e2;
      --color-brand-green:    #56ab46;
      --color-brand-lime:     #9dc43b;

      --color-bg-base:        #08090c;
      --color-bg-surface:     #0d1017;
      --color-bg-elevated:    #131820;
      --color-bg-card:        #171e28;
      --color-bg-card-hover:  #1c2533;

      --color-text-primary:   #f0f4f8;
      --color-text-secondary: #8fa3b8;
      --color-text-muted:     #4d6278;
      --color-border:         rgba(33, 114, 185, 0.18);
      --color-border-subtle:  rgba(255, 255, 255, 0.06);

      --font-display:  'DM Serif Display', Georgia, serif;
      --font-body:     'Inter', system-ui, sans-serif;

      --radius-sm:  6px;
      --radius-md:  10px;
      --radius-lg:  16px;
      --radius-xl:  24px;

      --shadow-glow-blue:  0 0 40px rgba(33, 114, 185, 0.25);
      --shadow-glow-green: 0 0 40px rgba(86, 171, 70, 0.2);
      --shadow-card:       0 4px 24px rgba(0,0,0,0.5);

      --transition-base: 0.22s ease;

      --max-width: 1160px;
    }




.hero-rendering.img-placeholder img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
    object-position: 0% 50% !important;
}

.preview-cover-img.img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



    /* =============================================
       RESET & BASE
    ============================================= */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      background: var(--color-bg-base);
      color: var(--color-text-primary);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    img { display: block; max-width: 100%; }

    a { color: inherit; text-decoration: none; }

    button, input, select, textarea {
      font-family: inherit;
      font-size: inherit;
    }

    /* =============================================
       UTILITY CLASSES
    ============================================= */
    .container {
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 24px;
    }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--color-brand-sky);
      margin-bottom: 20px;
    }
    .section-label::before {
      content: '';
      display: block;
      width: 24px;
      height: 1.5px;
      background: var(--color-brand-blue);
      flex-shrink: 0;
    }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 52px);
      line-height: 1.1;
      color: var(--color-text-primary);
      letter-spacing: -0.02em;
    }

    .section-subtitle {
      font-size: 17px;
      color: var(--color-text-secondary);
      line-height: 1.65;
      max-width: 600px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: var(--radius-md);
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      border: none;
      transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
      white-space: nowrap;
      line-height: 1;
    }
    .btn:active { transform: scale(0.97); }

    .btn-primary {
      background: linear-gradient(135deg, var(--color-brand-blue), #1a5fa0);
      color: #fff;
      box-shadow: 0 4px 20px rgba(33,114,185,0.45);
    }
    .btn-primary:hover {
      background: linear-gradient(135deg, #2a82d4, #2172b9);
      box-shadow: 0 6px 28px rgba(33,114,185,0.6);
      transform: translateY(-1px);
    }

    .btn-secondary {
      background: linear-gradient(135deg, var(--color-brand-green), #3d8c32);
      color: #fff;
      box-shadow: 0 4px 20px rgba(86,171,70,0.4);
    }
    .btn-secondary:hover {
      background: linear-gradient(135deg, #6ac75a, #56ab46);
      box-shadow: 0 6px 28px rgba(86,171,70,0.55);
      transform: translateY(-1px);
    }

    .btn-outline {
      background: transparent;
      color: var(--color-brand-sky);
      border: 1.5px solid var(--color-brand-blue);
    }
    .btn-outline:hover {
      background: rgba(33,114,185,0.12);
      border-color: var(--color-brand-sky);
    }

    .btn-lg { padding: 17px 36px; font-size: 16px; }

    /* Divider line */
    .divider {
      border: none;
      border-top: 1px solid var(--color-border-subtle);
      margin: 0;
    }

    /* Image placeholder */
    .img-placeholder {
      background: var(--color-bg-elevated);
      border: 1.5px dashed var(--color-border);
      border-radius: var(--radius-md);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: var(--color-text-muted);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-align: center;
      padding: 20px;
    }
    .img-placeholder svg { opacity: 0.4; }

    /* Grid helpers */
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

    /* Fade-in animation */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade-up { animation: fadeUp 0.55s ease both; }
    .fade-up-d1 { animation-delay: 0.1s; }
    .fade-up-d2 { animation-delay: 0.2s; }
    .fade-up-d3 { animation-delay: 0.3s; }

    /* =============================================
       SITE HEADER / NAV
    ============================================= */
    #site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(8,9,12,0.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--color-border-subtle);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
    }

    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* Logo placeholder — swap for <img> tag when logo asset is available */
    .logo-mark {
      width: 36px;
      height: 36px;
      border-radius: 6px;
      background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-green));
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .logo-mark svg { width: 20px; height: 20px; fill: #fff; }

    .logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.15;
    }
    .logo-text .brand-name {
      font-weight: 700;
      font-size: 14px;
      color: var(--color-text-primary);
      letter-spacing: -0.01em;
    }
    .logo-text .brand-sub {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-brand-sky);
    }

    .header-cta {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* =============================================
       HERO SECTION
    ============================================= */
    #hero {
      position: relative;
      overflow: hidden;
      padding: 100px 0 80px;
      background: var(--color-bg-surface);
    }

    /* Subtle grid background pattern */
    #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(33,114,185,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33,114,185,0.06) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }

    /* Radial glow */
    #hero::after {
      content: '';
      position: absolute;
      top: -20%;
      left: 50%;
      transform: translateX(-50%);
      width: 900px;
      height: 600px;
      background: radial-gradient(ellipse, rgba(33,114,185,0.14) 0%, transparent 65%);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(33,114,185,0.12);
      border: 1px solid rgba(33,114,185,0.3);
      border-radius: 100px;
      padding: 5px 14px;
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-brand-sky);
      margin-bottom: 24px;
    }
    .hero-eyebrow span.dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-brand-green);
      flex-shrink: 0;
      animation: pulse 2s ease infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.7); }
    }

    .hero-headline {
      font-family: var(--font-display);
      font-size: clamp(40px, 5.5vw, 68px);
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--color-text-primary);
      margin-bottom: 24px;
    }
    .hero-headline em {
      font-style: italic;
      color: var(--color-brand-sky);
    }

    .hero-subheadline {
      font-size: 17px;
      color: var(--color-text-secondary);
      line-height: 1.7;
      margin-bottom: 36px;
      max-width: 520px;
    }

    .hero-cta-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      margin-bottom: 40px;
    }

    .hero-trust {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      color: var(--color-text-muted);
    }
    .hero-trust svg { flex-shrink: 0; }

    /* Hero visual column */
    .hero-visuals {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 16px;
    }

    .hero-guide-cover {
      grid-column: 1 / -1;
    }

    .hero-cover-img {
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: var(--radius-lg);
      object-fit: cover;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-glow-blue), var(--shadow-card);
    }

    .hero-rendering {
      aspect-ratio: 4/3;
      border-radius: var(--radius-md);
      object-fit: cover;
      border: 1px solid var(--color-border-subtle);
      box-shadow: var(--shadow-card);
    }

    /* =============================================
       SECTION: WHAT YOU'LL LEARN
    ============================================= */
    #what-youll-learn {
      padding: 100px 0;
      background: var(--color-bg-base);
    }

    .learn-header {
      text-align: center;
      margin-bottom: 56px;
    }
    .learn-header .section-label { justify-content: center; }
    .learn-header .section-subtitle { margin: 16px auto 0; }

    .learn-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    /* Make last row center if items don't fill completely */
    .learn-grid .card-learn:nth-child(n+5) {
      /* responsive override below */
    }

    .card-learn {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
      padding: 28px 24px 24px;
      transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
      position: relative;
      overflow: hidden;
    }
    .card-learn::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--color-brand-blue), transparent);
      opacity: 0;
      transition: opacity var(--transition-base);
    }
    .card-learn:hover {
      background: var(--color-bg-card-hover);
      border-color: var(--color-border);
      transform: translateY(-3px);
    }
    .card-learn:hover::before { opacity: 1; }

    .card-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-sm);
      background: rgba(33,114,185,0.12);
      border: 1px solid rgba(33,114,185,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      color: var(--color-brand-sky);
      flex-shrink: 0;
    }
    .card-icon svg { width: 20px; height: 20px; }

    .card-learn h3 {
      font-size: 15px;
      font-weight: 600;
      color: var(--color-text-primary);
      margin-bottom: 8px;
      line-height: 1.3;
    }
    .card-learn p {
      font-size: 13.5px;
      color: var(--color-text-secondary);
      line-height: 1.6;
    }

    /* =============================================
       SECTION: WHY ENERGYWISE
    ============================================= */
    #why-energywise {
      padding: 100px 0;
      background: var(--color-bg-surface);
      border-top: 1px solid var(--color-border-subtle);
      border-bottom: 1px solid var(--color-border-subtle);
      position: relative;
      overflow: hidden;
    }
    #why-energywise::after {
      content: '';
      position: absolute;
      bottom: -100px;
      right: -100px;
      width: 500px;
      height: 500px;
      background: radial-gradient(ellipse, rgba(86,171,70,0.07) 0%, transparent 65%);
      pointer-events: none;
    }

    .why-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: start;
    }

    .why-content .section-title { margin-bottom: 20px; }
    .why-content .section-subtitle { margin-bottom: 36px; }

    .why-pillars {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .pillar {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px 20px;
      background: var(--color-bg-card);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-md);
      transition: border-color var(--transition-base), background var(--transition-base);
    }
    .pillar:hover {
      border-color: var(--color-border);
      background: var(--color-bg-card-hover);
    }

    .pillar-icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      background: rgba(33,114,185,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-brand-sky);
      flex-shrink: 0;
      margin-top: 1px;
    }
    .pillar-icon svg { width: 16px; height: 16px; }

    .pillar-text h4 {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text-primary);
      margin-bottom: 4px;
    }
    .pillar-text p {
      font-size: 13px;
      color: var(--color-text-secondary);
      line-height: 1.55;
    }

    /* Why — right column: feature cards */
    .why-features {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .feature-card {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
      padding: 24px;
      position: relative;
      overflow: hidden;
    }
    .feature-card .feature-badge {
      display: inline-block;
      background: rgba(157,196,59,0.12);
      border: 1px solid rgba(157,196,59,0.25);
      color: var(--color-brand-lime);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 100px;
      margin-bottom: 12px;
    }
    .feature-card h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--color-text-primary);
      margin-bottom: 8px;
    }
    .feature-card p {
      font-size: 13.5px;
      color: var(--color-text-secondary);
      line-height: 1.6;
    }
    .feature-img-placeholder {
      height: 140px;
      margin-top: 16px;
    }

    /* Agnostic statement bar */
    .agnostic-bar {
      margin-top: 36px;
      padding: 20px 24px;
      background: linear-gradient(135deg, rgba(33,114,185,0.08), rgba(86,171,70,0.06));
      border: 1px solid rgba(33,114,185,0.22);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .agnostic-bar svg { flex-shrink: 0; }
    .agnostic-bar p {
      font-size: 14px;
      color: var(--color-text-secondary);
      line-height: 1.55;
    }
    .agnostic-bar p strong { color: var(--color-text-primary); }

    /* =============================================
       SECTION: GUIDE PREVIEW
    ============================================= */
    #guide-preview {
      padding: 100px 0;
      background: var(--color-bg-base);
    }

    .preview-header {
      margin-bottom: 52px;
    }

    .preview-layout {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 32px;
      align-items: start;
    }

    .preview-cover {
      position: sticky;
      top: 84px;
    }

    .preview-cover-img {
      width: 100%;
      aspect-ratio: 8.5/11;
      border-radius: var(--radius-lg);
      object-fit: cover;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-glow-blue), var(--shadow-card);
    }

    .preview-pages {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .preview-page-img {
      width: 100%;
      aspect-ratio: 8.5/11;
      border-radius: var(--radius-md);
      object-fit: cover;
      border: 1px solid var(--color-border-subtle);
      box-shadow: var(--shadow-card);
      transition: transform var(--transition-base), box-shadow var(--transition-base);
    }
    .preview-page-img:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    }

    .preview-cta-box {
      grid-column: 1 / -1;
      background: linear-gradient(135deg, rgba(33,114,185,0.1), rgba(86,171,70,0.06));
      border: 1px solid rgba(33,114,185,0.22);
      border-radius: var(--radius-lg);
      padding: 28px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .preview-cta-box p {
      font-size: 16px;
      color: var(--color-text-secondary);
    }
    .preview-cta-box p strong { color: var(--color-text-primary); }

    /* =============================================
       SECTION: DOWNLOAD FORM
    ============================================= */
    #download-form {
      padding: 100px 0;
      background: var(--color-bg-surface);
      border-top: 1px solid var(--color-border-subtle);
      position: relative;
      overflow: hidden;
    }
    #download-form::before {
      content: '';
      position: absolute;
      top: -150px; left: 50%;
      transform: translateX(-50%);
      width: 800px; height: 400px;
      background: radial-gradient(ellipse, rgba(33,114,185,0.1) 0%, transparent 65%);
      pointer-events: none;
    }

    .form-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: start;
    }

    .form-info .section-title { margin-bottom: 16px; }
    .form-info .section-subtitle { margin-bottom: 28px; }

    .form-value-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 32px;
    }
    .form-value-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14px;
      color: var(--color-text-secondary);
    }
    .check-icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(86,171,70,0.15);
      border: 1px solid rgba(86,171,70,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
      color: var(--color-brand-green);
    }
    .check-icon svg { width: 10px; height: 10px; }

    /* Form card */
    .form-card {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      padding: 36px;
      box-shadow: var(--shadow-glow-blue), var(--shadow-card);
    }

    .form-card-header {
      margin-bottom: 28px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--color-border-subtle);
    }
    .form-card-header h3 {
      font-family: var(--font-display);
      font-size: 22px;
      color: var(--color-text-primary);
      margin-bottom: 6px;
    }
    .form-card-header p {
      font-size: 13.5px;
      color: var(--color-text-secondary);
    }

    /* Form fields */
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
    .form-group:last-of-type { margin-bottom: 0; }

    .form-group label {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-text-secondary);
    }
    .form-group label span.required { color: var(--color-brand-blue); margin-left: 2px; }

    .form-group input,
    .form-group select,
    .form-group textarea {
      background: var(--color-bg-elevated);
      border: 1.5px solid rgba(255,255,255,0.08);
      border-radius: var(--radius-sm);
      padding: 11px 14px;
      color: var(--color-text-primary);
      font-size: 14px;
      width: 100%;
      outline: none;
      transition: border-color var(--transition-base), box-shadow var(--transition-base);
      -webkit-appearance: none;
      appearance: none;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: var(--color-text-muted); }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--color-brand-blue);
      box-shadow: 0 0 0 3px rgba(33,114,185,0.15);
    }

    /* Select arrow */
    .select-wrap { position: relative; }
    .select-wrap::after {
      content: '';
      position: absolute;
      right: 14px; top: 50%;
      transform: translateY(-50%);
      width: 0; height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid var(--color-text-muted);
      pointer-events: none;
    }
    .select-wrap select { padding-right: 36px; cursor: pointer; }

    .form-group textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

    .form-submit-group {
      margin-top: 22px;
    }
    .form-submit-group .btn { width: 100%; font-size: 16px; padding: 16px; }

    .form-privacy {
      margin-top: 12px;
      font-size: 11.5px;
      color: var(--color-text-muted);
      text-align: center;
      line-height: 1.5;
    }

    /* =============================================
       SECTION: DESIGN REVIEW CTA
    ============================================= */
    #design-review {
      padding: 100px 0;
      background: var(--color-bg-elevated);
      border-top: 1px solid var(--color-border-subtle);
      border-bottom: 1px solid var(--color-border-subtle);
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    #design-review::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(86,171,70,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(86,171,70,0.04) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
    }
    #design-review::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, rgba(86,171,70,0.09) 0%, transparent 65%);
      pointer-events: none;
    }

    .review-inner {
      position: relative;
      z-index: 1;
    }

    .review-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(86,171,70,0.1);
      border: 1px solid rgba(86,171,70,0.28);
      border-radius: 100px;
      padding: 6px 16px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-brand-green);
      margin-bottom: 28px;
    }
    .review-badge::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--color-brand-green);
    }

    .review-headline {
      font-family: var(--font-display);
      font-size: clamp(36px, 5vw, 60px);
      letter-spacing: -0.025em;
      line-height: 1.07;
      color: var(--color-text-primary);
      margin-bottom: 22px;
    }

    .review-body {
      font-size: 17px;
      color: var(--color-text-secondary);
      line-height: 1.7;
      max-width: 620px;
      margin: 0 auto 44px;
    }

    .review-cta-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-bottom: 44px;
    }

    .review-features {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 24px;
    }
    .review-feature {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--color-text-muted);
    }
    .review-feature svg { color: var(--color-brand-green); }

    /* =============================================
       SECTION: FAQ
    ============================================= */
    #faq {
      padding: 100px 0;
      background: var(--color-bg-base);
    }

    .faq-header {
      margin-bottom: 56px;
      max-width: 600px;
    }
    .faq-header .section-title { margin-bottom: 12px; }

    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      align-items: start;
    }

    .faq-item {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: border-color var(--transition-base);
    }
    .faq-item:hover { border-color: var(--color-border); }

    .faq-question {
      width: 100%;
      background: none;
      border: none;
      padding: 20px 22px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      text-align: left;
      cursor: pointer;
      color: var(--color-text-primary);
      font-size: 14.5px;
      font-weight: 600;
      line-height: 1.4;
    }
    .faq-question .faq-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(33,114,185,0.1);
      border: 1px solid rgba(33,114,185,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-brand-sky);
      flex-shrink: 0;
      margin-top: 1px;
      transition: background var(--transition-base), transform var(--transition-base);
    }
    .faq-question.open .faq-icon {
      background: rgba(33,114,185,0.2);
      transform: rotate(45deg);
    }
    .faq-question svg.faq-plus {
      width: 10px; height: 10px;
      flex-shrink: 0;
    }

    .faq-answer {
      display: none;
      padding: 0 22px 20px;
      font-size: 13.5px;
      color: var(--color-text-secondary);
      line-height: 1.65;
      border-top: 1px solid var(--color-border-subtle);
      padding-top: 16px;
    }
    .faq-answer.open { display: block; }

    /* =============================================
       FOOTER
    ============================================= */
    #site-footer {
      background: var(--color-bg-surface);
      border-top: 1px solid var(--color-border-subtle);
      padding: 48px 0;
    }
    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }
    .footer-copy {
      font-size: 12.5px;
      color: var(--color-text-muted);
      line-height: 1.6;
    }
    .footer-links {
      display: flex;
      gap: 20px;
    }
    .footer-links a {
      font-size: 12.5px;
      color: var(--color-text-muted);
      transition: color var(--transition-base);
    }
    .footer-links a:hover { color: var(--color-brand-sky); }

    /* =============================================
       RESPONSIVE BREAKPOINTS
    ============================================= */
    @media (max-width: 1024px) {
      .learn-grid { grid-template-columns: repeat(3, 1fr); }
      .hero-inner { gap: 40px; }
      .why-inner { gap: 48px; }
    }

    @media (max-width: 860px) {
      .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
      }
      .hero-visuals {
        order: -1;
      }
      .hero-subheadline { max-width: 100%; }

      .why-inner { grid-template-columns: 1fr; }

      .preview-layout { grid-template-columns: 1fr; }
      .preview-cover { position: static; }

      .form-layout { grid-template-columns: 1fr; gap: 48px; }
      .form-row { grid-template-columns: 1fr; }

      .faq-grid { grid-template-columns: 1fr; }

      .learn-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 600px) {
      #hero { padding: 72px 0 60px; }
      .hero-visuals { grid-template-columns: 1fr; }
      .hero-visuals .hero-rendering:nth-child(3) { display: none; }

      .learn-grid { grid-template-columns: 1fr; }

      .hero-cta-group { flex-direction: column; align-items: flex-start; }
      .btn-lg { width: 100%; text-align: center; }

      .preview-cta-box { flex-direction: column; align-items: flex-start; }

      .footer-inner { flex-direction: column; align-items: flex-start; }

      .header-cta .btn-outline { display: none; }

      .form-card { padding: 24px; }
    }/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-481ea01 */.feature-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-page-img.img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.zf-tempFrmWrapper.zf-large {
    width: 100% !important;
}


.form-card {
  background: #171f2a;
  border: 1px solid #243244;
  border-radius: 0;
  padding: 32px 36px;
  max-width: 520px;
  margin: 0 auto;
  color: #fff;
}

.form-card * {
  box-sizing: border-box;
}

.form-card-header h3 {
  color: #ffffff;
  font-size: 26px;
  margin: 0 0 8px;
}

.form-card-header p {
  color: #7fa6c9;
  margin: 0 0 25px;
}

.form-card ul,
.form-card li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-card .zf-tempFrmWrapper {
  margin-bottom: 18px;
  width: 100%;
}

.form-card .zf-labelName {
  display: block;
  color: #8fb7dc;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 8px;
}

.form-card .zf-important {
  color: #4aa3ff;
  font-style: normal;
}

.form-card input,
.form-card select,
.form-card textarea {
  width: 100% !important;
  background: #111821 !important;
  border: 1px solid #273545 !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  padding: 13px 14px !important;
  outline: none !important;
  box-shadow: none !important;
}

.form-card input::placeholder,
.form-card textarea::placeholder {
  color: #4f7698 !important;
  opacity: 1;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  border-color: #2d7fc7 !important;
}

.form-card textarea {
  min-height: 86px;
  resize: vertical;
}

.form-card select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #63829d 50%),
                    linear-gradient(135deg, #63829d 50%, transparent 50%) !important;
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

.form-card .zf-tempContDiv span {
  display: block;
}

.form-card .zf-phwrapper span label {
  display: none;
}

.form-card .zf-errorMessage {
  color: #ff6b6b !important;
  font-size: 12px;
  margin-top: 6px;
}

.form-card .zf-fmFooter {
  margin-top: 22px;
}

.form-card .zf-submitColor {
  width: 100%;
  background: #287dc4 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 15px 20px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.form-card .zf-submitColor:hover {
  background: #1f6fb3 !important;
}

.form-card .zf-templateWrapper,
.form-card .zf-subContWrap,
.form-card .zf-tempContDiv,
.form-card .zf-phwrapper {
  width: 100% !important;
}

/* First Name + Last Name side by side */
.form-card .zf-tempFrmWrapper:nth-of-type(1),
.form-card .zf-tempFrmWrapper:nth-of-type(2) {
  width: calc(50% - 8px);
  display: inline-block;
  vertical-align: top;
}

.form-card .zf-tempFrmWrapper:nth-of-type(1) {
  margin-right: 12px;
}

/* Mobile */
@media (max-width: 767px) {
  .form-card {
    padding: 24px 18px;
  }

  .form-card .zf-tempFrmWrapper:nth-of-type(1),
  .form-card .zf-tempFrmWrapper:nth-of-type(2) {
    width: 100%;
    display: block;
    margin-right: 0;
  }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-5ee6193 */<style>
 /* =============================================
       DESIGN TOKENS & CSS VARIABLES
    ============================================= */
    :root {
      --color-brand-blue:     #2172b9;
      --color-brand-sky:      #72b9e2;
      --color-brand-green:    #56ab46;
      --color-brand-lime:     #9dc43b;

      --color-bg-base:        #08090c;
      --color-bg-surface:     #0d1017;
      --color-bg-elevated:    #131820;
      --color-bg-card:        #171e28;
      --color-bg-card-hover:  #1c2533;

      --color-text-primary:   #f0f4f8;
      --color-text-secondary: #8fa3b8;
      --color-text-muted:     #4d6278;
      --color-border:         rgba(33, 114, 185, 0.18);
      --color-border-subtle:  rgba(255, 255, 255, 0.06);

      --font-display:  'DM Serif Display', Georgia, serif;
      --font-body:     'Inter', system-ui, sans-serif;

      --radius-sm:  6px;
      --radius-md:  10px;
      --radius-lg:  16px;
      --radius-xl:  24px;

      --shadow-glow-blue:  0 0 40px rgba(33, 114, 185, 0.25);
      --shadow-glow-green: 0 0 40px rgba(86, 171, 70, 0.2);
      --shadow-card:       0 4px 24px rgba(0,0,0,0.5);

      --transition-base: 0.22s ease;

      --max-width: 1160px;
    }

    /* =============================================
       RESET & BASE
    ============================================= */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      background: var(--color-bg-base);
      color: var(--color-text-primary);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    img { display: block; max-width: 100%; }

    a { color: inherit; text-decoration: none; }

    button, input, select, textarea {
      font-family: inherit;
      font-size: inherit;
    }


.form-submit-group .btn {
    width: 100%;
    font-size: 16px !important;
    padding: 16px !important;
    background: linear-gradient(135deg, var(--color-brand-blue), #1a5fa0) !important;
}

    /* =============================================
       UTILITY CLASSES
    ============================================= */
    .container {
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 24px;
    }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--color-brand-sky);
      margin-bottom: 20px;
    }
    .section-label::before {
      content: '';
      display: block;
      width: 24px;
      height: 1.5px;
      background: var(--color-brand-blue);
      flex-shrink: 0;
    }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 52px);
      line-height: 1.1;
      color: var(--color-text-primary);
      letter-spacing: -0.02em;
    }

    .section-subtitle {
      font-size: 17px;
      color: var(--color-text-secondary);
      line-height: 1.65;
      max-width: 600px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: var(--radius-md);
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      border: none;
      transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
      white-space: nowrap;
      line-height: 1;
    }
    .btn:active { transform: scale(0.97); }

    .btn-primary {
      background: linear-gradient(135deg, var(--color-brand-blue), #1a5fa0);
      color: #fff;
      box-shadow: 0 4px 20px rgba(33,114,185,0.45);
    }
    .btn-primary:hover {
      background: linear-gradient(135deg, #2a82d4, #2172b9);
      box-shadow: 0 6px 28px rgba(33,114,185,0.6);
      transform: translateY(-1px);
    }

    .btn-secondary {
      background: linear-gradient(135deg, var(--color-brand-green), #3d8c32);
      color: #fff;
      box-shadow: 0 4px 20px rgba(86,171,70,0.4);
    }
    .btn-secondary:hover {
      background: linear-gradient(135deg, #6ac75a, #56ab46);
      box-shadow: 0 6px 28px rgba(86,171,70,0.55);
      transform: translateY(-1px);
    }

    .btn-outline {
      background: transparent;
      color: var(--color-brand-sky);
      border: 1.5px solid var(--color-brand-blue);
    }
    .btn-outline:hover {
      background: rgba(33,114,185,0.12);
      border-color: var(--color-brand-sky);
    }

    .btn-lg { padding: 17px 36px; font-size: 16px; }

    /* Divider line */
    .divider {
      border: none;
      border-top: 1px solid var(--color-border-subtle);
      margin: 0;
    }

    /* Image placeholder */
    .img-placeholder {
      background: var(--color-bg-elevated);
      border: 1.5px dashed var(--color-border);
      border-radius: var(--radius-md);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: var(--color-text-muted);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-align: center;
      padding: 20px;
    }
    .img-placeholder svg { opacity: 0.4; }

    /* Grid helpers */
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

    /* Fade-in animation */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade-up { animation: fadeUp 0.55s ease both; }
    .fade-up-d1 { animation-delay: 0.1s; }
    .fade-up-d2 { animation-delay: 0.2s; }
    .fade-up-d3 { animation-delay: 0.3s; }

    /* =============================================
       SITE HEADER / NAV
    ============================================= */
    #site-header {
      position: sticky;
      top: 0;
      z-index: 100;
          background: rgb(9 10 15);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--color-border-subtle);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
    }

    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* Logo placeholder — swap for <img> tag when logo asset is available */
    .logo-mark {
      width: 36px;
      height: 36px;
      border-radius: 6px;
      background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-green));
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .logo-mark svg { width: 20px; height: 20px; fill: #fff; }

    .logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.15;
    }
    .logo-text .brand-name {
      font-weight: 700;
      font-size: 14px;
      color: var(--color-text-primary);
      letter-spacing: -0.01em;
    }
    .logo-text .brand-sub {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-brand-sky);
    }

    .header-cta {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* =============================================
       HERO SECTION
    ============================================= */
    #hero {
      position: relative;
      overflow: hidden;
      padding: 100px 0 80px;
      background: var(--color-bg-surface);
    }

    /* Subtle grid background pattern */
    #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(33,114,185,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33,114,185,0.06) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }

    /* Radial glow */
    #hero::after {
      content: '';
      position: absolute;
      top: -20%;
      left: 50%;
      transform: translateX(-50%);
      width: 900px;
      height: 600px;
      background: radial-gradient(ellipse, rgba(33,114,185,0.14) 0%, transparent 65%);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(33,114,185,0.12);
      border: 1px solid rgba(33,114,185,0.3);
      border-radius: 100px;
      padding: 5px 14px;
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-brand-sky);
      margin-bottom: 24px;
    }
    .hero-eyebrow span.dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-brand-green);
      flex-shrink: 0;
      animation: pulse 2s ease infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.7); }
    }

    .hero-headline {
      font-family: var(--font-display);
      font-size: clamp(40px, 5.5vw, 68px);
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--color-text-primary);
      margin-bottom: 24px;
    }
    .hero-headline em {
      font-style: italic;
      color: var(--color-brand-sky);
    }

    .hero-subheadline {
      font-size: 17px;
      color: var(--color-text-secondary);
      line-height: 1.7;
      margin-bottom: 36px;
      max-width: 520px;
    }

    .hero-cta-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      margin-bottom: 40px;
    }

    .hero-trust {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      color: var(--color-text-muted);
    }
    .hero-trust svg { flex-shrink: 0; }

    /* Hero visual column */
    .hero-visuals {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 16px;
    }

    .hero-guide-cover {
      grid-column: 1 / -1;
    }

    .hero-cover-img {
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: var(--radius-lg);
      object-fit: cover;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-glow-blue), var(--shadow-card);
    }

    .hero-rendering {
      aspect-ratio: 4/3;
      border-radius: var(--radius-md);
      object-fit: cover;
      border: 1px solid var(--color-border-subtle);
      box-shadow: var(--shadow-card);
    }

    /* =============================================
       SECTION: WHAT YOU'LL LEARN
    ============================================= */
    #what-youll-learn {
      padding: 100px 0;
      background: var(--color-bg-base);
    }

    .learn-header {
      text-align: center;
      margin-bottom: 56px;
    }
    .learn-header .section-label { justify-content: center; }
    .learn-header .section-subtitle { margin: 16px auto 0; }

    .learn-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    /* Make last row center if items don't fill completely */
    .learn-grid .card-learn:nth-child(n+5) {
      /* responsive override below */
    }

    .card-learn {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
      padding: 28px 24px 24px;
      transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
      position: relative;
      overflow: hidden;
    }
    .card-learn::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--color-brand-blue), transparent);
      opacity: 0;
      transition: opacity var(--transition-base);
    }
    .card-learn:hover {
      background: var(--color-bg-card-hover);
      border-color: var(--color-border);
      transform: translateY(-3px);
    }
    .card-learn:hover::before { opacity: 1; }

    .card-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-sm);
      background: rgba(33,114,185,0.12);
      border: 1px solid rgba(33,114,185,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      color: var(--color-brand-sky);
      flex-shrink: 0;
    }
    .card-icon svg { width: 20px; height: 20px; }

    .card-learn h3 {
      font-size: 15px;
      font-weight: 600;
      color: var(--color-text-primary);
      margin-bottom: 8px;
      line-height: 1.3;
    }
    .card-learn p {
      font-size: 13.5px;
      color: var(--color-text-secondary);
      line-height: 1.6;
    }

    /* =============================================
       SECTION: WHY ENERGYWISE
    ============================================= */
    #why-energywise {
      padding: 100px 0;
      background: var(--color-bg-surface);
      border-top: 1px solid var(--color-border-subtle);
      border-bottom: 1px solid var(--color-border-subtle);
      position: relative;
      overflow: hidden;
    }
    #why-energywise::after {
      content: '';
      position: absolute;
      bottom: -100px;
      right: -100px;
      width: 500px;
      height: 500px;
      background: radial-gradient(ellipse, rgba(86,171,70,0.07) 0%, transparent 65%);
      pointer-events: none;
    }

    .why-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: start;
    }

    .why-content .section-title { margin-bottom: 20px; }
    .why-content .section-subtitle { margin-bottom: 36px; }

    .why-pillars {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .pillar {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px 20px;
      background: var(--color-bg-card);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-md);
      transition: border-color var(--transition-base), background var(--transition-base);
    }
    .pillar:hover {
      border-color: var(--color-border);
      background: var(--color-bg-card-hover);
    }

    .pillar-icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      background: rgba(33,114,185,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-brand-sky);
      flex-shrink: 0;
      margin-top: 1px;
    }
    .pillar-icon svg { width: 16px; height: 16px; }

    .pillar-text h4 {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text-primary);
      margin-bottom: 4px;
    }
    .pillar-text p {
      font-size: 13px;
      color: var(--color-text-secondary);
      line-height: 1.55;
    }

    /* Why — right column: feature cards */
    .why-features {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .feature-card {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
      padding: 24px;
      position: relative;
      overflow: hidden;
    }
    .feature-card .feature-badge {
      display: inline-block;
      background: rgba(157,196,59,0.12);
      border: 1px solid rgba(157,196,59,0.25);
      color: var(--color-brand-lime);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 100px;
      margin-bottom: 12px;
    }
    .feature-card h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--color-text-primary);
      margin-bottom: 8px;
    }
    .feature-card p {
      font-size: 13.5px;
      color: var(--color-text-secondary);
      line-height: 1.6;
    }
    .feature-img-placeholder {
      height: 140px;
      margin-top: 16px;
    }

    /* Agnostic statement bar */
    .agnostic-bar {
      margin-top: 36px;
      padding: 20px 24px;
      background: linear-gradient(135deg, rgba(33,114,185,0.08), rgba(86,171,70,0.06));
      border: 1px solid rgba(33,114,185,0.22);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .agnostic-bar svg { flex-shrink: 0; }
    .agnostic-bar p {
      font-size: 14px;
      color: var(--color-text-secondary);
      line-height: 1.55;
    }
    .agnostic-bar p strong { color: var(--color-text-primary); }

    /* =============================================
       SECTION: GUIDE PREVIEW
    ============================================= */
    #guide-preview {
      padding: 100px 0;
      background: var(--color-bg-base);
        overflow: visible !important;
    }

    .preview-header {
      margin-bottom: 52px;
    }

    .preview-layout {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 32px;
      align-items: start;
       overflow: visible !important;
    }

    .preview-cover {
      position: sticky;
      top: 84px;
    }

    .preview-cover-img {
      width: 100%;
      aspect-ratio: 8.5/11;
      border-radius: var(--radius-lg);
      object-fit: cover;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-glow-blue), var(--shadow-card);
    }

    .preview-pages {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .preview-page-img {
      width: 100%;
      aspect-ratio: 8.5/11;
      border-radius: var(--radius-md);
      object-fit: cover;
      border: 1px solid var(--color-border-subtle);
      box-shadow: var(--shadow-card);
      transition: transform var(--transition-base), box-shadow var(--transition-base);
    }
    .preview-page-img:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    }

    .preview-cta-box {
      grid-column: 1 / -1;
      background: linear-gradient(135deg, rgba(33,114,185,0.1), rgba(86,171,70,0.06));
      border: 1px solid rgba(33,114,185,0.22);
      border-radius: var(--radius-lg);
      padding: 28px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .preview-cta-box p {
      font-size: 16px;
      color: var(--color-text-secondary);
    }
    .preview-cta-box p strong { color: var(--color-text-primary); }

    /* =============================================
       SECTION: DOWNLOAD FORM
    ============================================= */
    #download-form {
      padding: 100px 0;
      background: var(--color-bg-surface);
      border-top: 1px solid var(--color-border-subtle);
      position: relative;
      overflow: hidden;
    }
    #download-form::before {
      content: '';
      position: absolute;
      top: -150px; left: 50%;
      transform: translateX(-50%);
      width: 800px; height: 400px;
      background: radial-gradient(ellipse, rgba(33,114,185,0.1) 0%, transparent 65%);
      pointer-events: none;
    }

    .form-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: start;
    }

    .form-info .section-title { margin-bottom: 16px; }
    .form-info .section-subtitle { margin-bottom: 28px; }

    .form-value-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 32px;
    }
    .form-value-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14px;
      color: var(--color-text-secondary);
    }
    .check-icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(86,171,70,0.15);
      border: 1px solid rgba(86,171,70,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
      color: var(--color-brand-green);
    }
    .check-icon svg { width: 10px; height: 10px; }

    /* Form card */
    .form-card {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      padding: 36px;
      box-shadow: var(--shadow-glow-blue), var(--shadow-card);
    }

    .form-card-header {
      margin-bottom: 28px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--color-border-subtle);
    }
    .form-card-header h3 {
      font-family: var(--font-display);
      font-size: 22px;
      color: var(--color-text-primary);
      margin-bottom: 6px;
    }
    .form-card-header p {
      font-size: 13.5px;
      color: var(--color-text-secondary);
    }

    /* Form fields */
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
    .form-group:last-of-type { margin-bottom: 0; }

    .form-group label {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-text-secondary);
    }
    .form-group label span.required { color: var(--color-brand-blue); margin-left: 2px; }

    .form-group input,
    .form-group select,
    .form-group textarea {
      background: var(--color-bg-elevated);
      border: 1.5px solid rgba(255,255,255,0.08);
      border-radius: var(--radius-sm);
      padding: 11px 14px;
      color: var(--color-text-primary);
      font-size: 14px;
      width: 100%;
      outline: none;
      transition: border-color var(--transition-base), box-shadow var(--transition-base);
      -webkit-appearance: none;
      appearance: none;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: var(--color-text-muted); }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--color-brand-blue);
      box-shadow: 0 0 0 3px rgba(33,114,185,0.15);
    }

    /* Select arrow */
    .select-wrap { position: relative; }
    .select-wrap::after {
      content: '';
      position: absolute;
      right: 14px; top: 50%;
      transform: translateY(-50%);
      width: 0; height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid var(--color-text-muted);
      pointer-events: none;
    }
    .select-wrap select { padding-right: 36px; cursor: pointer; }

    .form-group textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

    .form-submit-group {
      margin-top: 22px;
    }
    .form-submit-group .btn { width: 100%; font-size: 16px; padding: 16px; }

    .form-privacy {
      margin-top: 12px;
      font-size: 11.5px;
      color: var(--color-text-muted);
      text-align: center;
      line-height: 1.5;
    }

    /* =============================================
       SECTION: DESIGN REVIEW CTA
    ============================================= */
    #design-review {
      padding: 100px 0;
      background: var(--color-bg-elevated);
      border-top: 1px solid var(--color-border-subtle);
      border-bottom: 1px solid var(--color-border-subtle);
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    #design-review::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(86,171,70,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(86,171,70,0.04) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
    }
    #design-review::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, rgba(86,171,70,0.09) 0%, transparent 65%);
      pointer-events: none;
    }

    .review-inner {
      position: relative;
      z-index: 1;
    }

    .review-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(86,171,70,0.1);
      border: 1px solid rgba(86,171,70,0.28);
      border-radius: 100px;
      padding: 6px 16px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-brand-green);
      margin-bottom: 28px;
    }
    .review-badge::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--color-brand-green);
    }

    .review-headline {
      font-family: var(--font-display);
      font-size: clamp(36px, 5vw, 60px);
      letter-spacing: -0.025em;
      line-height: 1.07;
      color: var(--color-text-primary);
      margin-bottom: 22px;
    }

    .review-body {
      font-size: 17px;
      color: var(--color-text-secondary);
      line-height: 1.7;
      max-width: 620px;
      margin: 0 auto 44px;
    }

    .review-cta-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-bottom: 44px;
    }

    .review-features {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 24px;
    }
    .review-feature {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--color-text-muted);
    }
    .review-feature svg { color: var(--color-brand-green); }

    /* =============================================
       SECTION: FAQ
    ============================================= */
    #faq {
      padding: 100px 0;
      background: var(--color-bg-base);
    }

    .faq-header {
      margin-bottom: 56px;
      max-width: 600px;
    }
    .faq-header .section-title { margin-bottom: 12px; }

    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      align-items: start;
    }

    .faq-item {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: border-color var(--transition-base);
    }
    .faq-item:hover { border-color: var(--color-border); }

    .faq-question {
      width: 100%;
      background: none;
      border: none;
      padding: 20px 22px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      text-align: left;
      cursor: pointer;
      color: var(--color-text-primary);
      font-size: 14.5px;
      font-weight: 600;
      line-height: 1.4;
    }
    .faq-question .faq-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(33,114,185,0.1);
      border: 1px solid rgba(33,114,185,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-brand-sky);
      flex-shrink: 0;
      margin-top: 1px;
      transition: background var(--transition-base), transform var(--transition-base);
    }
    .faq-question.open .faq-icon {
      background: rgba(33,114,185,0.2);
      transform: rotate(45deg);
    }
    .faq-question svg.faq-plus {
      width: 10px; height: 10px;
      flex-shrink: 0;
    }

    .faq-answer {
      display: none;
      padding: 0 22px 20px;
      font-size: 13.5px;
      color: var(--color-text-secondary);
      line-height: 1.65;
      border-top: 1px solid var(--color-border-subtle);
      padding-top: 16px;
    }
    .faq-answer.open { display: block; }

    /* =============================================
       FOOTER
    ============================================= */
    #site-footer {
      background: var(--color-bg-surface);
      border-top: 1px solid var(--color-border-subtle);
      padding: 48px 0;
    }
    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }
    .footer-copy {
      font-size: 12.5px;
      color: var(--color-text-muted);
      line-height: 1.6;
    }
    .footer-links {
      display: flex;
      gap: 20px;
    }
    .footer-links a {
      font-size: 12.5px;
      color: var(--color-text-muted);
      transition: color var(--transition-base);
    }
    .footer-links a:hover { color: var(--color-brand-sky); }

    /* =============================================
       RESPONSIVE BREAKPOINTS
    ============================================= */
    @media (max-width: 1024px) {
      .learn-grid { grid-template-columns: repeat(3, 1fr); }
      .hero-inner { gap: 40px; }
      .why-inner { gap: 48px; }
    }

    @media (max-width: 860px) {
      .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
      }
      .hero-visuals {
        order: -1;
      }
      .hero-subheadline { max-width: 100%; }

      .why-inner { grid-template-columns: 1fr; }

      .preview-layout { grid-template-columns: 1fr; }
      .preview-cover { position: static; }

      .form-layout { grid-template-columns: 1fr; gap: 48px; }
      .form-row { grid-template-columns: 1fr; }

      .faq-grid { grid-template-columns: 1fr; }

      .learn-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 600px) {
      #hero { padding: 72px 0 60px; }
      .hero-visuals { grid-template-columns: 1fr; }
      .hero-visuals .hero-rendering:nth-child(3) { display: none; }

      .learn-grid { grid-template-columns: 1fr; }

      .hero-cta-group { flex-direction: column; align-items: flex-start; }
      .btn-lg { width: 100%; text-align: center; }

      .preview-cta-box { flex-direction: column; align-items: flex-start; }

      .footer-inner { flex-direction: column; align-items: flex-start; }

      .header-cta .btn-outline { display: none; }

      .form-card { padding: 24px; }
    }
</style>
 
 
   <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
 <!-- ============================================================
       SITE HEADER
  ============================================================ -->
  <header id="site-header" role="banner">
    <div class="container">
      <div class="header-inner">

        <!-- Logo: EnergyWise Solutions official logo (embedded as data URI) -->
        <a href="#hero" class="logo-wrap" aria-label="EnergyWise Solutions — Home">
          <img src="https://energywisesolutions.com/wp-content/uploads/2025/03/New-EW-Logo-Sm.png" width="100px"/>
        </a>

        <div class="header-cta">
          <a href="https://calendly.com/energywisesolutions/energywise-consult-clone" class="btn btn-outline" target="_blank">Request Design Review</a>
          <a href="#download-form" class="btn btn-primary" target="_blank">Download Free Guide</a>
        </div>

      </div>
    </div>
  </header>


  <!-- ============================================================
       SECTION 1: HERO
  ============================================================ -->
  <section id="hero" aria-labelledby="hero-headline">
    <div class="container">
      <div class="hero-inner">

        <!-- Hero copy column -->
        <div class="hero-copy">
          <div class="hero-eyebrow">
            <span class="dot" aria-hidden="true"></span>
            Free Resource — Pickleball, Tennis &amp; Padel Court Lighting
          </div>

          <h1 class="hero-headline fade-up" id="hero-headline">
            Better Court Lighting<br><em>Starts With Better Design.</em>
          </h1>

          <p class="hero-subheadline fade-up fade-up-d1">
            Whether you're planning new courts, upgrading existing lighting, expanding a facility, or evaluating options for a renovation, the decisions made during the design process can dramatically impact visibility, glare, player experience, energy performance, and long-term operating costs.
          </p>

          <div class="hero-cta-group fade-up fade-up-d2">
            <a href="#download-form" class="btn btn-primary btn-lg" target="_blank">
              <!-- Download icon -->
              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 12l-5-5 1.4-1.4L7 9.2V1h2v8.2l2.6-3.6L13 7l-5 5z"/><path d="M2 13h12v2H2z"/></svg>
              Download The Free Guide
            </a>
            <a href="https://calendly.com/energywisesolutions/energywise-consult-clone" class="btn btn-outline" target="_blank">Request a Design Review</a>
          </div>

          <div class="hero-trust">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M7 1L8.96 5.02L13.5 5.64L10.25 8.79L11.09 13.31L7 11.25L2.91 13.31L3.75 8.79L.5 5.64L5.04 5.02L7 1Z" fill="#56ab46" stroke="#56ab46" stroke-width="0.5" stroke-linejoin="round"/>
            </svg>
            No cost. No commitment. Instant access.
          </div>
        </div>

        <!-- Hero visual column -->
        <div class="hero-visuals fade-up fade-up-d1" aria-label="Guide preview and facility renderings">
          <!-- Guide cover -->
          <div class="hero-guide-cover">
            <!--
              ASSET: Guide Cover
              Replace this placeholder with: <img src="assets/guide-cover.jpg" alt="The Ultimate Racquet Sports Facility Lighting Guide cover" class="hero-cover-img" loading="eager" />
            -->
            <div class="hero-cover-img img-placeholder" style="aspect-ratio:16/9;">
              <img src="https://energywisesolutions.com/wp-content/uploads/2026/07/1-4.webp" />
			  
            </div>
          </div>

          <!-- Indoor rendering -->
          <!--
            ASSET: Best Indoor Rendering
            Replace with: <img src="assets/indoor-rendering.jpg" alt="Photorealistic indoor pickleball court lighting rendering" class="hero-rendering" loading="eager" />
          -->
          <div class="hero-rendering img-placeholder">
           
		    <img src="https://energywisesolutions.com/wp-content/uploads/2026/07/222.webp" />
          </div>

          <!-- Outdoor rendering -->
          <!--
            ASSET: Best Outdoor Rendering
            Replace with: <img src="assets/outdoor-rendering.jpg" alt="Photorealistic outdoor tennis court lighting rendering" class="hero-rendering" loading="eager" />
          -->
          <div class="hero-rendering img-placeholder">
             <img src="https://energywisesolutions.com/wp-content/uploads/2026/07/333.webp" />
		   
          </div>
        </div>

      </div>
    </div>
  </section>


  <!-- ============================================================
       SECTION 2: WHAT YOU'LL LEARN
  ============================================================ -->
  <section id="what-youll-learn" aria-labelledby="learn-heading">
    <div class="container">
      <div class="learn-header">
        <span class="section-label">Inside the Guide</span>
        <h2 class="section-title" id="learn-heading">What You'll Learn</h2>
        <p class="section-subtitle">
          A comprehensive resource written for facility owners, developers, architects, and contractors — covering every dimension of pickleball court lighting, tennis court lighting, padel court lighting, and beyond.
        </p>
      </div>

      <div class="learn-grid" role="list">

        <!-- Card 1 -->
        <article class="card-learn" role="listitem">
          <div class="card-icon" aria-hidden="true">
            <!-- Star / quality icon -->
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
          </div>
          <h3>Five Elements of Great Court Lighting</h3>
          <p>Illuminance, uniformity, glare control, color rendering, and energy efficiency — how each element affects play quality and long-term facility performance.</p>
        </article>

        <!-- Card 2 -->
        <article class="card-learn" role="listitem">
          <div class="card-icon" aria-hidden="true">
            <!-- Split view icon -->
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="2" y="3" width="20" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21"/></svg>
          </div>
          <h3>Indoor vs. Outdoor Design</h3>
          <p>Comparing the unique engineering challenges of indoor facilities, outdoor courts, and covered structures — including ceiling heights, obstructions, and spill light control.</p>
        </article>

        <!-- Card 3 -->
        <article class="card-learn" role="listitem">
          <div class="card-icon" aria-hidden="true">
            <!-- Grid / photometric icon -->
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/></svg>
          </div>
          <h3>Photometric Studies</h3>
          <p>How computer-modeled photometric analysis validates fixture placement, predicts performance, and gives owners a data-backed plan before a single fixture is installed.</p>
        </article>

        <!-- Card 4 -->
        <article class="card-learn" role="listitem">
          <div class="card-icon" aria-hidden="true">
            <!-- Warning icon -->
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
          </div>
          <h3>Common Lighting Mistakes</h3>
          <p>The most expensive errors facility owners make — from specifying fixtures before completing design to under-designing for court expansion — and how to avoid them.</p>
        </article>

        <!-- Card 5 -->
        <article class="card-learn" role="listitem">
          <div class="card-icon" aria-hidden="true">
            <!-- Checklist icon -->
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
          </div>
          <h3>Lighting Standards & Guidelines</h3>
          <p>Sport-specific illuminance and uniformity standards for tennis court lighting, pickleball court lighting, and padel court lighting — by play class, from recreational through professional and broadcast.</p>
        </article>

        <!-- Card 6 -->
        <article class="card-learn" role="listitem">
          <div class="card-icon" aria-hidden="true">
            <!-- Shield / agnostic icon -->
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          </div>
          <h3>Manufacturer-Agnostic Design</h3>
          <p>Why the spec should drive the fixture selection — not the other way around. How to evaluate manufacturers, compare performance data, and avoid vendor lock-in.</p>
        </article>

        <!-- Card 7 -->
        <article class="card-learn" role="listitem">
          <div class="card-icon" aria-hidden="true">
            <!-- Controls icon -->
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
          </div>
          <h3>Controls & Energy Management</h3>
          <p>Dimming, scheduling, occupancy sensing, and smart controls — how the right system reduces operating costs and qualifies for utility rebates without sacrificing player experience.</p>
        </article>

        <!-- Card 8 -->
        <article class="card-learn" role="listitem">
          <div class="card-icon" aria-hidden="true">
            <!-- Blueprint / planning icon -->
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M2 3h20v18H2zM2 9h20M9 3v18"/></svg>
          </div>
          <h3>Facility Planning Considerations</h3>
          <p>Aligning lighting design with phased construction, expansion plans, utility infrastructure, budgeting timelines, and permit requirements for a complete, coordinated approach.</p>
        </article>

      </div>
    </div>
  </section>


  <!-- ============================================================
       SECTION 3: WHY ENERGYWISE
  ============================================================ -->
  <section id="why-energywise" aria-labelledby="why-heading">
    <div class="container">
      <div class="why-inner">

        <!-- Left: copy + pillars -->
        <div class="why-content">
          <span class="section-label">Our Approach</span>
          <h2 class="section-title" id="why-heading">We Begin With the Facility.<br>Not the Fixture.</h2>
          <p class="section-subtitle">
            Energywise Court Solutions is a design-first practice. We help facility owners, developers, architects, and contractors make informed decisions that balance performance, player experience, and long-term operating economics — before any fixture is selected.
          </p>

          <div class="why-pillars">

            <div class="pillar">
              <div class="pillar-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
              </div>
              <div class="pillar-text">
                <h4>Manufacturer Agnostic</h4>
                <p>We don't sell fixtures. We design to a performance specification and then identify the best-fit products for your project — from any manufacturer.</p>
              </div>
            </div>

            <div class="pillar">
              <div class="pillar-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21"/></svg>
              </div>
              <div class="pillar-text">
                <h4>Indoor &amp; Outdoor Expertise</h4>
                <p>From high-ceiling indoor complexes to outdoor courts with spill-light restrictions, our team has designed for every racquet sports context and climate.</p>
              </div>
            </div>

            <div class="pillar">
              <div class="pillar-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
              </div>
              <div class="pillar-text">
                <h4>New Construction &amp; Retrofit</h4>
                <p>Whether you're breaking ground or upgrading an existing facility, we adapt our design process to your project timeline, budget realities, and existing infrastructure.</p>
              </div>
            </div>

            <div class="pillar">
              <div class="pillar-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M3 9h18M9 3v18"/></svg>
              </div>
              <div class="pillar-text">
                <h4>Photometric Design &amp; Analysis</h4>
                <p>Every project begins with computational photometric modeling — giving you verified illuminance levels, uniformity ratios, and glare metrics before you commit.</p>
              </div>
            </div>

          </div>

          <div class="agnostic-bar">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--color-brand-sky)" stroke-width="1.5" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            <p><strong>No manufacturer relationships. No kickbacks. No bias.</strong> Our only obligation is to help your facility perform exactly as designed — now and over the life of the asset.</p>
          </div>
        </div>

        <!-- Right: feature cards -->
        <div class="why-features">

          <div class="feature-card">
            <span class="feature-badge">Platform</span>
            <h4>EnergyManager</h4>
            <p>Our proprietary energy management dashboard gives facility operators real-time visibility into lighting consumption, automated scheduling, and ROI tracking — purpose-built for racquet sports facilities.</p>
            <!--
              ASSET: EnergyManager Screenshot
              Replace with: <img src="https://energywisesolutions.com/wp-content/uploads/2026/07/222.webp" alt="EnergyManager dashboard screenshot" class="preview-page-img" />
            -->
            <div class="img-placeholder feature-img-placeholder">

 <img src="https://energywisesolutions.com/wp-content/uploads/2026/07/222.webp" />
            </div>
          </div>

          <div class="feature-card">
            <span class="feature-badge" style="background:rgba(33,114,185,0.12);border-color:rgba(33,114,185,0.25);color:var(--color-brand-sky);">AI-Powered</span>
            <h4>EnergyEdge AI</h4>
            <p>AI-driven demand optimization that learns your facility's usage patterns, automatically adjusts lighting output across all courts, and identifies rebate and incentive opportunities you'd otherwise miss.</p>
            <!--
              ASSET: EnergyEdge AI Screenshot
              Replace with: <img src="assets/energyedge-ai-screenshot.jpg" alt="EnergyEdge AI interface screenshot" class="preview-page-img" />
            -->
            <div class="img-placeholder feature-img-placeholder">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" aria-hidden="true"><path d="M12 2a10 10 0 110 20A10 10 0 0112 2z"/><path d="M12 6v6l4 2"/></svg>
              <span>EnergyEdge AI Screenshot</span>
            </div>
          </div>

        </div>

      </div>
    </div>
  </section>


  <!-- ============================================================
       SECTION 4: GUIDE PREVIEW
  ============================================================ -->
  <section id="guide-preview" aria-labelledby="preview-heading">
    <div class="container">
      <div class="preview-header">
        <span class="section-label">A Look Inside</span>
        <h2 class="section-title" id="preview-heading">Designed for Decision-Makers</h2>
        <p class="section-subtitle" style="margin-top:12px;">
          The guide is written and designed for facility professionals — not a marketing brochure. Dense with reference data, photometric examples, planning frameworks, and design standards you can actually use.
        </p>
      </div>

      <div class="preview-layout">

        <!-- Sticky cover -->
        <div class="preview-cover">
          <!--
            ASSET: Guide Cover (preview)
            Replace with: <img src="assets/guide-cover.jpg" alt="The Ultimate Racquet Sports Facility Lighting Guide cover" class="preview-cover-img" />
          -->
          <div class="preview-cover-img img-placeholder">
           
		    <img src="https://energywisesolutions.com/wp-content/uploads/2026/07/666.webp" />
		     
          </div>
        </div>

        <!-- Interior page previews -->
        <div class="preview-content">
          <div class="preview-pages">

            <!--
              ASSETS: Interior page previews (3–5 spread images)
              Replace each placeholder below with actual spread/page images.
              Example: <img src="assets/guide-page-photometric.jpg" alt="Guide spread: photometric study example" class="preview-page-img" />
            -->
            <div class="preview-page-img img-placeholder">
               <img src="https://energywisesolutions.com/wp-content/uploads/2026/07/555.webp" />
            </div>

            <div class="preview-page-img img-placeholder">
              <img src="https://energywisesolutions.com/wp-content/uploads/2026/07/666.webp" />
            </div>

            <div class="preview-page-img img-placeholder">
                
				<img src="https://energywisesolutions.com/wp-content/uploads/2026/07/444.webp" />
			   
            </div>

            <div class="preview-page-img img-placeholder">
              <img src="https://energywisesolutions.com/wp-content/uploads/2026/07/1-4.webp" />
            </div>

            <div class="preview-cta-box">
              <p><strong>72 pages. Zero filler.</strong> From photometric fundamentals to facility planning frameworks — everything you need to make better lighting decisions for your project.</p>
              <a href="https://energywisesolutions.com/downloads/ultimate-racquet-sports-facility-lighting-guide.pdf" class="btn btn-primary" style="flex-shrink:0;" target="_blank">Download Free →</a>
            </div>

          </div>
        </div>

      </div>
    </div>
  </section>


  <!-- ============================================================
       SECTION 5: DOWNLOAD FORM
       Developer note: Wire form submission to Zoho CRM / Zoho Forms.
       The form id is "lighting-guide-form". All field names follow
       Zoho standard field naming conventions for easy mapping.
       Required fields are marked with aria-required="true".
  ============================================================ -->
  <section id="download-form" aria-labelledby="form-heading">
    <div class="container">
      <div class="form-layout">

        <!-- Value proposition copy -->
        <div class="form-info">
          <span class="section-label">Free Download</span>
          <h2 class="section-title" id="form-heading">Get the Complete Lighting Guide</h2>
          <p class="section-subtitle" style="margin-top:14px;">
            The Ultimate Racquet Sports Facility Lighting Guide is the most comprehensive resource available for planning, specifying, and optimizing court lighting for pickleball, tennis, and padel facilities.
          </p>

          <ul class="form-value-list" role="list">
            <li>
              <span class="check-icon" aria-hidden="true"><svg viewBox="0 0 10 10" fill="currentColor"><path d="M1.5 5l2.5 2.5 5-5"/></svg></span>
              <span>Photometric design principles explained in plain language</span>
            </li>
            <li>
              <span class="check-icon" aria-hidden="true"><svg viewBox="0 0 10 10" fill="currentColor"><path d="M1.5 5l2.5 2.5 5-5"/></svg></span>
              <span>IES, ITF, and USA Pickleball lighting standards reference</span>
            </li>
            <li>
              <span class="check-icon" aria-hidden="true"><svg viewBox="0 0 10 10" fill="currentColor"><path d="M1.5 5l2.5 2.5 5-5"/></svg></span>
              <span>Indoor vs. outdoor design considerations by sport</span>
            </li>
            <li>
              <span class="check-icon" aria-hidden="true"><svg viewBox="0 0 10 10" fill="currentColor"><path d="M1.5 5l2.5 2.5 5-5"/></svg></span>
              <span>Energy savings, controls, and rebate qualification guidance</span>
            </li>
            <li>
              <span class="check-icon" aria-hidden="true"><svg viewBox="0 0 10 10" fill="currentColor"><path d="M1.5 5l2.5 2.5 5-5"/></svg></span>
              <span>Facility planning checklist for new construction &amp; retrofits</span>
            </li>
            <li>
              <span class="check-icon" aria-hidden="true"><svg viewBox="0 0 10 10" fill="currentColor"><path d="M1.5 5l2.5 2.5 5-5"/></svg></span>
              <span>Manufacturer-agnostic fixture evaluation framework</span>
            </li>
          </ul>
        </div>

        <!-- Form card -->
        <div class="form-card">
          <div class="form-card-header">
            <h3>Download The Free Guide</h3>
            <p>Complete the form below for instant access.</p>
          </div>

          <!--
            DEVELOPER NOTE:
            Connect to Zoho CRM via Zoho Forms embed or Zoho CRM WebForm.
            Map fields using Zoho field API names:
              First_Name, Last_Name, Company, Email, Phone,
              CF_Facility_Type, CF_Project_Type, Description
            Set Lead Source = "Lighting Guide Download"
            Set Lead Status = "New"
          -->

<form action='https://forms.zohopublic.com/scottv1/form/GuidedownloadformforTheUltimateRacquetSportsFacili1/formperma/5pWxenO5iU3pjLD2Tzey7JvB-jDjRxckW2lt_-LV-ZM/htmlRecords/submit' name='form'
method='POST'
onSubmit='javascript:document.charset="UTF-8"; return zf_ValidateAndSubmit();'
accept-charset='UTF-8' enctype='multipart/form-data' id='form'>
<input type="hidden" name="zf_referrer_name" value=""><!-- To Track referrals , place the referrer name within the " " in the above hidden input field -->
<input type="hidden" name="zf_redirect_url" value=""><!-- To redirect to a specific page after record submission , place the respective url within the " " in the above hidden input field -->
<input type="hidden" name="zc_gad" value=""><!-- If GCLID is enabled in Zoho CRM Integration, click details of AdWords Ads will be pushed to Zoho CRM -->
<div class="zf-templateWrapper"><ul class="zf-tempHeadBdr" style="display:none;"><li class="zf-tempHeadContBdr"><h2 class="zf-frmTitle" > 
<em>Guide download form for The Ultimate Racquet Sports Facility Lighting Guide</em>
</h2>
<p class="zf-frmDesc"></p>
<div class="zf-clearBoth"></div></li></ul>
<div class="zf-subContWrap zf-topAlign"><ul>	
<div class="zf-tempFrmWrapper  zf-large "><label class="zf-labelName">  
Last Name 
<em class="zf-important"> *</em> 
</label>
<div class="zf-tempContDiv">
<span> 
<input type="text" name="SingleLine" checktype="c1" value="" maxlength="255" fieldType=1 placeholder="" /> </span><p id="SingleLine_error" class="zf-errorMessage" style="display: none;">Invalid value</p></div><div class="zf-clearBoth"></div></div>
<div class="zf-tempFrmWrapper  zf-large "><label class="zf-labelName">  
First Name 
<em class="zf-important"> *</em> 
</label>
<div class="zf-tempContDiv">
<span> 
<input type="text" name="SingleLine1" checktype="c1" value="" maxlength="255" fieldType=1 placeholder="" /> </span><p id="SingleLine1_error" class="zf-errorMessage" style="display: none;">Invalid value</p></div><div class="zf-clearBoth"></div></div>
<div class="zf-tempFrmWrapper  zf-large "><label class="zf-labelName">  
Email 
<em class="zf-important"> *</em> 
</label>
<div class="zf-tempContDiv">
<span> 
<input type="text" name="Email" checktype="c5" value="" maxlength="255" fieldType=9 placeholder="" /> </span><p id="Email_error" class="zf-errorMessage" style="display: none;">Invalid value</p></div><div class="zf-clearBoth"></div></div>
<div  class="zf-tempFrmWrapper zf- zf-large "><label class="zf-labelName"> Phone
</label>
<div class="zf-tempContDiv zf-phonefld">
<div
class="zf-phwrapper zf-phNumber" 
>
<span> <input type="text" compname="PhoneNumber" name="PhoneNumber_countrycode" maxlength="20" checktype="c7" value="" phoneFormat="1" isCountryCodeEnabled=false fieldType="11" id="international_PhoneNumber_countrycode" valType="number" phoneFormatType="1" placeholder="" />
<label>Number</label> </span>
<div class="zf-clearBoth"></div></div><p id="PhoneNumber_error" class="zf-errorMessage" style="display:none;">Invalid value</p></div><div class="zf-clearBoth"></div></div>
<div class="zf-tempFrmWrapper  zf-large "><label class="zf-labelName">  
Company 
<em class="zf-important"> *</em> 
</label>
<div class="zf-tempContDiv">
<span> 
<input type="text" name="SingleLine2" checktype="c1" value="" maxlength="255" fieldType=1 placeholder="" /> </span><p id="SingleLine2_error" class="zf-errorMessage" style="display: none;">Invalid value</p></div><div class="zf-clearBoth"></div></div>  
<div class="zf-tempFrmWrapper  zf-large "><label class="zf-labelName"> 
Facility Type 
<em class="zf-important"> *</em> 
</label>
<div class="zf-tempContDiv">
<select class="zf-form-sBox" name="Dropdown4" checktype="c1"><option selected="true" value="-Select-">-Select-</option>
<option value="Convenience Store">Convenience Store</option>
<option value="Country Club">Country Club</option>
<option value="Developer / Planned Facility">Developer / Planned Facility</option>
<option value="Fitness Center">Fitness Center</option>
<option value="Grocery Store">Grocery Store</option>
<option value="Hospital">Hospital</option>
<option value="Hospitality">Hospitality</option>
<option value="Hotel">Hotel</option>
<option value="Manufacturing">Manufacturing</option>
<option value="Medical Office">Medical Office</option>
<option value="Multi-Family">Multi-Family</option>
<option value="Multi-Sport (Pickleball + Padel + Tennis)">Multi-Sport (Pickleball + Padel + Tennis)</option>
<option value="Multi-Sport (Pickleball + Padel)">Multi-Sport (Pickleball + Padel)</option>
<option value="Multi-Sport (Pickleball + Tennis)">Multi-Sport (Pickleball + Tennis)</option>
<option value="Multi-Sport Racquet Facility">Multi-Sport Racquet Facility</option>
<option value="Office">Office</option>
<option value="Other">Other</option>
<option value="Padel">Padel</option>
<option value="Padel Facility">Padel Facility</option>
<option value="Park / Municipal Facility">Park / Municipal Facility</option>
<option value="Pickleball">Pickleball</option>
<option value="Pickleball Facility">Pickleball Facility</option>
<option value="Private Club">Private Club</option>
<option value="Restaurant / Quick Service">Restaurant / Quick Service</option>
<option value="Retail">Retail</option>
<option value="School">School</option>
<option value="School / University">School / University</option>
<option value="Self-Storage">Self-Storage</option>
<option value="Tennis">Tennis</option>
<option value="Tennis Facility">Tennis Facility</option>
<option value="Warehouse">Warehouse</option></select><p id="Dropdown4_error" class="zf-errorMessage" style="display:none;">Invalid value</p></div>
<div class="zf-clearBoth"></div></div>  
<div class="zf-tempFrmWrapper  zf-large "><label class="zf-labelName"> 
Project Type 
<em class="zf-important"> *</em> 
</label>
<div class="zf-tempContDiv">
<select class="zf-form-sBox" name="Dropdown5" checktype="c1"><option selected="true" value="-Select-">-Select-</option>
<option value="New Construction">New Construction</option>
<option value="Renovation">Renovation</option>
<option value="Expansion">Expansion</option>
<option value="Retrofit">Retrofit</option>
<option value="Design Review">Design Review</option>
<option value="Budget Planning">Budget Planning</option>
<option value="Exploring Options">Exploring Options</option>
<option value="Other">Other</option></select><p id="Dropdown5_error" class="zf-errorMessage" style="display:none;">Invalid value</p></div>
<div class="zf-clearBoth"></div></div>
<div class="zf-tempFrmWrapper  zf-large "><label class="zf-labelName">  
Notes
</label>
<div class="zf-tempContDiv">
<span> 
<textarea name="MultiLine" checktype="c1" maxlength="65535" placeholder=""></textarea> </span><p id="MultiLine_error" class="zf-errorMessage" style="display: none;">Invalid value</p></div><div class="zf-clearBoth"></div></div>  
<div class="zf-tempFrmWrapper  zf-large "><label class="zf-labelName"> 
Audience Segment
</label>
<div class="zf-tempContDiv">
<select class="zf-form-sBox" name="Dropdown1" checktype="c1"><option selected="true" value="-Select-">-Select-</option>
<option value="Contractors or Bidders">Contractors or Bidders</option>
<option value="Architects or Design Teams">Architects or Design Teams</option>
<option value="Owners or Developers">Owners or Developers</option></select><p id="Dropdown1_error" class="zf-errorMessage" style="display:none;">Invalid value</p></div>
<div class="zf-clearBoth"></div></div>  
<div class="zf-tempFrmWrapper  zf-large "><label class="zf-labelName"> 
I would like a complimentary design review
</label>
<div class="zf-tempContDiv">
<select class="zf-form-sBox" name="Dropdown7" checktype="c1"><option selected="true" value="-Select-">-Select-</option>
<option value="Design Requested">Design Requested</option>
<option value="No Current Design Request">No Current Design Request</option></select><p id="Dropdown7_error" class="zf-errorMessage" style="display:none;">Invalid value</p></div>
<div class="zf-clearBoth"></div></div>
</ul></div><ul><li class="zf-fmFooter"><button class="zf-submitColor"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 12l-5-5 1.4-1.4L7 9.2V1h2v8.2l2.6-3.6L13 7l-5 5z"></path><path d="M2 13h12v2H2z"></path></svg>Submit</button></li></ul></div></form></div><script type="text/javascript">var dateAndMonthRegexFormateArray = zf_SetDateAndMonthRegexBasedOnDateFormate('dd-MMM-yyyy');
var zf_DateRegex = new RegExp(dateAndMonthRegexFormateArray[0]);
var zf_MonthYearRegex = new RegExp(dateAndMonthRegexFormateArray[1]);
var zf_MandArray = [ "SingleLine", "SingleLine1", "Email", "SingleLine2", "Dropdown4", "Dropdown5"]; 
var zf_FieldArray = [ "SingleLine", "SingleLine1", "Email", "PhoneNumber_countrycode", "SingleLine2", "Dropdown4", "Dropdown5", "MultiLine", "Dropdown1", "Dropdown7"]; 
var isSalesIQIntegrationEnabled = false;
var salesIQFieldsArray = [];</script>
        </div>

      </div>
    </div>
  </section>


  <!-- ============================================================
       SECTION 6: DESIGN REVIEW CTA
       Developer note: "Request My Design Review" button should
       deep-link to the Zoho Bookings scheduling page, or open
       a Zoho Forms consultation request form.
  ============================================================ -->
  <section id="design-review" aria-labelledby="review-heading">
    <div class="container">
      <div class="review-inner">

        <div class="review-badge">Complimentary Service</div>

        <h2 class="review-headline" id="review-heading">
          Complimentary Court<br>Lighting Design Review
        </h2>

        <p class="review-body">
          Not sure where to start? Our team will review your facility plans, existing conditions, or project scope and provide specific, objective feedback — at no cost and no obligation. You'll leave the conversation with a clearer picture of your options, your path forward, and what a well-designed system should deliver for your project.
        </p>

        <div class="review-cta-group">
          <!--
            DEVELOPER NOTE: Replace href="#" with Zoho Bookings URL or consultation form URL.
            Example: href="https://calendly.com/energywise/design-review" or Zoho Bookings link.
          -->
          <a href="https://calendly.com/energywisesolutions/energywise-consult-clone" class="btn btn-secondary btn-lg" target="_blank">
            Request My Design Review
          </a>
          <a href="#download-form" class="btn btn-outline" target="_blank">
            Download the Guide First
          </a>
        </div>

        <div class="review-features" role="list">
          <div class="review-feature" role="listitem">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M1.5 7l3.5 3.5 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            No cost, no commitment
          </div>
          <div class="review-feature" role="listitem">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M1.5 7l3.5 3.5 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Manufacturer-agnostic perspective
          </div>
          <div class="review-feature" role="listitem">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M1.5 7l3.5 3.5 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Indoor &amp; outdoor expertise
          </div>
          <div class="review-feature" role="listitem">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M1.5 7l3.5 3.5 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            New construction &amp; retrofit
          </div>
          <div class="review-feature" role="listitem">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M1.5 7l3.5 3.5 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Typically completed in 1 meeting
          </div>
        </div>

      </div>
    </div>
  </section>


  <!-- ============================================================
       SECTION 7: FAQ
  ============================================================ -->
  <section id="faq" aria-labelledby="faq-heading">
    <div class="container">
      <div class="faq-header">
        <span class="section-label">Common Questions</span>
        <h2 class="section-title" id="faq-heading">Frequently Asked Questions</h2>
        <p class="section-subtitle" style="margin-top:12px;">
          Answers to the questions facility owners, developers, and design professionals ask most often about racquet sports court lighting.
        </p>
      </div>

      <div class="faq-grid" id="faq-accordion">

        <!-- FAQ 1: Pickleball lighting -->
        <div class="faq-item">
          <button
            class="faq-question"
            aria-expanded="false"
            aria-controls="faq-answer-1"
            id="faq-btn-1"
          >
            What foot-candle levels are recommended for pickleball court lighting?
            <span class="faq-icon" aria-hidden="true">
              <svg class="faq-plus" viewBox="0 0 10 10" fill="currentColor"><path d="M4 0h2v10H4zM0 4h10v2H0z"/></svg>
            </span>
          </button>
          <div class="faq-answer" id="faq-answer-1" role="region" aria-labelledby="faq-btn-1">
            Pickleball court lighting is typically designed to one of four play classes, each with its own illuminance and uniformity targets. Class IV (recreational) targets 20–30 fc average. Class III (club) targets 30–50 fc. Class II (competition) targets 50–75 fc. Class I (professional/broadcast) targets 75–125 fc. Uniformity is equally important: a max-to-min ratio of 2.0 or less is the general target, with premium competitive facilities aiming for around 1.7 or less. Foot-candle averages without adequate uniformity produce visible hot spots and dark zones that affect play quality and increase eye strain.
            <br><br>
            Mounting height is another critical variable. For indoor pickleball court lighting, ceiling-mounted LED systems should have a minimum clearance of 18–20 feet to avoid interference with lobs. For outdoor pickleball court lighting, pole heights of 20–25 feet are ideal for minimizing glare and providing even, consistent light across the court surface.
          </div>
        </div>

        <!-- FAQ 2: Tennis lighting -->
        <div class="faq-item">
          <button
            class="faq-question"
            aria-expanded="false"
            aria-controls="faq-answer-2"
            id="faq-btn-2"
          >
            What are the recommended lighting levels for tennis court lighting?
            <span class="faq-icon" aria-hidden="true">
              <svg class="faq-plus" viewBox="0 0 10 10" fill="currentColor"><path d="M4 0h2v10H4zM0 4h10v2H0z"/></svg>
            </span>
          </button>
          <div class="faq-answer" id="faq-answer-2" role="region" aria-labelledby="faq-btn-2">
            Tennis court lighting is organized into four play classes, each defining both an average illuminance target and a minimum illuminance floor. Class IV (recreational) requires 30 fc average / 20 fc minimum with a uniformity ratio of 2.0:1 or less. Class III (club and competitive) requires 50 fc average / 40 fc minimum at 2.0:1 or less. Class II (regional competition) requires 75 fc average / 60 fc minimum at 1.7:1 or less. Class I (national and professional events) requires 125 fc average / 100 fc minimum at 1.5:1 or less.
            <br><br>
            Mounting height also plays a significant role in tennis court lighting performance. Recreational and residential installations commonly use 20–25 ft poles to help reduce light spill. Club and competition facilities typically use 23–30 ft to achieve stronger distribution and better uniformity. Tournament and professional venues often go to 30–40+ ft to improve coverage, visibility, and uniformity across the full court at higher levels of play.
          </div>
        </div>

        <!-- FAQ 3: Padel lighting -->
        <div class="faq-item">
          <button
            class="faq-question"
            aria-expanded="false"
            aria-controls="faq-answer-3"
            id="faq-btn-3"
          >
            What are the lighting requirements for padel court lighting?
            <span class="faq-icon" aria-hidden="true">
              <svg class="faq-plus" viewBox="0 0 10 10" fill="currentColor"><path d="M4 0h2v10H4zM0 4h10v2H4zM0 4h10v2H0z"/></svg>
            </span>
          </button>
          <div class="faq-answer" id="faq-answer-3" role="region" aria-labelledby="faq-btn-3">
            Padel court lighting guidelines are defined by use level. Recreational padel targets 200–300 lux with a uniformity ratio of 2.0:1 or less. Club and training facilities target 500–750 lux at 1.7:1 or less. Competition padel requires 750+ lux with a tighter uniformity ratio of 1.4:1 or less. Recommended mounting heights are commonly 20–26 ft above grade, with 26 ft or higher often preferred for tournament-oriented applications to improve distribution and reduce shadows on the glass walls.
            <br><br>
            Beyond the numbers, padel court lighting presents unique design challenges because of the glass enclosure structure. The perimeter walls and roof framing create mounting restrictions, shadow zones, and glare angles that require careful photometric planning specific to the court model and enclosure type. We model every padel installation in photometric software before recommending any fixture position or mounting approach.
          </div>
        </div>

        <!-- FAQ 4: Indoor lighting -->
        <div class="faq-item">
          <button
            class="faq-question"
            aria-expanded="false"
            aria-controls="faq-answer-4"
            id="faq-btn-4"
          >
            What's different about designing lighting for indoor courts?
            <span class="faq-icon" aria-hidden="true">
              <svg class="faq-plus" viewBox="0 0 10 10" fill="currentColor"><path d="M4 0h2v10H4zM0 4h10v2H0z"/></svg>
            </span>
          </button>
          <div class="faq-answer" id="faq-answer-4" role="region" aria-labelledby="faq-btn-4">
            Indoor court lighting requires balancing ceiling height, structural bays, HVAC and sprinkler obstructions, and the reflected light contribution of walls and ceilings. Glare control is particularly critical because players are looking up at fixtures during overhead shots and lobs. We evaluate the Unified Glare Rating (UGR) of any indoor specification to ensure player comfort. For indoor pickleball court lighting, a minimum fixture clearance of 18–20 ft is recommended to avoid interference with lobs. Ceiling height also drives fixture selection more broadly — low-bay facilities have fundamentally different needs than high-bay complexes with 28–35+ foot clearances.
          </div>
        </div>

        <!-- FAQ 5: Outdoor lighting -->
        <div class="faq-item">
          <button
            class="faq-question"
            aria-expanded="false"
            aria-controls="faq-answer-5"
            id="faq-btn-5"
          >
            How do I control spill light and light trespass on outdoor courts?
            <span class="faq-icon" aria-hidden="true">
              <svg class="faq-plus" viewBox="0 0 10 10" fill="currentColor"><path d="M4 0h2v10H4zM0 4h10v2H0z"/></svg>
            </span>
          </button>
          <div class="faq-answer" id="faq-answer-5" role="region" aria-labelledby="faq-btn-5">
            Spill light and light trespass are governed by local ordinances and, in some jurisdictions, IES RP-6 Outdoor Sports Lighting standards. The most effective control strategies are fixture aiming angles, optic selection (full-cutoff vs. semi-cutoff housings), and pole placement relative to property lines. Photometric modeling lets us predict exactly how much light falls beyond the court boundaries before equipment is purchased. In sensitive environments — residential adjacencies, dark-sky zones, or areas with strict municipal codes — we design specifically to minimize trespass while maintaining adequate court illuminance.
          </div>
        </div>

        <!-- FAQ 6: Controls -->
        <div class="faq-item">
          <button
            class="faq-question"
            aria-expanded="false"
            aria-controls="faq-answer-6"
            id="faq-btn-6"
          >
            What lighting controls do you recommend for racquet sports facilities?
            <span class="faq-icon" aria-hidden="true">
              <svg class="faq-plus" viewBox="0 0 10 10" fill="currentColor"><path d="M4 0h2v10H4zM0 4h10v2H0z"/></svg>
            </span>
          </button>
          <div class="faq-answer" id="faq-answer-6" role="region" aria-labelledby="faq-btn-6">
            For most facilities, we recommend a networked 0-10V dimming system with court-by-court zone control, scheduling automation, and occupancy sensing. This combination allows operators to bring courts up to full brightness only when occupied, dim to maintenance levels during off-hours, and create preset scenes for different programming types (recreational play, clinics, leagues, tournaments). Our EnergyManager platform layers real-time consumption monitoring and automated scheduling on top of the control hardware, giving operators a single dashboard for the entire facility.
          </div>
        </div>

        <!-- FAQ 7: Energy savings -->
        <div class="faq-item">
          <button
            class="faq-question"
            aria-expanded="false"
            aria-controls="faq-answer-7"
            id="faq-btn-7"
          >
            How much can I realistically save by upgrading to LED court lighting?
            <span class="faq-icon" aria-hidden="true">
              <svg class="faq-plus" viewBox="0 0 10 10" fill="currentColor"><path d="M4 0h2v10H4zM0 4h10v2H0z"/></svg>
            </span>
          </button>
          <div class="faq-answer" id="faq-answer-7" role="region" aria-labelledby="faq-btn-7">
            The energy savings from replacing metal halide, HPS, or older LED systems with properly designed modern LED lighting typically range from 40% to 70% on lighting-specific energy costs. The exact figure depends on current system wattage, hours of operation, local utility rates, and how aggressively you leverage controls. With smart controls and occupancy sensing, additional operational savings of 20–35% are common. A well-designed 8-court indoor facility replacing metal halide fixtures can often achieve payback in 3–5 years, even before utility rebates are factored in.
          </div>
        </div>

        <!-- FAQ 8: Photometric studies -->
        <div class="faq-item">
          <button
            class="faq-question"
            aria-expanded="false"
            aria-controls="faq-answer-8"
            id="faq-btn-8"
          >
            Do I really need a photometric study, or can I just pick a fixture?
            <span class="faq-icon" aria-hidden="true">
              <svg class="faq-plus" viewBox="0 0 10 10" fill="currentColor"><path d="M4 0h2v10H4zM0 4h10v2H0z"/></svg>
            </span>
          </button>
          <div class="faq-answer" id="faq-answer-8" role="region" aria-labelledby="faq-btn-8">
            Skipping a photometric study is one of the most expensive decisions a facility owner can make. Fixture selection without computational modeling routinely results in insufficient illuminance levels, poor uniformity, unexpected glare, shadow zones from structural obstructions, and systems that fail to meet sport-specific standards. Retrofit projects are particularly risky — the photometric assumptions that worked for your previous fixture type often don't transfer directly to LED replacements with different beam distributions. A photometric study typically costs a fraction of one fixture installation error.
          </div>
        </div>

        <!-- FAQ 9: Utility rebates -->
        <div class="faq-item">
          <button
            class="faq-question"
            aria-expanded="false"
            aria-controls="faq-answer-9"
            id="faq-btn-9"
          >
            Are utility rebates available for court lighting upgrades?
            <span class="faq-icon" aria-hidden="true">
              <svg class="faq-plus" viewBox="0 0 10 10" fill="currentColor"><path d="M4 0h2v10H4zM0 4h10v2H0z"/></svg>
            </span>
          </button>
          <div class="faq-answer" id="faq-answer-9" role="region" aria-labelledby="faq-btn-9">
            Yes — and they can be substantial. Most U.S. investor-owned utilities offer prescriptive or custom rebate programs for commercial LED lighting upgrades. Rebates for sports facility lighting projects typically range from $0.05 to $0.25 per kilowatt-hour saved, and custom incentive programs for large facilities can reach five- or six-figure rebate amounts. The key is identifying rebate eligibility early in the design process, because fixture specifications and lighting levels must often meet program requirements to qualify. Our team identifies and documents rebate opportunities as part of every project.
          </div>
        </div>

        <!-- FAQ 10: Design reviews -->
        <div class="faq-item">
          <button
            class="faq-question"
            aria-expanded="false"
            aria-controls="faq-answer-10"
            id="faq-btn-10"
          >
            What does a complimentary court lighting design review include?
            <span class="faq-icon" aria-hidden="true">
              <svg class="faq-plus" viewBox="0 0 10 10" fill="currentColor"><path d="M4 0h2v10H4zM0 4h10v2H0z"/></svg>
            </span>
          </button>
          <div class="faq-answer" id="faq-answer-10" role="region" aria-labelledby="faq-btn-10">
            Our complimentary design review is a working session — not a sales call. We review your facility plans, existing system documentation, or project scope and provide specific, actionable feedback on: lighting level adequacy for your intended use, design approach and fixture placement strategy, controls and energy management options, rebate qualification potential, and common pitfalls for your project type. Most reviews are completed in a single 45–60 minute meeting. There's no cost, no obligation, and no manufacturer agenda. We'll tell you exactly what we see — including if your current direction is already solid.
          </div>
        </div>

      </div>
    </div>
  </section>


  <!-- ============================================================
       SITE FOOTER
  ============================================================ -->
  <footer id="site-footer" role="contentinfo">
    <div class="container">
      <div class="footer-inner">
        <div class="footer-copy">
          <p>&copy; 2026 Energywise Court Solutions. All rights reserved.</p>
          <p style="margin-top:4px;">Design-first court lighting for racquet sports facilities.</p>
        </div>
        <nav class="footer-links" aria-label="Footer navigation">
          <a href="mailto:info@energywisesolutions.com">Contact Us</a>
          <a href="#download-form">Download Guide</a>
          <a href="#design-review">Design Review</a>
          <a href="#faq">FAQ</a>
        </nav>
      </div>
    </div>
  </footer>


  <!-- ============================================================
       JAVASCRIPT: FAQ Accordion + Form Enhancement
  ============================================================ -->
  <script>
    /* --- FAQ Accordion ---------------------------------------- */
    (function () {
      const accordion = document.getElementById('faq-accordion');
      if (!accordion) return;

      accordion.addEventListener('click', function (e) {
        const btn = e.target.closest('.faq-question');
        if (!btn) return;

        const isOpen = btn.classList.contains('open');
        const answerId = btn.getAttribute('aria-controls');
        const answer = document.getElementById(answerId);

        // Close all open items
        accordion.querySelectorAll('.faq-question.open').forEach(function (openBtn) {
          openBtn.classList.remove('open');
          openBtn.setAttribute('aria-expanded', 'false');
          const id = openBtn.getAttribute('aria-controls');
          const panel = document.getElementById(id);
          if (panel) panel.classList.remove('open');
        });

        // Toggle clicked item
        if (!isOpen) {
          btn.classList.add('open');
          btn.setAttribute('aria-expanded', 'true');
          if (answer) answer.classList.add('open');
        }
      });
    }());


    /* --- Form: basic client-side validation & UX --------------- */
    (function () {
      const form = document.getElementById('lighting-guide-form');
      if (!form) return;

      form.addEventListener('submit', function (e) {
        e.preventDefault();

        // Highlight empty required fields
        let valid = true;
        form.querySelectorAll('[required]').forEach(function (field) {
          if (!field.value.trim()) {
            field.style.borderColor = '#e05c5c';
            field.focus();
            valid = false;
          } else {
            field.style.borderColor = '';
          }
        });

        if (!valid) return;

        /*
          DEVELOPER NOTE:
          Replace this block with your Zoho CRM WebForm submission or
          Zoho Forms API call. Example using fetch:

          const formData = new FormData(form);
          fetch('YOUR_ZOHO_FORM_ENDPOINT', {
            method: 'POST',
            body: formData
          })
          .then(res => res.json())
          .then(data => { showSuccessState(); })
          .catch(err => { console.error(err); });
        */

        showSuccessState();
      });

      // Clear error state on input
      form.querySelectorAll('input, select, textarea').forEach(function (field) {
        field.addEventListener('input', function () {
          this.style.borderColor = '';
        });
      });

      function showSuccessState() {
        const card = form.closest('.form-card');
        if (!card) return;

        card.innerHTML = [
          '<div style="text-align:center;padding:40px 20px;">',
          '  <div style="',
          '    width:64px;height:64px;border-radius:50%;',
          '    background:rgba(86,171,70,0.12);border:2px solid rgba(86,171,70,0.35);',
          '    display:flex;align-items:center;justify-content:center;',
          '    margin:0 auto 24px;color:#56ab46;',
          '  ">',
          '    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>',
          '  </div>',
          '  <h3 style="font-family:var(--font-display);font-size:26px;color:var(--color-text-primary);margin-bottom:10px;">Your guide is on its way.</h3>',
          '  <p style="font-size:15px;color:var(--color-text-secondary);line-height:1.6;max-width:360px;margin:0 auto 28px;">',
          '    Check your inbox for a link to download <em>The Ultimate Racquet Sports Facility Lighting Guide</em>.',
          '    A member of our team may also follow up to answer any questions.',
          '  </p>',
          '  <a href="https://calendly.com/energywisesolutions/energywise-consult-clone" class="btn btn-secondary" target="_blank">Request a Design Review →</a>',
          '</div>'
        ].join('');
      }
    }());


    /* --- Smooth scroll offset for sticky header -------------- */
    (function () {
      const HEADER_H = 72;
      document.querySelectorAll('a[href^="#"]').forEach(function (link) {
        link.addEventListener('click', function (e) {
          const target = document.querySelector(this.getAttribute('href'));
          if (!target) return;
          e.preventDefault();
          const top = target.getBoundingClientRect().top + window.scrollY - HEADER_H;
          window.scrollTo({ top: top, behavior: 'smooth' });
        });
      });
    }());
  </script>/* End custom CSS */