/* ============================================================
   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) ----------
   A gold button where a navy panel sweeps in from a brass chevron tab on the
   right. The panel is a clip-path reveal that carries its own cream copy of
   the label (aria-hidden), so at every frame the words read: dark on the gold,
   cream wherever the navy has reached. Hover and keyboard focus behave the
   same. 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: 2; inset: 5px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  padding: 0 53px 0 25px; /* the button's padding minus the 5px inset, so the copy sits exactly on the label */
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  color: var(--fg-light);
  clip-path: inset(0 0 0 100%);
}
.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__fill { transition: clip-path 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__fill, .btn-reveal:focus-visible .btn-reveal__fill { clip-path: inset(0); }
  .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, .desktop-nav .nav-top {
    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, .desktop-nav .nav-top::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, .desktop-nav .nav-top:hover { color: var(--fg-light); }
  .desktop-nav > a:hover::after, .desktop-nav .nav-top:hover::after { transform: scaleX(1); }
  .desktop-nav > a[aria-current="page"], .desktop-nav .nav-top[aria-current="page"], .desktop-nav .nav-top.is-current { color: var(--gold-warm); }
  .desktop-nav > a[aria-current="page"]::after, .desktop-nav .nav-top[aria-current="page"]::after, .desktop-nav .nav-top.is-current::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;
    white-space: nowrap;
    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); }

/* The nav scrolls if a short phone can't fit it; the auto margins center it
   when there is room and collapse to the top when there isn't. */
.mobile-menu-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.mobile-menu-nav > :first-child { margin-top: auto; }
.mobile-menu-nav > :last-child { margin-bottom: auto; }
.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: 13px 0; border-bottom: 1px solid rgba(232, 214, 160, 0.08);
  transition: 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"], .mobile-menu-link.is-current { color: var(--gold-warm); }
/* Hunting and The Ranch carry their dropdown items as an indented list */
.mobile-menu-group { border-bottom: 1px solid rgba(232, 214, 160, 0.08); }
.mobile-menu-group .mobile-menu-link { border-bottom: 0; padding-bottom: 4px; }
.mobile-menu-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 0 0 10px 34px; }
.mobile-menu-sub a {
  display: flex; align-items: center; min-height: 38px;
  font-size: 1rem; color: var(--fg-light-muted); text-decoration: none; transition: color 200ms ease-out;
}
.mobile-menu-sub a:hover, .mobile-menu-sub a[aria-current="page"] { color: var(--gold-warm); }
.mobile-menu-nav > * { opacity: 0; transform: translateY(14px); transition: opacity 260ms ease-out, transform 260ms ease-out; }
.mobile-menu.is-open .mobile-menu-nav > * { opacity: 1; transform: translateY(0); }
.mobile-menu.is-open .mobile-menu-nav > :nth-child(1) { transition-delay: 120ms; }
.mobile-menu.is-open .mobile-menu-nav > :nth-child(2) { transition-delay: 170ms; }
.mobile-menu.is-open .mobile-menu-nav > :nth-child(3) { transition-delay: 220ms; }
.mobile-menu.is-open .mobile-menu-nav > :nth-child(4) { transition-delay: 270ms; }

.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: "";
}
.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-lede--split span { display: block; }
.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); }
}

/* ---------- Announcement bar (homepage hero) ----------
   Reusable and off by default. Turned on by filling in data-text on the
   .hero-marquee element in index.html; main.js builds the strip. */
.hero-marquee {
  position: relative; z-index: 4;
  background: var(--navy);
  border-top: 1px solid rgba(212, 175, 101, 0.34);
  overflow: hidden;
}
.hero-marquee > a {
  display: block; text-decoration: none;
  padding: 11px 0;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  white-space: nowrap;
}
.hero-marquee__track { display: flex; width: max-content; }
.hero-marquee__seq { display: flex; align-items: center; flex: none; }
.hero-marquee .hm-i { padding: 0 1.15rem; }
.hero-marquee .hm-i b { color: var(--gold-warm); font-weight: 700; }
.hero-marquee .hm-dot { color: rgba(212, 175, 101, 0.62); }
.hero-marquee .hm-cta { color: var(--gold-warm); font-weight: 700; }
/* Static fallback: without motion the track would sit still and clip the
   second copy, so shrink to one screenful and center it. */
.hero-marquee__track { transform: translateX(0); }
@media (prefers-reduced-motion: no-preference) {
  /* Translate by exactly one of the 6 copies. If the copy count in index.html
     changes, change this fraction to match (1/count). */
  .hero-marquee__track { animation: hmScroll 42s linear infinite; }
  .hero-marquee > a:hover .hero-marquee__track,
  .hero-marquee > a:focus-visible .hero-marquee__track { animation-play-state: paused; }
  @keyframes hmScroll { from { transform: translateX(0); } to { transform: translateX(-16.6667%); } }
}
@media (prefers-reduced-motion: reduce) {
  .hero-marquee > a { padding-left: var(--gutter); padding-right: var(--gutter); }
  .hero-marquee__track { width: 100%; overflow: hidden; }
  .hero-marquee__seq:not(:first-child) { display: none; }
  .hero-marquee__seq { flex-wrap: wrap; white-space: normal; }
  .hero-marquee__seq .hm-dot:last-child { display: none; }
}
@media (max-width: 600px) {
  .hero-marquee > a { font-size: 0.68rem; letter-spacing: 0.12em; padding: 10px 0; }
  .hero-marquee .hm-i { padding: 0 0.85rem; }
}
.hero-marquee > a:focus-visible { outline: 2px solid var(--gold-warm); outline-offset: -3px; }

.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; }
/* a headline's intro line outside .sec-head (the dark "The Hunt" sections) gets the same gap */
.h-lg + .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; }
.cta-note { margin: 18px 0 0; max-width: 46ch; color: var(--fg-light-muted); line-height: 1.55; }

/* ---------- 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; }
}
/* Phones: 2 columns. Hunting (the longest list) runs down the left, Cattle Co. and
   The Ranch stack on the right. */
@media (max-width: 599px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .footer-grid > .footer-col:nth-child(2) { grid-row: span 2; }
}
.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); }
/* 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; }
/* 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 and their headings on the 4-column desktop footer
   (under 800px they're left-aligned, see the footer block above) */
@media (min-width: 800px) { .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;
}
@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: 20px 16px 10px; text-align: left;
  /* dense enough behind the label that it reads even over a bright patch of photo */
  background: linear-gradient(transparent, rgba(15, 42, 32, 0.78) 45%, rgba(15, 42, 32, 0.9));
  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 Phone row: who answers, then the number and the line's hours */
