:root {
        --ink: #02260b;
        --ink-2: rgba(2, 38, 11, 0.78);
        --ink-3: rgba(2, 38, 11, 0.6);
        --muted: rgba(2, 38, 11, 0.45);
        --paper: #f6faf7;
        --card: #ffffff;
        --line: #d8f0df;
        --line-2: rgba(2, 38, 11, 0.15);
        --brand: #3aa253;
        --brand-2: #00aa27;
        --brand-3: #e5fde5;
        --deep: #02260b;
        --deep-2: #010101;
        --wash: #f6faf7;
        --amber: #00aa27;
        --amber-wash: #e5fde5;
        --gradient-light: linear-gradient(165deg, #f6faf7 0%, #d8f0df 100%);
        --text-body: 16px;
        --text-small: 14px;
        --text-caption: 12px;
        --r: 18px;
        --r-sm: 11px;
        --sh:
          0 1px 2px rgba(2, 38, 11, 0.05),
          0 10px 30px -14px rgba(2, 38, 11, 0.18);
        --sh-lg:
          0 2px 6px rgba(2, 38, 11, 0.05),
          0 30px 70px -30px rgba(2, 38, 11, 0.4);
        --maxw: 1200px;
        --ease: cubic-bezier(0.22, 0.9, 0.28, 1);
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
      }
      body {
        font-family:
          "Montserrat",
          system-ui,
          -apple-system,
          "Segoe UI",
          sans-serif;
        color: var(--ink);
        background: var(--paper);
        line-height: 1.6;
        font-size: 16px;
        overflow-x: hidden;
        font-feature-settings: "ss01";
        -webkit-font-smoothing: antialiased;
      }
      img {
        max-width: 100%;
        display: block;
        height: auto;
      }
      svg {
        display: block;
      }
      a {
        color: var(--brand);
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      :focus-visible {
        outline: 3px solid var(--brand-2);
        outline-offset: 3px;
        border-radius: 6px;
      }
      .wrap {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 22px;
      }
      .skip {
        position: absolute;
        left: -9999px;
        background: var(--deep);
        color: #fff;
        padding: 12px 18px;
        z-index: 300;
      }
      .skip:focus {
        left: 0;
        top: 0;
      }
      .sr {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }

      /* reveal */
      .rv {
        opacity: 0;
        transform: translateY(22px);
        transition:
          opacity 0.7s var(--ease),
          transform 0.7s var(--ease);
      }
      .rv.in {
        opacity: 1;
        transform: none;
      }

      /* ---------- header ---------- */
      header.site {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(246, 250, 247, 0.86);
        backdrop-filter: saturate(140%) blur(14px);
        border-bottom: 1px solid var(--line);
      }
      .bar {
        display: flex;
        align-items: center;
        gap: 18px;
        height: 66px;
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 22px;
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 9px;
        font-weight: 700;
        font-size: 19px;
        letter-spacing: -0.025em;
        color: var(--ink);
        flex: none;
      }
      .logo:hover {
        text-decoration: none;
      }
      .logo .mk {
        width: 26px;
        height: 26px;
        flex: none;
      }
      nav.main {
        display: flex;
        gap: 26px;
        margin-left: 16px;
        flex: 1;
      }
      nav.main a {
        color: var(--ink-2);
        font-size: 14.5px;
        font-weight: 500;
        position: relative;
      }
      nav.main a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 100%;
        bottom: -3px;
        height: 2px;
        background: var(--brand);
        transition: right 0.3s var(--ease);
      }
      nav.main a:hover {
        text-decoration: none;
      }
      nav.main a:hover::after {
        right: 0;
      }
      .nav-item-dropdown {
        position: relative;
        display: inline-flex;
        align-items: center;
      }
      .nav-dropdown-toggle {
        background: transparent;
        border: none;
        color: var(--ink-2);
        font-size: 14.5px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        padding: 0;
        display: inline-flex;
        align-items: center;
        position: relative;
        transition: color 0.2s ease;
      }
      .nav-dropdown-toggle:hover {
        color: var(--brand);
      }
      .nav-dropdown-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: -10px;
        background: #ffffff;
        border: 1px solid var(--line-2);
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        padding: 8px 0;
        min-width: 150px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
        z-index: 100;
      }
      .nav-item-dropdown:hover .nav-dropdown-menu,
      .nav-item-dropdown.open .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
      .nav-item-dropdown:hover .nav-dropdown-toggle svg,
      .nav-item-dropdown.open .nav-dropdown-toggle svg {
        transform: rotate(180deg);
      }
      .nav-dropdown-menu a {
        display: block !important;
        padding: 8px 18px !important;
        color: var(--ink-2) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: background 0.15s ease, color 0.15s ease !important;
      }
      .nav-dropdown-menu a:hover {
        background: var(--wash) !important;
        color: var(--brand) !important;
      }
      .nav-dropdown-menu a::after {
        display: none !important;
      }
      .bar .tel {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
        flex: none;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border: 0;
        border-radius: 99px;
        white-space: nowrap;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
        padding: 12px 22px;
        font-size: 14.5px;
        min-height: 44px;
        transition:
          transform 0.18s var(--ease),
          background 0.18s,
          box-shadow 0.18s,
          border-color 0.18s;
      }
      .btn:active {
        transform: scale(0.975);
      }
      .btn-primary {
        background: var(--deep);
        color: #fff;
      }
      .btn-primary:hover {
        background: #00aa27;
        text-decoration: none;
        box-shadow: 0 8px 24px -10px rgba(2, 38, 11, 0.6);
      }
      .btn-green {
        background: var(--brand);
        color: #fff;
      }
      .btn-green:hover {
        background: #00aa27;
        text-decoration: none;
        box-shadow: 0 8px 24px -10px rgba(0, 170, 39, 0.5);
      }
      .btn-ghost {
        background: #fff;
        color: var(--ink);
        border: 1px solid var(--line-2);
      }
      .btn-lg {
        padding: 15px 28px;
        font-size: 16px;
        min-height: 52px;
        width: 100%;
      }
      .burger {
        display: none;
        background: none;
        border: 1px solid var(--line-2);
        border-radius: 11px;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex: none;
      }
      .burger span {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--ink);
        position: relative;
        transition: 0.2s;
      }
      .burger span::before,
      .burger span::after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        background: var(--ink);
        transition: 0.24s var(--ease);
      }
      .burger span::before {
        top: -6px;
      }
      .burger span::after {
        top: 6px;
      }
      .burger[aria-expanded="true"] span {
        background: transparent;
      }
      .burger[aria-expanded="true"] span::before {
        top: 0;
        transform: rotate(45deg);
      }
      .burger[aria-expanded="true"] span::after {
        top: 0;
        transform: rotate(-45deg);
      }

      /* ---------- hero ---------- */
      .hero {
        position: relative;
        padding: 24px 0 24px;
        overflow: hidden;
      }
      .mesh {
        position: absolute;
        inset: -20% -10% auto -10%;
        height: 140%;
        z-index: -1;
        pointer-events: none;
        background:
          radial-gradient(
            38% 44% at 14% 8%,
            rgba(111, 208, 140, 0.34) 0%,
            rgba(111, 208, 140, 0) 70%
          ),
          radial-gradient(
            34% 40% at 88% 4%,
            rgba(54, 164, 80, 0.2) 0%,
            rgba(54, 164, 80, 0) 68%
          ),
          radial-gradient(
            46% 40% at 62% 46%,
            rgba(200, 232, 190, 0.3) 0%,
            rgba(200, 232, 190, 0) 72%
          );
        filter: blur(6px);
        animation: drift 26s ease-in-out infinite alternate;
      }
      @keyframes drift {
        to {
          transform: translate3d(-2.5%, 2%, 0) scale(1.06);
        }
      }
      .hero-grid {
        display: grid;
        grid-template-columns: 1fr 458px;
        gap: 46px;
        align-items: center;
      }
      .pill {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        background: rgba(255, 255, 255, 0.86);
        border: 1px solid var(--line);
        border-radius: 99px;
        padding: 6px 15px 6px 7px;
        font-size: 12px;
        font-weight: 700;
        color: var(--brand);
        letter-spacing: 0.04em;
        box-shadow: var(--sh);
        backdrop-filter: blur(6px);
      }
      .pill .tick {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--wash);
        display: grid;
        place-items: center;
        flex: none;
      }
      h1 {
        font-size: clamp(36px, 5.1vw, 60px);
        line-height: 1.02;
        letter-spacing: -0.038em;
        font-weight: 700;
        margin: 18px 0 0;
      }
      h1 em {
        font-style: italic;
        color: var(--brand);
        font-weight: 700;
      }
      .lede {
        font-size: var(--text-body);
        color: var(--ink-2);
        margin-top: 18px;
        max-width: 45ch;
      }
      .hero-3t {
        display: flex;
        gap: 9px;
        margin-top: 22px;
        flex-wrap: wrap;
      }
      .t-chip {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid var(--line);
        border-radius: 11px;
        padding: 9px 15px 9px 12px;
        font-size: 13.5px;
        font-weight: 600;
        backdrop-filter: blur(6px);
      }
      .t-chip::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--brand-2);
        flex: none;
      }
      .t-chip b {
        color: var(--brand);
        font-size: 15px;
        font-weight: 700;
      }
      .proof {
        display: flex;
        align-items: center;
        gap: 28px;
        margin-top: 26px;
      }
      .proof-item {
        display: flex;
        align-items: center;
        gap: 12px;
        white-space: nowrap;
      }
      .proof-div {
        width: 1px;
        align-self: stretch;
        background: var(--line-2);
        flex: none;
      }
      .proof-dots {
        display: flex;
        flex: none;
      }
      .proof-dots span {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid var(--paper);
        margin-right: -10px;
        background: linear-gradient(150deg, #3aa253, #00aa27);
      }
      .proof-dots span:nth-child(1) {
        background: linear-gradient(150deg, #3aa253, #00aa27);
        opacity: 1;
      }
      .proof-dots span:nth-child(2) {
        background: linear-gradient(150deg, #3aa253, #00aa27);
        opacity: 0.85;
      }
      .proof-dots span:nth-child(3) {
        background: linear-gradient(150deg, #3aa253, #00aa27);
        opacity: 0.7;
        margin-right: 0;
      }
      .proof-num {
        display: block;
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -0.025em;
        color: var(--ink);
        line-height: 1.1;
      }
      .proof-lbl {
        display: block;
        font-size: 12.5px;
        color: var(--ink-3);
        margin-top: 1px;
      }
      .proof-stars {
        display: flex;
        gap: 2px;
        flex: none;
      }
      @media (max-width: 1024px) {
        .proof {
          flex-wrap: wrap;
          gap: 14px 24px;
        }
        .proof-div {
          display: none;
        }
      }
      @media (max-width: 480px) {
        .proof-item {
          white-space: normal;
        }
      }
      .hero-strip {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-top: 28px;
      }
      .hero-strip img {
        border-radius: 14px;
        aspect-ratio: 4/5;
        object-fit: cover;
        box-shadow: var(--sh);
        transition: transform 0.5s var(--ease);
      }
      .hero-strip img:hover {
        transform: translateY(-5px);
      }

      /* ---------- widget ---------- */
      .widget {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--r);
        box-shadow: var(--sh-lg);
        overflow: hidden;
      }
      .tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: var(--wash);
        border-bottom: 1px solid var(--line);
        position: relative;
      }
      .tab {
        background: none;
        border: 0;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        padding: 11px 10px;
        cursor: pointer;
        color: var(--ink-3);
        min-height: 40px;
        position: relative;
        z-index: 1;
        transition: color 0.22s;
      }
      .tab[aria-selected="true"] {
        color: var(--ink);
      }
      .tab-ink {
        position: absolute;
        bottom: 0;
        height: 100%;
        width: 50%;
        background: var(--card);
        border-bottom: 2px solid var(--brand);
        transition: transform 0.34s var(--ease);
        z-index: 0;
      }
      .panel {
        padding: 16px;
      }
      .panel[hidden] {
        display: none;
      }
      .w-title {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.015em;
      }
      .w-sub {
        font-size: 13px;
        color: var(--ink-3);
        margin-top: 4px;
      }
      fieldset {
        border: 0;
        margin-top: 16px;
      }
      legend {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 9px;
      }
      .vtypes {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 7px;
      }
      /* Compact sizing for the hero estimate widget only — fieldset/legend/
   vtypes/vtype are shared with the impact calculator further down the page,
   so scope overrides to #estimate-form instead of editing the shared rules. */
      #estimate-form fieldset {
        margin-top: 8px;
      }
      #estimate-form legend {
        margin-bottom: 4px;
      }
      #estimate-form .vtypes {
        gap: 6px;
      }
      #estimate-form .vtype label {
        padding: 5px 4px;
        min-height: 42px;
        gap: 3px;
        font-size: 11px;
      }
      #estimate-form .vtype label .ic {
        font-size: 15px;
      }
      #estimate-form input[type="text"],
      #estimate-form input[type="tel"],
      .panel select {
        padding: 7px 10px;
        min-height: 36px;
        font-size: 13.5px;
      }
      .vtype input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
      }
      .vtype label {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        border: 1px solid var(--line-2);
        border-radius: var(--r-sm);
        padding: 11px 4px;
        cursor: pointer;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--ink-2);
        background: #fff;
        min-height: 64px;
        justify-content: center;
        transition: 0.18s var(--ease);
      }
      .vtype input:checked + label {
        border-color: var(--brand);
        background: var(--wash);
        color: var(--brand);
        box-shadow: inset 0 0 0 1px var(--brand);
        transform: translateY(-1px);
      }
      .vtype input:focus-visible + label {
        outline: 3px solid var(--brand-2);
        outline-offset: 2px;
      }
      .vtype label .ic {
        font-size: 19px;
        line-height: 1;
      }

      .location-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
      }
      .loc-chip {
        display: inline-flex;
        align-items: center;
        padding: 3px 9px;
        font-size: 11.5px;
        font-weight: 500;
        color: var(--ink-2);
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid var(--line-2);
        border-radius: 4px;
        line-height: 1.4;
        transition: all 0.2s var(--ease);
      }
      .loc-chip:hover {
        background: #fff;
        border-color: var(--brand);
        color: var(--brand);
      }
      .field {
        margin-top: 11px;
      }
      .field-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 11px;
      }
      .mini-loader {
        display: inline-block;
        width: 11px;
        height: 11px;
        margin-right: 6px;
        vertical-align: -1px;
        border: 2px solid rgba(31, 122, 58, 0.25);
        border-top-color: var(--brand);
        border-radius: 50%;
        animation: mini-spin 0.6s linear infinite;
      }
      @keyframes mini-spin {
        to {
          transform: rotate(360deg);
        }
      }
      .field label {
        display: block;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink-2);
        margin-bottom: 4px;
      }
      .field label .opt {
        color: var(--muted);
        font-weight: 400;
      }
      input[type="text"],
      input[type="tel"],
      input[type="search"] {
        width: 100%;
        font: inherit;
        font-size: var(--text-small);
        padding: 13px 14px;
        border: 1px solid var(--line-2);
        border-radius: var(--r-sm);
        background: #fff;
        color: var(--ink);
        min-height: 48px;
        transition: 0.18s;
      }
      input::placeholder {
        color: #adb8b1;
      }
      input:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(31, 122, 58, 0.14);
        outline: none;
      }
      select {
        width: 100%;
        font: inherit;
        font-size: 15px;
        padding: 13px 14px;
        border: 1px solid var(--line-2);
        border-radius: var(--r-sm);
        background: #fff;
        color: var(--ink);
        min-height: 48px;
        transition: 0.18s;
      }
      select:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(31, 122, 58, 0.14);
        outline: none;
      }
      .plate {
        display: flex;
        align-items: stretch;
        border: 1.5px solid var(--ink);
        border-radius: var(--r-sm);
        overflow: hidden;
        background: #fff;
        transition: 0.18s;
      }
      .plate .flag {
        background: var(--deep);
        color: #fff;
        width: 30px;
        display: grid;
        place-items: center;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        flex: none;
      }
      .plate input {
        border: 0;
        border-radius: 0;
        font-weight: 700;
        font-size: 15px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .plate input:focus {
        box-shadow: none;
      }
      .plate:focus-within {
        box-shadow: 0 0 0 3px rgba(31, 122, 58, 0.18);
      }
      .reassure {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        margin-top: 9px;
        font-size: 11px;
        color: var(--ink-3);
      }
      .reassure span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
      }
      .reassure i {
        font-style: normal;
        color: var(--brand);
        font-weight: 700;
      }
      .privacy-note {
        margin-top: 9px;
        font-size: 10.5px;
        color: var(--muted);
        line-height: 1.45;
      }
      #estimate-form .btn-lg {
        padding: 9px 18px;
        font-size: 13.5px;
        min-height: 38px;
        margin-top: 9px !important;
      }
      /* Semantic color - not in original brand palette, needs sign-off from brand team. See website QC audit. */
      .field-error {
        color: #b3261e;
        font-size: 11.5px;
        margin-top: 4px;
        line-height: 1.4;
      }
      .input-invalid {
        border-color: #b3261e !important;
      }
      .input-invalid:focus {
        border-color: #b3261e !important;
        box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14) !important;
      }
      .plate.input-invalid {
        border-color: #b3261e !important;
      }
      .disc {
        font-size: 11.5px;
        color: var(--muted);
        margin-top: 10px;
        line-height: 1.55;
      }
      .result {
        margin-top: 16px;
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        overflow: hidden;
        animation: pop 0.42s var(--ease);
      }
      @keyframes pop {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
      }
      .result-head {
        background: var(--deep);
        color: #fff;
        padding: 15px 17px;
      }
      .result-head .lbl {
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.7;
        font-weight: 600;
      }
      .result-head .amt {
        font-size: 29px;
        font-weight: 700;
        letter-spacing: -0.025em;
        margin-top: 3px;
      }
      .result-body {
        padding: 15px 17px;
        background: #fff;
      }
      .result-body ul {
        list-style: none;
        font-size: 13px;
        color: var(--ink-2);
      }
      .result-body li {
        display: flex;
        gap: 8px;
        padding: 3px 0;
      }
      .result-body li::before {
        content: "›";
        color: var(--brand);
        font-weight: 700;
      }
      .tl {
        list-style: none;
        margin-top: 16px;
        position: relative;
        padding-left: 28px;
      }
      .tl::before {
        content: "";
        position: absolute;
        left: 8px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: var(--line-2);
      }
      .tl li {
        position: relative;
        padding-bottom: 18px;
        animation: slidein 0.5s var(--ease) backwards;
      }
      .tl li:nth-child(n) {
        animation-delay: calc(var(--i, 0) * 55ms);
      }
      @keyframes slidein {
        from {
          opacity: 0;
          transform: translateX(-8px);
        }
      }
      .tl li::before {
        content: "";
        position: absolute;
        left: -24px;
        top: 5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--brand);
        box-shadow: 0 0 0 3px #fff;
      }
      .tl .when {
        font-size: 11px;
        color: var(--muted);
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
      .tl .what {
        font-size: 14px;
        font-weight: 700;
        margin-top: 1px;
      }
      .tl .detail {
        font-size: 12.5px;
        color: var(--ink-3);
        margin-top: 2px;
      }
      .tl .doc {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 7px;
        font-size: 11.5px;
        font-weight: 600;
        background: var(--wash);
        color: var(--brand);
        border-radius: 7px;
        padding: 5px 10px;
      }

      /* ---------- sections ---------- */
      section {
        padding: 88px 0;
      }
      section[id],
      details.faq {
        scroll-margin-top: 86px;
      }
      .sec-label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--brand);
        margin-bottom: 14px;
      }
      h2 {
        font-size: clamp(1.85rem, 4.6vw, 2.3125rem);
        line-height: 1.08;
        letter-spacing: -0.033em;
        font-weight: 700;
      }
      h3 {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -0.018em;
      }
      .sec-lede {
        font-size: var(--text-body);
        color: var(--ink-2);
        margin-top: 15px;
        max-width: 62ch;
      }
      .center {
        text-align: center;
      }
      .center .sec-lede {
        margin-left: auto;
        margin-right: auto;
      }
      .grid2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 38px;
        align-items: center;
      }
      .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--r);
        padding: 26px;
        box-shadow: var(--sh);
      }

      /* ---------- 3T: pinned scroll celebration ---------- */
      .tt {
        position: relative;
        height: 235vh;
        background: linear-gradient(
          to bottom,
          var(--deep) 0%,
          var(--deep) 60%,
          #ecf7ef 85%,
          #ecf7ef 100%
        );
      }
      .tt-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        min-height: 520px;
        overflow: hidden;
        display: flex;
        align-items: center;
      }
      .tt-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        background: var(--deep);
      }
      .tt-bg figure {
        position: absolute;
        inset: 0;
        margin: 0;
        opacity: 0;
        transform: scale(1.09);
        transition:
          opacity 1s var(--ease),
          transform 1.8s var(--ease);
      }
      .tt-bg figure.on {
        opacity: 1;
        transform: scale(1);
      }
      .tt-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 38%;
      }
      .tt-scrim {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          linear-gradient(
            102deg,
            rgba(13, 31, 20, 0.97) 0%,
            rgba(13, 31, 20, 0.93) 34%,
            rgba(13, 31, 20, 0.62) 66%,
            rgba(13, 31, 20, 0.34) 100%
          ),
          linear-gradient(
            0deg,
            rgba(13, 31, 20, 0.8) 0%,
            rgba(13, 31, 20, 0) 42%
          );
      }
      .tt-inner {
        position: relative;
        z-index: 2;
        width: 100%;
      }
      .tt-grid {
        display: grid;
        grid-template-columns: 96px 1fr;
        gap: 30px;
        align-items: center;
      }
      .tt-steps {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .tt-steps li {
        position: relative;
        padding: 0 0 0 26px;
        height: 70px;
      }
      .tt-steps li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 6px;
        width: 2px;
        height: 64px;
        background: rgba(255, 255, 255, 0.16);
        border-radius: 2px;
      }
      .tt-steps li i {
        position: absolute;
        left: 0;
        top: 6px;
        width: 2px;
        height: 0;
        background: var(--brand-2);
        border-radius: 2px;
        transition: height 0.6s var(--ease);
      }
      .tt-steps li.on i {
        height: 64px;
      }
      .tt-steps li b {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        color: rgba(255, 255, 255, 0.38);
        transition: color 0.5s var(--ease);
        font-variant-numeric: tabular-nums;
      }
      .tt-steps li.on b {
        color: #fff;
      }
      .tt-steps li span {
        display: block;
        font-size: 10.5px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.3);
        margin-top: 3px;
        transition: color 0.5s var(--ease);
      }
      .tt-steps li.on span {
        color: var(--brand-3);
      }
      .tt-stack {
        position: relative;
        min-height: 376px;
      }
      .tt-ch {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: translateY(34px);
        pointer-events: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 0 44px;
        align-items: center;
        transition:
          opacity 0.62s var(--ease),
          transform 0.62s var(--ease);
      }
      .tt-review {
        background: #fff;
        border-radius: 16px;
        padding: 20px 20px 18px;
        box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.65);
        align-self: center;
        height: max-content;
      }
      .tt-review .rv-top {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .tt-review .rv-g {
        width: 26px;
        height: 26px;
        flex: none;
      }
      .tt-review .rv-src {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-3);
      }
      .tt-review .rv-stars {
        display: flex;
        gap: 2px;
        margin-left: auto;
      }
      .tt-review blockquote {
        font-size: 14px;
        line-height: 1.55;
        color: var(--ink);
        margin-top: 12px;
        font-weight: 500;
      }
      .tt-review .rv-who {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
        border-top: 1px solid var(--line);
        padding-top: 12px;
      }
      .tt-review .rv-av {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        flex: none;
        display: grid;
        place-items: center;
        background: var(--wash);
        color: var(--brand);
        font-weight: 700;
        font-size: 13px;
      }
      .tt-review .rv-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--ink);
        line-height: 1.2;
      }
      .tt-review .rv-meta {
        font-size: 11.5px;
        color: var(--muted);
        margin-top: 2px;
      }
      .tt-ch.on {
        opacity: 1;
        transform: none;
        pointer-events: auto;
      }
      .tt-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--brand-3);
      }
      .tt-eyebrow::before {
        content: "";
        width: 26px;
        height: 2px;
        background: var(--brand-3);
        border-radius: 2px;
      }
      .tt-eyebrow.moat {
        color: #6fd08c;
      }
      .tt-eyebrow.moat::before {
        background: #6fd08c;
      }
      .tt-word {
        font-size: clamp(38px, 4.9vw, 62px);
        line-height: 0.96;
        letter-spacing: -0.045em;
        font-weight: 700;
        color: #fff;
        margin: 16px 0 0;
        text-wrap: balance;
      }
      .tt-word em {
        font-style: normal;
        color: var(--brand-3);
      }
      .tt-say {
        font-size: clamp(16px, 1.35vw, 19px);
        line-height: 1.4;
        letter-spacing: -0.015em;
        font-weight: 600;
        color: #fff;
        margin-top: 18px;
        max-width: 38ch;
        text-wrap: balance;
      }
      .tt-pts {
        list-style: none;
        margin: 18px 0 0;
        display: grid;
        gap: 9px;
      }
      .tt-pts li {
        position: relative;
        padding-left: 24px;
        font-size: 14px;
        line-height: 1.45;
        color: #cfe1d6;
        font-weight: 500;
      }
      .tt-pts li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 6px;
        width: 13px;
        height: 8px;
        border-left: 2.4px solid var(--brand-3);
        border-bottom: 2.4px solid var(--brand-3);
        transform: rotate(-45deg);
      }
      .tt-proof {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 22px;
      }
      .tt-proof span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 600;
        color: #dcebe1;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 99px;
        padding: 7px 14px 7px 11px;
      }
      .tt-proof span::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--brand-2);
        flex: none;
      }
      .tt-photo {
        display: none;
      }
      .tt-hint {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 22px;
        z-index: 3;
        text-align: center;
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        transition: opacity 0.5s;
      }
      .tt-hint span {
        display: inline-block;
        animation: nudge 1.9s var(--ease) infinite;
      }
      @keyframes nudge {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(5px);
        }
      }

      /* ---------- live counters ---------- */
      .pulse-band {
        background: var(--deep);
        color: #fff;
        padding: 0;
      }
      .pulse-inner {
        padding: 38px 0 42px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
      }
      .pulse-head {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 26px;
      }
      .live-dot {
        position: relative;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--brand-2);
        flex: none;
      }
      .live-dot::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 2px solid var(--brand-2);
        opacity: 0;
        animation: ping 2.2s var(--ease) infinite;
      }
      @keyframes ping {
        0% {
          transform: scale(0.5);
          opacity: 0.9;
        }
        80%,
        100% {
          transform: scale(1.5);
          opacity: 0;
        }
      }
      .pulse-head b {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--brand-3);
      }
      .pulse-head small {
        font-size: 12.5px;
        color: #8fa89a;
      }
      .pulse-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 2px;
        border-radius: 16px;
        overflow: hidden;
      }
      .pulse-cell {
        background: rgba(255, 255, 255, 0.055);
        padding: 24px 24px 22px;
      }
      .pulse-cell .n {
        font-size: clamp(30px, 3.6vw, 46px);
        font-weight: 700;
        letter-spacing: -0.035em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
      }
      .pulse-cell .n i {
        font-style: normal;
        font-size: 0.48em;
        font-weight: 600;
        color: var(--brand-3);
        margin-left: 4px;
      }
      .pulse-cell .k {
        font-size: 13px;
        color: #a2b9aa;
        margin-top: 9px;
      }
      .pulse-cell .sub {
        font-size: 11.5px;
        color: #6a7d71;
        margin-top: 4px;
      }

      /* ---------- network map ---------- */
      .mapwrap {
        display: grid;
        grid-template-columns: 1.25fr 0.75fr;
        gap: 38px;
        align-items: start;
        margin-top: 36px;
      }
      .mapfield {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 22px;
        padding: 12px;
        box-shadow: var(--sh);
        overflow: hidden;
      }
      .mapfield svg {
        width: 100%;
        height: auto;
      }
      .mapfield video {
        background: #f4f8f5;
      }
      .pin {
        cursor: pointer;
      }
      .pin .halo {
        opacity: 0;
        transform-origin: center;
        transition: opacity 0.3s var(--ease);
      }
      .pin:hover .halo,
      .pin:focus-visible .halo {
        opacity: 1;
      }
      .pin text {
        font-family: inherit;
        font-weight: 600;
        fill: var(--ink);
        paint-order: stroke;
        stroke: #fff;
        stroke-width: 4px;
        stroke-linejoin: round;
      }
      .pin .sub {
        font-weight: 500;
        fill: var(--ink-3);
        stroke-width: 3.4px;
      }
      .maplegend {
        display: flex;
        gap: 18px;
        flex-wrap: wrap;
        padding: 6px 10px 10px;
      }
      .maplegend span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12.5px;
        color: var(--ink-2);
        font-weight: 600;
      }
      .maplegend i {
        width: 13px;
        height: 13px;
        border-radius: 50%;
        flex: none;
      }
      .sitelist {
        display: grid;
        gap: 10px;
      }
      .site {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 16px 18px;
        transition: 0.24s var(--ease);
      }
      .site:hover {
        transform: translateY(-2px);
        box-shadow: var(--sh);
      }
      .site .tag {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--brand);
      }
      .site .tag i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--brand);
        flex: none;
      }
      .site.cc .tag {
        color: var(--amber);
      }
      .site.cc .tag i {
        background: var(--amber);
      }
      .site .nm {
        font-size: 15px;
        font-weight: 700;
        margin-top: 6px;
      }
      .site .rl {
        font-size: 12.5px;
        color: var(--ink-3);
        margin-top: 3px;
      }

      /* ---------- testimonials ---------- */
      .voices {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        margin-top: 36px;
      }
      .voice {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 28px;
        box-shadow: var(--sh);
        display: flex;
        flex-direction: column;
        transition: 0.28s var(--ease);
      }
      .voice:hover {
        transform: translateY(-4px);
        box-shadow: var(--sh-lg);
      }
      /* Semantic color - not in original brand palette, needs sign-off from brand team. See website QC audit. */
      .voice .stars {
        display: flex;
        gap: 3px;
        color: #f0a91c;
        font-size: 14px;
        letter-spacing: 1px;
      }
      .voice blockquote {
        font-size: 15.5px;
        line-height: 1.6;
        color: var(--ink);
        margin-top: 14px;
        flex: 1;
      }
      .voice blockquote::before {
        content: "“";
        display: block;
        font-size: 44px;
        line-height: 0.6;
        color: var(--brand-3);
        margin-bottom: 6px;
      }
      .voice figcaption {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid var(--line);
      }
      .voice .av {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--wash);
        color: var(--brand);
        display: grid;
        place-items: center;
        font-size: 14px;
        font-weight: 700;
        flex: none;
      }
      .voice .who {
        display: block;
        font-size: 14px;
        font-weight: 600;
      }
      .voice .where {
        display: block;
        font-size: 12.5px;
        color: var(--ink-3);
        margin-top: 2px;
      }
      .voice .vtag {
        margin-top: 14px;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--brand);
        background: var(--wash);
        border-radius: 7px;
        padding: 5px 10px;
        align-self: flex-start;
      }
      .voice-note {
        margin-top: 20px;
        font-size: 12px;
        color: var(--muted);
        text-align: center;
      }

      /* ---------- two documents ---------- */
      @keyframes sceneIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      @keyframes ink {
        to {
          stroke-dashoffset: 0;
        }
      }
      @keyframes flow {
        to {
          stroke-dashoffset: -26;
        }
      }
      @keyframes stamp {
        0% {
          transform: scale(1.7);
          opacity: 0;
        }
        62% {
          transform: scale(0.95);
          opacity: 1;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }
      @keyframes tearL {
        from {
          transform: translateX(0) rotate(0);
        }
        to {
          transform: translateX(-30px) rotate(-3deg);
        }
      }
      @keyframes tearR {
        from {
          transform: translateX(0) rotate(0);
        }
        to {
          transform: translateX(26px) rotate(2.5deg);
        }
      }
      @keyframes riseIn {
        from {
          opacity: 0;
          transform: translateY(16px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      @keyframes glow {
        0%,
        100% {
          opacity: 0.3;
        }
        50% {
          opacity: 1;
        }
      }
      @keyframes handOff {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(188px);
        }
      }
      @keyframes fadeOut {
        from {
          opacity: 0.9;
        }
        to {
          opacity: 0.14;
        }
      }
      @keyframes drip {
        0% {
          transform: translateY(0);
          opacity: 0;
        }
        25% {
          opacity: 1;
        }
        90% {
          transform: translateY(26px);
          opacity: 1;
        }
        100% {
          transform: translateY(30px);
          opacity: 0;
        }
      }
      #certificates [data-beat]:hover {
        color: var(--brand) !important;
      }
      @media (max-width: 768px) {
        #certificates [style*="grid-template-columns: 1fr 1fr"] {
          grid-template-columns: 1fr !important;
        }
        #certificates [style*="grid-template-columns: 1fr auto"] {
          grid-template-columns: 1fr !important;
          align-items: start !important;
        }
        #certificates {
          padding: 44px 18px 52px !important;
        }
        #certificates h2 {
          font-size: 22px !important;
          white-space: normal !important;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        #certificates * {
          animation: none !important;
        }
      }

      /* ---------- traceability checkpoints ---------- */
      #evidence [data-mx]:hover {
        border-color: #c7dccd;
      }
      #evidence [data-mx] {
        font: inherit;
      }
      #evidence .mx-panel[hidden],
      #evidence .mx-on[hidden] {
        display: none;
      }
      #evidence .mx-prog {
        display: block;
        height: 100%;
        border-radius: 2px;
        background: #3aa253;
        transform-origin: left;
        transform: scaleX(0);
        animation: k-progress 8s linear forwards;
      }
      @keyframes k-scan {
        0% {
          transform: translateX(0);
          opacity: 0;
        }
        8% {
          opacity: 1;
        }
        46% {
          transform: translateX(268px);
          opacity: 1;
        }
        56% {
          transform: translateX(268px);
          opacity: 0;
        }
        100% {
          transform: translateX(0);
          opacity: 0;
        }
      }
      @keyframes k-in {
        0%,
        6% {
          opacity: 0;
          transform: translateY(14px);
        }
        16%,
        92% {
          opacity: 1;
          transform: translateY(0);
        }
        100% {
          opacity: 0;
          transform: translateY(14px);
        }
      }
      @keyframes k-inx {
        0%,
        6% {
          transform: scaleX(0);
        }
        22%,
        92% {
          transform: scaleX(1);
        }
        100% {
          transform: scaleX(0);
        }
      }
      @keyframes k-draw {
        0%,
        10% {
          stroke-dashoffset: 64;
        }
        26%,
        100% {
          stroke-dashoffset: 0;
        }
      }
      @keyframes k-ripple {
        0%,
        34% {
          transform: scale(0.6);
          opacity: 0;
        }
        40% {
          opacity: 0.9;
        }
        62%,
        100% {
          transform: scale(1.9);
          opacity: 0;
        }
      }
      @keyframes k-stamp {
        0%,
        32% {
          transform: scale(1.9);
          opacity: 0;
        }
        42% {
          transform: scale(0.94);
          opacity: 1;
        }
        50%,
        92% {
          transform: scale(1);
          opacity: 1;
        }
        100% {
          transform: scale(1.9);
          opacity: 0;
        }
      }
      @keyframes k-flash {
        0%,
        41% {
          opacity: 0;
        }
        43% {
          opacity: 0.55;
        }
        48%,
        100% {
          opacity: 0;
        }
      }
      @keyframes k-cut {
        0%,
        22% {
          transform: scaleY(0);
          opacity: 0;
        }
        30% {
          opacity: 1;
        }
        34% {
          transform: scaleY(1);
          opacity: 1;
        }
        46% {
          transform: scaleY(1);
          opacity: 1;
        }
        54%,
        100% {
          transform: scaleY(1);
          opacity: 0;
        }
      }
      @keyframes k-type {
        0%,
        4% {
          width: 0;
        }
        34%,
        100% {
          width: 13ch;
        }
      }
      @keyframes k-blink {
        0%,
        50% {
          opacity: 1;
        }
        51%,
        100% {
          opacity: 0;
        }
      }
      @keyframes k-splitL {
        0%,
        42% {
          transform: translateX(0);
        }
        58%,
        86% {
          transform: translateX(-11px);
        }
        100% {
          transform: translateX(0);
        }
      }
      @keyframes k-splitR {
        0%,
        42% {
          transform: translateX(0);
        }
        58%,
        86% {
          transform: translateX(11px);
        }
        100% {
          transform: translateX(0);
        }
      }
      @keyframes k-press {
        0%,
        8% {
          transform: translateY(-26px);
          opacity: 0;
        }
        16% {
          opacity: 1;
        }
        24% {
          transform: translateY(3px);
        }
        30%,
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }
      @keyframes k-pulse {
        0%,
        100% {
          opacity: 0.35;
        }
        50% {
          opacity: 1;
        }
      }
      @keyframes k-sweepglow {
        0%,
        100% {
          opacity: 0.3;
        }
        50% {
          opacity: 0.75;
        }
      }
      @keyframes k-progress {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(1);
        }
      }
      @media (max-width: 1024px) {
        #evidence [data-grid] {
          grid-template-columns: minmax(0, 1fr) !important;
        }
      }
      @media (max-width: 768px) {
        #evidence {
          padding: 44px 18px 52px !important;
        }
        #evidence h2 {
          font-size: 29px !important;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        #evidence * {
          animation: none !important;
        }
      }

      /* ---------- evidence chain (animated diagrams) ---------- */
      .ev {
        background: var(--deep);
        color: #fff;
        position: relative;
        overflow: hidden;
      }
      .ev::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.5;
        background: radial-gradient(
          50% 40% at 80% 0%,
          rgba(54, 164, 80, 0.22),
          rgba(54, 164, 80, 0) 70%
        );
      }
      .ev h2,
      .ev h3 {
        color: #fff;
      }
      .ev .sec-label {
        color: var(--brand-3);
      }
      .ev .sec-lede {
        color: #c1d4c7;
      }
      .ev-wrap {
        position: relative;
        z-index: 1;
        margin-top: 44px;
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 34px;
        align-items: start;
      }
      .ev-rail {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .ev-btn {
        display: grid;
        grid-template-columns: 34px 1fr;
        gap: 13px;
        align-items: center;
        text-align: left;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 14px;
        padding: 15px 17px;
        cursor: pointer;
        font: inherit;
        color: #cddcd3;
        transition: 0.28s var(--ease);
        min-height: 44px;
      }
      .ev-btn:hover {
        background: rgba(255, 255, 255, 0.08);
      }
      .ev-btn[aria-selected="true"] {
        background: rgba(54, 164, 80, 0.16);
        border-color: var(--brand-2);
        color: #fff;
      }
      .ev-btn .n {
        font-size: 12px;
        font-weight: 700;
        color: var(--brand-3);
        font-variant-numeric: tabular-nums;
      }
      .ev-btn .t {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
      }
      .ev-btn .bar {
        grid-column: 1/-1;
        height: 2px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.12);
        overflow: hidden;
        margin-top: 2px;
        display: none;
      }
      .ev-btn[aria-selected="true"] .bar {
        display: block;
      }
      .ev-btn .bar i {
        display: block;
        height: 100%;
        background: var(--brand-2);
        width: 0;
      }
      .ev-btn[aria-selected="true"] .bar i {
        animation: fill 7s linear forwards;
      }
      @keyframes fill {
        to {
          width: 100%;
        }
      }
      .ev-stage {
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 22px;
        padding: 34px;
        min-height: 430px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .ev-panel[hidden] {
        display: none;
      }
      .ev-panel {
        animation: fadeUp 0.55s var(--ease);
      }
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(14px);
        }
      }
      .ev-panel h3 {
        font-size: clamp(22px, 2.6vw, 30px);
        letter-spacing: -0.025em;
        line-height: 1.12;
        margin-top: 26px;
      }
      .ev-panel p {
        font-size: 15px;
        color: #b8ccbf;
        margin-top: 10px;
        max-width: 48ch;
      }
      .ev-panel cite {
        display: block;
        font-style: normal;
        font-size: 11.5px;
        color: #6a7d71;
        margin-top: 14px;
        letter-spacing: 0.02em;
      }
      .ev-art {
        height: 250px;
        display: grid;
        place-items: center;
      }
      .ev-art svg {
        height: 250px;
        width: 100%;
        max-width: 440px;
      }

      /* svg animation primitives */
      .anim .sweep {
        animation: sweep 2.6s var(--ease) infinite;
      }
      @keyframes sweep {
        0% {
          transform: translateX(0);
        }
        45% {
          transform: translateX(112px);
        }
        90%,
        100% {
          transform: translateX(0);
        }
      }
      .anim .popin {
        animation: popin 0.6s var(--ease) 1.1s backwards;
      }
      @keyframes popin {
        from {
          opacity: 0;
          transform: scale(0.4);
        }
      }
      .anim .slidedoc {
        animation: slidedoc 2.8s var(--ease) infinite;
      }
      @keyframes slidedoc {
        0%,
        10% {
          transform: translate(0, 0);
          opacity: 0;
        }
        35%,
        75% {
          transform: translate(0, -52px);
          opacity: 1;
        }
        100% {
          transform: translate(0, -52px);
          opacity: 1;
        }
      }
      .anim .stamp {
        animation: stamp 2.8s var(--ease) infinite;
      }
      @keyframes stamp {
        0%,
        45% {
          transform: scale(2.6);
          opacity: 0;
        }
        60% {
          transform: scale(1);
          opacity: 1;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }
      .anim .draw {
        stroke-dasharray: 180;
        stroke-dashoffset: 180;
        animation: draw 2.4s var(--ease) infinite;
      }
      @keyframes draw {
        0% {
          stroke-dashoffset: 180;
        }
        55%,
        100% {
          stroke-dashoffset: 0;
        }
      }
      .anim .flash {
        animation: flash 2.4s var(--ease) infinite;
      }
      @keyframes flash {
        0%,
        55% {
          opacity: 0;
        }
        62% {
          opacity: 0.95;
        }
        80%,
        100% {
          opacity: 0;
        }
      }
      .anim .rise {
        animation: rise 2.4s var(--ease) infinite;
      }
      @keyframes rise {
        0% {
          transform: scaleY(0);
        }
        60%,
        100% {
          transform: scaleY(1);
        }
      }
      .anim .fan1 {
        animation: fan1 2.8s var(--ease) infinite;
      }
      .anim .fan2 {
        animation: fan2 2.8s var(--ease) infinite;
      }
      .anim .fan3 {
        animation: fan3 2.8s var(--ease) infinite;
      }
      @keyframes fan1 {
        0% {
          transform: translate(0, 0) rotate(0);
        }
        55%,
        100% {
          transform: translate(-62px, -16px) rotate(-11deg);
        }
      }
      @keyframes fan2 {
        0% {
          transform: translate(0, 0) rotate(0);
        }
        55%,
        100% {
          transform: translate(0, -30px) rotate(0);
        }
      }
      @keyframes fan3 {
        0% {
          transform: translate(0, 0) rotate(0);
        }
        55%,
        100% {
          transform: translate(62px, -16px) rotate(11deg);
        }
      }

      /* ---------- certificate analogy (cartoon) ---------- */
      .story {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
        margin-top: 44px;
      }
      .st {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 22px;
        overflow: hidden;
        box-shadow: var(--sh);
        display: flex;
        flex-direction: column;
      }
      .st-stage {
        background: linear-gradient(165deg, #f2f9f3 0%, #e6f3e9 100%);
        padding: 26px;
        position: relative;
        min-height: 322px;
        display: grid;
        place-items: center;
      }
      .st.amber .st-stage {
        background: linear-gradient(165deg, #f6faf7 0%, #ecf7ef 100%);
      }
      .st-stage svg {
        width: 100%;
        max-width: 430px;
        height: auto;
      }
      .st-body {
        padding: 26px 28px 28px;
      }
      .st-tag {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: var(--deep);
        color: #fff;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        border-radius: 99px;
        padding: 6px 14px;
      }
      .st.amber .st-tag {
        background: var(--amber);
      }
      .st h3 {
        margin-top: 14px;
        font-size: 23px;
        letter-spacing: -0.022em;
      }
      .st .analogy {
        margin-top: 12px;
        font-size: 16px;
        font-weight: 600;
        color: var(--ink);
      }
      .st .analogy span {
        color: var(--brand);
      }
      .st.amber .analogy span {
        color: var(--amber);
      }
      .st p.d {
        font-size: 14px;
        color: var(--ink-2);
        margin-top: 11px;
      }
      .st ul {
        list-style: none;
        margin-top: 14px;
        font-size: 13.5px;
        color: var(--ink-2);
      }
      .st ul li {
        display: flex;
        gap: 9px;
        padding: 3.5px 0;
      }
      .st ul li::before {
        content: "✓";
        color: var(--brand);
        font-weight: 700;
        flex: none;
      }
      .st.amber ul li::before {
        color: var(--amber);
      }
      .st-steps {
        display: flex;
        gap: 6px;
        padding: 0 28px 22px;
      }
      .st-steps button {
        flex: 1;
        min-height: 44px;
        border-radius: 10px;
        border: 1px solid var(--line-2);
        background: #fff;
        font: inherit;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--ink-3);
        cursor: pointer;
        transition: 0.22s var(--ease);
      }
      .st-steps button[aria-current="true"] {
        background: var(--deep);
        color: #fff;
        border-color: var(--deep);
      }
      .st.amber .st-steps button[aria-current="true"] {
        background: var(--amber);
        border-color: var(--amber);
      }
      /* storyboard frame visibility */
      .frame {
        opacity: 0;
        transition:
          opacity 0.42s var(--ease),
          transform 0.42s var(--ease);
        transform: translateY(8px);
      }
      .st-stage[data-step="1"] .f1,
      .st-stage[data-step="2"] .f2,
      .st-stage[data-step="3"] .f3,
      .st-stage[data-step="4"] .f4 {
        opacity: 1;
        transform: none;
      }
      .legal-strip {
        margin-top: 24px;
        background: var(--wash);
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        padding: 17px 21px;
        font-size: 13.5px;
        color: var(--ink-2);
      }
      .legal-strip b {
        color: var(--ink);
      }

      /* ---------- process ---------- */
      .car-nav {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 20px;
      }
      .car-nav button {
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        padding: 11px 17px;
        border-radius: 99px;
        border: 1px solid var(--line-2);
        background: #fff;
        color: var(--ink-2);
        cursor: pointer;
        min-height: 44px;
        height: auto;
        display: inline-flex;
        align-items: center;
        text-align: center;
        transition: 0.2s var(--ease);
      }
      .car-nav button[aria-selected="true"] {
        background: var(--deep);
        color: #fff;
        border-color: var(--deep);
      }
      .slide {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 22px;
        overflow: hidden;
        box-shadow: var(--sh);
        animation: fadeUp 0.5s var(--ease);
      }
      .slide[hidden] {
        display: none;
      }
      .slide .txt {
        padding: 32px 36px;
      }
      .slide .pic {
        min-height: 0;
        overflow: hidden;
        position: relative;
      }
      .slide .pic img {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
        margin: 0;
      }
      /* one box size in both layouts — sized to the tallest step */
      @media (min-width: 1024px) {
        .slide {
          height: 470px;
          grid-template-rows: 100%;
        }
      }
      @media (min-width: 1280px) {
        .slide {
          height: 392px;
          grid-template-rows: 100%;
        }
      }
      @media (max-width: 1024px) {
        .slide {
          grid-template-columns: 1fr;
          min-height: 510px;
        }
        .slide .pic {
          border-left: 0;
          border-top: 1px solid var(--line);
          min-height: 220px;
        }
      }
      .slide .num {
        font-size: 11.5px;
        font-weight: 700;
        color: var(--brand);
        letter-spacing: 0.12em;
      }
      .slide h3 {
        margin-top: 9px;
        font-size: 25px;
        letter-spacing: -0.025em;
        line-height: 1.16;
      }
      .slide .analogy {
        margin-top: 16px;
        background: var(--amber-wash);
        border-left: 3px solid var(--amber);
        padding: 13px 17px;
        border-radius: 0 10px 10px 0;
        font-size: 14px;
        color: #6d3d19;
      }
      .slide .analogy b {
        color: #5a3214;
      }
      .slide p.d {
        font-size: 14.5px;
        color: var(--ink-2);
        margin-top: 15px;
      }
      .slide .pic {
        background: var(--wash);
        border-left: 1px solid var(--line);
        display: grid;
        place-items: center;
        padding: 20px;
        overflow: hidden;
      }
      .slide .pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: var(--sh);
      }
      .slide .pic svg {
        width: 100%;
        max-width: 320px;
        height: auto;
      }
      .slide .pic:empty::after,
      .pic-slot::after {
        content: "Image";
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .pic-slot {
        width: 100%;
        height: 100%;
        border: 1.5px dashed var(--line-2);
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.5);
      }

      /* ---------- environmental emblem ---------- */
      .impact-hero {
        display: grid;
        grid-template-columns: minmax(280px, 410px) 1fr;
        gap: 52px;
        align-items: center;
      }
      .emblem-wrap {
        position: relative;
        display: grid;
        place-items: center;
      }
      .emblem-wrap::before {
        content: "";
        position: absolute;
        width: 78%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(
          closest-side,
          rgba(54, 164, 80, 0.3),
          rgba(54, 164, 80, 0)
        );
        filter: blur(6px);
      }
      .emblem {
        position: relative;
        width: 100%;
        max-width: 410px;
        height: auto;
      }
      .em-ring {
        animation: emspin 78s linear infinite;
        transform-origin: 230px 238px;
      }
      @keyframes emspin {
        to {
          transform: rotate(360deg);
        }
      }
      .em-globe {
        animation: emfloat 9s ease-in-out infinite;
      }
      .em-tree,
      .em-metal {
        animation: emfloat 7s ease-in-out infinite;
      }
      .em-hands {
        animation: emfloat 7s ease-in-out infinite;
        animation-delay: 0.15s;
      }
      @keyframes emfloat {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-7px);
        }
      }
      .emblem .lf {
        transform-origin: 230px 320px;
        animation: emleaf 0.85s var(--ease) var(--d) backwards;
      }
      @keyframes emleaf {
        from {
          opacity: 0;
          transform: scale(0.25);
        }
      }
      @keyframes floaty {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-9px);
        }
      }
      @keyframes dotFlow {
        to {
          stroke-dashoffset: -35;
        }
      }
      @keyframes globeSpin {
        to {
          transform: rotate(360deg);
        }
      }
      .impact-claim {
        margin-top: 24px;
        border-left: 3px solid var(--brand-2);
        padding: 6px 0 6px 20px;
        max-width: 54ch;
      }
      .impact-claim p {
        font-size: 16.5px;
        font-weight: 600;
        color: var(--ink);
        line-height: 1.45;
      }
      .impact-claim small {
        display: block;
        font-size: 13.5px;
        color: var(--ink-3);
        margin-top: 8px;
        font-weight: 400;
        line-height: 1.6;
      }

      /* ---------- impact ---------- */
      .impact {
        background: #fff;
        color: var(--ink);
      }
      .impact h2,
      .impact h3 {
        color: var(--ink);
      }
      .impact .sec-lede {
        color: var(--ink-2);
      }
      .impact-lede {
        display: flex;
        flex-direction: column;
        gap: 11px;
        margin-top: 15px;
        max-width: 62ch;
      }
      .impact-lede p {
        font-size: 15.5px;
        line-height: 1.7;
        color: var(--ink-2);
        text-wrap: pretty;
      }
      .impact-lede p.accent {
        color: var(--brand);
        font-weight: 600;
      }
      .impact-claims-title {
        margin-top: 30px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .impact-close {
        margin-top: 28px;
        max-width: 62ch;
        font-size: 15.5px;
        line-height: 1.65;
        font-weight: 500;
        color: var(--ink);
        text-wrap: pretty;
      }
      .globe-stage {
        position: relative;
        width: min(100%, 460px);
        aspect-ratio: 1/1;
        margin-inline: auto;
      }
      .globe-stage svg.orbit {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
      }
      .globe-stage .globe {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 66%;
        animation: floaty 9s ease-in-out infinite;
      }
      .globe-stage .globe img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        filter: drop-shadow(rgba(13, 31, 20, 0.22) 0 22px 30px);
        animation: globeSpin 90s linear infinite;
      }
      .calc {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 22px;
        padding: 28px;
        margin-top: 36px;
      }
      .calc .vtype label {
        background: #fff;
        border-color: var(--line-2);
        color: var(--ink-2);
      }
      .calc .vtype input:checked + label {
        background: var(--wash);
        border-color: var(--brand);
        color: var(--brand);
        box-shadow: inset 0 0 0 1px var(--brand);
      }
      .calc legend {
        color: var(--muted);
      }
      .stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        margin-top: 24px;
        border-radius: 14px;
        overflow: hidden;
        background: var(--line);
      }
      .stat {
        background: #fff;
        padding: 22px;
      }
      .stat .v {
        font-size: 34px;
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.1;
        color: var(--ink);
      }
      .stat .u {
        font-size: 13px;
        color: var(--ink-3);
        margin-top: 5px;
      }
      .ladder {
        margin-top: 26px;
        display: grid;
        gap: 1px;
        border-radius: 14px;
        overflow: hidden;
        background: var(--line);
      }
      .rung {
        background: #fff;
        padding: 16px 21px;
        display: flex;
        gap: 18px;
        align-items: baseline;
        flex-wrap: wrap;
      }
      .rung .tgt {
        font-size: 14px;
        font-weight: 600;
        flex: 1;
        min-width: 230px;
        color: var(--ink);
      }
      .rung .val {
        font-size: 13px;
        color: var(--ink-3);
      }
      .method {
        margin-top: 24px;
        font-size: 12px;
        color: var(--ink-3);
        line-height: 1.65;
      }
      .method a {
        color: var(--brand);
      }

      /* ---------- faq ---------- */
      .ask {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 22px;
        padding: 24px;
        box-shadow: var(--sh);
        margin-top: 34px;
      }
      .ask-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .ask-row input {
        flex: 1;
        min-width: 200px;
      }
      .chips {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
        margin-top: 13px;
      }
      .chips button {
        font: inherit;
        font-size: 12.5px;
        padding: 10px 15px;
        border-radius: 99px;
        border: 1px solid var(--line-2);
        background: #fff;
        color: var(--ink-2);
        cursor: pointer;
        min-height: 44px;
        transition: 0.2s var(--ease);
      }
      .chips button:hover {
        border-color: var(--brand);
        color: var(--brand);
      }
      .answer {
        margin-top: 18px;
        border-top: 1px solid var(--line);
        padding-top: 18px;
        animation: fadeUp 0.4s var(--ease);
      }
      .answer[hidden] {
        display: none;
      }
      .answer .tag {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--brand);
      }
      .answer .a-body {
        font-size: 15px;
        color: var(--ink);
        margin-top: 9px;
      }
      .answer .a-src {
        font-size: 12px;
        color: var(--muted);
        margin-top: 11px;
      }
      .answer .a-more {
        margin-top: 15px;
        font-size: 13px;
      }
      .answer .a-more a {
        display: block;
        padding: 3px 0;
      }
      details.faq {
        border-bottom: 1px solid var(--line);
      }
      details.faq summary {
        list-style: none;
        cursor: pointer;
        padding: 19px 42px 19px 0;
        font-size: 15.5px;
        font-weight: 600;
        position: relative;
        min-height: 44px;
      }
      details.faq summary::-webkit-details-marker {
        display: none;
      }
      details.faq summary::after {
        content: "";
        position: absolute;
        right: 12px;
        top: 27px;
        width: 12px;
        height: 2px;
        background: var(--brand);
        transition: 0.3s var(--ease);
      }
      details.faq summary::before {
        content: "";
        position: absolute;
        right: 17px;
        top: 22px;
        width: 2px;
        height: 12px;
        background: var(--brand);
        transition: 0.3s var(--ease);
      }
      details.faq[open] summary::before {
        transform: rotate(90deg);
        opacity: 0;
      }
      details.faq .a {
        padding: 0 0 22px;
        font-size: 14.5px;
        color: var(--ink-2);
        max-width: 78ch;
      }
      details.faq .a cite {
        display: block;
        font-style: normal;
        font-size: 12px;
        color: var(--muted);
        margin-top: 9px;
      }
      .faq-list {
        margin-top: 28px;
        border-top: 1px solid var(--line);
      }

      /* ---------- network / cities / cta / footer ---------- */
      .entities {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-top: 28px;
      }
      .ent {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 20px 22px;
        transition: 0.28s var(--ease);
      }
      .ent:hover {
        transform: translateY(-3px);
        box-shadow: var(--sh);
      }
      .ent .nm {
        font-size: 15px;
        font-weight: 700;
      }
      .ent .rl {
        font-size: 12.5px;
        color: var(--ink-3);
        margin-top: 5px;
      }
      .cities {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        margin-top: 24px;
      }
      .cities a {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 99px;
        padding: 11px 18px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink-2);
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        transition: 0.2s var(--ease);
      }
      .cities a:hover {
        border-color: var(--brand);
        color: var(--brand);
        text-decoration: none;
        transform: translateY(-2px);
      }
      .legacy {
        background: var(--deep);
        border-radius: 26px;
        overflow: hidden;
        box-shadow: var(--sh-lg);
      }
      .legacy-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .legacy-pic {
        position: relative;
        background: var(--deep-2);
        min-height: 420px;
        display: grid;
        place-items: center;
        padding: 18px;
      }
      .legacy-pic .pic-slot {
        width: 100%;
        height: 100%;
        border: 1.5px dashed rgba(255, 255, 255, 0.22);
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.03);
      }
      .legacy-pic .pic-slot::after {
        content: "Image";
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
      }
      .legacy-pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
      }
      .legacy-copy {
        padding: 52px 52px 46px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .legacy-copy h2 {
        color: #fff;
        font-size: clamp(24px, 2.5vw, 32px);
        line-height: 1.18;
        letter-spacing: -0.025em;
      }
      .legacy-copy .amber {
        display: block;
        color: var(--brand-3);
        margin-top: 14px;
      }
      .legacy-copy p {
        color: #b6cdbe;
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.7;
        max-width: 46ch;
      }
      .band {
        background: var(--deep-2);
        color: #fff;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 34px 52px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 24px;
        align-items: center;
        position: relative;
        overflow: hidden;
      }
      .band::before {
        content: "";
        position: absolute;
        inset: auto -10% -60% 40%;
        height: 200%;
        background: radial-gradient(
          closest-side,
          rgba(54, 164, 80, 0.28),
          rgba(54, 164, 80, 0)
        );
        pointer-events: none;
      }
      .band h2 {
        color: #fff;
        font-size: clamp(20px, 2vw, 25px);
        position: relative;
        letter-spacing: -0.02em;
      }
      .band p {
        color: #b6cdbe;
        margin-top: 9px;
        max-width: 56ch;
        font-size: 14px;
        position: relative;
      }

      /* ---------- grandchildren (image behind whole section) ---------- */
      .gc {
        position: relative;
        width: 100%;
        background: var(--deep);
        color: #fff;
        isolation: isolate;
        overflow: hidden;
      }
      .gc .gc-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 34%;
        z-index: -2;
      }
      .gc::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(
          180deg,
          rgba(6, 16, 10, 0.62) 0%,
          rgba(6, 16, 10, 0.74) 34%,
          rgba(6, 16, 10, 0.88) 100%
        );
      }
      .gc-inner {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 96px 22px 88px;
        position: relative;
      }
      .gc-kicker {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--brand-3);
      }
      .gc-head {
        text-align: center;
        max-width: 1000px;
        margin: 0 auto;
      }
      .gc-head h2 {
        color: #fff;
        font-size: clamp(1.85rem, 4.6vw, 2.3125rem);
        margin-top: 16px;
        letter-spacing: -0.035em;
        line-height: 1.08;
      }
      .gc-head .sub {
        display: block;
        color: var(--brand-3);
        margin-top: 14px;
        font-size: clamp(18px, 1.85vw, 25px);
        font-weight: 500;
        letter-spacing: -0.022em;
        line-height: 1.35;
      }
      .gc-two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 54px;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
      }
      .gc-two > div {
        padding: 34px 44px 38px;
      }
      .gc-two > div:first-child {
        padding-left: 0;
      }
      .gc-two > div + div {
        border-left: 1px solid rgba(255, 255, 255, 0.16);
        padding-right: 0;
      }
      .gc-two .lbl {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 10px;
      }
      .gc-two p {
        color: #cfe3d6;
        font-size: 15.5px;
        line-height: 1.75;
      }
      .gc-answer {
        text-align: center;
        padding: 64px 0 8px;
      }
      .gc-answer p {
        color: #fff;
        font-size: clamp(24px, 2.7vw, 38px);
        font-weight: 600;
        letter-spacing: -0.028em;
        line-height: 1.3;
      }
      .gc-answer .l2 {
        display: block;
        color: var(--brand-3);
        margin-top: 16px;
        font-weight: 500;
        letter-spacing: -0.015em;
        font-size: min(20px, 1.72vw);
        white-space: nowrap;
      }
      .gc-close {
        margin-top: 56px;
        padding-top: 38px;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 36px;
        align-items: center;
      }
      .gc-close p {
        font-size: 16.5px;
        line-height: 1.72;
        color: #cfe3d6;
        max-width: 66ch;
      }
      .gc-close strong {
        color: #fff;
        font-weight: 600;
      }
      .gc-close .btn {
        background: var(--brand-2);
      }
      .gc-close .btn:hover {
        background: var(--brand);
      }
      @media (max-width: 1024px) {
        .gc-answer .l2 {
          white-space: normal;
          font-size: 17px;
        }
      }
      @media (max-width: 768px) {
        .gc-inner {
          padding: 64px 22px 60px;
        }
        .gc-two {
          grid-template-columns: 1fr;
          margin-top: 38px;
        }
        .gc-two > div {
          padding: 26px 0 28px;
        }
        .gc-two > div + div {
          border-left: 0;
          border-top: 1px solid rgba(255, 255, 255, 0.16);
        }
        .gc-answer {
          padding: 44px 0 0;
        }
        .gc-close {
          grid-template-columns: 1fr;
          margin-top: 40px;
        }
        .legacy-top {
          grid-template-columns: 1fr;
        }
        .legacy-pic {
          min-height: 260px;
        }
        .legacy-copy {
          padding: 34px 28px 30px;
        }
      }
      footer.site {
        background: var(--deep);
        color: #ffffff;
        padding: 60px 0 34px;
        font-size: var(--text-caption);
      }
      footer.site h4 {
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.05em;
        margin-bottom: 13px;
      }
      .f-grid {
        display: grid;
        grid-template-columns: 1.7fr 1fr 1fr 1fr;
        gap: 36px;
      }
      footer.site a {
        color: #ffffff;
        display: block;
        padding: 4px 0;
      }
      footer.site a:hover {
        color: #fff;
        opacity: 0.85;
      }
      .disclosure {
        margin-top: 38px;
        padding-top: 26px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        font-size: var(--text-caption);
        line-height: 1.75;
        color: rgba(255, 255, 255, 0.6);
      }
      .disclosure strong {
        color: rgba(255, 255, 255, 0.85);
      }
      .legal-row {
        margin-top: 22px;
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.55);
      }
      .mobile-cta {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--line);
        padding: 10px 14px;
        gap: 10px;
      }
      .mobile-cta .btn {
        flex: 1;
      }

      @media (max-width: 1024px) {
        .bar {
          height: 52px;
          padding: 0 16px;
          gap: 12px;
        }
        nav.main,
        .bar .tel {
          display: none;
        }
        .burger {
          display: flex;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }
        .bar .btn-primary {
          margin-left: auto;
          padding: 9px 16px;
          font-size: 13.5px;
          min-height: 40px;
          white-space: nowrap;
        }
        .bar .logo img {
          height: 27px !important;
        }
        nav.main.open {
          display: flex;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: #fff;
          flex-direction: column;
          gap: 0;
          padding: 6px 18px 12px;
          border-bottom: 1px solid var(--line);
          box-shadow: var(--sh);
          margin-left: 0;
        }
        nav.main.open a {
          padding: 10px 0;
          border-bottom: 1px solid var(--line);
          font-size: 14px;
        }
        nav.main.open .nav-item-dropdown {
          display: block;
          width: 100%;
          border-bottom: 1px solid var(--line);
        }
        nav.main.open .nav-dropdown-toggle {
          width: 100%;
          justify-content: space-between;
          padding: 10px 0;
          font-size: 14px;
        }
        nav.main.open .nav-dropdown-menu {
          position: static;
          top: auto;
          left: auto;
          box-shadow: none;
          border: none;
          background: transparent;
          padding: 0 0 8px 14px;
          min-width: 100%;
          opacity: 1;
          visibility: visible;
          transform: none;
          display: none;
        }
        nav.main.open .nav-item-dropdown.open .nav-dropdown-menu {
          display: block;
        }
        nav.main.open .nav-dropdown-menu a {
          border-bottom: none !important;
          padding: 6px 0 !important;
        }
        .hero-grid {
          grid-template-columns: 1fr;
          gap: 30px;
        }
        .grid2,
        .slide,
        .story,
        .entities,
        .stats {
          grid-template-columns: 1fr;
        }
        .ev-wrap {
          grid-template-columns: 1fr;
        }
        .ev-rail {
          flex-direction: row;
          overflow-x: auto;
          padding-bottom: 6px;
          scrollbar-width: none;
        }
        .ev-rail::-webkit-scrollbar {
          display: none;
        }
        .ev-btn {
          flex: 0 0 210px;
        }
        .f-grid {
          grid-template-columns: 1fr 1fr;
        }
        .band {
          grid-template-columns: 1fr;
          padding: 28px 28px 32px;
        }
        .pulse-grid {
          grid-template-columns: 1fr 1fr;
        }
        .pulse-grid .pulse-cell:last-child {
          grid-column: 1/-1;
        }
        .mapwrap {
          grid-template-columns: 1fr;
          gap: 26px;
        }
        .voices {
          grid-template-columns: 1fr;
        }
        .impact-hero {
          grid-template-columns: 1fr;
          gap: 34px;
        }
        .emblem-wrap {
          max-width: 330px;
          margin: 0 auto;
        }
        .tt-grid {
          grid-template-columns: 64px 1fr;
          gap: 18px;
        }
        .tt-steps li span {
          display: none;
        }
        .tt-steps li {
          height: 62px;
        }
        .tt-steps li::before,
        .tt-steps li i {
          height: 56px;
        }
        .tt-stack {
          min-height: 300px;
        }
        .tt-ch {
          grid-template-columns: minmax(0, 1fr) 260px;
          gap: 28px;
        }
      }
      @media (max-width: 768px) {
        .bar {
          height: 48px;
          padding: 0 14px;
          gap: 10px;
        }
        .bar .logo img {
          height: 26px !important;
        }
        .bar .btn-primary {
          padding: 8px 14px;
          font-size: 13px;
          min-height: 38px;
        }
        .burger {
          width: 38px;
          height: 38px;
          border-radius: 8px;
        }
        nav.main.open {
          display: flex;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: #fff;
          flex-direction: column;
          gap: 0;
          padding: 4px 16px 8px;
          border-bottom: 1px solid var(--line);
          box-shadow: var(--sh);
          margin: 0;
        }
        nav.main.open a {
          padding: 8px 0;
          border-bottom: 1px solid var(--line);
          font-size: 13.5px;
          min-height: 34px;
          display: flex;
          align-items: center;
        }
        nav.main.open .tel-m {
          display: flex !important;
          color: var(--brand);
          font-weight: 650;
        }
        section {
          padding: 60px 0;
        }
        h1 {
          font-size: clamp(26px, 7.5vw, 34px);
        }
        .hero {
          padding: 22px 0 24px;
        }
        .mobile-cta {
          display: flex;
        }
        body {
          padding-bottom: 74px;
        }
        .vtypes {
          grid-template-columns: repeat(2, 1fr);
        }
        .slide .txt {
          padding: 26px 24px;
        }
        .st-body {
          padding: 22px 22px 24px;
        }
        .st-steps {
          padding: 0 22px 20px;
        }
        .ev-stage {
          padding: 24px;
          min-height: 0;
        }
        .pulse-inner {
          padding: 30px 0 34px;
        }
        .pulse-cell {
          padding: 18px;
        }
        .tt {
          height: 250vh;
        }
        .tt-sticky {
          top: 0;
          height: 100svh;
          min-height: 440px;
        }
        .tt-grid {
          grid-template-columns: 1fr;
          gap: 0;
        }
        .tt-steps {
          flex-direction: row;
          gap: 7px;
          margin-bottom: 16px;
        }
        .tt-steps li {
          height: auto;
          padding: 0 0 0 10px;
          flex: 1;
        }
        .tt-steps li::before,
        .tt-steps li i {
          height: auto;
          top: 0;
          bottom: 0;
          width: 2px;
        }
        .tt-steps li i {
          height: 0;
        }
        .tt-steps li.on i {
          height: 100%;
        }
        .tt-steps li b {
          font-size: 10px;
        }
        .tt-steps li span {
          font-size: 9px;
          letter-spacing: 0.07em;
        }
        .tt-stack {
          min-height: 280px;
        }
        .tt-ch {
          grid-template-columns: 1fr;
        }
        .tt-review {
          display: none;
        }
        .tt-eyebrow {
          font-size: 9.5px;
          letter-spacing: 0.12em;
        }
        .tt-eyebrow::before {
          width: 18px;
        }
        .tt-word {
          font-size: clamp(38px, 12.5vw, 58px);
          margin-top: 9px;
        }
        .tt-say {
          font-size: 18px;
          margin-top: 13px;
          max-width: none;
        }
        .tt-pts {
          margin-top: 13px;
          gap: 7px;
        }
        .tt-pts li {
          font-size: 13px;
          padding-left: 21px;
        }
        .tt-proof {
          margin-top: 14px;
          gap: 6px;
        }
        .tt-proof span {
          font-size: 11.5px;
          padding: 7px 12px 7px 10px;
        }
        .tt-hint {
          display: none;
        }
      }
      @media (max-width: 480px) {
        .bar {
          height: 46px;
          padding: 0 12px;
          gap: 8px;
        }
        .bar .logo img {
          height: 25px !important;
        }
        .bar .btn-primary {
          padding: 7px 12px;
          font-size: 12.5px;
          min-height: 36px;
        }
        .burger {
          width: 36px;
          height: 36px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          animation: none !important;
          transition: none !important;
        }
        .tt {
          height: auto;
        }
        .tt-sticky {
          position: static;
          height: auto;
          min-height: 0;
          display: block;
          padding: 56px 0;
        }
        .tt-bg,
        .tt-scrim,
        .tt-hint,
        .tt-steps {
          display: none;
        }
        .tt-grid {
          grid-template-columns: 1fr;
        }
        .tt-stack {
          min-height: 0;
        }
        .tt-ch {
          position: relative;
          opacity: 1;
          transform: none;
          pointer-events: auto;
          padding: 34px 0;
          border-top: 1px solid rgba(255, 255, 255, 0.12);
        }
        .tt-photo {
          display: block;
          border-radius: 18px;
          margin-top: 22px;
          max-width: 380px;
          aspect-ratio: 4/5;
          object-fit: cover;
        }
        html {
          scroll-behavior: auto;
        }
        .rv {
          opacity: 1;
          transform: none;
        }
        .tile {
          transform: none;
          opacity: 1;
        }
        .tile .cap {
          opacity: 1;
          transform: none;
        }
        .frame {
          transition: none;
        }
      }

      /* ---------- COMPACT DENSITY ----------
   Tightens type and vertical rhythm so a section fits a standard laptop
   viewport (roughly 1440x780 usable) without scrolling. Desktop only —
   mobile keeps the original, roomier scale.                              */
      @media (min-width: 768px) {
        body {
          font-size: 15px;
        }
        section {
          padding: 56px 0;
        }
        section[id],
        details.faq {
          scroll-margin-top: 72px;
        }
        h2 {
          font-size: clamp(25px, 2.6vw, 34px);
        }
        h3 {
          font-size: 17px;
        }
        .sec-lede {
          font-size: 15px;
          margin-top: 12px;
        }
        .sec-label {
          margin-bottom: 10px;
          font-size: 10.5px;
        }

        .bar {
          height: 58px;
        }
        header.site .logo {
          font-size: 17.5px;
        }
        nav.main a {
          font-size: 13.5px;
        }
        .btn {
          padding: 10px 18px;
          font-size: 13.5px;
          min-height: 40px;
        }
        .btn-lg {
          padding: 12px 22px;
          font-size: 15px;
          min-height: 46px;
        }

        .hero {
          padding: 24px 0 24px;
        }
        .hero-grid {
          gap: 36px;
          align-items: center;
        }
        .hero-copy {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        h1 {
          font-size: clamp(32px, 3.5vw, 44px);
        }
        .lede {
          font-size: 15.5px;
          margin-top: 14px;
          max-width: 62ch;
        }
        .hero-3t {
          margin-top: 18px;
          gap: 9px;
        }
        .t-chip {
          padding: 6px 12px;
          font-size: 12.5px;
        }
        .t-chip b {
          font-size: 13.5px;
        }
        .proof {
          margin-top: 18px;
          gap: 24px;
        }
        .proof-dots span {
          width: 24px;
          height: 24px;
        }
        .proof-num {
          font-size: 17px;
        }
        .proof-lbl {
          font-size: 11.5px;
        }
        .hero-strip {
          margin-top: 20px;
          gap: 9px;
        }
        .hero-strip img {
          border-radius: 11px;
        }

        .tab {
          padding: 9px 10px;
          min-height: 38px;
          font-size: 13px;
        }
        .panel {
          padding: 13px 15px;
        }
        .w-title {
          font-size: 15px;
        }
        fieldset {
          margin-top: 7px;
        }
        legend {
          margin-bottom: 4px;
        }
        .vtype label {
          min-height: 42px;
          padding: 5px 4px;
          font-size: 11px;
          gap: 2px;
        }
        .vtype label .ic {
          font-size: 15px;
        }
        .field {
          margin-top: 7px;
        }
        .field label {
          margin-bottom: 2px;
          font-size: 11.5px;
        }
        input[type="text"],
        input[type="tel"],
        input[type="search"] {
          min-height: 36px;
          padding: 7px 10px;
          font-size: 13.5px;
        }
        .plate input {
          font-size: 14px;
        }
        #reg-help {
          display: block;
          margin-top: 4px;
        }
        #estimate-form .btn-lg {
          margin-top: 9px !important;
          min-height: 38px;
          padding: 9px 18px;
          font-size: 13.5px;
        }
        .reassure {
          margin-top: 6px;
          font-size: 10.5px;
          gap: 2px 10px;
        }
        .privacy-note {
          margin-top: 5px;
          font-size: 10px;
          line-height: 1.35;
        }

        .pulse-inner {
          padding: 28px 0 30px;
        }
        .pulse-head {
          margin-bottom: 18px;
        }
        .pulse-cell {
          padding: 18px 18px 16px;
        }
        .pulse-cell .n {
          font-size: clamp(26px, 2.6vw, 34px);
        }
        .pulse-cell .k {
          font-size: 12px;
          margin-top: 7px;
        }
        .pulse-cell .sub {
          font-size: 11px;
        }
      }
      @media (min-width: 1024px) {
        .hero-grid {
          grid-template-columns: 1fr 430px;
        }
      }
      /* very short laptops (13" at 1280x720-ish) — one more notch */
      @media (min-width: 768px) and (max-height: 760px) {
        .hero {
          padding: 16px 0 6px;
        }
        h1 {
          font-size: clamp(28px, 3vw, 36px);
        }
        .lede {
          font-size: 14.5px;
          margin-top: 14px;
        }
        .hero-3t {
          margin-top: 20px;
        }
        .proof {
          margin-top: 20px;
        }
        .hero-strip {
          margin-top: 22px;
        }
        .hero-strip img {
          aspect-ratio: 1/1;
        }
        .hero-strip {
          display: grid;
        }
        .panel {
          padding: 13px;
        }
        .field {
          margin-top: 7px;
        }
        .vtype label {
          min-height: 42px;
        }
        .hero {
          padding: 10px 0 6px;
        }
        #estimate-form .btn-lg {
          margin-top: 12px !important;
          min-height: 44px;
        }
        #estimate-form .reassure {
          display: none;
        }
        .privacy-note {
          margin-top: 7px;
          font-size: 10px;
          line-height: 1.45;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        section {
          padding: 44px 0;
        }
      }


    /* ---------- Scroll To Top Button ---------- */
    .scroll-to-top {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--deep, #02260b);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 99;
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px) scale(0.9);
      transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }
    .scroll-to-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }
    .scroll-to-top:hover {
      background: var(--brand, #3aa253);
      color: #ffffff;
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 8px 24px rgba(58, 162, 83, 0.4);
    }
    .scroll-to-top:active {
      transform: translateY(0) scale(0.95);
    }
    @media (max-width: 768px) {
      .scroll-to-top {
        bottom: 80px;
        right: 16px;
        width: 40px;
        height: 40px;
      }
    }

    /* ==========================================================================
       V2 ABOUT PAGE STYLES
       ========================================================================== */
    .about-hero {
      padding: 100px 0 110px;
      text-align: center;
      background:
        linear-gradient(180deg, rgba(2, 38, 11, 0.76) 0%, rgba(2, 38, 11, 0.6) 45%, rgba(2, 38, 11, 0.85) 100%),
        url('/assets/v2/media/about/hero-main.jpg') center/cover no-repeat;
    }
    .about-hero .pill {
      display: inline-block;
      padding: 10px 60px;
      border-radius: 999px;
      background: linear-gradient(90deg, #02260b, #00aa27);
      color: #fff;
      font-weight: 500;
      font-size: 1rem;
      letter-spacing: 0.2px;
    }
    .about-hero .pill b {
      font-weight: 700;
    }
    .about-hero h1 {
      /* Same font-size as the homepage h1 (base clamp + breakpoint
   overrides below) so the two banner titles stay on-brand together. */
      font-size: clamp(36px, 5.1vw, 60px);
      line-height: 1.1;
      margin: 28px 0 0;
      color: #fff;
      font-weight: 700;
      letter-spacing: -0.5px;
    }
    .about-hero .accent-line {
      font-size: clamp(36px, 5.1vw, 60px);
      line-height: 1.1;
      font-weight: 700;
      color: #00aa27;
      margin: 2px 0 0;
    }
    @media (max-width: 768px) {
      .about-hero h1,
      .about-hero .accent-line {
        font-size: clamp(26px, 7.5vw, 34px);
      }
    }
    @media (min-width: 768px) {
      .about-hero h1,
      .about-hero .accent-line {
        font-size: clamp(32px, 3.5vw, 44px);
      }
    }
    @media (min-width: 768px) and (max-height: 760px) {
      .about-hero h1,
      .about-hero .accent-line {
        font-size: clamp(28px, 3vw, 36px);
      }
    }

    .band-dark {
      background: linear-gradient(160deg, #02260b 0%, #186230 100%);
      color: #fff;
      padding: 56px 0;
    }
    .band-dark h2, .band-dark .section-title {
      color: #fff;
    }
    .intro-flex {
      display: flex;
      gap: 56px;
      align-items: flex-start;
      margin-top: 44px;
      flex-wrap: wrap;
    }
    .intro-text {
      flex: 1 1 480px;
    }
    .intro-text p {
      color: rgba(255, 255, 255, 0.88);
      margin: 0 0 18px;
    }
    .intro-text p:last-child {
      margin-bottom: 0;
    }
    .intro-text b {
      color: #fff;
    }
    .intro-media {
      flex: 1 1 380px;
    }
    .intro-media img {
      width: 100%;
      border-radius: 16px;
      box-shadow: 0 20px 40px rgba(2, 38, 11, 0.25);
    }

    .section-title {
      font-size: clamp(1.85rem, 4.6vw, 2.3125rem);
      font-weight: 700;
      margin: 0;
      color: #010101;
    }
    .t-center {
      text-align: center;
    }
    .section-title strong, .section-title b {
      color: #3aa253;
      font-weight: 700;
    }
    .band-dark .section-title strong, .band-dark .section-title b {
      color: #00aa27;
    }
    .section-sub {
      color: rgba(2, 38, 11, 0.65);
      margin: 10px 0 0;
      font-size: 1.08rem;
      max-width: 800px;
    }
    .band-dark .section-sub {
      color: rgba(255, 255, 255, 0.75);
    }
    .section-head {
      margin-bottom: 40px;
    }

    .mv-panel {
      margin-top: 44px;
      background: var(--gradient-light);
      border-radius: 24px;
      padding: 48px;
      display: grid;
      grid-template-columns: 1fr 1px 1fr;
      gap: 48px;
    }
    .mv-divider {
      background: linear-gradient(180deg, transparent, #3aa253, transparent);
    }
    .mv-col {
      display: flex;
      flex-direction: column;
    }
    .mv-head {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 18px;
    }
    .mv-head svg {
      width: 36px;
      height: 36px;
      color: #3aa253;
    }
    .mv-head h3 {
      margin: 0;
      font-size: 1.5625rem;
      color: #3aa253;
      font-weight: 700;
    }
    .mv-desc {
      text-align: center;
      color: #02260b;
      margin: 0 0 26px;
    }
    .mv-desc b {
      color: #010101;
    }
    .checklist {
      background: rgba(255, 255, 255, 0.6);
      border-radius: 16px;
      padding: 22px 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .checklist li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .check-ic {
      flex: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #3aa253;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
    }
    .check-ic svg {
      width: 13px;
      height: 13px;
    }
    .checklist span {
      color: #02260b;
    }
    .checklist b {
      color: #010101;
    }

    .values-grid {
      margin-top: 44px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 26px;
    }
    .value-card {
      flex: 0 1 calc((100% - 52px) / 3);
      min-width: 260px;
      background: #fff;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 10px 30px rgba(2, 38, 11, 0.08);
      border: 2px solid #00aa27;
      display: flex;
      flex-direction: column;
      transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    }
    .value-card .value-img {
      height: 180px;
      width: 100%;
      object-fit: cover;
      border-radius: 16px;
      margin-bottom: 18px;
      flex: none;
    }
    .value-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .value-card h4 {
      margin: 0 0 8px;
      color: #3aa253;
      font-size: 1.5625rem;
      text-align: center;
      font-weight: 700;
      transition: color 0.35s ease;
    }
    .value-card p {
      margin: 0;
      color: #02260b;
      text-align: center;
      font-size: var(--text-small);
      transition: color 0.35s ease;
    }
    .value-card p b {
      color: #010101;
      transition: color 0.35s ease;
    }
    .value-card:hover {
      background: linear-gradient(160deg, #00aa27, #3aa253);
      border-color: #3aa253;
      box-shadow: 0 0 0 6px rgba(0, 170, 39, 0.12);
    }
    .value-card:hover h4 {
      color: #fff;
    }
    .value-card:hover p {
      color: rgba(255, 255, 255, 0.88);
    }
    .value-card:hover p b {
      color: #fff;
    }

    .band-light {
      background: var(--gradient-light);
      padding: 56px 0;
    }
    .cert-layout {
      display: flex;
      gap: 40px;
      align-items: flex-start;
      margin-top: 44px;
      flex-wrap: wrap;
    }
    .cert-intro {
      flex: 1 1 320px;
    }
    .cert-intro h2 {
      color: #3aa253;
    }
    .cert-slider {
      flex: 2 1 480px;
      max-width: 640px;
      overflow: hidden;
      position: relative;
      -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
      mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
    }
    .cert-track {
      display: flex;
      gap: 24px;
      transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .cert-card {
      flex: 0 0 82%;
      background: linear-gradient(160deg, #e5fde5, #d8f0df);
      border: 2px solid #3aa253;
      border-radius: 24px;
      padding: 30px;
    }
    .cert-dots {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-top: 22px;
    }
    .cert-dots button {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      border: none;
      padding: 0;
      background: rgba(2, 38, 11, 0.25);
      cursor: pointer;
    }
    .cert-dots button.active {
      background: #3aa253;
      width: 22px;
      border-radius: 5px;
    }
    .cert-card h3 {
      margin: 0 0 14px;
      text-align: center;
      color: #3aa253;
      font-size: 1.5625rem;
    }
    .cert-card > p {
      text-align: center;
      color: #02260b;
      margin: 0 0 22px;
      font-size: var(--text-small);
    }
    .cert-highlight {
      background: #fff;
      border-radius: 16px;
      padding: 20px 22px;
      display: flex;
      gap: 12px;
    }
    .cert-highlight span {
      color: #02260b;
      font-size: 0.95rem;
    }
    .cert-highlight b {
      color: #010101;
    }
    .cert-footer-text {
      text-align: center;
      max-width: 920px;
      margin: 48px auto 0;
      color: #02260b;
      font-size: 1.05rem;
    }
    .cert-footer-text b {
      color: #010101;
    }
    .note-bar {
      margin: 28px auto 0;
      max-width: 960px;
      background: #e5fde5;
      border: 1px solid #3aa253;
      border-radius: 999px;
      padding: 16px 28px;
      text-align: center;
      color: #02260b;
    }
    .note-bar b {
      color: #010101;
    }

    .band-black {
      background: #010101;
      color: #fff;
      padding: 56px 0;
    }
    .band-black .section-title {
      color: #fff;
    }
    .band-black .section-sub {
      color: rgba(255, 255, 255, 0.6);
    }
    .facility-grid {
      margin-top: 44px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
    }
    .facility-card {
      background: #fff;
      border-radius: 24px;
      border: 2px solid #00aa27;
      padding: 36px 30px 30px;
      position: relative;
      margin-top: 60px;
      box-shadow: 0 30px 60px rgba(0, 170, 39, 0.08);
    }
    .facility-card .facility-img {
      display: block;
      height: 220px;
      width: 88%;
      margin: -96px auto 22px;
      object-fit: cover;
      border-radius: 16px;
      box-shadow: 0 16px 32px rgba(2, 38, 11, 0.2);
    }
    .facility-card h4 {
      margin: 0 0 14px;
      text-align: center;
      color: #3aa253;
      font-size: 1.5625rem;
    }
    .facility-card > p {
      text-align: center;
      color: #02260b;
      margin: 0 0 22px;
    }
    .facility-card .checklist {
      background: transparent;
      padding: 0;
      gap: 12px;
    }
    .facility-card .check-ic {
      background: #3aa253;
    }

    .gallery-section {
      background: var(--gradient-light);
      padding: 56px 0;
    }
    .gallery-section .section-title {
      color: #3aa253;
    }
    .gallery-viewport {
      margin-top: 44px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    }
    .gallery-track {
      display: flex;
      gap: 20px;
      width: max-content;
      animation: gallery-scroll 26s linear infinite;
    }
    .gallery-viewport:hover .gallery-track {
      animation-play-state: paused;
    }
    .gallery-track .gallery-img {
      flex: 0 0 23vw;
      height: 260px;
      border-radius: 16px;
      object-fit: cover;
    }
    @keyframes gallery-scroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .cta-about {
      background: linear-gradient(160deg, #02260b 0%, #186230 100%);
      color: #fff;
      padding: 56px 0 60px;
    }
    .cta-about .cta-head {
      text-align: center;
    }
    .cta-about .cta-head h2 {
      font-size: clamp(1.85rem, 4.6vw, 2.3125rem);
      margin: 0;
      color: #fff;
      font-weight: 700;
    }
    .cta-about .cta-head p {
      color: rgba(255, 255, 255, 0.88);
      margin: 14px 0 0;
      font-size: 1.1rem;
    }
    .cta-about .cta-buttons {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin: 36px 0 0;
      flex-wrap: wrap;
    }
    .cta-about .cta-buttons a {
      padding: 12px 35px;
      font-weight: 500;
      font-size: 1.15rem;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .cta-about .cta-buttons .btn-white {
      background: #fff;
      color: #010101;
    }
    .cta-about .cta-buttons .btn-dark {
      background: #02260b;
      color: #fff;
      border: 2px solid #3aa253;
    }
    .why-card {
      margin: 44px 0 0;
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 30px 60px rgba(2, 38, 11, 0.18);
      padding: 44px;
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
    }
    .why-left {
      flex: 1 1 280px;
      color: #010101;
    }
    .why-left h3 {
      margin: 0 0 18px;
      font-size: 1.5625rem;
      font-weight: 400;
    }
    .why-left h3 b {
      font-weight: 700;
    }
    .mail-pill {
      display: inline-block;
      background: #02260b;
      color: #fff;
      padding: 10px 20px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 22px;
      border: 2px solid limegreen;
    }
    .why-left > p {
      margin: 0;
      color: #02260b;
    }
    .why-left p.warning {
      color: #010101;
      font-weight: 700;
      margin: 0 0 8px;
      font-size: 1.05rem;
    }
    .locations-panel {
      flex: 1.4 1 420px;
      background: #e5fde5;
      border-radius: 24px;
      padding: 32px 36px;
    }
    .locations-panel h4 {
      margin: 0 0 20px;
      text-align: center;
      color: #3aa253;
      font-size: 1.5625rem;
    }
    .locations-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px 14px;
      color: #02260b;
      font-size: 0.86rem;
    }
    .locations-grid a {
      color: #02260b;
      border-right: 1px solid rgba(2, 38, 11, 0.3);
      padding-right: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .locations-grid a:hover {
      color: #3aa253;
      text-decoration: underline;
    }
    .locations-grid a:nth-child(2n), .locations-grid a:last-child {
      border-right: none;
      padding-right: 0;
    }

    @media (max-width: 1024px) {
      .mv-panel { grid-template-columns: 1fr; }
      .mv-divider { display: none; }
      .value-card { flex: 0 1 calc((100% - 26px) / 2); }
      .facility-grid { grid-template-columns: 1fr; }
      .gallery-track .gallery-img { flex: 0 0 40vw; }
    }
    @media (max-width: 768px) {
      .band-dark, .band-light, .band-black, .gallery-section, .mv-section { padding: 48px 0; }
      .cta-about { padding: 48px 0 60px; }
      .mv-panel { padding: 24px; gap: 24px; }
      .checklist { gap: 12px; padding: 16px 18px; }
      .value-card { flex: 0 1 100%; }
      .value-card .value-text { order: 1; }
      .value-card .value-img { order: 2; }
      .cert-slider { max-width: 100%; }
      .cert-card { flex: 0 0 92%; }
      .why-card { margin-top: 36px; padding: 24px; }
      .locations-grid { grid-template-columns: 1fr; }
      .locations-grid a { border-right: none; padding-right: 0; white-space: normal; }
      .gallery-track .gallery-img { flex: 0 0 62vw; height: 200px; }
      .mv-head h3, .value-card h4, .cert-card h3, .facility-card h4 {
        font-size: 20px;
      }
    }