@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

    :root {
      --blue: #0A4B92;
      --blue-deep: #06356B;
      --green: #23A455;
      --orange: #F9A51A;
      --soft: #F5F9FC;
    }

    * { box-sizing: border-box; }
    html, body {
      max-width: 100%;
      overflow-x: hidden;
    }

    img, svg, canvas, iframe {
      max-width: 100%;
    }

    body {
      margin: 0;
      color: #102033;
      background:
        radial-gradient(circle at 14% 8%, rgba(249, 165, 26, .14), transparent 28rem),
        radial-gradient(circle at 90% 4%, rgba(35, 164, 85, .12), transparent 32rem),
        linear-gradient(180deg, #ffffff 0%, #f6fbff 44%, #ffffff 100%);
      overflow-x: hidden;
    }

    body.menu-open { overflow: hidden; }
    ::selection { background: rgba(249, 165, 26, .34); }

    .noise::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .12;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
      mix-blend-mode: multiply;
    }

    .progress-bar {
      transform-origin: left;
      transform: scaleX(0);
      background: linear-gradient(90deg, var(--blue), var(--green), var(--orange));
    }

    .glass {
      background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .55));
      border: 1px solid rgba(255, 255, 255, .72);
      box-shadow: 0 18px 70px rgba(10, 75, 146, .12);
      backdrop-filter: blur(20px);
    }

    .hero-bg {
      background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .78) 37%, rgba(255, 255, 255, .24) 66%, rgba(255, 255, 255, .05) 100%),
        url('../images/hero-solar-field.jpg');
      background-position: center;
      background-size: cover;
    }

    .sun-rays {
      background:
        conic-gradient(from 190deg, rgba(249, 165, 26, 0), rgba(249, 165, 26, .18), rgba(35, 164, 85, .12), rgba(10, 75, 146, .13), rgba(249, 165, 26, 0));
      animation: spinSlow 26s linear infinite;
      filter: blur(.4px);
    }

    .orb {
      background: radial-gradient(circle, rgba(249, 165, 26, .28), rgba(35, 164, 85, .12) 38%, transparent 70%);
      animation: breathe 8s ease-in-out infinite alternate;
    }

    .section-kicker {
      color: var(--energyGreen);
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-size: .76rem;
    }

    .headline {
      color: #08284c;
      font-weight: 900;
      line-height: .94;
      letter-spacing: 0;
    }

    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .energy-card {
      position: relative;
      overflow: hidden;
      transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, border-color .45s ease;
    }

    .energy-card::after {
      content: "";
      position: absolute;
      inset: -40%;
      background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,.72), transparent 58%);
      transform: translateX(-65%) rotate(8deg);
      transition: transform .8s ease;
    }

    .energy-card:hover {
      transform: translateY(-10px) scale(1.015);
      border-color: rgba(249, 165, 26, .52);
      box-shadow: 0 28px 90px rgba(10, 75, 146, .18);
    }

    .energy-card:hover::after { transform: translateX(65%) rotate(8deg); }

    .project-card img {
      transform: scale(1.02);
      transition: transform .9s cubic-bezier(.2, .8, .2, 1), filter .9s ease;
    }

    .project-card:hover img {
      transform: scale(1.1);
      filter: saturate(1.12) contrast(1.03);
    }

    .marquee-track {
      animation: marquee 34s linear infinite;
    }

    .mobile-panel {
      opacity: 0;
      pointer-events: none;
      transform: translateY(calc(-100% - 6rem));
      transition: opacity .25s ease, visibility .25s ease, transform .42s cubic-bezier(.2, .8, .2, 1);
      visibility: hidden;
    }

    .mobile-panel.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      visibility: visible;
    }

    .loader.done {
      opacity: 0;
      visibility: hidden;
      transition: opacity .6s ease, visibility .6s ease;
    }

    .map-frame {
      filter: saturate(1.05) contrast(1.02);
    }

    @keyframes spinSlow { to { transform: rotate(360deg); } }
    @keyframes breathe { to { transform: scale(1.12) translateY(-8px); opacity: .82; } }
    @keyframes marquee { to { transform: translateX(-50%); } }
    @keyframes floatY {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-14px); }
    }

    @media (max-width: 768px) {
      #siteHeader {
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 10px 32px rgba(10, 75, 146, .12);
      }

      #siteHeader nav {
        height: 4.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
      }

      .brand-link {
        min-width: 0;
        max-width: calc(100vw - 5.25rem);
        gap: .55rem;
      }

      .brand-mark {
        height: 2.6rem !important;
        width: 2.6rem !important;
        flex: 0 0 2.6rem;
      }

      .brand-mark img {
        height: 2.1rem !important;
        width: 2.1rem !important;
      }

      .brand-text {
        min-width: 0;
        overflow: hidden;
      }

      .brand-name {
        font-size: clamp(1.05rem, 5vw, 1.35rem) !important;
        line-height: 1;
        white-space: nowrap;
      }

      .brand-subtitle {
        font-size: .52rem !important;
        letter-spacing: .18em !important;
        line-height: 1.25;
        max-width: 12rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #menuButton {
        flex: 0 0 2.75rem;
      }

      #mobileMenu {
        top: 4.5rem !important;
        max-height: calc(100svh - 4.5rem);
        overflow-y: auto;
        padding: 0 !important;
      }

      #mobileMenu > div {
        gap: 0 !important;
      }

      #mobileMenu .mobile-link {
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(10, 75, 146, .08);
        padding: 1rem 1.25rem !important;
      }

      #mobileMenu .mobile-link:last-child {
        border-bottom: 0;
      }

      .hero-bg {
        background-image:
          linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255,255,255,.82) 48%, rgba(255,255,255,.18) 100%),
          url('../images/hero-solar-field.jpg');
        background-position: 62% center;
        align-items: flex-start;
      }

      .headline {
        line-height: .98;
        overflow-wrap: break-word;
      }

      .hero-title {
        font-size: clamp(2.85rem, 13vw, 4.25rem) !important;
      }

      .project-grid {
        grid-auto-rows: auto !important;
      }

      .project-grid .project-card {
        min-height: 0;
      }

      .project-grid .project-card img {
        flex: none;
        height: 15.5rem;
        width: 100%;
      }

      .testimonial-strip {
        width: max-content !important;
      }

      .testimonial-strip .glass {
        width: min(84vw, 360px);
        padding: 1.25rem;
      }

      .mobile-soft-card {
        border-radius: 1.65rem !important;
      }

      .counter {
        font-size: clamp(2.35rem, 12vw, 3rem) !important;
      }
    }

    @media (max-width: 420px) {
      .brand-link {
        max-width: calc(100vw - 5rem);
      }

      .brand-mark {
        height: 2.35rem !important;
        width: 2.35rem !important;
        flex-basis: 2.35rem;
      }

      .brand-mark img {
        height: 1.92rem !important;
        width: 1.92rem !important;
      }

      .brand-name {
        font-size: clamp(.95rem, 4.8vw, 1.15rem) !important;
      }

      .brand-subtitle {
        font-size: .48rem !important;
        letter-spacing: .14em !important;
        max-width: 9.8rem;
      }

      .hero-title {
        font-size: clamp(2.55rem, 12.5vw, 3.2rem) !important;
      }

      .headline:not(.hero-title) {
        font-size: clamp(2.2rem, 10.5vw, 2.75rem) !important;
      }

      .section-kicker {
        letter-spacing: .12em;
      }

      .project-grid .project-card img {
        height: 13.75rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
      }
      .reveal { opacity: 1; transform: none; }
    }