.direct-who { display: block; margin-bottom: 4px; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--fg-light); }
.direct-hours { margin: 10px 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--fg-light-muted); }
.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, .js .subhero .booked-note { 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, .hero-marquee { 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. Overrides only what
   differs from the base hero.
   ============================================================ */
.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 base template's 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, .harvest-strip > figure { position: relative; display: block; margin: 0; 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.74) 52%, rgba(11, 31, 23, 0.9)); }
@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 (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; } }

/* 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: deco corner ticks and a brass seam. (No badge watermark:
   Colin took it off 2026-10-14, it sat behind the text on phones.) */
.subhero { box-shadow: inset 0 -1px 0 var(--line-gold-soft); }
.subhero-frame {
  position: absolute; inset: clamp(12px, 1.6vw, 22px); z-index: 1; pointer-events: none;
  top: calc(var(--header-h) + clamp(12px, 1.6vw, 22px)); /* below the fixed nav, so all four corners show */
  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; } }

/* 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 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 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, .pipe-step h4 { 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, .dark .pipe-step h4 { 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, .pipe-step h4 { 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; }

/* ---------- /beef "The Herd": "Raised here" beside one photo, then the slideshow ---------- */
.herd__grid { display: grid; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; }
.herd__grid > * { min-width: 0; }
.herd__photo { display: block; position: relative; }
.herd__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line-onnavy); }
.herd__text .h-lg { margin-top: 14px; }
.herd__text .h-lg + p { margin-top: clamp(1rem, 2.4vw, 1.5rem); }
.herd__text p:not(.eyebrow) { color: var(--fg-light-muted); font-size: 1.06rem; line-height: 1.7; max-width: 58ch; }
.herd__text p:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .herd__grid { grid-template-columns: 1fr 1fr; } }
.herd .slideshow { margin-top: var(--space-2); }

/* ---------- /beef: "What's available" (live from Ranch OS) ----------
   main.js swaps .avail__body's fallback line for a row of cards built from
   public_beef_availability: one per way to buy. min-height holds the filled
   row's height (today's 3 cards) so the page doesn't move when the data lands. */
.avail-sec .sec-head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.avail__body { min-height: 101.5rem; } /* today's 3 cards, measured 2026-10-29 at each width band's widest */
@media (min-width: 400px) { .avail__body { min-height: 106.5rem; } }
@media (min-width: 480px) { .avail__body { min-height: 116.25rem; } }
@media (min-width: 560px) { .avail__body { min-height: 62.25rem; } }   /* one a row, picture beside the copy */
@media (min-width: 760px) { .avail__body { min-height: 38.75rem; } } /* 3 across */
@media (min-width: 1100px) { .avail__body { min-height: 39.875rem; } }
.avail__lead { margin: 0; max-width: 62ch; font-size: 1.08rem; line-height: 1.6; color: var(--fg-light); }

.buy-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: 1fr; }
@media (min-width: 560px) { .buy-cards[data-count="2"], .buy-cards[data-count="4"] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .buy-cards:not([data-count="1"]):not([data-count="2"]):not([data-count="4"]) { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .buy-cards[data-count="4"] { grid-template-columns: repeat(4, 1fr); } }
.buy-cards[data-count="1"] { max-width: 420px; }
.buy-card { display: flex; flex-direction: column; min-width: 0; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line-onnavy); border-radius: var(--radius-sm); overflow: hidden; }
/* the picture: 3:2, two quiet gold corners like the /hunts species cards */
.buy-card__art { position: relative; aspect-ratio: 3 / 2; background: var(--parchment-warm); border-bottom: 1px solid var(--line-onnavy); }
.buy-card__art::before, .buy-card__art::after { content: ""; position: absolute; z-index: 1; width: 16px; height: 16px; border: 1.5px solid var(--gold-deep); opacity: 0.7; pointer-events: none; }
.buy-card__art::before { top: 10px; left: 10px; border-width: 1.5px 0 0 1.5px; }
.buy-card__art::after { bottom: 10px; right: 10px; border-width: 0 1.5px 1.5px 0; }
.buy-card__art picture, .buy-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.buy-card__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: clamp(1.1rem, 2vw, 1.5rem); }
.buy-card__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 1.8rem); line-height: 1.1; color: var(--fg-light); }
.buy-card__status { margin: 8px 0 0; font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-warm); }
.buy-card__text { margin: 10px 0 0; font-size: 0.98rem; line-height: 1.55; color: var(--fg-light-muted); }
.buy-card__status + .buy-card__text { margin-top: 12px; }
/* a breed card's "Half or whole details": pinned just above its button, so the links line up too */
.buy-card__more { margin: auto 0 0; padding-top: 14px; }
.buy-card__more + .buy-card__action { margin-top: 0; padding-top: 8px; }
.buy-card__more .text-link { min-height: 32px; font-size: 0.92rem; }
/* the action sits on the card's bottom edge, whatever the copy above it */
.buy-card__action { margin: auto 0 0; padding-top: clamp(1.1rem, 2vw, 1.4rem); }
.buy-card__action .btn { width: 100%; min-height: 48px; padding: 12px 18px; text-align: center; }
/* 3 across on an iPad: a little less padding so "Reserve Wagyu-Beefmaster" stays on one line */
@media (min-width: 760px) and (max-width: 1099px) {
  .buy-cards { gap: 14px; }
  .buy-card__body { padding: 16px 14px 14px; }
  .buy-card__action .btn { padding: 12px 8px; font-size: 0.9rem; white-space: nowrap; }
}
@media (min-width: 760px) and (max-width: 819px) { .buy-card__action .btn { font-size: 0.84rem; } }
/* 4 across (from 1280px, the widest wrap): the same tighter buttons */
@media (min-width: 1280px) {
  .buy-cards[data-count="4"] .buy-card__body { padding: 18px 16px 16px; }
  .buy-cards[data-count="4"] .buy-card__action .btn { padding: 12px 8px; font-size: 0.9rem; white-space: nowrap; }
}
/* one card a row between phone and iPad: the picture beside the copy, not a huge picture above it */
@media (min-width: 560px) and (max-width: 759px) {
  .buy-cards:not([data-count="2"]):not([data-count="4"]) .buy-card { flex-direction: row; }
  .buy-cards:not([data-count="2"]):not([data-count="4"]) .buy-card__art { flex: 0 0 42%; aspect-ratio: auto; min-height: 15rem; border-bottom: 0; border-right: 1px solid var(--line-onnavy); }
  .buy-card--calves .buy-card__art img { object-position: 20% 50%; } /* keep the steer's head in the taller crop */
}

