/* =====================================================================
   USA SYSTEMS ENTERPRISES — Premium Design System (Light theme)
   White background · green accent · dark-teal contrast bands
   Fonts: Anta (display) + Inter (body)
   ===================================================================== */

/* ----------------------------- Tokens ------------------------------ */
:root {
    /* Surfaces / background */
    --bg: #ffffff;
    --bg-soft: #f3f8f5;
    --bg-mint: #ecf5f0;
    --card: #ffffff;
    --card-soft: #f6faf8;
  
    /* Ink / text */
    --ink: #0f2a27;        /* headings */
    --body: #415854;       /* paragraphs */
    --muted: #6c817d;      /* faint labels */
    --mist: #415854;       /* legacy alias → body text */
    --faint: #6c817d;      /* legacy alias → muted */
  
    /* Lines */
    --line: rgba(15, 42, 39, 0.12);
    --line-soft: rgba(15, 42, 39, 0.07);
    --hairline: rgba(15, 42, 39, 0.12);
    --hairline-soft: rgba(15, 42, 39, 0.07);
  
    /* Green accent */
    --green: #0e9e6e;
    --green-deep: #0a7d55;
    --green-700: #0c8a60;
    /* Darker green reserved for accent TEXT on light backgrounds (eyebrows,
       highlighted words, numbers, links) — closer to the live site's deep green. */
    --green-text: #0a6b47;
    /* Deep green for solid CTA buttons + the active-nav dot (matches the swatch). */
    --green-btn: #0e9e6e;
    --green-btn-deep: #0a7d55;
    --green-soft: rgba(14, 158, 110, 0.1);
    --green-soft-2: rgba(14, 158, 110, 0.16);
    --green-glow: rgba(14, 158, 110, 0.28);
    --accent: #0a6b47;
    --accent-deep: #0a7d55;
    --accent-glow: rgba(14, 158, 110, 0.22);
  
    /* Dark contrast band (footer / CTA) */
    --teal-950: #0a1f1d;
    --teal-900: #0e2624;
    --teal-800: #132f2d;
    --teal-700: #18403c;
    --teal-600: #1f4a47;
  
    --white: #ffffff;

    /* Form validation */
    --danger: #c0392b;
    --danger-soft: rgba(192, 57, 43, 0.08);
    --danger-line: rgba(192, 57, 43, 0.28);
  
    /* Surfaces on light */
    --surface: #f6faf8;
    --surface-2: #eef5f1;
    --surface-hi: #e7f1ec;
  
    /* Type */
    --font-display: "Anta", "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, sans-serif;
  
    --fs-hero: clamp(2.9rem, 1.4rem + 6.4vw, 7.4rem);
    --fs-h1: clamp(2.3rem, 1.4rem + 3.8vw, 4.6rem);
    --fs-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
    --fs-h3: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem);
    --fs-lead: clamp(1.05rem, 0.95rem + 0.55vw, 1.28rem);
    --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.07rem);
  
    --maxw: 1320px;
    --gutter: clamp(1.25rem, 0.6rem + 3vw, 4rem);
    --radius: 22px;
    --radius-lg: 30px;
    --radius-sm: 13px;
  
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 10px 30px -18px rgba(15, 42, 39, 0.35);
    --shadow-md: 0 24px 60px -30px rgba(15, 42, 39, 0.4);
    --shadow-green: 0 22px 50px -24px rgba(14, 158, 110, 0.45);
  }
  
  /* ----------------------------- Reset ------------------------------- */
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-color: var(--green) transparent;
  }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-stopped { overflow: hidden; }
  .dn{
    display: none!important;
  }
  body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--body);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    position: relative;
  }
  
  /* Soft ambient light-green mesh behind everything */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
      radial-gradient(60% 50% at 82% -8%, rgba(14, 158, 110, 0.1), transparent 60%),
      radial-gradient(50% 45% at 4% 6%, rgba(14, 158, 110, 0.06), transparent 60%),
      radial-gradient(55% 55% at 50% 115%, rgba(14, 158, 110, 0.05), transparent 65%),
      linear-gradient(180deg, #ffffff, #f5faf7 55%, #ffffff);
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.4;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
  }
  
  img, svg, video { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
  ul { list-style: none; }
  ::selection { background: var(--green); color: #fff; }
  
  /* ------------------------- Typography ------------------------------ */
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .display {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    line-height: 0.97;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--green-text);
  }
  .eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--green);
  }
  .eyebrow--center::after {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--green);
  }
  .lead { font-size: var(--fs-lead); color: var(--body); line-height: 1.6; }
  .muted { color: var(--muted); }
  .accent-text { color: var(--green-text); }
  
  /* --------------------------- Layout -------------------------------- */
  .container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  /* Unified vertical rhythm — every section uses the same padding-block, so the
     gap between any two adjacent sections is identical across the whole site. */
  /* 120px between sections everywhere: 60px top + 60px bottom on adjacent blocks. */
  .section { position: relative; padding-block: 60px; }
  .section--tight { padding-block: 60px; }
  .section--soft { background: var(--bg-soft); }
  /* Uniform, symmetric vertical rhythm on mobile across every page (matching the
     home page): every section gets the same 36px top/bottom padding, the pinned
     scrolly section gets matching boundary padding, and all heroes share the same
     bottom spacing so the gap below the hero is identical everywhere. */
  /* Desktop: the "Find our offices" CTA sits in the left column under the
     messengers, so hide the standalone CTA section (it's used only on mobile). */
  @media (min-width: 761px) { .offices-cta { display: none; } }
  @media (max-width: 760px) {
    .section, .section--tight { padding-block: 36px; }
    .scrolly { padding-block: 36px; }
    .page-hero { padding-bottom: 64px !important; }
    /* The standalone "Find our offices" CTA is hidden on mobile too. */
    .offices-cta { display: none !important; }
    /* On mobile the CTA lives in its own section (above the map); hide the
       left-column copy. */
    .offices-cta--inline { display: none !important; }
    /* The hero intro choreography sets a 1.4s reveal delay on the stats block.
       On mobile the stats sit below the fold, so that delay makes the numbers
       fade in noticeably late when scrolled to. Drop it so they appear at once. */
    .hero__meta { --rd: 0s !important; }
    /* Compact header on phones — the 116px desktop bar is far too tall and
       leaves the menu button floating in a big empty header. */
    .nav { height: 72px !important; }
    /* Static mobile header: one consistent SOLID dark bar on every page (home
       included), instead of switching between transparent-over-hero and white.
       A solid colour (no backdrop-filter) avoids the iOS Safari bug where a fixed
       header with backdrop-filter visibly drifts sideways while scrolling. The
       light logo and white menu icon are always shown, so the burger never sinks
       into a bright hero video — same behaviour as the division pages. */
    .site-header, body.nav-over-hero .site-header:not(.is-scrolled), .site-header.is-scrolled {
      background: #0d2420 !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    }
    .brand__logo { display: none !important; }
    .brand__logo--light { display: block !important; height: 56px !important; }
    .nav__toggle span { background: #fff !important; }
  }
  .section-head { max-width: 760px; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
  /* Tighter heading-to-content gap on mobile across every section. */
  @media (max-width: 760px) { .section-head { margin-bottom: 1.4rem; } }
  .section-head--center { margin-inline: auto; text-align: center; }
  .section-head h2 { font-size: var(--fs-h2); margin-top: 1rem; }
  .section-head p { margin-top: 1.1rem; font-size: var(--fs-lead); }
  
  .grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
  @media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
  
  /* --------------------------- Buttons ------------------------------- */
  /* No magnetic / floating motion — press feedback only. */
  .btn {
    --bg: var(--green-btn);
    --fg: #ffffff;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    padding: 1.02em 1.7em;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: var(--fg);
    background: var(--bg);
    border-radius: 100px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.3s var(--ease), transform 0.12s ease;
  }
  .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--green-btn-deep);
    transform: translateY(101%);
    transition: transform 0.45s var(--ease);
  }
  .btn:hover { box-shadow: var(--shadow-green); }
  .btn:hover::after { transform: translateY(0); }
  .btn:active { transform: scale(0.96); box-shadow: 0 6px 16px -10px rgba(14,158,110,0.5); }
  .btn .btn__arrow { transition: transform 0.4s var(--ease); }
  .btn:hover .btn__arrow { transform: translate(3px, -3px); }
  
  .btn--ghost {
    --bg: transparent;
    --fg: var(--ink);
    border-color: var(--line);
  }
  .btn--ghost::after { background: var(--ink); }
  .btn--ghost:hover { color: #fff; box-shadow: var(--shadow-sm); }
  .btn--sm { padding: 0.72em 1.25em; font-size: 0.85rem; }
  .btn--lg { padding: 1.15em 2.1em; font-size: 1rem; }
  
  /* On dark bands, primary button becomes white */
  .on-dark .btn, .cta-band__inner .btn {
    --bg: #ffffff; --fg: var(--teal-900);
  }
  .on-dark .btn::after, .cta-band__inner .btn::after { background: var(--green); }
  .on-dark .btn:hover, .cta-band__inner .btn:hover { color: #fff; }
  .on-dark .btn--ghost, .cta-band__inner .btn--ghost {
    --bg: transparent; --fg: #ffffff; border-color: rgba(255,255,255,0.25);
  }
  .on-dark .btn--ghost::after, .cta-band__inner .btn--ghost::after { background: #ffffff; }
  .on-dark .btn--ghost:hover, .cta-band__inner .btn--ghost:hover { color: var(--teal-900); }
  
  .link-underline {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 600;
    color: var(--ink);
    padding-bottom: 2px;
  }
  .link-underline::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s var(--ease);
  }
  .link-underline:hover::after { transform: scaleX(1); transform-origin: left; }
  .link-underline svg { transition: transform 0.4s var(--ease); }
  .link-underline:hover svg { transform: translateX(4px); }
  
  /* ----------------------------- Header ------------------------------ */
  .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition: transform 0.5s var(--ease), background 0.4s var(--ease), box-shadow 0.4s, backdrop-filter 0.4s;
  }
  .site-header.is-hidden { transform: translateY(-105%); }
  .site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 1px 0 var(--line-soft), 0 12px 30px -24px rgba(15,42,39,0.5);
  }
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: 72px;
  }
  .brand { display: inline-flex; align-items: center; gap: 0.7rem; z-index: 2; }
  .brand__logo { height: 78px; width: auto; }
  .brand__logo--light { display: none; }
  @media (max-width: 560px) { .brand__logo { height: 60px; } }
  
  .nav__menu { display: flex; align-items: center; gap: 0.2rem; }
  .nav__item { position: relative; }
  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.6rem 1rem;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--body);
    border-radius: 100px;
    transition: color 0.3s var(--ease);
  }
  .nav__link::before {
    content: "";
    position: absolute;
    left: 50%; bottom: 0.3rem;
    width: 5px; height: 5px;
    background: var(--green-btn);
    border-radius: 50%;
    transform: translateX(-50%) scale(0);
    transition: transform 0.35s var(--ease);
  }
  .nav__link:hover { color: var(--ink); }
  .nav__link.is-active { color: var(--ink); }
  .nav__link.is-active::before { transform: translateX(-50%) scale(1); }
  .nav__link .chev { transition: transform 0.35s var(--ease); }
  .nav__item:hover .nav__link .chev { transform: rotate(180deg); }
  
  /* Dropdown */
  .nav__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    padding: 0.6rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0.3s;
  }
  /* Invisible bridge across the gap so moving the cursor from the trigger
     onto the panel never drops the hover. */
  .nav__dropdown::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -14px;
    height: 16px;
  }
  .nav__item:hover .nav__dropdown,
  .nav__item:focus-within .nav__dropdown,
  .nav__item.dd-open .nav__dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav__dropdown::-webkit-scrollbar { width: 8px; }
  .nav__dropdown::-webkit-scrollbar-thumb { background: var(--green-soft-2); border-radius: 8px; }
  .dd-item {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    transition: background 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .dd-item:hover { background: var(--bg-mint); transform: translateX(3px); }
  .dd-item.is-active { background: var(--bg-mint); }
  .dd-item__ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--green-soft); color: var(--green-text); }
  .dd-item__ic svg { width: 19px; height: 19px; }
  .dd-item__t { display: block; font-family: var(--font-display); font-size: 0.95rem; color: var(--ink); line-height: 1.15; }
  .dd-item__d { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 3px; line-height: 1.3; }
  .dd-item__t .tag-new { margin-left: 0.4rem; font-size: 0.55rem; padding: 0.2em 0.5em; vertical-align: middle; }
  .dd-divider { height: 1px; background: var(--line-soft); margin: 0.4rem 0.4rem; }
  .dd-all { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.85rem; color: var(--green-text); font-weight: 600; font-size: 0.9rem; border-radius: 12px; }
  .dd-all:hover { background: var(--green-soft); }
  .dd-all.is-active { background: var(--green-soft); }
  
  .nav__actions { display: flex; align-items: center; gap: 0.8rem; }
  .nav__toggle { display: none; width: 46px; height: 46px; position: relative; z-index: 120; transform: translateZ(0); -webkit-transform: translateZ(0);
    /* Reset the native <button> chrome — iOS Safari otherwise draws a light,
       rounded button background behind the bars (the "white box"). */
    -webkit-appearance: none; appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer; }
  .nav__toggle span {
    position: absolute; left: 12px; right: 12px; height: 2px;
    background: var(--ink); border-radius: 2px;
    transition: transform 0.4s var(--ease), opacity 0.3s, background 0.3s;
  }
  .nav__toggle span:nth-child(1) { top: 18px; }
  .nav__toggle span:nth-child(2) { top: 24px; }
  .nav__toggle span:nth-child(3) { top: 30px; }
  body.menu-open .nav__toggle span { background: #fff; }
  body.menu-open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
  body.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  
  /* Mobile drawer (dark, for contrast) */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 130;
    background: linear-gradient(160deg, var(--teal-900), var(--teal-950));
    padding: 1.4rem var(--gutter) 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.7s var(--ease);
    pointer-events: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  body.menu-open .mobile-menu { clip-path: inset(0 0 0 0); pointer-events: auto; }
  .mobile-menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
  .mobile-menu__top .brand__logo--light { display: block !important; height: 56px !important; width: auto; }
  .mobile-menu__close {
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    border-radius: 999px; color: #fff; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14); transition: background 0.3s var(--ease);
  }
  .mobile-menu__close:hover { background: rgba(255,255,255,0.16); }
  .mobile-menu__list { display: flex; flex-direction: column; gap: 0.2rem; }
  .mobile-menu__link--parent {
    width: 100%; background: none; border: none; text-align: left; cursor: pointer;
    font-family: var(--font-display);
  }
  .mobile-menu__link--parent .chev,
  .mobile-menu__link--parent svg { transition: transform 0.35s var(--ease); }
  .mobile-menu__link--parent[aria-expanded="true"] svg { transform: rotate(90deg); }
  .mobile-menu__link {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 8vw, 2.6rem);
    color: #fff;
    padding: 0.35rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    opacity: 0;
    transform: translateY(18px);
  }
  .mobile-menu__link svg { color: #5be3b0; }
  .mobile-menu__link.is-active { color: #5be3b0; }
  body.menu-open .mobile-menu__link { animation: menuIn 0.6s var(--ease) forwards; }
  body.menu-open .mobile-menu__link:nth-child(1) { animation-delay: 0.12s; }
  body.menu-open .mobile-menu__link:nth-child(2) { animation-delay: 0.18s; }
  body.menu-open .mobile-menu__link:nth-child(3) { animation-delay: 0.24s; }
  body.menu-open .mobile-menu__link:nth-child(4) { animation-delay: 0.30s; }
  body.menu-open .mobile-menu__link:nth-child(5) { animation-delay: 0.36s; }
  body.menu-open .mobile-menu__link:nth-child(6) { animation-delay: 0.42s; }
  @keyframes menuIn { to { opacity: 1; transform: translateY(0); } }
  .mobile-sub {
    display: flex; flex-direction: column; gap: 0.1rem; padding-left: 0.2rem;
    max-height: 0; overflow: hidden; margin: 0;
    transition: max-height 0.45s var(--ease), margin 0.45s var(--ease);
  }
  .mobile-sub.is-open { max-height: 60vh; margin: 0.2rem 0 0.6rem; }
  .mobile-sub a { display: flex; align-items: center; gap: 0.6rem; color: rgba(255,255,255,0.65); font-size: 1rem; padding: 0.5rem 0; }
  .mobile-sub a:hover { color: #fff; }
  .mobile-sub a.is-active { color: #fff; }
  .mobile-sub a .tag-new { font-size: 0.55rem; }
  .mobile-menu__foot { margin-top: auto; color: rgba(255,255,255,0.55); font-size: 0.9rem; }
  .mobile-menu__foot a { color: #fff; }
  
  @media (max-width: 1040px) {
    .nav__menu, .nav__actions .btn { display: none; }
    .nav__toggle { display: block; }
  }
  
  /* ----------------------------- Hero -------------------------------- */
  .hero { position: relative; padding-top: clamp(8rem, 14vh, 11rem); padding-bottom: clamp(4rem, 8vw, 7rem); overflow: clip; }
  .hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.6;
    pointer-events: none;
  }
  .hero__orb--1 { width: 540px; height: 540px; top: -12%; right: -6%; background: radial-gradient(circle, rgba(14,158,110,0.22), transparent 68%); }
  .hero__orb--2 { width: 440px; height: 440px; bottom: -16%; left: -10%; background: radial-gradient(circle, rgba(14,158,110,0.12), transparent 70%); }
  
  .hero__inner { position: relative; z-index: 2; }
  .hero__title { margin: 1.4rem 0; max-width: 16ch; }
  .hero__title .accent-text { color: var(--green-text); }
  .hero__sub { max-width: 56ch; font-size: var(--fs-lead); margin-bottom: 2.2rem; color: var(--body); }
  .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
  /* Mobile: home-hero CTAs sit side by side as two compact buttons. */
  @media (max-width: 600px) {
    .hero .hero__cta { flex-wrap: nowrap; gap: 0.6rem; }
    .hero .hero__cta .btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; padding: 0.85em 0.9em; font-size: 0.82rem; }
    .hero .hero__cta .btn__arrow { display: none; }
  }
  .hero__meta {
    margin-top: clamp(3rem, 6vw, 5rem);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(1rem, 3vw, 2.5rem);
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding-top: 2rem;
  }
  @media (max-width: 620px) { .hero__meta { grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.6rem; padding-top: 1.4rem; } }
  .hero__stat .num { font-family: var(--font-display); font-size: clamp(2.6rem, 6.5vw, 4.4rem); color: var(--ink); line-height: 1; }
  .hero__stat .num span { color: var(--green-text); }
  .hero__stat .lbl { font-size: clamp(0.85rem, 1.4vw, 0.95rem); color: var(--muted); margin-top: 0.7rem; letter-spacing: 0.03em; }
  /* Symmetric edges: first stat hugs the left gutter, last hugs the right. */
  .hero__meta .hero__stat:first-child { text-align: left; }
  .hero__meta .hero__stat:nth-child(2) { text-align: center; }
  .hero__meta .hero__stat:last-child { text-align: right; }
  @media (max-width: 620px) {
    .hero__meta .hero__stat:nth-child(2),
    .hero__meta .hero__stat:last-child { text-align: left; }
  }
  
  .scroll-cue {
    position: absolute;
    bottom: 1.5rem; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
    z-index: 3;
  }
  .scroll-cue__line { width: 1px; height: 46px; background: linear-gradient(var(--green), transparent); position: relative; overflow: hidden; }
  .scroll-cue__line::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--ink); animation: cue 1.8s var(--ease-soft) infinite; }
  @keyframes cue { 0% { top: -50%; } 60%, 100% { top: 100%; } }
  
  /* ---------------------------- Marquee ------------------------------ */
  .marquee {
    overflow: hidden;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 1.5rem 0;
    background: var(--bg-soft);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee__track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 32s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee__item {
    display: inline-flex; align-items: center; gap: 0.8rem;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.5vw, 1.7rem);
    color: var(--muted);
    white-space: nowrap;
  }
  .marquee__item span { color: var(--green-text); }
  @keyframes marquee { to { transform: translateX(-50%); } }
  
  /* ----------------------------- Cards ------------------------------- */
  .card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2.3rem);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
  }
  /* Legal card with a side photo */
  .legal-card { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
  .legal-card__img { width: 100%; height: 100%; max-height: 340px; min-height: 220px; object-fit: cover; border-radius: var(--radius-lg); position: relative; z-index: 1; }
  @media (max-width: 760px) { .legal-card { grid-template-columns: 1fr; gap: 1rem; } .legal-card__img { max-height: 240px; } }
  /* Story figure — contextual photo beside the story text. */
  .story-figure { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 5 / 4; }
  .story-figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
  .story-figure:hover img { transform: scale(1.04); }
  @media (max-width: 880px) { .story-figure { aspect-ratio: 16 / 10; } }
  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(14,158,110,0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
  }
  .card:hover { transform: translateY(-5px); border-color: rgba(14,158,110,0.4); box-shadow: var(--shadow-md); }
  .card:hover::before { opacity: 1; }
  
  /* Division cards */
  /* Departments: 2-col grid on desktop; Swiper carousel on mobile (one card per
     view, no peek of the next). Swiper is only initialised below 760px. */
  /* Plain departments grid (departments page): 2-col on desktop, 1-col on mobile. */
  .departments-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
  @media (max-width: 760px) { .departments-grid:not(.swiper) { grid-template-columns: 1fr; } }
  
  /* Swiper variant (home page): container is a block; the grid lives on the
     wrapper for desktop, and it becomes a one-card carousel on mobile. */
  .departments-grid.swiper { display: block; grid-template-columns: none; }
  @media (min-width: 761px) {
    .departments-grid.swiper { overflow: visible; }
    .departments-grid.swiper .swiper-wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(1rem, 2vw, 1.5rem);
      transform: none !important;
    }
    .departments-grid.swiper .swiper-slide { width: auto !important; height: auto; }
    .departments-grid.swiper .swiper-pagination { display: none; }
  }
  @media (max-width: 760px) {
    .departments-grid.swiper { overflow: hidden; padding-bottom: 16px; }
    .departments-grid.swiper .swiper-slide { height: auto; }
    .departments-grid.swiper .swiper-pagination { position: static; display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.3rem; }
    .departments-grid.swiper .swiper-pagination-bullet { width: 8px; height: 8px; background: var(--line); opacity: 1; transition: width 0.4s var(--ease), background 0.4s var(--ease); }
    .departments-grid.swiper .swiper-pagination-bullet-active { background: var(--green); width: 24px; }
  }
  
  .division-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 340px;
    padding: clamp(1.6rem, 3vw, 2.4rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.55s var(--ease), border-color 0.55s var(--ease), box-shadow 0.55s var(--ease);
  }
  .division-card:hover { transform: translateY(-7px); border-color: rgba(14,158,110,0.45); box-shadow: var(--shadow-md); }
  /* Press feedback — the whole tile pushes in on click/tap. */
  .division-card:active { transform: scale(0.93); transition-duration: 0.09s; box-shadow: 0 6px 18px -12px rgba(15,42,39,0.5); }
  .division-card__num { display: none; }
  .division-card__icon { width: 52px; height: 52px; color: var(--green-text); margin-bottom: auto; }
  .division-card__title { font-size: var(--fs-h3); margin: 1.2rem 0 0.6rem; }
  .division-card__desc { color: var(--body); font-size: 0.98rem; max-width: 42ch; }
  .division-card__cta { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 1.4rem; font-weight: 600; color: var(--ink); }
  .division-card__cta svg { transition: transform 0.4s var(--ease); }
  .division-card:hover .division-card__cta svg { transform: translateX(5px); }
  .division-card--wide { grid-column: 1 / -1; min-height: 280px; }
  
  /* Photo-background division cards */
  .division-card__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.9s var(--ease);
  }
  .division-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(162deg, rgba(8, 32, 25, 0.46) 0%, rgba(7, 27, 21, 0.74) 58%, rgba(4, 20, 15, 0.92) 100%);
  }
  .division-card--photo {
    color: rgba(255, 255, 255, 0.82);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-md);
  }
  .division-card--photo > :not(.division-card__media) { position: relative; z-index: 1; }
  .division-card--photo:hover { border-color: rgba(123, 231, 192, 0.5); }
  .division-card--photo:hover .division-card__media { transform: scale(1.07); }
  .division-card--photo .division-card__title,
  .division-card--photo .division-card__cta { color: #fff; }
  .division-card--photo .division-card__desc { color: rgba(255, 255, 255, 0.84); }
  .division-card--photo .division-card__num,
  .division-card--photo .division-card__icon { color: #7be7c0; }
  
  /* Feature division = dark green spotlight card */
  .division-card--feature {
    background: linear-gradient(140deg, var(--teal-800), #0c6b4c);
    border-color: transparent;
    color: rgba(255,255,255,0.82);
  }
  .division-card--feature .division-card__title,
  .division-card--feature .division-card__cta { color: #fff; }
  .division-card--feature .division-card__num,
  .division-card--feature .division-card__icon { color: #7be7c0; }
  .division-card--feature .division-card__desc { color: rgba(255,255,255,0.78); }
  
  /* Tag for new division */
  .tag-new {
    display: inline-flex; align-items: center; gap: 0.4em;
    align-self: flex-start;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: #fff; background: var(--green);
    padding: 0.34em 0.7em; border-radius: 100px;
  }
  /* Pull the "New division" badge out of flow (top-right corner) so the icon
     sits at the top, level with the icons on the other cards. */
  .division-card .tag-new {
    position: absolute;
    top: clamp(1.6rem, 3vw, 2.4rem);
    right: clamp(1.6rem, 3vw, 2.4rem);
    margin: 0;
    z-index: 2;
  }
  
  /* ------------------------- Feature / bento ------------------------- */
  /* trade-net graphic as a faint background behind the "Why choose us" cards */
  .why-section { position: relative; overflow: hidden; }
  .why-section .container { position: relative; z-index: 1; }
  .why-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  }
  .why-bg .trade-net { width: min(1180px, 96%); }
  .why-bg .trade-net svg { height: clamp(280px, 40vh, 460px); }
  /* recolour the mint-on-dark graphic to green for the white section */
  .why-bg .trade-net .route { stroke: rgba(14, 158, 110, 0.42); stroke-width: 2; }
  .why-bg .trade-net .route--long { stroke: rgba(14, 158, 110, 0.28); }
  .why-bg .trade-net__nodes circle { fill: rgba(14, 158, 110, 0.65); filter: drop-shadow(0 0 6px rgba(14, 158, 110, 0.5)); }
  .why-bg .trade-net .halo { stroke: rgba(14, 158, 110, 0.55); }
  
  @media (min-width: 761px) { .h2-nowrap { white-space: nowrap; } }
  .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 1.4rem); }
  .bento > * { grid-column: span 6; }
  .bento > .span-4 { grid-column: span 4; }
  .bento > .span-8 { grid-column: span 8; }
  .bento > .span-12 { grid-column: span 12; }
  @media (max-width: 860px) { .bento > * { grid-column: span 12 !important; } }
  
  .feature {
    padding: clamp(1.5rem, 3vw, 2.2rem);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: transform 0.5s var(--ease), border-color 0.5s, box-shadow 0.5s;
    height: 100%;
  }
  .feature:hover { transform: translateY(-5px); border-color: rgba(14,158,110,0.35); box-shadow: var(--shadow-md); }
  .feature__icon {
    position: relative;
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--green-soft);
    border: 1px solid var(--green-soft-2);
    color: var(--green-text);
    margin-bottom: 1.3rem;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.55s cubic-bezier(0.34, 1.55, 0.5, 1), color 0.4s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
  }
  /* Green fill that sweeps up from the bottom on hover. */
  .feature__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--green);
    transform: translateY(101%);
    transition: transform 0.5s var(--ease);
  }
  .feature__icon svg { width: 26px; height: 26px; transition: transform 0.55s cubic-bezier(0.34, 1.7, 0.45, 1); }
  /* Hover: tile fills green, icon turns white, lifts & tilts, glyph pops. */
  .feature:hover .feature__icon {
    color: #fff;
    border-color: var(--green-text);
    transform: translateY(-5px) rotate(-7deg);
    box-shadow: 0 14px 26px -10px rgba(14, 158, 110, 0.6);
  }
  .feature:hover .feature__icon::before { transform: translateY(0); }
  .feature:hover .feature__icon svg { transform: scale(1.14) rotate(7deg); }
  .feature h3 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
  .feature p { color: var(--body); font-size: 0.98rem; }
  
  /* ------------------------------ Stats ------------------------------ */
  .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    text-align: center;
  }
  @media (max-width: 700px) { .stats { grid-template-columns: 1fr; } }
  .stat__num { font-family: var(--font-display); font-size: clamp(3rem, 9vw, 6rem); color: var(--ink); line-height: 1; }
  .stat__num .suffix { color: var(--green-text); }
  .stat__label { margin-top: 0.8rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; }
  /* stats inside a dark band */
  .on-dark .stat__num, .cta-band__inner .stat__num { color: #fff; }
  .on-dark .stat__label, .cta-band__inner .stat__label { color: rgba(255,255,255,0.7); }
  
  /* Premium intro ("Who we are") — drifting glow + heading shimmer */
  /* No overflow clip — the blurred glow fades softly past the section edge
     instead of being cut into a hard line (looked like an artifact). */
  .intro-section { position: relative; }
  .intro-section::before {
    content: "";
    position: absolute;
    width: clamp(420px, 50vw, 720px);
    aspect-ratio: 1;
    left: -8%; top: 58%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 158, 110, 0.13), transparent 66%);
    filter: blur(56px);
    pointer-events: none;
    z-index: 0;
    animation: introDrift 24s ease-in-out infinite alternate;
  }
  @keyframes introDrift {
    0%   { transform: translate(-3%, -52%) scale(1); }
    50%  { transform: translate(15%, -45%) scale(1.07); }
    100% { transform: translate(42%, -50%) scale(1.13); }
  }
  .intro-section .container { position: relative; z-index: 1; }
  .intro-section .reveal-lines .split-line__inner {
    background: linear-gradient(100deg, var(--ink) 0 44%, #2fc794 50%, var(--ink) 56% 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: introShimmer 5.5s linear infinite;
  }
  @keyframes introShimmer {
    from { background-position: 150% 0; }
    to { background-position: -60% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .intro-section::before { animation: none; }
    .intro-section .reveal-lines .split-line__inner { animation: none; -webkit-text-fill-color: var(--ink); color: var(--ink); }
  }
  /* Keep the intro heading reliably visible (the line-slide reveal otherwise clips it). */
  .intro-section .reveal-lines .split-line { overflow: visible; }
  .intro-section .reveal-lines .split-line__inner { transform: none; }
  
  /* Full-width green section (e.g. the process / "From request to delivery") */
  .section--green {
    position: relative;
    background: linear-gradient(165deg, var(--teal-900), #0e342a 58%, var(--teal-950));
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
  }
  .section--green .section-head h2 { color: #fff; }
  .section--green .section-head p { color: rgba(255, 255, 255, 0.72); }
  .section--green .eyebrow { color: #5be3b0; }
  .section--green .eyebrow::before, .section--green .eyebrow::after { background: #5be3b0; }
  .section--green .steps { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.55); }
  .section--green .step { background: rgba(8, 36, 28, 0.72); }
  .section--green .step:hover { background: rgba(18, 56, 46, 0.82); }
  .section--green .step__num { color: #5be3b0; }
  .section--green .step__body h3 { color: #fff; }
  .section--green .step__body p { color: rgba(255, 255, 255, 0.74); }
  .section--green .step__line { background: rgba(255, 255, 255, 0.16); }
  .section--green .steps::before { background: rgba(255, 255, 255, 0.16); }
  
  /* ----------------------------- Process ----------------------------- */
  .steps { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
  .step {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(1rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    background: var(--card);
    transition: background 0.45s var(--ease);
  }
  .step:hover { background: var(--bg-mint); }
  .step__num { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--green-text); transition: transform 0.5s cubic-bezier(0.34, 1.55, 0.5, 1), text-shadow 0.4s var(--ease); }
  .step:hover .step__num { transform: scale(1.16); text-shadow: 0 0 18px var(--green-glow); }
  .step__body h3 { font-size: var(--fs-h3); margin-bottom: 0.4rem; }
  .step__body p { color: var(--body); max-width: 60ch; }
  .step__line { display: none; }
  /* Continuous rail down the left, with an indicator that lights the hovered step */
  .steps { position: relative; }
  .steps::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--line-soft);
    z-index: 2;
    pointer-events: none;
  }
  .step { position: relative; overflow: hidden; }
  .step::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 2px; height: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(var(--green), var(--green-deep));
    transform: translateY(-50%);
    opacity: 0;
    transition: height 0.5s var(--ease), opacity 0.4s var(--ease), box-shadow 0.4s var(--ease);
    z-index: 3;
    pointer-events: none;
  }
  .step:hover::before { height: 72%; opacity: 1; box-shadow: 0 0 18px var(--green-glow); }
  .step::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 42%, rgba(123, 231, 192, 0.16) 50%, transparent 58%);
    transform: translateX(-120%);
    transition: transform 0.8s var(--ease);
    pointer-events: none;
  }
  .step:hover::after { transform: translateX(120%); }
  @media (prefers-reduced-motion: reduce) { .step::after { display: none; } }
  @media (max-width: 640px) { .step { grid-template-columns: auto 1fr; } .step__line { display: none; } }
  
  /* ----------------------------- Reach ------------------------------- */
  /* Green ambient background for the sourcing-reach section. */
  .reach-band {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(48% 62% at 80% 48%, rgba(14, 158, 110, 0.22), transparent 62%),
      radial-gradient(42% 60% at 8% 22%, rgba(14, 158, 110, 0.14), transparent 60%),
      radial-gradient(35% 45% at 55% 95%, rgba(47, 214, 164, 0.12), transparent 62%),
      linear-gradient(180deg, #ffffff, #e7f5ee 52%, #ffffff);
  }
  /* Green glow blobs that breathe behind the diagram. */
  .reach-band::before {
    content: "";
    position: absolute;
    width: clamp(380px, 40vw, 660px);
    aspect-ratio: 1;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 158, 110, 0.4), transparent 66%);
    filter: blur(38px);
    pointer-events: none;
    z-index: 0;
    animation: reachGlow 7s ease-in-out infinite;
  }
  .reach-band::after {
    content: "";
    position: absolute;
    width: clamp(220px, 24vw, 360px);
    aspect-ratio: 1;
    left: -4%;
    bottom: -10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 214, 164, 0.3), transparent 64%);
    filter: blur(34px);
    pointer-events: none;
    z-index: 0;
    animation: reachGlow 9s ease-in-out infinite 1s;
  }
  @keyframes reachGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
  .reach-band .container { position: relative; z-index: 1; }
  @media (max-width: 900px) { .reach-band::before { right: -10%; top: 75%; } }
  
  .reach { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  /* Reversed: globe on the left, text on the right. */
  .reach--rev { grid-template-columns: 0.9fr 1.1fr; }
  @media (max-width: 900px) {
    .reach { grid-template-columns: 1fr; }
    /* Globe leads (before the heading/text) on mobile for both reach variants. */
    .reach .reach__visual { order: -1; }
  }
  .reach__list { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
  .chip {
    padding: 0.6em 1.1em;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 0.9rem;
    color: var(--body);
    background: var(--card);
    transition: all 0.4s var(--ease);
  }
  .chip:hover { border-color: var(--green-text); color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
  .reach__visual {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--line);
    position: relative;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 40%, var(--green-soft), transparent 62%);
  }
  .reach__visual::before, .reach__visual::after {
    content: ""; position: absolute; border: 1px solid var(--line-soft); border-radius: 50%;
  }
  .reach__visual::before { inset: 14%; }
  .reach__visual::after { inset: 30%; }
  /* Rotating 3D wireframe globe (meridians + equator) */
  .reach__visual { perspective: 1100px; }
  .globe-mesh {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: globeSpin 18s linear infinite;
    pointer-events: none;
    z-index: 1;
  }
  @keyframes globeSpin {
    from { transform: rotateX(16deg) rotateY(0deg); }
    to { transform: rotateX(16deg) rotateY(360deg); }
  }
  .globe-mesh span {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    border: 2px solid rgba(14, 158, 110, 0.34);
  }
  .globe-mesh span:nth-child(1) { transform: rotateY(0deg); }
  .globe-mesh span:nth-child(2) { transform: rotateY(30deg); }
  .globe-mesh span:nth-child(3) { transform: rotateY(60deg); }
  .globe-mesh span:nth-child(4) { transform: rotateY(90deg); }
  .globe-mesh span:nth-child(5) { transform: rotateY(120deg); }
  .globe-mesh span:nth-child(6) { transform: rotateY(150deg); }
  .globe-mesh__eq { transform: rotateX(90deg); border-color: rgba(14, 158, 110, 0.22); }
  @media (prefers-reduced-motion: reduce) { .globe-mesh { animation: none; transform: rotateX(16deg) rotateY(28deg); } }
  .reach__core { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3.4rem); color: var(--ink); text-align: center; z-index: 2; position: relative; }
  .reach__core span { display: block; font-size: 0.78rem; letter-spacing: 0.2em; color: var(--green-text); font-family: var(--font-body); margin-top: 0.4rem; }
  .reach__dot { position: absolute; width: 10px; height: 10px; background: var(--green); border-radius: 50%; box-shadow: 0 0 16px var(--green-glow); animation: dotBlink 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
  @keyframes dotBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 16px var(--green-glow); }
    50% { opacity: 0.45; box-shadow: 0 0 6px var(--green-glow); }
  }
  @media (prefers-reduced-motion: reduce) { .reach__dot { animation: none; } }
  
  /* ----------------------------- CTA band ---------------------------- */
  .cta-band { position: relative; text-align: center; overflow: hidden; }
  .cta-band__inner {
    position: relative;
    z-index: 2;
    background: linear-gradient(140deg, var(--teal-900), #0c5a40);
    border-radius: var(--radius-lg);
    padding: clamp(2.6rem, 6vw, 5rem);
    overflow: hidden;
    color: rgba(255,255,255,0.8);
    box-shadow: var(--shadow-md);
  }
  .cta-band__inner::before {
    content: "";
    position: absolute; inset: -2px;
    background: radial-gradient(60% 120% at 50% 0%, rgba(14,158,110,0.4), transparent 60%);
    pointer-events: none;
  }
  /* Live "connections" graphic injected by ctaConnections() in main.js — lines
     with travelling light pulses + twinkling nodes. Sits above the band fill,
     below the text. */
  .cta-net {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
  }
  .cta-band__inner .eyebrow { color: #5be3b0; }
  .cta-band__inner .eyebrow::before, .cta-band__inner .eyebrow::after { background: #5be3b0; }
  .cta-band h2 { font-size: var(--fs-h1); margin-bottom: 1rem; position: relative; color: #fff; }
  .cta-band p { max-width: 52ch; margin: 0 auto 2rem; font-size: var(--fs-lead); position: relative; color: rgba(255,255,255,0.8); }
  .cta-band .hero__cta { justify-content: center; position: relative; }
  /* Trusted-partners row inside the green band */
  .partners-row {
    position: relative;
    margin-top: clamp(1.8rem, 4vw, 2.6rem);
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
  }
  .partners-row__label {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
  }
  .partners-row__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(1.4rem, 5vw, 3.6rem);
  }
  .partners-row__logos span {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 3vw, 1.8rem);
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    transition: color 0.3s var(--ease), transform 0.3s var(--ease);
    cursor: default;
  }
  .partners-row__logos span:hover { color: #fff; transform: translateY(-3px); }
  
  /* Wordless animated global trade-routes network inside the green band */
  .cta-band__inner--net { padding-block: clamp(2rem, 4vw, 3.4rem); }
  .trade-net { width: 100%; }
  .trade-net svg { width: 100%; height: clamp(170px, 21vw, 280px); display: block; overflow: visible; }
  .trade-net .route {
    stroke: rgba(123, 231, 192, 0.5);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 5 12;
    animation: routeFlow 5s linear infinite;
  }
  .trade-net .route--long { stroke: rgba(123, 231, 192, 0.3); stroke-width: 1.4; animation-duration: 7.5s; }
  .trade-net .route:nth-child(even) { animation-duration: 6s; }
  @keyframes routeFlow { to { stroke-dashoffset: -170; } }
  .trade-net__nodes circle {
    fill: #7be7c0;
    filter: drop-shadow(0 0 7px rgba(123, 231, 192, 0.85));
  }
  .trade-net .halo {
    fill: none;
    stroke: rgba(123, 231, 192, 0.7);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: nodePulse 2.8s ease-out infinite;
  }
  .trade-net .halo:nth-child(2) { animation-delay: 0.95s; }
  .trade-net .halo:nth-child(3) { animation-delay: 1.9s; }
  @keyframes nodePulse {
    0% { transform: scale(0.5); opacity: 0.85; }
    80%, 100% { transform: scale(3.2); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .trade-net .route, .trade-net .halo { animation: none; }
  }
  
  /* ----------------------------- Footer ------------------------------ */
  .site-footer { position: relative; background: linear-gradient(180deg, var(--teal-900), var(--teal-950)); color: rgba(255,255,255,0.7); padding-top: clamp(3.5rem, 7vw, 6rem); margin-top: clamp(3rem, 6vw, 5rem); }
  .site-footer .brand__logo { display: none; }
  .site-footer .brand__logo--light { display: block; height: 78px; }
  @media (max-width: 560px) { .site-footer .brand__logo--light { height: 84px; } }
  .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(1.5rem, 4vw, 3rem); padding-bottom: 3rem; }
  @media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 540px) { .footer__top { grid-template-columns: 1fr; } }
  .footer__brand .brand { margin-bottom: 1.2rem; }
  .footer__brand p { color: rgba(255,255,255,0.55); max-width: 34ch; font-size: 0.95rem; }
  .footer__col h4 { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: #5be3b0; margin-bottom: 1.2rem; font-weight: 700; }
  .footer__col ul { display: flex; flex-direction: column; gap: 0.7rem; }
  .footer__col a { color: rgba(255,255,255,0.7); font-size: 0.95rem; transition: color 0.3s, padding-left 0.3s; }
  .footer__col a:hover { color: #fff; padding-left: 5px; }
  .footer__contacts a { display: flex; align-items: center; gap: 0.6rem; }
  .footer__bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
    padding: 1.8rem 0; border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem; color: rgba(255,255,255,0.5);
  }
  .footer__bottom a { color: rgba(255,255,255,0.5); }
  .footer__bottom a:hover { color: #fff; }
  .footer__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
  
  /* --------------------------- Breadcrumb ---------------------------- */
  .breadcrumb { display: flex; gap: 0.6rem; align-items: center; font-size: 0.85rem; color: var(--muted); margin-bottom: 1.5rem; }
  .breadcrumb a:hover { color: var(--ink); }
  .breadcrumb span { opacity: 0.5; }
  
  /* --------------------------- Page hero ----------------------------- */
  .page-hero { position: relative; padding-top: clamp(9rem, 16vh, 13rem); padding-bottom: clamp(3rem, 6vw, 5rem); overflow: clip; }
  .page-hero__title { font-size: var(--fs-h1); max-width: 18ch; margin: 1rem 0; }
  .page-hero__sub { max-width: 58ch; font-size: var(--fs-lead); color: var(--body); }
  .page-hero .hero__orb--1 { opacity: 0.5; }
  
  /* ------------------------- Division detail ------------------------- */
  /* Division hero: text only, full width — the frosted photo panel is removed. */
  .dd-hero { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: end; }
  .dd-hero__visual { display: none; }
  .dd-hero__visual {
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    display: grid; place-items: center;
    background: linear-gradient(150deg, var(--bg-mint), #ffffff);
    box-shadow: var(--shadow-sm);
  }
  .dd-hero__visual svg { width: 45%; height: 45%; color: var(--green-text); opacity: 0.9; }
  
  /* Photo behind frosted glass + icon; hover lifts the glass & icon to reveal it */
  .dd-hero__reveal { position: relative; overflow: hidden; cursor: pointer; }
  .dd-hero__photo {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-size: cover;
    background-position: center;
    transition: transform 0.85s var(--ease);
  }
  .dd-hero__glass {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;           /* clips the blurred frost cleanly to rounded corners */
    display: grid;
    place-items: center;
    transform-origin: 75% 25%;
    transition: opacity 0.7s var(--ease),
                transform 0.9s cubic-bezier(0.62, 0.01, 0.2, 1);
  }
  /* The frost is a blurred, darkened copy of the photo (its URL is handed in per
     page as --glass-img by glassReveal). Using a normal blurred layer instead of
     backdrop-filter means the parent's rounded overflow clips it perfectly — no
     square edges and no dark corner halo (backdrop-filter can't be clipped by
     overflow or clip-path, which caused both bugs). The icon stays sharp on top. */
  .dd-hero__glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(rgba(11, 33, 29, 0.42), rgba(11, 33, 29, 0.42)), var(--glass-img, none);
    background-color: rgba(11, 33, 29, 0.42);
    background-size: cover;
    background-position: center;
    filter: blur(12px) saturate(1.15);
    transform: scale(1.12);     /* oversize so the blur's faded edge stays out of view */
  }
  .dd-hero__glass svg {
    position: relative;
    z-index: 1;
    width: 42%; height: 42%;
    color: #7be7c0;
    opacity: 1;
    transition: opacity 0.55s var(--ease), transform 0.8s cubic-bezier(0.34, 1.55, 0.5, 1);
  }
  /* One-time reveal driven by JS inline styles (see glassReveal in main.js):
     first hover / tap peels the frosted glass off toward the bottom-left,
     sharpens it into focus and dissolves it — and keeps it off until reload.
     The transitions below provide the easing for those inline changes. */
  @media (prefers-reduced-motion: reduce) {
    .dd-hero__glass, .dd-hero__glass svg, .dd-hero__photo { transition-duration: 0.25s; }
  }
  
  /* ---------------- Editorial media sections (division pages) ---------------- */
  /* Rounded photo figure with brand tint + floating label */
  .media-figure {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 4/3;
    isolation: isolate;
  }
  /* border-radius on the image itself keeps the corners rounded even while the
     figure is composited by the float animation / under browser zoom, where an
     overflow:hidden round-clip can otherwise render square. */
  .media-figure img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; transition: transform 1.1s var(--ease); }
  .media-figure:hover img { transform: scale(1.05); }
  /* Photos fade in without any vertical slide, so they stay perfectly still on scroll. */
  .media-figure[data-reveal] { transform: none; }
  .media-figure::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(150deg, rgba(14, 158, 110, 0.16), transparent 52%);
  }
  .media-figure__tag {
    position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.95rem; border-radius: 100px;
    background: rgba(8, 32, 27, 0.5);
    -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
    color: #eafff6; font-size: 0.82rem; letter-spacing: 0.03em; font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  .media-figure__tag svg { width: 15px; height: 15px; color: #7be7c0; }
  
  /* ---- Pinned scrollytelling: sticky panel, text + photo swap on scroll ---- */
  .scrolly { position: relative; height: 200vh; }
  .scrolly__sticky { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; box-sizing: border-box; padding-top: clamp(6rem, 13vh, 7.5rem); }
  .scrolly__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; width: 100%; }
  .scrolly__steps { position: relative; margin-top: 1.1rem; min-height: clamp(12rem, 26vh, 16rem); }
  .scrolly__step {
    position: absolute; inset: 0; opacity: 0; transform: translateY(18px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); pointer-events: none;
  }
  .scrolly__step.is-active { opacity: 1; transform: none; }
  .scrolly__step h2 { font-size: var(--fs-h2); }
  .scrolly__step p { margin-top: 1rem; max-width: 44ch; color: var(--body); font-size: var(--fs-lead); }
  .scrolly__media {
    position: relative; aspect-ratio: 1 / 0.92; border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-md); isolation: isolate;
  }
  /* Photos stack as a vertical filmstrip: scrolling down slides the next one
     up from below (top-to-bottom scroll feel). JS sets the per-image offset. */
  .scrolly__img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transform: translateY(100%); transition: transform 0.8s var(--ease); will-change: transform;
  }
  .scrolly__img:first-child { transform: translateY(0); }
  .scrolly__dots { display: none; }
  .scrolly__dots span { width: 8px; height: 8px; border-radius: 100px; background: var(--line); transition: background 0.4s var(--ease), width 0.4s var(--ease); }
  .scrolly__dots span.is-active { background: var(--green); width: 24px; }
  
  /* Mobile: the pinned scrollytelling becomes a swipeable card carousel (built by
     scrollyMobile in main.js). The pinned panel is hidden, the section flows
     normally, and each card holds one step's text + its photo — one card per
     view, no peek of the next. */
  .scrolly-cards-holder { display: none; }
  .scrolly--mobile { height: auto !important; }
  .scrolly--mobile .scrolly__sticky { display: none; }
  .scrolly--mobile .scrolly-cards-holder { display: block; }
  .scrolly-cards-holder > .eyebrow { display: block; margin-bottom: 1.1rem; }
  .scrolly-cards.swiper { overflow: hidden; padding-bottom: 16px; }
  .scrolly-card { display: flex; flex-direction: column; height: auto; }
  .scrolly-card__body h2 { font-size: var(--fs-h2); margin: 0 0 0.7rem; }
  .scrolly-card__body p { color: var(--body); font-size: var(--fs-lead); margin: 0 0 1.3rem; }
  .scrolly-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; margin-top: auto; }
  .scrolly-cards .swiper-pagination { position: static; display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.3rem; }
  .scrolly-cards .swiper-pagination-bullet { width: 8px; height: 8px; background: var(--line); opacity: 1; transition: width 0.4s var(--ease), background 0.4s var(--ease); }
  .scrolly-cards .swiper-pagination-bullet-active { background: var(--green); width: 24px; }
  
  /* Generic mobile card carousel (the "why choose us" bento + "how it works"
     steps). Built by mobileCardCarousels in main.js; hidden on desktop. */
  .m-carousel-holder { display: none; }
  /* Cards span the full container width so they line up with the section text.
     overflow: clip + overflow-clip-margin lets each card's shadow/rounded corners
     breathe ~13px past the edge (less than the 16px slide gap, so the neighbouring
     card never peeks) instead of being hard-clipped and reading as "cut off". */
  .m-carousel.swiper { overflow: clip; overflow-clip-margin: 13px; padding-bottom: 16px; }
  .m-carousel .swiper-slide { height: auto; display: flex; }
  .m-carousel .swiper-slide > * { width: 100%; margin: 0; box-sizing: border-box; }
  .m-carousel .step__line { display: none; }
  .m-carousel .swiper-pagination { position: static; display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.3rem; }
  .m-carousel .swiper-pagination-bullet { width: 8px; height: 8px; background: var(--line); opacity: 1; transition: width 0.4s var(--ease), background 0.4s var(--ease); }
  .m-carousel .swiper-pagination-bullet-active { background: var(--green); width: 24px; }
  .section--green .m-carousel .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.3); }
  .section--green .m-carousel .swiper-pagination-bullet-active { background: #5be3b0; }
  /* Stat cards in the carousel get a soft card so each number reads as its own
     tile instead of floating numbers. */
  .m-carousel--stats .swiper-slide > div {
    background: linear-gradient(150deg, var(--bg-mint), #ffffff);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.8rem, 8vw, 2.6rem) 1.3rem;
    text-align: center;
  }
  /* Smaller stat number inside the mobile carousel so it fits comfortably. */
  .m-carousel--stats .stat__num { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  /* Tighten the space between the stats card and the text above it on mobile. */
  @media (max-width: 760px) {
    .stats-section { padding-top: 8px; }
  }
  
  @media (max-width: 860px) {
    .scrolly { height: 200vh; }
    .scrolly__grid { grid-template-columns: 1fr; gap: 1.6rem; }
    .scrolly__steps { min-height: clamp(10rem, 24vh, 13rem); }
  }
  @media (prefers-reduced-motion: reduce) {
    .scrolly { height: auto; }
    .scrolly__sticky { position: static; min-height: 0; padding-block: 60px; }
    .scrolly__step { position: relative; opacity: 1; transform: none; margin-bottom: 2rem; }
    .scrolly__img { position: relative; opacity: 1; transform: none; }
    .scrolly__img:not(.is-active) { display: none; }
  }
  
  /* Ambient green glow behind the editorial media sections */
  .section:has(.media-split), .section:has(.media-duo) { position: relative; overflow: hidden; }
  .section:has(.media-split) > .container, .section:has(.media-duo) > .container { position: relative; z-index: 1; }
  .section:has(.media-split)::before, .section:has(.media-duo)::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(1100px, 92%);
    aspect-ratio: 16 / 7;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(14, 158, 110, 0.18), rgba(14, 158, 110, 0.06) 45%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
  }
  
  /* Image + text split (alternating sides) */
  .media-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .media-split--rev .media-split__media { order: 2; }
  .media-split__body .eyebrow { margin-bottom: 0.6rem; }
  .media-split__body h2 { font-size: var(--fs-h2); }
  .media-split__body p { color: var(--body); margin-top: 1rem; max-width: 52ch; }
  @media (max-width: 820px) {
    .media-split { grid-template-columns: 1fr; gap: 1.8rem; }
    .media-split--rev .media-split__media { order: 0; }
  }
  
  /* Two offset photos (premium collage) */
  .media-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); }
  .media-duo .media-figure:nth-child(2) { margin-top: clamp(1.5rem, 5vw, 3.5rem); }
  @media (max-width: 640px) { .media-duo { grid-template-columns: 1fr; } .media-duo .media-figure:nth-child(2) { margin-top: 0; } }
  
  /* Wide editorial band with overlaid caption */
  .media-band { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: clamp(300px, 42vw, 480px); display: grid; align-items: end; box-shadow: var(--shadow-md); isolation: isolate; }
  .media-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 1.4s var(--ease); }
  .media-band:hover img { transform: scale(1.04); }
  /* Green wash, darkest on the left, fading to clear on the right — keeps the
     left-aligned caption readable over any photo. A faint bottom darken helps too. */
  .media-band__veil {
    position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(90deg, rgba(9, 38, 31, 0.92) 0%, rgba(9, 38, 31, 0.66) 32%, rgba(11, 46, 37, 0.22) 62%, rgba(11, 46, 37, 0) 100%),
      linear-gradient(180deg, transparent 55%, rgba(7, 26, 22, 0.4));
  }
  .media-band__cap { position: relative; z-index: 2; padding: clamp(1.6rem, 4vw, 3.2rem); color: #fff; max-width: 62ch; }
  .media-band__cap .eyebrow { color: #7be7c0; }
  .media-band__cap .eyebrow::before, .media-band__cap .eyebrow::after { background: #7be7c0; }
  .media-band__cap h3 { color: #fff; font-size: var(--fs-h2); margin: 0.5rem 0 0; }
  .media-band__cap p { color: rgba(255, 255, 255, 0.82); margin-top: 0.8rem; }
  
  /* -------- Contact: single number + messenger apps -------- */
  .phone-hub { margin-bottom: 2.5rem; }
  .phone-hub__call {
    display: flex; align-items: center; gap: 1rem;
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
    border-radius: var(--radius); border: 1px solid var(--line);
    background: linear-gradient(150deg, var(--bg-mint), #ffffff);
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  }
  .phone-hub__call:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(14, 158, 110, 0.4); }
  .phone-hub__icon {
    flex: none; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(150deg, var(--green), var(--green-deep));
    box-shadow: var(--shadow-green);
  }
  .phone-hub__icon svg { width: 24px; height: 24px; }
  .phone-hub__text { display: flex; flex-direction: column; }
  .phone-hub__label { font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .phone-hub__val { font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.25rem); color: var(--ink); line-height: 1.1; margin-top: 0.2rem; word-break: break-word; }
  .phone-hub__call + .phone-hub__call { margin-top: 0.9rem; }
  .phone-hub__hint { color: var(--body); font-size: 0.92rem; margin: 1.1rem 0 0.9rem; }
  .phone-hub__apps { display: flex; flex-wrap: wrap; gap: 0.7rem; }
  .contact-extra { margin-top: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: stretch; }
  .contact-extra .phone-hub__call { flex: 1 1 auto; min-width: 0; }
  .contact-extra .phone-hub__text { min-width: 0; }
  .contact-extra .phone-hub__val { white-space: nowrap; }
  .contact-extra .btn { flex: 0 0 auto; align-self: center; }
  @media (max-width: 560px) {
    .contact-extra .phone-hub__call { flex-basis: 100%; }
    .contact-extra .phone-hub__val { white-space: normal; word-break: break-word; }
  }
  .app-chip {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.62rem 1.05rem; border-radius: 100px;
    border: 1px solid var(--line); background: var(--card); color: var(--ink);
    font-weight: 500; font-size: 0.92rem;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
  }
  .app-chip svg { width: 24px; height: 24px; color: var(--green); transition: color 0.3s var(--ease); }
  .app-chip:hover { transform: translateY(-2px); border-color: rgba(14, 158, 110, 0.45); box-shadow: var(--shadow-sm); background: var(--bg-mint); }
  
  /* -------- Contact: styled offices map -------- */
  .map-block { display: grid; grid-template-columns: minmax(220px, 330px) 1fr; gap: clamp(1rem, 2vw, 1.6rem); }
  @media (max-width: 760px) { .map-block { grid-template-columns: 1fr; } }
  .map-block__tabs { display: flex; flex-direction: column; gap: 0.7rem; }
  .map-tab {
    text-align: left; display: flex; flex-direction: column; gap: 0.25rem;
    padding: 1rem 1.15rem; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--card); cursor: pointer;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .map-tab:hover { transform: translateX(3px); border-color: rgba(14, 158, 110, 0.4); }
  .map-tab.is-active { border-color: var(--green-text); background: var(--bg-mint); box-shadow: var(--shadow-sm); }
  .map-tab__city { font-weight: 600; color: var(--ink); }
  .map-tab__addr { font-size: 0.85rem; color: var(--muted); }
  .map-block__frame {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--line); box-shadow: var(--shadow-md);
    min-height: clamp(320px, 46vw, 520px); isolation: isolate;
  }
  .map-block__map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
    filter: grayscale(0.5) contrast(1.04) saturate(0.85) brightness(1.02); }
  .map-block__frame::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(160deg, rgba(14, 158, 110, 0.12), transparent 55%);
    mix-blend-mode: multiply;
  }
  .map-block__open {
    position: absolute; right: 0.9rem; bottom: 0.9rem; z-index: 2;
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.95rem; border-radius: 100px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    color: var(--ink); font-size: 0.85rem; font-weight: 600;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s var(--ease);
  }
  .map-block__open svg { color: var(--green-text); transition: transform 0.3s var(--ease); }
  .map-block__open:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--green-text); }
  .map-block__open:hover svg { transform: translate(2px, -2px); }
  
  .capabilities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
  @media (max-width: 640px) { .capabilities { grid-template-columns: 1fr; } }
  .capability { background: var(--card); padding: clamp(1.4rem, 3vw, 2rem); transition: background 0.4s var(--ease); }
  .capability:hover { background: var(--bg-mint); }
  .capability__num { font-family: var(--font-display); color: var(--green-text); font-size: 0.85rem; }
  .capability h3 { font-size: 1.2rem; margin: 0.8rem 0 0.5rem; }
  .capability p { color: var(--body); font-size: 0.95rem; }
  
  .spec-list { display: flex; flex-direction: column; }
  .spec-list__item {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1.1rem 0; border-bottom: 1px solid var(--line-soft);
  }
  .spec-list__item svg { color: var(--green-text); flex: none; margin-top: 3px; }
  .spec-list__item p { color: var(--body); }
  .spec-list__item strong { color: var(--ink); display: block; margin-bottom: 2px; font-family: var(--font-display); font-weight: 400; }
  
  /* ----------------------------- Contact ----------------------------- */
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .contact-aside { position: sticky; top: clamp(6rem, 12vh, 8rem); align-self: start; }
  @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 1.4rem; } .contact-aside { position: static; top: auto; } }
  /* Mobile: messenger chips shrink to three compact tags in one row, and the
     gap down to the form tightens. */
  @media (max-width: 760px) {
    .phone-hub { margin-bottom: 1rem; }
    .phone-hub__apps { flex-wrap: nowrap; gap: 0.5rem; }
    .app-chip { flex: 1 1 0; min-width: 0; justify-content: center; gap: 0.35rem; padding: 0.5rem 0.4rem; font-size: 0.78rem; }
    .app-chip svg { width: 18px; height: 18px; }
  }
  .channels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }
  @media (max-width: 480px) { .channels { grid-template-columns: 1fr; } }
  .channel {
    display: flex; align-items: center; gap: 0.9rem;
    padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--card); box-shadow: var(--shadow-sm); transition: all 0.4s var(--ease);
  }
  .channel:hover { border-color: var(--green-text); transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .channel__icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--green-soft); color: var(--green-text); }
  .channel__label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; display: block; }
  .channel__val { color: var(--ink); font-weight: 600; display: block; }
  
  .offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  @media (max-width: 760px) { .offices { grid-template-columns: 1fr; } }
  .office { padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); transition: all 0.4s var(--ease); }
  .office:hover { border-color: rgba(14,158,110,0.4); transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .office__city { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); margin-bottom: 0.6rem; }
  .office__addr { color: var(--body); font-size: 0.95rem; line-height: 1.6; }
  .office__pin { color: var(--green-text); margin-bottom: 1rem; }
  
  /* Form */
  .form { display: grid; gap: 1.1rem; }
  .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  @media (max-width: 480px) { .form__row { grid-template-columns: 1fr; } }
  .field { position: relative; }
  .field label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.5rem; letter-spacing: 0.03em; }
  .field input, .field textarea, .field select {
    width: 100%;
    padding: 0.95rem 1.1rem;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.98rem;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  }
  .field textarea { resize: vertical; min-height: 130px; }
  .field input::placeholder, .field textarea::placeholder { color: var(--muted); }
  .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green-text); background: #fff; box-shadow: 0 0 0 3px var(--green-soft); }
  .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%230e9e6e' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; }
  .form__note { font-size: 0.82rem; color: var(--muted); }
  .form__success { display: none; padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: var(--green-soft); border: 1px solid var(--green-soft-2); color: var(--green-deep); font-weight: 500; }
  .form__success.is-visible { display: block; }
  .form__error { display: none; padding: 0.9rem 1.2rem; border-radius: var(--radius-sm); background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); font-weight: 500; font-size: 0.92rem; }
  .form__error.is-visible { display: block; }
  .field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--danger-line); background: var(--danger-soft); }
  .field.has-error input:focus, .field.has-error textarea:focus, .field.has-error select:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
  .field.has-error label { color: var(--danger); }
  /* Honeypot — off-screen for bots to find, invisible and unfocusable for people. */
  .form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form button[type="submit"][disabled] { opacity: 0.65; cursor: progress; }
  
  /* ----- Pay popup ----- */
  .pay-modal {
    position: fixed; inset: 0; z-index: 300;
    display: grid; place-items: center; padding: 1.2rem;
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
  }
  .pay-modal[aria-hidden="false"] { opacity: 1; visibility: visible; }
  .pay-modal__overlay { position: absolute; inset: 0; background: rgba(8, 24, 22, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .pay-modal__dialog {
    position: relative; z-index: 1;
    width: min(440px, 100%); max-height: calc(100vh - 2.4rem); overflow-y: auto;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: clamp(1.6rem, 4vw, 2.4rem); box-shadow: 0 40px 80px -30px rgba(15, 42, 39, 0.45);
    transform: translateY(18px) scale(0.98); transition: transform 0.4s var(--ease);
  }
  .pay-modal[aria-hidden="false"] .pay-modal__dialog { transform: none; }
  .pay-modal__close {
    position: absolute; top: 0.9rem; right: 0.9rem; width: 38px; height: 38px;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--bg-mint); color: var(--ink); border: 1px solid var(--line);
    cursor: pointer; transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .pay-modal__close:hover { background: var(--green-soft); transform: rotate(90deg); }
  .pay-modal__title { font-size: var(--fs-h3); margin: 0.7rem 0 0.5rem; }
  .pay-modal__sub { color: var(--body); margin-bottom: 1.4rem; max-width: 38ch; }
  .pay-form .field { margin-bottom: 1rem; }
  .pay-form .form__row { margin-bottom: 0; }
  .pay-form__submit { width: 100%; justify-content: center; margin-top: 0.5rem; }
  .pay-form__note { font-size: 0.8rem; color: var(--muted); margin-top: 1rem; line-height: 1.5; text-align: center; }
  /* Mobile: compact the payment popup so it fits on screen without a scrollbar. */
  @media (max-width: 760px) {
    .pay-modal { padding: 0.8rem; }
    .pay-modal__dialog { padding: 1.3rem 1.3rem 1.5rem; max-height: calc(100dvh - 1.6rem); }
    .pay-modal__close { top: 0.7rem; right: 0.7rem; width: 34px; height: 34px; }
    .pay-modal__title { margin: 0.4rem 0 0.35rem; }
    .pay-modal__sub { font-size: 0.88rem; margin-bottom: 0.9rem; }
    .pay-form .field { margin-bottom: 0.6rem; }
    .pay-modal .field label { margin-bottom: 0.3rem; font-size: 0.74rem; }
    .pay-modal .field input, .pay-modal .field select { padding: 0.68rem 0.9rem; font-size: 0.92rem; }
    .pay-form__submit { margin-top: 0.2rem; }
    .pay-form__note { margin-top: 0.6rem; font-size: 0.72rem; line-height: 1.4; }
  }
  
  /* Distinct "Pay" button in the header */
  .btn--pay { --bg: var(--ink); --fg: #fff; }
  .btn--pay::after { background: var(--green); }
  body.nav-over-hero .nav__actions .btn--pay { --bg: #7be7c0; --fg: #0e2624; }
  .mobile-menu__pay { width: 100%; justify-content: center; margin-top: 0.4rem; }
  
  /* ----------------------------- Legal ------------------------------- */
  .legal { display: grid; grid-template-columns: 240px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  @media (max-width: 860px) { .legal { grid-template-columns: 1fr; } }
  .legal__toc { position: sticky; top: 110px; }
  .legal__toc h4 { font-family: var(--font-body); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-text); margin-bottom: 1rem; }
  .legal__toc a { display: block; padding: 0.5rem 0; color: var(--muted); font-size: 0.92rem; border-left: 2px solid var(--line-soft); padding-left: 1rem; transition: all 0.3s; }
  .legal__toc a:hover, .legal__toc a.is-active { color: var(--ink); border-left-color: var(--green-text); }
  @media (max-width: 860px) { .legal__toc { position: static; display: none; } }
  .legal__body h2 { font-size: var(--fs-h3); margin: 2.5rem 0 1rem; scroll-margin-top: 110px; }
  .legal__body h2:first-child { margin-top: 0; }
  .legal__body p, .legal__body li { color: var(--body); margin-bottom: 1rem; }
  .legal__body ul { padding-left: 1.2rem; list-style: disc; }
  .legal__body li { margin-bottom: 0.5rem; }
  .legal__body strong { color: var(--ink); }
  .legal__updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 2.5rem; }
  
  /* ===================================================================
     STAGED REVEAL CHOREOGRAPHY
     =================================================================== */
  [data-reveal] { opacity: 0; transform: translateY(32px); filter: blur(8px); }
  .reveal-ready [data-reveal] {
    transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease);
    transition-delay: var(--rd, 0s);
  }
  [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
  [data-reveal-delay="1"] { --rd: 0.1s; }
  [data-reveal-delay="2"] { --rd: 0.22s; }
  [data-reveal-delay="3"] { --rd: 0.34s; }
  [data-reveal-delay="4"] { --rd: 0.46s; }
  [data-reveal-delay="5"] { --rd: 0.58s; }
  
  /* Line-by-line heading reveal (set up by JS via SplitType or manual markup) */
  .split-line, .reveal-line { display: block; overflow: hidden; }
  .split-line__inner, .reveal-line .line-inner { display: block; transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: var(--ld, 0s); }
  .is-in .split-line__inner, .reveal-lines.is-in .split-line__inner,
  .is-in .reveal-line .line-inner { transform: translateY(0); }
  .reveal-lines .split-line:nth-child(1) .split-line__inner { transition-delay: 0.05s; }
  .reveal-lines .split-line:nth-child(2) .split-line__inner { transition-delay: 0.18s; }
  .reveal-lines .split-line:nth-child(3) .split-line__inner { transition-delay: 0.31s; }
  .reveal-lines .split-line:nth-child(4) .split-line__inner { transition-delay: 0.44s; }
  
  /* JS-driven word/line reveal (SplitType) */
  .st-line { overflow: hidden; }
  .reveal-word { display: inline-block; will-change: transform, opacity; }
  
  /* Curtain intro */
  .curtain {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--teal-950);
    display: grid; place-items: center;
    transition: clip-path 0.9s var(--ease) 0.15s;
    clip-path: inset(0 0 0 0);
  }
  body.loaded .curtain { clip-path: inset(0 0 100% 0); pointer-events: none; }
  .curtain__logo { font-family: var(--font-display); color: #fff; font-size: 1.5rem; letter-spacing: 0.06em; opacity: 0.95; display: flex; align-items: center; gap: 0.6rem; }
  .curtain__logo span { color: #5be3b0; }
  .curtain__bar { width: 0; height: 2px; background: var(--green); margin-top: 1rem; animation: barLoad 1.1s var(--ease) forwards; }
  @keyframes barLoad { to { width: 180px; } }
  
  /* Scroll progress */
  .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--green), var(--green-deep)); z-index: 101; }
  
  /* Utilities */
  .text-center { text-align: center; }
  .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
  .mb-0 { margin-bottom: 0; }
  .maxw-sm { max-width: 600px; }
  .divider { height: 1px; background: var(--line); border: 0; margin: 0; }
  .pill-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  
  /* ===================================================================
     GREEN HERO — only the hero is deep-teal; the rest of the page is white.
     =================================================================== */
  .hero--green {
    background:
      radial-gradient(60% 60% at 82% -10%, rgba(123, 231, 192, 0.18), transparent 60%),
      radial-gradient(55% 50% at 6% 8%, rgba(31, 74, 71, 0.55), transparent 60%),
      linear-gradient(168deg, #0e2624, #132f2d 55%, #0e2624);
    color: rgba(255, 255, 255, 0.74);
    border-radius: 0 0 34px 34px;
  }
  /* Hero background video + green tint overlay (text stays readable) */
  .hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Isolate the video on its own GPU layer so it doesn't repaint siblings. */
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Lighter tint — video shows through more. */
    background:
      radial-gradient(62% 70% at 84% -12%, rgba(123, 231, 192, 0.18), transparent 60%),
      radial-gradient(75% 85% at 10% 115%, rgba(14, 38, 36, 0.6), transparent 62%),
      linear-gradient(168deg, rgba(14, 38, 36, 0.52), rgba(19, 47, 45, 0.34) 50%, rgba(11, 31, 29, 0.66));
    /* Tint wipes down over the video on load. */
    animation: overlayWipe 1.5s var(--ease) 0.3s both;
  }
  @keyframes overlayWipe {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0 0 0 0); }
  }
  
  /* "Горошок" — animated halftone dot screen, fading toward the right so the
     video stays clean there and the text side gets texture + contrast. */
  .hero__dots {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: radial-gradient(rgba(9, 28, 26, 0.55) 1.5px, transparent 1.7px);
    background-size: 11px 11px;
    -webkit-mask-image: linear-gradient(102deg, #000 26%, rgba(0, 0, 0, 0.55) 50%, transparent 78%);
            mask-image: linear-gradient(102deg, #000 26%, rgba(0, 0, 0, 0.55) 50%, transparent 78%);
    opacity: 0;
    transform: scale(1.35);
    animation: dotsIn 1.4s var(--ease) 0.55s both;
  }
  @keyframes dotsIn {
    from { opacity: 0; transform: scale(1.35); }
    to { opacity: 1; transform: scale(1); }
  }
  .hero--video .hero__inner { position: relative; z-index: 2; }
  /* Subtle top scrim — darker at the very top, fading to transparent — so the
     header reads cleanly over the lighter video. */
  .hero--video::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 240px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 24, 22, 0.6), rgba(8, 24, 22, 0.25) 45%, transparent);
  }
  /* Hero background video plays on mobile too (same as the full-size site). */
  
  .hero--green .display,
  .hero--green h1 { color: #fff; }
  .hero--green .hero__sub { color: rgba(255, 255, 255, 0.74); }
  .hero--green .hero__title .accent-text { color: #7be7c0; }
  .hero--green .eyebrow { color: #7be7c0; }
  .hero--green .eyebrow::before { background: #7be7c0; }
  .hero--green .hero__meta { border-top-color: rgba(255, 255, 255, 0.14); }
  .hero--green .hero__stat .num { color: #fff; }
  .hero--green .hero__stat .num span { color: #7be7c0; }
  .hero--green .hero__stat .lbl { color: rgba(255, 255, 255, 0.52); }
  .hero--green .hero__orb--1 { background: radial-gradient(circle, rgba(123, 231, 192, 0.22), transparent 68%); opacity: 0.7; }
  .hero--green .hero__orb--2 { background: radial-gradient(circle, rgba(123, 231, 192, 0.1), transparent 70%); }
  /* white buttons inside the green hero (old-site style) */
  .hero--green .btn { --bg: #fff; --fg: #132f2d; }
  .hero--green .btn::after { background: #7be7c0; }
  .hero--green .btn:hover { color: #132f2d; box-shadow: 0 18px 44px -20px rgba(123, 231, 192, 0.4); }
  .hero--green .btn--ghost { --bg: transparent; --fg: #fff; border-color: rgba(255, 255, 255, 0.28); }
  .hero--green .btn--ghost::after { background: #fff; }
  .hero--green .btn--ghost:hover { color: #132f2d; border-color: transparent; }
  
  /* Inner-page heroes get the same deep-teal treatment as the Home hero. */
  .page-hero {
    background:
      radial-gradient(60% 70% at 84% -12%, rgba(123, 231, 192, 0.18), transparent 60%),
      radial-gradient(55% 60% at 4% 6%, rgba(31, 74, 71, 0.5), transparent 60%),
      linear-gradient(166deg, #0e2624, #132f2d 58%, #0e2624);
    color: rgba(255, 255, 255, 0.74);
    border-radius: 0 0 34px 34px;
  }
  .page-hero .breadcrumb { color: rgba(255, 255, 255, 0.6); }
  .page-hero .breadcrumb a:hover { color: #fff; }
  .page-hero .breadcrumb span { color: rgba(255, 255, 255, 0.38); }
  .page-hero .eyebrow { color: #7be7c0; }
  .page-hero .eyebrow::before, .page-hero .eyebrow::after { background: #7be7c0; }
  .page-hero .page-hero__title { color: #fff; }
  .page-hero .page-hero__sub { color: rgba(255, 255, 255, 0.74); }
  .page-hero .lead { color: rgba(255, 255, 255, 0.74); }
  .page-hero .hero__orb--1 { background: radial-gradient(circle, rgba(123, 231, 192, 0.2), transparent 68%); opacity: 0.7; }
  /* Division-detail hero visual becomes a translucent panel */
  .page-hero .dd-hero__visual {
    display: none;
  }
  /* Drop the blur from this panel's reveal: over the busy hero background the
     dark frosted glass smears outward into an ugly halo as it loads.
     Keep the clean fade + slide-up instead. */
  .page-hero .dd-hero__visual[data-reveal] { filter: none; }
  .page-hero .dd-hero__visual svg { color: #7be7c0; }
  /* White buttons + links inside the green hero */
  .page-hero .btn { --bg: #fff; --fg: #132f2d; }
  .page-hero .btn::after { background: #7be7c0; }
  .page-hero .btn:hover { color: #132f2d; box-shadow: 0 18px 44px -20px rgba(123, 231, 192, 0.4); }
  .page-hero .btn--ghost { --bg: transparent; --fg: #fff; border-color: rgba(255, 255, 255, 0.28); }
  .page-hero .btn--ghost::after { background: #fff; }
  .page-hero .btn--ghost:hover { color: #132f2d; border-color: transparent; }
  .page-hero .link-underline { color: #fff; }
  .page-hero .link-underline::after { background: #7be7c0; }
  
  /* Background video in a page hero (per-division) */
  .page-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .page-hero--video .page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(60% 70% at 84% -12%, rgba(123, 231, 192, 0.16), transparent 58%),
      radial-gradient(72% 80% at 10% 112%, rgba(14, 38, 36, 0.5), transparent 62%),
      linear-gradient(168deg, rgba(14, 38, 36, 0.58), rgba(19, 47, 45, 0.4) 50%, rgba(11, 31, 29, 0.68));
  }
  .page-hero--video::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 220px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 24, 22, 0.45), rgba(8, 24, 22, 0.14) 50%, transparent);
  }
  .page-hero--video .container { position: relative; z-index: 2; }
  /* Page-hero video plays on mobile too (same as the full-size site). */
  
  /* Header sitting over the green hero → light content + transparent bar.
     Once scrolled past the hero, the normal white header takes over. */
  /* At the very top of a dark hero — fully transparent. */
  body.nav-over-hero .site-header:not(.is-scrolled) {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  /* While scrolling over the dark hero — frosted translucent glass. */
  body.nav-over-hero .site-header.is-scrolled {
    background: rgba(11, 31, 29, 0.55);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 44px -32px rgba(0, 0, 0, 0.65);
  }
  body.nav-over-hero .brand__logo { display: none; }
  body.nav-over-hero .brand__logo--light { display: block; height: 78px; }
  @media (max-width: 560px) { body.nav-over-hero .brand__logo--light { height: 60px; } }
  body.nav-over-hero .nav__link { color: rgba(255, 255, 255, 0.74); }
  body.nav-over-hero .nav__link:hover,
  body.nav-over-hero .nav__link.is-active { color: #fff; }
  /* Over any hero the menu icon is white. (No filter on the toggle: a drop-shadow
     filter on the parent made its thin absolutely-positioned <span> bars vanish in
     Chrome — and it's unneeded now the mobile header is a solid dark bar.) */
  body.nav-over-hero .nav__toggle span { background: #fff !important; }
  body.nav-over-hero .nav__actions .btn { --bg: #fff; --fg: #132f2d; }
  body.nav-over-hero .nav__actions .btn::after { background: #7be7c0; }
  body.nav-over-hero .nav__actions .btn:hover { color: #132f2d; }
  
  /* ===================================================================
     DARK-GREEN PAGE THEME (Home) — matches the original site:
     deep-teal sections, mint accents, white buttons.
     Applied via <body class="theme-dark">.
     =================================================================== */
  body.theme-dark {
    --bg: #132f2d;
    --bg-soft: #102826;
    --bg-mint: #18403c;
    --card: rgba(255, 255, 255, 0.045);
    --card-soft: rgba(255, 255, 255, 0.03);
    --ink: #ffffff;
    --body: rgba(255, 255, 255, 0.74);
    --muted: rgba(255, 255, 255, 0.52);
    --mist: rgba(255, 255, 255, 0.74);
    --faint: rgba(255, 255, 255, 0.52);
    --line: rgba(255, 255, 255, 0.13);
    --line-soft: rgba(255, 255, 255, 0.07);
    --hairline: rgba(255, 255, 255, 0.13);
    --hairline-soft: rgba(255, 255, 255, 0.07);
    --surface: rgba(255, 255, 255, 0.04);
    --surface-2: rgba(255, 255, 255, 0.06);
    /* mint accent for text / icons (buttons go white, below) */
    --green: #7be7c0;
    --green-deep: #4fd6a8;
    --green-700: #5fdcb0;
    --green-soft: rgba(123, 231, 192, 0.12);
    --green-soft-2: rgba(123, 231, 192, 0.24);
    --green-glow: rgba(123, 231, 192, 0.35);
    --accent: #7be7c0;
    --shadow-sm: 0 12px 30px -20px rgba(0, 0, 0, 0.55);
    --shadow-md: 0 28px 60px -32px rgba(0, 0, 0, 0.65);
    --shadow-green: 0 18px 44px -20px rgba(123, 231, 192, 0.35);
    color: var(--body);
  }
  body.theme-dark::before {
    background:
      radial-gradient(60% 50% at 82% -8%, rgba(123, 231, 192, 0.16), transparent 60%),
      radial-gradient(55% 45% at 4% 10%, rgba(31, 74, 71, 0.6), transparent 60%),
      radial-gradient(55% 55% at 50% 118%, rgba(123, 231, 192, 0.08), transparent 65%),
      linear-gradient(180deg, #0e2624, #132f2d 45%, #0e2624);
  }
  body.theme-dark::after { mix-blend-mode: overlay; opacity: 0.45; }
  
  /* Buttons → white (old-site style) */
  body.theme-dark .btn { --bg: #ffffff; --fg: #132f2d; }
  body.theme-dark .btn::after { background: var(--green); }
  body.theme-dark .btn:hover { color: #132f2d; box-shadow: var(--shadow-green); }
  body.theme-dark .btn--ghost { --bg: transparent; --fg: #ffffff; border-color: rgba(255, 255, 255, 0.28); }
  body.theme-dark .btn--ghost::after { background: #ffffff; }
  body.theme-dark .btn--ghost:hover { color: #132f2d; border-color: transparent; }
  
  /* Header on a dark page */
  body.theme-dark .site-header.is-scrolled {
    background: rgba(14, 38, 36, 0.78);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px -28px rgba(0, 0, 0, 0.7);
  }
  body.theme-dark .site-header .brand__logo { display: none; }
  body.theme-dark .site-header .brand__logo--light { display: block; height: 38px; }
  body.theme-dark .nav__link { color: rgba(255, 255, 255, 0.72); }
  body.theme-dark .nav__link:hover, body.theme-dark .nav__link.is-active { color: #fff; }
  
  /* Dropdown on a dark page */
  body.theme-dark .nav__dropdown { background: rgba(13, 35, 33, 0.96); border-color: rgba(255, 255, 255, 0.12); }
  body.theme-dark .dd-item:hover { background: rgba(255, 255, 255, 0.05); }
  body.theme-dark .dd-item.is-active { background: rgba(255, 255, 255, 0.05); }
  
  /* Marquee divider tone */
  body.theme-dark .marquee { background: rgba(255, 255, 255, 0.02); }
  
  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    [data-reveal] { opacity: 1; transform: none; filter: none; }
    .split-line__inner, .reveal-line .line-inner { transform: none; }
  }