/* ============================================================
   Monteith Ranch · monteithranch.com
   Heritage Deco Institutional (forest-green / gold) · TMN Creative
   ============================================================ */

:root {
  /* Brand color DNA, extracted from source CSS variables */
  --ink: #0B1F17;
  --navy-deep: #0F2A20;
  --navy: #1B3A2D;
  --navy-soft: #2D4A36;
  --gold: #D4AF65;
  --gold-deep: #9C7A33;
  --gold-warm: #E8D5A2;
  --gold-text: #6E5616;
  --parchment: #F5F0E8;
  --parchment-warm: #EBE3D4;
  --paper: #FCFAF3;
  --surface-card: #FFFDF7;
  --surface-card-2: #FBF7EE;
  --stone: #6A6456;
  --stone-light: #C9C0AF;
  --gold-label: #5F4E16;
  --linkedin: #0A66C2;
  --linkedin-dark: #004182;

  --fg-dark: #182A20;
  --fg-dark-muted: #4A5A4C;
  --fg-light: #F5F0E8;
  --fg-light-muted: #C9C0AF;
  --fg-light-faint: #A7A08B;

  --line-gold: rgba(212, 175, 101, 0.38);
  --line-gold-soft: rgba(212, 175, 101, 0.2);
  --line-navy: rgba(27, 58, 45, 0.14);
  --line-onnavy: rgba(232, 214, 160, 0.18);
  --line-control: rgba(27, 58, 45, 0.55);
  --line-gold-strong: rgba(212, 175, 101, 0.62);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-script: "Pinyon Script", cursive;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --space-1: clamp(2rem, 4vw, 3.5rem);
  --space-2: clamp(3.5rem, 7vw, 6.5rem);
  --space-3: clamp(5rem, 10vw, 9rem);
  --space-4: clamp(7rem, 13vw, 12rem);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: 1280px;
  --max-wide: 1440px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-std: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Motion scale */
  --dur-1: 160ms;
  --dur-2: 220ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --dur-5: 640ms;
  --move-sm: 12px;
  --move-md: 20px;

  /* ----- Premium motion system (signature vocabulary) -----
     One signature moment (What We Do deal stack); restraint everywhere else.
     Easings: premium-out for reveals/hero, measured for stat/section, controlled for paired in/out. */
  --ease-premium-out: cubic-bezier(0.16, 1, 0.3, 1);   /* == --ease-out */
  --ease-measured:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-controlled:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;     /* micro feedback */
  --dur-hover: 200ms;    /* hover transitions */
  --dur-reveal: 620ms;   /* viewport reveal */
  --dur-section: 720ms;  /* section intro / rule draw */
  --dur-stat: 800ms;     /* count-up (desktop) */
  --reveal-y: 24px;      /* standard desktop reveal travel */
  --reveal-y-sm: 16px;   /* mobile / group-child reveal travel */
  --hover-lift: -2px;    /* max card lift */
  --arrow-move: 4px;     /* directional-link arrow nudge */
  --wwd-pin-top: 96px;   /* sticky deal-stack top offset (88–112) */

  /* Elevation — warm, navy-toned (subtle ambient + key) */
  --elev-1: 0 1px 2px rgba(27, 58, 45, 0.04), 0 2px 6px rgba(27, 58, 45, 0.05);
  --elev-2: 0 2px 4px rgba(27, 58, 45, 0.05), 0 10px 24px rgba(27, 58, 45, 0.08);
  --elev-hover: 0 1px 0 var(--line-gold), 0 20px 48px -28px rgba(11, 31, 23, 0.52);

  --max-text: 760px;
  --gap-head: clamp(2.4rem, 4.5vw, 3.6rem);

  --header-h: 82px;
}

/* ---------- Cross-page transitions (progressive) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}
/* Persist the masthead across navigations so the site reads as one continuous surface (supporting browsers) */
.site .logo { view-transition-name: en-masthead; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
/* Keep anchored/focused targets clear of the sticky mobile CTA bar when it is shown */
@media (max-width: 1023px) { html { scroll-padding-bottom: 76px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* `clip` prevents horizontal overflow WITHOUT creating a scroll container, so
   descendant position:sticky (the deal pile + sticky intros) still pins.
   Gated by @supports so engines without `clip` (Safari < 16) fall back to the
   default `visible` -- where sticky also works -- rather than `hidden`, which
   would make the body a scroll container and silently break every sticky.
   Decorative horizontal bleeds (hero eagle, invest sunray) are already clipped
   by their own overflow:hidden parents, so `visible` here is safe.
   CRITICAL: clip the BODY only, never the <html> root. Any overflow other than
   visible on the root element makes iOS Safari treat <html> as the scroll
   container, which breaks the position:fixed header (it drifts/lags down during
   momentum scroll instead of pinning). The body clip still contains the bleeds. */
@supports (overflow-x: clip) { body { overflow-x: clip; } }
body {
  margin: 0;
  text-rendering: optimizeLegibility;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.0625rem);
  line-height: 1.65;
  color: var(--fg-dark);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-kerning: normal;
  font-optical-sizing: auto;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  margin: 0; font-family: var(--font-display); line-height: 1.04; letter-spacing: -0.01em; font-weight: 400;
  text-wrap: balance; font-feature-settings: "kern" 1, "liga" 1;
}
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--gold); color: var(--navy-deep); }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.dark :focus-visible, .darker :focus-visible, .hero :focus-visible, .subhero :focus-visible,
.cta-band :focus-visible, .footer :focus-visible, .mobile-menu :focus-visible,
.lightbox :focus-visible, .contact-card :focus-visible, .direct-card :focus-visible,
.sticky-cta :focus-visible, .site :focus-visible { outline-color: var(--gold); }
.btn:focus-visible, .nav-cta:focus-visible, .filter-chip:focus-visible, .text-link:focus-visible {
  outline-offset: 2px; box-shadow: 0 0 0 4px rgba(212, 175, 101, 0.18);
}

/* Branded scrollbar (thumb clears 3:1 against the track; same color both renderers) */
* { scrollbar-width: thin; scrollbar-color: var(--stone) var(--parchment-warm); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--parchment-warm); }
::-webkit-scrollbar-thumb { background: var(--stone); border: 3px solid var(--parchment-warm); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--gold); color: var(--navy-deep);
  padding: 12px 20px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-wide { max-width: var(--max-wide); }

/* ---------- Type system ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-label);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--gold); flex: none; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal.in .eyebrow::before, .js .eyebrow.reveal.in::before { animation: ruleDraw 700ms var(--ease-out-quint) backwards; animation-delay: 120ms; }
  @keyframes ruleDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.dark .eyebrow, .on-dark .eyebrow, .darker .eyebrow, .subhero .eyebrow, .cta-band .eyebrow { color: var(--gold); }

.h-xl { font-size: clamp(2.9rem, 7.4vw, 6.2rem); line-height: 0.92; letter-spacing: -0.018em; }
.h-lg { font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 0.98; letter-spacing: -0.014em; }
.h-md { font-size: clamp(1.55rem, 2.8vw, 2.25rem); letter-spacing: -0.01em; }
.h-sm { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: 0; }

.serif-line {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  letter-spacing: -0.005em;
}
.em-serif { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: 0; }
.lede { font-size: clamp(1.08rem, 1.4vw, 1.22rem); line-height: 1.7; color: var(--fg-dark-muted); }
.dark .lede, .darker .lede, .hero-lede, .subhero .lede, .cta-band .lede, .invest .lede { line-height: 1.74; }
.dark .lede, .darker .lede { color: var(--fg-light-muted); }
/* Last-line widow protection on lede-tier blocks (spans opt out of the h1-h4 rule) */
.lede, .hero-lede, .statement-sub, .deal-card__desc { text-wrap: pretty; }

.mono-label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--stone);
}
.dark .mono-label { color: var(--fg-light-faint); }

/* Tabular, lining figures wherever numbers carry weight — steady, aligned, expensive */
.eyebrow, .mono-label, .hero-meta, .logo-name span, .footer-h,
.summary-stat .n, .traffic .n, .cta-phone, .award-plaque .years, .spec-cell .v,
.direct-row a, .direct-row .v, .hero-line i, .practice-num, .svc-line .n,
.svc-head .num, .tr-firm-head .years, .nav-phone, .mobile-menu-phone,
.detail-table td, .nums {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 30px;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  transition: background-color var(--dur-2) ease-out, color var(--dur-2) ease-out, border-color var(--dur-2) ease-out, transform var(--dur-2) var(--ease-out-quart), box-shadow var(--dur-2) ease-out;
}
.btn-gold {
  background: linear-gradient(180deg, #D0B25D, var(--gold));
  color: var(--navy-deep);
  box-shadow: inset 0 0 0 1px rgba(15, 42, 32, 0.18), 0 10px 24px -18px rgba(212, 175, 101, 0.72);
}
.btn-gold:hover {
  background: linear-gradient(180deg, var(--gold-warm), #CEAF58);
  box-shadow: inset 0 0 0 1px rgba(15, 42, 32, 0.16), 0 12px 28px -18px rgba(212, 175, 101, 0.82);
}
.btn-gold:active { transform: translateY(1px); }
.btn-navy { background: var(--navy); color: var(--fg-light); }
.btn-navy:hover { background: var(--navy-soft); box-shadow: 0 6px 18px -6px rgba(15, 42, 32, 0.4); }
.btn-navy:active { transform: translateY(1px); }
/* Forced-colors (Windows High Contrast): the OS drops gradient fills and box-shadow
   glows, so give buttons a real edge and form fields a real focus ring. */
@media (forced-colors: active) {
  .btn { border-color: ButtonText; }
  .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid Highlight; outline-offset: 2px; }
  :focus-visible { outline-color: Highlight; }
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(1px); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .btn-gold::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.18) 50%, transparent 58%);
    transform: translateX(-120%);
    transition: transform var(--dur-5) var(--ease-out-quart);
  }
  .btn-gold:hover::after { transform: translateX(120%); }
}

/* ---------- Brass reveal button (expanding chevron, transform-only) ----------
   A gold button whose label fades as a navy panel grows in from a brass
   chevron tab on the right (scaleX, never width). Reduced-motion / touch get
   the plain gold button. Use sparingly: one high-intent CTA. */
.btn-reveal { position: relative; overflow: hidden; padding-right: 58px; }
.btn-reveal::after { display: none; } /* no shine; the reveal is the hover */
.btn-reveal__t { position: relative; z-index: 2; }
.btn-reveal__fill {
  position: absolute; z-index: 1; inset: 5px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  transform-origin: right center; transform: scaleX(0);
}
.btn-reveal__chev {
  position: absolute; z-index: 3; top: 5px; right: 5px; bottom: 5px; width: 44px;
  display: grid; place-items: center; border-radius: var(--radius-sm);
  background: rgba(15, 42, 32, 0.14); color: var(--navy-deep);
  font-style: normal; font-size: 1.15rem; line-height: 1;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .btn-reveal__t { transition: opacity var(--dur-3) var(--ease-premium-out), transform var(--dur-3) var(--ease-premium-out); }
  .btn-reveal__fill { transition: transform var(--dur-4) var(--ease-premium-out); }
  .btn-reveal__chev { transition: color var(--dur-3) var(--ease-premium-out), background-color var(--dur-3) ease-out; }
  .btn-reveal:hover .btn-reveal__t, .btn-reveal:focus-visible .btn-reveal__t { opacity: 0; transform: translateX(-8px); }
  .btn-reveal:hover .btn-reveal__fill, .btn-reveal:focus-visible .btn-reveal__fill { transform: scaleX(1); }
  .btn-reveal:hover .btn-reveal__chev, .btn-reveal:focus-visible .btn-reveal__chev { color: var(--gold-warm); background-color: transparent; }
}

.text-link {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  font-weight: 600; text-decoration: none; color: var(--navy);
  border-bottom: 1px solid var(--line-gold); padding: 2px 0;
  transition: color var(--dur-2) ease-out, border-color var(--dur-2) ease-out;
}
.text-link:hover { color: var(--gold-text); border-color: var(--gold); }
.dark .text-link, .on-dark .text-link, .darker .text-link, .cta-band .text-link, .subhero .text-link { color: var(--gold-warm); }
.dark .text-link:hover, .on-dark .text-link:hover, .darker .text-link:hover, .cta-band .text-link:hover, .subhero .text-link:hover { color: #F0E2BC; border-color: var(--gold); }
.text-link .arrow { transition: transform var(--dur-hover) var(--ease-premium-out); }
.text-link:hover .arrow, .text-link:focus-visible .arrow { transform: translateX(var(--arrow-move)); }
/* Directional cue follows the whole card on hover/focus (institutional, consistent) */
.route-card:hover .arrow, .route-card:focus-within .arrow,
.venture-card:hover .arrow, .venture-card:focus-within .arrow,
.dossier-grid:hover .arrow,
.deal-card__inner:hover .arrow { transform: translateX(var(--arrow-move)); }

/* Social icon link (LinkedIn) */
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px; margin-left: -10px;
  color: var(--linkedin); text-decoration: none;
  transition: color var(--dur-2) ease-out, transform var(--dur-2) ease-out;
}
.social-link svg { width: 24px; height: 24px; fill: currentColor; display: block; }
.social-link:hover { color: var(--linkedin-dark); }

/* ---------- Header ---------- */
.site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: rgba(11, 31, 23, 0.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(232, 214, 160, 0.14);
  transition: background-color 280ms ease-out, box-shadow 280ms ease-out, backdrop-filter 280ms ease-out;
}
.site.scrolled {
  background: var(--ink);
  box-shadow: 0 1px 0 var(--line-onnavy), 0 14px 30px -18px rgba(0, 0, 0, 0.55);
  /* The solid background already hides the blur; dropping backdrop-filter while
     scrolling stops it re-sampling moving content every frame (Retina shimmer). */
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.site.on-light-page { background: rgba(245, 240, 232, 0); }
.site.on-light-page.scrolled { background: rgba(15, 42, 32, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
.wrap.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: 19px; padding-bottom: 19px;
  max-width: var(--max-wide);
  transition: padding 280ms ease-out;
}
.site.scrolled .wrap.nav { padding-top: 14px; padding-bottom: 14px; }

.logo { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: var(--fg-light); }
.logo img { width: auto; flex: none; }
.logo-name { display: flex; flex-direction: column; line-height: 1; }
.logo-name b {
  font-family: var(--font-display); font-weight: 500; font-size: 1.72rem;
  letter-spacing: 0.005em; color: var(--fg-light);
}
.logo-name span {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-top: 5px;
}

.desktop-nav { display: none; }
.nav-right { display: none; }

@media (min-width: 1024px) {
  .desktop-nav { display: flex; align-items: center; gap: 2px; }
  .desktop-nav a {
    position: relative; display: inline-flex; align-items: center; min-height: 44px;
    padding: 6px 13px; text-decoration: none; font-weight: 500; font-size: 0.82rem;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--fg-light-muted); transition: color var(--dur-2) ease-out;
  }
  .desktop-nav a::after {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 1px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-3) var(--ease-out-quart);
  }
  .desktop-nav a:hover { color: var(--fg-light); }
  .desktop-nav a:hover::after { transform: scaleX(1); }
  .desktop-nav a[aria-current="page"] { color: var(--gold-warm); }
  .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .nav-right { display: flex; align-items: center; gap: 20px; }
  .nav-phone {
    font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.06em;
    color: var(--fg-light-muted); text-decoration: none; transition: color 200ms ease-out;
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .nav-phone:hover { color: var(--gold-warm); }
  .nav-cta {
    display: inline-flex; align-items: center; min-height: 44px; padding: 10px 22px;
    border: 1px solid var(--line-gold-strong); border-radius: var(--radius-sm);
    color: var(--gold-warm); font-weight: 600; font-size: 0.92rem; text-decoration: none;
    transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
  }
  .nav-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
}

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 12px;
  background: none; border: 1px solid var(--line-onnavy); border-radius: var(--radius-sm);
  transition: border-color 200ms ease-out, background-color 200ms ease-out;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--gold-warm); transition: transform 200ms ease-out; }
.nav-toggle:hover { border-color: var(--line-gold); background: rgba(232, 214, 160, 0.04); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--navy-deep);
  opacity: 0; visibility: hidden;
  transition: opacity 340ms var(--ease-std), visibility 0s linear 340ms;
}
.mobile-menu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url(/images/pattern-cartouche.webp);
  background-size: 360px auto;
  opacity: 0.055;
  mix-blend-mode: screen;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity 340ms var(--ease-std); }
.mobile-menu-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; height: 100%;
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.mobile-menu-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 20px; padding-bottom: 20px;
}
.menu-close {
  position: relative; width: 48px; height: 48px;
  background: none; border: 1px solid var(--line-onnavy); border-radius: var(--radius-sm);
}
.menu-close span { position: absolute; left: 12px; top: 22px; width: 22px; height: 2px; background: var(--gold-warm); }
.menu-close span:first-child { transform: rotate(45deg); }
.menu-close span:last-child { transform: rotate(-45deg); }

.mobile-menu-nav { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.mobile-menu-link {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 6.5vw, 30px);
  color: var(--fg-light); text-decoration: none;
  padding: 15px 0; border-bottom: 1px solid rgba(232, 214, 160, 0.08);
  opacity: 0; transform: translateY(14px);
  transition: opacity 260ms ease-out, transform 260ms ease-out, color 200ms ease-out;
}
.mobile-menu-link i {
  font-style: normal; font-family: var(--font-mono); font-weight: 400;
  font-size: 0.7rem; letter-spacing: 0.18em; color: var(--gold);
}
.mobile-menu-link:hover { color: var(--gold-warm); }
.mobile-menu-link[aria-current="page"] { color: var(--gold-warm); }
.mobile-menu.is-open .mobile-menu-link { opacity: 1; transform: translateY(0); }
.mobile-menu.is-open .mobile-menu-link:nth-child(1) { transition-delay: 120ms; }
.mobile-menu.is-open .mobile-menu-link:nth-child(2) { transition-delay: 170ms; }
.mobile-menu.is-open .mobile-menu-link:nth-child(3) { transition-delay: 220ms; }
.mobile-menu.is-open .mobile-menu-link:nth-child(4) { transition-delay: 270ms; }
.mobile-menu.is-open .mobile-menu-link:nth-child(5) { transition-delay: 320ms; }
.mobile-menu.is-open .mobile-menu-link:nth-child(6) { transition-delay: 370ms; }