/* the quiet line under the cards, with the main button beside it (under it on a phone) */
.avail__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: clamp(1.4rem, 2.6vw, 2rem); padding-top: clamp(1.2rem, 2.2vw, 1.6rem); border-top: 1px solid var(--line-onnavy); }
.avail__notes { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--fg-light-muted); }
.avail__notes:empty { display: none; }
.avail__foot .btn { flex: none; }
@media (max-width: 559px) { .avail__foot { flex-direction: column; align-items: stretch; } }
/* The online cut shop (Ranch OS): the Beef menu's Build a Box stays hidden until main.js hears it's live. */
[data-beef-shop][hidden] { display: none !important; }
/* and its stand-ins ("Ask Josh" lines), which main.js hides once the shop is live */
[data-beef-shop-off][hidden] { display: none !important; }

/* /beef How it works: two tracks, individual cuts (shop live only, smaller) and half or whole calf */
.lede .text-link { display: inline; min-height: 0; padding: 0; }
.how-track { margin-top: clamp(2.4rem, 4.5vw, 3.6rem); }
.how-track__label { display: flex; align-items: center; gap: 16px; margin: 0; color: var(--gold-text); }
.how-track__label::after { content: ""; flex: 1; height: 1px; background: var(--line-gold-soft); }
.how-track .pipeline { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.pipeline--small { grid-template-columns: repeat(3, 1fr); max-width: 880px; margin-inline: auto; }
.pipeline--small::before { top: 22px; left: 17%; right: 17%; }
.pipeline--small .pipe-node { width: 44px; height: 44px; font-size: 0.9rem; }
.pipeline--small .pipe-step h4 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); margin-top: 16px; }
@media (max-width: 820px) {
  .pipeline--small { grid-template-columns: 1fr; max-width: none; margin-inline: 6px 0; }
  .pipeline--small::before { top: 10px; left: 22px; right: auto; }
  .pipeline--small .pipe-step { grid-template-columns: 44px 1fr; }
  .pipeline--small .pipe-step h4 { margin-top: 8px; }
}
/* /beef FAQ: with the cuts group hidden, the next group heading is the column's first */
.faq-cuts[hidden] + .faq-group { margin-top: 0; }
/* A quiet outline button for dark panels (the gold one stays the main action). */
.btn-line { background: transparent; color: var(--gold-warm); box-shadow: inset 0 0 0 1px var(--gold); }
.btn-line:hover { background: rgba(212, 175, 101, 0.1); color: var(--gold-warm); }
.btn-line:active { transform: translateY(1px); }

/* ---------- /contact: the three inquiry choices lead the page ----------
   Big, plain buttons in the subhero so they sit above the fold on a phone.
   Phone, email, address, and the map follow in one section. */
.subhero--contact { padding-bottom: clamp(34px, 6vw, 72px); }
.inquiry-choices { list-style: none; margin: clamp(1.4rem, 3vw, 2.4rem) 0 0; padding: 0; display: grid; gap: 16px; max-width: 1000px; }
.inquiry-choices li { margin: 0; }
.inquiry-choices .btn { display: flex; width: 100%; min-height: 56px; font-size: 1.05rem; }
.inquiry-choices p { margin: 8px 0 0; font-size: 1rem; line-height: 1.45; text-align: center; color: var(--fg-light-muted); }
@media (min-width: 760px) { .inquiry-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 1000px) { .contact-grid--find { grid-template-columns: 0.85fr 1.15fr; } }

/* ---------- Header fit at narrow desktop widths ----------
   The header buttons ("Plan a Hunt", "Reserve your beef" on /beef) are
   longer than the template's "Inquire". Between 1024 and 1179px that
   wrapped the wordmark and nav onto two lines, so keep every label on
   one line and tighten the padding in that band instead. */
.logo-name b, .desktop-nav a, .desktop-nav .nav-top, .nav-phone { white-space: nowrap; }
.site .logo { flex: none; }
@media (min-width: 1024px) and (max-width: 1179px) {
  .desktop-nav > a, .desktop-nav .nav-top { padding-left: 8px; padding-right: 8px; letter-spacing: 0.05em; }
  .desktop-nav > a::after, .desktop-nav .nav-top::after { left: 8px; right: 8px; }
  .nav-right { gap: 14px; }
  .nav-cta { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   Round 3 simplification (mr35): the pieces the slimmer pages use.
   ============================================================ */

/* Home: three plain cards. The engraved scene fills the art panel. */
.game-card__art--scene { padding: 0; }
.game-card__art--scene picture { display: block; width: 100%; height: 100%; }
.game-card__art--scene img { width: 100%; height: 100%; object-fit: cover; max-height: none; }
.game-cards .game-card__body { flex: 1 1 auto; } /* links line up when the card copy differs in length */

/* A two-column block whose h2 runs straight into body copy (no .sec-head) */
.recognition-grid .h-lg + p:not(.lede) { margin-top: clamp(1rem, 2.4vw, 1.5rem); }

/* Home: the family paragraph sits on the engraved panorama, which runs to the section's edge */
.home-family { padding-bottom: 0; }
.home-family__art { display: block; margin-top: clamp(1rem, 3vw, 2rem); line-height: 0; }
.home-family__art img { display: block; width: 100%; height: auto; }

/* /hunts: what's included, once (#included, linked from every species page) */
.included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.8rem, 4vw, 3.5rem); }
.included__col h3.mono-label { margin: 0 0 14px; color: var(--gold); }
.included .use-list li a { color: var(--gold-warm); }
.included__note { margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; max-width: 62ch; color: var(--fg-light-muted); }
@media (max-width: 760px) { .included { grid-template-columns: 1fr; } }

/* /exotics: the compact species list. Each item keeps its old #anchor. */
.species-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); border-top: 1px solid var(--line-navy); }
.species-list li { padding: 20px 0; border-bottom: 1px solid var(--line-navy); transition: box-shadow var(--dur-3) ease-out, padding var(--dur-3) ease-out; }
.species-list li:target { box-shadow: inset 3px 0 0 var(--gold); padding-left: 16px; }
.species-list h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.7rem); line-height: 1.1; color: var(--fg-dark); }
.species-list .mono-label { display: block; margin-top: 6px; color: var(--gold-text); }
.species-list p { margin: 8px 0 0; font-size: 0.98rem; line-height: 1.55; color: var(--fg-dark-muted); }
/* each species carries main's engraving of it */
.species-list__art { display: block; margin-bottom: 14px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line-gold-soft); border-radius: var(--radius-sm); background: var(--parchment-warm); }
.species-list__art picture, .species-list__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.season-note { margin: clamp(1.2rem, 2.4vw, 1.6rem) 0 0; max-width: var(--max-text); color: var(--fg-dark-muted); }
@media (max-width: 900px) { .species-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .species-list { grid-template-columns: 1fr; } }

