/* Self-hosted fonts (PERF-02/07) — latin woff2, font-display:swap, no third-party origin. */
    @font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/inter-300.woff2') format('woff2');}
    @font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2');}
    @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:300 600;font-display:swap;src:url('/fonts/source-serif-4-300.woff2') format('woff2');}
    /* Metric-matched Georgia fallback so the LCP serif headline swaps with ~zero layout shift. */
    @font-face{font-family:'Source Serif Fallback';src:local('Georgia');size-adjust:97%;ascent-override:95%;descent-override:25%;line-gap-override:0%;}

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

    :root {
      /* --- FONT STACKS --- */
      --font-serif: "Source Serif 4", "Source Serif Fallback", Georgia, serif;
      --font-sans: "Inter", -apple-system, sans-serif;
      /* Data-voice token retired to Inter — no monospace anywhere on the site (per brand direction 2026-07). */
      --font-mono: "Inter", -apple-system, sans-serif;

      /* --- BRAND PALETTE — 70/20/8/2 usage ratio --- */
      --graphite: #1A101F;     /* 70% — Primary dark. Type, backgrounds, render environments */
      --navy: #1A101F;         /* Alias (compat) */
      --quartz: #F4F1EC;       /* 70% — Warm off-white. The default paper. Never pure white */
      --slate: #5A5F63;        /* 20% — Secondary type, rule lines, cartographic strokes */
      --basalt: #2C3338;       /* 8% — Dark secondary panels */
      --vellum: #E8E2D5;       /* 8% — Warm light, alternating sections */
      --graticule: #C8C2B4;    /* 8% — Hairline rules, muted text, map grids */
      --ore: #B8823A;          /* ≤2% — Restrained accent. Earns its appearances */
      --ore-text: #815A20;     /* Deepened Ore for SMALL gold text only — AA on Quartz (5.5), Vellum (4.8), white (6.2). --ore stays for large/decorative */
      --moss: #5F7052;         /* Muted sage moss. Land / active-ground / present-state. Subordinate to --ore. */
      --moss-text: #4C5B41;    /* Deepened moss for SMALL sage text on Quartz — ~6.8:1 (AA). */
      --moss-rule: rgba(95,112,82,0.14); /* Sage hairlines / dividers — non-text only. */
      --sage-surface: color-mix(in oklab, var(--quartz) 92%, var(--moss)); /* 8% land bias — mineral paper, not "green". */

      /* --- SEMANTIC ALIASES --- */
      --body: #5A5F63;
      --muted: #6E685C;        /* Caption/legal/footer text — passes WCAG AA 4.5:1 on Quartz #F4F1EC */
      --muted-rule: #C8C2B4;   /* Original graticule — use for borders/rules only, not text */
      --border: rgba(26,16,31,0.08);
      --surface: #FBFAF7;      /* Warm near-white for cards/elevated surfaces. Never pure #FFFFFF */
      --warm-surface: #E8E2D5;
      --white: #FBFAF7;        /* Alias for --surface — kept for compat, never pure white */
      --on-dark: #F7F4EF;      /* Warm Quartz-tinted text on dark (slate/basalt) surfaces */

      /* --- ELEVATION --- */
      --shadow-card: rgba(26,16,31,0.04) 0px 4px 18px, rgba(26,16,31,0.027) 0px 2px 8px, rgba(26,16,31,0.02) 0px 0.8px 3px, rgba(26,16,31,0.01) 0px 0.2px 1px;
      --shadow-deep: rgba(26,16,31,0.01) 0px 1px 3px, rgba(26,16,31,0.02) 0px 3px 7px, rgba(26,16,31,0.02) 0px 7px 15px, rgba(26,16,31,0.04) 0px 14px 28px, rgba(26,16,31,0.05) 0px 23px 52px;

      /* --- SPACING SCALE (4pt) --- */
      --space-xs:  4px;
      --space-sm:  8px;
      --space-md:  16px;
      --space-lg:  24px;
      --space-xl:  32px;
      --space-2xl: 48px;
      --space-3xl: 80px;

      /* --- MOTION --- */
      --ease-out-quart: cubic-bezier(.2,.8,.2,1);
      --ease-out-soft:  cubic-bezier(.33,1,.68,1);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-sans);
      font-size: 16px;
      line-height: 1.55;
      color: var(--graphite);
      background: var(--quartz);
      -webkit-font-smoothing: antialiased;
    }

    /* --- REDUCED MOTION ---
       Global guard: neutralize all animation/transition and smooth-scroll
       for users who ask for less motion. The !important duration overrides
       win regardless of source order, so any later (correctly-gated)
       keyframes still function for users who allow motion. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      html { scroll-behavior: auto; }
      /* Stop the infinite logo marquee from looping forever */
      .logo-scroll-track { animation: none !important; }
    }

    /* --- ACCESSIBILITY --- */
    .skip-link {
      position: absolute;
      top: -100px;
      left: 16px;
      background: var(--graphite);
      color: var(--surface);
      padding: 12px 24px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      z-index: 999;
      text-decoration: none;
      transition: top 0.15s;
    }
    .skip-link:focus { top: 16px; }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid var(--ore-text);
      outline-offset: 2px;
    }

    /* --- UTILITY CLASSES --- */
    .body-text {
      font-size: 15px;
      color: var(--body);
      line-height: 175%;
      margin-bottom: 24px;
    }
    .why-readmore {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 8px;
      font-family: var(--font-sans);
      font-size: 14px; font-weight: 500;
      color: var(--graphite); text-decoration: none;
      border-bottom: 1px solid var(--border);
      padding-bottom: 3px;
      transition: border-color 0.2s var(--ease-out-soft);
    }
    .why-readmore:hover { border-color: var(--moss); }
    .why-readmore span { transition: transform 0.2s var(--ease-out-soft); }
    .why-readmore:hover span { transform: translateX(3px); }

    /* --- Investor-map cross-page sticky rail (map detail pages) --- */
    .maps-page { display: grid; grid-template-columns: 188px 1fr; gap: 52px; align-items: start; }
    .maps-page-main { min-width: 0; }
    .maps-rail { padding-top: 72px; }
    .maps-page .maps-rail { position: sticky; top: 96px; }
    .maps-showcase-2col { display: grid; grid-template-columns: 188px 1fr; gap: 52px; align-items: start; }
    .maps-showcase-2col .maps-rail { padding-top: 6px; position: sticky; top: 96px; }
    @media (max-width: 900px) { .maps-showcase-2col { grid-template-columns: 1fr; gap: 0; } .maps-showcase-2col .maps-rail { position: static; } }
    .maps-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
    .maps-rail-link { display: flex; align-items: baseline; padding: 8px 0; text-decoration: none; color: var(--slate); transition: color 0.2s var(--ease-out-soft); }
    .maps-rail-link:hover, .maps-rail-link.is-active { color: var(--graphite); }
    .maps-rail-link.is-active { font-weight: 600; }
    .maps-rail-text { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.35; white-space: nowrap; }
    @media (max-width: 900px) {
      .maps-page { grid-template-columns: 1fr; gap: 0; }
      .maps-rail { position: static; padding-top: 40px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
      .maps-rail-list { flex-flow: row wrap; gap: 4px 20px; margin-bottom: 10px; }
      /* Homepage tab rail: six labels wrapped 2/1/2/1 on a phone. One scrollable
         row instead — snap per tab, no scrollbar, a soft fade on the right edge
         so the overflow is discoverable. The active tab is scrolled into view by
         the rotator script. Bleeds to the viewport edge on the right. */
      .maps-rail--tabs { padding-top: 12px; margin-bottom: 18px; padding-bottom: 0; border-bottom: 0; position: relative; min-width: 0; max-width: 100%; }
      .maps-rail--tabs .maps-rail-list {
        flex-flow: row nowrap; gap: 0 22px; margin: 0; padding: 0 0 12px; max-width: 100%;
        overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; border-bottom: 1px solid var(--border);
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
                mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
      }
      .maps-rail--tabs .maps-rail-list::-webkit-scrollbar { display: none; }
      .maps-rail--tabs li { flex: 0 0 auto; scroll-snap-align: start; }
      .maps-rail--tabs li:last-child { padding-right: 40px; } /* room so the last tab clears the fade */
    }
    .body-text:last-child { margin-bottom: 0; }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    /* --- NAV --- */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--quartz);
    }

    .nav-inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 80px;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--navy);
    }

    .nav-logo-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav-logo-icon svg {
      width: 30px;
      height: 30px;
    }

    .nav-logo-text {
      font-family: var(--font-sans);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: lowercase;
      color: var(--graphite);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
    }

    .nav-links a {
      position: relative;
      font-size: 14px;
      font-weight: 500;
      color: var(--navy);
      text-decoration: none;
      padding-bottom: 3px;
      transition: color 0.2s var(--ease-out-soft);
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: 0;
      height: 1px;
      background: var(--ore);
      transition: right 0.32s var(--ease-out-quart);
    }
    .nav-links a:hover { color: var(--graphite); }
    .nav-links a:hover::after { right: 0; }
    /* Current page: the hover underline held open (H1 visibility-of-status) */
    .nav-links a[aria-current="page"] { color: var(--graphite); }
    .nav-links a[aria-current="page"]::after { right: 0; }
    .nav-mobile-links > li > a[aria-current="page"] { color: var(--graphite); font-weight: 600; }

    /* Mobile hamburger */
    .nav-hamburger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      color: var(--navy);
    }

    .nav-hamburger svg { width: 24px; height: 24px; }

    .nav-mobile-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      z-index: 150;
    }

    .nav-mobile-overlay.is-open { display: block; }

    .nav-mobile-panel {
      position: fixed;
      top: 0;
      right: 0;
      width: 300px;
      height: 100%;
      background: var(--white);
      z-index: 200;
      padding: 24px;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      overflow-y: auto;
    }

    .nav-mobile-panel.is-open { transform: translateX(0); }

    .nav-mobile-close {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 32px;
    }

    .nav-mobile-close button {
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      color: var(--navy);
    }

    .nav-mobile-close button svg { width: 24px; height: 24px; }

    .nav-mobile-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .nav-mobile-links li a {
      display: block;
      padding: 14px 0;
      font-size: 16px;
      font-weight: 500;
      color: var(--navy);
      text-decoration: none;
      border-bottom: 1px solid var(--border);
    }

    .nav-mobile-links li:first-child a { border-top: 1px solid var(--border); }

    .nav-mobile-links li a:hover { color: var(--graphite); }

    .nav-mobile-cta {
      display: block;
      margin-top: 24px;
      background: var(--navy);
      color: var(--white);
      text-align: center;
      padding: 14px 24px;
      border-radius: 6px;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
    }

    .nav-cta {
      background: var(--graphite);
      color: var(--white) !important;
      padding: 10px 24px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      transition: background 0.2s ease;
    }

    .nav-cta:hover {
      opacity: 1 !important;
      background: var(--basalt);
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 32px;
    }

    /* "Book a discovery call" button — editorial outline + arrow (variation 1) */
    .btn-discovery {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      color: var(--graphite);
      font-family: var(--font-sans);
      font-size: 15px;
      font-weight: 600;
      padding: 13px 26px;
      border: 1px solid var(--slate);
      border-radius: 4px;
      text-decoration: none;
      transition: border-color 0.25s var(--ease-out-quart), color 0.25s var(--ease-out-quart);
    }
    .btn-discovery .arw {
      transition: transform 0.25s var(--ease-out-quart), color 0.25s var(--ease-out-quart);
    }
    .btn-discovery:hover { border-color: var(--ore); }
    .btn-discovery:hover .arw { transform: translateX(4px); color: var(--ore); }

    /* --- QA: keep the desktop nav on one line, collapse to hamburger before it crowds --- */
    .nav-logo-text,
    .nav .nav-links a,
    .nav .mega-menu-trigger,
    .nav-right .btn-discovery { white-space: nowrap; }
    .nav-right { gap: 20px; }
    .nav .nav-links { gap: 16px; }
    .nav-right .btn-discovery { padding: 11px 20px; }
    @media (max-width: 1160px) {
      .nav .nav-links { display: none; }
      /* Keep the main CTA visible beside the hamburger, as a compact "Book a call" */
      .nav .nav-right .btn-discovery { padding: 9px 14px; font-size: 12.5px; }
      .nav .nav-cta-long { display: none; }
      .nav .nav-right { margin-left: auto; margin-right: 10px; }
      .nav .nav-hamburger { display: block; }
    }
    /* Small phones: logo, compact CTA and hamburger must share ~375px */
    @media (max-width: 480px) {
      .nav .nav-logo-text { font-size: 13.5px; letter-spacing: 0.05em; }
      .nav .nav-right .btn-discovery { padding: 8px 11px; font-size: 12px; }
      .nav .nav-right .btn-discovery .arw { display: none; }
      .nav .nav-right { margin-right: 6px; }
    }

    /* On dark surfaces (footer, dark CTA bands) */
    .btn-discovery--on-dark { border-color: rgba(244,241,236,0.38); color: var(--quartz); }
    .btn-discovery--on-dark:hover { border-color: var(--ore); }
    .btn-discovery--on-dark:hover .arw { color: var(--ore); }

    /* Compact in the header */
    .nav-right .btn-discovery { font-size: 14px; padding: 9px 20px; }

    .nav-strip {
      height: 1px;
      background: var(--border);
    }

    /* --- MEGA MENU --- */
    .mega-menu-wrapper {
      position: relative;
    }

    .mega-menu-trigger {
      font-size: 14px;
      font-weight: 500;
      color: var(--navy);
      text-decoration: none;
      cursor: pointer;
      background: none;
      border: none;
      font-family: inherit;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: opacity 0.15s;
    }

    .mega-menu-trigger:hover { opacity: 0.7; }

    .mega-menu-trigger svg {
      width: 10px;
      height: 10px;
      transition: transform 0.2s ease;
    }

    .mega-menu-wrapper:hover .mega-menu-trigger svg {
      transform: rotate(180deg);
    }

    .mega-menu {
      position: absolute;
      top: 100%;
      left: 0;
      padding-top: 18px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      z-index: 200;
    }

    .mega-menu-wrapper:hover .mega-menu,
    .mega-menu-wrapper:focus-within .mega-menu {
      opacity: 1;
      visibility: visible;
    }

    .mega-menu-arrow {
      width: 16px;
      height: 8px;
      margin: 0 0 -1px 36px;
      position: relative;
      z-index: 2;
    }

    .mega-menu-arrow::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-bottom: 9px solid rgba(0,0,0,0.08);
    }

    .mega-menu-arrow::after {
      content: '';
      position: absolute;
      top: 1px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid var(--surface);
    }

    .mega-menu-panel {
      width: 480px;
      max-width: calc(100vw - 80px);
      background: var(--surface);
      border-radius: 16px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-deep);
      display: flex;
      padding: 20px 24px;
      gap: 20px;
    }

    .mega-menu-sidebar {
      width: 160px;
      flex-shrink: 0;
      border-right: 1px solid rgba(0,0,0,0.06);
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .mega-menu-tab {
      display: block;
      padding: 10px 0;
      text-decoration: none;
      color: var(--muted);
      transition: color 0.2s var(--ease-out-soft);
    }

    .mega-menu-tab:hover,
    .mega-menu-tab.is-active {
      color: var(--graphite);
    }
    .mega-menu-tab.is-active .mega-menu-tab-title {
      font-weight: 500;
    }

    .mega-menu-tab-title {
      font-size: 14px;
      font-weight: 400;
      color: var(--navy);
    }

    .mega-menu-content {
      flex: 1;
      min-width: 0;
    }

    .mega-menu-content-header {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 14px;
    }

    .mega-menu-cards {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: 16px;
    }

    .mega-menu-card {
      display: block;
      padding: 10px 0;
      border: 0;
      background: transparent;
      text-decoration: none;
      color: var(--muted);
      transition: color 0.2s var(--ease-out-soft);
    }

    .mega-menu-card:hover { color: var(--graphite); }

    .mega-menu-card-title {
      font-size: 14px;
      font-weight: 400;
      color: inherit;
    }

    .mega-menu-card-price {
      font-size: 11px;
      font-weight: 600;
      color: var(--slate);
      margin-top: 6px;
    }

    .mega-menu-footer-link {
      font-size: 13px;
      font-weight: 500;
      color: var(--navy);
      text-decoration: none;
      transition: opacity 0.15s;
    }

    .mega-menu-footer-link:hover { opacity: 0.7; }

    /* Tab content panels — show/hide via JS */
    .mega-menu-tab-panel { display: none; }
    .mega-menu-tab-panel.is-active { display: block; }

    /* --- PAGE FRAME --- */
    .page {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 80px;
    }

    .divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }


    /* --- HERO --- */
    .hero {
      padding: 100px 0 80px;
      position: relative;
      overflow: hidden;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      min-height: 620px;
    }

    /* Secondary pages: tighter hero without globe — stays inside .page container */
    .hero--page {
      padding: 72px 0 48px;
      min-height: 0;
      overflow: visible;
      width: auto;
      margin-left: 0;
    }
    .hero--page .hero-headline {
      font-size: 48px;
      max-width: 760px;
    }

    /* Staggered reveal on page load — refined, not flashy */
    @media (prefers-reduced-motion: no-preference) {
      .hero .section-label,
      .hero > .hero-headline,
      .hero > .hero-body,
      .hero > .hero-buttons,
      .hero-content > .hero-headline,
      .hero-content > .hero-body,
      .hero-content > .hero-buttons {
        opacity: 0;
        transform: translateY(6px);
        animation: hero-rise 0.72s var(--ease-out-quart) forwards;
      }
      .hero .section-label              { animation-delay: 0.04s; }
      .hero > .hero-headline,
      .hero-content > .hero-headline    { animation-delay: 0.12s; }
      .hero > .hero-body,
      .hero-content > .hero-body        { animation-delay: 0.24s; }
      .hero > .hero-buttons,
      .hero-content > .hero-buttons     { animation-delay: 0.36s; }
    }
    @keyframes hero-rise {
      to { opacity: 1; transform: translateY(0); }
    }

    /* Editorial pullquote — for narrative body copy */
    .pullquote {
      font-family: var(--font-serif);
      font-size: 26px;
      font-weight: 300;
      line-height: 1.3;
      letter-spacing: -0.015em;
      color: var(--graphite);
      padding: 4px 0 4px 20px;
      margin: 8px 0 24px;
      border-left: 1px solid var(--slate);
    }
    .pullquote em { font-style: italic; color: var(--ore-text); }

    .hero-content {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 80px;
      position: relative;
      z-index: 2;
      /* Container itself doesn't capture pointer events — empty areas pass
         through to the globe behind. Only actual text blocks and buttons
         capture, so the globe stays draggable everywhere else. */
      pointer-events: none;
    }

    .hero-content > .hero-label,
    .hero-content > .hero-headline,
    .hero-content > .hero-body,
    .hero-content > .hero-buttons > a,
    .hero-content > .hero-buttons > button {
      pointer-events: auto;
    }

    .hero-globe {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 0;
    }

    /* Canvas captures pointer events even though its container does not,
       so the mouse-repulsion effect fires when hovering the globe. */
    .hero-globe-canvas {
      pointer-events: auto;
    }

    /* --- Globe pin (Victoria BC HQ) --- */
    .hero-globe-pin {
      position: absolute;
      top: 0;
      left: 0;
      width: 8.4px;
      height: 8.4px;
      margin: -4.2px 0 0 -4.2px;
      color: var(--moss);
      text-decoration: none;
      cursor: pointer;
      pointer-events: auto;
      will-change: transform, opacity;
      transform-origin: center center;
      transition: opacity 220ms ease-out;
      z-index: 3;
    }
    .hero-globe-pin.is-hidden {
      opacity: 0;
      pointer-events: none;
    }
    .hero-globe-pin--ore { color: var(--ore); }
    .hero-globe-pin-dot {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: currentColor;
      transform: scale(var(--pin-scale, 1));
      transform-origin: center center;
      /* No CSS transition — hero-globe.js eases --pin-scale per frame (SCALE_LERP);
         a CSS transition here would double-smooth and feel rubbery. */
    }
    /* Tooltip scale grows at 25% of the pin's scale so it stays readable
       rather than ballooning to 4× when the dot is at peak magnetism. */
    .hero-globe-pin-tooltip {
      position: absolute;
      bottom: calc(100% + 10px + max(0px, (var(--pin-scale, 1) - 1) * 6px));
      left: 50%;
      white-space: nowrap;
      background: var(--graphite);
      color: var(--quartz);
      padding: 3px 7px;
      border-radius: 3px;
      font-family: var(--font-sans);
      font-size: 9px;
      font-weight: 500;
      letter-spacing: 0.02em;
      opacity: 0;
      transform: translate(-50%, 4px) scale(calc(0.7 * (1 + (var(--pin-scale, 1) - 1) * 0.25)));
      transform-origin: bottom center;
      transition: opacity 150ms cubic-bezier(.2,.8,.2,1),
                  transform 200ms cubic-bezier(.2,.8,.2,1),
                  bottom 80ms linear;
      pointer-events: none;
    }
    .hero-globe-pin-tooltip::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 3px solid transparent;
      border-top-color: var(--graphite);
    }
    .hero-globe-pin.is-touched .hero-globe-pin-tooltip {
      opacity: 1;
      transform: translate(-50%, 0) scale(calc(1 + (var(--pin-scale, 1) - 1) * 0.25));
    }

    .hero-globe {
      /* Locked to the right edge; the canvas bleeds a quarter of itself off-screen.
         .hero is full-bleed with overflow:hidden, so the clip is clean (no h-scroll). */
      padding-right: 0;
    }

    .hero-globe-canvas {
      display: block;
      /* Always square (aspect-ratio) so the square WebGL buffer is never stretched
         into an ellipse on narrow screens — width scales, height follows it. */
      width: min(720px, 58vw);
      height: auto;
      aspect-ratio: 1 / 1;
      /* Right-justified by the flex-end container, then shifted right by a quarter of
         its own width so 1/4 sits off the right edge of the screen. */
      transform: translateX(25%);
      opacity: 0;
      transition: opacity 600ms ease-out;
      /* Soften the silhouette — outer ~24% of the canvas fades into the page. */
      -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 76%, transparent 100%);
              mask-image: radial-gradient(circle at 50% 50%, #000 76%, transparent 100%);
    }

    .hero-globe-canvas.is-active {
      opacity: 1;
    }

    @media (max-width: 767px) {
      .hero-content { padding: 0 40px; }
      .hero-globe { padding-right: 20px; justify-content: center; opacity: 0.6; }
      .hero-globe-canvas {
        width: min(420px, 80vw);
        max-width: none;
        max-height: none; /* base 92vh cap would re-squash the circle in landscape */
        height: auto;
        aspect-ratio: 1 / 1;
        transform: none;
      }
    }

    /* Until the WebGL globe boots (mobile, reduced-motion, no-WebGL), pins have
       no projected position — they'd pile up as a tappable smudge at top-left. */
    .hero-globe:not(.is-live) .hero-globe-pin { display: none; }

    /* Quiet legend for the globe. Grid-aligned to the content's right edge so it
       never collides with the left-aligned hero copy, and shown only once the
       globe is live (i.e. exactly when the pins are visible) — so it hides on
       mobile / reduced-motion / no-WebGL where there are no pins. */
    .hero-globe-title {
      position: absolute;
      right: 40px;
      bottom: 40px;
      z-index: 2;
      display: inline-block;
      padding: 8px 14px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: transparent;
      text-align: right;
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--slate);
      pointer-events: none;
    }
    .hero-globe:not(.is-live) ~ .hero-globe-title { display: none; }

    /* Rotating hero word (deposit -> project -> idea -> venture): a quiet,
       institutional fade + rise, like a departure board rolling over. */
    .hero-rotate {
      display: inline-block;
      transition: opacity 0.38s var(--ease-out-soft), transform 0.38s var(--ease-out-soft);
    }
    .hero-rotate.rot-out { opacity: 0; transform: translateY(-0.22em); }
    .hero-rotate.rot-pre { opacity: 0; transform: translateY(0.22em); transition: none; }
    @media (prefers-reduced-motion: reduce) { .hero-rotate { transition: none; } }

    .hero-label {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--slate);
      margin-bottom: 24px;
    }

    .hero-headline {
      font-family: var(--font-serif);
      font-size: 64px;
      font-weight: 300;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--graphite);
      max-width: 860px;
      text-wrap: balance;
      margin-bottom: 28px;
    }
    /* The signature phrase: italic, a step bolder, Ore. #B07C35 is Ore nudged
       to 3.2:1 on Quartz — clears large-text AA where #B8823A sat at 2.96. */
    .hero-headline em {
      font-style: italic;
      font-weight: 400;
      color: #B07C35;
    }

    .hero-body {
      font-size: 15px;
      font-weight: 400;
      line-height: 165%;
      color: var(--body);
      max-width: 65ch;
      text-wrap: pretty;
      margin-bottom: 40px;
    }

    .hero-buttons {
      display: flex;
      gap: 16px;
    }

    .btn-primary {
      display: inline-block;
      background: var(--graphite);
      color: var(--white);
      font-family: var(--font-sans);
      font-size: 15px;
      font-weight: 600;
      padding: 14px 32px;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s var(--ease-out-soft),
                  transform 0.2s var(--ease-out-soft),
                  box-shadow 0.2s var(--ease-out-soft);
      will-change: transform;
    }

    .btn-primary:hover {
      background: var(--basalt);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(26,16,31,0.12),
                  0 2px 4px  rgba(26,16,31,0.06);
    }
    .btn-primary:active { transform: translateY(0); }
    /* Form-submitted success state (replaces inline style; locks the button) */
    .btn-primary.is-sent { background: #2d6a4f; pointer-events: none; transform: none; }

    .btn-secondary {
      display: inline-block;
      background: transparent;
      color: var(--navy);
      font-family: var(--font-sans);
      font-size: 15px;
      font-weight: 500;
      padding: 14px 32px;
      border-radius: 6px;
      border: 1.5px solid var(--navy);
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s var(--ease-out-soft),
                  transform 0.2s var(--ease-out-soft),
                  border-color 0.2s var(--ease-out-soft);
      will-change: transform;
    }

    .btn-secondary:hover {
      background: var(--surface);
      transform: translateY(-1px);
      border-color: var(--ore);
    }
    .btn-secondary:active { transform: translateY(0); }

    /* --- TWO-COLUMN SECTION --- */
    .section {
      padding: 80px 0;
    }

    .section-grid {
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: 60px;
    }

    .tv-chart-col { padding-top: 30px; }
    .tv-chart-col iframe { border: none !important; }

    /* --- CASE STUDIES: hero with shader ------------------------------
       Full-bleed hero that sits above page content. Reuses the slow
       topographic shader from the footer via the `.paper-shader` hook. */
    .case-hero {
      position: relative;
      width: 100vw;
      margin: 0 calc(50% - 50vw) 24px;
      padding: 72px 0 40px;
      overflow: hidden;
      isolation: isolate;
    }
    .case-hero .paper-shader {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      z-index: -1;
      pointer-events: none;
    }
    .case-hero-inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 80px;
    }
    .case-hero-headline {
      font-family: var(--font-serif);
      font-size: clamp(36px, 4.4vw, 60px);
      font-weight: 300;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--graphite);
      max-width: 30ch;
      margin: 12px 0 28px;
    }
    .case-hero-headline em {
      font-style: italic;
      color: var(--ore);
    }
    .case-hero-body {
      font-family: var(--font-sans);
      font-size: 17px;
      line-height: 1.6;
      color: var(--body);
      max-width: 54ch;
      margin: 0 0 56px;
    }

    /* KPI strip — editorial, no cards, rule-delimited */
    .case-kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin: 0;
      padding: 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .case-kpis > div {
      padding: 20px 24px 20px 0;
      border-right: 1px solid var(--border);
    }
    .case-kpis > div:last-child { border-right: 0; }
    .case-kpis dt {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
    }
    .case-kpis dd {
      font-family: var(--font-serif);
      font-size: clamp(30px, 2.6vw, 44px);
      font-weight: 300;
      line-height: 1;
      letter-spacing: -0.015em;
      color: var(--graphite);
      margin: 0;
    }

    @media (max-width: 900px) {
      .case-hero { padding: 60px 0 48px; margin-bottom: 32px; }
      .case-hero-inner { padding: 0 40px; }
      .case-kpis { grid-template-columns: 1fr 1fr; }
      .case-kpis > div:nth-child(2) { border-right: 0; }
    }
    @media (max-width: 640px) {
      .case-hero-inner { padding: 0 20px; }
      .case-kpis { grid-template-columns: 1fr; }
      .case-kpis > div { border-right: 0; border-bottom: 1px solid var(--border); }
      .case-kpis > div:last-child { border-bottom: 0; }
    }

    /* ============================================================
       CASE STUDIES — Evidence Wall (Design B, ruled)   [2026-07]
       Flagship media panel + shared trajectory-number system.
       ============================================================ */

    /* Shared trajectory number (used by flagship + wall) --------- */
    .cs-name {
      font-family: var(--font-serif);
      font-size: 24px;
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: var(--graphite);
      margin: 0 0 8px;
    }
    .cs-ticker {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--slate);
      margin: 0 0 14px;
    }
    .cs-ticker b { color: var(--graphite); font-weight: 700; }
    .cs-traj {
      font-family: var(--font-serif);
      line-height: 1;
      letter-spacing: -0.02em;
      margin: 0;
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 0 10px;
    }
    .cs-traj-from { font-size: 0.42em; font-weight: 400; color: var(--slate); }
    .cs-arrow    { font-size: 0.42em; font-weight: 400; color: var(--ore); }
    .cs-traj-to  { font-weight: 600; color: var(--graphite); }
    .cs-qual {
      font-family: var(--font-sans);
      font-size: 11px;
      line-height: 1.5;
      color: var(--muted);
      margin: 8px 0 0;
    }
    .cs-story {
      font-family: var(--font-sans);
      font-size: 15px;
      line-height: 1.6;
      color: var(--body);
      margin: 14px 0 0;
    }

    /* Flagship ---------------------------------------------------- */
    .cs-flagship {
      width: 100vw;
      margin: 0 calc(50% - 50vw);
      isolation: isolate;
      display: grid;
    }
    .cs-flagship-media,
    .cs-flagship-inner { grid-area: 1 / 1; }          /* stack in one cell */
    .cs-flagship-media {
      display: block;
      width: 100%;
      padding: 0;
      border: 0;
      background: var(--vellum);
      cursor: zoom-in;
    }
    .cs-flagship-media img {
      display: block;
      width: 100%;
      height: clamp(340px, 42vw, 560px);
      object-fit: cover;
    }
    .cs-flagship-inner {
      position: relative;
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 80px;
      display: flex;
      align-items: flex-end;      /* card sits at the bottom of the image */
      pointer-events: none;        /* let clicks fall through to the image… */
    }
    .cs-facts {
      pointer-events: auto;        /* …except on the card itself */
      width: min(400px, 100%);
      margin-bottom: 32px;
      background: var(--surface);
      padding: 28px 30px;
      box-shadow: var(--shadow-card);
    }
    .cs-facts .cs-traj { font-size: 64px; }           /* flagship ceiling */
    .cs-facts .btn-discovery { margin-top: 18px; }

    /* Evidence wall (2×2, ruled) ---------------------------------- */
    .cs-wall {
      width: 100vw;
      margin: 0 calc(50% - 50vw);
      border-top: 1px solid var(--border);
    }
    .cs-wall-inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 80px;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .cs-cell {
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding-bottom: 28px;
      background: transparent;
    }
    .cs-cell:nth-child(2n) { border-right: 0; }            /* no rule on the right column */
    .cs-cell:nth-last-child(-n+2) { border-bottom: 0; }   /* no rule under the last row */
    .cs-cell-media {
      display: block;
      width: 100%;
      padding: 0;
      border: 0;
      background: var(--vellum);
      cursor: zoom-in;
    }
    .cs-cell-media img {
      display: block;
      width: 100%;
      height: 190px;
      object-fit: cover;
    }
    .cs-cell-body { padding: 22px 28px 0; }
    .cs-cell .cs-traj { font-size: 44px; }                /* wall number step-down */
    .cs-services {
      font-family: var(--font-sans);
      font-size: 13px;
      line-height: 1.6;
      color: var(--slate);
      margin: 16px 0 0;
    }
    .cs-services a {
      color: var(--slate);                                /* neutral, NOT gold (Ore budget) */
      text-decoration: none;
      border-bottom: 1px solid var(--graticule);
      transition: color 0.2s var(--ease-out-soft), border-color 0.2s var(--ease-out-soft);
    }
    .cs-services a:hover { color: var(--graphite); border-color: var(--slate); }

    /* Reveal (fade-up) + CSS stagger — no JS beyond the shared observer */
    .cs-flagship, .cs-cell {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.55s var(--ease-out-soft),
                  transform 0.55s var(--ease-out-soft);
    }
    .cs-flagship.is-revealed, .cs-cell.is-revealed {
      opacity: 1;
      transform: none;
    }
    .cs-wall .cs-cell:nth-child(1).is-revealed { transition-delay: 0ms; }
    .cs-wall .cs-cell:nth-child(2).is-revealed { transition-delay: 40ms; }
    .cs-wall .cs-cell:nth-child(3).is-revealed { transition-delay: 80ms; }
    .cs-wall .cs-cell:nth-child(4).is-revealed { transition-delay: 120ms; }
    @media (prefers-reduced-motion: reduce) {
      .cs-flagship, .cs-cell {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    /* Responsive ------------------------------------------------- */
    @media (max-width: 1160px) {
      .cs-flagship-inner { padding: 0 40px; }
      .cs-wall-inner { padding: 0 40px; }
    }
    /* Flagship card stacks below its image < 900px */
    @media (max-width: 900px) {
      .cs-flagship { display: block; }
      .cs-flagship-inner {
        padding: 0 40px;
        pointer-events: auto;
      }
      .cs-facts {
        width: 100%;
        margin: -40px 0 0;   /* slight overlap, still readable */
        position: relative;
      }
      .cs-facts .cs-traj { font-size: 48px; }
    }
    /* Wall collapses to one column < 768px */
    @media (max-width: 768px) {
      .cs-wall-inner { grid-template-columns: 1fr; }
      .cs-cell { border-right: 0; }
      .cs-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
      .cs-cell:last-child { border-bottom: 0; }
    }
    @media (max-width: 640px) {
      .cs-flagship-inner, .cs-wall-inner { padding: 0 20px; }
      .cs-cell-body { padding: 20px 20px 0; }
      .cs-cell .cs-traj { font-size: 38px; }
      .cs-facts .cs-traj { font-size: 42px; }
    }

    .section-counter {
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 1px;
      color: var(--muted);
      margin-bottom: 16px;
    }

    .section-label {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--slate);
      margin-bottom: 16px;
    }

    /* Page-top eyebrow — gold mono with a leading rule (matches the Engagement masthead). */
    .hero .section-label,
    .case-hero .section-label {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.22em;
      color: var(--ore-text); /* small gold eyebrow text — AA on Quartz; rule below stays --ore (A11Y-05) */
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }
    /* In-page section eyebrow — a faint moss survey-line. The masthead
       eyebrow (below) keeps its gold rule and overrides this. */
    .section-label::before {
      content: "";
      display: inline-block;
      width: 22px;
      height: 1px;
      margin-right: 12px;
      vertical-align: middle;
      background: var(--moss);
    }
    .hero .section-label::before,
    .case-hero .section-label::before {
      content: "";
      width: 28px;
      height: 1px;
      margin-right: 0;
      background: var(--ore);
      flex: 0 0 auto;
    }

    .section-headline {
      font-family: var(--font-serif);
      font-size: 40px;
      font-weight: 300;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: var(--graphite);
    }

    /* --- SERVICES EDITORIAL (homepage What We Do) ---
       Numbered, full-width index with 4-column grid: number / name / description / arrow.
       Hairline rules between rows. Hover nudges the whole row right by 12px. */
    .services-editorial-head {
      margin-bottom: 48px;
    }
    .services-editorial-head .section-headline {
      max-width: none;
      font-size: clamp(22px, 2.9vw, 36px);
    }
    .services-editorial-list {
      list-style: none;
      border-top: 1px solid var(--border);
      padding: 0;
      margin: 0;
    }
    .services-editorial-list > li {
      border-bottom: 1px solid var(--border);
    }
    .services-editorial-row {
      display: grid;
      grid-template-columns: 72px 1.1fr 2fr 28px;
      gap: 40px;
      align-items: baseline;
      padding: 26px 0;
      text-decoration: none;
      color: var(--graphite);
      /* transform, not padding-left — compositor-only; the li carries the border */
      transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
    }
    .services-editorial-row:hover {
      transform: translateX(12px);
    }
    .services-editorial-num {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.08em;
      color: var(--muted);
    }
    .services-editorial-name {
      font-family: var(--font-serif);
      font-size: 32px;
      font-weight: 300;
      line-height: 1.1;
      letter-spacing: -0.015em;
    }
    .services-editorial-desc {
      font-size: 14px;
      line-height: 1.6;
      color: var(--body);
    }
    .services-editorial-arrow {
      font-family: var(--font-serif);
      font-size: 22px;
      color: var(--muted);
      text-align: right;
      transition: transform 0.28s cubic-bezier(.2,.8,.2,1), color 0.2s ease;
    }
    .services-editorial-row:hover .services-editorial-arrow {
      transform: translateX(6px);
      color: var(--ore);
    }
    @media (max-width: 900px) {
      .services-editorial-head {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 32px;
      }
      .services-editorial-row {
        grid-template-columns: 44px 1fr 18px;
        grid-template-areas:
          "num name arrow"
          ".   desc desc";
        gap: 10px 16px;
        padding: 20px 0;
      }
      .services-editorial-num  { grid-area: num; }
      .services-editorial-name { grid-area: name; font-size: 24px; }
      .services-editorial-desc { grid-area: desc; font-size: 13px; }
      .services-editorial-arrow{ grid-area: arrow; }
    }

    /* --- WORK PLATE (service hubs) --- */
    /* One framed deliverable per discipline — the work as evidence. Click opens
       the site-wide lightbox via [data-lightbox]. */
    .work-plate {
      display: block;
      width: 100%;
      margin: 26px 0 0;
      padding: 0;
      background: none;
      border: 0;
      cursor: zoom-in;
      text-align: left;
      font: inherit;
    }
    .work-plate img {
      display: block;
      width: 100%;
      height: auto;
      border: 1px solid var(--border);
      transition: border-color 0.2s var(--ease-out-soft);
    }
    .work-plate:hover img { border-color: var(--graticule); }
    .work-plate:focus-visible { outline: 2px solid var(--ore); outline-offset: 3px; }
    .work-plate-cap {
      display: block;
      margin-top: 9px;
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
    }

    /* --- SERVICE ROWS --- */
    .service-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 24px 0;
      border-bottom: 1px solid var(--border);
      text-decoration: none;
      color: inherit;
    }

    .service-row:first-child { border-top: 1px solid var(--border); }
    /* services.html: each row leads with the first piece from its category page
       (src/_data/serviceSamples.js). Small 4:3 plate, 1px rule, no shadow. */
    .service-row--thumb { justify-content: flex-start; align-items: center; gap: 20px; }
    .service-row--thumb > div { flex: 1 1 auto; min-width: 0; }
    .service-thumb { flex: 0 0 auto; width: 104px; aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--vellum); }
    .service-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
    .service-row--thumb .service-arrow { margin-top: 0; }
    .service-from .avail-tag { margin-left: 8px; vertical-align: 1px; }
    @media (max-width: 560px) { .service-thumb { width: 72px; } .service-row--thumb { gap: 14px; } }
    /* Nudge the children, not the row — keeps the border full-width and the
       animation compositor-only (was transition: padding-left). */
    .service-row > * { transition: transform 0.28s var(--ease-out-quart); }
    .service-row:hover > * { transform: translateX(12px); }

    .service-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 4px;
    }

    .service-desc {
      font-size: 13px;
      font-weight: 400;
      color: var(--muted);
      max-width: 560px;
      line-height: 150%;
    }

    /* Quiet starting price under a service description (services.html) */
    .service-from {
      margin-top: 8px;
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.01em;
      font-variant-numeric: tabular-nums;
      color: var(--slate);
    }

    .service-arrow {
      font-size: 18px;
      color: var(--muted);
      flex-shrink: 0;
      margin-left: 24px;
      margin-top: 4px;
      transition: transform 0.28s var(--ease-out-quart), color 0.2s ease;
    }
    .service-row:hover .service-arrow {
      /* 12px row-shift (on the parent's children) + the original 6px lead */
      transform: translateX(18px);
      color: var(--ore);
    }
    /* Non-interactive rows (nurture-crm, investor-analytics, exploration-today-ai)
       neutralised the OLD padding-left hover; cancel the transform mechanism too. */
    .service-row--static:hover > *,
    .service-row--static:hover .service-arrow { transform: none; color: var(--muted); }

    /* --- SITUATIONS (services.html): start-from-where-you-are entry cards --- */
    .situation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
    .situation-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--white, #fff); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: border-color 0.2s ease; }
    .situation-card:hover, .situation-card:focus-visible { border-color: var(--slate); }
    .situation-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--vellum); border-bottom: 1px solid var(--border); }
    .situation-media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; transition: transform 0.5s ease; }
    .situation-card:hover .situation-media img { transform: scale(1.03); }
    .situation-title { margin: 18px 20px 6px; font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: var(--graphite); }
    .situation-desc { margin: 0 20px; font-size: 13.5px; line-height: 1.55; color: var(--body); flex: 1 1 auto; }
    .situation-link { margin: 16px 20px 20px; font-size: 12.5px; font-weight: 600; color: var(--graphite); }
    .situation-card:hover .situation-link { color: var(--ore-text, #815A20); }
    @media (max-width: 1024px) { .situation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 560px) { .situation-grid { grid-template-columns: minmax(0, 1fr); } }

    /* --- WHAT WE DO: map-type grid, recent-work line, NRMP band (services.html) --- */
    .maptype-price { margin: 20px 0 14px; font-size: 13px; font-weight: 500; color: var(--slate); font-variant-numeric: tabular-nums; }
    .maptype-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .maptype { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
    .maptype-media { display: block; aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--vellum); transition: border-color 0.2s ease; }
    .maptype-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.5s ease; }
    .maptype:hover .maptype-media, .maptype:focus-visible .maptype-media { border-color: var(--slate); }
    .maptype:hover .maptype-media img { transform: scale(1.04); }
    .maptype-name { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.3; }
    .maptype-count { margin-top: 2px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
    .maptype:hover .maptype-name { color: var(--ore-text, #815A20); }
    .recent-work { margin: 22px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
    .nrmp-band { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 28px; align-items: center; margin: 0 0 clamp(40px, 5vw, 64px); padding: 22px; background: var(--white, #fff); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color 0.2s ease; }
    .nrmp-band:hover, .nrmp-band:focus-visible { border-color: var(--ore); }
    .nrmp-band-media { display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
    .nrmp-band-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
    .nrmp-band-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .nrmp-band-kick { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ore-text, #815A20); }
    .nrmp-band-kick .nav-new { margin-left: 8px; }
    .nrmp-band-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.01em; color: var(--graphite); }
    .nrmp-band-desc { font-size: 14px; line-height: 1.55; color: var(--body); max-width: 60ch; }
    .nrmp-band-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-left: 28px; border-left: 1px solid var(--border); }
    .nrmp-band-price { font-size: 13.5px; line-height: 1.5; color: var(--graphite); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .nrmp-band-cta { font-size: 13px; font-weight: 600; color: var(--graphite); border-bottom: 1px solid var(--ore); padding-bottom: 2px; }
    .nrmp-band:hover .nrmp-band-cta { color: var(--ore-text, #815A20); }
    @media (max-width: 1024px) {
      .nrmp-band { grid-template-columns: 160px minmax(0, 1fr); }
      .nrmp-band-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-left: 0; border-left: none; padding-top: 16px; border-top: 1px solid var(--border); }
    }
    @media (max-width: 560px) {
      .maptype-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
      .nrmp-band { grid-template-columns: minmax(0, 1fr); }
    }

    /* --- STATS --- */
    .stats {
      padding: 80px 0;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      text-align: center;
    }

    .stat-number {
      font-family: var(--font-serif);
      font-size: 44px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
      color: var(--graphite);
      margin-bottom: 8px;
    }

    /* Only the market-cap stat links (to the client list it is derived from).
       role="img" was dropped: an anchor carries its own accessible name via
       aria-label, and the visual children stay aria-hidden. */
    .stat-link {
      display: block;
      text-decoration: none;
      color: inherit;
    }
    .stat-link .stat-number,
    .stat-link .stat-label { transition: color 0.2s ease; }
    .stat-link:hover .stat-number,
    .stat-link:focus-visible .stat-number { color: var(--ore); }
    .stat-link:hover .stat-label,
    .stat-link:focus-visible .stat-label { color: var(--graphite); }
    .stat-link:focus-visible { outline: 2px solid var(--ore); outline-offset: 6px; }

    .stat-label {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--muted);
    }
    /* Source line under the proof band — the market-cap figure is a claim, so it
       carries its as-of date and basis in the caption step (DESIGN.md: evidence
       before assertions). Quiet: 12px, muted, centred under the grid. */
    .stats-source {
      margin: 22px auto 0;
      max-width: 72ch;
      text-align: center;
      font-family: var(--font-sans);
      font-size: 12px;
      line-height: 1.55;
      color: var(--muted);
    }
    .stats-source a { color: var(--ore-text, var(--ore)); text-decoration: none; font-weight: 500; white-space: nowrap; }
    .stats-source a:hover { text-decoration: underline; text-underline-offset: 2px; }

    /* --- TESTIMONIALS --- */
    .testimonials {
      padding: 48px 0 72px;
    }
    .testimonials-lede {
      text-align: center;
      margin-bottom: 44px;
    }
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      align-items: start;
    }
    .testimonial {
      position: relative;
      margin: 0; /* it's a <figure> now — reset default figure margin (A11Y-07) */
      padding: 6px 24px 24px;
      border-top: 1px solid var(--border);
      transition: border-top-color 0.3s var(--ease-out-soft);
    }
    .testimonial::before {
      content: "\201C";                 /* typographic opening quote */
      position: absolute;
      top: -44px;
      left: 16px;
      font-family: var(--font-serif);
      font-size: 40px;
      font-weight: 300;
      line-height: 1;
      color: var(--ore);
      pointer-events: none;
    }
    .testimonial:hover { border-top-color: var(--ore); }

    .testimonial-quote {
      font-family: var(--font-serif);
      font-size: 17px;
      font-weight: 300;
      line-height: 1.55;
      color: var(--graphite);
      margin: 0 0 24px; /* it's a <blockquote> now — reset default indent (A11Y-07) */
      letter-spacing: -0.005em;
    }
    .testimonial-bottom {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 12px;
    }
    .testimonial-logo {
      height: 40px;
      width: auto;
      object-fit: contain;
      object-position: right bottom;
      opacity: 0.38;
      flex-shrink: 0;
      transition: opacity 0.3s var(--ease-out-soft);
    }
    .testimonial:hover .testimonial-logo { opacity: 0.7; }
    .testimonial-name {
      font-size: 14px;
      font-weight: 600;
      font-style: normal; /* it's a <cite> now — cancel default italic (A11Y-07) */
      color: var(--graphite);
      letter-spacing: -0.005em;
    }
    /* Factual ES caption tying each quote to the work delivered (COPY-03) */
    .testimonial-fact {
      margin-top: 7px;
      font-family: var(--font-sans);
      font-size: 12px;
      letter-spacing: 0.01em;
      color: var(--muted);
    }
    /* Quiet program pointer under the West Red Lake cadence testimonial. */
    .testimonial-program-link {
      display: inline-block;
      margin-top: 6px;
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: var(--ore-text);
      text-decoration: none;
    }
    .testimonial-program-link:hover { text-decoration: underline; text-underline-offset: 3px; }
    .testimonial-program-link:focus-visible {
      outline: 2px solid var(--ore);
      outline-offset: 3px;
      border-radius: 2px;
    }
    .testimonial-role {
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 400;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-top: 2px;
    }

    /* --- SCROLLING LOGO ROW --- */
    .logo-scroll-wrapper {
      overflow: hidden;
      padding: 40px 0;
      position: relative;
    }
    .logo-scroll-wrapper::before,
    .logo-scroll-wrapper::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 2;
      pointer-events: none;
    }
    .logo-scroll-wrapper::before {
      left: 0;
      background: linear-gradient(to right, var(--quartz), transparent);
    }
    .logo-scroll-wrapper::after {
      right: 0;
      background: linear-gradient(to left, var(--quartz), transparent);
    }
    .logo-scroll-track {
      display: flex;
      gap: 20px;
      align-items: center;
      animation: scroll-logos 160s linear infinite;
      width: max-content;
    }
    .logo-scroll-track img {
      width: 360px;
      height: 144px;
      object-fit: contain;
      flex: 0 0 360px;
      opacity: 0.5;
      transition: opacity 0.2s;
    }
    .logo-scroll-track img.logo-sm {
      width: 180px;
      height: 72px;
      flex: 0 0 180px;
    }
    .logo-scroll-track img[src*="snowline"] {
      width: 153px;
      height: 61px;
      flex: 0 0 153px;
    }
    .logo-scroll-track img:hover { opacity: 0.85; }
    @keyframes scroll-logos {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* --- TEAM LEADERSHIP --- */
    .team-leadership {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      padding: 20px 0;
      border-bottom: 1px solid var(--border);
    }
    .team-leadership .team-lead {
      text-align: left;
    }
    .team-leadership .team-photo {
      width: 100%;
      max-width: none;
      aspect-ratio: 1;
      margin: 0 0 14px;
    }
    .team-leadership .team-name {
      font-size: 18px;
    }
    .team-leadership .team-role {
      margin-bottom: 8px;
    }
    .team-leadership .team-bio {
      font-size: 14px;
      max-width: 100%;
      line-height: 160%;
    }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      padding: 16px 0 32px;
    }
    .team-grid-member {
      text-align: left;
    }
    .team-grid-member .team-photo {
      width: 100%;
      max-width: none;
      aspect-ratio: 1;
      margin: 0 0 10px;
    }
    .team-grid-member .team-name {
      font-size: 16px;
      margin-bottom: 2px;
    }
    .team-grid-member .team-role {
      font-size: 12px;
      margin-bottom: 0;
    }

    /* --- HOW WE WORK ROWS --- */
    .principle-row {
      display: flex;
      gap: 32px;
      align-items: flex-start;
      padding: 32px 0;
      border-bottom: 1px solid var(--border);
    }

    .principle-row:first-child { border-top: 1px solid var(--border); }

    .principle-num {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 600;
      color: var(--slate);
      flex-shrink: 0;
      min-width: 28px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(90,95,99,0.08);
    }

    .principle-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 6px;
    }

    .principle-desc {
      font-size: 15px;
      font-weight: 400;
      line-height: 165%;
      color: var(--body);
    }

    /* --- SOCIAL PROOF / CTA --- */
    .cta-section {
      padding: clamp(64px, 9vw, 100px) 0;
      text-align: center;
    }

    .cta-counter {
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 1px;
      color: var(--muted);
      margin-bottom: 24px;
    }

    .cta-headline {
      font-family: var(--font-serif);
      font-size: 36px;
      font-weight: 300;
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: var(--graphite);
      max-width: 640px;
      margin: 0 auto 16px;
    }

    .cta-sub {
      font-size: 15px;
      color: var(--muted);
      margin-bottom: 40px;
    }

    /* Two-door closing CTA: primary call + quiet "still evaluating" door */
    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 14px 28px;
    }
    .cta-actions-alt {
      font-family: var(--font-sans);
      font-size: 14px;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s var(--ease-out-soft);
    }
    .cta-actions-alt:hover { color: var(--graphite); }
    .cta-actions-alt span { transition: transform 0.2s var(--ease-out-soft); display: inline-block; }
    .cta-actions-alt:hover span { transform: translateX(3px); color: var(--ore); }

    /* Risk-reversal assurance micro-lines (cta-assurance.html include) */
    .cta-assurance {
      list-style: none;
      padding: 0;
      margin: 24px 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 7px 20px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--muted);
    }
    .cta-section .cta-assurance { justify-content: center; }
    .cta-assurance li { position: relative; }
    .cta-assurance li + li::before {
      content: "·";
      position: absolute;
      left: -12px;
      color: var(--graticule);
    }

    /* --- PRICING SECTION --- */
    .pricing-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }

    .pricing-block {
      padding-bottom: 40px;
    }

    .pricing-block-label {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--slate);
      margin-bottom: 8px;
    }

    .pricing-block-title {
      font-family: var(--font-serif);
      font-size: 28px;
      font-weight: 300;
      line-height: 1.2;
      letter-spacing: -0.015em;
      color: var(--graphite);
      margin-bottom: 24px;
    }

    /* Map type hover tooltip */
    .map-tooltip-trigger { position: relative; }
    .map-tooltip {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: 8px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 16px;
      z-index: 50;
      min-width: 200px;
      box-shadow: var(--shadow-card);
    }
    .map-tooltip a {
      display: block;
      font-size: 13px;
      color: var(--slate);
      text-decoration: none;
      padding: 5px 0;
      border-bottom: 1px solid var(--border);
      transition: color 0.15s;
    }
    .map-tooltip a:last-child { border-bottom: none; }
    .map-tooltip a:hover { color: var(--ore); }
    .map-tooltip-trigger:hover .map-tooltip { display: block; }

    .pricing-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid var(--border);
      font-size: 15px;
    }

    .pricing-line:first-of-type { border-top: 1px solid var(--border); }

    .pricing-line-name {
      font-weight: 500;
      color: var(--navy);
    }

    .pricing-line-price {
      font-weight: 600;
      color: var(--navy);
    }

    /* --- PACKAGE HIGHLIGHT --- */
    .package-intro {
      margin-top: 72px;
      max-width: 680px;
    }
    .package-intro-title {
      font-family: var(--font-serif);
      font-size: 36px;
      font-weight: 300;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: var(--graphite);
      margin-bottom: 16px;
    }
    .package-intro-body {
      font-size: 15px;
      line-height: 1.7;
      color: var(--body);
      margin: 0;
    }

    .package-highlight {
      background: var(--slate);
      border-radius: 12px;
      padding: 40px;
      color: var(--on-dark);
      margin-top: 24px;
      position: relative;
      overflow: hidden;
    }

    /* Eyebrow on the dark panel — demoted from Ore to warm Quartz */
    .package-highlight .pricing-block-label { color: rgba(244,241,236,0.78); }

    .package-highlight .pricing-block-title {
      color: var(--on-dark);
      margin-bottom: 16px;
    }

    .package-desc {
      font-size: 15px;
      color: rgba(244,241,236,0.82);
      line-height: 165%;
      margin-bottom: 24px;
    }

    .package-highlight .pricing-line {
      border-color: rgba(244,241,236,0.18);
      color: var(--on-dark);
    }

    .package-highlight .pricing-line-name { color: rgba(244,241,236,0.9); }
    .package-highlight .pricing-line-price { color: var(--on-dark); }

    .package-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20px;
    }

    .package-total-label {
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: rgba(244,241,236,0.82);
    }

    .package-total-price {
      font-family: var(--font-sans);
      font-size: 36px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: var(--on-dark);
    }

    /* Warm on-dark, not gold — slate is a mid-tone and 13px gold sat at 1.9:1.
       The flagship gold price moment lives on engagement's graphite panel. */
    .package-savings {
      font-size: 13px;
      color: rgba(244,241,236,0.92);
      text-align: right;
      margin-top: 4px;
    }

    /* --- RETAINERS --- */
    .retainer-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 24px;
    }

    .retainer-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 28px 24px;
      position: relative;
      background: var(--white);
    }

    .retainer-card.is-popular {
      border-color: var(--navy);
    }

    .retainer-badge {
      position: absolute;
      top: -10px;
      left: 24px;
      background: var(--navy);
      color: var(--white);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 4px;
    }

    .retainer-tier {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--navy);
      margin-bottom: 8px;
    }

    .retainer-price {
      font-family: var(--font-sans);
      font-size: 28px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: var(--graphite);
      margin-bottom: 4px;
    }

    .retainer-rate {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 20px;
    }

    .retainer-features {
      list-style: none;
    }

    .retainer-features li {
      font-size: 14px;
      color: var(--body);
      padding: 6px 0;
      line-height: 150%;
    }

    /* --- TEAM --- */
    .team-member {
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 48px;
      padding: 32px 0;
      border-bottom: 1px solid var(--border);
    }

    .team-member:first-child { border-top: 1px solid var(--border); }

    .team-photo {
      width: 100%;
      max-width: 300px;
      aspect-ratio: 1;
      background: var(--surface);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: var(--muted);
      overflow: hidden;
      position: relative;
    }

    .team-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .team-photo video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.5s linear;
    }
    .team-photo.is-playing video.tv-on { opacity: 1; }

    .team-name {
      font-size: 20px;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 2px;
    }

    .team-role {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 12px;
    }

    .team-bio {
      font-size: 15px;
      color: var(--body);
      line-height: 175%;
      max-width: 680px;
    }

    /* --- ONBOARDING STEPS --- */
    .onboarding-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      padding: 48px 0;
      position: relative; /* anchor for .timeline-track */
    }
    .onboarding-step {
      position: relative;
    }
    /* Timeline scaffolding — markup hooks for a future scroll-progress
       indicator. Positioned absolutely so they don't occupy grid cells
       and break the 4-column row. .timeline-dot is hidden until styled. */
    .timeline-track {
      position: absolute;
      left: 0;
      right: 0;
      top: 60px; /* aligned with the row of step numbers */
      height: 1px;
      background: var(--border);
      pointer-events: none;
    }
    .timeline-track-fill {
      width: 0;
      height: 100%;
      background: var(--ore);
      transition: width 0.4s ease;
    }
    .timeline-dot {
      display: none;
    }
    .onboarding-step-num {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 10px;
    }
    .onboarding-step-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--graphite);
      margin-bottom: 6px;
    }
    .onboarding-step-desc {
      font-size: 13px;
      color: var(--body);
      line-height: 160%;
    }
    .onboarding-step + .onboarding-step::before {
      content: '';
      position: absolute;
      left: -16px;
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--border);
    }

    /* --- CONTACT --- */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
    }

    .contact-info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid var(--border);
      font-size: 15px;
    }

    .contact-info-row:first-child { border-top: 1px solid var(--border); }

    .contact-info-label {
      font-weight: 500;
      color: var(--navy);
    }

    .contact-info-value {
      color: var(--muted);
    }

    .contact-info-value a {
      color: var(--muted);
      text-decoration: none;
    }

    .contact-info-value a:hover { color: var(--navy); }

    /* --- CONTACT FORM --- */
    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--navy);
    }
    .req { color: var(--ore-text); margin-left: 2px; } /* required-field marker (A11Y-10) */

    .form-input,
    .form-select,
    .form-textarea {
      font-family: var(--font-sans);
      font-size: 14px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--white);
      color: var(--navy);
      outline: none;
      transition: border-color 0.2s var(--ease-out-soft),
                  box-shadow 0.2s var(--ease-out-soft);
    }

    .form-input:hover,
    .form-select:hover,
    .form-textarea:hover {
      border-color: rgba(26,16,31,0.18);
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
      border-color: var(--ore-text);
      box-shadow: 0 0 0 3px rgba(184,130,58,0.12);
    }

    .form-textarea {
      min-height: 120px;
      resize: vertical;
    }

    .form-select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 36px;
    }

    .form-hint {
      font-size: 13px;
      color: var(--muted);
      margin-top: 4px;
    }
    .form-error {
      color: #a3392f;
    }
    .form-error[hidden] {
      display: none;
    }


    /* --- HOVER --- DESIGN.md: no lifts or shadows; a 1px rule marks hover. */
    .retainer-card {
      transition: border-color 0.2s ease;
    }

    .retainer-card:hover {
      border-color: var(--slate);
    }

    /* --- FOOTER ----------------------------------------------------
       Edge-to-edge composition with a slow topographic-contour shader
       painting the background. Single tight row: Brand | Nav | Contact,
       a hairline, then a centered copyright strip. */
    .footer {
      position: relative;
      width: 100vw;
      margin: 48px calc(50% - 50vw) 0;
      overflow: hidden;
      isolation: isolate;
      border-top: 1px solid var(--border);
    }

    .footer-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      z-index: -1;
      pointer-events: none;
    }

    .footer-inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 36px 80px 20px;
    }

    /* --- top row: brand | quick links | cta | contact --- */
    .footer-top {
      display: grid;
      grid-template-columns: minmax(220px, 1.1fr) minmax(0, 1fr) minmax(240px, 1.1fr);
      gap: 48px;
      align-items: start;
      padding-bottom: 24px;
    }

    /* --- brand column --- */
    .footer-brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .footer-mark {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--navy);
      text-decoration: none;
      transition: opacity 0.3s var(--ease-out-soft);
      margin-bottom: 18px;
    }
    .footer-mark:hover { opacity: 0.75; }
    .footer-mark svg { width: 28px; height: 28px; flex: 0 0 28px; }
    .footer-mark-text {
      font-family: var(--font-sans);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: lowercase;
      color: var(--graphite);
    }
    /* Wordmark + "Est. 1996" signature, right-aligned under the text (BRAND-07) */
    .footer-mark-stack {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 3px;
    }
    .footer-est {
      font-family: var(--font-mono);
      /* 11px is the legibility floor for functional text; this was 9px. */
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      line-height: 1;
    }

    .footer-statement {
      font-family: var(--font-sans);
      font-size: 15px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: -0.01em;
      color: var(--graphite);
      max-width: 28ch;
      margin: 0;
    }
    /* Signature phrase — --ore-text keeps 15px gold text AA on Quartz */
    .footer-statement em {
      font-style: italic;
      font-weight: 500;
      color: var(--ore-text);
    }

    /* --- nav grid (single Quick Links column) --- */
    .footer-nav {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 32px;
    }

    /* --- social icons in brand column --- */
    .footer-social {
      list-style: none;
      padding: 0;
      margin: 22px 0 0;
      display: flex;
      gap: 14px;
    }
    .footer-social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      color: var(--muted);
      transition: color 0.2s var(--ease-out-soft);
    }
    .footer-social a:hover { color: var(--graphite); }
    .footer-social svg { width: 18px; height: 18px; }

    /* --- cta column --- */
    .footer-cta {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .footer-cta-btn {
      padding: 12px 24px;
      font-size: 14px;
    }
    .footer-cta-btn:hover {
      background: var(--basalt);
    }
    .footer-cta-note {
      margin: 16px 0 0;
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0;
      color: var(--muted);
      max-width: 32ch;
    }

    /* --- contact column --- */
    .footer-contact {
      display: flex;
      flex-direction: column;
      text-align: right;
    }
    .footer-contact .email-local {
      color: var(--graphite);
    }

    /* --- shared column atoms --- */
    .footer-col-title {
      font-family: var(--font-sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--graphite);
      margin-bottom: 14px;
    }

    .footer-col ul,
    .footer-contact ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .footer-col ul li,
    .footer-contact ul li {
      margin-bottom: 11px;
    }
    .footer-col ul a,
    .footer-contact ul a {
      font-size: 13px;
      color: var(--muted);
      text-decoration: none;
      line-height: 1.5;
      transition: color 0.2s var(--ease-out-soft);
    }
    .footer-col ul a:hover,
    .footer-contact ul a:hover { color: var(--graphite); }


    .footer-loc {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
    }

    /* --- hairline --- */
    .footer-rule {
      height: 1px;
      background: var(--border);
      margin: 0;
    }

    /* --- copyright left, legal links right --- */
    /* Coordinate Origin mark — the firm's own Victoria HQ coordinates as a quiet
       cartographer's signature (ideation: identity-systems). */
    .footer-coords {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
      color: var(--muted);
    }
    .coord-mark { color: var(--graticule); flex: none; }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 14px;
      font-size: 11px;
      letter-spacing: 0.02em;
      color: var(--muted);
    }
    .footer-legal {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 20px;
    }
    .footer-legal a {
      font-size: 11px;
      color: var(--muted);
      text-decoration: none;
      letter-spacing: 0.02em;
      transition: color 0.2s var(--ease-out-soft);
    }
    .footer-legal a:hover { color: var(--graphite); }

    @media (max-width: 1024px) {
      .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
      }
      .footer-cta { grid-column: 1 / -1; }
      .footer-contact { grid-column: 1 / -1; }
    }

    @media (max-width: 720px) {
      .footer-inner { padding: 28px 40px 16px; }
      .footer-top {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-bottom: 20px;
      }
      .footer-nav { grid-template-columns: 1fr; gap: 24px; }
      .footer-cta { grid-column: auto; }
      .footer-contact { grid-column: auto; text-align: left; }
    }
    @media (max-width: 640px) {
      .footer-inner { padding-left: 20px; padding-right: 20px; } /* same 20px gutter as .page */
    }

    /* --- RESPONSIVE --- */
    @media (max-width: 1024px) {
      .nav-inner { padding: 0 40px; }
      .page { padding: 0 40px; }
      .section-grid { grid-template-columns: 1fr; gap: 32px; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
      .testimonials-grid { grid-template-columns: 1fr; }
      .hero-headline { font-size: 44px; }
      .pricing-grid { grid-template-columns: 1fr; }
      .retainer-grid { grid-template-columns: 1fr; }
      .team-member { grid-template-columns: 1fr; gap: 24px; }
      .team-leadership { grid-template-columns: repeat(2, 1fr); gap: 32px; }
      .contact-grid { grid-template-columns: 1fr; }
      .onboarding-steps { grid-template-columns: repeat(2, 1fr); }
      .mega-menu-panel { max-width: 680px; }
    }

    @media (max-width: 640px) {
      .nav-inner { padding: 0 20px; }
      .page { padding: 0 20px; }
      .nav-links { display: none; }
      .nav-cta { display: none; }
      .nav-hamburger { display: block; }
      .hero { padding: 60px 0 48px; }
      .hero-headline { font-size: 32px; }
      .hero-buttons { flex-direction: column; align-items: flex-start; }
      .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
      .stat-number { font-size: 28px; }
      .section { padding: 48px 0; }
      .section-headline { font-size: 28px; }
      .cta-headline { font-size: 28px; }
      .footer-bottom { flex-direction: column; gap: 16px; }
      .package-highlight { padding: 24px; }
      .form-row { grid-template-columns: 1fr; }
      .contact-grid { grid-template-columns: 1fr; gap: 40px; }
      .testimonials-grid { grid-template-columns: 1fr; }
      .onboarding-steps { grid-template-columns: 1fr 1fr; gap: 24px; }
      .onboarding-step + .onboarding-step::before { display: none; }
    }

    /* ===== Service-detail pages (merged from es-draft1) ===== */
    /* Image-gallery + lightbox styles for the ported service-detail pages
       (map types, sections, 3D models, conceptual schematics, movies,
       presentations, websites/webflow/wordpress). All custom properties
       referenced here (--border, --vellum, --muted, --graphite, --ore,
       --quartz, --basalt, --surface, fonts) already exist in :root above. */

    /* Head-guard hook: pages add .motion-prep to <html> on load and a 1.5s
       failsafe removes it. Keeps hero copy hidden only if a (GSAP) reveal is
       wired; self-removes otherwise, so it no-ops on the base site. */
    .motion-prep .hero .hero-headline,
    .motion-prep .hero .hero-body,
    .motion-prep .hero .hero-buttons { opacity: 0; }
    @media (prefers-reduced-motion: reduce) {
      .motion-prep .hero .hero-headline,
      .motion-prep .hero .hero-body,
      .motion-prep .hero .hero-buttons { opacity: 1; }
    }

    /* Lightbox (shared by every gallery on these pages) */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(26, 16, 31, 0.9);
      padding: 4vmin;
    }
    .lightbox[hidden] { display: none; }
    .lightbox-figure {
      margin: 0;
      max-width: 94vw;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .lightbox-img {
      max-width: 100%;
      max-height: 86vh;
      object-fit: contain;
      border-radius: 6px;
      box-shadow: var(--shadow-deep);
    }
    .lightbox-cap {
      color: var(--quartz);
      font-size: 14px;
      margin-top: 14px;
      text-align: center;
    }
    .lightbox-note {
      display: block;
      max-width: 680px;
      margin: 8px auto 0;
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--graticule);
    }
    .lightbox-close {
      position: absolute;
      top: 18px;
      right: 24px;
      background: none;
      border: none;
      color: var(--quartz);
      font-size: 38px;
      line-height: 1;
      cursor: pointer;
      padding: 8px;
    }
    /* Prev/next paging through a map gallery */
    .lightbox-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      background: rgba(244, 241, 236, 0.08);
      border: 1px solid rgba(244, 241, 236, 0.22);
      border-radius: 50%;
      color: var(--quartz);
      font-size: 30px;
      line-height: 1;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .lightbox-nav:hover { background: rgba(244, 241, 236, 0.16); border-color: rgba(244, 241, 236, 0.42); }
    .lightbox-nav:focus-visible { outline: 2px solid var(--ore); outline-offset: 3px; }
    .lightbox-nav[hidden] { display: none; }
    .lightbox-prev { left: 24px; }
    .lightbox-next { right: 24px; }
    @media (max-width: 640px) {
      .lightbox-nav { width: 44px; height: 44px; font-size: 26px; }
      .lightbox-prev { left: 8px; }
      .lightbox-next { right: 8px; }
    }

    /* Video lightbox */
    .lightbox-video { width: min(92vw, 1200px); aspect-ratio: 16 / 9; }
    .lightbox-video iframe { width: 100%; height: 100%; border: 0; border-radius: 6px; box-shadow: var(--shadow-deep); }

    /* --- MAP GALLERY (map-type pages) --- */
    .map-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
    .map-thumb { display: block; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--vellum); cursor: zoom-in; aspect-ratio: 4 / 3; }
    .map-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
    .map-thumb:hover img, .map-thumb:focus-visible img { transform: scale(1.05); }
    @media (max-width: 1024px) { .map-gallery { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 560px) { .map-gallery { grid-template-columns: 1fr 1fr; gap: 12px; } } /* thumbnails stay two-up on phones */

    /* --- MAP FEATURE (locators & area plays page) --- */
    .map-feature {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 44px;
      align-items: center;
      padding: 40px 0;
      border-bottom: 1px solid var(--border);
    }
    .map-feature:last-child { border-bottom: none; }
    .map-feature-media {
      display: block;
      width: 100%;
      padding: 0;
      margin: 0;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      background: var(--vellum);
      cursor: zoom-in;
    }
    .map-feature-media img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.5s ease;
    }
    .map-feature-media:hover img,
    .map-feature-media:focus-visible img { transform: scale(1.03); }
    .map-feature-title {
      font-family: var(--font-serif);
      font-size: 26px;
      font-weight: 400;
      color: var(--graphite);
      margin: 4px 0 12px;
    }
    .map-feature-text a {
      color: var(--graphite);
      text-decoration: underline;
      text-decoration-color: var(--ore);
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
      transition: color 0.2s ease;
    }
    .map-feature-text a:hover { color: var(--ore); }
    @media (max-width: 768px) {
      .map-feature { grid-template-columns: 1fr; gap: 22px; padding: 28px 0; }
    }

    /* --- PRESENTATIONS (deck gallery) --- */
    .deck-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-top: 40px;
    }
    .deck-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
    .deck-card-media {
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--vellum);
    }
    .deck-card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }
    .deck-card:hover .deck-card-media img,
    .deck-card:focus-visible .deck-card-media img { transform: scale(1.04); }
    .deck-card-meta { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 3px; }
    .deck-card-title { font-size: 16px; font-weight: 600; color: var(--graphite); }
    .deck-card-type { font-size: 13px; color: var(--muted); }
    .deck-card-view { font-size: 13px; font-weight: 600; color: var(--graphite); margin-top: 8px; }
    .deck-card:hover .deck-card-view { color: var(--ore); }
    @media (max-width: 1024px) { .deck-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 640px) { .deck-grid { grid-template-columns: 1fr; } }

    /* --- GIS MOVIES --- */
    .movie-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
    .movie-card { display: flex; flex-direction: column; background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
    .movie-card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background: var(--basalt); }
    .movie-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
    .movie-card:hover .movie-card-media img, .movie-card:focus-visible .movie-card-media img { transform: scale(1.04); }
    .movie-play { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(26, 16, 31, 0.55); transition: background 0.2s ease, transform 0.2s ease; }
    .movie-play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--on-dark); }
    .movie-card:hover .movie-play, .movie-card:focus-visible .movie-play { background: var(--ore); transform: translate(-50%, -50%) scale(1.06); }
    .movie-card-title { font-size: 15px; font-weight: 600; color: var(--graphite); padding: 12px 2px 0; }
    @media (max-width: 1024px) { .movie-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 640px) { .movie-grid { grid-template-columns: 1fr; } }

    /* --- WEBSITES (platform builds) --- */
    .platform-builds { margin-top: 26px; }
    .platform-builds-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 12px; }
    .platform-builds-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
    .platform-builds-row img { height: 34px; width: auto; object-fit: contain; }

    /* --- SITE GALLERY (webflow / wordpress pages) --- */
    .site-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 40px; }
    .site-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
    .site-card-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow-card); background: var(--vellum); }
    .site-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; transition: transform 0.6s ease; }
    .site-card:hover .site-card-media img, .site-card:focus-visible .site-card-media img { transform: scale(1.03); }
    .site-card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 2px 0; }
    .site-card-title { font-size: 16px; font-weight: 600; color: var(--graphite); }
    .site-card-visit { font-size: 13px; font-weight: 600; color: var(--graphite); }
    .site-card:hover .site-card-visit { color: var(--ore); }
    @media (max-width: 760px) { .site-grid { grid-template-columns: 1fr; } }

    /* --- DESIGN GALLERY (logos & branding / infographics / booth / fact sheets) ---
       Print and brand deliverables don't share one aspect ratio the way maps do:
       pull-up banners run ~1:2.4, fact sheets are letter portrait, flowsheets are
       wide. Each figure sets its own aspect via a modifier and the image sits
       object-fit: contain on vellum, so nothing gets cropped — the whole
       deliverable is the proof. Lightbox on click, same as the map galleries. */
    .design-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 28px; margin-top: 40px; }
    .design-grid--4 { grid-template-columns: repeat(4, 1fr); }
    .design-grid--5 { grid-template-columns: repeat(5, 1fr); }
    .design-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .design-card { display: flex; flex-direction: column; text-align: left; background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: zoom-in; min-width: 0; }
    .design-card-media {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--vellum);
      transition: border-color 0.27s ease, box-shadow 0.27s ease;
    }
    .design-card-media--tall     { aspect-ratio: 5 / 12; }   /* pull-up banner */
    .design-card-media--portrait { aspect-ratio: 17 / 22; }  /* letter fact sheet */
    .design-card-media--square   { aspect-ratio: 1 / 1; }    /* booth backdrop panel */
    .design-card-media--wide     { aspect-ratio: 16 / 9; }   /* guideline spread / timeline */
    .design-card-media img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.5s ease; }
    .design-card-media--fill img { object-fit: cover; }
    .design-card:hover .design-card-media,
    .design-card:focus-visible .design-card-media { border-color: var(--ore); box-shadow: 0 16px 34px -20px rgba(45, 32, 15, 0.4); }
    .design-card:hover .design-card-media img,
    .design-card:focus-visible .design-card-media img { transform: scale(1.02); }
    .design-card:focus-visible { outline: 2px solid var(--ore); outline-offset: 4px; border-radius: 10px; }
    a.design-card { text-decoration: none; cursor: pointer; }
    .design-card-meta { display: flex; flex-direction: column; gap: 2px; padding: 12px 2px 0; }
    .design-card-title { font-size: 15px; font-weight: 600; color: var(--graphite); }
    .design-card-type { font-size: 13px; color: var(--muted); }
    @media (max-width: 1024px) { .design-grid, .design-grid--4, .design-grid--5 { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .design-grid, .design-grid--4, .design-grid--5, .design-grid--2 { grid-template-columns: 1fr; } .design-card-media--tall { aspect-ratio: 5 / 9; } }
    @media (prefers-reduced-motion: reduce) { .design-card-media, .design-card-media img { transition: none; } .design-card:hover .design-card-media img { transform: none; } }

    /* ===== Homepage maps gallery + case-studies (merged from es-draft1) ===== */

    /* --- WHAT WE DO SHOWCASE: work cards --- */
    .work-card {
      display: flex;
      flex-direction: column;
      text-align: left;
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      font: inherit;
      color: inherit;
      cursor: zoom-in;
      transition: transform 0.27s var(--ease-out-soft);
    }
    .work-card-media {
      display: block;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--vellum);
      transition: border-color 0.27s ease, box-shadow 0.27s ease;
    }
    .work-card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }
    /* Hover: the card lifts, a hairline Ore frame + soft shadow appear.
       Applied to every showcase card — maps, websites, and presentations. */
    .work-card:hover,
    .work-card:focus-visible { transform: translateY(-8px); }
    .work-card:hover .work-card-media,
    .work-card:focus-visible .work-card-media {
      border-color: var(--ore);
      box-shadow: 0 16px 34px -20px rgba(45, 32, 15, 0.4);
    }

    .work-card-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 14px 2px 0;
    }
    .work-card-title { font-size: 15px; font-weight: 600; color: var(--graphite); }
    .work-card-type { font-size: 13px; color: var(--muted); }

    /* --- WHAT WE DO SHOWCASE: groups + grids --- */
    .showcase .services-editorial-head { margin-bottom: 8px; }
    .showcase-group { margin-top: 56px; }
    .showcase-group:first-of-type { margin-top: 40px; }
    .showcase-group-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 16px;
      margin-bottom: 28px;
      border-bottom: 1px solid var(--border);
    }
    .showcase-group-title {
      font-family: var(--font-serif);
      font-size: 24px;
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--graphite);
      margin: 0;
    }
    .showcase-group-link {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--slate);
      text-decoration: none;
      white-space: nowrap;
      transition: color 0.2s ease;
    }
    .showcase-group-link:hover { color: var(--graphite); }

    .showcase-grid { display: grid; gap: 24px; }
    .showcase-grid--maps  { grid-template-columns: repeat(4, 1fr); }
    .showcase-grid--sites { grid-template-columns: repeat(3, 1fr); }
    .showcase-grid--decks { grid-template-columns: repeat(3, 1fr); }
    .showcase-grid--mini  { grid-template-columns: repeat(3, 1fr); }

    /* category eyebrow on a card */
    .work-card-cat {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--slate);
      margin-bottom: 4px;
    }
    a.work-card { text-decoration: none; cursor: pointer; }

    /* wide media for site screenshots & deck covers */
    .work-card-media--wide { aspect-ratio: 16 / 11; }

    /* placeholder tile for map types without a sample image yet */
    .work-card--tile .work-card-media--tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      cursor: pointer;
      transition: border-color 0.2s ease;
      background:
        radial-gradient(circle at 1px 1px, var(--graticule) 1px, transparent 0) 0 0 / 16px 16px,
        var(--vellum);
    }
    .work-card-tile-mark {
      width: 34px; height: 34px;
      border: 1.5px solid var(--slate);
      border-radius: 50%;
      position: relative;
      opacity: 0.85;
    }
    .work-card-tile-mark::before,
    .work-card-tile-mark::after { content: ""; position: absolute; background: var(--slate); }
    .work-card-tile-mark::before { left: 50%; top: 9px; bottom: 9px; width: 1.5px; transform: translateX(-50%); }
    .work-card-tile-mark::after  { top: 50%; left: 9px; right: 9px; height: 1.5px; transform: translateY(-50%); }
    .work-card-tile-label { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.5px; }
    .work-card--tile:hover .work-card-media--tile { border-color: var(--slate); }

    /* mini text cards: design / investor hub / socials */
    .mini-card {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 26px 24px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--vellum);
      text-decoration: none;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .mini-card:hover { border-color: var(--slate); transform: translateY(-2px); }
    .mini-card-title { font-size: 17px; font-weight: 600; color: var(--graphite); }
    .mini-card-desc { font-size: 14px; line-height: 1.5; color: var(--muted); }
    .mini-card-arrow { color: var(--ore-text); font-size: 16px; margin-top: 2px; }

    @media (max-width: 1024px) {
      .showcase-grid--maps { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .showcase-grid--mini { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .showcase-grid--maps,
      .showcase-grid--sites,
      .showcase-grid--decks { grid-template-columns: 1fr; }
      .showcase-group-title { font-size: 20px; }
    }

    /* --- HERO: demo-reel film link/play button --- */
    .hero-film-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; background: none; border: none; padding: 0; font: inherit; font-size: 15px; font-weight: 500; color: var(--graphite); cursor: pointer; }
    .hero-film-play { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--slate); flex: none; transition: background 0.2s ease, border-color 0.2s ease; }
    .hero-film-play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--slate); }
    .hero-film-link:hover .hero-film-play { border-color: var(--ore); }
    .hero-film-link:hover .hero-film-play { background: var(--ore); }
    .hero-film-link:hover .hero-film-play::after { border-left-color: var(--on-dark); }
    .hero-buttons .hero-film-link { margin-top: 0; margin-left: 4px; }

    /* --- Compliance / source captions (COMPLIANCE-06 / COMPLIANCE-07) ---
       Quiet muted legal captions on the homepage (stat source + logo-wall
       identification note). Mirrors the clients-page note but uses --muted. */
    .compliance-note {
      font-family: var(--font-sans);
      font-size: 12px;
      line-height: 1.6;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
    }
    .compliance-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
    .compliance-note a:hover { color: var(--graphite); }


    /* Full-bleed thesis pullquote — an editorial pause that gives the philosophy
       the space it earns (ideation: editorial-luxury). */
    .thesis-quote {
      width: 100vw; margin-left: calc(50% - 50vw);
      background: var(--graphite); color: var(--on-dark, #F7F4EF);
      padding: clamp(64px, 9vw, 120px) 24px;
      text-align: center;
    }
    .thesis-quote-text {
      max-width: 22ch; margin: 0 auto;
      font-family: var(--font-serif); font-weight: 300;
      font-size: clamp(27px, 4vw, 44px); line-height: 1.25;
      letter-spacing: -0.02em;
    }
    .thesis-quote-text em { font-style: italic; color: var(--ore); }
    .thesis-quote-cite {
      display: block; margin-top: 22px;
      font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--graticule);
    }

    /* Variable section-padding rhythm tiers (ideation: editorial-luxury) */
    .section--spacious { padding-top: clamp(72px, 10vw, 132px); padding-bottom: clamp(72px, 10vw, 132px); }
    .section--tight { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(28px, 4vw, 48px); }

    /* In-prose wayfinding — a quiet next-step line at the foot of service pages
       (ideation: japanese-minimal). */
    .next-step {
      max-width: 760px; margin: 8px 0 0;
      font-family: var(--font-mono); font-size: 12px; line-height: 1.9;
      letter-spacing: 0.02em; color: var(--muted);
    }
    .next-step a { color: var(--ore-text); text-decoration: none; font-weight: 500; white-space: nowrap; }
    .next-step a:hover { text-decoration: underline; text-underline-offset: 2px; }

    /* GHL booking embed (book.html) */
    .booking-embed { max-width: 900px; margin: 0 auto; }
    .booking-embed iframe { width: 100%; min-height: 740px; border: none; display: block; }

    /* book.html booking-page framing */
    .booking-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(26,16,31,0.10); border: 1px solid rgba(26,16,31,0.10); border-radius: 6px; overflow: hidden; max-width: 900px; margin: 0 auto 40px; }
    .booking-meta-item { background: var(--quartz); padding: 20px 24px; display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; color: var(--slate); line-height: 1.4; }
    .booking-meta-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); flex: 0 0 auto; }
    @media (max-width: 700px) { .booking-meta { grid-template-columns: 1fr; } }

    /* book.html two-column booking layout (text 1/3, calendar 2/3) */
    .booking-layout { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(28px, 4vw, 56px); align-items: start; padding-top: clamp(40px, 6vw, 72px); }
    .booking-aside .hero-headline { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.04; }
    .booking-aside .hero-body { margin-top: 16px; max-width: 38ch; }
    .booking-tz { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 20px; }
    .booking-aside-contact { margin-top: 28px; }
    .booking-main { min-width: 0; }
    .booking-main .booking-embed { max-width: none; margin: 0; }
    .booking-embed iframe { width: 100%; min-height: 620px; border: none; display: block; }
    @media (max-width: 900px) { .booking-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; } }
    /* Phones/tablets: headline + reassurance, then the calendar, then the agenda, host and logos */
    @media (max-width: 900px) {
      .booking-layout { display: flex; flex-direction: column; }
      .booking-aside { display: contents; }
      .booking-aside .hero-headline { order: 1; }
      .booking-aside .booking-reassure { order: 2; margin-top: -12px; }
      .booking-main { order: 3; }
      .booking-aside .booking-cover, .booking-aside .booking-host, .booking-aside .booking-logos { order: 4; }
    }

    /* let GHL form_embed.js auto-size the iframe so the calendar fits with no inner scrollbar */
    .booking-main .booking-embed iframe { min-height: 700px; border: 0 !important; outline: 0 !important; }

    /* ============================================================
       Conversion batch (2026-07-06)
       CRO-03 outcomes band · CRO-04 price anchors + service from-lines · BRAND-05 flagship band
       (nav "Work" dropdown CSS lives in _includes/nav.html's own <style> block)
       ============================================================ */

    /* CRO-04 — quiet "from" price line in service-page hero/intro */
    .hero-from {
      margin-top: 20px; font-family: var(--font-sans); font-size: 13px; font-weight: 500;
      letter-spacing: 0.03em; color: var(--muted); font-variant-numeric: tabular-nums;
    }
    .hero-from b { font-weight: 600; color: var(--graphite); }
    /* Small square availability tag (same treatment as the nav "New" tag) */
    .hero-avail { margin-top: 12px; }
    .avail-tag { display: inline-block; padding: 2px 7px; border: 1px solid var(--ore); border-radius: 2px; font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ore-text, #815A20); }

    /* News-Release Map Program — recurring-SKU offer page tiers */
    .nrmp-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
    .nrmp-tier {
      display: flex; flex-direction: column;
      background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 26px 24px;
    }
    .nrmp-tier--featured { border-color: var(--slate); }
    .nrmp-tier-name { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
    .nrmp-tier-price { font-family: var(--font-serif); font-size: 30px; color: var(--graphite); font-variant-numeric: tabular-nums; margin-top: 12px; letter-spacing: -0.01em; }
    .nrmp-tier-price span { font-family: var(--font-sans); font-size: 13px; color: var(--muted); }
    .nrmp-tier-meta { margin-top: 6px; font-family: var(--font-sans); font-size: 13px; color: var(--body); }
    .nrmp-tier-rule { height: 1px; background: var(--border); margin: 18px 0; }
    .nrmp-tier-feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
    .nrmp-tier-feat li { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.45; color: var(--body); padding-left: 16px; position: relative; }
    .nrmp-tier-feat li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 1px; background: var(--ore); }
    @media (max-width: 820px) { .nrmp-tiers { grid-template-columns: 1fr; } }
    /* The 4-month minimum, stated once above the tiers (and in the hero) */
    .nrmp-term-note { margin: 4px 0 22px; max-width: 64ch; font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--body); }
    .nrmp-term-note strong { color: var(--graphite); font-weight: 600; }
    .nrmp-tier-cta {
      margin-top: 22px; display: block; text-align: center; padding: 11px 16px;
      border: 1px solid var(--slate); border-radius: 8px;
      font-family: var(--font-sans); font-size: 13px; font-weight: 600;
      color: var(--graphite); text-decoration: none;
      transition: background 0.2s var(--ease-out-soft), color 0.2s var(--ease-out-soft), border-color 0.2s var(--ease-out-soft);
    }
    .nrmp-tier-cta:hover { background: var(--graphite); color: var(--surface); border-color: var(--graphite); }
    .nrmp-tier--featured .nrmp-tier-cta { background: var(--graphite); color: var(--surface); border-color: var(--graphite); }
    .nrmp-tier--featured .nrmp-tier-cta:hover { background: var(--ore-text); border-color: var(--ore-text); }
    /* Tier CTAs are <button>s inside a form posting to /api/checkout */
    .nrmp-tier-form { margin: 0; }
    button.nrmp-tier-cta { width: 100%; background: none; line-height: inherit; cursor: pointer; }
    /* Quiet alternative under each tier's checkout button */
    .nrmp-tier-talk { display: block; margin-top: 10px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--muted); text-decoration: none; }
    .nrmp-tier-talk:hover { color: var(--ore-text); }
    .nrmp-invoice-note { margin: 22px 0 0; max-width: 780px; font-size: 14px; line-height: 1.6; color: var(--body); }
    .nrmp-invoice-note a { color: var(--graphite); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--ore); }

/* Full-bleed sections use viewport units; clip their scrollbar-width overshoot
   without creating a scrolling container that breaks sticky sections. */
body { overflow-x: clip; }
.nav-mobile-panel { max-width: 100%; visibility: hidden; }
.nav-mobile-panel.is-open { visibility: visible; }
@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .hero-globe-canvas, .hero-globe-pin { display: none !important; }
  .hero-globe.is-live .hero-globe-fallback { display: block; opacity: 1; }
}