.mobile-menu-footer { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; }
.mobile-menu-phone {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.08em;
  color: var(--gold-warm); text-decoration: none;
  border: 1px solid var(--line-onnavy); border-radius: var(--radius-sm);
}
body.menu-open { overflow: hidden; position: fixed; width: 100%; }
@media (min-width: 1024px) { .mobile-menu { display: none; } }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  color: var(--fg-light);
  min-height: 94vh;
  min-height: 94svh;
  display: flex; flex-direction: column;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(92% 86% at 74% 44%, rgba(212, 175, 101, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(21, 48, 36, 0.28), rgba(11, 31, 23, 0.88));
  transform: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 31, 23, 0.46) 0%, rgba(11, 31, 23, 0.22) 50%, rgba(11, 31, 23, 0.4) 100%),
    linear-gradient(180deg, rgba(11, 31, 23, 0.08) 0%, rgba(11, 31, 23, 0.46) 100%);
}
.hero-atmosphere {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(42% 42% at 78% 45%, rgba(232, 214, 160, 0.17), rgba(212, 175, 101, 0.055) 42%, transparent 72%),
    radial-gradient(62% 58% at 48% 20%, rgba(74, 100, 84, 0.14), transparent 64%);
  mix-blend-mode: screen;
  opacity: 0.74;
}
.hero-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.105;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 86%, transparent 100%);
}
.hero-vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(110% 94% at 50% 46%, transparent 0%, rgba(11, 31, 23, 0.16) 64%, rgba(11, 31, 23, 0.68) 100%),
    linear-gradient(180deg, rgba(11, 31, 23, 0.1) 0%, transparent 30%, rgba(11, 31, 23, 0.44) 100%);
}
.hero-video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: saturate(0.68) contrast(1.08) brightness(0.4);
  pointer-events: none;
}
.hero-frame {
  /* deco hairline frame inset */
  position: absolute; inset: clamp(10px, 1.6vw, 22px); pointer-events: none; z-index: 3;
  border: 1px solid var(--line-onnavy);
  display: none;
}
.hero-frame::before, .hero-frame::after,
.hero-frame i::before, .hero-frame i::after {
  content: ""; position: absolute; width: 26px; height: 26px;
  border-color: var(--gold); border-style: solid;
}
.hero-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hero-frame::after { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.hero-frame i::before { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.hero-frame i::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
@media (min-width: 1024px) { .hero-frame { display: block; } }

.hero-mark {
  position: absolute; z-index: 3;
  right: clamp(-110px, -5vw, -20px); bottom: -6%;
  height: min(78vh, 640px);
  height: min(78vh, 82svh); width: auto;
  aspect-ratio: 1091 / 1600;
  --eagle-rest: 0.48;
  --mark-x: 0px;
  --mark-y: 0px;
  opacity: var(--eagle-rest);
  transform: translate3d(var(--mark-x), var(--mark-y), 0);
  pointer-events: none; user-select: none;
  display: block;
}
.hero-mark-glow,
.hero-mark::before,
.hero-mark::after,
.hero-eagle {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero-mark-glow {
  background: radial-gradient(closest-side, rgba(232, 214, 160, 0.24), rgba(212, 175, 101, 0.08) 48%, transparent 76%);
  filter: blur(24px);
  opacity: 0.82;
  transform: translate3d(calc(var(--mark-x) * -0.35), calc(var(--mark-y) * -0.35), 0) scale(1.04);
}
.hero-mark::before,
.hero-mark::after {
  content: "";
  -webkit-mask: url(/images/eagle-mark.webp) center / contain no-repeat;
  mask: url(/images/eagle-mark.webp) center / contain no-repeat;
}
.hero-mark::before {
  background:
    linear-gradient(104deg, rgba(120, 95, 40, 0.78) 0%, var(--gold-deep) 20%, var(--gold-warm) 45%, var(--gold) 62%, rgba(98, 78, 30, 0.82) 100%);
  opacity: 0.9;
  filter: drop-shadow(0 16px 42px rgba(212, 175, 101, 0.16));
}
.hero-mark::after {
  background: linear-gradient(112deg, transparent 0%, transparent 38%, rgba(255, 244, 207, 0.88) 48%, transparent 58%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-120%, 0, 0);
}
.hero-eagle {
  object-fit: contain;
  opacity: 0.22;
  filter: sepia(0.45) saturate(0.9) brightness(0.9);
  mix-blend-mode: screen;
}
.hero-inner {
  position: relative; z-index: 4;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--header-h) + clamp(6px, 1vh, 20px));
  padding-bottom: clamp(8px, 1.4vh, 18px);
  max-width: var(--max);
  margin-inline: auto;
}
.hero-meta {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  margin-bottom: clamp(10px, 1.6vh, 16px);
}
.hero-meta .sep { color: var(--gold); opacity: 0.7; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6.6vw, 6.4rem);
  line-height: 0.92; letter-spacing: -0.02em; max-width: 9.5ch; font-weight: 500;
  color: var(--fg-light);
}
.hero h1 .gold-word { color: var(--gold-warm); font-style: normal; }
.hero-lede {
  max-width: 50ch; margin-top: clamp(12px, 1.8vh, 18px);
  font-size: clamp(1.04rem, 1.2vw, 1.16rem); line-height: 1.72; color: rgba(255, 255, 255, 0.77);
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(12px, 1.9vh, 22px); }

.hero-lines {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px);
  margin-top: clamp(10px, 1.8vh, 22px);
  padding-top: clamp(8px, 1.3vh, 15px);
  border-top: 1px solid var(--line-onnavy);
  max-width: 620px;
}
.hero-line {
  display: flex; align-items: baseline; gap: 10px; text-decoration: none;
  padding: 8px 22px 8px 0; min-height: 44px;
  color: rgba(255, 255, 255, 0.92); font-family: var(--font-body); font-weight: 600;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem); letter-spacing: 0;
  transition: color 200ms ease-out, transform 200ms ease-out;
}
.hero-line i { font-style: normal; font-family: var(--font-mono); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.16em; color: var(--gold); }
.hero-line:hover { color: var(--gold-warm); }
@media (hover: hover) { .hero-line:hover { transform: translateX(3px); } }

.hero-award {
  position: absolute; z-index: 5;
  right: clamp(28px, 4vw, 64px); top: calc(var(--header-h) + clamp(8px, 1.6vh, 20px));
  display: none; align-items: center; gap: 16px;
  background: rgba(11, 31, 23, 0.48);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line-onnavy); border-radius: var(--radius-md);
  padding: 17px 22px; max-width: 340px;
  text-decoration: none; color: var(--fg-light);
  transition: border-color 240ms ease-out, transform 240ms ease-out;
}
.hero-award:hover { border-color: var(--line-gold); transform: translateY(-2px); }
.hero-award img { width: 104px; height: 42px; object-fit: contain; background: #fff; padding: 5px 8px; border-radius: var(--radius-sm); flex: none; }
.hero-award b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.2; }
.hero-award span { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.hero-award > span { margin-top: 0; color: inherit; letter-spacing: 0; text-transform: none; }
@media (min-width: 1100px) { .hero-award { display: flex; } }
/* Fallback: if backdrop-filter is unsupported/disabled, raise opacity so the plaque stays legible over the video */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-award { background: rgba(11, 31, 23, 0.82); }
}

.hero-ticker {
  position: relative; z-index: 4;
  border-top: 1px solid rgba(15, 42, 32, 0.14);
  background: linear-gradient(180deg, var(--paper), var(--surface-card-2));
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.14);
}
.hero-ticker a {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 13px var(--gutter); max-width: var(--max-wide); margin: 0 auto;
  text-decoration: none; color: var(--fg-dark-muted);
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 200ms ease-out;
}
.hero-ticker a:hover { color: var(--navy); }
/* Engraved rule — a short gold hairline that draws in on load, extends on hover */
.hero-ticker .t-rule {
  width: 22px; height: 1px; background: var(--gold); flex: none;
  transform-origin: left;
  transition: width 260ms var(--ease-out-quart);
}
.hero-ticker a:hover .t-rule { width: 38px; }
.hero-ticker .t-strong { color: var(--navy); font-weight: 700; }
.hero-ticker .t-arrow { margin-left: auto; color: var(--gold); }
/* On phones the ticker line gets tight; drop the trailing acreage detail */
@media (max-width: 600px) { .hero-ticker .t-meta-extra { display: none; } }

/* ---------- Section scaffolding ---------- */
section { position: relative; }
.sec { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.sec-tight { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.sec-deep { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.dark {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E") 0 0 / 160px 160px,
    radial-gradient(120% 100% at 85% 0%, rgba(212, 175, 101, 0.05), transparent 55%),
    linear-gradient(168deg, var(--navy), var(--navy-deep));
  background-blend-mode: soft-light, normal, normal;
  color: var(--fg-light);
}
.darker {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E") 0 0 / 160px 160px,
    radial-gradient(120% 100% at 15% 0%, rgba(212, 175, 101, 0.045), transparent 55%),
    linear-gradient(168deg, var(--navy-deep), var(--ink));
  background-blend-mode: soft-light, normal, normal;
  color: var(--fg-light);
}
.warm { background: var(--parchment-warm); }
.paper { background: var(--paper); }

/* Brass seam at the major light->dark pivot (homepage opportunities band) */
#current-opportunities {
  box-shadow: inset 0 1px 0 var(--line-gold-soft);
}

.opportunity-narrative {
  display: grid;
  gap: clamp(2.2rem, 5vw, 4rem);
}
.opp-stage { display: none; }
.opp-chapters {
  display: grid;
  gap: clamp(2.4rem, 5vw, 4rem);
}
.opp-chapter {
  min-width: 0;
}
.opp-chapter__media {
  margin-bottom: clamp(1.35rem, 3vw, 2rem);
}
#current-opportunities .opp-chapter:nth-child(-n+2) .opp-chapter__media img {
  object-fit: contain;
  background: rgba(11, 31, 23, 0.62);
}
#current-opportunities .opp-chapter:nth-child(3) .opp-chapter__media img {
  object-fit: cover;
}
.opp-chapter .hero-actions {
  align-items: center;
}
@media (min-width: 980px) and (prefers-reduced-motion: no-preference) {
  .js .opportunity-narrative {
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.92fr);
    align-items: start;
  }
  .js .opp-stage {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
  .js .opp-stage__frame {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border: 1px solid var(--line-onnavy);
    background:
      radial-gradient(70% 70% at 70% 16%, rgba(212, 175, 101, 0.12), transparent 62%),
      linear-gradient(168deg, rgba(15, 42, 32, 0.98), rgba(11, 31, 23, 0.94));
    box-shadow: 0 1px 0 var(--line-gold-soft), 0 34px 80px -52px rgba(0, 0, 0, 0.86);
  }
  .js .opp-stage__frame::before {
    content: "";
    position: absolute; inset: 14px;
    border: 1px solid rgba(232, 214, 160, 0.12);
    pointer-events: none;
    z-index: 4;
  }
  /* Bottom scrim: mutes the image's own baked-in title/footer so the stage
     index + caption + progress rail read on a clean dark band (no collision). */
  .js .opp-stage__frame::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(11, 31, 23, 0.62) 34%,
      rgba(11, 31, 23, 0.96) 62%,
      rgba(11, 31, 23, 0.96) 100%);
    pointer-events: none;
    z-index: 3;
  }
  .js .opp-stage__media {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    padding: clamp(16px, 2vw, 26px);
    opacity: 0;
    transform: scale(1.01);
    transition: opacity 520ms var(--ease-premium-out), transform 720ms var(--ease-premium-out);
  }
  .js .opp-stage__media.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
  }
  .js .opp-stage__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(11, 31, 23, 0.28);
    box-shadow: 0 22px 54px -36px rgba(0, 0, 0, 0.8);
  }
  .js .opp-stage__media[data-fit="cover"] { padding: 0; }
  .js .opp-stage__media[data-fit="cover"] img {
    object-fit: cover;
    background: transparent;
  }
  .js .opp-stage__media[data-fit="cover"].is-active img {
    transform: scale(1.018);
    transition: transform 900ms var(--ease-premium-out);
  }
  .js .opp-stage__meta {
    position: absolute; left: clamp(18px, 2.2vw, 28px); right: clamp(18px, 2.2vw, 28px); bottom: clamp(16px, 2vw, 24px);
    z-index: 5;
    display: flex; align-items: center; gap: 16px;
    color: var(--gold-warm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  }
  .js .opp-stage__index {
    color: var(--gold);
    white-space: nowrap;
    transition: opacity 240ms var(--ease-premium-out);
  }
  .js .opp-stage__caption {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 240ms var(--ease-premium-out);
  }
  /* Meta text fades out, swaps, fades back in so it tracks the image cross-fade */
  .js .opp-stage__index.is-swapping, .js .opp-stage__caption.is-swapping { opacity: 0; }
  .js .opp-stage__rail {
    position: absolute; left: clamp(18px, 2.2vw, 28px); right: clamp(18px, 2.2vw, 28px); bottom: clamp(40px, 3.2vw, 48px);
    z-index: 5;
    height: 1px;
    background: rgba(232, 214, 160, 0.18);
  }
  .js .opp-stage__rail i {
    display: block;
    width: 33.333%;
    height: 100%;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-warm));
    transform-origin: left center;
    transition: width 520ms var(--ease-premium-out);
  }
  .js .opp-chapters {
    gap: clamp(5rem, 15vh, 9rem);
    padding: clamp(0.5rem, 3vh, 1.8rem) 0 clamp(3rem, 8vh, 5rem);
  }
  .js .opp-chapter {
    min-height: clamp(330px, 54vh, 560px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: clamp(1rem, 2.5vw, 2rem);
    border-left: 1px solid rgba(232, 214, 160, 0.18);
    opacity: 0.58;
    transition: opacity 420ms var(--ease-premium-out), transform 420ms var(--ease-premium-out), border-color 420ms var(--ease-premium-out);
  }
  .js .opp-chapter.is-active {
    opacity: 1;
    transform: translateX(8px);
    border-left-color: var(--gold);
  }
  .js .opp-chapter__media { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .opp-chapter.reveal.in .opp-chapter__media .frame-clip img {
    animation: mediaReveal 700ms var(--ease-premium-out) backwards;
    animation-delay: 90ms;
  }
}

.sec-head { max-width: var(--max-text); margin-bottom: var(--gap-head); }
.sec-head h2 { margin-top: 14px; }
.sec-head .after { margin-top: 16px; }

/* deco corner ticks for plaque cards */
.deco-card { position: relative; }
.deco-card::before, .deco-card::after, .deco-card .tick::before, .deco-card .tick::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border-color: var(--gold); border-style: solid; pointer-events: none;
}
.deco-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.deco-card::after { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.deco-card .tick::before { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.deco-card .tick::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* ---------- Recognition band ---------- */
.recognition { background: var(--parchment); }
.recognition::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 52%);
}
.recognition > .wrap { position: relative; }
.recognition-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.recognition-grid > * { min-width: 0; }
@media (min-width: 900px) { .recognition-grid { grid-template-columns: 1fr 0.78fr; } }
.award-plaque {
  background: linear-gradient(180deg, var(--paper), var(--surface-card-2)); border: 1px solid var(--line-navy);
  outline: 1px solid rgba(212, 175, 101, 0.18); outline-offset: -10px;
  padding: clamp(2rem, 4vw, 3.1rem);
  display: flex; flex-direction: column; gap: 18px;
}
.award-plaque img { width: min(280px, 70%); height: auto; }
.award-plaque .years {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.1rem, 3.8vw, 3rem); letter-spacing: 0.01em; color: var(--navy);
}
.award-plaque .years em { font-style: normal; color: var(--gold-deep); padding: 0 6px; }
.award-plaque p { margin: 0; color: var(--fg-dark-muted); }

/* ---------- Proof band ---------- */
.proof-band {
  padding-top: clamp(2.8rem, 5vw, 4.3rem);
  padding-bottom: clamp(2.8rem, 5vw, 4.3rem);
  border-top: 1px solid var(--line-onnavy);
  border-bottom: 1px solid var(--line-onnavy);
}
.proof-band-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 14px 32px; margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}
.proof-band-head p:last-child {
  margin: 0; max-width: 44ch; color: var(--fg-light-muted); font-size: 0.98rem;
}

/* ---------- What we do ledger ---------- */
.wwd-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.wwd-grid > * { min-width: 0; }
/* Mobile only: the hero badge becomes a faint gold seal on this section. */
.wwd-mark { display: none; }
@media (max-width: 700px) {
  /* overflow: clip (not hidden) hides the watermark bleed WITHOUT making .wwd a
     scroll container, so the deal-card position:sticky stacking still works. */
  .wwd { position: relative; overflow: clip; }
  .wwd > .wrap { position: relative; z-index: 1; }
  .wwd-mark {
    display: block; position: absolute; z-index: 0; pointer-events: none;
    width: min(64vw, 320px); height: auto; aspect-ratio: 1 / 1;
    top: clamp(36px, 11vw, 92px); right: -14vw; opacity: 0.12;
  }
}
@media (min-width: 1024px) {
  .wwd-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    column-gap: clamp(2.5rem, 4vw, 3rem);
  }
  .wwd-intro { position: sticky; top: 120px; max-width: 660px; }
}
.practice { border-top: 1px solid var(--line-navy); }
.practice-row {
  border-bottom: 1px solid var(--line-navy);
  transition: background-color 260ms ease-out;
}
.practice-row:hover { background: rgba(212, 175, 101, 0.045); }
.practice-summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: clamp(1.2rem, 3vw, 2.4rem); row-gap: 4px; align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2.3rem) clamp(0.2rem, 1vw, 1rem);
}
.practice-summary::-webkit-details-marker { display: none; }
.practice-summary > .practice-num { grid-column: 1; grid-row: 1; }
.practice-summary > h3 { grid-column: 2; grid-row: 1; font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.practice-summary > .practice-kicker { grid-column: 2; grid-row: 2; }
.practice-summary > .practice-cue { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 11px; }
.practice-cue-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); white-space: nowrap; }
.practice-cue-label::before { content: "Expand"; }
.practice-row[open] .practice-cue-label::before { content: "Close"; }
.practice-num {
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
  color: var(--gold-text); letter-spacing: 0.08em;
}
.practice-toggle { position: relative; width: 20px; height: 20px; flex: none; }
.practice-toggle::before, .practice-toggle::after {
  content: ""; position: absolute; background: var(--gold-text);
  transition: transform 280ms ease, opacity 280ms ease;
}
.practice-toggle::before { left: 0; right: 0; top: 50%; height: 1.6px; transform: translateY(-50%); }
.practice-toggle::after { top: 0; bottom: 0; left: 50%; width: 1.6px; transform: translateX(-50%); }
.practice-row[open] .practice-toggle::after { opacity: 0; transform: translateX(-50%) scaleY(0); }
.practice-kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--stone); }
.practice-detail { padding: 4px clamp(0.2rem, 1vw, 1rem) clamp(1.6rem, 3vw, 2.4rem); }
.practice-detail > p { margin: 0; max-width: 56ch; color: var(--fg-dark-muted); }
.practice-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 8px 24px; margin-top: 18px; max-width: 560px; }
.practice-list li {
  position: relative; padding: 6px 0 6px 20px; font-size: 1rem; color: var(--fg-dark);
}
.practice-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 9px; height: 1.5px; background: var(--gold-deep); }
.practice-note { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); margin-top: 16px; }

/* ---------- Listing dossier (home) + cards ---------- */
.dossier-grid { display: grid; gap: clamp(2.2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 980px) { .dossier-grid { grid-template-columns: 1.08fr 0.92fr; } }
.dossier-media { position: relative; }
.dossier-media .frame {
  position: relative; border: 1px solid var(--line-onnavy); padding: clamp(10px, 1.6vw, 18px);
  background: rgba(15, 42, 32, 0.38);
  box-shadow: 0 24px 70px -48px rgba(0, 0, 0, 0.88);
}
.dossier-media .frame::after {
  content: ""; position: absolute; inset: clamp(10px, 1.6vw, 18px);
  pointer-events: none; box-shadow: inset 0 0 0 1px rgba(232, 214, 160, 0.14);
}
.dossier-media img { width: 100%; aspect-ratio: 16 / 12.3; object-fit: cover; }
.dossier-tag {
  position: absolute; top: clamp(-14px, -1vw, -12px); left: clamp(18px, 3vw, 30px);
  background: var(--gold); color: var(--navy-deep);
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 14px;
}
.spec-rail {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border: 1px solid var(--line-onnavy); margin-top: 26px;
}
.dossier-copy { margin: 16px 0 0; max-width: 48ch; color: var(--fg-light-muted); }
.spec-cell { padding: 14px 18px; border-top: 1px solid var(--line-onnavy); }
.spec-cell:nth-child(-n+2) { border-top: 0; }
.spec-cell:nth-child(odd) { border-right: 1px solid var(--line-onnavy); }
.spec-cell .k { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-light-faint); display: block; margin-bottom: 5px; }
.spec-cell .v { font-family: var(--font-mono); font-size: 0.95rem; color: var(--gold-warm); }

.traffic { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 24px); margin-top: 30px; }
.traffic .t {
  border-top: 1px solid var(--line-onnavy); padding-top: 14px;
}
.traffic .n {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: 0; color: var(--fg-light);
}
.traffic .n, .traffic .l, .summary-stat .n, .summary-stat .l { display: block; }
.traffic .l { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-light-faint); margin-top: 6px; line-height: 1.5; }

/* ---------- Ventures ---------- */
.ventures-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.ventures-grid > * { min-width: 0; }
@media (min-width: 900px) {
  .ventures-grid { grid-template-columns: 1.06fr 0.94fr; align-items: start; }
  .venture-card:nth-child(2) { margin-top: var(--space-2); }
}
.venture-card {
  display: block; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, var(--surface-card), var(--surface-card-2)); border: 1px solid var(--line-navy);
  box-shadow: none;
  transition: transform var(--dur-3) var(--ease-out-quart), box-shadow var(--dur-3) var(--ease-out-quart), border-color var(--dur-3) var(--ease-out-quart);
}
.venture-card:hover { border-color: var(--line-gold); box-shadow: 0 18px 42px -32px rgba(11, 31, 23, 0.44); transform: translateY(-2px); }
.venture-card figure { margin: 0; overflow: hidden; }
.venture-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 900ms var(--ease-out); }
.venture-card:hover img { transform: scale(1.04); }
.venture-body { padding: clamp(1.4rem, 3vw, 2.2rem); }
.venture-body .mono-label { display: block; margin-bottom: 12px; color: var(--gold-text); }
.venture-body h3 { font-size: clamp(1.55rem, 2.6vw, 2rem); }
.venture-body p { margin: 12px 0 18px; color: var(--fg-dark-muted); }
.venture-body .text-link { font-size: 0.95rem; }