/* /the-ranch #photos: 8 photos, 4 across on desktop, 2 across on a phone */
.gallery-grid .g-item { margin: 0; } /* figures keep the browser's 40px side margins otherwise */
@media (min-width: 1024px) { .gallery-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .gallery-grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* /beef: the half / whole cards each link the form with that size picked */
.share-card__cta { margin: clamp(1rem, 2.2vw, 1.4rem) 0 0; }

/* /beef: the cut-sheet engraving under the steps, at the living-engraving width */
.cutsheet-figure { max-width: 860px; margin-inline: auto; }

/* ============================================================
   Round 3b (mr36): header dropdowns, Kelley Laws photos, fuller hunt pages.
   ============================================================ */

/* ---------- Header dropdowns (Hunting, The Ranch) ----------
   "Hunting" and "The Ranch" are links to their pages. Hover opens the menu;
   the small caret button beside each (aria-expanded) opens it for keyboard
   and touch. main.js sets .is-open. Without JS, hover and focus-within open it. */
.nav-item { position: relative; display: flex; align-items: center; }
.desktop-nav .nav-item .nav-top { padding-right: 2px; }
.desktop-nav .nav-item .nav-top::after { right: 2px; }
.nav-caret-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; min-height: 44px; padding: 0 6px 0 2px; margin-right: 4px;
  background: none; border: 0; color: var(--fg-light-muted); transition: color var(--dur-2) ease-out;
}
.nav-caret-btn:hover, .nav-item.is-open .nav-caret-btn { color: var(--fg-light); }
.nav-caret {
  width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur-2) ease-out, margin var(--dur-2) ease-out;
}
.nav-item.is-open .nav-caret { transform: rotate(225deg); margin-top: 3px; }
.nav-item.is-open .nav-top { color: var(--fg-light); }
.nav-menu {
  position: absolute; left: 0; top: calc(100% + 14px); z-index: 20;
  min-width: 210px; padding: 8px 0;
  background: var(--ink); border: 1px solid var(--line-onnavy); border-top: 1px solid var(--gold);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.7);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur-2) ease-out, transform var(--dur-2) ease-out, visibility 0s linear var(--dur-2);
}
/* bridges the gap under the button so the pointer can travel to the panel */
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-item.is-open .nav-menu,
html:not(.js) .nav-item:hover .nav-menu, html:not(.js) .nav-item:focus-within .nav-menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur-2) ease-out, transform var(--dur-2) ease-out, visibility 0s;
}
.nav-menu a {
  display: flex; align-items: center; min-height: 40px; padding: 8px 22px;
  font-size: 0.95rem; font-weight: 500; color: var(--fg-light-muted); text-decoration: none;
  transition: color var(--dur-2) ease-out, background-color var(--dur-2) ease-out;
}
.nav-menu a:hover, .nav-menu a:focus-visible { color: var(--gold-warm); background: rgba(232, 214, 160, 0.06); }
.nav-menu a:focus-visible { outline-offset: -2px; }
.nav-menu a[aria-current="page"] { color: var(--gold-warm); }

/* ---------- Subhero photo (/hunts, /beef, /the-ranch) ----------
   A photo banner drops the cartouche pattern (::after) and keeps only a dark
   gradient over the photo so the type stays readable. Banners without a photo
   keep the pattern. */
.subhero-photo { position: absolute; inset: 0; z-index: 0; display: block; }
.subhero-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8); }
.subhero--photo::after { content: none; } /* no cartouche pattern over a photo */
.subhero--photo .subhero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11, 31, 23, 0.9) 10%, rgba(11, 31, 23, 0.62) 55%, rgba(11, 31, 23, 0.5)),
    linear-gradient(180deg, rgba(11, 31, 23, 0.35), rgba(11, 31, 23, 0.55));
}

/* ---------- Photo mosaic (/the-ranch lodge and range) ----------
   One large photo and two small. Phones: the large one full width, the
   two small side by side. Captions match the harvest strip. */
.photo-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(1.75rem, 3.5vw, 3rem); }
.photo-mosaic figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line-gold-soft); border-radius: var(--radius-sm); }
.photo-mosaic figure:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.photo-mosaic picture { display: block; width: 100%; height: 100%; }
.photo-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.photo-mosaic 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.74) 52%, rgba(11, 31, 23, 0.9)); }
@media (min-width: 900px) {
  .photo-mosaic { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .photo-mosaic figure:first-child { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
}

/* Harvest strip pictures fill their tiles (the strip was <img> only before) */
.harvest-strip picture { display: block; width: 100%; height: 100%; }


/* ---------- /hunts: one card per species ----------
   Engraving, what it is, when / group / how it's hunted, and a prefilled
   Plan a Hunt. Each card keeps its old table-row #anchor. */
.species-cards { display: grid; gap: clamp(16px, 2.2vw, 26px); }
.species-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); background: var(--surface-card); border: 1px solid var(--line-gold-soft); border-radius: var(--radius-sm); overflow: hidden; }
.species-card:nth-child(even) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); }
.species-card:nth-child(even) .species-card__art { order: 2; border-right: 0; border-left: 1px solid var(--line-gold-soft); }
.species-card__art { position: relative; min-height: 260px; background: radial-gradient(125% 105% at 50% 6%, var(--surface-card-2), var(--parchment-warm)); border-right: 1px solid var(--line-gold-soft); }
.species-card__art picture { position: absolute; inset: 0; }
.species-card__art img { width: 100%; height: 100%; object-fit: cover; }
.species-card__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(1.4rem, 3vw, 2.4rem); }
.species-card h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.05; color: var(--fg-dark); }
.species-card h3 a { text-decoration: none; }
.species-card h3 a:hover { color: var(--gold-text); }
.species-card__body > p { margin: 0; max-width: 62ch; color: var(--fg-dark-muted); line-height: 1.6; }
.species-card__facts { margin: 4px 0 0; border-top: 1px solid var(--line-navy); }
.species-card__facts > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-navy); }
.species-card__facts dt { padding-top: 3px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); }
.species-card__facts dd { margin: 0; color: var(--fg-dark); line-height: 1.5; }
.species-card__links { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: auto 0 0; padding-top: 6px; }
.species-card__links .text-link { min-height: 40px; }
@media (max-width: 820px) {
  .species-card, .species-card:nth-child(even) { grid-template-columns: 1fr; }
  .species-card__art, .species-card:nth-child(even) .species-card__art { order: 0; min-height: 0; aspect-ratio: 16 / 10; border: 0; border-bottom: 1px solid var(--line-gold-soft); }
}
@media (max-width: 420px) { .species-card__facts > div { grid-template-columns: 1fr; gap: 2px; } }
/* Booked up: the turkey note on its /hunts card and the /turkey hero, in place of Plan a
   Hunt (turkey goes to returning groups, Josh 10/25/26). The trail cam's tag over one
   sentence. On the cream card the tag turns --gold-text: gold text only on the dark green. */
