/* =========================================================
       ROOT
    ========================================================= */

    :root {
      --green: #fc9f03;
      --green-2: #83ae4c;
      --green-dark: #456923;
      --green-soft: #edf4e6;

      --solar: #efc447;
      --solar-dark: #d8a82d;

      --navy: #101b1c;
      --navy-2: #172728;
      --navy-3: #223436;

      --cream: #faf9f5;
      --cream-2: #f4f4ef;

      --white: #ffffff;

      --text: #17201d;
      --text-2: #35403b;
      --muted: #727d76;

      --line: #e5e9e3;

      --container: 1220px;

      --radius-xs: 4px;
      --radius-sm: 7px;
      --radius: 12px;
      --radius-lg: 18px;

      --shadow-sm:
        0 10px 35px rgba(13, 28, 22, 0.06);

      --shadow:
        0 24px 70px rgba(13, 28, 22, 0.12);

      --shadow-lg:
        0 30px 90px rgba(13, 28, 22, 0.17);

      --ease:
        cubic-bezier(.22, .61, .36, 1);
    }

    /* =========================================================
       RESET
    ========================================================= */

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 90px;
    }

    body {
      margin: 0;
      overflow-x: hidden;

      color: var(--text);
      background: var(--white);

      font-family: "Manrope", sans-serif;
      font-size: 16px;
      line-height: 1.72;

      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body.no-scroll {
      overflow: hidden;
    }

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

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

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

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    h1,
    h2,
    h3,
    h4,
    p {
      margin-top: 0;
    }

    h1,
    h2,
    h3,
    h4 {
      line-height: 1.08;
      letter-spacing: -0.042em;
    }

    ::selection {
      color: #fff;
      background: var(--green);
    }

    :focus-visible {
      outline: 3px solid rgba(111, 155, 57, .35);
      outline-offset: 3px;
    }

    .skip-link {
      position: fixed;
      z-index: 10000;
      top: -100px;
      left: 20px;

      padding: 10px 16px;

      color: #fff;
      background: var(--navy);

      border-radius: 6px;
    }

    .skip-link:focus {
      top: 20px;
    }

    /* =========================================================
       UTILITIES
    ========================================================= */

    .container {
      width: min(calc(100% - 40px), var(--container));
      margin-inline: auto;
    }

    .section {
      position: relative;
      padding: 65px 0;
    }

    .section-compact {
      padding: 72px 0;
    }

    .bg-cream {
      background: var(--cream);
    }

    .bg-green-soft {
      background: var(--green-soft);
    }

    .bg-dark {
      color: #fff;
      background: var(--navy);
    }

    .green {
      color: var(--green);
    }

    .solar {
      color: var(--solar);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;

      margin-bottom: 13px;

      color: var(--green-dark);

      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      width: 25px;
      height: 2px;

      content: "";

      background: var(--solar);
    }

    .bg-dark .eyebrow {
      color: #bed995;
    }

    .section-head {
      max-width: 720px;
      margin-bottom: 46px;
    }

    .section-head.center {
      margin-inline: auto;
      text-align: center;
    }

    .section-title {
        margin-bottom: 17px;
    font-size: clamp(2.05rem, 2.3vw, 3.15rem);
    font-weight: 600;
    width: 690px;
    letter-spacing: 0.4px;
    }

    .section-copy {
         margin-bottom: 0;
    color: #000;
    font-size: .99rem;
    line-height: 1.52;
    letter-spacing: 0.4px;
    width:505px;
    }

    .bg-dark .section-copy {
      color: rgba(255,255,255,.65);
    }

    /* =========================================================
       BUTTONS
    ========================================================= */

    .btn {
      position: relative;
      isolation: isolate;

      display: inline-flex;
      min-height: 40px;

      align-items: center;
      justify-content: center;
      gap: 10px;

      overflow: hidden;

      padding: 0 18px;

      border: 1px solid transparent;
      border-radius: 6px;

      font-size: .79rem;
      font-weight: 800;
      letter-spacing: .01em;

      transition:
        color .35s var(--ease),
        background .35s var(--ease),
        border-color .35s var(--ease),
        transform .35s var(--ease),
        box-shadow .35s var(--ease);
    }

    .btn::before {
      position: absolute;
      z-index: -1;
      inset: 0;

      content: "";

      background: var(--navy);

      transform: translateX(-102%);

      transition: transform .4s var(--ease);
    }

    .btn:hover::before {
      transform: translateX(0);
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn svg {
      width: 17px;
      height: 17px;

      transition: transform .3s var(--ease);
    }

    .btn:hover svg {
      transform: translateX(3px);
    }

    .btn-primary {
      color: #fff;
      background: var(--green);

      box-shadow:
        0 12px 30px rgba(80, 124, 38, .2);
    }

    .btn-primary:hover {
      box-shadow:
        0 17px 42px rgba(19, 31, 24, .18);
    }

    .btn-dark {
      color: #fff;
      background: var(--navy);
    }

    .btn-dark::before {
      background: var(--green);
    }

    .btn-white {
      color: var(--navy);
      background: #fff;
    }

    .btn-white::before {
      background: var(--green);
    }

    .btn-white:hover {
      color: #fff;
    }

    .btn-outline-light {
         color: #171d1d;
    border-color: rgb(11 21 22);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(8px);
    }

    .btn-outline-light::before {
      background: var(--green);
    }

    /* =========================================================
       TOP BAR
    ========================================================= */

    .topbar {
      position: relative;
      z-index: 1100;

      color: rgba(255,255,255,.72);
      background: #0b1516;

      font-size: .68rem;
    }

    .topbar-inner {
      display: flex;
      min-height: 34px;

      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .topbar-group {
      display: flex;
      align-items: center;
      gap: 21px;
    }

    .topbar a,
    .topbar span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
          transition: color .2s ease;
    color: #e9e9f1;
    letter-spacing: 0.6px;
    font-size: 12px;
    }

    .topbar svg {
      width: 13px;
      height: 13px;

      color: var(--solar);
    }

    .topbar a {
          transition: color .2s ease;
    color: #e9e9f1;
    letter-spacing: 0.6px;
    font-size: 12px;
    }

    .topbar a:hover {
      color: #fff;
    }

    /* =========================================================
       HEADER
    ========================================================= */

    .site-header {
      position: sticky;
      z-index: 1000;
      top: 0;

      height: 76px;

      border-bottom: 1px solid rgba(16, 27, 28, .07);

      background: rgba(255,255,255,.98);

      transition:
        height .3s ease,
        background .3s ease,
        box-shadow .3s ease;
    }

    .site-header.scrolled {
      height: 68px;

      background: rgba(255,255,255,.95);

      box-shadow:
        0 10px 38px rgba(15, 28, 22, .08);

      backdrop-filter: blur(13px);
    }

    .header-inner {
      position: relative;

      display: flex;
      height: 100%;

      align-items: center;
      gap: 26px;
    }

    /* LOGO */

    .brand {
      display: inline-flex;
      flex: 0 0 auto;

      align-items: center;
      gap: 10px;

      /*margin-right: auto;*/
    }
    /*.brand::after{*/
    /*        content: "";*/
    /*position: absolute;*/
    /*width: 0;*/
    /*height: 0;*/
    /*display: inline-block;*/
    /*z-index: 99;*/
    /*border-right: 10px solid transparent;*/
    /*border-top: 25px solid #fff;*/
    /*right: -10px;*/
    /*bottom: 0;*/
    /*}*/

    .brand-mark {
      width: 43px;
      height: 43px;
      flex: 0 0 43px;
    }

    .brand-copy {
      line-height: 1;
    }

    .brand-main {
      display: block;

      color: var(--navy);

      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: -.045em;
    }

    .brand-sub {
      display: block;

      margin-top: 5px;

      color: var(--green-dark);

      font-size: .54rem;
      font-weight: 800;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    /* NAV */

    .main-nav {
        display: flex;
    align-items: center;
    margin-right: auto;
    margin-left: 140px;
    }

    .nav-list {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .nav-item {
      position: relative;
    }

    .nav-link {
        position: relative;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border: 0;
    color: #29342f;
    background: transparent;
    font-size: 0.89rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color .25s ease;
    }

    .nav-link::after {
      position: absolute;
      right: 10px;
      bottom: 4px;
      left: 10px;

      height: 2px;

      content: "";

      background: var(--green);

      transform: scaleX(0);
      transform-origin: right;

      transition: transform .3s var(--ease);
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--green-dark);
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    .nav-link svg {
      width: 12px;
      height: 12px;
    }

    /* DROPDOWN */

    .dropdown {
      position: absolute;
      top: calc(100% + 12px);
      left: 0;

      min-width: 245px;

      padding: 10px;

      border: 1px solid var(--line);
      border-radius: 8px;

      visibility: hidden;
      opacity: 0;

      background: #fff;

      box-shadow: var(--shadow);

      transform: translateY(7px);

      pointer-events: none;

      transition:
        opacity .24s ease,
        visibility .24s ease,
        transform .24s ease;
    }

    .dropdown::before {
      position: absolute;
      top: -16px;
      right: 0;
      left: 0;

      height: 18px;

      content: "";
    }

    .nav-item:hover > .dropdown,
    .nav-item:focus-within > .dropdown {
      visibility: visible;
      opacity: 1;

      transform: translateY(0);

      pointer-events: auto;
    }

    .dropdown a {
      display: flex;
      min-height: 42px;

      align-items: center;
      justify-content: space-between;
      gap: 12px;

      padding: 8px 11px;

      border-radius: 5px;

      color: #48514d;

      font-size: .73rem;
      font-weight: 700;

      transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
    }

    .dropdown a::after {
      content: "→";

      color: #111;

      opacity: 0;
      transform: translateX(-4px);

      transition:
        opacity .2s ease,
        transform .2s ease;
    }

    .dropdown a:hover {
        color: #111;
    background: #fc9f03;
    transform: scale(1.05);
    font-size:0.77rem;
    }

    .dropdown a:hover::after {
      opacity: 1;
      transform: translateX(0);
    }

    .header-btn {
      min-height: 42px;

      padding-inline: 18px;

      font-size: .71rem;
    }

    .menu-toggle {
      display: none;

      width: 43px;
      height: 43px;

      align-items: center;
      justify-content: center;

      border: 0;
      border-radius: 6px;

      color: #fff;
      background: var(--navy);
    }

    .menu-toggle svg {
      width: 20px;
    }

    /* =========================================================
       HERO
    ========================================================= */

    .hero {
      position: relative;

      min-height: clamp(600px, 78vh, 760px);

      overflow: hidden;

      color: #fff;
      background: var(--navy);
    }

    .hero-slider,
    .hero-slide {
      position: absolute;
      inset: 0;
    }

    .hero-slide {
      visibility: hidden;
      opacity: 0;

      transition:
        opacity .9s var(--ease),
        visibility .9s;
    }

    .hero-slide.active {
      visibility: visible;
      opacity: 1;
    }

    .hero-image {
      position: absolute;
      inset: -18px;

      background-position: center;
      background-size: cover;

      transform: scale(1.03);

      transition: transform 7s linear;
          
    height: 600px;
  
    background-repeat: no-repeat;
    }

    .hero-slide.active .hero-image {
      transform: scale(1.1);
    }

    .hero-slide::after {
      position: absolute;
      inset: 0;

      content: "";

      /*background:*/
      /*  radial-gradient(*/
      /*    circle at 85% 29%,*/
      /*    rgba(239,196,71,.24),*/
      /*    transparent 28%*/
      /*  ),*/
      /*  linear-gradient(*/
      /*    90deg,*/
      /*    rgba(7,14,15,.96) 0%,*/
      /*    rgba(7,14,15,.84) 36%,*/
      /*    rgba(7,14,15,.36) 66%,*/
      /*    rgba(7,14,15,.12) 100%*/
      /*  ),*/
      /*  linear-gradient(*/
      /*    to top,*/
      /*    rgba(7,14,15,.38),*/
      /*    transparent 50%*/
      /*  );*/
      /*  opacity:0.8;*/
    }

    .hero-grid {
      position: absolute;
      z-index: 3;
      inset: 0;

      opacity: .14;

      background-image:
        linear-gradient(
          rgba(255,255,255,.045) 1px,
          transparent 1px
        ),
        linear-gradient(
          90deg,
          rgba(255,255,255,.045) 1px,
          transparent 1px
        );

      background-size: 74px 74px;

      mask-image:
        linear-gradient(
          90deg,
          rgba(0,0,0,1),
          rgba(0,0,0,.25) 70%,
          transparent
        );

      pointer-events: none;
    }

    .hero-glow {
      position: absolute;
      z-index: 4;
      top: -130px;
      right: -110px;

      width: 470px;
      height: 470px;

      border-radius: 50%;

      opacity: .32;

      background:
        radial-gradient(
          circle,
          rgba(255,218,106,.85) 0%,
          rgba(239,196,71,.21) 34%,
          transparent 67%
        );

      animation: heroGlow 7s ease-in-out infinite alternate;

      pointer-events: none;
    }

    @keyframes heroGlow {
      to {
        transform:
          translate(-35px, 28px)
          scale(1.09);
      }
    }

    .hero-energy-line {
      position: absolute;
      z-index: 5;

      top: 32%;
      right: -180px;

      width: 520px;
      height: 1px;

      opacity: .5;

      background:
        linear-gradient(
          90deg,
          transparent,
          var(--solar),
          var(--green),
          transparent
        );

      transform: rotate(-23deg);

      animation: energyPulse 4.5s ease-in-out infinite alternate;
    }

    @keyframes energyPulse {
      from {
        opacity: .15;
        transform:
          rotate(-23deg)
          translateX(-25px);
      }

      to {
        opacity: .65;
        transform:
          rotate(-23deg)
          translateX(30px);
      }
    }

    .hero-particles {
      position: absolute;
      z-index: 6;
      inset: 0;

      pointer-events: none;
    }

    .hero-particles span {
      position: absolute;

      width: 4px;
      height: 4px;

      border-radius: 50%;

      background: var(--solar);

      box-shadow:
        0 0 12px rgba(239,196,71,.9);

      animation:
        particleFloat 8s ease-in-out infinite alternate;
    }

    .hero-particles span:nth-child(1) {
      top: 20%;
      left: 59%;
    }

    .hero-particles span:nth-child(2) {
      top: 37%;
      left: 70%;

      animation-delay: -2s;
    }

    .hero-particles span:nth-child(3) {
      top: 67%;
      left: 65%;

      animation-delay: -4s;
    }

    .hero-particles span:nth-child(4) {
      top: 27%;
      left: 84%;

      animation-delay: -5s;
    }

    .hero-particles span:nth-child(5) {
      top: 77%;
      left: 88%;

      animation-delay: -3s;
    }

    @keyframes particleFloat {
      to {
        opacity: .2;

        transform:
          translate(18px, -29px);
      }
    }

    .hero-container {
      position: relative;
      z-index: 10;

      display: flex;
      min-height: clamp(600px, 78vh, 760px);

      align-items: center;
    }

    .hero-content {
      max-width: 720px;

      padding: 70px 0 120px;
    }

    .hero-kicker {
      display: inline-flex;

      align-items: center;
      gap: 10px;

      margin-bottom: 20px;

      padding: 8px 12px;

      border:
        1px solid rgba(255,255,255,.15);
      border-left:
        3px solid var(--green);

      border-radius: 4px;

      color: rgba(255,255,255,.82);
      background: rgba(7,14,15,.37);

      backdrop-filter: blur(9px);

      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .hero h1 {
        max-width: 700px;
    margin-bottom: 21px;
    color: #1f53fd;
    font-size: clamp(3rem, 2.2vw, 4.85rem);
    font-weight: 800;
    line-height: .99;
    letter-spacing: 0.3px;
    }

    .hero p {
        max-width: 570px;
    margin-bottom: 20px;
    color: #27261d;
    font-size: clamp(.97rem, 1vw, 1.08rem);
    line-height: 1.8;
    letter-spacing: 0.5px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 11px;
    }

    .hero-slide:not(.active)
      .hero-content > * {
      opacity: 0;
      transform: translateY(24px);
    }

    .hero-slide.active
      .hero-content > * {
      animation:
        heroReveal .8s var(--ease) both;
    }

    .hero-slide.active
      .hero-content > *:nth-child(2) {
      animation-delay: .08s;
    }

    .hero-slide.active
      .hero-content > *:nth-child(3) {
      animation-delay: .16s;
    }

    .hero-slide.active
      .hero-content > *:nth-child(4) {
      animation-delay: .24s;
    }

    @keyframes heroReveal {
      from {
        opacity: 0;
        transform: translateY(24px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* HERO FLOAT CARD */

    .hero-call {
      position: absolute;
      z-index: 15;

      right:
        max(
          20px,
          calc((100vw - var(--container)) / 2)
        );

      bottom: 98px;

      display: flex;

      align-items: center;
      gap: 11px;

      padding: 9px 15px 9px 9px;

      border:
        1px solid rgba(255,255,255,.15);
      border-radius: 50px;

      color: #fff;
      background: rgba(8,16,17,.65);

      backdrop-filter: blur(11px);
    }

    .hero-call-icon {
      display: grid;

      width: 39px;
      height: 39px;

      place-items: center;

      border-radius: 50%;

      background: var(--green);
    }

    .hero-call-icon svg {
      width: 17px;
    }

    .hero-call small {
      display: block;

      margin-bottom: 1px;

      color: rgba(255,255,255,.55);

      font-size: .55rem;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .hero-call strong {
      font-size: .78rem;
    }

    /* CONTROLS */

    .hero-controls {
      position: absolute;
      z-index: 20;

      right: 0;
      bottom: 28px;
      left: 0;
    }

    .hero-controls-inner {
      display: flex;

      align-items: center;
      justify-content: space-between;
    }

    .hero-dots {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .hero-dot {
      width: 8px;
      height: 8px;

      padding: 0;

      border: 0;
      border-radius: 99px;

      background: rgba(255,255,255,.4);

      transition:
        width .3s ease,
        background .3s ease;
    }

    .hero-dot.active {
      width: 28px;

      background: var(--green);
    }

    .hero-arrows {
      display: flex;
      gap: 8px;
    }

    .hero-arrow {
      display: grid;

      width: 43px;
      height: 43px;

      place-items: center;

      border:
        1px solid rgba(255,255,255,.22);

      border-radius: 50%;

      color: #fff;
      background: rgba(8,16,17,.45);

      backdrop-filter: blur(8px);

      transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
    }

    .hero-arrow:hover {
      border-color: var(--green);
      background: var(--green);

      transform: translateY(-2px);
    }

    .hero-arrow svg {
      width: 18px;
    }

    /* =========================================================
       MARQUEE
    ========================================================= */

    .marquee {
      overflow: hidden;

      border-bottom: 1px solid var(--line);

      background: #fff;
    }

    .marquee-track {
      display: flex;
      width: max-content;

      animation:
        marqueeMove 33s linear infinite;
    }

    .marquee-item {
      display: flex;
      min-height: 62px;

      align-items: center;
      gap: 20px;

      padding-inline: 29px;

      color: #aab0ab;

      font-size:
        clamp(.95rem, 1.5vw, 1.18rem);

      font-weight: 800;

      white-space: nowrap;
    }

    .marquee-item::after {
      width: 7px;
      height: 7px;

      content: "";

      border-radius: 50%;

      background: var(--green);
    }

    @keyframes marqueeMove {
      to {
        transform: translateX(-50%);
      }
    }

    /* =========================================================
       ABOUT
    ========================================================= */

    .about-grid {
      display: grid;

      grid-template-columns:
        1.08fr .92fr;

      align-items: center;
      gap: 76px;
    }

    .about-visual {
      position: relative;

      min-height: 570px;
    }

    .about-photo {
      position: absolute;

      overflow: hidden;

      background: #dde3dd;

      box-shadow: var(--shadow);
    }

    .about-photo img {
      width: 100%;
      height: 100%;

      object-fit: cover;

      transition:
        transform .8s var(--ease);
    }

    .about-photo:hover img {
      transform: scale(1.05);
    }

    .about-photo.main {
      top: 0;
      left: 0;

      width: 73%;
      height: 74%;
    }

    .about-photo.secondary {
      right: 0;
      bottom: 0;

      width: 52%;
      height: 53%;

      border:
        8px solid var(--white);
    }

    .about-photo.small {
      bottom: 2%;
      left: 7%;

      width: 27%;
      height: 31%;

      border:
        7px solid var(--white);
    }

    .about-info-badge {
      position: absolute;
      z-index: 5;

      top: 48%;
      right: 6%;

      width: 145px;

      padding: 18px;

      color: #fff;
      background: var(--navy);

      box-shadow: var(--shadow);

      border-left:
        4px solid var(--solar);
    }

    .about-info-badge small {
      display: block;

      margin-bottom: 4px;

      color: #bed995;

      font-size: .56rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .about-info-badge strong {
      display: block;

      margin-bottom: 5px;

      font-size: 1.55rem;
      line-height: 1;
    }

    .about-info-badge span {
      color: rgba(255,255,255,.62);

      font-size: .64rem;
      line-height: 1.5;
    }

    .about-points {
      display: grid;

      grid-template-columns:
        repeat(2, minmax(0,1fr));

      gap: 19px;

      margin: 28px 0 31px;
    }

    .about-point {
      display: flex;
      gap: 12px;
    }

    .mini-icon {
      display: grid;

      width: 39px;
      height: 39px;
      flex: 0 0 39px;

      place-items: center;

      border-radius: 50%;

      color: var(--green-dark);
      background: var(--green-soft);
    }

    .mini-icon svg {
          width: 21px;
    height: 21px;
    margin-left: 8px;
    margin-top: 8px;
    }

    .about-point strong {
      display: block;

      margin-bottom: 2px;

      font-size: .82rem;
    }

    .about-point span {
      display: block;

      color: var(--muted);

      font-size: .7rem;
      line-height: 1.55;
    }

    /* =========================================================
       PRODUCTS
    ========================================================= */

    .products-shell {
      display: grid;

      grid-template-columns:
        .86fr 1.14fr;

      gap: 22px;
    }

    .product-feature {
      position: relative;

      min-height: 650px;

      overflow: hidden;

      color: #fff;
      background: var(--navy);
    }

    .product-feature img {
      position: absolute;
      inset: 0;

      width: 100%;
      height: 100%;

      /*object-fit: cover;*/

      transition:
        transform .85s var(--ease);
    }

    .product-feature:hover img {
      transform: scale(1.055);
    }

    .product-feature::after {
      position: absolute;
      inset: 0;

      content: "";

      background:
        linear-gradient(
          to top,
          rgba(7,16,17,.95) 7%,
          rgba(7,16,17,.53) 52%,
          rgba(7,16,17,.07) 85%
        );
    }

    .feature-content {
      position: absolute;
      z-index: 2;

      right: 28px;
      bottom: 30px;
      left: 28px;
    }

    .feature-index {
      display: block;

      margin-bottom: 8px;

      color: #c5dc9e;

      font-size: .61rem;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .feature-content h3 {
      max-width: 350px;

      margin-bottom: 12px;

      font-size:
        clamp(1.8rem, 3vw, 2.45rem);
    }

    .feature-content p {
      max-width: 430px;

      margin-bottom: 22px;

      color: rgba(255,255,255,.65);

      font-size: .78rem;
    }

    .product-grid {
      display: grid;

      grid-template-columns:
        repeat(2,minmax(0,1fr));

      gap: 18px;
    }

    .product-card {
      overflow: hidden;

      border: 1px solid var(--line);

      background: #fff;

      transition:
        transform .35s var(--ease),
        box-shadow .35s ease,
        border-color .35s ease;
    }

    .product-card:hover {
      border-color:
        rgba(111,155,57,.3);

      box-shadow: var(--shadow);

      transform: translateY(-6px);
    }

    .product-card.wide {
      grid-column: 1 / -1;

      display: grid;

      grid-template-columns:
        .8fr 1.2fr;
    }

    .product-image {
      position: relative;

      height: 195px;

      overflow: hidden;

      background: #e3e7e2;
    }

    .product-card.wide
      .product-image {
      height: 100%;
      min-height: 215px;
    }

    .product-image img {
      width: 100%;
      height: 100%;

      object-fit: cover;

      transition:
        transform .7s var(--ease);
    }

    .product-card:hover
      .product-image img {
      transform: scale(1.06);
    }

    .product-icon {
      position: absolute;

      right: 14px;
      bottom: 14px;

      display: grid;

      width: 40px;
      height: 40px;

      place-items: center;

      border-radius: 50%;

      color: #fff;
      background: var(--green);

      box-shadow:
        0 8px 26px rgba(17,30,22,.18);
    }

    .product-icon svg {
      width: 17px;
    }

    .product-body {
      padding: 22px 21px 21px;
    }

    .product-meta {
      display: block;

      margin-bottom: 7px;

      color: var(--green-dark);

      font-size: .57rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .product-body h3 {
      margin-bottom: 9px;

      font-size: 1.05rem;
      letter-spacing: -.025em;
    }

    .product-body p {
      margin-bottom: 17px;

      color: var(--muted);

      font-size: .76rem;
      line-height: 1.72;
    }

    .text-link {
      display: inline-flex;

      align-items: center;
      gap: 7px;

      color: var(--navy);

      font-size: .65rem;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .text-link svg {
      width: 15px;

      color: var(--green);

      transition:
        transform .25s ease;
    }

    .text-link:hover svg {
      transform: translateX(4px);
    }

    /* =========================================================
       SOLUTIONS
    ========================================================= */

    .split-heading {
      display: grid;

      grid-template-columns:
        1fr .75fr;

      align-items: end;
      gap: 70px;

      margin-bottom: 44px;
    }

    .split-heading p {
      margin-bottom: 3px;

      color: var(--muted);

      font-size: .88rem;
      line-height: 1.8;
    }

    .solutions-grid {
      display: grid;

      grid-template-columns:
        repeat(2,minmax(0,1fr));

      gap: 18px;
    }

    .solution-card {
      position: relative;

      min-height: 540px;

      overflow: hidden;

      color: #fff;
      background: var(--navy);
      border-radius:10px;
    }

    .solution-card img {
      position: absolute;
      inset: 0;

      width: 100%;
      height: 100%;

      object-fit: cover;

      transition:
        transform .8s var(--ease);
    }

    .solution-card:hover img {
      transform: scale(1.055);
    }

    .solution-card::after {
      position: absolute;
      inset: 0;

      content: "";

      background:
        linear-gradient(
          to top,
          rgba(7,15,17,.97) 3%,
          rgba(7,15,17,.65) 47%,
          rgba(7,15,17,.08) 88%
        );
    }

    .solution-body {
      position: absolute;
      z-index: 2;

      right: 30px;
      bottom: 30px;
      left: 30px;
    }

    .solution-label {
      display: inline-flex;

      margin-bottom: 11px;

      color: #c1dc98;

      font-size: .58rem;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .solution-body h3 {
      margin-bottom: 12px;

      font-size:
        clamp(1.55rem, 2.5vw, 2.1rem);
    }

    .solution-body p {
      max-width: 480px;

      margin-bottom: 17px;

      color: rgba(255,255,255,.67);

      font-size: .77rem;
      line-height: 1.7;
    }

    .solution-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;

      margin-bottom: 21px;
    }

    .solution-tags span {
      padding: 5px 8px;

      border:
        1px solid rgba(255,255,255,.15);
      border-radius: 20px;

      color: rgba(255,255,255,.77);
      background:
        rgba(255,255,255,.045);

      backdrop-filter: blur(7px);

      font-size: .57rem;
      font-weight: 700;
    }

    /* =========================================================
       WHY US
    ========================================================= */

    .why-grid {
      display: grid;

      grid-template-columns:
        .95fr 1.05fr;

      align-items: stretch;
      gap: 65px;
    }

    .why-photo {
      position: relative;

      min-height: 630px;

      overflow: hidden;

      background: #dde2dc;
    }

    .why-photo img {
      width: 100%;
      height: 630px;

      object-fit: cover;
    }

    .why-photo-overlay {
      position: absolute;

      right: 20px;
      bottom: 20px;
      left: 20px;

      padding: 20px 21px;

      color: #fff;
      background:
        rgba(10,21,22,.82);

      border-left:
        4px solid var(--solar);

      backdrop-filter: blur(10px);
    }

    .why-photo-overlay small {
      display: block;

      margin-bottom: 3px;

      color: #c5dda0;

      font-size: .55rem;
      font-weight: 800;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .why-photo-overlay strong {
      font-size: .89rem;
    }

    .why-list {
      margin-top: 30px;

      border-top:
        1px solid var(--line);
    }

    .why-item {
      display: grid;

      grid-template-columns:
        50px 1fr;

      gap: 17px;

      padding: 19px 0;

      border-bottom:
        1px solid var(--line);

      transition:
        padding-left .25s ease,
        background .25s ease;
    }

    .why-item:hover {
      padding-left: 9px;
    }

    .why-number {
      color: var(--green);

      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .07em;
    }

    .why-item h3 {
      margin-bottom: 5px;

      font-size: .95rem;
      letter-spacing: -.02em;
    }

    .why-item p {
      margin-bottom: 0;

      color: var(--muted);

      font-size: .73rem;
      line-height: 1.65;
    }

    /* =========================================================
       PROCESS
    ========================================================= */

    .process-section {
      position: relative;

      overflow: hidden;

      background:
        radial-gradient(
          circle at 90% 10%,
          rgba(111,155,57,.13),
          transparent 30%
        ),
        var(--navy);
    }

    .process-grid {
      position: relative;

      display: grid;

      grid-template-columns:
        repeat(5,minmax(0,1fr));

      gap: 20px;

      margin-top: 57px;
    }

    .process-grid::before {
      position: absolute;

      top: 31px;
      right: 9%;
      left: 9%;

      height: 1px;

      content: "";

      background:
        linear-gradient(
          90deg,
          rgba(111,155,57,.25),
          rgba(239,196,71,.65),
          rgba(111,155,57,.25)
        );
    }

    .energy-runner {
      position: absolute;
      z-index: 1;

      top: 30px;
      left: 8%;

      width: 15%;
      height: 2px;

      background:
        linear-gradient(
          90deg,
          transparent,
          var(--solar),
          #fff7c4,
          var(--green),
          transparent
        );

      filter:
        drop-shadow(
          0 0 6px
          rgba(239,196,71,.55)
        );

      animation:
        processEnergy 5s linear infinite;
    }

    @keyframes processEnergy {
      from {
        transform: translateX(-100%);
      }

      to {
        transform: translateX(560%);
      }
    }

    .process-step {
      position: relative;
      z-index: 3;

      text-align: center;
    }

    .process-circle {
      display: grid;

      width: 62px;
      height: 62px;

      margin: 0 auto 19px;

      place-items: center;

      border-radius: 50%;

      color: var(--navy);
      background: var(--solar);

      box-shadow:
        0 0 0 8px var(--navy);

      font-size: .68rem;
      font-weight: 800;
    }

    .process-step h3 {
      margin-bottom: 8px;

      color: #fff;

      font-size: .9rem;
      letter-spacing: -.02em;
    }

    .process-step p {
      margin: 0;

      color: rgba(255,255,255,.51);

      font-size: .67rem;
      line-height: 1.65;
    }

    /* =========================================================
       APPLICATIONS
    ========================================================= */

    .applications-grid {
      display: grid;

      grid-template-columns:
        repeat(4,minmax(0,1fr));

      grid-auto-rows: 225px;

      gap: 12px;
    }

    .application-card {
      position: relative;

      overflow: hidden;

      background: #dfe4df;
    }

    .application-card:nth-child(1) {
      grid-column: span 2;
      grid-row: span 2;
    }

    .application-card:nth-child(4) {
      grid-column: span 2;
    }

    .application-card:nth-child(6) {
      grid-column: span 2;
    }

    .application-card img {
      width: 100%;
      height: 100%;

      object-fit: cover;

      transition:
        transform .65s var(--ease);
    }

    .application-card:hover img {
      transform: scale(1.06);
    }

    .application-card::after {
      position: absolute;
      inset: 0;

      content: "";

      background:
        linear-gradient(
          to top,
          rgba(6,15,16,.8),
          transparent 62%
        );
    }

    .application-content {
      position: absolute;
      z-index: 2;

      right: 17px;
      bottom: 16px;
      left: 17px;

      display: flex;

      align-items: flex-end;
      justify-content: space-between;
      gap: 15px;

      color: #fff;
    }

    .application-content small {
      display: block;

      margin-bottom: 4px;

      color: #d2e4b5;

      font-size: .54rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .application-content h3 {
      margin: 0;

      font-size: .92rem;
      letter-spacing: -.02em;
    }

    .application-icon {
      display: grid;

      width: 35px;
      height: 35px;
      flex: 0 0 35px;

      place-items: center;

      border-radius: 50%;

      color: var(--navy);
      background: var(--solar);
    }

    .application-icon svg {
      width: 15px;
    }

    /* =========================================================
       BENEFITS
    ========================================================= */

    .benefits-grid {
      display: grid;

      grid-template-columns:
        1fr 1fr;

      align-items: center;
      gap: 77px;
    }

    .benefit-visual {
      position: relative;

      min-height: 585px;
    }

    .benefit-main-image {
      width: 84%;
      height: 585px;

      object-fit: cover;
    }

    .benefit-card {
      position: absolute;

      right: 0;
      bottom: 34px;

      width: 48%;

      padding: 24px;

      color: #fff;
      background: var(--navy);

      box-shadow: var(--shadow);
    }

    .benefit-card svg {
      width: 27px;

      margin-bottom: 14px;

      color: var(--solar);
    }

    .benefit-card strong {
      display: block;

      margin-bottom: 7px;

      font-size: .95rem;
    }

    .benefit-card p {
      margin: 0;

      color: rgba(255,255,255,.57);

      font-size: .68rem;
      line-height: 1.65;
    }

    .benefit-list {
      display: grid;
      gap: 12px;

      margin: 27px 0 30px;
    }

    .benefit-item {
      display: flex;

      align-items: flex-start;
      gap: 10px;

      color: #3f4a44;

      font-size: .81rem;
      font-weight: 600;
    }

    .check {
      display: grid;

      width: 21px;
      height: 21px;
      flex: 0 0 21px;

      margin-top: 2px;

      place-items: center;

      border-radius: 50%;

      color: #fff;
      background: var(--green);
    }

    .check svg {
      width: 11px;
    }

    /* =========================================================
       STATS
    ========================================================= */

    .stats {
      padding: 57px 0;

      background: var(--navy);
    }

    .stats-grid {
      display: grid;

      grid-template-columns:
        repeat(4,1fr);
    }

    .stat {
      padding: 0 30px;

      text-align: center;
    }

    .stat + .stat {
      border-left:
        1px solid rgba(255,255,255,.1);
    }

    .stat strong {
      display: block;

      margin-bottom: 6px;

      color: var(--solar);

      font-size:
        clamp(1.8rem, 3vw, 2.55rem);

      line-height: 1;
      letter-spacing: -.05em;
    }

    .stat span {
      color: rgba(255,255,255,.58);

      font-size: .65rem;
      font-weight: 700;
    }

    /* =========================================================
       GALLERY
    ========================================================= */

    .gallery-grid {
      display: grid;

      grid-template-columns:
        repeat(12,1fr);

      grid-auto-rows: 180px;

      gap: 10px;
    }

    .gallery-item {
      position: relative;

      overflow: hidden;

      padding: 0;

      border: 0;

      background: #dde2de;
    }

    .gallery-item:nth-child(1) {
      grid-column: span 5;
      grid-row: span 2;
    }

    .gallery-item:nth-child(2) {
      grid-column: span 4;
    }

    .gallery-item:nth-child(3) {
      grid-column: span 3;
    }

    .gallery-item:nth-child(4) {
      grid-column: span 3;
    }

    .gallery-item:nth-child(5) {
      grid-column: span 4;
    }

    .gallery-item:nth-child(6) {
      grid-column: span 3;
    }

    .gallery-item:nth-child(7) {
      grid-column: span 4;
    }

    .gallery-item:nth-child(8) {
      grid-column: span 5;
    }

    .gallery-item img {
      width: 100%;
      height: 100%;

      object-fit: cover;

      transition:
        transform .7s var(--ease);
    }

    .gallery-item::after {
      position: absolute;
      inset: 0;

      content: "";

      opacity: 0;

      background:
        rgba(8,17,18,.38);

      transition: opacity .3s ease;
    }

    .gallery-zoom {
      position: absolute;
      z-index: 3;

      top: 50%;
      left: 50%;

      display: grid;

      width: 45px;
      height: 45px;

      place-items: center;

      border-radius: 50%;

      opacity: 0;

      color: var(--navy);
      background: var(--solar);

      transform:
        translate(-50%,-40%);

      transition:
        opacity .3s ease,
        transform .3s ease;
    }

    .gallery-item:hover img {
      transform: scale(1.065);
    }

    .gallery-item:hover::after {
      opacity: 1;
    }

    .gallery-item:hover
      .gallery-zoom {
      opacity: 1;

      transform:
        translate(-50%,-50%);
    }

    .gallery-zoom svg {
      width: 17px;
    }

    /* =========================================================
       CTA
    ========================================================= */

    .cta {
      position: relative;

      overflow: hidden;

      padding: 25px 0;

      color: #fff;

      background:
        linear-gradient(
          90deg,
          rgba(7,16,17,.93),
          rgba(7,16,17,.55)
        ),
        url(
          "https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=1900&q=84"
        )
        center / cover no-repeat;
    }

    .cta::before {
      position: absolute;

      top: -150px;
      right: -90px;

      width: 470px;
      height: 470px;

      content: "";

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          rgba(239,196,71,.27),
          transparent 67%
        );
    }

    .cta-inner {
      position: relative;
      z-index: 2;

      display: flex;

      align-items: center;
      justify-content: space-between;
      gap: 55px;
    }

    .cta-copy {
      max-width: 680px;
    }

    .cta-copy h2 {
      margin-bottom: 13px;

      color: #fff;

      font-size:
        clamp(2rem, 2.5vw, 3.2rem);
    }

    .cta-copy p {
         margin: 0;
    color: #fff;
    font-size: .9rem;
    letter-spacing: 0.3px;
    width: 500px;
    }

    .cta-actions {
      display: flex;
      flex: 0 0 auto;
      flex-wrap: wrap;
      gap: 9px;
    }

    /* =========================================================
       CONTACT
    ========================================================= */

    .contact-grid {
         display: grid;
    grid-template-columns: 1fr 3fr;
    align-items: start;
    gap: 11px;
    }

    .contact-list {
      display: grid;
      gap: 17px;

      margin: 28px 0;
    }

    .contact-item {
      display: flex;
      gap: 13px;
    }

    .contact-icon {
      display: grid;

      width: 44px;
      height: 44px;
      flex: 0 0 44px;

      place-items: center;

      border-radius: 50%;

      color: #fff;
      background: var(--green);
    }

    .contact-icon svg {
      width: 18px;
    }

    .contact-item small {
      display: block;

      margin-bottom: 2px;

      color: var(--muted);

      font-size: .6rem;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .contact-item a,
    .contact-item strong {
      color: var(--navy);

      font-size: .78rem;
      font-weight: 800;
    }

    .business-box {
      padding: 19px;

      border-left:
        4px solid var(--solar);

      background: var(--cream);
    }

    .business-box p {
      margin: 0 0 4px;

      color: var(--muted);

      font-size: .7rem;
    }

    .business-box strong {
      color: var(--navy);
    }

    .form-card {
      padding: 40px;

      border: 1px solid var(--line);

      border-radius: 8px;

      background: #fff;

      box-shadow: var(--shadow);
    }

    .form-label-top {
      display: block;

      margin-bottom: 7px;

      color: var(--green-dark);

      font-size: .58rem;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .form-card h3 {
      margin-bottom: 8px;

      font-size: 1.45rem;
    }

    .form-card > p {
      margin-bottom: 27px;

      color: var(--muted);

      font-size: .75rem;
    }

    .form-grid {
      display: grid;

      grid-template-columns:
        repeat(2,minmax(0,1fr));

      gap: 16px;
    }

    .field {
      position: relative;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;

      border:
        1px solid #dde2dc;
      border-radius: 5px;

      outline: 0;

      color: var(--text);
      background: #fff;

      transition:
        border-color .25s ease,
        box-shadow .25s ease;
    }

    .field input {
      min-height: 58px;

      padding:
        21px 14px 7px;
    }

    .field select {
      min-height: 58px;

      padding: 0 14px;

      color: #525d57;
    }

    .field textarea {
      min-height: 145px;

      padding:
        23px 14px 10px;

      resize: vertical;
    }

    .field label {
      position: absolute;

      top: 18px;
      left: 14px;

      color: #8b948e;

      font-size: .7rem;

      pointer-events: none;

      transition:
        top .2s ease,
        color .2s ease,
        font-size .2s ease;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      border-color: var(--green);

      box-shadow:
        0 0 0 3px
        rgba(111,155,57,.1);
    }

    .field input:focus + label,
    .field input:not(:placeholder-shown) + label,
    .field textarea:focus + label,
    .field textarea:not(:placeholder-shown) + label {
      top: 5px;

      color: var(--green-dark);

      font-size: .53rem;
      font-weight: 800;
    }

    .form-actions {
      display: flex;

      align-items: center;
      justify-content: space-between;
      /*gap: 15px;*/

      margin-top: 19px;
    }

    .form-note {
      max-width: 280px;

      margin: 0;

      color: #929994;

      font-size: .58rem;
      line-height: 1.6;
    }

    /* =========================================================
       FAQ
    ========================================================= */

    .faq-grid {
      display: grid;

      grid-template-columns:
        .75fr 1.25fr;

      /*gap: 77px;*/
    }

    .faq-list {
      border-top:
        1px solid var(--line);
    }

    .faq-item {
      border-bottom:
        1px solid var(--line);
    }

    .faq-question {
         display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 11px 0;
    border: 0;
    color: var(--navy);
    background: transparent;
    text-align: left;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    }

    .faq-plus {
      display: grid;

      width: 30px;
      height: 30px;
      flex: 0 0 30px;

      place-items: center;

      border-radius: 50%;

      background: var(--green-soft);
    }

    .faq-plus svg {
      width: 14px;

      transition:
        transform .3s ease;
    }

    .faq-item.open
      .faq-plus svg {
      transform: rotate(45deg);
    }

    .faq-answer {
      display: grid;

      grid-template-rows: 0fr;

      transition:
        grid-template-rows .35s var(--ease);
    }

    .faq-answer > div {
      overflow: hidden;
    }

    .faq-answer p {
         margin: 0;
    padding: 0 50px 19px 0;
    color: #222;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    }

    .faq-item.open
      .faq-answer {
      grid-template-rows: 1fr;
    }

    /* =========================================================
       MAP
    ========================================================= */

    .map {
      height: 405px;

      overflow: hidden;

      background: #e4e8e4;
    }

    .map iframe {
      width: 100%;
      height: 100%;

      border: 0;

      filter:
        saturate(.8)
        contrast(.94);
    }

    /* =========================================================
       FOOTER
    ========================================================= */

    .footer {
      color: rgba(255,255,255,.62);
      background: #0b1516;
    }

    .footer-main {
      padding: 70px 0 52px;
    }

    .footer-grid {
      display: grid;

      grid-template-columns:
        1.5fr .8fr 1fr .9fr 1.25fr;

      gap: 38px;
    }

    .footer .brand-main {
      color: #fff;
    }

    .footer-about {
        max-width: 275px;
    margin-top: 18px;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.4px;
    }

    .footer h4 {
         margin-bottom: 18px;
    color: #fff;
    font-size: 18px;
    letter-spacing: -.01em;
    }

    .footer-links {
      display: grid;
      gap: 8px;
    }

    .footer-links a {
         font-size: 12px;
    transition: color .2s ease,
        transform .2s ease;
    color: #ededed;
    letter-spacing: 0.3px;
    }

    .footer-links a:hover {
      color: #c2dd9a;

      transform: translateX(3px);
    }

    .footer-contact {
      display: grid;
      gap: 10px;

      font-size: .66rem;
    }

    .footer-contact a,
    .footer-contact span {
         display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    }

    .footer-contact svg {
      width: 14px;
      flex: 0 0 20px;

      margin-top: 3px;

      color: var(--solar);
    }

    .footer-gst {
      margin-top: 14px;

      padding: 9px 10px;

      border:
        1px solid rgba(255,255,255,.08);

      font-size: .6rem;
    }

    .footer-bottom {
      padding: 17px 0;

      border-top:
        1px solid rgba(255,255,255,.07);
    }

    .footer-bottom-inner {
         display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 11px;
    letter-spacing: 0.3px;
    }

    /* =========================================================
       FLOATING CONTACT
    ========================================================= */

    .desktop-contact {
      position: fixed;
      z-index: 800;

      right: 18px;
      bottom: 87px;

      display: grid;
      gap: 8px;
    }

    .floating-btn {
      display: grid;

      width: 46px;
      height: 46px;

      place-items: center;

      border-radius: 50%;

      color: #fff;
      background: var(--navy);

      box-shadow:
        0 10px 30px
        rgba(10,23,18,.18);

      transition:
        transform .25s ease,
        background .25s ease;
    }

    .floating-btn.whatsapp {
      background: #25d366;
    }

    .floating-btn.email {
      background: var(--green);
    }

    .floating-btn:hover {
      transform: translateY(-4px);
    }

    .floating-btn svg {
      width: 18px;
    }

    /* SCROLL TOP */

    .scroll-top {
      position: fixed;
      z-index: 820;

      right: 20px;
      bottom: 25px;

      display: grid;

      width: 42px;
      height: 42px;

      place-items: center;

      border: 0;
      border-radius: 50%;

      visibility: hidden;
      opacity: 0;

      color: #fff;
      background: var(--navy);

      transform: translateY(10px);

      transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;
    }

    .scroll-top.show {
      visibility: visible;
      opacity: 1;

      transform: translateY(0);
    }

    .scroll-top svg {
      width: 17px;
    }

    /* MOBILE BOTTOM BAR */

    .mobile-contact {
      display: none;
    }

    /* =========================================================
       LIGHTBOX
    ========================================================= */

    .lightbox {
      position: fixed;
      z-index: 3000;
      inset: 0;

      display: grid;

      visibility: hidden;
      opacity: 0;

      place-items: center;

      padding: 30px;

      background:
        rgba(5,11,12,.92);

      backdrop-filter: blur(8px);

      transition:
        opacity .3s ease,
        visibility .3s ease;
    }

    .lightbox.open {
      visibility: visible;
      opacity: 1;
    }

    .lightbox img {
      max-width: min(1100px,92vw);
      max-height: 84vh;

      box-shadow: var(--shadow-lg);
    }

    .lightbox-close {
      position: absolute;

      top: 22px;
      right: 22px;

      display: grid;

      width: 44px;
      height: 44px;

      place-items: center;

      border:
        1px solid rgba(255,255,255,.18);
      border-radius: 50%;

      color: #fff;
      background:
        rgba(255,255,255,.08);
    }

    .lightbox-close svg {
      width: 17px;
    }

    /* =========================================================
       REVEAL
    ========================================================= */

    .js .reveal {
      opacity: 0;

      transform: translateY(25px);

      transition:
        opacity .7s var(--ease),
        transform .7s var(--ease);
    }

    .js .reveal.left {
      transform: translateX(-30px);
    }

    .js .reveal.right {
      transform: translateX(30px);
    }

    .js .reveal.visible {
      opacity: 1;

      transform: translate(0,0);
    }

    .delay-1 {
      transition-delay: .07s !important;
    }

    .delay-2 {
      transition-delay: .14s !important;
    }

    .delay-3 {
      transition-delay: .21s !important;
    }

    .delay-4 {
      transition-delay: .28s !important;
    }

    /* =========================================================
       RESPONSIVE - LARGE TABLET
    ========================================================= */

    @media (max-width: 1120px) {

      .header-inner {
        gap: 14px;
      }

      .nav-link {
        padding-inline: 7px;

        font-size: .68rem;
      }

      .nav-link::after {
        right: 7px;
        left: 7px;
      }

      .about-grid,
      .why-grid,
      .benefits-grid {
        gap: 48px;
      }

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

      .footer-col:nth-child(4),
      .footer-col:nth-child(5) {
        margin-top: 8px;
      }
    }

    /* =========================================================
       RESPONSIVE - TABLET / MOBILE NAV
    ========================================================= */

    @media (max-width: 980px) {

      .site-header,
      .site-header.scrolled {
        height: 69px;
      }

      .menu-toggle {
        display: flex;
      }

      .brand {
        margin-right: 0;
      }

      .header-btn {
        margin-left: auto;
      }

      .main-nav {
        position: absolute;

        top: 100%;
        right: -20px;
        left: -20px;

        display: block;
      }

      .nav-list {
        display: block;

        max-height: 0;

        overflow: auto;

        visibility: hidden;
        opacity: 0;

        padding: 0 20px;

        border-top:
          1px solid var(--line);

        background: #fff;

        box-shadow:
          0 22px 50px
          rgba(12,25,20,.11);

        transition:
          max-height .4s var(--ease),
          opacity .3s ease,
          visibility .3s ease;
      }

      .nav-list.open {
        max-height:
          calc(100vh - 70px);

        visibility: visible;
        opacity: 1;

        padding-top: 13px;
        padding-bottom: 20px;
      }

      .nav-link {
        width: 100%;
        min-height: 48px;

        justify-content: space-between;

        padding: 0;

        border-bottom:
          1px solid var(--line);

        font-size: .76rem;
      }

      .nav-link::after {
        display: none;
      }

      .dropdown {
        position: static;

        display: none;

        min-width: 0;

        padding:
          7px 0 10px 13px;

        border: 0;
        border-radius: 0;

        visibility: visible;
        opacity: 1;

        box-shadow: none;

        transform: none;

        pointer-events: auto;
      }

      .nav-item:hover > .dropdown,
      .nav-item:focus-within > .dropdown {
        display: none;
      }

      .nav-item.open > .dropdown,
      .nav-item.open:hover > .dropdown,
      .nav-item.open:focus-within > .dropdown {
        display: grid;
      }

      .nav-item.open
        .dropdown-trigger svg {
        transform: rotate(180deg);
      }

      .dropdown a {
        min-height: 39px;

        padding: 7px 6px;

        font-size: .7rem;
      }

      .hero,
      .hero-container {
        min-height: 650px;
      }

      .hero-call {
        display: none;
      }

      .about-grid,
      .why-grid,
      .benefits-grid,
      .contact-grid,
      .faq-grid {
        grid-template-columns: 1fr;
      }

      .about-visual {
        max-width: 650px;
      }

      .products-shell {
        grid-template-columns: 1fr;
      }

      .product-feature {
        min-height: 450px;
      }

      .split-heading {
        grid-template-columns: 1fr;

        gap: 15px;
      }

      .why-photo {
        min-height: 520px;
      }

      .why-photo img {
        height: 520px;
      }

      .process-grid {
        grid-template-columns:
          repeat(3,1fr);

        row-gap: 42px;
      }

      .process-grid::before,
      .energy-runner {
        display: none;
      }

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

      .application-card:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
      }

      .application-card:nth-child(1) {
        grid-row: span 2;
      }

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

        gap: 32px 0;
      }

      .stat:nth-child(3) {
        border-left: 0;
      }

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

        grid-auto-rows: 230px;
      }

      .gallery-item:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
      }

      .gallery-item:first-child {
        grid-row: span 2;
      }

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

        gap: 27px;
      }
    }

    /* =========================================================
       RESPONSIVE - MOBILE
    ========================================================= */

    @media (max-width: 700px) {

      body {
        padding-bottom:
          calc(61px + env(safe-area-inset-bottom));
      }

      .container {
        width:
          min(calc(100% - 30px),var(--container));
      }

      .section {
        padding: 72px 0;
      }

      .section-compact {
        padding: 55px 0;
      }

      .section-head {
        margin-bottom: 34px;
      }

      .topbar-inner {
        min-height: 31px;
      }

      .topbar-group {
        gap: 12px;
      }

      .topbar-email,
      .topbar-location {
        display: none !important;
      }

      .brand-mark {
        width: 37px;
        height: 37px;
        flex-basis: 37px;
      }

      .brand-main {
        font-size: .92rem;
      }

      .brand-sub {
        font-size: .48rem;
      }

      .header-btn {
        display: none;
      }

      .hero,
      .hero-container {
        min-height: 640px;
      }

      .hero-slide::after {
        background:
          radial-gradient(
            circle at 85% 25%,
            rgba(239,196,71,.16),
            transparent 27%
          ),
          linear-gradient(
            90deg,
            rgba(7,14,15,.94),
            rgba(7,14,15,.63)
          ),
          linear-gradient(
            to top,
            rgba(7,14,15,.62),
            transparent 65%
          );
      }

      .hero-content {
        padding:
          55px 0 100px;
      }

      .hero h1 {
        font-size:
          clamp(2.45rem, 11vw, 3.25rem);

        line-height: 1;
      }

      .hero p {
        font-size: .91rem;
      }

      .hero-actions {
        width: 100%;

        flex-direction: column;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .hero-controls {
        bottom: 20px;
      }

      .hero-arrow {
        width: 39px;
        height: 39px;
      }

      .marquee-item {
        min-height: 56px;

        padding-inline: 23px;
      }

      .about-visual {
        min-height: 430px;
      }

      .about-photo.main {
        width: 77%;
        height: 70%;
      }

      .about-photo.secondary {
        width: 55%;
        height: 47%;
      }

      .about-photo.small {
        display: none;
      }

      .about-info-badge {
        top: 47%;
        right: 4%;

        width: 125px;

        padding: 15px;
      }

      .about-info-badge strong {
        font-size: 1.25rem;
      }

      .about-points {
        grid-template-columns: 1fr;
      }

      .product-feature {
        min-height: 415px;
      }

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

      .product-card.wide {
        grid-column: auto;

        grid-template-columns: 1fr;
      }

      .product-card.wide
        .product-image {
        min-height: 195px;
      }

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

      .solution-card {
        min-height: 510px;
      }

      .solution-body {
        right: 23px;
        bottom: 24px;
        left: 23px;
      }

      .why-photo {
        min-height: 455px;
      }

      .why-photo img {
        height: 455px;
      }

      .process-grid {
        grid-template-columns: 1fr;

        gap: 28px;
      }

      .process-step {
        display: grid;

        grid-template-columns:
          56px 1fr;

        align-items: start;
        gap: 16px;

        text-align: left;
      }

      .process-circle {
        width: 54px;
        height: 54px;

        margin: 0;

        grid-row: span 2;
      }

      .process-step h3 {
        margin: 4px 0 3px;
      }

      .applications-grid {
        grid-template-columns: 1fr;

        grid-auto-rows: 270px;
      }

      .application-card:nth-child(1) {
        grid-row: auto;
      }

      .benefit-visual {
        min-height: 470px;
      }

      .benefit-main-image {
        width: 90%;
        height: 470px;
      }

      .benefit-card {
        width: 62%;

        padding: 19px;
      }

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

      .stat {
        padding-inline: 14px;
      }

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

        grid-auto-rows: 175px;
      }

      .gallery-item:first-child {
        grid-column: span 2;
        grid-row: span 2;
      }

      .cta {
        padding: 72px 0;
      }

      .cta-actions {
        width: 100%;

        flex-direction: column;
      }

      .cta-actions .btn {
        width: 100%;
      }

      .form-card {
        padding: 25px 18px;
      }

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

      .field.full {
        grid-column: auto;
      }

      .form-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .form-actions .btn {
        width: 100%;
      }

      .faq-grid {
        gap: 40px;
      }

      .footer-grid {
        grid-template-columns:
          1fr 1fr;

        gap: 32px 23px;
      }

      .footer-col:first-child,
      .footer-col:last-child {
        grid-column: 1 / -1;
      }

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

        gap: 7px;
      }

      .desktop-contact,
      .scroll-top {
        display: none;
      }

      .mobile-contact {
        position: fixed;
        z-index: 2500;

        right: 0;
        bottom: 0;
        left: 0;

        display: grid;

        grid-template-columns:
          repeat(3,1fr);

        min-height:
          calc(61px + env(safe-area-inset-bottom));

        padding-bottom:
          env(safe-area-inset-bottom);

        color: #fff;
        background: var(--navy);

        box-shadow:
          0 -8px 30px
          rgba(9,20,16,.15);
      }

      .mobile-contact a {
        display: flex;

        align-items: center;
        justify-content: center;
        gap: 6px;

        border-right:
          1px solid rgba(255,255,255,.08);

        font-size: .66rem;
        font-weight: 800;
      }

      .mobile-contact a:nth-child(2) {
        background: #248e4b;
      }

      .mobile-contact a:nth-child(3) {
        color: var(--navy);
        background: var(--solar);
      }

      .mobile-contact svg {
        width: 15px;
      }
    }

    /* =========================================================
       SMALL PHONE
    ========================================================= */

    @media (max-width: 430px) {

      .brand-sub {
        display: none;
      }

      .brand-main {
        font-size: .86rem;
      }

      .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 225px;
      }

      .gallery-item:first-child {
        grid-column: auto;
        grid-row: auto;
      }

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

      .stat {
        padding: 18px 0;

        border-bottom:
          1px solid rgba(255,255,255,.08);
      }

      .stat + .stat,
      .stat:nth-child(3) {
        border-left: 0;
      }

      .stat:last-child {
        border-bottom: 0;
      }

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

      .footer-col:first-child,
      .footer-col:last-child {
        grid-column: auto;
      }
    }

    /* =========================================================
       ACCESSIBILITY
    ========================================================= */

    @media (
      prefers-reduced-motion: reduce
    ) {

      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration:
          .01ms !important;

        animation-iteration-count:
          1 !important;

        transition-duration:
          .01ms !important;
      }

      .marquee-track,
      .energy-runner {
        animation: none;
      }

      .js .reveal {
        opacity: 1;
        transform: none;
      }
    }