/* ---------- Contact CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--navy-deep); color: var(--fg-light); border-top: 1px solid var(--line-gold-soft); box-shadow: inset 0 1px 0 rgba(232, 214, 160, 0.1); }
.cta-band .bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.34; filter: saturate(0.7);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(15, 42, 32, 0.94) 18%, rgba(15, 42, 32, 0.55) 62%, rgba(15, 42, 32, 0.82));
}
.cta-inner { position: relative; z-index: 2; }
.cta-phone {
  display: inline-block; margin-top: 10px; text-decoration: none;
  font-variant-numeric: tabular-nums lining-nums;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.2rem, 5.8vw, 4.1rem); letter-spacing: 0.01em; color: var(--gold-warm);
  transition: color 200ms ease-out;
}
.cta-phone:hover { color: var(--gold); }
.cta-mail { margin-top: 6px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 30px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--fg-light-muted); font-size: 0.95rem; border-top: 1px solid rgba(232, 214, 160, 0.1); }
.footer-grid {
  display: grid; gap: clamp(2.2rem, 5vw, 3rem);
  padding-top: var(--space-2); padding-bottom: var(--space-1);
}
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
/* Mobile/tablet: brand full-width, then Hunting / Cattle Co. / The Ranch as 3
   side-by-side columns so the footer stays short. */
@media (max-width: 799px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(0.6rem, 2.6vw, 1.5rem);
    row-gap: clamp(1.8rem, 5vw, 2.4rem);
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col { text-align: left; }
  .footer .footer-h { margin-bottom: 10px; min-height: 2.4em; }
  .footer-col a { display: flex; justify-content: flex-start; text-align: left; font-size: 0.82rem; min-height: 44px; overflow-wrap: break-word; }
}
.footer .logo-name b { font-size: 1.45rem; }
.footer-brand p { margin: 18px 0 0; max-width: 36ch; line-height: 1.7; }
.footer-brand .lic { margin-top: 14px; font-size: 0.82rem; color: var(--fg-light-faint); }
.footer .footer-h {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
}
.footer-col li { margin-bottom: 0; }
.footer-col a {
  display: inline-flex; min-height: 44px; align-items: center;
  color: var(--fg-light-muted); text-decoration: none; transition: color 200ms ease-out;
}
.footer-col a:hover { color: var(--gold-warm); }
.footer-trec {
  border-top: 1px solid rgba(232, 214, 160, 0.1);
  padding-top: 26px; padding-bottom: 26px;
  font-size: 0.82rem; color: var(--fg-light-faint); line-height: 1.7;
}
.footer-trec a { color: var(--fg-light-muted); text-decoration: underline; text-underline-offset: 3px; transition: color 200ms ease-out; }
.footer-trec a:hover { color: var(--gold-warm); }
.footer-base {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(232, 214, 160, 0.1);
  padding-top: 22px; padding-bottom: max(22px, env(safe-area-inset-bottom));
  font-size: 0.82rem; color: var(--fg-light-faint);
}
.footer-base nav { display: flex; gap: 18px; }
.footer-base a { color: var(--fg-light-faint); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; transition: color 200ms ease-out; }
.footer-base a:hover { color: var(--gold-warm); }
/* Sister Ventures — single horizontal row below the two balanced columns */
.footer-ventures {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 26px;
  border-top: 1px solid rgba(232, 214, 160, 0.1); padding-top: 22px; padding-bottom: 2px;
}
.footer-ventures .footer-h { margin: 0; }
.footer-ventures ul { display: flex; flex-wrap: wrap; gap: 0 26px; margin: 0; padding: 0; list-style: none; }
.footer-ventures a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.88rem; color: var(--fg-light-muted); text-decoration: none; transition: color 200ms ease-out; }
.footer-ventures a:hover { color: var(--gold-warm); }
/* Legal links + ultra-subtle design credit, grouped at the footer's right */
.footer-base-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.footer-credit { font-size: 0.72rem; letter-spacing: 0.02em; color: var(--fg-light-faint); opacity: 0.78; }
.footer-credit:hover { opacity: 1; }
/* Company LinkedIn — refined ghost button in the footer brand block */
.footer-linkedin {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 9px 12px; border: 1px solid var(--line-onnavy); border-radius: var(--radius-sm);
  color: var(--fg-light-muted); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: color 220ms ease-out, border-color 220ms ease-out, background-color 220ms ease-out, transform 220ms ease-out, box-shadow 220ms ease-out;
}
.footer-linkedin svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.footer-linkedin:hover {
  color: var(--gold-warm); border-color: var(--line-gold);
  background: rgba(212, 175, 101, 0.06); transform: translateY(-1px);
  box-shadow: 0 8px 22px -16px rgba(212, 175, 101, 0.55);
}
/* Logo + LinkedIn button share the top row of the footer brand block */
.footer-brand-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; }
/* Mobile: show button beside logo; desktop: hide it there, show larger version below description */
.footer-linkedin-desktop { display: none; }
@media (min-width: 601px) {
  .footer-linkedin-mobile { display: none; }
  .footer-linkedin-desktop { display: inline-flex; margin-top: 20px; padding: 14px 26px; font-size: 1rem; }
  .footer-linkedin-desktop svg { width: 22px; height: 22px; }
}
/* Center the footer link columns (Services, Company) and their headings */
.footer-col { text-align: center; }

/* ---------- Subhero (inner pages) ---------- */
.subhero {
  position: relative; overflow: hidden;
  background: var(--navy); color: var(--fg-light);
  padding-top: calc(var(--header-h) + clamp(48px, 9vw, 110px));
  padding-bottom: clamp(40px, 7vw, 84px);
}
.subhero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(50% 60% at 88% 10%, rgba(212, 175, 101, 0.1), transparent 60%),
    linear-gradient(165deg, var(--navy), var(--navy-deep));
}
.subhero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url(/images/pattern-cartouche.webp);
  background-size: 340px auto;
  background-position: left top;
  opacity: 0.055;
  mix-blend-mode: screen;
}
.subhero-eagle {
  position: absolute; right: -60px; top: -30px; height: 130%; width: auto;
  opacity: 0.07; pointer-events: none;
}
@media (min-width: 1024px) {
  .subhero::after {
    background-size: 440px auto;
    opacity: 0.052;
  }
}
.subhero .wrap { position: relative; z-index: 2; }
.subhero h1 { font-size: clamp(2.7rem, 6.2vw, 4.9rem); line-height: 0.98; letter-spacing: -0.016em; margin-top: 14px; max-width: 18ch; font-weight: 400; color: var(--gold-warm); }
.subhero .lede { max-width: 58ch; margin-top: 18px; color: var(--fg-light-muted); }

/* ---------- Market + service landing pages ---------- */
.landing-grid {
  display: grid;
  gap: clamp(2.3rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 980px) {
  .landing-grid { grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr); }
}
.landing-copy { max-width: 74ch; }
.landing-copy p { color: var(--fg-dark-muted); font-size: clamp(1.02rem, 0.55vw + 0.95rem, 1.12rem); line-height: 1.76; }
.landing-copy p + p { margin-top: 1.05em; }
.landing-copy .eyebrow + h2 { margin-top: 14px; }
.landing-aside { display: grid; gap: 14px; }
@media (min-width: 980px) { .landing-aside { position: sticky; top: 118px; } }
.mini-stat-panel {
  border: 1px solid var(--line-navy);
  background: linear-gradient(180deg, var(--surface-card), var(--surface-card-2));
  box-shadow: var(--elev-1);
}
.mini-stat {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-navy);
}
.mini-stat:last-child { border-bottom: 0; }
.mini-stat .k {
  display: block; margin-bottom: 7px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--stone);
}
.mini-stat .v {
  display: block;
  font-family: var(--font-display); font-size: clamp(1.28rem, 2vw, 1.55rem);
  line-height: 1.12; color: var(--navy);
}
.insight-grid, .process-grid, .route-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
}
/* Tablet / large-phone intermediate: compose as a 2-up grid instead of a single-file stack */
@media (min-width: 560px) {
  .route-grid, .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 820px) {
  .insight-grid { grid-template-columns: repeat(3, 1fr); }
  .process-grid { grid-template-columns: repeat(4, 1fr); }
  .route-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capital-audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; }
}
.insight-card, .process-step, .route-card {
  border: 1px solid var(--line-navy);
  background: linear-gradient(180deg, var(--surface-card), var(--surface-card-2));
  box-shadow: var(--elev-1);
}
.insight-card {
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  min-height: 100%;
}
.insight-card .mono-label, .route-card .mono-label { display: block; margin-bottom: 12px; color: var(--gold-text); }
.insight-card h3, .route-card h3, .process-step h3 {
  font-size: clamp(1.38rem, 2.2vw, 1.72rem);
  font-weight: 500;
}
.insight-card p, .route-card p, .process-step p {
  margin: 12px 0 0;
  color: var(--fg-dark-muted);
  font-size: 0.96rem;
  line-height: 1.65;
}
.route-card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 230px;
  padding: clamp(1.25rem, 2.4vw, 1.7rem);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-3) var(--ease-out-quart), transform var(--dur-3) var(--ease-out-quart), box-shadow var(--dur-3) var(--ease-out-quart), opacity var(--dur-3) var(--ease-out-quart);
}
.route-card:hover,
.route-card:focus-within {
  border-color: var(--line-gold);
  box-shadow: var(--elev-hover);
  transform: translateY(var(--hover-lift));
}
.route-card h3 { transition: transform var(--dur-3) var(--ease-out-quart); }
.route-card:hover h3, .route-card:focus-within h3 { transform: translateX(2px); }
.route-card .text-link { margin-top: auto; padding-top: 22px; align-self: flex-start; }
/* Mobile density: condense the home Who We Help teaser to tappable titles
   (full descriptions still live on /who-we-help and each detail page) */
@media (max-width: 760px) {
  #who-we-help .route-card { min-height: 0; padding: 15px 18px; }
  #who-we-help .route-card .mono-label,
  #who-we-help .route-card p { display: none; }
  #who-we-help .route-card h3 { font-size: 1.3rem; }
  #who-we-help .route-card .text-link { padding-top: 9px; }
}

/* Homepage Who We Help: editorial rows instead of a uniform card grid. */
.who-rows {
  border-top: 1px solid var(--line-navy);
  display: grid;
}
.who-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.35fr) auto;
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: center;
  min-height: clamp(88px, 9vw, 126px);
  padding: clamp(1.15rem, 2.8vw, 1.8rem) 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line-navy);
}
.who-row::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), transparent 72%);
  transform: scaleX(0);
  transform-origin: left center;
}
.who-row__label {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.6vw, 3.15rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--navy);
}
.who-row__value {
  max-width: 58ch;
  color: var(--fg-dark-muted);
  line-height: 1.62;
}
.who-row__cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-text);
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .js .who-rows.in > .who-row { animation: riseSm var(--dur-4) var(--ease-out-quint) backwards; }
  .js .who-rows.in > .who-row:nth-child(2) { animation-delay: 55ms; }
  .js .who-rows.in > .who-row:nth-child(3) { animation-delay: 110ms; }
  .js .who-rows.in > .who-row:nth-child(4) { animation-delay: 165ms; }
  .js .who-rows.in > .who-row:nth-child(5) { animation-delay: 220ms; }
  .js .who-rows.in > .who-row:nth-child(6) { animation-delay: 275ms; }
  .js .who-row.in::before,
  .js .who-rows.in .who-row::before { animation: ruleDraw var(--dur-section) var(--ease-premium-out) backwards; }
}
@media (hover: hover) {
  .who-row,
  .who-row .arrow,
  .who-row::before {
    transition:
      color var(--dur-3) var(--ease-out-quart),
      transform var(--dur-3) var(--ease-out-quart),
      opacity var(--dur-3) var(--ease-out-quart);
  }
  .who-rows:hover .who-row:not(:hover):not(:focus-visible) { opacity: 0.72; }
  .who-row:hover .who-row__label,
  .who-row:focus-visible .who-row__label { color: var(--gold-text); }
  .who-row:hover .arrow,
  .who-row:focus-visible .arrow { transform: translateX(var(--arrow-move)); }
  .who-row:hover::before,
  .who-row:focus-visible::before { transform: scaleX(1); }
}
@media (max-width: 760px) {
  .who-row {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    padding: 20px 0;
  }
  .who-row__label { font-size: clamp(1.55rem, 8vw, 2.15rem); }
  .who-row__value { font-size: 0.96rem; }
  .who-row__cta { justify-self: start; margin-top: 4px; }
}

/* ============================================================
   WHO WE HELP — spotlight relationship grid
   Epic but restrained: a choreographed diagonal cascade reveals the six cards,
   and on desktop a spotlight focus lifts the hovered/focused relationship with
   a brass accent while its siblings quietly recede. transform + opacity only.
   ============================================================ */
/* brass top accent that draws on focus (desktop) */
#who-we-help .route-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 42%, transparent 78%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-premium-out);
  pointer-events: none;
}

/* Choreographed cascade entrance (overrides the default reveal-group stagger) */
@media (prefers-reduced-motion: no-preference) {
  .js #who-we-help .route-grid.in > .route-card {
    animation: routeIn var(--dur-section) var(--ease-premium-out) backwards;
  }
  @keyframes routeIn {
    from { opacity: 0; transform: translateY(28px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* anti-diagonal wave across the 3-up desktop grid (still a clean stagger at 1/2-up) */
  .js #who-we-help .route-grid.in > .route-card:nth-child(1) { animation-delay: 0ms; }
  .js #who-we-help .route-grid.in > .route-card:nth-child(2) { animation-delay: 85ms; }
  .js #who-we-help .route-grid.in > .route-card:nth-child(3) { animation-delay: 170ms; }
  .js #who-we-help .route-grid.in > .route-card:nth-child(4) { animation-delay: 85ms; }
  .js #who-we-help .route-grid.in > .route-card:nth-child(5) { animation-delay: 170ms; }
  .js #who-we-help .route-grid.in > .route-card:nth-child(6) { animation-delay: 255ms; }
}

/* Spotlight focus (pointer devices, multi-column only) */
@media (hover: hover) and (min-width: 820px) {
  /* A short hover delay so the spotlight only engages when the pointer rests:
     scrolling with the cursor over the grid flips hover on each card it passes,
     and without this the chrome transitions would twitch/flicker. */
  #who-we-help .route-card, #who-we-help .route-card::before { transition-delay: 60ms; }
  /* Recede the siblings' chrome (border + shadow), not their text: a full-card
     opacity dim would drop the body copy below WCAG AA contrast. A whisper of
     opacity (0.94, AA-safe) plus flattened chrome reads as "stepped back". */
  #who-we-help .route-grid:hover > .route-card:not(:hover):not(:focus-within) {
    opacity: 0.94;
    border-color: rgba(27, 58, 45, 0.07);
    box-shadow: none;
  }
  #who-we-help .route-card:hover,
  #who-we-help .route-card:focus-within {
    transform: translateY(-4px);
    border-color: var(--line-gold-strong);
    box-shadow: 0 1px 0 var(--line-gold), 0 26px 56px -30px rgba(11, 31, 23, 0.55);
  }
  #who-we-help .route-card:hover::before,
  #who-we-help .route-card:focus-within::before { transform: scaleX(1); }
}

.process-step {
  position: relative;
  padding: clamp(1.3rem, 2.4vw, 1.7rem);
  min-height: 240px;
}
.process-step span {
  display: block; margin-bottom: 32px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  color: var(--gold-text);
}
.process-step::before {
  content: ""; position: absolute; top: 45px; left: clamp(1.3rem, 2.4vw, 1.7rem);
  width: 28px; height: 1px; background: var(--gold);
}
.use-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 0;
  border: 1px solid var(--line-navy);
  background: var(--line-navy);
}
.use-list li {
  position: relative;
  padding: 16px 18px 16px 34px;
  background: var(--surface-card);
  color: var(--fg-dark);
  font-weight: 500;
}
.use-list li::before {
  content: ""; position: absolute; left: 18px; top: 28px;
  width: 8px; height: 1.5px; background: var(--gold-deep);
}
.faq-list {
  display: grid;
  border-top: 1px solid var(--line-navy);
}
.faq-item {
  border-bottom: 1px solid var(--line-navy);
  padding: 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.55rem);
  color: var(--fg-dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono); font-size: 1rem; color: var(--gold-text);
}
.faq-item[open] summary::after { content: "-"; }
.faq-item p {
  margin: 0 0 22px;
  max-width: 68ch;
  color: var(--fg-dark-muted);
}
.cta-split {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: end;
}
@media (min-width: 860px) { .cta-split { grid-template-columns: minmax(0, 1fr) auto; } }
.cta-split .after { margin-top: 16px; max-width: 60ch; color: var(--fg-light-muted); }
.cta-split .cta-actions { justify-content: flex-start; margin-top: 0; }

/* ---------- Services page ---------- */
.svc-block { border-top: 1px solid var(--line-navy); }
.svc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.svc-head .num { font-family: var(--font-mono); font-size: 0.92rem; color: var(--gold-text); letter-spacing: 0.12em; }
.svc-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: 0.9fr 1.4fr; align-items: start; } .svc-intro { position: sticky; top: 120px; } }
.svc-intro p { color: var(--fg-dark-muted); max-width: 46ch; }
.svc-disclosure { font-size: 0.85rem; color: var(--stone); background: rgba(212, 175, 101, 0.05); box-shadow: inset 0 1px 0 var(--line-gold); padding: 14px 18px; margin-top: 18px; }
.svc-lines { border-top: 1px solid var(--line-navy); }
.svc-line {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 20px;
  padding: 20px 6px; border-bottom: 1px solid var(--line-navy);
  transition: background-color 240ms ease-out;
}
.svc-line:hover { background: rgba(255, 255, 255, 0.55); }
.dark .svc-line:hover, .darker .svc-line:hover { background: rgba(255, 255, 255, 0.04); }
.svc-line .n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--gold-text); padding-top: 6px; min-width: 26px; }
.svc-line h3 { font-size: 1.45rem; font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.svc-line .ref {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-text); border: 1px solid var(--line-gold);
  padding: 3px 8px; border-radius: var(--radius-sm);
}
.svc-line p { margin: 6px 0 0; font-size: 1rem; color: var(--fg-dark-muted); max-width: 62ch; }
.focus-note {
  margin-top: 26px; padding: 18px 22px; background: var(--parchment-warm);
  border: 1px solid var(--line-navy); font-size: 0.95rem; color: var(--fg-dark);
}
.focus-note b { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); display: block; margin-bottom: 8px; }

/* Capital Markets process: sticky sequence on desktop, vertical list everywhere else. */
.cm-process { overflow: clip; }
.cm-sequence {
  display: grid;
  gap: clamp(1.8rem, 5vw, 4rem);
  border-top: 1px solid var(--line-navy);
  padding-top: clamp(1.2rem, 3vw, 1.9rem);
}
.cm-sequence__rail {
  position: relative;
  min-width: 0;
}
.cm-sequence__rail ol {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--line-navy);
}
.cm-sequence__rail li {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0 11px 18px;
  color: var(--fg-dark-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  transition: color var(--dur-3) var(--ease-premium-out), opacity var(--dur-3) var(--ease-premium-out);
}
.cm-sequence__rail li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 12px;
  width: 3px;
  height: 24px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform var(--dur-3) var(--ease-premium-out);
}
.cm-sequence__rail li span {
  color: var(--gold-text);
}
.cm-sequence__rail li.is-active {
  color: var(--navy);
}
.cm-sequence__rail li.is-active::before {
  transform: scaleY(1);
}
/* Capital Markets process: thin-line stage icons (client pack) centered on an
   engraved plate. BASE rules paint the static state (one icon) that mobile,
   reduced-motion, and no-JS receive; the per-stage icon swap lives only in the
   gated desktop block below, so non-desktop / reduced-motion stays static. */
/* The big plate's stage swap only runs on desktop + no-preference (below), so it
   is hidden everywhere else; instead each step carries its own stage icon (.cm-step__ic).
   This flips inside the desktop+motion gate: plate shown, per-step icons hidden. */