.booked-note { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; max-width: 54ch; padding: 13px 16px 14px; border: 1px solid var(--line-gold); border-radius: var(--radius-sm); }
.booked-note p { margin: 0; line-height: 1.55; }
.species-card .booked-note { background: var(--parchment); }
.species-card .booked-note .cam-tag { color: var(--gold-text); border-color: rgba(110, 86, 22, 0.45); }
.species-card .booked-note p { color: var(--fg-dark); }
.subhero .booked-note { margin-top: clamp(20px, 2.6vh, 28px); background: rgba(11, 31, 23, 0.45); }
.subhero .booked-note p { color: var(--fg-light); }

/* ---------- /the-ranch: the range, 6 photos (the lodge, 5, is below) ----------
   One large photo, two beside it, three across under them. Phones: the large
   one full width, the rest two across, the last one full width. */
@media (min-width: 900px) {
  .photo-mosaic--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-mosaic--6 figure:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; aspect-ratio: auto; }
}
@media (max-width: 899px) { .photo-mosaic--6 figure:last-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; } }
/* The lodge, 5 photos. Desktop: the large one and two beside it, then the 4th across 2
   columns (2:1) and the 5th beside it, stretched to that row (its picture is absolute, so
   a tall photo can't push the row taller). Phones and iPads need nothing: the large one
   full width, then two rows of two. */
@media (min-width: 900px) {
  .photo-mosaic--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-mosaic--5 figure:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; aspect-ratio: auto; }
  .photo-mosaic--5 figure:nth-child(4) { grid-column: 1 / span 2; aspect-ratio: 2 / 1; }
  .photo-mosaic--5 figure:nth-child(5) { aspect-ratio: auto; }
  .photo-mosaic--5 figure:nth-child(5) picture { position: absolute; inset: 0; }
}

/* ---------- /the-ranch: the crew ----------
   No crew photos yet: a gold-on-green initials disc stands in. To add a photo,
   swap the <span class="crew-photo"> for <img class="crew-photo" ...>. */
.crew-photo {
  display: inline-grid; place-items: center; flex: none;
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden; object-fit: cover;
  background: var(--navy); border: 1px solid var(--line-gold);
  font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; letter-spacing: 0.04em; color: var(--gold-warm);
}
.crew-photo--sm { width: 46px; height: 46px; font-size: 1.15rem; }
.team-card--lead { display: flex; align-items: flex-start; gap: 18px; }
.team-card--lead h3 { margin-top: 6px; }
.crew-label { margin: clamp(2rem, 4vw, 2.8rem) 0 0; color: var(--gold-text); }
.crew-guides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 32px); margin-top: 10px; border-top: 1px solid var(--line-navy); }
.crew-guide { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-navy); }
.crew-guide__name { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 1.8vw, 1.5rem); line-height: 1.15; color: var(--fg-dark); }
.crew-guide .mono-label { display: block; margin-top: 3px; color: var(--gold-text); }
@media (max-width: 880px) { .crew-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- /the-ranch photo slideshow ([data-slideshow], main.js) ----------
   A large photo with its caption, prev/next on the photo, a count and a
   pause toggle, then a strip of thumbnails that scrolls inside itself.
   Verticals sit whole on the dark stage (contain). Without the script only
   the first photo shows. */
.slideshow { max-width: 960px; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.slideshow__stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink); border: 1px solid var(--line-gold-soft); border-radius: var(--radius-sm); }
.slideshow__slides { position: absolute; inset: 0; }
.slideshow__slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 600ms var(--ease-std), visibility 0s linear 600ms; }
.slideshow__slide.is-active { opacity: 1; visibility: visible; transition: opacity 600ms var(--ease-std); }
.slideshow__slide picture, .slideshow__slide img { display: block; width: 100%; height: 100%; }
.slideshow__slide img { object-fit: contain; }
.slideshow__slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 70px 14px 18px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-light);
  background: linear-gradient(180deg, transparent, rgba(11, 31, 23, 0.74) 52%, rgba(11, 31, 23, 0.9));
}
.slideshow__btn {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0 0 3px;
  border: 1px solid var(--line-gold); border-radius: 50%;
  background: rgba(11, 31, 23, 0.8); color: var(--gold-warm); font-size: 1.7rem; line-height: 1;
  transition: background-color var(--dur-2) ease-out, color var(--dur-2) ease-out, border-color var(--dur-2) ease-out;
}
.slideshow__btn:hover, .slideshow__btn:focus-visible { background: var(--ink); color: var(--fg-light); border-color: var(--gold); }
.slideshow__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.slideshow__prev { left: 12px; }
.slideshow__next { right: 12px; }
.slideshow__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.slideshow__count { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--fg-dark-muted); }
.slideshow__toggle {
  min-height: 40px; padding: 6px 16px; background: none; color: var(--fg-dark);
  border: 1px solid var(--line-control); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color var(--dur-2) ease-out, color var(--dur-2) ease-out;
}
.slideshow__toggle:hover { background: var(--navy); color: var(--fg-light); }
.slideshow__thumbs {
  position: relative; display: flex; gap: 8px; margin-top: 12px; padding: 2px 2px 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.slideshow__thumb {
  flex: 0 0 auto; width: 104px; aspect-ratio: 3 / 2; padding: 0; overflow: hidden; scroll-snap-align: center;
  background: var(--parchment-warm); border: 1px solid var(--line-navy); border-radius: var(--radius-sm);
  opacity: 0.62; transition: opacity var(--dur-2) ease-out, border-color var(--dur-2) ease-out;
}
.slideshow__thumb picture, .slideshow__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slideshow__thumb:hover, .slideshow__thumb:focus-visible, .slideshow__thumb.is-active { opacity: 1; }
.slideshow__thumb.is-active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
@media (max-width: 700px) { .slideshow__thumb { width: 84px; } .slideshow__btn { width: 42px; height: 42px; } }
.slideshow:not(.is-ready) .slideshow__btn, .slideshow:not(.is-ready) .slideshow__bar, .slideshow:not(.is-ready) .slideshow__thumbs { display: none; }
@media (prefers-reduced-motion: reduce) { .slideshow__slide, .slideshow__slide.is-active { transition: none; } }

/* The slideshow on a dark section (/beef herd): light count, light toggle, quiet edges */
.dark .slideshow__stage, .darker .slideshow__stage { border-color: var(--line-onnavy); }
.dark .slideshow__count, .darker .slideshow__count { color: var(--fg-light-muted); }
.dark .slideshow__toggle, .darker .slideshow__toggle { color: var(--fg-light); border-color: var(--line-onnavy); }
.dark .slideshow__toggle:hover, .darker .slideshow__toggle:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.dark .slideshow__thumb, .darker .slideshow__thumb { background: var(--navy-deep); border-color: var(--line-onnavy); }
.dark .slideshow__thumb.is-active, .darker .slideshow__thumb.is-active { border-color: var(--gold); }

/* ---------- /hunts trail cam: "On the ranch right now" (#the-game, build/trail-cam.py) ----------
   The section's copy with a small framed card beside it from 900px, below it under that.
   The card is the same slideshow (main.js) without thumbnails, and prev / next sit in the
   bar beside the count, off the small photo. Its photos are 720 px app copies from the
   trail cams, so the card stays 440px at most (full column width on phones). Gold
   viewfinder corners sit on the photo, which is warmed a little toward the page. */
.game-head { margin-bottom: var(--gap-head); }
.game-head .sec-head { margin-bottom: 0; }
.trailcam {
  max-width: 440px; margin-top: clamp(2rem, 6vw, 2.6rem); padding: 16px 16px 12px;
  background: var(--ink); border: 1px solid var(--line-gold-soft); border-radius: var(--radius-sm);
}
@media (min-width: 900px) {
  .game-head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 34vw, 440px); gap: clamp(2.4rem, 5vw, 4.5rem); align-items: start; }
  .trailcam { margin-top: 0; }
}
@media (max-width: 600px) { .trailcam { max-width: none; } }
.trailcam__title { margin: 0; line-height: 1.4; }
.trailcam__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.cam-tag, .cam-teaser__tag {
  display: inline-block; padding: 4px 9px 3px; border: 1px solid rgba(212, 175, 101, 0.55); border-radius: 2px;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.18em; line-height: 1.3; text-transform: uppercase; color: var(--gold-warm); white-space: nowrap;
}
.trailcam__note { margin: 6px 0 14px; font-size: 0.95rem; line-height: 1.5; color: var(--fg-light-muted); }
.slideshow--cam { max-width: none; margin: 0; }
.slideshow--cam .slideshow__stage { aspect-ratio: 16 / 10; }
.slideshow--cam .slideshow__slide img { object-fit: cover; filter: sepia(0.2) saturate(0.85) contrast(1.04); }
.slideshow--cam .slideshow__stage::after {
  --c: rgba(232, 213, 162, 0.85); --len: 14px; --w: 1.5px;
  content: ""; position: absolute; inset: 10px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--len) var(--w),
    linear-gradient(var(--c), var(--c)) left top / var(--w) var(--len),
    linear-gradient(var(--c), var(--c)) right top / var(--len) var(--w),
    linear-gradient(var(--c), var(--c)) right top / var(--w) var(--len),
    linear-gradient(var(--c), var(--c)) left bottom / var(--len) var(--w),
    linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--len),
    linear-gradient(var(--c), var(--c)) right bottom / var(--len) var(--w),
    linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--len);
  background-repeat: no-repeat;
}
.slideshow--cam .slideshow__slide figcaption { padding: 28px 30px 13px; font-size: 0.66rem; }
.slideshow--cam .slideshow__bar { margin-top: 10px; }
.slideshow__nav { display: flex; align-items: center; gap: 10px; }
.slideshow--cam .slideshow__btn { position: static; transform: none; width: 36px; height: 36px; font-size: 1.4rem; }
.slideshow--cam .slideshow__toggle { min-height: 36px; padding: 4px 14px; }