.cm-linework {
  display: none;
  position: relative;
  margin-top: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid var(--line-navy);
  background:
    radial-gradient(62% 72% at 26% 16%, var(--line-gold-soft), transparent 58%),
    linear-gradient(180deg, var(--surface-card), var(--surface-card-2));
  overflow: hidden;
}
.cm-step__ic { display: block; width: 52px; height: 52px; margin-bottom: 14px; }
.cm-step__ic path, .cm-step__ic circle, .cm-step__ic rect { fill: var(--navy); }
.cm-plate { display: block; width: 100%; height: auto; }
.cm-plate rect, .cm-plate path { fill: none; }
.cm-plate .cm-fr-edge   { stroke: var(--line-control); stroke-width: 1; }
.cm-plate .cm-fr-tick   { stroke: var(--gold-deep); stroke-width: 1.4; }
.cm-plate .cm-glyph     { fill: var(--navy); stroke: none; }
.cm-plate .cm-prog-tick { stroke: var(--line-control); stroke-width: 2.4; }
.cm-plate .cm-prog-1    { stroke: var(--gold-deep); }
.cm-ic { opacity: 0; }
.cm-ic--uw { opacity: 1; }
.cm-sequence__steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-navy);
}
.cm-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 22px;
  padding: clamp(1.3rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--line-navy);
  transition: opacity var(--dur-3) var(--ease-premium-out), transform var(--dur-3) var(--ease-premium-out);
}
.cm-step .n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold-text);
  padding-top: 7px;
  min-width: 26px;
}
.cm-step h3 { font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 500; }
.cm-step p { margin: 8px 0 0; color: var(--fg-dark-muted); max-width: 62ch; }
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  /* Desktop + motion + JS: the swapping plate replaces the per-step icons.
     Everywhere else (mobile, reduced-motion, no-JS) keeps the per-step icons. */
  .js .cm-linework { display: block; }
  .js .cm-step__ic { display: none; }
  .js .cm-sequence {
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.35fr);
    align-items: start;
  }
  .js .cm-sequence__rail {
    position: sticky;
    top: calc(var(--header-h) + 36px);
  }
  .js .cm-sequence__steps { border-top: 0; }
  .js .cm-step {
    min-height: clamp(300px, 48vh, 460px);
    align-content: center;
    padding-inline: clamp(0px, 2vw, 24px);
    opacity: 0.46;
  }
  .js .cm-step.is-active {
    opacity: 1;
    transform: translateX(8px);
  }

  /* Process artifact: one thin-line icon per active stage; opacity crossfade
     only (no idle loop). JS-prefixed so no-JS keeps the static base icon. */
  .cm-ic { transition: opacity var(--dur-4) var(--ease-premium-out); }
  .js .cm-ic { opacity: 0; }
  .js .cm-plate .cm-prog-tick { stroke: var(--line-control); }
  .js .cm-sequence.cm-stage-1 .cm-ic--uw { opacity: 1; }
  .js .cm-sequence.cm-stage-1 .cm-prog-1 { stroke: var(--gold-deep); }
  .js .cm-sequence.cm-stage-2 .cm-ic--pk { opacity: 1; }
  .js .cm-sequence.cm-stage-2 .cm-prog-2 { stroke: var(--gold-deep); }
  .js .cm-sequence.cm-stage-3 .cm-ic--cp { opacity: 1; }
  .js .cm-sequence.cm-stage-3 .cm-prog-3 { stroke: var(--gold-deep); }
  .js .cm-sequence.cm-stage-4 .cm-ic--cl { opacity: 1; }
  .js .cm-sequence.cm-stage-4 .cm-prog-4 { stroke: var(--gold-deep); }
}
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .cm-step { opacity: 1; transform: none; }
}

/* ---- Services blocks: collapsible accordion on mobile, fully expanded on desktop ---- */
/* HTML ships each block open (no-JS = fully expanded, no regression); main.js collapses
   all but the first on phones. Desktop summaries are non-interactive headings. */
.svc-acc { margin: 0; }
.svc-acc > summary.svc-acc-head { list-style: none; pointer-events: none; }
.svc-acc > summary.svc-acc-head::-webkit-details-marker { display: none; }
.svc-acc-cue { display: none; }
@media (max-width: 600px) {
  .svc-acc > summary.svc-acc-head {
    pointer-events: auto; cursor: pointer; flex-wrap: nowrap; align-items: center;
    gap: 8px 14px; min-height: 44px; margin-bottom: 0; padding: 6px 0;
    -webkit-tap-highlight-color: transparent;
  }
  .svc-acc > summary.svc-acc-head > .num { flex: none; white-space: nowrap; align-self: center; }
  .svc-acc > summary.svc-acc-head > h2 { margin-right: auto; }
  .svc-acc[open] > summary.svc-acc-head { margin-bottom: clamp(1.5rem, 4.5vw, 2.1rem); }
  .svc-acc-cue { display: inline-flex; align-items: center; gap: 9px; flex: none; }
  .svc-acc-label { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); white-space: nowrap; }
  .svc-acc-label::before { content: "Expand"; }
  .svc-acc[open] .svc-acc-label::before { content: "Close"; }
  .svc-acc-toggle { position: relative; width: 18px; height: 18px; flex: none; }
  .svc-acc-toggle::before, .svc-acc-toggle::after { content: ""; position: absolute; background: var(--gold-text); transition: transform 220ms ease, opacity 220ms ease; }
  .svc-acc-toggle::before { left: 0; right: 0; top: 50%; height: 1.6px; transform: translateY(-50%); }
  .svc-acc-toggle::after { top: 0; bottom: 0; left: 50%; width: 1.6px; transform: translateX(-50%); }
  .svc-acc[open] .svc-acc-toggle::after { opacity: 0; transform: translateX(-50%) scaleY(0); }
}

/* Services page (mobile only): lead with the four service-line accordions, then
   the Capability Library and Who We Help card grids. Desktop keeps source order. */
@media (max-width: 600px) {
  .services-stack { display: flex; flex-direction: column; }
  .services-stack > section:not(.svc-block) { order: 1; }
}

/* Capital sources grid (Capital Markets · lender network) — hairline deco grid */
.cap-grid {
  display: grid; gap: 1px; background: var(--line-navy);
  border: 1px solid var(--line-navy);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.cap-cell { background: var(--surface-card); padding: 18px 20px; }
.cap-cell .mono-label { display: block; margin-bottom: 8px; color: var(--gold-text); }
.cap-cell p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--fg-dark-muted); }

.invest-panels { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
@media (min-width: 860px) { .invest-panels { grid-template-columns: 1fr 1fr; } }
.invest-panel {
  border: 1px solid var(--line-navy); padding: clamp(1.6rem, 3.4vw, 2.6rem);
  background: var(--parchment-warm);
  transition: border-color 240ms ease-out, transform 240ms ease-out;
}
.invest-panel:hover { border-color: var(--line-gold); transform: translateY(-4px); }
.invest-panel .status { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); display: block; margin-bottom: 14px; }
.invest-panel h3 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); color: var(--fg-dark); }
.invest-panel p { margin: 14px 0 0; color: var(--fg-dark-muted); }

/* ---------- Opportunities page ---------- */
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.filter-chip {
  background: none; border: 1px solid var(--line-control); border-radius: var(--radius-sm);
  padding: 10px 18px; min-height: 44px;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-dark-muted);
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}
.filter-chip:hover { border-color: var(--gold-deep); color: var(--navy); }
.filter-chip:active { transform: scale(0.97); }
.filter-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--gold-warm); }

.listing-card {
  position: relative; display: grid; text-decoration: none; color: inherit;
  background: var(--surface-card); border: 1px solid var(--line-navy); overflow: hidden;
  box-shadow: var(--elev-1);
  transition: transform var(--dur-3) var(--ease-out-quart), box-shadow var(--dur-3) var(--ease-out-quart), border-color var(--dur-3) var(--ease-out-quart);
}
.listing-card:hover { border-color: var(--line-gold); box-shadow: var(--elev-hover); transform: translateY(-2px); }
@media (min-width: 900px) { .listing-card { grid-template-columns: 1fr 1.1fr; } }
.listing-card figure { margin: 0; position: relative; overflow: hidden; }
.listing-card figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 900ms var(--ease-out); }
.listing-card:hover figure img { transform: scale(1.04); }
.status-tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--gold); color: var(--navy-deep);
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 13px;
}
.listing-card-body { padding: clamp(1.5rem, 3.4vw, 2.6rem); display: flex; flex-direction: column; gap: 12px; }
.listing-card-body .mono-label { color: var(--gold-text); }
.listing-card-body h3 { font-size: clamp(1.55rem, 2.8vw, 2.15rem); }
.listing-card-body .addr { color: var(--fg-dark-muted); font-size: 0.96rem; }
.listing-card-body .sum { color: var(--fg-dark-muted); margin: 4px 0 8px; }
.listing-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin: 6px 0 12px; border: 1px solid var(--line-navy);
  background: rgba(245, 240, 232, 0.42);
}
.listing-facts div { min-width: 0; padding: 12px 14px; }
.listing-facts div + div { border-left: 1px solid var(--line-navy); }
.listing-facts dt {
  margin: 0 0 5px; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone);
}
.listing-facts dd {
  margin: 0; font-family: var(--font-mono); font-size: 0.78rem;
  line-height: 1.45; color: var(--navy); overflow-wrap: break-word;
}
.listing-card-body .row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: auto; }
.listing-card .stretch { position: relative; z-index: 1; }
.listing-card .stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.listing-card .row { position: relative; z-index: 3; }
.listing-card .row .btn,
.listing-card .row .text-link { position: relative; z-index: 4; }
.off-market-note {
  margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px dashed var(--line-navy); color: var(--fg-dark-muted); font-size: 0.95rem;
}

/* ---------- Listing detail ---------- */
.ld-head { padding-top: calc(var(--header-h) + clamp(40px, 7vw, 80px)); padding-bottom: clamp(32px, 5vw, 56px); }
.ld-breadcrumb { margin-bottom: 22px; }
.ld-breadcrumb a {
  color: var(--fg-light-muted); text-decoration: none; font-family: var(--font-mono);
  font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  transition: color 200ms ease-out;
}
.ld-breadcrumb a:hover { color: var(--gold-warm); }
.ld-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.ld-tag {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 7px 13px; border-radius: var(--radius-sm);
}
.ld-tag.gold { background: var(--gold); color: var(--navy-deep); }
.ld-tag.line { border: 1px solid var(--line-onnavy); color: var(--gold-warm); }
.ld-addr { margin-top: 14px; color: var(--fg-light-muted); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.ld-addr a { color: var(--gold-warm); }

.gallery { display: grid; gap: 12px; }
@media (min-width: 860px) { .gallery { grid-template-columns: repeat(4, 1fr); } .gallery .g-main { grid-column: span 4; } }
.g-item { position: relative; padding: 0; border: 1px solid var(--line-navy); background: none; cursor: zoom-in; overflow: hidden; }
.g-item img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; transition: transform 700ms var(--ease-out), opacity 250ms ease-out; }
.g-item.g-main img { aspect-ratio: 16 / 9.5; }
.g-item:hover img { transform: scale(1.03); }
.g-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.g-item:focus-visible img { transform: scale(1.03); }
.g-item figcaption, .g-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 16px 10px; text-align: left;
  background: linear-gradient(transparent, rgba(15, 42, 32, 0.82));
  color: var(--fg-light); font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.marchlife-cinema {
  padding: 0;
  background: var(--ink);
  overflow: hidden;
}
.marchlife-cinema__button {
  width: 100%;
  min-height: min(76vh, 760px);
  border: 0;
  border-radius: 0;
  display: block;
  cursor: zoom-in;
}
.marchlife-cinema__button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 31, 23, 0.78) 0%, rgba(11, 31, 23, 0.48) 34%, transparent 62%),
    linear-gradient(180deg, rgba(11, 31, 23, 0.14), rgba(11, 31, 23, 0.44));
}
.marchlife-cinema__button img {
  width: 100%;
  min-height: min(76vh, 760px);
  max-height: 840px;
  aspect-ratio: auto;
  object-fit: cover;
  transform-origin: center;
}
.marchlife-cinema__overlay {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(52px, 8vw, 96px);
  z-index: 2;
  width: min(520px, calc(100% - var(--gutter) * 2));
  color: var(--fg-light);
  text-align: left;
  pointer-events: none;
}
.marchlife-cinema__overlay .mono-label {
  color: var(--gold);
  display: block;
  margin-bottom: 12px;
}
.marchlife-cinema__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 6vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: -0.018em;
  color: var(--gold-warm);
}
.marchlife-cinema .g-cap {
  z-index: 2;
  background: none;
  left: auto;
  right: var(--gutter);
  color: rgba(245, 240, 232, 0.78);
}
@media (prefers-reduced-motion: no-preference) {
  .js .marchlife-cinema__button.reveal.in img {
    animation: marchlifeMaskIn 900ms var(--ease-premium-out) backwards;
  }
  @keyframes marchlifeMaskIn {
    from { opacity: 0; clip-path: inset(0 0 0 18%); transform: scale(1.03); }
    to { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); }
  }
}
@media (max-width: 760px) {
  .marchlife-cinema__button,
  .marchlife-cinema__button img { min-height: 58vh; min-height: 58svh; }
  .marchlife-cinema__button::before {
    background:
      linear-gradient(180deg, rgba(11, 31, 23, 0.2) 0%, rgba(11, 31, 23, 0.24) 40%, rgba(11, 31, 23, 0.74) 100%);
  }
  .marchlife-cinema__overlay {
    bottom: 48px;
  }
  .marchlife-cinema .g-cap { display: none; }
}

.ld-grid { display: grid; gap: clamp(2.4rem, 5vw, 4rem); }
.ld-grid > * { min-width: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 1000px) { .ld-grid { grid-template-columns: 1.5fr 0.9fr; align-items: start; } }
.ld-block { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.ld-block h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); margin-bottom: 18px; }
.info-list li {
  position: relative; padding: 10px 0 10px 24px; border-bottom: 1px solid var(--line-navy);
  color: var(--fg-dark);
}
.info-list li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 10px; height: 1.5px; background: var(--gold-deep); }

.detail-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line-navy); }
.detail-table th, .detail-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-navy); font-size: 1rem; }
.detail-table th { font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); width: 38%; }
.detail-table td { font-weight: 500; color: var(--fg-dark); }
.detail-table tr:last-child th, .detail-table tr:last-child td { border-bottom: 0; }
.detail-table tbody tr { transition: background-color 150ms ease; }
.detail-table tbody tr:hover { background: rgba(27, 58, 45, 0.035); }

.demo-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line-navy); font-variant-numeric: tabular-nums; }
.demo-table th, .demo-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-navy); font-size: 0.95rem; text-align: right; white-space: nowrap; }
.demo-table th:first-child, .demo-table td:first-child { text-align: left; }
.demo-table thead th { font-family: var(--font-mono); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); border-bottom: 2px solid var(--line-gold); }
.demo-table tbody tr:last-child td, .demo-table tbody tr:last-child th { border-bottom: 0; }
.demo-table tbody tr { transition: background-color 150ms ease; }
.demo-table tbody tr:hover { background: rgba(27, 58, 45, 0.035); }
.demo-table td { color: var(--fg-dark); font-weight: 500; }
.demo-table tbody th { font-family: var(--font-body); font-weight: 500; font-size: 0.92rem; color: var(--fg-dark-muted); text-transform: none; letter-spacing: 0; }
.src-note { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); margin-top: 10px; }

.ld-aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 22px; }
.contact-card {
  background: var(--navy); color: var(--fg-light); padding: clamp(1.6rem, 3vw, 2.2rem);
}
.contact-card .mono-label { color: var(--gold); margin-bottom: 14px; display: block; }
.contact-card .who b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; }
.contact-card .who span { color: var(--fg-light-muted); font-size: 0.9rem; }
.contact-card .ways { margin-top: 18px; display: flex; flex-direction: column; }
.contact-card .ways a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--gold-warm); text-decoration: none; font-family: var(--font-mono); font-size: 0.92rem;
  letter-spacing: 0.04em; transition: color 200ms ease-out;
}
.contact-card .ways a:hover { color: var(--gold); }
.contact-card .btn { margin-top: 18px; width: 100%; }
.download-card {
  border: 1px solid var(--line-navy); background: var(--surface-card); padding: 22px;
  display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit;
  box-shadow: var(--elev-1);
  transition: border-color var(--dur-3) var(--ease-out-quart), transform var(--dur-3) var(--ease-out-quart), box-shadow var(--dur-3) var(--ease-out-quart);
}
.download-card:hover { border-color: var(--line-gold); transform: translateY(-2px); box-shadow: var(--elev-hover); }
.download-card .doc {
  width: 46px; height: 56px; flex: none; border: 1px solid var(--line-gold);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; color: var(--gold-text);
}
.download-card b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; }
.download-card span { font-size: 0.84rem; color: var(--fg-dark-muted); }

.location-card { border: 1px solid var(--line-navy); background: var(--surface-card); padding: 22px; box-shadow: var(--elev-1); }
.location-card b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; margin-bottom: 6px; }
.location-card p { margin: 0 0 12px; color: var(--fg-dark-muted); font-size: 0.95rem; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1100; background: rgba(11, 31, 23, 0.94);
  display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px);
}
.lightbox.is-open { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox.is-open { animation: lbFade 220ms ease-out; }
  .lightbox.is-open img { animation: lbZoom 240ms var(--ease-out-quart); }
  @keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes lbZoom { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
}
.lightbox img { max-width: 100%; max-height: 82vh; width: auto; height: auto; border: 1px solid var(--line-onnavy); }
.lightbox-cap { position: absolute; bottom: clamp(18px, 4vw, 36px); left: 0; right: 0; text-align: center; color: var(--fg-light-muted); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; }
.lb-btn {
  position: absolute; z-index: 2; width: 52px; height: 52px;
  background: rgba(27, 58, 45, 0.8); border: 1px solid var(--line-onnavy); border-radius: var(--radius-sm);
  color: var(--gold-warm); font-size: 1.3rem; line-height: 1;
  display: grid; place-items: center; transition: background-color 200ms ease-out, border-color 200ms ease-out, transform 120ms var(--ease-out-quart);
}
.lb-btn:hover { background: var(--navy-soft); border-color: var(--line-gold); }
.lb-close:active { transform: scale(0.94); }
.lb-prev:active, .lb-next:active { transform: translateY(-50%) scale(0.94); }
.lb-close { top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); }
.lb-prev { left: clamp(8px, 2vw, 24px); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(8px, 2vw, 24px); top: 50%; transform: translateY(-50%); }

/* ---------- About page ---------- */
/* Partner profiles: restrained portrait scale, aligned cards, editorial balance */
#stuart .sec-head, #trevor .sec-head { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.bio-grid { display: grid; gap: clamp(2.6rem, 5vw, 5rem); }
@media (min-width: 1000px) {
  .bio-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    align-items: start;
  }
}
.bio-copy p { color: var(--fg-dark); max-width: 66ch; }
.bio-copy p + p { margin-top: 1.2em; }
.bio-aside { position: sticky; top: 118px; display: grid; gap: 14px; align-self: start; }
.bio-portrait-card {
  position: relative;
  display: grid; grid-template-columns: minmax(108px, 132px) minmax(0, 1fr);
  gap: 18px; align-items: stretch;
  padding: 16px;
  background: linear-gradient(180deg, var(--surface-card), var(--surface-card-2));
  border: 1px solid var(--line-navy);
  box-shadow: var(--elev-1);
}
.bio-portrait { margin: 0; min-width: 0; }
.bio-portrait img {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 28%;
  filter: grayscale(100%) contrast(1.04);
  background: var(--surface-card);
  border: 1px solid rgba(27, 58, 45, 0.18);
}
.bio-id {
  min-width: 0; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  padding: 7px 0;
}
.bio-id .mono-label {
  display: block; margin-bottom: 14px; padding-right: 42px;
  color: var(--gold-text); line-height: 1.35;
}
.bio-id b {
  display: block;
  font-family: var(--font-display); font-size: clamp(1.55rem, 2.2vw, 1.95rem);
  font-weight: 500; line-height: 1.05; color: var(--fg-dark);
}
.bio-id > span:not(.mono-label) {
  display: block; margin-top: 7px; color: var(--fg-dark-muted);
  font-size: 0.94rem;
}
.bio-contact-links {
  display: block; margin-top: 0; padding-top: 18px;
}
.bio-id .bio-email, .bio-id .bio-phone {
  display: inline-block; margin-top: 0;
  font-size: 0.96rem; line-height: 1.25;
  color: var(--navy); font-weight: 600; text-decoration-thickness: 1px;
  text-underline-offset: 4px; overflow-wrap: anywhere;
}
.bio-id .bio-phone { margin-top: 8px; }
.bio-portrait-card > .social-link {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  width: 28px; height: 28px; padding: 0; margin: 0;
  color: var(--linkedin); background: #fff; flex: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px rgba(10, 102, 194, 0.1), 0 2px 8px rgba(27, 58, 45, 0.08);
}
.bio-portrait-card > .social-link svg { width: 23px; height: 23px; }
.bio-portrait-card > .social-link:hover { color: var(--linkedin-dark); transform: translateY(-1px); }
.fact-card { border: 1px solid var(--line-navy); background: var(--surface-card); padding: 22px 24px; box-shadow: var(--elev-1); }
.fact-card .mono-label { display: block; margin-bottom: 10px; color: var(--gold-text); }
.fact-card b { font-family: var(--font-display); font-weight: 500; font-size: 1.32rem; display: block; line-height: 1.25; }
.fact-card p { margin: 8px 0 0; font-size: 0.92rem; color: var(--fg-dark-muted); }
.fact-card img { width: min(180px, 76%); margin-top: 10px; }