/* ---------- Species cards: the real animal behind the drawing ([data-photo], main.js) ----------
   main.js layers the card's photo over the engraving, same box, so nothing
   moves, and fades each card on screen back and forth on its own (.is-photo).
   Mouse: hovering the card fades the photo in too. Every fade is 0.8 s
   (FADE in main.js), reduced motion included: there it happens only once. */
[data-photo] { position: relative; }
[data-photo] > .art-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; }
[data-photo] > .art-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-card.is-photo [data-photo] > .art-photo { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .photo-card:hover [data-photo] > .art-photo { opacity: 1; }
}

/* ==========================================================================
   Homepage, round 5 (reference: docs/design/homepage-concepts/): the story
   card on the panorama, three tall plates, recent harvests as taped prints
   (also /harvests), and the closing band with the property map.
   ========================================================================== */

/* The eyebrow in these sections: 12px, wider tracking, a 32px rule */
.home-story .eyebrow, .home-ways .eyebrow, .harvests-head .eyebrow, .home-close .eyebrow {
  display: flex; gap: 14px; font-size: 0.75rem; letter-spacing: 0.24em;
}
.home-story .eyebrow::before, .home-ways .eyebrow::before,
.harvests-head .eyebrow::before, .home-close .eyebrow::before { width: 32px; }
.home-story .eyebrow::before, .harvests-head .eyebrow::before { background: var(--gold-deep); }
.home-ways .eyebrow, .home-close .eyebrow { color: var(--gold); }
.home-ways :focus-visible, .home-close :focus-visible { outline-color: var(--gold); }
.home-ways .text-link, .home-close .text-link { color: var(--gold-warm); border-color: rgba(212, 175, 101, 0.55); }
.home-ways .text-link:hover, .home-close .text-link:hover { color: #F0E2BC; border-color: var(--gold); }

/* 1. "Six generations": the panorama fills the section; the story sits on a
   paper card over its left side. Phones: the image on top, the card
   overlapping it upward. */
.home-story { position: relative; overflow: hidden; min-height: 1000px; background: var(--parchment-warm); }
.home-story__art { position: absolute; inset: 0; display: block; }
.home-story__art img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 50%; }
.home-story__card {
  position: relative; top: 150px; box-sizing: border-box; width: 500px;
  margin: 0 0 0 max(48px, calc((100% - 1200px) / 2)); padding: 52px 48px 48px;
  background: var(--paper); box-shadow: 0 24px 70px rgba(27, 38, 28, 0.28);
  outline: 1px solid rgba(156, 122, 51, 0.45); outline-offset: -12px;
}
.home-story__card .eyebrow { margin: 0 0 22px; }
.home-story__card h2 { font-size: 3.5rem; line-height: 1.04; color: var(--fg-dark); }
.home-story__text { margin: 24px 0 30px; font-size: 1.0625rem; line-height: 1.7; color: var(--fg-dark-muted); }
@media (max-width: 899px) {
  .home-story { min-height: 0; padding-bottom: 56px; }
  .home-story__art { position: relative; height: 340px; }
  .home-story__card { top: 0; width: auto; margin: -70px 16px 0; }
  .home-story__card h2 { font-size: 2.5rem; }
}
@media (max-width: 420px) { .home-story__card { padding: 44px 28px 38px; } }