.leader-panel { max-width: 460px; margin-left: auto; }
.leader-profile { background: linear-gradient(168deg, var(--navy), var(--navy-deep)); border-color: var(--line-gold); box-shadow: 0 1px 0 var(--line-gold-soft), 0 26px 60px -38px rgba(0, 0, 0, 0.72); }
/* In the merged Request Financing section the card lives in the left intro column:
   keep it flush-left and full-width, and don't let the column stick on scroll. */
#request-financing .svc-intro { position: static; }
.svc-intro .leader-panel { margin-left: 0; max-width: 100%; }
.leader-profile .bio-portrait img { border-color: var(--line-gold-soft); box-shadow: none; }
.leader-profile .bio-id b { color: var(--fg-light); }
.leader-profile .bio-id > span:not(.mono-label) { color: var(--fg-light-muted); }
.leader-profile .bio-id .bio-email, .leader-profile .bio-id .bio-phone { color: var(--gold-warm); }
.leader-profile .bio-id .mono-label { color: var(--gold-warm); }
.leader-profile > .social-link { color: var(--linkedin); }
.leader-profile > .social-link:hover { color: #2B7CD3; }

@media (max-width: 560px) {
  .bio-portrait-card { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .bio-portrait-card > .social-link { top: 12px; right: 12px; width: 26px; height: 26px; }
  .bio-portrait-card > .social-link svg { width: 22px; height: 22px; }
  .bio-id { padding: 2px 0; }
  .bio-id .mono-label { margin-bottom: 8px; padding-right: 34px; font-size: 0.66rem; letter-spacing: 0.12em; }
  .bio-id b { font-size: 1.42rem; }
  .bio-contact-links { padding-top: 12px; }
  .bio-id .bio-email, .bio-id .bio-phone { font-size: 0.88rem; }
}

.principles { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
@media (min-width: 860px) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principle { border-top: 1px solid var(--line-gold); padding-top: 22px; position: relative; }
.principle::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 1px; background: var(--gold); }
.principle h3 { font-size: 1.45rem; }
.principle p { margin: 12px 0 0; color: var(--fg-light-muted); font-size: 0.97rem; }

.tr-firm { border-top: 1px solid var(--line-navy); padding-top: clamp(1.8rem, 4vw, 2.6rem); margin-top: clamp(2.2rem, 5vw, 3.4rem); }
.tr-firm:first-of-type { margin-top: 0; }
.tr-firm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
/* Track-record accordion (native <details>) */
details.tr-firm > summary.tr-firm-head { cursor: pointer; list-style: none; min-height: 44px; transition: color 200ms ease-out; }
details.tr-firm > summary.tr-firm-head::-webkit-details-marker { display: none; }
details.tr-firm:not([open]) > summary.tr-firm-head { margin-bottom: 0; }
details.tr-firm:not([open]) > .tr-entries { display: none; }
details.tr-firm > summary:hover h3 { color: var(--gold-deep); }
.tr-chev { align-self: center; width: 9px; height: 9px; margin-left: auto; border-right: 1.5px solid var(--gold-deep); border-bottom: 1.5px solid var(--gold-deep); transform: rotate(45deg); transition: transform 240ms var(--ease-out-quart); }
details.tr-firm[open] > summary .tr-chev { transform: rotate(-135deg); }
.tr-firm-head h3 { font-size: clamp(1.55rem, 2.8vw, 2.15rem); }
.tr-firm-head .role { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); }
.tr-firm-head .years { margin-left: auto; font-family: var(--font-mono); font-size: 0.8rem; color: var(--stone); }
.tr-entries { display: grid; gap: 0; border-top: 1px solid var(--line-navy); }
.tr-entry {
  display: grid; gap: 8px 26px; padding: 20px 6px;
  border-bottom: 1px solid var(--line-navy);
  transition: background-color 240ms ease-out;
}
.tr-entry:hover { background: rgba(255, 255, 255, 0.55); }
@media (min-width: 860px) { .tr-entry { grid-template-columns: 200px 1fr; } }
.tr-meta { display: flex; flex-direction: column; gap: 6px; }
.tr-chip {
  align-self: flex-start; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text);
  border: 1px solid var(--line-gold); padding: 4px 9px; border-radius: var(--radius-sm);
}
.tr-loc { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }
.tr-entry h4 { font-size: 1.4rem; font-weight: 500; }
.tr-entry p { margin: 6px 0 0; font-size: 0.95rem; color: var(--fg-dark-muted); max-width: 64ch; }
.tr-entry p a { color: var(--navy); }

.summary-band {
  border-top: 1px solid var(--line-onnavy); border-bottom: 1px solid var(--line-onnavy);
  background: rgba(15, 42, 32, 0.24);
}
.summary-grid { display: grid; gap: clamp(1.6rem, 4vw, 2.2rem); padding: clamp(2rem, 4vw, 3rem) 0; }
@media (min-width: 620px) { .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.65rem, 3vw, 2.2rem) 0; max-width: 1120px; margin-inline: auto; } }
.summary-stat { text-align: left; padding: 0 clamp(0px, 2.5vw, 3rem); }
/* Tablet: 2-up ledger (e.g. 6 stats = 2x3) */
@media (min-width: 620px) and (max-width: 959px) {
  .summary-stat:nth-child(2n) { border-left: 1px solid var(--line-onnavy); }
  .summary-stat:nth-child(n+3) { padding-top: clamp(1.65rem, 3vw, 2.2rem); border-top: 1px solid var(--line-onnavy); }
}
/* Desktop: 3-up ledger (6 stats = 3x2) with dividers redrawn for 3 columns */
@media (min-width: 960px) {
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; }
  .summary-stat:not(:nth-child(3n+1)) { border-left: 1px solid var(--line-onnavy); }
  .summary-stat:nth-child(n+4) { padding-top: clamp(1.65rem, 3vw, 2.2rem); border-top: 1px solid var(--line-onnavy); }
}
.summary-stat .n { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 4.4vw, 3.3rem); color: var(--gold-warm); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; white-space: nowrap; }
.summary-stat .u { font-size: 0.46em; letter-spacing: 0.02em; color: var(--gold-warm); }
.summary-stat .l { margin-top: 8px; color: var(--fg-light-muted); font-size: 0.95rem; }
.execution-record {
  position: relative;
  overflow: hidden;
}
.execution-record::before {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: clamp(1.4rem, 3vw, 2.1rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold-strong), transparent);
  transform-origin: left center;
}
.execution-record::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(48% 80% at 18% 18%, rgba(212, 175, 101, 0.085), transparent 66%),
    radial-gradient(36% 54% at 92% 72%, rgba(232, 214, 160, 0.055), transparent 72%);
}
.execution-record .summary-grid {
  position: relative;
  z-index: 1;
}
@media (min-width: 960px) {
  /* Four stats, even ledger: one balanced row with hairline column dividers. */
  .execution-record .summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 0;
    max-width: 1180px;
    padding: clamp(2.7rem, 4.6vw, 4.2rem) 0 clamp(2.6rem, 4.4vw, 3.8rem);
  }
  .execution-record .summary-stat {
    min-height: clamp(104px, 10.5vw, 142px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-top: 0;
  }
  .execution-record .summary-stat:not(:first-child) {
    border-left: 1px solid var(--line-onnavy);
  }
  .execution-record .summary-stat .n {
    font-size: clamp(2.4rem, 3.9vw, 4.1rem);
    line-height: 0.95;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js .execution-record:has(.summary-stat.in)::before {
    animation: ruleDraw var(--dur-section) var(--ease-premium-out) backwards;
  }
}
/* Mobile: compact 2-up ledger (6 stats = 2x3) instead of a tall stack of huge numbers */
@media (max-width: 619px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 440px; margin-inline: auto; padding: clamp(1.5rem, 6vw, 2.2rem) 0; }
  .summary-stat { padding: 13px clamp(8px, 3.5vw, 16px); }
  .summary-stat:nth-child(2n) { border-left: 1px solid var(--line-onnavy); }
  .summary-stat:nth-child(n+3) { padding-top: clamp(15px, 4.5vw, 22px); border-top: 1px solid var(--line-onnavy); }
  .summary-stat .n { font-size: clamp(1.25rem, 5.6vw, 1.6rem); }
  .summary-stat .l { font-size: 0.66rem; margin-top: 3px; line-height: 1.35; letter-spacing: 0.01em; }
}

.signature-block { text-align: center; }
.signature-block .sig { font-family: var(--font-script); font-size: clamp(2.6rem, 6vw, 4rem); color: var(--gold-warm); line-height: 1.2; }
.signature-block .sig-sub { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-light-faint); margin-top: 10px; }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; gap: clamp(2.6rem, 5vw, 4.5rem); }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 1.3fr 0.9fr; align-items: start; } }
.form-grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: span 2; } }
.field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; color: var(--fg-dark); }
.field label .req { color: var(--gold-text); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; min-height: 52px;
  font: inherit; color: var(--fg-dark);
  background: var(--surface-card); border: 1px solid var(--line-control); border-radius: var(--radius-sm);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--stone-light); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 1px var(--gold-deep), 0 0 0 4px rgba(212, 175, 101, 0.3);
}
/* Inline invalid state, in a desaturated brick that fits the parchment palette (not bright red) */
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid {
  border-color: #9B3B2E; box-shadow: 0 0 0 3px rgba(155, 59, 46, 0.14);
}
.field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--stone) 50%), linear-gradient(135deg, var(--stone) 50%, transparent 50%); background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px); background-size: 5px 5px; background-repeat: no-repeat; }

/* Investor email capture — inline single-field Netlify form on the dark
   investments section (replaces the old Express Interest link). */
.invest-form { max-width: 460px; margin: 28px auto 0; }
.invest-form__row { display: flex; gap: 10px; }
.invest-form input[type="email"] {
  flex: 1 1 auto; min-width: 0;
  padding: 14px 16px; min-height: 52px;
  font: inherit; color: var(--fg-light);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(232, 214, 160, 0.22); border-radius: var(--radius-sm);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.invest-form input[type="email"]::placeholder { color: rgba(245, 240, 232, 0.42); }
.invest-form input[type="email"]:hover { border-color: rgba(232, 214, 160, 0.4); }
.invest-form input[type="email"]:focus { outline: none; border-color: var(--gold-warm); box-shadow: 0 0 0 3px rgba(212, 175, 101, 0.2); }
.invest-form input[type="email"]:user-invalid { border-color: #C97A63; box-shadow: 0 0 0 3px rgba(201, 122, 99, 0.16); }
.invest-form .btn { flex: 0 0 auto; white-space: nowrap; }
.invest-form__note { margin: 14px 0 0; font-size: 0.82rem; color: rgba(245, 240, 232, 0.55); }
@media (max-width: 520px) {
  .invest-form__row { flex-direction: column; }
  .invest-form .btn { width: 100%; }
}

/* Condensed mobile forms — applies to BOTH the contact form (.contact-grid)
   and the capital-markets financing form (any .form-grid). Goal: the full
   form fits on a phone screen at once so the visitor can see what they're
   filling out. Smaller labels, shorter fields, tighter gaps, and a small
   textarea (the heading and the field on screen establish what to write). */
@media (max-width: 600px) {
  .contact-grid { gap: 1.4rem; }
  .form-grid { gap: 8px; }
  .form-grid .field label { margin-bottom: 3px; font-size: 0.78rem; }
  .form-grid .field input,
  .form-grid .field select,
  .form-grid .field textarea {
    padding: 8px 12px; min-height: 38px;
    font-size: 16px; /* 16px exactly: anything smaller triggers iOS Safari focus-zoom on the primary lead form */
    border-radius: 6px;
  }
  .form-grid .field textarea { min-height: 60px; height: 64px; }
  /* the brass select chevron must follow the new vertical center */
  .form-grid .field select {
    background-position: calc(100% - 16px) calc(50% + 1px),
                         calc(100% - 11px) calc(50% + 1px);
  }
  /* the submit button doesn't need to scream — trim it to match field height */
  .form-grid + button.btn,
  .form-grid .btn { padding: 11px 22px; min-height: 42px; }
  /* trim the section padding around the form so vertical breathing room is in
     the FORM, not the empty space above/below it. :has() targets any .sec that
     wraps one of these forms — contact + capital-markets — without needing IDs. */
  .sec:has(.form-grid) { padding-top: 36px; padding-bottom: 36px; }
}
.hidden { position: absolute; left: -9999px; }
.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; }

.direct-card { background: var(--navy); color: var(--fg-light); padding: clamp(1.8rem, 4vw, 2.6rem); }
.direct-card .mono-label { color: var(--gold); display: block; margin-bottom: 20px; }
.direct-row { padding: 16px 0; border-bottom: 1px solid var(--line-onnavy); }
.direct-row:last-of-type { border-bottom: 0; }
.direct-row .k { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-light-faint); display: block; margin-bottom: 6px; }
.direct-row a, .direct-row .v {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  color: var(--gold-warm); text-decoration: none; transition: color 200ms ease-out;
}
.direct-row a:hover { color: var(--gold); }
.contact-blurb { margin-top: 24px; }
.contact-blurb p { color: var(--fg-dark-muted); font-size: 0.97rem; }
.contact-blurb .lic { font-size: 0.85rem; color: var(--stone); padding: 4px 0; }

/* ---------- Legal pages ---------- */
.legal-body { max-width: 760px; }
.legal-body h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin: clamp(2rem, 4vw, 2.8rem) 0 14px; }
.legal-body h3 { font-size: 1.25rem; margin: 1.6rem 0 10px; }
.legal-body p, .legal-body li { color: var(--fg-dark-muted); }
.legal-body ul { list-style: none; padding: 0; margin: 0 0 1em; }
.legal-body li { position: relative; padding: 5px 0 5px 22px; }
.legal-body li::before { content: ""; position: absolute; left: 0; top: 16px; width: 10px; height: 1.5px; background: var(--gold-deep); }
.legal-body a { color: var(--navy); }
.legal-updated { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }
.subhero .legal-updated { color: var(--fg-light-faint); margin-top: 16px; }