/* 2. "Hunting, beef, and the place itself": three tall plates on dark green.
   The engraving shows first; main.js layers the card's photo ([data-photo])
   over it. The plate's link stretches over the whole plate, so one tap or
   click anywhere on it follows the link. */
.home-ways { padding: 7rem 0 7.5rem; background: var(--ink); color: var(--fg-light); }
.home-ways__head { margin-bottom: 56px; }
.home-ways__head .eyebrow { margin: 0 0 20px; }
.home-ways__head h2 { max-width: 720px; font-size: 3.75rem; line-height: 1.02; color: var(--fg-light); }
.home-plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-plate {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 640px; overflow: hidden; color: var(--fg-light); border: 1px solid rgba(212, 175, 101, 0.35);
}
.home-plate__art { position: absolute; inset: 0; z-index: -2; display: block; }
.home-plate__art picture, .home-plate__art img { display: block; width: 100%; height: 100%; }
.home-plate__art img { max-width: none; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.home-plate__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 31, 23, 0) 30%, rgba(11, 31, 23, 0.55) 55%, rgba(11, 31, 23, 0.96) 88%);
}
/* the text brings its own fade, so gold and cream text never sit on the light
   engraving however long the copy runs (a plate grows past its min-height
   rather than clip it) */
.home-plate__body {
  padding: 64px 34px 38px;
  background: linear-gradient(180deg, rgba(11, 31, 23, 0), rgba(11, 31, 23, 0.86) 56px, rgba(11, 31, 23, 0.92));
}
.home-plate__label { margin: 0; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.home-plate__title { margin: 14px 0; font-size: 3.25rem; line-height: 1; color: var(--fg-light); }
.home-plate__desc { margin: 0 0 24px; font-size: 1rem; line-height: 1.6; color: var(--fg-light-muted); }
.home-plate__link {
  display: inline-flex; gap: 9px; font-weight: 600; text-decoration: none; color: var(--gold-warm);
  border-bottom: 1px solid rgba(212, 175, 101, 0.55); padding-bottom: 5px;
}
.home-plate__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.home-plate__link:focus-visible { outline: none; }
.home-plate__link:focus-visible::after { outline: 2px solid var(--gold); outline-offset: -6px; }
.home-plate__link .arrow { transition: transform var(--dur-hover) var(--ease-premium-out); }
@media (hover: hover) and (pointer: fine) {
  .home-plate:hover .home-plate__art img { transform: scale(1.04); }
  .home-plate:hover .home-plate__link { color: #F0E2BC; border-color: var(--gold); }
  .home-plate:hover .home-plate__link .arrow { transform: translateX(var(--arrow-move)); }
}
/* Under 900px (one column): tall enough that the text takes only the lower half,
   and the photo fills the whole plate, as on desktop, from a crop made for the
   plate's shape (data-photo-phone / -tablet, main.js) with its subject in the top
   half. In photo mode the engraving fades out first, then the photo fades in; on
   the way back the photo goes first. The two never show at once, and the whole
   change takes 0.8 s (FADE in main.js). */
@media (max-width: 899px) {
  .home-ways__head h2 { font-size: 2.5rem; }
  .home-plates { grid-template-columns: minmax(0, 1fr); }
  .home-plate { min-height: 640px; }
  .home-plate__art > picture:not(.art-photo) { transition: opacity 0.4s ease 0.4s; }
  .home-plate.is-photo .home-plate__art > picture:not(.art-photo) { opacity: 0; transition-delay: 0s; }
  .home-plate [data-photo] > .art-photo { transition: opacity 0.4s ease; }
  .home-plate.is-photo [data-photo] > .art-photo { transition-delay: 0.4s; }
}
@media (max-width: 899px) and (hover: hover) and (pointer: fine) {
  .home-plate:hover .home-plate__art > picture:not(.art-photo) { opacity: 0; transition-delay: 0s; }
  .home-plate:hover [data-photo] > .art-photo { transition-delay: 0.4s; }
}
/* iPads: the plates are wide, so they grow with the width (about square) */
@media (min-width: 600px) and (max-width: 899px) { .home-plate { min-height: calc(56vw + 300px); } }

/* 3. Recent harvests: taped prints, the species in the serif and Native /
   Exotic in mono. The homepage shows the newest 4, /harvests all of them
   (build/harvests.py writes both). */
.home-harvests { padding: 7rem 0 7.5rem; }
.wrap.harvests-wrap { max-width: 1200px; padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); }
.harvests-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 72px; }
.harvests-head .eyebrow { margin: 0 0 20px; }
.harvests-head h2 { font-size: 3.75rem; line-height: 1.02; }
.harvests-lede { max-width: 480px; margin: 18px 0 0; font-size: 1.0625rem; line-height: 1.7; color: var(--fg-dark-muted); }
.harvest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; align-items: start; padding-top: 12px; }
.harvest-print {
  --tilt: 0deg; position: relative; margin: 0; padding: 12px 12px 20px; background: var(--surface-card);
  box-shadow: 0 18px 36px rgba(40, 33, 20, 0.22), 0 2px 4px rgba(40, 33, 20, 0.12);
  transform: rotate(var(--tilt)); transition: transform 0.5s var(--ease-out);
}
.harvest-print:nth-child(4n + 1) { --tilt: -2deg; }
.harvest-print:nth-child(4n + 2) { --tilt: 1.5deg; margin-top: 56px; }
.harvest-print:nth-child(4n + 3) { --tilt: -1deg; }
.harvest-print:nth-child(4n + 4) { --tilt: 2deg; margin-top: 40px; }
.harvest-print img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.harvest-print__tape {
  position: absolute; top: -12px; left: 50%; z-index: 1; width: 92px; height: 24px; margin-left: -46px;
  background: rgba(232, 213, 162, 0.72); transform: rotate(-3deg);
}
.harvest-print figcaption { padding-top: 16px; }
.harvest-print__species { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--fg-dark); }
.harvest-print__kind { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); }
@media (hover: hover) and (pointer: fine) { .harvest-print:hover { transform: rotate(0deg) translateY(-6px); } }
/* The trail cam teaser under the prints: a dark viewfinder card that links to the
   /hunts slideshow. Small photo, never a banner (the Tactacam copies are 720px). */