/* ---------- Sticky mobile CTA bar ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
  display: grid; grid-template-columns: 1fr 1fr;
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 260ms var(--ease-out-quart), visibility 0s linear 260ms;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--navy-deep);
  box-shadow: 0 -8px 30px rgba(11, 31, 23, 0.35);
}
.sticky-cta.show { transform: translateY(0); visibility: visible; transition: transform 360ms var(--ease-premium-out); }
.sticky-cta { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.sticky-cta a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; font-weight: 600; font-size: 0.95rem; text-decoration: none;
}
.sticky-cta .call { color: var(--gold-warm); }
.sticky-cta .act { background: var(--gold); color: var(--navy-deep); }
@media (min-width: 1024px) { .sticky-cta { display: none; } }
body.menu-open .sticky-cta { display: none; }

/* ---------- Reveal motion ----------
   Content is visible by default (no-JS, crawlers, full-page capture all safe).
   The .in class, added on viewport entry, replays a rise animation. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Once the observer is live (html.reveal-ready, set by JS after setup), pre-hide
     not-yet-revealed elements so they fade IN cleanly instead of flashing
     visible-then-snapping-to-0. If the script never sets up, content stays
     visible (no .reveal-ready), preserving the no-JS-safe fallback. */
  .reveal-ready .reveal:not(.in) { opacity: 0; }
  .reveal-ready .reveal-group:not(.in) > * { opacity: 0; }
  .js .reveal.in { animation: rise 720ms var(--ease-out-quint) backwards; }
  .js .reveal-d1.in { animation-delay: 60ms; }
  .js .reveal-d2.in { animation-delay: 120ms; }
  .js .reveal-d3.in { animation-delay: 180ms; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(var(--reveal-y, 24px)); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes riseSm {
    from { opacity: 0; transform: translateY(var(--reveal-y-sm, 16px)); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* Internal stagger: children of a .reveal-group arrive in sequence (gentler travel) */
  .js .reveal-group.in > * { animation: riseSm var(--dur-4) var(--ease-out-quint) backwards; }
  .js .reveal-group.in > *:nth-child(2) { animation-delay: 60ms; }
  .js .reveal-group.in > *:nth-child(3) { animation-delay: 120ms; }
  .js .reveal-group.in > *:nth-child(4) { animation-delay: 180ms; }
  .js .reveal-group.in > *:nth-child(5) { animation-delay: 240ms; }
  .js .reveal-group.in > *:nth-child(n+6) { animation-delay: 280ms; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
  .hero::before { animation: none; }
}

/* ---------- Page entry + hero choreography ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js body { animation: pageIn 420ms var(--ease-premium-out); }
  @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

  /* Header settles first (spec: y -8 -> 0, 420ms) */
  .js .site { animation: headerIn 420ms var(--ease-premium-out) backwards; }
  @keyframes headerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

  /* signature entrance: frame, field light, pattern, eagle, masthead, headline, lede, actions, rail, ticker */
  .js .hero-frame { animation: frameIn 1100ms var(--ease-out-quint) backwards; }
  .js .hero-atmosphere { animation: heroLightIn 1800ms var(--ease-out-quint) backwards 120ms; }
  .js .hero-mark { animation: eagleIn 1500ms var(--ease-out-quint) backwards 150ms; }
  .js .hero-mark::after { animation: eagleSheen 1450ms var(--ease-controlled) 780ms both; }
  .js .hero-meta { animation: chIn var(--dur-4) var(--ease-out-quint) backwards 120ms; }
  /* H1 reveals line by line through an overflow mask (LineReveal) — not char-by-char */
  .js .hero h1 .lr-i { animation: lineMask var(--dur-section) var(--ease-premium-out) backwards; }
  .js .hero h1 .lr-line:nth-child(1) .lr-i { animation-delay: 180ms; }
  .js .hero h1 .lr-line:nth-child(2) .lr-i { animation-delay: 270ms; }
  .js .hero h1 .lr-line:nth-child(3) .lr-i { animation-delay: 360ms; }
  @keyframes lineMask { from { transform: translateY(125%); } to { transform: translateY(0); } }
  .js .hero-lede { animation: chIn var(--dur-4) var(--ease-out-quint) backwards 380ms; }
  .js .hero-actions { animation: chIn var(--dur-4) var(--ease-out-quint) backwards 480ms; }
  .js .hero-lines .hero-line:nth-child(1) { animation: chIn var(--dur-4) var(--ease-out-quint) backwards 560ms; }
  .js .hero-lines .hero-line:nth-child(2) { animation: chIn var(--dur-4) var(--ease-out-quint) backwards 620ms; }
  .js .hero-lines .hero-line:nth-child(3) { animation: chIn var(--dur-4) var(--ease-out-quint) backwards 680ms; }
  .js .hero-lines .hero-line:nth-child(4) { animation: chIn var(--dur-4) var(--ease-out-quint) backwards 740ms; }
  .js .hero-lines { animation: lineFade var(--dur-5) var(--ease-out-quint) backwards 540ms; }
  .js .hero-award { animation: chIn var(--dur-4) var(--ease-out-quint) backwards 760ms; }
  .js .hero-ticker { animation: tickerIn var(--dur-5) var(--ease-out-quint) backwards 600ms; }
  .js .hero-ticker .t-rule { animation: ruleDraw 600ms var(--ease-out-quint) backwards 820ms; }

  @keyframes frameIn { from { opacity: 0; transform: scale(1.012); } to { opacity: 1; transform: scale(1); } }
  @keyframes heroLightIn { from { opacity: 0; transform: scale(0.985); } to { opacity: 0.74; transform: scale(1); } }
  @keyframes eagleIn { from { opacity: 0; transform: translateY(24px); } to { opacity: var(--eagle-rest, 0.055); transform: translateY(0); } }
  @keyframes eagleSheen {
    0% { opacity: 0; transform: translate3d(-130%, 0, 0); }
    26% { opacity: 0.56; }
    68% { opacity: 0.22; }
    100% { opacity: 0; transform: translate3d(130%, 0, 0); }
  }
  @keyframes chIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes headlineIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes lineFade { from { border-top-color: transparent; } to { border-top-color: var(--line-onnavy); } }
  @keyframes tickerIn { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
}

/* ============================================================
   Responsive refinements — tablet + phone, designed not shrunk
   ============================================================ */

/* ---------- Tablet (701–1023px): close the dead-zone ---------- */
@media (min-width: 701px) and (max-width: 1023px) {
  .hero-inner { padding-top: calc(var(--header-h) + 52px); }
  .hero-lines { max-width: none; gap: 0 clamp(28px, 5vw, 56px); }
  .wwd-grid, .dossier-grid, .recognition-grid, .ventures-grid { gap: clamp(2rem, 4vw, 3rem); }
}

/* ---------- Phone + small tablet (≤860px) ---------- */
@media (max-width: 860px) {
  .hero-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px clamp(16px, 5vw, 32px); max-width: 520px; }
  .hero-line { min-height: 44px; padding: 9px 0; font-size: 1rem; }
  .hero-line i { font-size: 0.64rem; }
  .spec-rail { grid-template-columns: 1fr 1fr; }
  /* traffic reads like a tear sheet: two up, last spans full */
  .traffic { grid-template-columns: 1fr 1fr; gap: 20px 22px; }
  .traffic .t:last-child { grid-column: 1 / -1; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery .g-main { grid-column: span 2; }
  .ld-aside, .bio-aside { position: static; }
}

/* ---------- Phone (≤600px): the elite first impression ---------- */
@media (max-width: 600px) {
  :root { --header-h: 78px; }
  .wrap.nav { padding-top: 14px; padding-bottom: 14px; }
  .site.scrolled .wrap.nav { padding-top: 12px; padding-bottom: 12px; }

  .hero { min-height: 90vh; min-height: 90svh; }
  .hero h1 { font-size: clamp(2.9rem, 11.5vw, 4.2rem); line-height: 0.94; max-width: 12ch; }
  .hero-inner { padding-top: calc(var(--header-h) + clamp(22px, 5vh, 40px)); padding-bottom: clamp(34px, 6vh, 56px); }
  .hero-mark { right: -32vw; bottom: 0; height: 58vh; height: 58svh; --eagle-rest: 0.38; }
  .hero-lede { font-size: 1.04rem; max-width: 40ch; }
  .hero-meta { display: none; }
  .hero-actions { gap: 14px 22px; }

  /* practice accordion: full measure on small screens */
  .practice-summary { padding-left: 0; padding-right: 0; column-gap: 16px; }
  .practice-detail { padding-left: 0; padding-right: 0; }
  .practice-row:hover { background: transparent; }
  .practice-detail, .practice-list { min-width: 0; }
  .practice-detail > p { max-width: none; }
  .practice-list { grid-template-columns: 1fr; }
  .practice-cue { gap: 7px; }
  .practice-cue-label { font-size: 0.54rem; letter-spacing: 0.08em; }

  .ventures-grid { gap: clamp(2.2rem, 7vw, 3rem); }
  .sec-head { margin-bottom: clamp(1.8rem, 7vw, 2.6rem); }

  /* sticky CTA: engineered action bar, not a utility strip */
  .sticky-cta { border-top: 1px solid var(--line-onnavy); }
  .sticky-cta a { min-height: 60px; }
  .sticky-cta .call { box-shadow: inset -1px 0 0 rgba(232, 214, 160, 0.14); }
  .listing-facts { grid-template-columns: 1fr; }
  .listing-facts div + div { border-left: 0; border-top: 1px solid var(--line-navy); }
}

@media (max-width: 420px) {
  .award-plaque img { width: 200px; }
  .hero h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .hero-actions .btn { flex: 0 0 auto; min-width: 190px; }
}
@media (max-width: 1023px) {
  .footer-base { padding-bottom: calc(max(22px, env(safe-area-inset-bottom)) + 64px); }
}
@media (max-width: 480px) {
  .demo-table th, .demo-table td { padding: 10px 8px; font-size: 0.85rem; }
  .demo-table thead th { letter-spacing: 0.06em; }
}

/* ---------- Mobile editorial polish: keep proof visible, tuck away secondary copy ---------- */
@media (max-width: 600px) {
  :root {
    --space-2: clamp(2.9rem, 12vw, 4.2rem);
    --space-3: clamp(3.65rem, 15vw, 5.2rem);
    --space-4: clamp(4.25rem, 17vw, 6rem);
    --gap-head: clamp(1.75rem, 7vw, 2.4rem);
  }

  body { line-height: 1.58; }
  p { text-wrap: pretty; }
  .lede { font-size: 1.02rem; line-height: 1.58; }
  .subhero { padding-top: calc(var(--header-h) + 34px); padding-bottom: 38px; }
  .subhero h1 { font-size: clamp(2.35rem, 10.2vw, 3.45rem); max-width: 16ch; -webkit-hyphens: manual; hyphens: manual; text-wrap: balance; }
  .subhero .lede { margin-top: 14px; max-width: 34ch; }
  .sec-head h2 { margin-top: 10px; }
  .sec-head .after { margin-top: 12px; }

  #who-we-help .route-grid,
  .capital-audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #who-we-help .route-card,
  .capital-audience-grid .route-card {
    justify-content: center;
    min-height: 94px;
    padding: 14px;
  }
  #who-we-help .route-card .mono-label,
  #who-we-help .route-card p,
  #who-we-help .route-card .text-link,
  .capital-audience-grid .route-card .mono-label,
  .capital-audience-grid .route-card p,
  .capital-audience-grid .route-card .text-link {
    display: none;
  }
  #who-we-help .route-card h3,
  .capital-audience-grid .route-card h3 {
    font-family: var(--font-body);
    font-size: 0.96rem;
    line-height: 1.22;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-color: var(--gold-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  #current-opportunities .dossier-grid {
    gap: 1.15rem;
  }
  #current-opportunities .dossier-grid + .dossier-grid {
    margin-top: 2rem !important;
    padding-top: 2rem;
    border-top: 1px solid var(--line-onnavy);
  }
  #current-opportunities .dossier-media .frame {
    padding: 8px;
  }
  #current-opportunities .dossier-media .frame::after {
    inset: 8px;
  }
  #current-opportunities .dossier-media img {
    aspect-ratio: 16 / 9.2;
  }
  #current-opportunities .dossier-tag,
  .status-tag {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    padding: 6px 10px;
  }
  #current-opportunities .dossier-copy,
  .venture-body p,
  .invest-inner > p,
  .listing-card-body .sum,
  .svc-line p,
  .cap-cell p,
  .process-step p,
  .insight-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #current-opportunities .dossier-copy { -webkit-line-clamp: 3; line-clamp: 3; }
  .venture-body p,
  .invest-inner > p,
  .listing-card-body .sum,
  .svc-line p,
  .cap-cell p,
  .process-step p,
  .insight-card p {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  #current-opportunities .hero-actions {
    margin-top: 18px !important;
  }

  .venture-card img { aspect-ratio: 16 / 8.8; }
  .venture-body { padding: 1.15rem; }
  .venture-body .mono-label { margin-bottom: 8px; font-size: 0.64rem; letter-spacing: 0.11em; }
  .venture-body p { margin-bottom: 10px; }
  .invest .chip { margin: 18px 0 22px; }

  .svc-line { padding: 15px 0; gap: 5px 15px; }
  .svc-line h3 { font-size: 1.24rem; }
  .svc-line .n { min-width: 20px; }
  .svc-intro p + p { margin-top: 0.85em; }
  .svc-disclosure,
  .focus-note,
  .off-market-note {
    padding: 13px 15px;
    font-size: 0.88rem;
    line-height: 1.55;
  }
  .cap-cell { padding: 14px 15px; }
  .use-list li { padding-top: 13px; padding-bottom: 13px; }
  #capital-markets .svc-intro p:nth-of-type(2),
  #lender-network .svc-intro .svc-disclosure {
    display: none;
  }

  .listing-card { border-color: rgba(27, 58, 45, 0.2); }
  .listing-card + .listing-card { margin-top: 1.1rem; }
  .listing-card figure img { aspect-ratio: 16 / 9.8; }
  .listing-card-body { padding: 1.15rem; gap: 8px; }
  .listing-card-body h3 a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .listing-card-body .addr { font-size: 0.9rem; }
  .listing-card .listing-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 4px 0 10px;
  }
  .listing-card .listing-facts div { padding: 10px 8px; }
  .listing-card .listing-facts div + div { border-top: 0; border-left: 1px solid var(--line-navy); }
  .listing-facts dt { font-size: 0.56rem; letter-spacing: 0.1em; }
  .listing-facts dd { font-size: 0.7rem; }
  .listing-card-body .row { gap: 8px 14px; }
  .listing-card-body .row .btn { width: 100%; min-height: 48px; }

  .ld-addr a,
  .bio-portrait-card > .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  .bio-portrait-card > .social-link {
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.92);
  }
  .bio-portrait-card > .social-link svg { width: 23px; height: 23px; }
  /* Let wide demographic/detail tables scroll horizontally instead of clipping off-screen */
  .detail-table, .demo-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .demo-table th,
  .demo-table td {
    padding: 9px 6px;
    font-size: 0.79rem;
  }
  .demo-table thead th {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }

  .footer-grid {
    padding-top: 3rem;
    padding-bottom: 1.6rem;
    row-gap: 1.35rem;
  }
  .footer-brand p { margin-top: 12px; line-height: 1.55; }
  .footer-brand .lic { margin-top: 10px; }
  .footer .footer-h {
    min-height: 0;
    margin-bottom: 6px;
    font-size: 0.62rem;
    letter-spacing: 0.13em;
  }
  .footer .logo,
  .footer-col a { min-height: 44px; font-size: 0.82rem; }
  .footer-trec {
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 0.76rem;
  }
  .footer-trec a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
  .footer-base { padding-top: 16px; }
}

/* Touch devices: don't let a tap fire-and-stick the pointer hover lift / image zoom */
@media (hover: none) {
  .route-card:hover, .venture-card:hover, .listing-card:hover, .invest-panel:hover, .download-card:hover { transform: none; }
  .venture-card:hover img, .listing-card:hover figure img, .g-item:hover img { transform: none; }
}

/* print: keep it readable */
@media print {
  .site, .mobile-menu, .sticky-cta, .hero-ticker { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   PREMIUM MOTION SYSTEM
   One signature moment (What We Do deal stack); restraint elsewhere.
   Progressive enhancement only: every effect is gated by `.js` AND
   @media (prefers-reduced-motion: no-preference). The un-classed
   defaults are the final, readable states, so no-JS, reduced-motion,
   crawlers and full-page captures always see complete content.
   Animations use transform + opacity only.
   ============================================================ */

/* ---- Mobile: shorter reveal travel + tighter feel ---- */
@media (max-width: 767px) {
  :root { --reveal-y: 7px; --reveal-y-sm: 6px; }
}
/* ---- Mobile: calmer reveals — quicker settle + near-flat cascade ----
   On a long phone page ~35 reveals firing over 720ms with up to 280ms of cascade
   read as "a lot." Here each reveal family is sped up and its stagger collapsed to
   a 0-50ms whisper, so the page settles softly instead of parading in. Travel is
   the trimmed --reveal-y above. Overrides are LONGHANDS only (duration/delay), so
   the base keyframes, easing (--ease-out-quint), and `backwards` fill are preserved
   and every .in element still resolves to opacity:1. Motion-gated, so reduced
   motion stays fully static; base .reveal{opacity:1} is untouched (no-JS safe). */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .js .reveal.in { animation-duration: 420ms; }
  .js .reveal-d1.in { animation-delay: 25ms; }
  .js .reveal-d2.in { animation-delay: 40ms; }
  .js .reveal-d3.in { animation-delay: 50ms; }

  .js .reveal-group.in > * { animation-duration: 380ms; }
  .js .reveal-group.in > *:nth-child(2) { animation-delay: 25ms; }
  .js .reveal-group.in > *:nth-child(3) { animation-delay: 40ms; }
  .js .reveal-group.in > *:nth-child(4) { animation-delay: 50ms; }
  .js .reveal-group.in > *:nth-child(5) { animation-delay: 50ms; }
  .js .reveal-group.in > *:nth-child(n+6) { animation-delay: 50ms; }

  /* Home Who We Help rows (same riseSm family) tightened to match. */
  .js .who-rows.in > .who-row { animation-duration: 380ms; }
  .js .who-rows.in > .who-row:nth-child(2) { animation-delay: 25ms; }
  .js .who-rows.in > .who-row:nth-child(3) { animation-delay: 40ms; }
  .js .who-rows.in > .who-row:nth-child(4) { animation-delay: 50ms; }
  .js .who-rows.in > .who-row:nth-child(5) { animation-delay: 50ms; }
  .js .who-rows.in > .who-row:nth-child(6) { animation-delay: 50ms; }
}

/* ---- LineReveal: line-by-line headline rise behind an overflow mask ---- */
.line-reveal { display: block; }
/* padding/negative-margin give the mask vertical breathing room so a tight
   line-height headline is never clipped at rest, while still hiding the rise. */
.line-reveal .lr-line { display: block; overflow: hidden; padding: 0.14em 0.04em; margin: -0.14em -0.04em; }
.line-reveal .lr-i { display: block; }
/* Rotating headline word: a restrained masked swap through the disciplines that
   settles on the anchor. The line sizes to its current word (max-content) so a
   long word like "capital markets." isn't clipped sideways by the vertical mask. */
.lr-line--rotate { overflow: hidden; width: max-content; max-width: none; }
.word-rotate { display: inline-block; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .js .word-rotate { transition: transform 380ms var(--ease-premium-out), opacity 320ms var(--ease-premium-out); }
  .js .word-rotate.wr-out { transform: translateY(-120%); opacity: 0; }
  .js .word-rotate.wr-pre { transform: translateY(120%); opacity: 0; transition: none; }
}
/* (hero h1 animation lives in the hero choreography block above) */

/* ---- SectionRule: a hairline that draws in left-to-right (scaleX) ---- */
.section-rule { display: block; width: 100%; height: 1px; border: 0; background: var(--line-gold); transform-origin: left center; }
.section-rule.on-navy { background: var(--line-onnavy); }
.recognition .section-rule { margin: clamp(22px, 3vw, 30px) 0 0; max-width: 460px; }
.ventures .section-rule, #ventures .section-rule { margin: clamp(22px, 3vw, 30px) 0 0; max-width: 520px; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal.in .section-rule,
  .js .section-rule.reveal.in { animation: ruleDraw var(--dur-section) var(--ease-premium-out) backwards; animation-delay: 160ms; }
}

/* ---- Recognition: credential card slides + scales in like a filed record ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .award-plaque.reveal.in { animation: credentialIn var(--dur-reveal) var(--ease-premium-out) backwards; }
  @keyframes credentialIn { from { opacity: 0; transform: translateX(28px) scale(0.99); } to { opacity: 1; transform: none; } }
}

/* ---- Opportunities: framed image reveals (opacity + slight scale) + restrained hover zoom ----
   The clip lives on .frame-clip (around the image only), so the "FOR LEASE"
   tag that sits above the frame at top:-12px is never cut off. */
.dossier-media .frame-clip { display: block; overflow: hidden; }
.dossier-media .frame-clip img { transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .dossier-media.reveal.in .frame-clip img { animation: mediaReveal 700ms var(--ease-premium-out) backwards; animation-delay: 90ms; }
  @keyframes mediaReveal { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } }
}
@media (hover: hover) and (min-width: 1024px) {
  .dossier-media .frame-clip img { transition: transform var(--dur-3) var(--ease-out-quart); }
  .dossier-grid:hover .dossier-media .frame-clip img { transform: scale(1.02); }
}

/* ============================================================
   WHAT WE DO — Institutional Deal Stack (the one signature moment)
   Base = a readable vertical list of solid deal cards (mobile / tablet /
   no-JS / reduced-motion: CardStackLite).
   Desktop + motion upgrades to a native CSS sticky pile: each card is
   position:sticky with a staggered top, so the browser stacks them as you
   scroll. No scroll-jacking, no transforms, no opacity tricks. A tiny scroll
   handler only highlights the active step-index item.
   ============================================================ */

.deal-stack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.4vw, 26px); }
.deal-card {
  position: relative; margin: 0; min-width: 0;
  display: flex; align-items: center; /* centers content when cards are equalized to one height */
  background: linear-gradient(168deg, var(--surface-card) 0%, var(--surface-card-2) 100%);
  border: 1px solid var(--line-navy);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
}
.deal-card::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 26%, transparent 70%);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.deal-card__inner { padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; align-items: flex-start; min-width: 0; width: 100%; }
.deal-card__num { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; color: var(--gold-text); }
.deal-card__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -0.012em; color: var(--fg-dark); margin: 10px 0 0; }
.deal-card__scope { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--stone); margin: 13px 0 0; }
.deal-card__desc { margin: 14px 0 0; max-width: 54ch; color: var(--fg-dark-muted); line-height: 1.66; font-size: 1rem; }
.deal-card__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 6px 24px; margin: 18px 0 0; padding: 0; list-style: none; width: 100%; min-width: 0; max-width: 560px; }
.deal-card__desc, .deal-card__scope, .deal-card__num, .deal-card__note, .deal-card__title { max-width: 100%; }
@media (max-width: 767px) { .deal-card__list { grid-template-columns: 1fr; } }
.deal-card__list li { position: relative; padding: 6px 0 6px 20px; font-size: 0.98rem; color: var(--fg-dark); }
.deal-card__list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 9px; height: 1.5px; background: var(--gold-deep); }
.deal-card__note { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-text); margin: 16px 0 0; }
.deal-card__link { margin: 22px 0 0; }
.wwd-index { display: none; }
.deal-spacer { display: none; }

/* ---- Native CSS sticky pile (cross-browser, no scroll-jacking; desktop AND mobile) ----
   Each card is position:sticky with a staggered top, so the browser stacks them
   natively as you scroll: the current card sits at the top of the pile, previous
   cards stay beneath it with their top edge peeking. Cards are solid and their
   content is always visible. The fixed header is cleared by --wwd-pin-top.
   Disabled under reduced motion (plain vertical list). */
@media (prefers-reduced-motion: no-preference) {
  .wwd .deal-stack { display: block; }
  /* a real spacer (counts as content, unlike padding) gives the last card room
     to scroll to the top of the pile and hold the full stack before release */
  .wwd .deal-spacer { display: block; height: clamp(130px, 24vh, 320px); }
  .wwd .deal-card {
    position: sticky;
    top: calc(var(--wwd-pin-top) + var(--i, 0) * 14px);
    min-height: clamp(320px, 56vh, 500px);
    margin-bottom: clamp(36px, 7vh, 120px);
    box-shadow: 0 24px 54px -34px rgba(11, 31, 23, 0.5);
    /* static layer promotion so the soft shadow rasterizes once instead of
       re-rasterizing at sub-pixel offsets every scroll frame (Retina shimmer).
       translateZ(0) over will-change: an intentional, permanent layer rather
       than a "change is coming" hint the browser must keep speculatively warm. */
    transform: translateZ(0);
  }
  .wwd .deal-card:last-child { margin-bottom: 0; }
  /* a focused card comes to the front so its focus ring is never hidden behind a stacked card (keyboard a11y) */
  .wwd .deal-card:focus-within { z-index: 5; }
}

/* Step index + animated active-card cue only on desktop (the sticky intro column
   has room for the index, and animating box-shadow is kept off mobile GPUs to
   avoid paint-during-scroll). On mobile the pile is pure CSS with a static shadow. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .wwd .deal-card { transition: box-shadow var(--dur-3) var(--ease-premium-out); }
  .wwd .deal-card.is-active { box-shadow: 0 34px 72px -38px rgba(11, 31, 23, 0.62); }
  /* Deck step index in the sticky column: makes the four-card scroll obvious */
  .wwd-index {
    display: block; list-style: none; margin: clamp(28px, 3.4vw, 44px) 0 0; padding: 0;
    border-left: 1px solid var(--line-navy);
  }
  .wwd-index li {
    position: relative; padding: 11px 0 11px 22px;
    font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.02em;
    color: var(--fg-dark-muted); opacity: 0.5;
    transition: opacity var(--dur-3) var(--ease-premium-out), color var(--dur-3) var(--ease-premium-out);
  }
  .wwd-index li::before {
    content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px;
    background: var(--gold); transform: scaleY(0); transform-origin: center;
    transition: transform var(--dur-3) var(--ease-premium-out);
  }
  .wwd-index li.is-current { opacity: 1; color: var(--navy); }
  .wwd-index li.is-current::before { transform: scaleY(1); }
  .wwd-index__n { color: var(--gold-text); margin-right: 11px; }
  .wwd-index li.is-current .wwd-index__n { color: var(--gold-label); }
}

/* ===== Icon system: thin-line glyphs from the client pack (currentColor fill) ===== */
.ico { display: inline-block; vertical-align: middle; width: 1.5em; height: 1.5em; color: var(--navy); flex: none; transition: color var(--dur-hover) var(--ease-premium-out); }
.ico path, .ico rect, .ico circle, .ico polygon, .ico line, .ico ellipse { fill: currentColor; }
/* Discipline marks on What We Do cards (home + services) */
.deal-card__icon { display: block; line-height: 0; margin-bottom: 14px; }
.deal-card__icon .ico { width: 44px; height: 44px; }
/* Persona marks on the Who We Help rows (home) */
.who-row__head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.who-row__icon { display: inline-flex; line-height: 0; }
.who-row__icon .ico { width: 30px; height: 30px; }
.who-row:hover .who-row__icon .ico, .who-row:focus-visible .who-row__icon .ico { color: var(--gold-deep); }
/* Source marks on the lender-network cells (capital markets) */
.cap-cell__icon { display: block; line-height: 0; width: 32px; height: 32px; margin-bottom: 12px; }
/* Leading marks on route cards (services + who we help) */
.route-card__icon { display: block; line-height: 0; width: 34px; height: 34px; margin-bottom: 14px; }
.route-card:hover .route-card__icon, .route-card:focus-visible .route-card__icon { color: var(--gold-deep); }