.cam-teaser {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 40px);
  max-width: 860px; margin: 96px auto 0; padding: 14px clamp(14px, 3vw, 36px) 14px 14px;
  background: var(--ink); color: var(--fg-light); text-decoration: none;
  border: 1px solid var(--line-gold-soft); border-radius: var(--radius-sm);
  box-shadow: 0 18px 36px rgba(40, 33, 20, 0.22);
  transition: transform 0.5s var(--ease-out), border-color var(--dur-hover) ease;
}
.cam-teaser__photo { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.cam-teaser__photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(0.2) saturate(0.85) contrast(1.04); }
.cam-teaser__photo::after {
  --c: rgba(232, 213, 162, 0.85); --len: 12px; --w: 1.5px;
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--len) var(--w),
    linear-gradient(var(--c), var(--c)) left top / var(--w) var(--len),
    linear-gradient(var(--c), var(--c)) right top / var(--len) var(--w),
    linear-gradient(var(--c), var(--c)) right top / var(--w) var(--len),
    linear-gradient(var(--c), var(--c)) left bottom / var(--len) var(--w),
    linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--len),
    linear-gradient(var(--c), var(--c)) right bottom / var(--len) var(--w),
    linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--len);
  background-repeat: no-repeat;
}
.cam-teaser__body { display: block; padding: 6px 0; }
.cam-teaser__tag { display: inline-block; }
.cam-teaser__title { display: block; margin-top: 14px; font-family: var(--font-display); font-weight: 400; font-size: 1.875rem; line-height: 1.1; color: #F5F0E8; }
.cam-teaser__text { display: block; margin-top: 10px; font-size: 0.975rem; line-height: 1.6; color: var(--fg-light-muted); }
.cam-teaser__link { display: inline-block; margin-top: 16px; padding-bottom: 3px; border-bottom: 1px solid rgba(212, 175, 101, 0.55); font-weight: 600; color: var(--gold-warm); }
.cam-teaser__link .arrow { display: inline-block; transition: transform var(--dur-hover) var(--ease-premium-out); }
.cam-teaser:hover { border-color: rgba(212, 175, 101, 0.55); }
.cam-teaser:hover .cam-teaser__link .arrow, .cam-teaser:focus-visible .cam-teaser__link .arrow { transform: translateX(var(--arrow-move)); }
.cam-teaser:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .cam-teaser:hover { transform: translateY(-4px); } }
@media (max-width: 639px) {
  .cam-teaser { grid-template-columns: 1fr; margin-top: 64px; padding: 12px 12px 20px; }
  .cam-teaser__body { padding: 4px 8px 0; }
  .cam-teaser__title { font-size: 1.625rem; }
}
@media (max-width: 899px) {
  .harvests-head h2 { font-size: 2.625rem; }
  .harvest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .harvest-print:nth-child(n) { margin-top: 0; }
}

/* 4. The homepage's closing band: the property map beside the contact panel.
   The whole map shows (the full property boundary), centred in its column, and a
   darkened, blurred copy of the same image fills the rest of the column. The frame
   is the map's exact 3:4 box (container units), so the tag always sits on the map.
   Phones: the panel takes the map's 3:4 shape, up to 600px tall. */
.home-close { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 820px; background: var(--navy-deep); color: var(--fg-light); }
.home-close__map { position: relative; overflow: hidden; background: #434832; container-type: size; }
.home-close__map picture { position: absolute; inset: 0; display: block; }
.home-close__map img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 50%; }
.home-close__map picture.home-close__map-fill { inset: -48px; }
.home-close__map-fill img { object-fit: cover; filter: blur(22px) brightness(0.62) saturate(0.85); }
.home-close__map-frame { position: absolute; inset: 0; }
@supports (width: 1cqw) {
  .home-close__map-frame { inset: auto; left: 50%; top: 50%; width: min(100cqw, 75cqh); aspect-ratio: 3 / 4; transform: translate(-50%, -50%); }
}
/* bottom right: the corner the property boundary leaves clear */
.home-close__tag {
  position: absolute; right: 24px; bottom: 24px; margin: 0; padding: 14px 18px; white-space: nowrap;
  background: rgba(11, 31, 23, 0.9); border: 1px solid rgba(212, 175, 101, 0.5);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.2em; line-height: 1.7; text-transform: uppercase; color: var(--gold-warm);
}
.home-close__body { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 110px 88px 100px; }
.home-close__mark { position: absolute; right: -60px; bottom: -40px; width: 380px; max-width: none; height: auto; opacity: 0.07; pointer-events: none; }
.home-close__body > :not(.home-close__mark) { position: relative; }
.home-close .eyebrow { margin: 0 0 20px; }
.home-close h2 { font-size: 4rem; line-height: 1.02; color: var(--fg-light); }
.home-close__lede { max-width: 440px; margin: 20px 0 36px; font-size: 1.0625rem; line-height: 1.7; color: var(--fg-light-muted); }
/* "Visits are by appointment only" (home close, /the-ranch cta-band): gold on the dark green */
.visit-appt { display: block; margin-top: 6px; font-weight: 600; color: var(--gold-warm); }
.visit-appt--band { max-width: 560px; margin: 16px 0 0; font-size: 1.0625rem; line-height: 1.6; }
/* /the-ranch#range: the "Private range" banner above the eyebrow (people call to sight in a gun) */
.range-private {
  display: inline-block; max-width: 100%; margin: 0 0 clamp(1.6rem, 4vw, 2.4rem);
  padding: clamp(0.9rem, 2.4vw, 1.2rem) clamp(1.1rem, 3vw, 1.6rem);
  border: 2px solid var(--gold); border-left-width: 6px; background: rgba(212, 175, 101, 0.08);
}
.range-private__title {
  margin: 0; font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.75rem, 5vw, 2.6rem); line-height: 1.05; letter-spacing: 0.06em; color: var(--gold);
}
.range-private__text { margin: 8px 0 0; font-size: clamp(1.05rem, 2.4vw, 1.2rem); font-weight: 600; line-height: 1.45; color: var(--fg-light); }
.home-close__phone {
  font-family: var(--font-display); font-size: 4.5rem; line-height: 1; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums lining-nums; text-decoration: none; color: var(--fg-light);
  transition: color var(--dur-2) ease-out;
}
.home-close__phone:hover { color: var(--gold-warm); }
.home-close__mail {
  margin-top: 14px; padding-bottom: 4px; font-size: 1.0625rem; text-decoration: none; color: var(--gold-warm);
  border-bottom: 1px solid rgba(212, 175, 101, 0.45); transition: color var(--dur-2) ease-out, border-color var(--dur-2) ease-out;
}
.home-close__mail:hover { color: #F0E2BC; border-color: var(--gold); }
.home-close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 44px; }
@media (max-width: 899px) {
  .home-close { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .home-close__map { width: 100%; aspect-ratio: 3 / 4; max-height: 600px; }
  .home-close__body { padding: 56px 20px 64px; }
  .home-close h2 { font-size: 2.75rem; }
  .home-close__phone { font-size: 3rem; }
}
@media (max-width: 599px) { .home-close__tag { right: 12px; bottom: 12px; padding: 10px 14px; } }