/* ============================================================
   Monteith Ranch hero adaptation
   Photographic ranch backdrop + gold badge mark (vs. Eagle Nest's
   video + eagle silhouette). Overrides only what differs.
   ============================================================ */
.hero-photo-bg {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: saturate(0.74) contrast(1.05) brightness(0.46);
  pointer-events: none;
}
/* Anchor the crest a fixed ~20px above the hero's bottom edge so it never gets
   clipped by the booking ticker. A % bottom gave inconsistent clearance because
   the eagleIn settle leaves a fixed ~24px downward transform regardless of hero
   height; a fixed px keeps the same clearance on tall and short desktops alike. */
.hero-mark { aspect-ratio: 1 / 1; height: min(62vh, 540px); right: clamp(28px, 3vw, 52px); bottom: 60px; --eagle-rest: 0.5; }
.hero-mark::before, .hero-mark::after { display: none; }
.hero-eagle { opacity: 0.5; filter: drop-shadow(0 18px 40px rgba(11, 31, 23, 0.4)); mix-blend-mode: normal; }
.hero-mark-glow { opacity: 0.5; }
/* On phones the badge leaves the hero (the iOS dynamic toolbar makes the hero
   height unstable, so a pocket placement there can never settle) and becomes a
   watermark on the What We Do section instead. Desktop keeps the hero badge. */
@media (max-width: 700px) {
  .hero-mark { display: none; }
}
/* The ranch headline runs longer than the Eagle Nest wordmark hero, so it needs
   a wider measure and a slightly softer clamp. The headline is hand-broken into
   three .lr-line spans; this single wide measure + softer clamp keeps each span
   on ONE row (3 even rows) on every viewport. Unconditional on purpose: a phone-
   only narrow measure made each line wrap, turning 3 lines into 6 rows. */
.hero h1 { max-width: 15ch; font-size: clamp(2.7rem, 5.4vw, 5.2rem); }
/* Hunt-type rows borrow the who-row pattern; give the illustration icons room */
.who-row__icon img { width: 32px; height: 32px; object-fit: contain; }
/* Home harvest-teaser strip */
.harvest-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(2rem, 4vw, 3rem); }
.harvest-strip a { position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--line-gold-soft); aspect-ratio: 4 / 5; }
.harvest-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 480ms var(--ease-out-quart); }
.harvest-strip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 9px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-light); background: linear-gradient(180deg, transparent, rgba(11, 31, 23, 0.82)); }
@media (hover: hover) { .harvest-strip a:hover img, .harvest-strip a:focus-visible img { transform: scale(1.05); } }
.harvest-strip a:focus-visible { border-color: var(--line-gold); }
@media (max-width: 720px) { .harvest-strip { grid-template-columns: repeat(2, 1fr); } }
/* Footer social row (mirrors the Eagle Nest LinkedIn treatment, multi-network) */
.footer-socials { display: flex; gap: 14px; margin-top: 22px; }
.footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-onnavy); border-radius: var(--radius-sm); color: var(--fg-light-muted); transition: color 200ms ease-out, border-color 200ms ease-out, transform 200ms ease-out; }
.footer-socials a:hover { color: var(--gold); border-color: var(--line-gold); transform: translateY(-2px); }
.footer-socials svg { width: 18px; height: 18px; fill: currentColor; display: block; }
/* Thin location band */
.location-band { text-align: center; padding: clamp(2.4rem, 5vw, 3.6rem) 0; }
.location-band p { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--fg-dark); }
.location-band .eyebrow { justify-content: center; margin-bottom: 14px; }

/* ----- Inner-page helpers (steps, team, gallery, detail rows) ----- */
/* Process / how-it-works step grid (wraps existing .process-step) */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-navy); border: 1px solid var(--line-navy); margin-top: clamp(2rem, 4vw, 3rem); }
.steps-grid .process-step { background: var(--surface-card); min-height: 196px; }
.steps-grid .process-step h3 { margin-top: 6px; }
.dark .steps-grid { background: var(--line-onnavy); border-color: var(--line-onnavy); }
.dark .steps-grid .process-step { background: var(--navy); }
.dark .steps-grid .process-step h3 { color: var(--fg-light); }
.dark .steps-grid .process-step p { color: var(--fg-light-muted); }
@media (max-width: 860px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps-grid { grid-template-columns: 1fr; } }

/* Team / crew grid */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: transparent; border-top: 1px solid var(--line-navy); border-left: 1px solid var(--line-navy); margin-top: clamp(2rem, 4vw, 3rem); }
.team-card { background: var(--surface-card); padding: clamp(1.4rem, 2.4vw, 1.9rem); border-right: 1px solid var(--line-navy); border-bottom: 1px solid var(--line-navy); }
@media (max-width: 880px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .team-grid { grid-template-columns: 1fr; } }
.team-card .mono-label { color: var(--gold-text); } /* leadership role labels match the brass roster labels below */
.team-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 8px 0 0; color: var(--fg-dark); }
.team-card p { margin: 10px 0 0; color: var(--fg-dark-muted); font-size: 0.96rem; }
/* Leadership = 2 detailed cards; the rest become a compact roster so name-only
   members read as a deliberate roster, not hollow profile cards. */
.team-grid.is-lead { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
@media (max-width: 540px) { .team-grid.is-lead { grid-template-columns: 1fr; } }
.roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(1.6rem, 3vw, 2.6rem); margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.7rem, 3vw, 2.3rem); border-top: 1px solid var(--line-navy); }
.roster-group .mono-label { display: block; color: var(--gold-text); }
.roster-names { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.32; color: var(--fg-dark); margin: 10px 0 0; }

/* Gallery grid (wraps existing .g-item + lightbox) */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 16px); margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 820px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery-grid { grid-template-columns: 1fr; } }

/* Detail row: text + framed illustration (hunt / beef detail blocks) */
.detail-row { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; padding: clamp(2rem, 4vw, 3.2rem) 0; border-top: 1px solid var(--line-navy); }
.detail-row:first-of-type { border-top: 0; }
@media (min-width: 880px) { .detail-row { grid-template-columns: 1.2fr 0.8fr; } .detail-row.flip .detail-row__media { order: -1; } }
.detail-row__media { background: var(--surface-card-2); border: 1px solid var(--line-gold-soft); border-radius: var(--radius-sm); padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; place-items: center; }
.detail-row__media img { max-height: 240px; width: auto; }
.dark .detail-row { border-top-color: var(--line-onnavy); }
.dark .detail-row__media { background: rgba(245, 240, 232, 0.04); border-color: var(--line-onnavy); }

/* ============================================================
   Elevation pass — world-class polish (desktop + mobile)
   ============================================================ */

/* Inner-page hero: anchor the empty side with a faint gold badge watermark,
   add deco corner ticks and a brass seam so every page opens as crafted as home. */
.subhero { box-shadow: inset 0 -1px 0 var(--line-gold-soft); }
.subhero-eagle {
  right: clamp(20px, 2.4vw, 44px); top: 50%; transform: translateY(-50%);
  height: auto; width: min(42vw, 440px); aspect-ratio: 1 / 1;
  opacity: 0.13; filter: drop-shadow(0 20px 50px rgba(11, 31, 23, 0.5));
}
.subhero-frame {
  position: absolute; inset: clamp(12px, 1.6vw, 22px); z-index: 1; pointer-events: none;
  border: 1px solid var(--line-onnavy); display: none;
}
.subhero-frame::before, .subhero-frame::after,
.subhero-frame i::before, .subhero-frame i::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border-color: var(--gold); border-style: solid;
}
.subhero-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.subhero-frame::after { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.subhero-frame i::before { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.subhero-frame i::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
@media (min-width: 1024px) { .subhero-frame { display: block; } }
@media (max-width: 720px) { .subhero-eagle { width: 70vw; opacity: 0.08; right: -22vw; } }

/* use-list -> refined single-column lined list (kills the empty grid-cell holes) */
.use-list { grid-template-columns: 1fr; gap: 0; background: transparent; border: 0; border-top: 1px solid var(--line-gold-soft); }
.use-list li { background: transparent; border-bottom: 1px solid var(--line-gold-soft); padding: 12px 14px 12px 30px; }
.use-list li::before { left: 12px; top: 21px; background: var(--gold); width: 10px; }
.dark .use-list { border-top-color: var(--line-onnavy); }
.dark .use-list li { border-bottom-color: var(--line-onnavy); color: var(--fg-light-muted); }

/* Who-rows on DARK sections: light labels + gold-rimmed cream coin icons (the
   dark engraved line art was invisible on dark green before this) */
.dark .who-row { border-color: var(--line-onnavy); }
.dark .who-row__label { color: var(--fg-light); }
.dark .who-row__value { color: var(--fg-light-muted); }
/* Other dark who-rows keep the gold deco diamond (only #exotic carries the
   species medallions; this base rule covers any future dark registry rows). */
.dark .who-row__icon { width: 28px; height: 28px; background: none; border: 0; display: grid; place-items: center; flex: none; }
.dark .who-row__icon img { display: none; }
.dark .who-row__icon::before { content: ""; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 1px rgba(212, 175, 101, 0.35); }
.dark .who-row:hover .who-row__icon::before, .dark .who-row:focus-visible .who-row__icon::before { background: var(--gold-warm); }
.dark .who-row:hover .who-row__label, .dark .who-row:focus-visible .who-row__label { color: var(--gold-warm); }

/* Exotic Program (#exotic, dark): each species shows its own SMALL engraving as a
   stamped parchment coin (natural olive ink on a warm cream tile, thin gold
   hairline) instead of the generic diamond. The light tile supplies the contrast
   the dark green denies the olive line art, so every animal reads at coin scale.
   Scoped to #exotic so other dark who-rows keep the diamond, and contact/404
   (non-dark) are untouched. Engravings are pre-normalized square medallion PNGs. */
#exotic .who-row__icon {
  width: 52px; height: 52px;            /* desktop coin */
  padding: 5px;                          /* visible frame inset (PNG carries a small pad too) */
  background: var(--parchment);          /* #F5F0E8 warm cream, not glaring white */
  border: 1px solid var(--line-gold);    /* thin gold hairline */
  border-radius: var(--radius-sm);       /* 2px stamped-coin corner */
  display: grid; place-items: center;
  flex: none; overflow: hidden;
  box-shadow: 0 1px 0 rgba(11, 31, 23, 0.35), 0 0 0 1px rgba(11, 31, 23, 0.18); /* seats the coin on green: a hair of depth + a dark keyline so the cream edge does not glow */
  transition: border-color var(--dur-hover) var(--ease-premium-out),
              box-shadow var(--dur-hover) var(--ease-premium-out),
              transform var(--dur-hover) var(--ease-premium-out);
}
#exotic .who-row__icon img { display: block; width: 100%; height: 100%; object-fit: contain; } /* undo the global .dark img{display:none} */
#exotic .who-row__icon::before { content: none; }   /* no diamond here */
#exotic .who-row:hover .who-row__icon,
#exotic .who-row:focus-visible .who-row__icon {
  border-color: var(--gold);             /* brighten the rim */
  box-shadow: 0 3px 10px rgba(11, 31, 23, 0.45), 0 0 0 1px var(--gold-deep);
  transform: translateY(-1px);
}
@media (max-width: 480px) { #exotic .who-row__icon { width: 48px; height: 48px; padding: 4px; } }
@media (max-width: 390px) { #exotic .who-row__icon { width: 44px; height: 44px; padding: 4px; } }
@media (prefers-reduced-motion: reduce) {
  #exotic .who-row:hover .who-row__icon,
  #exotic .who-row:focus-visible .who-row__icon { transform: none; }
}

/* The -V- monogram and other gold artwork read better on dark with a soft halo */
.dark img[src*="monogram"] { filter: drop-shadow(0 0 40px rgba(212, 175, 101, 0.22)); }

/* Brass seam at every dark/cta pivot, the Eagle Nest section-rhythm signature */
.dark + .warm, .dark + .paper, .dark + .sec, .warm + .dark, .paper + .dark, .sec + .dark,
.cta-band { box-shadow: inset 0 1px 0 var(--line-gold-soft); }

/* Detail-row framed illustration: add an engraved deco corner tick */
.detail-row__media { position: relative; }
.detail-row__media::before, .detail-row__media::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--gold); opacity: 0.5;
}
.detail-row__media::before { top: 10px; left: 10px; border-width: 1.5px 0 0 1.5px; }
.detail-row__media::after { bottom: 10px; right: 10px; border-width: 0 1.5px 1.5px 0; }

/* Deal-stack ("What We Do" signature pile) line-icon glyphs: thin gold strokes,
   not the default filled-disc treatment. */
.deal-card__icon .ico--line { color: var(--gold-deep); width: 42px; height: 42px; }
.ico--line path, .ico--line circle, .ico--line rect, .ico--line line, .ico--line polygon, .ico--line ellipse {
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.deal-card.is-active .deal-card__icon .ico--line { color: var(--gold); }

/* "The Game" species stage: show full trophy photos framed (mixed portrait /
   landscape), never crop antlers. Overrides the dossier cover-crop for this section. */
#native .dossier-media img { object-fit: contain; aspect-ratio: 5 / 4; background: rgba(11, 31, 23, 0.5); }

/* Full-bleed serif statement band — a typographic pause between sections.
   Solid darkest-green field, faint sunray + cartouche texture, brass seams. */
.statement-band {
  position: relative; overflow: hidden; text-align: center;
  background: var(--ink); color: var(--fg-light);
  padding-top: var(--space-4); padding-bottom: var(--space-4);
  box-shadow: inset 0 1px 0 var(--line-gold-soft), inset 0 -1px 0 var(--line-gold-soft);
}
.statement-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% 12%, rgba(212, 175, 101, 0.1), transparent 60%),
    url(/images/pattern-sunray.webp) center / cover;
  opacity: 0.07; mix-blend-mode: screen;
}
.statement-band > .wrap { position: relative; z-index: 1; max-width: 1000px; }
.statement-band .eyebrow { justify-content: center; color: var(--gold); margin-bottom: clamp(18px, 2.4vw, 26px); }
.statement-line {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.5rem, 6.4vw, 5.2rem); line-height: 1.02; letter-spacing: -0.016em;
  color: var(--fg-light); margin: 0; text-wrap: balance;
}
.statement-line .gold { color: var(--gold-warm); font-style: normal; }
.statement-sub { margin: clamp(20px, 3vw, 30px) auto 0; max-width: 56ch; color: var(--fg-light-muted); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.72; }
.statement-rule { display: block; width: 38px; height: 1px; background: var(--gold); margin: clamp(22px, 3vw, 30px) auto 0; }

/* Game cards — the engraved animal art is the hero, shown LARGE (it is what
   draws the click). Big illustration panel on top, compact copy beneath. */
.game-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.game-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface-card); border: 1px solid var(--line-gold-soft); border-radius: var(--radius-sm); overflow: hidden; transition: transform var(--dur-hover) var(--ease-out-quart), box-shadow var(--dur-hover) ease-out, border-color var(--dur-hover) ease-out; }
/* Focus cue everywhere (no transform, so it never fights the sticky stack). */
.game-card:focus-within { border-color: var(--line-gold); box-shadow: var(--elev-hover); }
/* The lift is pointer-only so a tap on touch can't leave a stuck hover state. */
@media (hover: hover) { .game-card:hover { transform: translateY(-4px); border-color: var(--line-gold); box-shadow: var(--elev-hover); } }
.game-card__art { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: clamp(20px, 3vw, 38px); background: radial-gradient(125% 105% at 50% 6%, var(--surface-card-2), var(--parchment-warm)); border-bottom: 1px solid var(--line-gold-soft); }
.game-card__art::before, .game-card__art::after { content: ""; position: absolute; width: 16px; height: 16px; border: 1.5px solid var(--gold); opacity: 0.5; pointer-events: none; }
.game-card__art::before { top: 12px; left: 12px; border-width: 1.5px 0 0 1.5px; }
.game-card__art::after { bottom: 12px; right: 12px; border-width: 0 1.5px 1.5px 0; }
.game-card__art img { width: 100%; height: 100%; object-fit: contain; max-height: 340px; }
.game-card__art .art-shift { display: grid; place-items: center; width: 100%; height: 100%; }
.game-card__body { padding: clamp(1.3rem, 2.2vw, 1.9rem); display: flex; flex-direction: column; gap: 7px; }
.game-card__body .mono-label { color: var(--gold-text); }
.game-card__body h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 2.5vw, 2.15rem); line-height: 1.05; color: var(--fg-dark); margin: 2px 0 0; }
.game-card__body p { color: var(--fg-dark-muted); font-size: 0.98rem; line-height: 1.55; margin: 4px 0 8px; }
.game-card .text-link { margin-top: auto; }
@media (max-width: 900px) { .game-cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } .game-card__art { aspect-ratio: 16 / 11; } }

/* ----- Motion + big-art for the engravings (game cards + hunt detail rows) ----- */
.game-card__art, .detail-row__media { overflow: hidden; }
/* Hover: gold wash behind the art + corner-tick bloom */
.game-card__art { transition: background var(--dur-3) ease-out; }
.game-card:hover .game-card__art, .game-card:focus-within .game-card__art { background: radial-gradient(125% 110% at 50% 4%, var(--surface-card), rgba(212, 175, 101, 0.18)); }
.game-card__art::before, .game-card__art::after, .detail-row__media::before, .detail-row__media::after { z-index: 3; transition: opacity var(--dur-hover) ease-out, width var(--dur-hover) var(--ease-out-quart), height var(--dur-hover) var(--ease-out-quart); }
.game-card:hover .game-card__art::before, .game-card:hover .game-card__art::after,
.game-card:focus-within .game-card__art::before, .game-card:focus-within .game-card__art::after { opacity: 0.95; width: 22px; height: 22px; }

/* Hunt detail rows: bigger framed engravings on a warm panel */
.detail-row__media { background: radial-gradient(125% 105% at 50% 6%, var(--surface-card-2), var(--parchment-warm)); min-height: clamp(248px, 28vw, 360px); }
.detail-row__media .art-shift { display: grid; place-items: center; width: 100%; height: 100%; }
.detail-row__media .art-shift img { max-height: 320px; width: auto; }
.dark .detail-row__media { background: radial-gradient(125% 105% at 50% 6%, rgba(245, 240, 232, 0.06), rgba(245, 240, 232, 0.02)); }
/* Mobile (stacked): the engraving LEADS its block (art on top), so each species
   reads as one unit, illustration then name/description, instead of an orphaned
   panel that looks like it belongs to the next block. Compact so it is a header
   plate, not a second full screen. */
@media (max-width: 879px) {
  .detail-row { gap: clamp(0.85rem, 3.5vw, 1.3rem); padding: clamp(1.9rem, 6.5vw, 2.8rem) 0; }
  .detail-row__media { order: -1; min-height: 0; padding: clamp(0.9rem, 4.5vw, 1.4rem); }
  .detail-row__media .art-shift img, .detail-row__media img { max-height: clamp(112px, 29vw, 162px); }
}

/* Engraving -> real photo cross-fade (game cards). The photo cover-fills the
   panel and Ken-Burns settles in on hover; on touch it peeks once on reveal. */
.game-card__art img.cross-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-height: none; opacity: 0; transform: scale(1.06); transition: opacity var(--dur-4) var(--ease-premium-out), transform 1200ms var(--ease-premium-out); z-index: 1; }
@media (hover: hover) { .game-card:hover .cross-photo, .game-card:focus-within .cross-photo { opacity: 1; transform: scale(1); } }
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .js .game-cards.in .game-card .cross-photo { animation: artPeek 3.6s var(--ease-premium-out) 0.5s 1 both; }
}
@keyframes artPeek { 0% { opacity: 0; transform: scale(1.06); } 22% { opacity: 1; transform: scale(1.01); } 62% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.04); } }

@media (prefers-reduced-motion: no-preference) {
  /* The big engraving draws in (scale + fade) after its card/row rises */
  .js .game-cards.in .art-shift img { animation: artDrawIn 860ms var(--ease-premium-out) backwards; }
  .js .game-cards.in .game-card:nth-child(1) .art-shift img { animation-delay: 150ms; }
  .js .game-cards.in .game-card:nth-child(2) .art-shift img { animation-delay: 290ms; }
  .js .game-cards.in .game-card:nth-child(3) .art-shift img { animation-delay: 430ms; }
  .js .detail-row.reveal.in .art-shift img { animation: artDrawIn 900ms var(--ease-premium-out) backwards 140ms; }
  /* Scroll-driven parallax depth (progressive enhancement, no JS). The shift
     wrapper drifts, composing with the engraving's own draw-in scale. */
  @supports (animation-timeline: view()) {
    .art-shift { animation: artParallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes artParallax { from { transform: translateY(6%); } to { transform: translateY(-6%); } }
  }
}
@keyframes artDrawIn {
  from { opacity: 0; transform: scale(0.9) translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   "A Year on the Ranch" — signature seasonal timeline
   Horizontal on desktop (gold rule drawn across, nodes + engravings),
   vertical on mobile (rule down the left). Scroll-revealed.
   ============================================================ */
.year-band .sec-head { text-align: center; margin-inline: auto; }
.year-band .sec-head .eyebrow { justify-content: center; }
.year-band .sec-head .lede { margin-inline: auto; }
.year-track {
  position: relative;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 24px);
  margin-top: clamp(2.8rem, 5vw, 4rem);
}
/* The gold baseline rule that the nodes sit on (draws left to right on reveal) */
.year-track::before {
  content: ""; position: absolute; top: 6px; left: 6%; right: 6%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold-strong) 6%, var(--line-gold-strong) 94%, transparent);
  transform: scaleX(0); transform-origin: left;
}
.year-step { position: relative; text-align: center; padding-top: 30px; display: flex; flex-direction: column; align-items: center; }
.year-node {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line-gold); z-index: 1;
}
.year-step__art { height: clamp(72px, 8vw, 104px); display: grid; place-items: center; margin-bottom: 14px; }
.year-step__art img { max-height: clamp(72px, 8vw, 104px); width: auto; }
.year-step__month { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); }
.year-step__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.05; color: var(--fg-dark); margin: 5px 0 0; }
.year-step__desc { color: var(--fg-dark-muted); font-size: 0.9rem; line-height: 1.5; margin: 9px 0 0; max-width: 28ch; }
.year-foot { text-align: center; margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.year-foot p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--fg-dark-muted); max-width: 46ch; margin-inline: auto; }

@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .year-track:not(.in)::before { transform: scaleX(0); }
  .js .year-track.in::before { animation: ruleDrawX 1200ms var(--ease-out-quint) 160ms forwards; }
  .js .year-track.in .year-node { animation: nodePop 460ms var(--ease-out-quint) backwards; }
  .js .year-track.in .year-step:nth-child(1) .year-node { animation-delay: 220ms; }
  .js .year-track.in .year-step:nth-child(2) .year-node { animation-delay: 300ms; }
  .js .year-track.in .year-step:nth-child(3) .year-node { animation-delay: 380ms; }
  .js .year-track.in .year-step:nth-child(4) .year-node { animation-delay: 460ms; }
  .js .year-track.in .year-step:nth-child(5) .year-node { animation-delay: 540ms; }
  /* The engravings land on their nodes ~80ms after each pop, a left-to-right
     procession that resolves with the rule draw (instead of a flat group fade). */
  .js .year-track.in .year-step__art img { animation: artLand 620ms var(--ease-out-quint) backwards; }
  .js .year-track.in .year-step:nth-child(1) .year-step__art img { animation-delay: 300ms; }
  .js .year-track.in .year-step:nth-child(2) .year-step__art img { animation-delay: 380ms; }
  .js .year-track.in .year-step:nth-child(3) .year-step__art img { animation-delay: 460ms; }
  .js .year-track.in .year-step:nth-child(4) .year-step__art img { animation-delay: 540ms; }
  .js .year-track.in .year-step:nth-child(5) .year-step__art img { animation-delay: 620ms; }
}
@keyframes artLand { from { opacity: 0; transform: translateY(10px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes ruleDrawX { to { transform: scaleX(1); } }
@keyframes nodePop { from { transform: translateX(-50%) scale(0); } to { transform: translateX(-50%) scale(1); } }

/* Vertical timeline on smaller screens (through iPad portrait, so the 5-up
   never renders cramped in the 761-899 band). */
@media (max-width: 899px) {
  .year-track { grid-template-columns: 1fr; gap: 0; margin-left: 6px; }
  .year-track::before { top: 8px; bottom: 8px; left: 6px; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, var(--line-gold-strong) 4%, var(--line-gold-strong) 96%, transparent);
    transform: scaleY(0); transform-origin: top; }
  .js .year-track.in::before { animation: ruleDrawY 1200ms var(--ease-out-quint) 160ms forwards; }
  .year-step { text-align: left; align-items: flex-start; padding: 0 0 clamp(2rem, 6vw, 2.6rem) 40px; flex-direction: column; }
  .year-step:last-child { padding-bottom: 0; }
  .year-node { top: 6px; left: 8px; transform: translate(-50%, 0); }
  .js .year-track.in .year-node { animation: nodePopV 520ms var(--ease-out-quint) backwards; }
  .year-step__art { height: 62px; margin: 0 0 8px; place-items: center start; }
  .year-step__art img { max-height: 62px; }
  .year-step__name { font-size: 1.55rem; }
  .year-step__desc { max-width: 40ch; }
}
@keyframes ruleDrawY { to { transform: scaleY(1); } }
@keyframes nodePopV { from { transform: translate(-50%, 0) scale(0); } to { transform: translate(-50%, 0) scale(1); } }

/* ============================================================
   ELEVATED INNER-PAGE COMPONENTS
   Numbered 2-col FAQ · connected process pipeline · spec
   comparison cards · numbered detail blocks. Lifts hunts/beef/
   the-ranch/range to the home-page quality bar.
   ============================================================ */

/* ----- Elevated FAQ: sticky intro + numbered, grouped accordion ----- */
.faq-grid { display: grid; gap: clamp(2.4rem, 5vw, 3.6rem); }
@media (min-width: 940px) {
  .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; column-gap: clamp(3rem, 5vw, 5rem); }
  .faq-intro { position: sticky; top: 112px; }
}
.faq-intro .section-rule { margin-top: clamp(1.4rem, 3vw, 2rem); }
.faq-help { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.faq-help .mono-label { display: block; margin-bottom: 8px; }
.faq-help p { margin: 0 0 12px; color: var(--fg-dark-muted); font-size: 0.96rem; }
.dark .faq-help p { color: var(--fg-light-muted); }

.faq-col { counter-reset: faq; }
.faq-group { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); display: flex; align-items: center; gap: 16px; margin: clamp(1.8rem, 3.4vw, 2.6rem) 0 2px; }
.faq-group:first-child { margin-top: 0; }
.faq-group::after { content: ""; flex: 1; height: 1px; background: var(--line-gold-soft); }
.dark .faq-group { color: var(--gold); }
.faq-q { position: relative; border-bottom: 1px solid var(--line-navy); }
.dark .faq-q { border-bottom-color: var(--line-onnavy); }
.faq-q::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: center; transition: transform var(--dur-3) var(--ease-out-quart); }
.faq-q[open]::before { transform: scaleY(1); }
.faq-q summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 18px; padding: clamp(1.1rem, 2vw, 1.5rem) 2px clamp(1.1rem, 2vw, 1.5rem) clamp(16px, 2vw, 24px); transition: padding-left var(--dur-3) var(--ease-out-quart); }
.faq-q summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .faq-q:hover summary { padding-left: clamp(22px, 2.6vw, 32px); } }
.faq-q[open] summary { padding-left: clamp(22px, 2.6vw, 32px); }
.faq-q__n { font-family: var(--font-mono); font-size: 0.74rem; color: var(--gold-text); }
.faq-q__n::before { counter-increment: faq; content: counter(faq, decimal-leading-zero); }
.dark .faq-q__n { color: var(--gold); }
.faq-q__text { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.16; color: var(--fg-dark); letter-spacing: -0.005em; }
.dark .faq-q__text { color: var(--fg-light); }
.faq-q__icon { position: relative; width: 18px; height: 18px; align-self: center; flex: none; }
.faq-q__icon::before, .faq-q__icon::after { content: ""; position: absolute; background: var(--gold-deep); transition: transform var(--dur-3) var(--ease-out-quart), opacity var(--dur-2) ease-out; }
.faq-q__icon::before { left: 0; right: 0; top: 50%; height: 1.6px; margin-top: -0.8px; }
.faq-q__icon::after { top: 0; bottom: 0; left: 50%; width: 1.6px; margin-left: -0.8px; }
.faq-q[open] .faq-q__icon::after { transform: scaleY(0); opacity: 0; }
.faq-q[open] .faq-q__icon::before { background: var(--gold); }
.faq-q__a { padding: 0 2px clamp(1.1rem, 2vw, 1.5rem) calc(0.74rem + 18px + clamp(16px, 2vw, 24px)); }
.faq-q__a p { margin: 0 0 0.9em; max-width: 64ch; color: var(--fg-dark-muted); }
.dark .faq-q__a p { color: var(--fg-light-muted); }
.faq-q__a > :last-child { margin-bottom: 0; }
.faq-q__a a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-gold); }
.faq-q__a .use-list { margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) { .faq-q[open] .faq-q__a { animation: faqOpen var(--dur-3) var(--ease-out-quart); } }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } }

/* ----- Connected process pipeline (numbered nodes on a gold rule) ----- */
.pipeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 28px); margin-top: clamp(2.8rem, 4.5vw, 3.8rem); }
.pipeline::before { content: ""; position: absolute; top: 28px; left: 11%; right: 11%; height: 1px; background: var(--line-gold-soft); }
.dark .pipeline::before { background: var(--line-onnavy); }
.pipe-step { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pipe-node { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-gold); background: var(--surface-card); font-family: var(--font-mono); font-size: 1.02rem; color: var(--gold-text); position: relative; z-index: 1; box-shadow: 0 0 0 7px var(--paper); transition: border-color var(--dur-hover) ease-out, transform var(--dur-hover) var(--ease-out-quart); }
.warm .pipe-node { box-shadow: 0 0 0 7px var(--parchment-warm); }
.dark .pipe-node { background: var(--navy); color: var(--gold); box-shadow: 0 0 0 7px var(--navy-deep); }
.pipe-step h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.08; margin: 22px 0 0; color: var(--fg-dark); }
.pipe-step p { margin: 9px 0 0; color: var(--fg-dark-muted); font-size: 0.95rem; line-height: 1.55; max-width: 26ch; }
.dark .pipe-step h3 { color: var(--fg-light); }
.dark .pipe-step p { color: var(--fg-light-muted); }
@media (prefers-reduced-motion: no-preference) { .js .pipeline.in .pipe-node { animation: nodePop 520ms var(--ease-out-quint) backwards; } .js .pipeline.in .pipe-step:nth-child(2) .pipe-node { animation-delay: 120ms; } .js .pipeline.in .pipe-step:nth-child(3) .pipe-node { animation-delay: 240ms; } .js .pipeline.in .pipe-step:nth-child(4) .pipe-node { animation-delay: 360ms; } }
@media (max-width: 820px) {
  .pipeline { grid-template-columns: 1fr; gap: 0; margin-left: 6px; }
  .pipeline::before { top: 10px; bottom: 10px; left: 28px; right: auto; width: 1px; height: auto; }
  .pipe-step { text-align: left; align-items: stretch; display: grid; grid-template-columns: 56px 1fr; gap: 4px 22px; padding-bottom: clamp(1.8rem, 5vw, 2.4rem); }
  .pipe-step:last-child { padding-bottom: 0; }
  .pipe-step h3 { grid-column: 2; margin: 12px 0 0; }
  .pipe-step p { grid-column: 2; max-width: 42ch; }
  .pipe-node { grid-row: span 3; }
}

/* ----- Spec comparison cards (halves & wholes, share options) ----- */
.share-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.share-card { position: relative; overflow: hidden; background: var(--surface-card); border: 1px solid var(--line-gold-soft); border-radius: var(--radius-sm); padding: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-direction: column; box-shadow: var(--elev-1); transition: transform var(--dur-hover) var(--ease-out-quart), box-shadow var(--dur-hover) ease-out, border-color var(--dur-hover) ease-out; }
.share-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-warm)); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-4) var(--ease-premium-out); }
@media (hover: hover) {
  .share-card:hover { transform: translateY(-4px); border-color: var(--line-gold); box-shadow: var(--elev-hover); }
  .share-card:hover::before { transform: scaleX(1); }
}
.share-card__label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); }
.share-card h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 3.4vw, 3.1rem); line-height: 1; color: var(--fg-dark); margin: 8px 0 0; }
.share-card__desc { margin: 14px 0 0; color: var(--fg-dark-muted); line-height: 1.6; flex: 1 1 auto; }
.share-spec { margin: clamp(20px, 3vw, 26px) 0 0; border-top: 1px solid var(--line-navy); }
.share-spec > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line-navy); }
.share-spec dt { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dark-muted); margin: 0; }
.share-spec dd { margin: 0; font-family: var(--font-display); font-size: 1.15rem; color: var(--fg-dark); text-align: right; }
.share-card .btn { margin-top: clamp(1.6rem, 3vw, 2.2rem); align-self: flex-start; }
.share-card__foot { margin: 14px 0 0; font-size: 0.8rem; color: var(--fg-dark-muted); }
@media (max-width: 700px) { .share-cards { grid-template-columns: 1fr; } }
/* Three-up variant (range disciplines) — base .share-card__desc flex aligns the rails */
.share-cards.is-trio { grid-template-columns: repeat(3, 1fr); }
/* Trio cards have one spec row + short copy, so don't stretch the desc (built
   for beef's 4-row spec); pin the lone rail to the bottom instead. */
.share-cards.is-trio .share-card__desc { flex: 0 0 auto; }
.share-cards.is-trio .share-spec { margin: auto 0 0; }
@media (max-width: 860px) { .share-cards.is-trio { grid-template-columns: 1fr; } }

/* Key/value rail used on its own (outside a share-card), e.g. the lodge at-a-glance.
   Named kv-rail to avoid colliding with the dark dossier .spec-rail grid above. */
.kv-rail { display: block; margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; border: 0; border-top: 1px solid var(--line-navy); }
.kv-rail > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line-navy); }
.kv-rail dt { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dark-muted); margin: 0; }
.kv-rail dd { margin: 0; font-family: var(--font-display); font-size: 1.2rem; color: var(--fg-dark); text-align: right; }
.dark .kv-rail { border-top-color: var(--line-onnavy); }
.dark .kv-rail > div { border-bottom-color: var(--line-onnavy); }
.dark .kv-rail dt { color: var(--fg-light-muted); }
.dark .kv-rail dd { color: var(--fg-light); }

/* ----- Numbered detail blocks (from inquiry to pickup, etc.) ----- */
.dnum-list { margin-top: clamp(2.4rem, 4vw, 3.4rem); border-top: 1px solid var(--line-navy); }
.dnum { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 56px); padding: clamp(1.9rem, 3.6vw, 2.7rem) 0; border-bottom: 1px solid var(--line-navy); }
.dnum__n { font-family: var(--font-mono); font-size: 0.92rem; color: var(--gold-text); white-space: nowrap; }
.dnum__n::before { content: ""; display: block; width: 30px; height: 1px; background: var(--gold); margin-bottom: 14px; }
.dnum h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2.05rem); line-height: 1.06; color: var(--fg-dark); }
.dnum > div > p { margin: 12px 0 0; color: var(--fg-dark-muted); max-width: 62ch; }
.dnum .use-list { margin-top: 16px; max-width: 620px; }
@media (max-width: 640px) { .dnum { grid-template-columns: 1fr; gap: 14px 0; } .dnum__n::before { margin-bottom: 8px; } }

/* ============================================================
   Reusable mobile card-stack (the What We Do deal-stack effect,
   generalized). Opt in: .stack-m on a container of SOLID cards,
   .stack-card + style="--i:N" on each card, an optional
   .stack-spacer last child. Mobile only, reduced-motion guarded.
   ============================================================ */
/* The spacer only exists to release the pile; hide it everywhere it is not the
   active stack (off-mobile grids, reduced motion) so it never becomes a phantom
   empty grid cell. */
.stack-spacer { display: none; }
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .stack-m { display: block; }
  .stack-m > .stack-card {
    position: sticky;
    top: calc(var(--header-h) + 12px + var(--i, 0) * 12px);
    min-height: clamp(300px, 52vh, 460px);
    margin-bottom: clamp(26px, 6vh, 84px);
    box-shadow: 0 24px 54px -34px rgba(11, 31, 23, 0.5);
    transform: translateZ(0);
  }
  .stack-m > .stack-card:last-of-type { margin-bottom: 0; }
  /* a focused card comes to the front so its focus ring/content is never hidden
     behind a card pinned above it (mirrors the deal-stack safeguard) */
  .stack-m > .stack-card:focus-within { z-index: 5; }
  .stack-m > .stack-spacer { display: block; height: clamp(96px, 20vh, 240px); }
}

/* Hunts "By the species" deck: card-ify the detail-rows on mobile so the stack
   piles cleanly (solid cards hide the ones beneath). One frame only — the
   engraving sits on the card, not inside its own bordered panel. The pile/sticky
   itself comes from the generic .stack-m utility above (motion-gated). */
@media (max-width: 700px) {
  #native-details .stack-m > .detail-row {
    background: var(--surface-card);
    border: 1px solid var(--line-gold-soft);
    border-radius: var(--radius-sm);
    padding: clamp(1.5rem, 5.5vw, 2rem);
    overflow: hidden;
    /* When a uniform min-height (below) gives a short card slack, center the
       engraving+copy block so the extra room splits evenly top/bottom rather
       than dumping a dead gap under the button. No-op when content fills. */
    align-content: center;
  }
  #native-details .detail-row__media {
    background: none; border: 0; min-height: 0;
    padding: 0 0 clamp(0.8rem, 3vw, 1.2rem);
  }
  #native-details .detail-row__media::before,
  #native-details .detail-row__media::after { display: none; }
  #native-details .detail-row__media .art-shift img,
  #native-details .detail-row__media img { max-height: clamp(140px, 36vw, 190px); }
}

/* Uniform stack-card height: the user wants every species card the SAME size so
   the pile reveals evenly (uneven heights make the stagger feel funky). The copy
   varies card to card AND reflows in line-wrap steps as the screen narrows, so we
   floor every card to the tallest card's natural height within three NON-overlapping
   width bands (each band's floor sits a few px above its measured max). Motion-gated
   to match the stack itself — reduced-motion users get static, naturally-sized cards
   (no padded slack). Bands are mutually exclusive, so order does not matter. */
@media (min-width: 437px) and (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  #native-details .stack-m > .detail-row { min-height: 720px; } /* 437px+ (iPhone 16 Pro Max @440, large phones) */
}
@media (min-width: 390px) and (max-width: 436px) and (prefers-reduced-motion: no-preference) {
  #native-details .stack-m > .detail-row { min-height: 775px; } /* 390–436px (most iPhones, Pixel) */
}
@media (max-width: 389px) and (prefers-reduced-motion: no-preference) {
  #native-details .stack-m > .detail-row { min-height: 850px; } /* ≤389px (SE, mini, older Android) */
}

/* ============================================================
   Email updates signup (footer + beef page). Dark-surface form.
   ============================================================ */
.footer-signup {
  display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2.4vw, 24px);
  padding-bottom: clamp(26px, 3.6vw, 40px); margin-bottom: clamp(26px, 3.6vw, 40px);
  border-bottom: 1px solid var(--line-onnavy);
}
/* Footer instance needs top breathing room from the section above it.
   (The beef-page instance sits inside its own padded .sec, so it's excluded.) */
.footer .footer-signup { padding-top: var(--space-2); }
@media (min-width: 720px) {
  .footer-signup { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(28px, 5vw, 72px); }
}
.footer-signup__intro p { color: rgba(255, 255, 255, 0.72); max-width: 46ch; font-size: 0.95rem; line-height: 1.6; margin-top: 8px; }
.footer-signup__form { min-width: 0; }
.footer-signup__row { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-signup__row input[type="email"] {
  flex: 1 1 220px; min-width: 0; padding: 13px 15px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-onnavy);
  border-radius: var(--radius-sm); color: var(--fg-light);
  font-family: var(--font-body); font-size: 1rem;
}
.footer-signup__row input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.42); }
.footer-signup__row input[type="email"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }
.footer-signup__row .btn { flex: 0 0 auto; }
.footer-signup__opts {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 13px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.footer-signup__opts label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.footer-signup__opts input { accent-color: var(--gold); width: 15px; height: 15px; flex: none; }
.footer-signup__status { margin-top: 13px; min-height: 1.2em; font-size: 0.9rem; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.footer-signup__status[data-state="ok"] { color: var(--gold-warm); }
.footer-signup__status[data-state="error"] { color: #e8b0a6; }
button[data-loading] { opacity: 0.7; cursor: progress; }