/* =========================================================================
   GALLOP — Option D · restyled to the WIP Figma direction (node 293-3).
   Warm editorial system: cream paper, ochre accent bands, Gentium serif
   headings, Funnel Sans body, Geist Mono uppercase labels, flat tinted
   cards, dark parity panel, stripe-stack motif.
   Shared by d.html and every d-*.html subpage.
   ========================================================================= */

:root{
  /* ---- Brand palette — aliases onto the Gallop token layer
     (gallop-tokens.css, canonical home: design-tokens/gallop/) ---- */
  --color-bg:        var(--gallop-background);
  --color-surface:   var(--gallop-surface);
  --color-ink:       var(--gallop-text-primary);
  --color-accent:    var(--gallop-core);        /* brand accent bands, CTAs */
  --color-accent-2:  var(--gallop-core-300);    /* lighter accent tint (case cards) */
  --color-white:     var(--gallop-white);
  --color-panel-key: var(--gallop-secondary);   /* mint label inside the dark panel */

  /* Former names for the two accent slots, kept so any stray rule or
     inline style still resolves. Prefer --color-accent{,-2}. */
  --color-ochre:     var(--color-accent);
  --color-ochre-2:   var(--color-accent-2);

  /* Hero/section texture. WebP first with a JPEG fallback — image-set() picks
     per-browser support, so old engines still get a texture. Both are the same
     1920w export; the band never renders wider than that at 1x. */
  --tex-hero: image-set(url("assets/bg-hero.webp") type("image/webp"),
                        url("assets/bg-hero.jpg")  type("image/jpeg"));

  /* Alpha washes derived from Brand/Text Primary #362F2C */
  --ink-70: rgba(54,47,44,.7);
  --ink-50: rgba(54,47,44,.5);
  --ink-40: rgba(54,47,44,.4);
  --ink-20: rgba(54,47,44,.2);
  --hairline: rgba(54,47,44,.13);
  --hairline-strong: rgba(54,47,44,.32);
  --white-hairline: rgba(255,255,255,.08);

  /* ---- Type roles (Figma text styles) ---- */
  --font-serif: var(--gallop-font-serif);
  --font-body:  var(--gallop-font-body);
  --font-mono:  var(--gallop-font-mono);

  /* Lustria renders visibly larger than the former Gentium serif, so every
     Lustria-rendered heading/display size is scaled down ~10% through this one
     knob. Funnel Sans headings (.hx, .prin-title, .prin-heading, .stat-num) use
     their own sizes and are unaffected. */
  --lustria-scale: 0.9;
  --type-h-xl: clamp(calc(2.1rem * var(--lustria-scale)), calc(3.6vw * var(--lustria-scale)), calc(var(--gallop-text-heading-xl) * var(--lustria-scale)));  /* heading-xl 48 */
  --type-h-lg: clamp(calc(1.9rem * var(--lustria-scale)), calc(3.2vw * var(--lustria-scale)), calc(var(--gallop-text-heading-lg) * var(--lustria-scale)));  /* heading-lg 42 */
  --type-h-md: clamp(calc(1.6rem * var(--lustria-scale)), calc(2.6vw * var(--lustria-scale)), calc(var(--gallop-text-heading-md) * var(--lustria-scale)));  /* heading-md 36 */
  --type-h-xs: clamp(calc(1.3rem * var(--lustria-scale)), calc(2vw * var(--lustria-scale)), calc(var(--gallop-text-heading-xs) * var(--lustria-scale)));    /* heading-xs 28 */
  --type-body-xl: var(--gallop-text-body-xl);   /* 20 */
  --type-body-lg: var(--gallop-text-body-lg);   /* 18 */
  --type-body-md: var(--gallop-text-body-md);   /* 16 */
  --type-label-md: var(--gallop-text-label-md); /* mono 16 */
  --type-label-sm: var(--gallop-text-label-sm); /* mono 13 */

  /* ---- Spacing (DESIGN-SYSTEM.md scale via gallop tokens) ---- */
  --space-page-x: clamp(1.15rem, 4.5vw, var(--gallop-space-40));
  --nav-pad: 1.1rem;  /* nav bar's inner padding; also how far the bar overhangs the content grid so the logo/CTA align with page content */
  /* tightened 20% from clamp(5.5rem,10vw,180px) / clamp(3.4rem,6vw,6.5rem) */
  --space-section: clamp(4.4rem, 8vw, calc(var(--gallop-space-section) * .8));
  --space-section-sm: clamp(2.72rem, 4.8vw, 5.2rem);

  /* ---- [EXT] film-grain texture (reused across gold/green blocks) ---- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  /* ---- Full-bleed rail gutter (space outside the 1440 content column) ---- */
  --gutter: max(calc((100vw - var(--gallop-canvas-max)) / 2), 0px);

  /* ---- Motion ---- */
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  --ease: cubic-bezier(.2,0,.2,1);
  --ease-emph: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:var(--type-body-md);
  line-height:var(--gallop-leading-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip (not hidden) so full-bleed sections don't cause h-scroll WITHOUT
     turning <body> into a scroll container — `hidden` forces overflow-y to
     `auto`, which silently breaks `position:sticky` (the .mseq pin). */
  overflow-x:clip;
}
h1,h2,h3{font-family:var(--font-serif);font-weight:400;line-height:var(--gallop-leading-heading-lg);letter-spacing:var(--gallop-tracking);margin:0;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img,svg,video{display:block;max-width:100%;}
::selection{background:var(--color-ochre);color:var(--color-ink);}

.mono{font-family:var(--font-mono);}
.label{
  font-family:var(--font-mono);
  font-size:var(--type-label-sm);
  font-weight:500;
  letter-spacing:var(--gallop-tracking);
  text-transform:uppercase;
  line-height:var(--gallop-leading-label-tight);
}
.wrap{max-width:var(--gallop-canvas-max);margin-inline:auto;padding-inline:var(--space-page-x);width:100%;}

/* Section head pattern: serif title + light body */
.sec{padding-block:var(--space-section-sm);}
.sec-head{max-width:62ch;}
.sec-title{font-size:var(--type-h-lg);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-heading-lg);}
.sec-sub{margin-top:1.4rem;font-family:var(--font-body);font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-body);color:var(--color-ink);max-width:58ch;}
.sec-kicker{font-size:var(--type-h-md);line-height:var(--gallop-leading-heading-md);letter-spacing:var(--gallop-tracking);}

/* Faint code-wall texture (engineering undercurrent) */
.codewall{position:absolute;pointer-events:none;opacity:.1;font-family:var(--font-mono);font-size:7.9px;line-height:1.88;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--color-ink);width:min(820px,60vw);overflow:hidden;white-space:pre-wrap;word-break:break-word;z-index:0;}
.has-codewall{position:relative;overflow:hidden;}
.has-codewall>.wrap{position:relative;z-index:1;}

/* Stripe stack — increasing-thickness bars (page close motif) */
.stripes{display:flex;flex-direction:column;}
.stripes span{display:block;background:var(--color-ink);width:100%;}
.stripes span:nth-child(1){height:3px;margin-top:0;}
.stripes span:nth-child(2){height:7px;margin-top:17px;}
.stripes span:nth-child(3){height:12px;margin-top:13px;}
.stripes span:nth-child(4){height:17px;margin-top:9px;}
.stripes span:nth-child(5){height:25px;margin-top:5px;}
.stripes span:nth-child(6){height:52px;margin-top:4px;}

/* =====================  BUTTONS  ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:400;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);
  padding:var(--gallop-space-12) var(--gallop-space-32);border:1px solid transparent;cursor:pointer;border-radius:var(--gallop-rounded-none);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.btn:hover{transform:translateY(-1px);}
.btn-ink{background:var(--color-ink);color:var(--color-bg);border-color:var(--color-ink);}
.btn-ink:hover{background:var(--gallop-neutral-800);}
.btn-ochre{background:var(--color-ochre);color:var(--color-ink);border-color:var(--color-ochre);}
.btn-ochre:hover{background:var(--color-ochre-2);}
.btn-line{background:transparent;color:var(--color-ink);border-color:var(--hairline-strong);}
.btn-line:hover{background:var(--color-ink);color:var(--color-bg);border-color:var(--color-ink);}
/* On the dark-green corner of the [EXT] closing field the ink ghost button
   disappears — swap to the light scheme the white headline already uses. */
.close-field .btn-line{color:var(--color-white);border-color:rgba(255,255,255,.55);}
.close-field .btn-line:hover{background:var(--color-white);color:var(--color-ink);border-color:var(--color-white);}

/* =====================  NAV — floating paper bar  ===================== */
/* navwrap mirrors the .wrap content grid exactly (same max-width + side padding),
   so the nav aligns to page content at every width */
.navwrap{position:sticky;top:14px;z-index:60;
  max-width:var(--gallop-canvas-max);margin-inline:auto;
  padding-inline:var(--space-page-x);}
.nav{
  background:var(--color-bg);
  border-radius:8px;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  /* bar overhangs the grid by --nav-pad, then pads its contents back in by the
     same amount → logo/CTA sit on the content edges while the bar floats wider */
  margin-inline:calc(-1 * var(--nav-pad));
  padding:.9rem var(--nav-pad);
}
/* left cluster: logo + nav links sit together, with the CTA pushed to the
   far right (Figma [WEB] nav, node 4033:3355) */
.nav-left{display:flex;align-items:center;gap:clamp(1.8rem,4vw,3.5rem);}
.nav-brand{display:flex;align-items:center;gap:.5rem;}
.nav-brand img{height:20px;width:auto;}
.nav-links{display:flex;align-items:center;}
/* the links row lives on the inner wrapper so the mobile panel can collapse it
   (see the max-width:760px block) without changing the desktop layout */
.nav-links-inner{display:flex;gap:clamp(1.4rem,2.1vw,1.9rem);align-items:center;}
.nav-links a{
  font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;
  color:var(--color-ink);opacity:.85;padding:.25rem 0;position:relative;
  transition:opacity var(--dur-fast) var(--ease);
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--color-ink);transition:width var(--dur) var(--ease-emph);}
.nav-links a:hover{opacity:1;}
.nav-links a:hover::after{width:100%;}
/* CTA — kept as the yellow button, pushed to the right edge of the bar */
.nav-cta{margin-left:auto;
  font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;
  color:var(--color-ink);opacity:1;background:var(--color-ochre);padding:.55rem .95rem;border-radius:2px;
  transition:background var(--dur-fast) var(--ease);}
.nav-cta:hover{background:var(--color-ochre-2);}
.nav-toggle{display:none;}

/* =====================  HERO helpers shared with subpage page-hero  ===================== */
.hero-inner{position:relative;z-index:1;}



/* =====================  shared editorial bits  ===================== */
.statline{margin-top:clamp(3.4rem,6vw,5.4rem);}
.statline p{font-family:var(--font-serif);font-size:var(--type-h-lg);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-heading-lg);}

/* =====================  schema chips (stage rows on subpages)  ===================== */
.schema-chip{font-family:var(--font-mono);font-size:var(--type-label-sm);letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--color-ink);background:var(--color-surface);padding:.35rem .7rem;border-radius:8px;white-space:nowrap;}
.schema-arrow{font-family:var(--font-mono);color:var(--ink-50);font-size:.9rem;}

.gates{margin-top:clamp(2.6rem,4.5vw,3.8rem);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,2.4vw,2.2rem);}
.gate{border-top:1px solid var(--hairline-strong);padding-top:1.2rem;}
.gate-idx{font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-50);}
.gate-title{font-family:var(--font-body);font-weight:400;font-size:var(--type-body-xl);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-body);margin-top:.9rem;}
.gate-desc{margin-top:.5rem;font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-body);color:var(--ink-50);}

/* open roles (Careers) */
.role-list{margin-top:clamp(2.2rem,4vw,3.2rem);border-top:1px solid var(--hairline);}
.role-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 24px;gap:1.5rem;align-items:center;padding-block:1.6rem;padding-inline:1rem;margin-inline:-1rem;border-bottom:1px solid var(--hairline);transition:background var(--dur-fast) var(--ease);}
.role-row:hover{background:var(--color-ochre-2);}
.role-title{font-family:var(--font-body);font-weight:400;font-size:var(--type-body-xl);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-body);}
.role-meta{font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-50);line-height:1.6;}
.role-row .arw{font-family:var(--font-mono);color:var(--color-ink);justify-self:end;line-height:1;transition:transform var(--dur) var(--ease-emph);}
.role-row:hover .arw{transform:translateX(3px);}
.gates--3{grid-template-columns:repeat(3,1fr);}


.anchor-alias{position:absolute;}

/* =====================  04 — VALIDATION & CONTROL  ===================== */

/* dark parity panel */
.panel{background:var(--color-ink);border-radius:8px;padding:1.5rem;color:var(--color-white);font-family:var(--font-mono);font-size:var(--type-label-sm);letter-spacing:var(--gallop-tracking);text-transform:uppercase;line-height:var(--gallop-leading-label);}
.panel-head{display:flex;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;}
.panel-head .k{color:var(--color-panel-key);}
.panel-head .id{color:var(--color-white);opacity:.4;}
.panel-row{display:flex;align-items:baseline;gap:1.5rem;border-bottom:1px solid var(--white-hairline);padding-block:.55rem .5rem;}
.panel-row .nm{flex:1;min-width:0;}
.panel-row .old{opacity:.5;}
.panel-row .match{color:var(--color-ochre);}
.panel-foot{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem;opacity:.6;flex-wrap:wrap;}

/* the ledger */
.ledger-block{margin-top:clamp(4rem,8vw,7rem);}
.ledger-block h3{font-size:var(--type-h-md);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-heading-md);max-width:30ch;}
.ledger-block .ledger-sub{margin-top:1.1rem;font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);color:var(--ink-50);max-width:54ch;}
.ledger{margin-top:clamp(1.8rem,3vw,2.6rem);background:var(--color-white);border:1px solid var(--hairline);border-radius:8px;overflow:hidden;}
.ledger-scroll{overflow-x:auto;}
.ledger-tbl{width:100%;border-collapse:collapse;min-width:760px;}
.ledger-tbl th{
  font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-50);
  text-align:left;padding:1rem 1.15rem;background:var(--color-surface);border-bottom:1px solid var(--hairline);
}
.ledger-tbl th:first-child{width:52px;text-align:right;}
.ledger-tbl td{padding:1rem 1.15rem;border-bottom:1px solid var(--hairline);font-size:var(--type-body-md);letter-spacing:var(--gallop-tracking);vertical-align:middle;}
.ledger-tbl td:first-child{font-family:var(--font-mono);font-size:var(--type-label-sm);color:var(--ink-40);text-align:right;}
.ledger-tbl tr:last-child td{border-bottom:none;}
.ledger-tbl tbody tr{transition:background var(--dur-fast) var(--ease);}
.ledger-tbl tbody tr:hover{background:var(--color-bg);}
.legacy-fn{font-family:var(--font-mono);font-size:var(--type-label-sm);color:var(--ink-50);text-transform:uppercase;}
.rebuilt{font-weight:400;}
.veritag{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--color-ink);background:var(--color-ochre);border-radius:8px;padding:.3rem .6rem;white-space:nowrap;}
.veritag svg{width:11px;height:11px;}
.ledger-foot{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;padding:1rem 1.15rem;background:var(--color-surface);border-top:1px solid var(--hairline);font-family:var(--font-mono);font-size:var(--type-label-sm);letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-50);}
.ledger-foot b{font-weight:500;color:var(--color-ink);}





/* =====================  06 — FAQ  ===================== */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(2.5rem,8vw,10rem);align-items:start;}
.faq-grid h2{font-size:var(--type-h-md);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-heading-md);}
.faq-item{border-bottom:1px solid var(--hairline);}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:2rem;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item .q{font-size:var(--type-body-xl);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-body);}
.faq-item .ind{position:relative;width:24px;height:24px;flex:none;transition:transform var(--dur) var(--ease-emph);}
.faq-item .ind::before,.faq-item .ind::after{content:"";position:absolute;background:var(--color-ink);}
.faq-item .ind::before{left:2px;right:2px;top:11px;height:2px;}
.faq-item .ind::after{top:2px;bottom:2px;left:11px;width:2px;}
.faq-item[open] .ind{transform:rotate(45deg);}
/* Answer collapse. Same technique as the mobile nav panel: grid-template-rows
   0fr→1fr transitions where height:auto cannot. d.js holds the `open` attribute
   on until the collapse finishes so closing animates too, and adds .faq-anim
   only when JS is running — without it the rules below stay off and <details>
   keeps its native instant toggle. */
.faq-item .a{padding-bottom:2rem;max-width:56ch;}
/* max-height rather than the nav's 0fr→1fr: an fr row needs a definite height to
   resolve against, which a <details> child never gets, so it stays collapsed.
   d.js sets --faq-h to the measured content height for each item. */
.faq-anim .faq-item .a{overflow:hidden;max-height:0;padding-bottom:0;opacity:0;
  transition:max-height var(--dur) var(--ease-emph),opacity var(--dur-fast) var(--ease);}
.faq-anim .faq-item[open] .a{max-height:var(--faq-h,100vh);opacity:1;}
/* d.js keeps `open` set through the closing transition, so this has to win */
.faq-anim .faq-item[open].is-closing .a{max-height:0;opacity:0;}
/* padding lives on the inner wrapper — on .a it would hold the closed state open */
.faq-anim .faq-item .a-inner{padding-bottom:2rem;}
.faq-item .a p{font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.3;color:var(--ink-70);}
.faq-item .a p+p{margin-top:.8rem;}
.faq-item .a .note{margin-top:1rem;font-family:var(--font-mono);font-size:var(--type-label-sm);letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-40);}

/* =====================  CTA BAND — centered invite under the questions  ===================== */
/* [WEB] Figma bakes this band's field from three stacked mosaic renders under an
   8.75° gold sweep, rotated 180° and cropped to the band; bg-cta-band.* is that
   composite flattened onto the #cee9d6 base fill. Copy and button are centered,
   with the dark ink button on the pale field. */
.cta-band{position:relative;background-color:var(--gallop-secondary-100);
  background-image:image-set(url("assets/bg-cta-band.webp") type("image/webp"),
                             url("assets/bg-cta-band.jpg")  type("image/jpeg"));
  background-size:cover;background-repeat:no-repeat;background-position:center;
  overflow:hidden;border-radius:8px;margin:50px clamp(1.15rem,4.5vw,50px);}
.cta-band-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:clamp(2rem,4.4vw,3.75rem);padding-block:clamp(5rem,11.3vw,9.7rem);text-align:center;}
.cta-band-title{font-family:var(--font-body);font-weight:400;font-size:var(--type-h-xs);
  letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-heading-xs);
  color:var(--color-ink);max-width:min(583px,100%);}
/* 50px of breathing room on both sides of the band comes from its own
   margin-block, so the footer below keeps its own padding. */

/* =====================  CLOSING + FOOTER — the ochre field returns  ===================== */
/* [WEB] closing block. The mosaic texture (bg-closer.jpg — the designer's
   updated, more vibrant green-gold render) fills the band via cover. Over it, a
   64.75° gold gradient sweeps up from the lower-left; the texture's darker
   upper-right corner carries the white headline. */
.close-field{position:relative;background-color:var(--color-ochre);
  background-image:
    linear-gradient(64.75deg, var(--color-ochre) 15.4%, rgba(216,241,143,0) 55.71%),
    url("assets/bg-closer.jpg");
  background-size:100% 100%, cover;
  background-repeat:no-repeat, no-repeat;
  background-position:center, center bottom;
  overflow:hidden;margin-top:var(--space-section-sm);}
.close-link{font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);border-bottom:1px solid var(--hairline-strong);padding-bottom:.2rem;transition:border-color var(--dur-fast) var(--ease);}
.close-link:hover{border-color:var(--color-ink);}
.close-inner{position:relative;z-index:1;padding-block:clamp(2rem,4vw,3.25rem) clamp(1.4rem,3vw,2.25rem);display:flex;justify-content:flex-end;}
.close-block{max-width:568px;display:flex;flex-direction:column;align-items:flex-end;gap:1.5rem;text-align:right;}
.close-block h2{font-family:var(--font-body);font-weight:400;font-size:var(--type-h-md);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-heading-md);color:var(--color-white);}
.close-block .close-body{font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-body);max-width:44ch;color:var(--color-white);opacity:.92;}
.close-actions{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:flex-end;}

.footer{position:relative;z-index:1;padding-block:clamp(2.5rem,5.6vw,80px);}
/* Figma node 4295:810 — brand block and nav stack sit side by side with a 44px
   gutter; the brand column is 768px and holds the lockup at top / tagline at
   the bottom of a 260px box, so the two columns' baselines line up. */
.footer-top{display:flex;flex-wrap:wrap;gap:44px;align-items:flex-start;}
.footer-brand{display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(11rem,18vw,16.25rem);width:768px;max-width:100%;flex:0 1 auto;}
.footer-brand .mark-row{display:flex;align-items:center;}
/* [EXT] lockup (bars glyph + wordmark) exported from Figma node 2309:9776;
   354×104 at the 1441 frame → scale proportionally with the viewport. */
.footer-brand .mark-row img.lockup{height:clamp(4.2rem,9.4vw,8.44rem);width:auto;}
.footer-tag{margin-top:1.4rem;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-body);max-width:300px;}
/* Nav stack: link columns, then the legal row 44px below them. The 70px top
   pad drops the column heads clear of the wordmark's cap height. */
.footer-nav{display:flex;flex-direction:column;gap:28px;padding-top:clamp(1.5rem,4.9vw,70px);}
.footer-nav .footer-bottom{margin-top:16px;}
.footer-cols{display:flex;gap:clamp(2.5rem,5.5vw,80px);flex-wrap:wrap;}
.footer-col{display:flex;flex-direction:column;gap:9px;}
.footer-col h4{font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;margin:0;}
.footer-col a{display:block;font-size:var(--type-body-md);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-body);opacity:.9;transition:opacity var(--dur-fast) var(--ease);}
.footer-col a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;}
.footer-built{margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--ink-20);font-size:var(--type-body-md);letter-spacing:var(--gallop-tracking);line-height:1.4;max-width:72ch;}
.footer-built b{font-weight:500;}
/* Legal row: PRIVACY / TERMS lead, copyright follows 61px later — both flush
   left under the link columns rather than pushed to opposite edges. */
.footer-bottom{display:flex;flex-wrap:wrap;gap:.8rem 61px;align-items:flex-start;font-family:var(--font-mono);font-weight:400;font-size:var(--type-label-sm);line-height:1.2;letter-spacing:var(--gallop-tracking);text-transform:uppercase;}
/* Social row sits between the link columns and the legal line, in the same
   mono/uppercase key as the legal links. */
.footer-social{display:flex;gap:24px;font-family:var(--font-mono);font-size:var(--type-label-sm);letter-spacing:var(--gallop-tracking);text-transform:uppercase;}
.footer-social a{opacity:.9;transition:opacity var(--dur-fast) var(--ease);}
.footer-social a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;}
.footer-legal-links{display:flex;gap:24px;}
.footer-legal-links a{opacity:.9;transition:opacity var(--dur-fast) var(--ease);}
.footer-legal-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;}

/* =====================  SUBPAGES — page hero + form  ===================== */
.page-hero{background:var(--color-ochre);position:relative;overflow:hidden;margin-top:calc(-1 * (66px + 14px));padding-top:calc(66px + 14px);}
.page-hero .hero-inner{padding-block:clamp(4rem,8vw,6.5rem) clamp(3rem,6vw,4.5rem);}
.page-hero h1{font-size:var(--type-h-lg);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-heading-lg);max-width:24ch;}
.page-hero .sub{margin-top:1.4rem;font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.3;max-width:56ch;}

.prose{max-width:62ch;}
.prose p{font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.35;color:var(--ink-70);}
.prose p+p{margin-top:1.1rem;}
.prose p b{font-weight:400;color:var(--color-ink);}

/* three shifts (About) */
.shift{background:var(--color-surface);}
.shift-inner{padding-block:var(--space-section-sm);}
.shift-h{font-family:var(--font-serif);font-size:var(--type-h-lg);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-heading-lg);max-width:24ch;}
.shift-rows{margin-top:clamp(2.4rem,4vw,3.4rem);}
.shift-row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:1.6rem;padding:1.6rem 0;border-top:1px solid var(--hairline);align-items:start;}
.shift-row:last-child{border-bottom:1px solid var(--hairline);}
.shift-row .rn{font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);color:var(--ink-40);padding-top:.3rem;}
.shift-row p{font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.3;color:var(--ink-70);max-width:60ch;}
.shift-row p b{font-weight:400;color:var(--color-ink);}

/* five-stage strip (About) */
.stage-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .7rem;margin-top:1.8rem;}
.stage-row .schema-arrow{font-size:.8rem;}

/* founders chips */
.founders{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;}
.founders .lbl{font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-50);margin-right:.4rem;}
.chip{font-family:var(--font-mono);font-size:var(--type-label-sm);letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--color-ink);background:var(--color-surface);border-radius:8px;padding:.45rem .8rem;}
.chip b{font-weight:500;}

/* demo request form */
.demo-form{margin-top:clamp(2rem,3.6vw,3rem);background:var(--color-white);border:1px solid var(--hairline);border-radius:8px;padding:clamp(1.5rem,3vw,2.4rem);max-width:640px;}
.form-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.8rem;}
.form-title{font-size:var(--type-h-xs);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-heading-xs);}
.form-req{margin-top:.6rem;font-weight:300;font-size:var(--type-body-md);letter-spacing:var(--gallop-tracking);color:var(--ink-50);}
.secure-chip{display:inline-flex;align-items:center;gap:.45rem;flex:none;font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--color-ink);background:var(--color-surface);border-radius:8px;padding:.45rem .7rem;white-space:nowrap;}
.secure-chip svg{width:11px;height:13px;flex:none;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem;}
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.2rem;}
.field label{font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-50);}
.field label .opt{font-weight:400;color:var(--ink-40);text-transform:none;}
.field select{
  font-family:var(--font-body);font-size:.95rem;color:var(--color-ink);
  background:var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23362F2C' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right .85rem center / 10px 6px;
  border:1px solid var(--hairline);border-radius:8px;
  padding:.75rem 2.2rem .75rem .85rem;appearance:none;-webkit-appearance:none;width:100%;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.field select:focus{outline:none;border-color:var(--color-ink);background-color:var(--color-white);}
.field input,.field textarea{
  font-family:var(--font-body);font-size:.95rem;color:var(--color-ink);
  background:var(--color-bg);border:1px solid var(--hairline);border-radius:8px;
  padding:.75rem .85rem;appearance:none;width:100%;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.field textarea{min-height:110px;resize:vertical;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--color-ink);background:var(--color-white);}
.form-foot{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;margin-top:1.6rem;}
.form-note{font-family:var(--font-mono);font-size:var(--type-label-sm);letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-40);line-height:1.5;max-width:40ch;}
.form-sent{display:none;font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--color-ink);background:var(--color-ochre);padding:.6rem .8rem;border-radius:8px;margin-top:1rem;}
.form-error{display:none;font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:#8c1d18;background:#fdecea;border:1px solid #f3c7c2;padding:.6rem .8rem;border-radius:8px;margin-top:1rem;line-height:1.5;}
.demo-form button[type="submit"][disabled]{opacity:.6;cursor:not-allowed;}

/* =====================  JOURNAL (blog)  ===================== */
.post-meta{font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-50);display:flex;flex-wrap:wrap;gap:.3rem .75rem;}
.post-feature{display:block;background:var(--color-ochre);border-radius:8px;padding:clamp(1.8rem,3.4vw,2.8rem);margin-top:clamp(2.2rem,4vw,3.2rem);transition:background var(--dur-fast) var(--ease);}
.post-feature:hover{background:var(--color-ochre-2);}
.post-feature .post-meta{color:var(--ink-70);}
.post-title{font-family:var(--font-serif);font-size:var(--type-h-md);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-heading-md);max-width:32ch;margin-top:1.2rem;}
.post-excerpt{margin-top:1rem;font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.3;color:var(--ink-70);max-width:60ch;}
.post-more{display:inline-block;margin-top:1.8rem;font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--color-ink);}
.further{margin-top:clamp(3.4rem,6vw,5rem);}
.further-label{font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-50);padding-bottom:1rem;border-bottom:1px solid var(--hairline);}
.post-grid{margin-top:1.4rem;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gallop-space-card-gap);}
.post-card{display:flex;flex-direction:column;background:var(--color-surface);border-radius:8px;padding:clamp(1.5rem,2.6vw,2rem);transition:background var(--dur-fast) var(--ease);}
.post-card:hover{background:var(--color-ochre-2);}
.post-card .post-title{font-size:var(--type-h-xs);}
.post-card .post-more{margin-top:auto;padding-top:1.8rem;}

/* article pages */
.article-hero h1{font-size:var(--type-h-md);max-width:32ch;margin-top:1.2rem;}
.article-back{display:inline-block;font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--color-ink);margin-bottom:1.6rem;}
.article{max-width:720px;}
/* Case-study layout: prose column on the left, at-a-glance box parked in a
   sticky right rail. Collapses to a single stacked column below 1000px. */
.article-layout{display:grid;grid-template-columns:minmax(0,720px) minmax(280px,380px);gap:clamp(2rem,4vw,4rem);align-items:start;}
.article-layout .article{max-width:none;}
/* The prose column now starts with an h2 — drop its large stacking margin. */
.article-layout .article>h2:first-child{margin-top:0;}
.article-aside{position:sticky;top:calc(58px + 2.5rem);}
.glance{background:var(--color-surface);border-radius:8px;padding:clamp(1.3rem,2.4vw,1.8rem);}
/* In the right rail the box is narrow, so labels stack above their values. */
.article-aside .glance-row{grid-template-columns:1fr;gap:.25rem;}
.glance-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.2rem;padding-block:.55rem;border-bottom:1px solid var(--hairline);align-items:baseline;}
.glance-row:last-child{border-bottom:none;}
.glance-row dt{font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-50);margin:0;}
.glance-row dd{margin:0;font-size:var(--type-body-md);letter-spacing:var(--gallop-tracking);line-height:1.35;}
.article h2{font-size:var(--type-h-xs);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-heading-xs);margin-top:clamp(2.4rem,4vw,3.2rem);}
.article p{margin-top:1rem;font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.45;color:var(--ink-70);}
.article p b{font-weight:400;color:var(--color-ink);}
.article ul{margin:1.2rem 0 0;padding:0;list-style:none;}
.article ul li{position:relative;padding-left:1.5rem;margin-top:.8rem;font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.45;color:var(--ink-70);}
.article ul li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--color-ochre);}
.article ul li b{font-weight:400;color:var(--color-ink);}
.article ol{margin:1.2rem 0 0;padding-left:1.4rem;}
.article ol li{margin-top:.8rem;font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.45;color:var(--ink-70);}
.article ol li::marker{font-family:var(--font-mono);font-size:var(--type-label-sm);color:var(--ink-50);}
.article ol li b{font-weight:400;color:var(--color-ink);}
.testimonial{margin:clamp(2.4rem,4vw,3.2rem) 0 0;background:var(--color-ochre);border-radius:8px;padding:clamp(1.6rem,3vw,2.4rem);}
.testimonial p{margin:0;font-family:var(--font-serif);font-weight:400;font-size:var(--type-h-xs);letter-spacing:var(--gallop-tracking);line-height:1.25;color:var(--color-ink);}
.testimonial cite{display:block;margin-top:1.2rem;font-style:normal;font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-70);}
/* Below the two-column threshold the glance box moves back above the prose and
   returns to its wide label/value rows. */
@media (max-width:1000px){
  .article-layout{grid-template-columns:minmax(0,1fr);gap:clamp(1.8rem,4vw,2.6rem);}
  .article-aside{position:static;order:-1;max-width:720px;}
  .article-aside .glance-row{grid-template-columns:150px minmax(0,1fr);gap:1.2rem;}
}

/* =====================  LEGAL (terms / privacy)  ===================== */
.legal h2:first-child{margin-top:0;}
.legal p a{font-weight:400;color:var(--color-ink);text-decoration:underline;text-underline-offset:4px;}
.legal-foot{margin-top:clamp(2.4rem,4vw,3.2rem);padding-top:2rem;border-top:1px solid var(--hairline);}
.legal-foot p{margin-top:0;}
.legal-cta{display:inline-block;margin-top:1.2rem;font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--color-ink);}
.legal-cta:hover{text-decoration:underline;text-underline-offset:4px;}

/* =====================  METHODOLOGY  ===================== */
.prin-idx{font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-50);}
.prin-idx+.sec-kicker{margin-top:1rem;max-width:28ch;}
.ph-list{list-style:none;margin:1.1rem 0 0;padding:0;}
.ph-list li{display:flex;justify-content:space-between;gap:1rem;padding-block:.5rem;border-bottom:1px solid var(--hairline);font-family:var(--font-mono);font-size:var(--type-label-sm);letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-70);}
.ph-list li:last-child{border-bottom:none;}
.ph-list li b{font-weight:500;color:var(--color-ink);}
.ph-note{margin-top:1rem;font-family:var(--font-mono);font-size:var(--type-label-sm);letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-40);}

/* =====================  REVEAL / MOTION  ===================== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur-slow) var(--ease-emph),transform var(--dur-slow) var(--ease-emph);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}

/* =====================  RESPONSIVE  ===================== */
@media (max-width:1100px){
  /* [EXT] closing block stacks left below desktop. Keep the dark-green wash to
     just the top (behind the white CTA text) and let the gold fill the whole
     footer zone so the dark Gallop lockup + columns read cleanly on yellow. */
  .close-field{background-image:
    /* translucent gold veil — keeps the grainy plaid texture showing through
       while tinting the footer zone yellow enough for the dark lockup to read */
    linear-gradient(0deg, rgba(216,241,143,.82) 0%, rgba(216,241,143,.82) 58%, rgba(216,241,143,.45) 72%, rgba(216,241,143,0) 88%),
    /* dark-green wash kept to the top only, behind the white CTA text */
    linear-gradient(180deg, rgba(20,54,31,.9) 0%, rgba(20,54,31,.5) 15%, rgba(20,54,31,0) 33%),
    url("assets/bg-closer.jpg");
    background-size:cover, cover, cover;
    background-position:center bottom, center top, center bottom;}
  /* generous space between the CTA and the logo/footer block */
  .close-field .footer{padding-top:clamp(4.5rem,17vw,7rem);}
  /* extra yellow below the footer columns (taller footer, more gold) */
  .footer{padding-bottom:clamp(4rem,13vw,6rem);}
  .gates{grid-template-columns:repeat(2,1fr);}
  /* NOTE: .stats stacking now lives in the max-width:1100px block further down
     (after the base .stats rule) so it isn't overridden by source order. */
  .close-inner{justify-content:flex-start;}
  .close-block{align-items:flex-start;text-align:left;}
  .close-actions{justify-content:flex-start;}
}
@media (max-width:760px){
  .navwrap{top:8px;padding-inline:.6rem;}
  .nav{padding:.75rem 1rem;margin-inline:0;}  /* no overhang on mobile — keeps the bar inside the screen */
  /* Mobile menu panel. It stays in the DOM (never display:none) so that BOTH
     opening and closing animate — .open is toggled by d.js. Collapse is driven
     by grid-template-rows 0fr→1fr, which transitions where height:auto cannot;
     .nav-links-inner is the row that actually gets sized. Closed is the default
     here, so there's no open-menu flash before d.js runs. */
  .nav-links{
    display:grid;grid-template-rows:0fr;
    position:absolute;top:calc(100% + 6px);left:.6rem;right:.6rem;
    background:var(--color-bg);border:1px solid var(--hairline);border-radius:8px;
    box-shadow:0 12px 30px -18px rgba(54,47,44,.35);
    opacity:0;transform:translateY(-6px);
    visibility:hidden;pointer-events:none;
    transition:grid-template-rows var(--dur) var(--ease-emph),
               opacity var(--dur-fast) var(--ease),
               transform var(--dur) var(--ease-emph),
               visibility 0s var(--dur);  /* hide only once the collapse finishes */
  }
  .nav-links.open{
    grid-template-rows:1fr;opacity:1;transform:translateY(0);
    visibility:visible;pointer-events:auto;
    transition-delay:0s,0s,0s,0s;  /* but show immediately on the way open */
  }
  /* the row that actually collapses — must own the overflow clip and no margin */
  .nav-links-inner{display:flex;flex-direction:column;align-items:stretch;gap:0;overflow:hidden;min-height:0;}
  .nav-links a{padding:.85rem 0;border-bottom:1px solid var(--hairline);font-size:.85rem;margin-inline:1rem;}
  .nav-links a:first-child{margin-top:.4rem;}
  .nav-links a:last-child{border-bottom:none;margin-bottom:.9rem;}
  .nav-links a::after{display:none;}
  .nav-toggle{display:inline-flex;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:.4rem;}
  .nav-toggle span{width:22px;height:2px;background:var(--color-ink);display:block;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);}
  .nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .navwrap{position:relative;}
  .hero,.page-hero{margin-top:calc(-1 * (58px + 8px));padding-top:calc(58px + 8px);}
  .hero-dashes{display:none;}
  .agent-row{flex-wrap:wrap;gap:.5rem;}
  .agent-send{margin-left:0;}
  .gates{grid-template-columns:1fr;}
  .panel{padding:1.1rem;}
  .panel-row{gap:.8rem;flex-wrap:wrap;}
  .faq-item summary{padding-block:1.5rem;}
  .footer-top{flex-direction:column;gap:2.5rem;}
  .footer-brand{min-height:0;width:100%;}
  .footer-nav{gap:2.5rem;padding-top:0;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:.8rem;}
  .post-grid{grid-template-columns:1fr;}
  .glance-row,.article-aside .glance-row{grid-template-columns:1fr;gap:.2rem;}
  .role-row{grid-template-columns:minmax(0,1fr) 24px;gap:.5rem 1rem;}
  .role-meta{grid-column:1 / -1;}
  .gates--3{grid-template-columns:1fr;}
  .stripes span:nth-child(2){margin-top:10px;}
  .stripes span:nth-child(3){margin-top:8px;}
  .stripes span:nth-child(4){margin-top:6px;}
  .stripes span:nth-child(5){margin-top:4px;}
  .stripes span:nth-child(6){height:36px;}
  .demo-form{padding:1.3rem 1.1rem;}
  .form-head{flex-direction:column-reverse;align-items:flex-start;gap:1.1rem;}
  .field-row{grid-template-columns:1fr;gap:0;}
  .form-foot .btn{width:100%;}
  .codewall{display:none;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
  /* the mobile menu defers visibility:hidden until its collapse finishes; with
     transitions flattened above, that delay would only strand the panel */
  .nav-links{transition-delay:0s!important;}
}
/* ?noanim debug hook (set by d.js): instant render, no reveal/scroll animation */
.noanim{scroll-behavior:auto;}
.noanim .reveal{opacity:1;transform:none;transition:none;}
.noanim .nav-links{transition:none;}  /* menu opens/closes instantly, no deferred visibility */
/* FAQ answers snap open/closed; d.js skips its close-deferral in this case too */
.noanim .faq-item .a{transition:none;}

/* =========================================================================
   METHODOLOGY — elevated brand-native visuals (recreated from
   gallopintelligence.ai/transform under ui-brand.md).
   These are UI graphics: Funnel Sans + Geist Mono only (NO serif),
   flat colour blocks, square corners, no shadows. Ochre = accent,
   blue = verification, green = success/"safe" per DESIGN-SYSTEM.md.
   ========================================================================= */

/* -- Principle 03 · Defense-in-depth (layered stack) ---------------------- */
.ddepth{margin-top:2rem;display:flex;flex-direction:column;gap:2px;}
.ddepth-layer{
  display:grid;grid-template-columns:168px minmax(0,1fr);gap:1.5rem;
  align-items:center;background:var(--color-surface);padding:1.05rem 1.15rem;
}
.ddepth-layer .lyr-tag{
  font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;
  letter-spacing:var(--gallop-tracking);text-transform:uppercase;
  color:var(--ink-50);line-height:1.35;
}
.ddepth-layer .lyr-tag b{display:block;color:var(--color-ink);font-weight:500;}
.ddepth-steps{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .55rem;}
.ddepth-step{
  font-family:var(--font-mono);font-size:var(--type-label-sm);
  letter-spacing:var(--gallop-tracking);text-transform:uppercase;
  color:var(--color-ink);background:var(--color-white);padding:.36rem .72rem;
  white-space:nowrap;
}
.ddepth-sep{color:var(--ink-40);font-family:var(--font-mono);font-size:.78rem;}
.ddepth-layer.is-verify{background:var(--gallop-secondary-100);}
.ddepth-layer.is-verify .ddepth-step{background:var(--gallop-secondary-50);}
.ddepth-step.is-safe{background:var(--gallop-secondary-300);font-weight:500;}
.ddepth-cap{
  margin-top:1rem;font-family:var(--font-mono);font-size:var(--type-label-sm);
  letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-40);
}

/* -- Principle 06 · Phase items with AI-acceleration bars ----------------- */
.ph-item{padding-block:.65rem;border-bottom:1px solid var(--hairline);}
.ph-item:last-child{border-bottom:none;}
.ph-item .ph-top{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  font-family:var(--font-mono);font-size:var(--type-label-sm);
  letter-spacing:var(--gallop-tracking);text-transform:uppercase;color:var(--ink-70);
}
.ph-item .ph-top b{font-weight:500;color:var(--color-ink);}
.ph-bar{margin-top:.5rem;height:4px;background:var(--hairline);overflow:hidden;}
.ph-fill{display:block;height:100%;background:var(--color-ochre);width:var(--pct,0%);}

/* -- Principle 05 · Reference table · LOC-shrink cue ---------------------- */
.loc-cell{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start;}
.loc-shrink{position:relative;height:5px;width:120px;max-width:100%;background:var(--gallop-core-200);}
.loc-shrink i{display:block;height:100%;background:var(--color-ink);width:var(--keep,10%);}

@media (max-width:720px){
  .ddepth-layer{grid-template-columns:1fr;gap:.7rem;}
}

/* =========================================================================
   [EXT] HOMEPAGE — recoded to the Figma WEB DESIGN node 2295:8604.
   New visual system: Lustria display serif for the hero, Funnel Sans 30px
   section heads (.hx), and ONE stretch-baked green→gold texture asset
   cropped at different positions/flips per section (.texfield + vars).
   ========================================================================= */
:root{
  --font-display:"Lustria", Georgia, serif;  /* [EXT] hero display serif */
  /* [EXT] case-card tints — now drawn from the July 2026 Core ramp
     instead of the one-off #C9D29D / #EEEDB5 pair. */
  --color-sage:var(--gallop-core-300);
  --color-lemon:var(--gallop-core-200);

  /* Track-record card ramp (Figma 4295:663) — lemon → sage → mint, warmer and
     more saturated than the Core ramp steps, so they stay literal values. */
  --tc-tint-lemon:#F6F09D;
  --tc-tint-sage: #D8E599;
  --tc-tint-mint: #CDEFD0;
}

/* 30px section heading (replaces the serif sec-kicker on the homepage) */
.hx{font-family:var(--font-body);font-weight:400;font-size:clamp(1.5rem,2.1vw,1.875rem);line-height:1.04;letter-spacing:var(--gallop-tracking);}

/* --- texture fields: per-section renders exported straight from Figma
   (crop, ~1.75× pixel stretch, flip and gold gradient baked into each). --- */
.texfield{position:relative;overflow:hidden;background:var(--color-ochre);}
.texfield::before{content:"";position:absolute;inset:0;
  background:var(--tex-img) no-repeat center / cover;}
.texfield::after{content:"";position:absolute;inset:0;background:var(--tex-grad,none);}
.texfield>*{position:relative;z-index:1;}

/* --- HERO — copy on paper, full-bleed texture band below (Figma 4295:248 +
   4295:260). The headline sits left with the sub-copy + CTA in a right column;
   the animation rides a full-width horizontal texture band underneath. ------ */
.xhero{position:relative;background:var(--color-bg);
  margin-top:calc(-1 * (66px + 14px));padding-top:calc(66px + 14px);}
.xhero-inner{position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem);align-items:start;
  padding-top:clamp(6.8rem,14vw,13rem);padding-bottom:clamp(2.6rem,5vw,4.4rem);}
.xhero-copy h1{font-family:var(--font-display);font-weight:400;font-size:clamp(calc(1.9rem * var(--lustria-scale)),calc(2.8vw * var(--lustria-scale)),calc(2.5rem * var(--lustria-scale)));line-height:1.08;letter-spacing:-.02em;max-width:36rem;}
/* right column: sub-copy over the CTA (Figma stacks them with a 22px gap) */
.xhero-aside{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-top:7px;}
.xhero-sub{font-family:var(--font-body);font-weight:400;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.24;color:var(--color-ink);max-width:34rem;}
.xhero-sub b{font-weight:500;}
/* CTA — matches the nav-cta treatment (mono, uppercase, 2px radius) so the
   two yellow buttons read as one component rather than two sizes. */
.xhero-cta{align-self:flex-start;
  font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;text-transform:uppercase;
  padding:.55rem .95rem;border-radius:2px;}

/* the texture band — full-bleed, breaks out of .wrap's centred column */
.xhero-band{position:relative;
  background:var(--color-accent) var(--tex-hero) no-repeat center center / cover;
  overflow:hidden;}
/* the animation sits on the band; the fixed 1280x720 stage is cropped to a
   wide content viewport by hero-anim.js (CV), so the box is set wide+short
   here to match. Height drives how much of the band the artwork fills. */
.xhero-shot{position:relative;z-index:1;}
.xhero-shot img{display:block;width:100%;height:auto;}
/* Figma 4295:260 is 1440x409; the cap is a touch above that so the scene
   (≈2.4:1 after the side-by-side relayout) fills more of the band width on
   wide screens instead of floating with texture margins. */
.xhero-shot .gallop-hero{width:100%;height:clamp(336px,34.8vw,492px);}

@media (min-width:1101px){
  .logoband{padding-top:clamp(3rem,5vw,4.5rem);}
}

/* --- LOGO BAND ------------------------------------------------------------ */
.logoband{padding-top:clamp(4rem,8.5vw,8.2rem);padding-bottom:clamp(3rem,6vw,6rem);text-align:center;}
.logoband-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem clamp(2.5rem,5.2vw,4.75rem);}
/* brand marks sit at 80% per Figma. Set on the img, not the row: the row also
   carries .reveal, whose .in state sets opacity:1 and would override it. */
.logoband-row img{height:var(--lh,24px);width:auto;opacity:.8;}
.logoband-row img.blend{mix-blend-mode:multiply;}

/* --- PROTOCOL — texture-card carousel -------------------------------------- */
.proto-head{display:flex;align-items:center;justify-content:space-between;gap:2rem;}
.proto-head .hx{max-width:26ch;}
.proto-nav{display:flex;gap:10px;}
.proto-arrow{width:44px;height:42px;border-radius:36px;border:1px solid var(--hairline-strong);background:transparent;color:var(--color-ink);font-size:1rem;line-height:1;cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);}
.proto-arrow:hover{background:var(--color-ink);color:var(--color-bg);}
.proto-scroll{margin-top:42px;}
.proto-track{display:flex;gap:25px;overflow-x:auto;scrollbar-width:none;
  width:100vw;margin-left:calc(50% - 50vw);
  padding-left:calc(var(--gutter) + 40px);padding-right:40px;
  padding-bottom:.5rem;}
.proto-track::-webkit-scrollbar{display:none;}
.proto-card{flex:0 0 min(563px,86vw);display:flex;flex-direction:column;gap:clamp(2.6rem,4.5vw,4rem);}
.proto-media{height:clamp(330px,36vw,501px);border-radius:8px;}
/* each card holds the designer's updated screen mock, centred on the green
   texture with ~10% breathing room so the texture frames it. Uniform sizing —
   the mocks arrive as complete screens, no per-card cropping. */
.proto-media .pm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:auto;height:auto;max-width:86%;max-height:82%;border-radius:8px;}
.tf-c1{--tex-img:image-set(url("assets/bg-protocol-1.webp") type("image/webp"),
                          url("assets/bg-protocol-1.jpg")  type("image/jpeg"));}
.tf-c2{--tex-img:image-set(url("assets/bg-protocol-2.webp") type("image/webp"),
                          url("assets/bg-protocol-2.jpg")  type("image/jpeg"));}
.tf-c3{--tex-img:image-set(url("assets/bg-protocol-3.webp") type("image/webp"),
                          url("assets/bg-protocol-3.jpg")  type("image/jpeg"));}
.tf-c4{--tex-img:image-set(url("assets/bg-protocol-4.webp") type("image/webp"),
                          url("assets/bg-protocol-4.jpg")  type("image/jpeg"));}
.proto-txt{display:flex;gap:40px;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.24;color:var(--color-ink);}
.proto-txt .pn{width:20px;flex:none;}
.pt-body{display:flex;flex-direction:column;gap:2px;}
.pt-name,.pt-lead{font-weight:400;}
.pt-desc{font-weight:300;opacity:.5;}
/* Emphasis lead-ins were rendering at the browser-default 700, which the loaded
   Funnel Sans (300/400/500) can only fake as faux-bold — off-brand and heavy.
   Pin them to a real, one-step-above-body 500 (protocol names + Discover/
   Modernize section lead-ins). */
.pt-name b,.mseq-name b,.mseq-points li b{font-weight:500;}

/* --- PLATFORM MAP — the real work ------------------------------------------ */
.mb-head{display:flex;justify-content:space-between;gap:3rem;align-items:flex-start;}
.mb-head .hx{max-width:28ch;flex:none;}
.mb-body{font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.24;max-width:670px;}
/* Discover / Modernization: the two products shown side by side (the team's
   preferred "two image" view — this replaces the earlier tab switcher). Each
   panel stacks a label, the product mock on its texture field, then a caption
   row that splits into a bold lead line beside a hairline-ruled point list. */
/* full-bleed horizontal scroll: each panel is 75% of the viewport so the next
   one peeks in and the row overscrolls sideways (per Figma). Snaps per panel. */
.disc-duo{margin-top:clamp(3rem,5.5vw,4.75rem);display:flex;gap:clamp(1rem,1.6vw,1.5rem);align-items:start;
  width:100vw;margin-left:calc(50% - 50vw);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-left:calc(var(--gutter) + var(--space-page-x));padding-right:var(--space-page-x);padding-bottom:.5rem;
  /* keep snap from scrolling past the left gutter, so the first panel lines up
     with the content column (mb-head above / sections below) */
  scroll-padding-left:calc(var(--gutter) + var(--space-page-x));}
.disc-duo::-webkit-scrollbar{display:none;}
.disc-col{flex:0 0 60vw;scroll-snap-align:start;display:flex;flex-direction:column;gap:clamp(1.4rem,2.4vw,2rem);}
.disc-col-head{display:flex;align-items:baseline;gap:.6ch;flex-wrap:wrap;
  font-family:var(--font-body);letter-spacing:var(--gallop-tracking);line-height:1.2;}
.disc-name{font-size:var(--type-body-lg);font-weight:500;color:var(--color-ink);}
.disc-sub{font-size:var(--type-body-md);color:var(--gallop-text-secondary);}

/* mock centred on its texture field, ~10% breathing room so the texture frames
   it. Square corners (brand rule). */
/* panel height tracks its width at the Figma panel ratio (896×683) */
.disc-media{width:100%;aspect-ratio:5/3;}
.disc-media img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:auto;height:auto;max-width:88%;max-height:84%;}
.tf-disc{--tex-img:image-set(url("assets/bg-discover.webp") type("image/webp"),
                            url("assets/bg-discover.jpg")  type("image/jpeg"));}
.tf-mod{--tex-img:image-set(url("assets/bg-modernization.webp") type("image/webp"),
                           url("assets/bg-modernization.jpg")  type("image/jpeg"));}

/* caption under the mock: bold lead line | point list */
.disc-caption{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.4rem,2.4vw,2.2rem);align-items:start;}
.disc-headline{font-size:var(--type-body-md);letter-spacing:var(--gallop-tracking);line-height:1.28;color:var(--color-ink);}

/* points separated by hairline rules — same stroke as the features list */
.disc-list{margin:0;padding:0;list-style:none;}
.disc-list li{padding:clamp(.5rem,.9vw,.7rem) 0;border-top:1px solid var(--hairline);font-size:var(--type-body-md);letter-spacing:var(--gallop-tracking);line-height:1.28;color:var(--gallop-text-secondary);}
.disc-list li:first-child{border-top:none;padding-top:0;}

/* --- DISCOVER → MODERNIZE — windowed scroll sequence ----------------------
   Base rules below are the STATIC fallback: legend, then each product's caption
   with its image stacked in reading order. This is what renders with no JS, with
   reduced-motion, and on small screens. JS adds `.mseq--live` (desktop + motion
   OK) to switch on the pinned scroll-scrub + draggable timeline further down. */
/* full-bleed section child of .sec (which has no inline padding); the base pads
   both sides so the static/mobile view sits in the page margins. Live mode below
   overrides to pad only the left (rail aligns to the content column, window
   bleeds to the right edge — per Figma). */
.mseq{margin-top:clamp(3rem,5.5vw,4.75rem);padding-inline:var(--space-page-x);}
/* legend / key sits under the intro paragraph (right column of the header),
   the two products stacked one above the other */
.mb-right{display:flex;flex-direction:column;gap:clamp(1.6rem,2.8vw,2.3rem);max-width:670px;}
.mb-right .mb-body{max-width:none;}
.mseq-legend{display:flex;flex-direction:column;gap:.7rem;}
.mseq-key{display:inline-flex;align-items:center;gap:.6ch;font-size:var(--type-body-md);letter-spacing:var(--gallop-tracking);color:var(--gallop-text-secondary);}
.mseq-key b{font-weight:500;color:var(--color-ink);}
.mseq-key i{width:10px;height:10px;border-radius:50%;flex:none;margin-right:.15ch;}
.mseq-key--disc i{background:var(--color-ochre);}
.mseq-key--mod i{background:var(--gallop-secondary);}

.mseq-grid{display:flex;flex-direction:column;gap:clamp(2.4rem,4.5vw,3.5rem);}
.mseq-rail{display:flex;flex-direction:column;gap:clamp(2.4rem,4.5vw,3.5rem);}
.mseq-state{display:flex;flex-direction:column;}
.mseq-name{font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.2;color:var(--gallop-text-secondary);}
.mseq-name b{font-size:var(--type-h-xs);font-weight:500;color:var(--color-ink);}
.mseq-headline{margin-top:.75rem;font-size:var(--type-body-md);letter-spacing:var(--gallop-tracking);line-height:1.28;color:var(--color-ink);max-width:32ch;}
.mseq-points{margin:1.1rem 0 0;padding:0;list-style:none;max-width:38ch;}
.mseq-points li{padding:clamp(.5rem,.9vw,.7rem) 0;border-top:1px solid var(--hairline);font-size:var(--type-body-md);letter-spacing:var(--gallop-tracking);line-height:1.28;color:var(--gallop-text-secondary);}
.mseq-points li:first-child{border-top:none;padding-top:0;}
/* inline product image shown in the static fallback */
.mseq-inlineshot{margin-top:clamp(1.4rem,2.4vw,2rem);width:100%;aspect-ratio:5/3;}
.mseq-inlineshot img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:auto;max-width:88%;max-height:84%;border-radius:8px;}
/* the shared window + timeline only exist in live mode */
.mseq-track,.mseq-window{display:none;}

/* ---- LIVE mode: pinned scroll-scrub (desktop only) ---- */
@media (min-width:900px){
  .mseq--live{--mseq-scroll:230vh;--mseq-c:var(--color-ochre);height:var(--mseq-scroll);
    padding-inline:0;}   /* padding moves onto the stage so the window can bleed right */
  .mseq--live.is-mod{--mseq-c:var(--gallop-secondary);}
  /* the stage pins to the viewport for the whole scroll of .mseq. Full-bleed:
     the surface box runs to the left viewport edge, the window to the right. */
  .mseq--live .mseq-stage{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;
    justify-content:center;padding-top:clamp(5.5rem,8vh,7rem);padding-bottom:clamp(2rem,4vh,3.5rem);}
  /* row 1 = the full-width timeline (spans both columns); row 2 = box | window
     with their tops aligned. row-gap 0 so the track sits flush on both and reads
     as the header of the stage, not a bar floating over a gap. */
  .mseq--live .mseq-grid{display:grid;grid-template-columns:minmax(300px,0.86fr) minmax(0,2.1fr);
    grid-template-rows:auto auto;column-gap:0;row-gap:0;align-items:stretch;}

  /* LEFT: the copy sits in a warm Surface-colour box that bleeds to the left
     edge. Its inner left padding is a small margin from the VIEWPORT (not the
     centred page content column). Both states overlay one grid cell so the
     cross-fade never shifts layout; name + headline at top, points at bottom. */
  .mseq--live .mseq-inlineshot{display:none;}
  .mseq--live .mseq-rail{grid-column:1;grid-row:2;display:grid;gap:0;background:var(--color-surface);
    padding:clamp(2rem,4.5vh,3.4rem) clamp(1.6rem,2.8vw,2.6rem);
    padding-left:var(--space-page-x);}
  .mseq--live .mseq-state{grid-area:1/1;min-height:100%;opacity:0;visibility:hidden;
    transition:opacity .45s var(--ease),visibility 0s linear .45s;}
  .mseq--live .mseq-state.is-current{opacity:1;visibility:visible;transition:opacity .45s var(--ease);}
  .mseq--live .mseq-points{margin-top:auto;}
  .mseq--live .mseq-headline,
  .mseq--live .mseq-points li{color:var(--gallop-text-secondary);opacity:.34;
    transition:opacity .4s var(--ease),color .4s var(--ease);}
  .mseq--live .mseq-headline.lit,
  .mseq--live .mseq-points li.lit{opacity:1;color:var(--color-ink);}

  /* timeline: row 1, spanning the full viewport width directly above the box +
     window. Progress-only (scroll drives it) — not interactive, no marker.
     Sits flush on the row below (row-gap 0) so the two read as one unit. */
  .mseq--live .mseq-track{display:block;grid-column:1 / -1;grid-row:1;align-self:end;
    position:relative;height:6px;background:var(--hairline);--p:0;}
  /* one smooth yellow→green gradient across the whole track (Discover→Modernize,
     per the key), revealed left-to-right as progress advances */
  .mseq--live .mseq-track-fill{position:absolute;inset:0;
    background:linear-gradient(90deg,var(--color-ochre) 0%,var(--gallop-secondary) 100%);
    clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0);}
  /* midpoint tick: marks where the rail cross-fades Discover→Modernize, so the
     track visibly corresponds to the two states below it */
  .mseq--live .mseq-track::after{content:"";position:absolute;left:50%;top:0;bottom:0;
    width:1px;background:var(--color-bg);}

  /* image window: row 2, right column; bleeds to the viewport's right edge,
     square corners (brand). Its height drives the row, so the box matches it. */
  .mseq--live .mseq-window{grid-column:2;grid-row:2;
    position:relative;display:grid;width:100%;aspect-ratio:16/10;
    max-height:min(72vh,660px);overflow:hidden;}
  .mseq--live .mseq-shot{grid-area:1/1;}
  .mseq--live .mseq-shot img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:auto;height:auto;max-width:90%;max-height:86%;border-radius:8px;}
  /* Modernize screen — the whole new screen (mock + green field) fades in over
     Discover at the midpoint, instead of swiping */
  .mseq--live .mseq-shot--disc{opacity:1;}
  .mseq--live .mseq-shot--mod{opacity:var(--fade,0);}
}

/* --- ENTERPRISE / TRUST ---------------------------------- */
.ent-lead{max-width:40ch;}
#enterprise .hx{max-width:none;}
.ent-sub{margin-top:12px;font-family:var(--font-body);font-weight:300;font-size:var(--type-body-xl);letter-spacing:var(--gallop-tracking);line-height:1.24;color:var(--gallop-text-secondary);}
/* the capability columns read as their own section below the trust row, so the
   gap above them matches the section rhythm rather than an in-section step */
.ent-grid{margin-top:var(--space-section);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gallop-space-card-gap);}
/* no surface panel behind each item — plain text columns on the page canvas */
.ent-card{display:flex;flex-direction:column;gap:14px;}
.ent-card-title{font-family:var(--font-body);font-weight:400;font-size:var(--type-body-xl);letter-spacing:var(--gallop-tracking);line-height:1.2;color:var(--color-ink);}
.ent-card-desc{font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.24;color:var(--gallop-text-secondary);}
/* trust row (Figma 4295:758): title + standfirst + compliance marks sit left
   (326px of a 1359 frame); the paragraph column starts at 575px (~42.3%), so the
   split is expressed as a fraction of the content width */
.ent-trust{display:grid;grid-template-columns:minmax(326px,42.3%) minmax(0,1fr);gap:clamp(2rem,4vw,3rem);
  align-items:start;}
/* the paragraph (18px/1.24) runs smaller than the heading (.hx, 1.04 leading) and
   the two faces have different ascents, so top-aligning the boxes alone leaves the
   first lines off. This offset sits the paragraph's cap line on the heading's. */
.ent-trust-body{margin-top:-0.17em;}
/* compliance marks: badges sit side by side, each caption centred beneath its mark */
.ent-badges{margin:clamp(2.6rem,4.5vw,3.75rem) 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.25rem clamp(2rem,3.5vw,3rem);}
.ent-badges li{display:flex;flex-direction:column;align-items:center;gap:10px;}
/* clip the square badge PNGs to a circle so the white corners disappear */
.ent-badges img{width:clamp(60px,5.5vw,72px);height:clamp(60px,5.5vw,72px);flex:none;object-fit:cover;border-radius:50%;}
.ent-badges span{font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;
  letter-spacing:var(--gallop-tracking);line-height:1.1;text-transform:uppercase;text-align:center;color:var(--color-ink);}
.ent-trust-body{max-width:660px;}

/* --- TRACK RECORD ----------------------------------------------------------- */
/* head row: label + headline on the left, demo CTA pinned bottom-right so its
   baseline lines up with the last headline line (Figma 4295:660). */
.track-head{display:flex;align-items:flex-end;gap:22px;}
.track-head-copy{flex:1 1 auto;min-width:0;}
.track-label{font-size:var(--type-body-md);letter-spacing:var(--gallop-tracking);}
.track-label+.hx{margin-top:22px;max-width:34ch;}
.track-cta{flex:none;
  font-family:var(--font-mono);font-size:var(--type-label-sm);font-weight:500;letter-spacing:var(--gallop-tracking);text-transform:uppercase;line-height:1.1;
  color:var(--color-bg);background:var(--color-ink);padding:14px 23px 12px 26px;border-radius:2px;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease);}
.track-cta:hover{background:var(--gallop-neutral-800);}
.track{position:relative;margin-top:54px;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gallop-space-card-gap);}
/* card size original; only the top stat line (.tc-meta) is enlarged — headline
   stats (Alice). Dialed back 20% from the earlier 1.5rem to 1.2rem. */
.track-card{min-height:clamp(360px,33.5vw,483px);padding:var(--gallop-space-card-pad);display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  position:relative;isolation:isolate;overflow:hidden;border-radius:8px;}
.tc-lemon{background:var(--tc-tint-lemon);}
.tc-sage{background:var(--tc-tint-sage);}
.tc-mint{background:var(--tc-tint-mint);}
/* the striped horse composites over the card row at soft-light (Figma
   4295:679). Each card paints its own third of the artwork on a ::after rather
   than one overlay spanning the row: .track carries .reveal, and its opacity:0
   start frame makes it a stacking context, which isolated a row-spanning blend
   and composited the horse against the cream page background — rendering it
   near-black for the length of the fade. Blending inside each card guarantees a
   tint underneath at every opacity, and keeps the gaps out of it entirely.
   Positioning: each slice is sized to the whole row (3 cards + 2 gaps) and
   shifted left by one card+gap per column, so the thirds reassemble into one
   continuous horse. Offsets are calc()'d in length units, not percentages —
   percentage background-position resolves against (container - image), which
   inverts once the image is wider than its box. The art is 2.46:1 against a
   ~2.9:1 row, so it stretches to 100% height: along the grain of a
   horizontal-streak motif, which reads as more speed, not distortion.
   Also a background rather than an <img>: a blend-moded image element paints
   opaque for a frame before the blend resolves, which flashed it black too.
   WebP first with a PNG fallback, as with --tex-hero. */
.track-card::after{content:"";position:absolute;top:0;bottom:0;pointer-events:none;
  mix-blend-mode:soft-light;
  /* stretched to the whole row and clipped to this card by the parent's
     overflow:hidden — sizing the box (not background-size) keeps the geometry
     in lengths, avoiding percentage background-position, which resolves
     against (box - image) and inverts once the image is wider than its box. */
  width:calc(300% + 2 * var(--gallop-space-card-gap));
  background-image:image-set(url("assets/horse-graphic.webp") type("image/webp"),
                             url("assets/horse-graphic.png")  type("image/png"));
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:bottom center;}
/* pull the row-wide box left by one card + gap per column */
.tc-lemon::after{left:0;}
.tc-sage::after {left:calc(-100% - var(--gallop-space-card-gap));}
.tc-mint::after {left:calc(-200% - 2 * var(--gallop-space-card-gap));}
.track-card>*{position:relative;z-index:1;}
.tc-meta{font-family:var(--font-mono);font-size:1.2rem;letter-spacing:var(--gallop-tracking);text-transform:uppercase;opacity:.8;line-height:1.25;}
.tc-main{display:flex;flex-direction:column;gap:2px;}
.tc-title{font-size:var(--type-body-xl);letter-spacing:var(--gallop-tracking);line-height:1.24;}
.tc-desc{font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.24;opacity:.5;}
/* each card is a link to its case study. The hover affordance is paint-only on
   purpose: a transform would lift one card out of the row and visibly break the
   horse's continuity at the seams it shares with its neighbours. Inset rings
   rather than outline — the card sets overflow:hidden. A .post-card-style
   background swap is no good either: it would flatten the three lemon/sage/mint
   tints the soft-light composite needs underneath it. */
.track-card{transition:box-shadow var(--dur-fast) var(--ease);}
.track-card:hover{box-shadow:inset 0 0 0 1px var(--ink-70);}
.track-card:hover .tc-desc{opacity:.7;}
.track-card:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-ink);}
.tc-desc{transition:opacity var(--dur-fast) var(--ease);}

/* --- CORE FEATURES ----------------------------------------------------------- */
/* Heading on the left, a 2×2 grid of icon + title + description on the right.
   No product graphics in this section yet (design decision) — icons only. */
.cf-layout{display:grid;grid-template-columns:minmax(0,305fr) minmax(0,964fr);gap:clamp(2.5rem,5vw,4rem);align-items:start;}
.cf-head .hx{max-width:14ch;}
.cf-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2.4rem,4vw,4rem) clamp(2.6rem,4.5vw,4.05rem);}
.cf-feat{display:flex;flex-direction:column;gap:12px;}
.cf-feat h3{font-family:var(--font-body);font-weight:400;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.24;color:var(--color-ink);}
.cf-feat p{font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.24;color:var(--gallop-text-secondary);}

/* --- STATS -------------------------------------------------------------------- */
.stats{margin-top:clamp(3.5rem,9vw,8rem);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,5vw,5.6rem);}
.stat{display:flex;flex-direction:column;}
.stat-num{font-family:var(--font-body);font-size:clamp(1.7rem,2.4vw,2.125rem);letter-spacing:var(--gallop-tracking);line-height:1.04;}
.stat-label{margin-top:clamp(1.4rem,2vw,1.85rem);font-family:var(--font-mono);font-weight:500;font-size:var(--type-label-md);letter-spacing:var(--gallop-tracking);text-transform:uppercase;line-height:1.2;color:var(--color-ink);max-width:22rem;}
.stat-body{margin-top:clamp(1.4rem,2.4vw,2rem);font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.24;color:var(--ink-50);max-width:34ch;}

/* --- PARITY — texture band ------------------------------------------------------ */
.parity-band{min-height:clamp(420px,35vw,501px);display:flex;align-items:center;
  width:100vw;margin-left:calc(50% - 50vw);}
/* The CTA band carries its own 50px margin above and below, so nothing here
   cancels it. */
#faq{padding-bottom:clamp(3.5rem,6.6vw,6rem);}
/* own texture render (was the hero texture + an ochre gradient for legibility;
   this export is evenly light across the band, so the copy reads without it). */
.tf-parity{--tex-img:image-set(url("assets/bg-parity.webp") type("image/webp"),
                              url("assets/bg-parity.jpg")  type("image/jpeg"));}
.pb-inner{width:100%;display:flex;justify-content:space-between;gap:3rem;align-items:center;padding:clamp(2rem,4vw,3.2rem) calc(var(--gutter) + var(--space-page-x));}
.pb-copy{max-width:500px;display:flex;flex-direction:column;gap:32px;}
.pb-copy .hx{max-width:26ch;}
.pb-copy p{font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.24;}
.pb-inner .panel{flex:0 1 560px;border-radius:8px;}
.pb-shot{flex:0 1 560px;min-width:0;width:100%;height:auto;border-radius:8px;display:block;}


/* --- FAQ — surface band ------------------------------------------------------------ */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(2.5rem,8vw,9rem);align-items:start;padding-block:clamp(3.5rem,6.6vw,6rem);}

/* --- nav lockup sizing -------------------------------------------------------------- */
.nav-brand img.lockup{height:clamp(1.5rem,2vw,1.85rem);width:auto;}

/* --- responsive for the [EXT] homepage ----------------------------------------------- */
@media (max-width:1100px){
  .xhero-inner{grid-template-columns:1fr;align-items:start;}
  .xhero-aside{margin-top:1.6rem;}
  .mb-head{flex-direction:column;gap:1.6rem;}
  .cf-layout{grid-template-columns:1fr;gap:2rem;}
  .stats{grid-template-columns:1fr;gap:clamp(2.5rem,7vw,3.2rem);}
  .track-head{flex-direction:column;align-items:flex-start;gap:1.6rem;}
  .track{grid-template-columns:1fr;}
  .track-card{min-height:300px;}
  /* one tall stacked column — each card would show a stretched vertical sliver
     of the horse, so it only rides the 3-up row. */
  .track-card::after{display:none;}
  .pb-inner{flex-direction:column;align-items:flex-start;}
  .pb-inner .panel{flex:none;width:100%;max-width:560px;}
  .pb-shot{flex:none;max-width:560px;}
  .faq-grid{grid-template-columns:1fr;gap:2.2rem;}
  .ent-grid{grid-template-columns:repeat(2,1fr);}
  .ent-trust{grid-template-columns:1fr;gap:2rem;}
}
@media (max-width:760px){
  /* HERO (mobile): the copy stacks on the paper and the texture band sits
     below it, same structure as desktop — only the columns collapse. The
     band keeps its own background (see .xhero-band), so .xhero itself stays
     plain paper here. */
  .xhero-inner{display:block;padding-top:clamp(4rem,14vw,6rem);padding-bottom:clamp(1.8rem,6vw,2.6rem);}
  .xhero-aside{margin-top:1.5rem;}
  .logoband{padding-top:clamp(3rem,7vw,4.5rem);}
  .proto-card{flex-basis:86vw;}
  .proto-txt{gap:1.4rem;}
  .proto-track{padding-left:var(--space-page-x);padding-right:var(--space-page-x);}
  .disc-col{flex-basis:85vw;}
  /* match the Discover graphic height to the Protocol cards on mobile
     (drop the 5/3 aspect ratio so height is fixed, not width-derived) */
  .disc-media{aspect-ratio:auto;height:clamp(330px,36vw,501px);}
  .disc-caption{grid-template-columns:1fr;gap:1rem;}
  .cf-grid2{grid-template-columns:1fr;}
  .ent-grid{grid-template-columns:1fr;}
}

/* =========================================================================
   [WEB] ABOUT — recoded to the Figma [WEB] Gallop about page (node 4025-1896).
   Hero: plain paper field, the 9-bar logo glyph blown up in ochre with rows
   fading downward, overlapped by a centred Lustria headline + mono standfirst.
   Body: mono-kicker rows, principle cards, stat tiles, ochre statement band.
   ========================================================================= */

/* --- the Gallop mark, reusable at any size via width. Inline SVG (assets/
   gallop-mark.svg, node 4076:4706); fill rides on currentColor so modifiers
   just set `color`. Landscape 86×68 box. --- */
.hglyph{display:block;aspect-ratio:86/68;color:var(--color-ink);}
.hglyph svg,.hglyph img{display:block;width:100%;height:auto;}

/* --- hero ----------------------------------------------------------------- */
.about-hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-block:clamp(2rem,4vw,3.4rem) clamp(3.4rem,7vw,6rem);}
.about-hero-inner .hglyph{--hero-glyph-w:clamp(240px,34vw,490px);width:var(--hero-glyph-w);color:var(--color-ochre);
  margin-bottom:calc(var(--hero-glyph-w) * -.4);} /* faded glyph sits behind the headline, which overlaps its lower half (Figma) */
.about-hero-inner h1{position:relative;font-family:var(--font-display);font-weight:400;
  font-size:clamp(calc(1.8rem * var(--lustria-scale)),calc(2.65vw * var(--lustria-scale)),calc(2.375rem * var(--lustria-scale)));line-height:1.08;letter-spacing:var(--gallop-tracking);max-width:633px;}
.about-hero-inner .sub{position:relative;margin-top:20px;font-family:var(--font-mono);
  font-size:var(--type-label-sm);font-weight:400;letter-spacing:var(--gallop-tracking);
  text-transform:uppercase;line-height:1.2;max-width:614px;}

/* --- mono-kicker prose rows (problem / grown) ------------------------------ */
.about-row{display:flex;gap:19px;align-items:flex-start;}
.about-kicker{flex:0 0 clamp(200px,23vw,325px);font-family:var(--font-mono);font-weight:500;
  font-size:var(--type-label-md);letter-spacing:var(--gallop-tracking);text-transform:uppercase;
  line-height:var(--gallop-leading-label);}
.about-copy{flex:1 1 0;min-width:0;font-weight:300;font-size:var(--type-body-lg);
  letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-body);color:var(--color-ink);}
.about-copy p+p{margin-top:1.35em;}
.about-copy b{font-weight:400;}
.about-rule{border:none;border-top:1px solid var(--hairline);margin:clamp(4rem,7.6vw,6.9rem) 0 0;}

/* --- operating principles --------------------------------------------------- */
.prin-heading{margin-top:16px;font-family:var(--font-body);font-weight:400;
  font-size:clamp(1.4rem,2vw,var(--gallop-text-heading-xs));line-height:var(--gallop-leading-heading-xs);
  letter-spacing:var(--gallop-tracking);max-width:633px;}
.prin-grid{margin-top:clamp(3rem,5.5vw,5rem);display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.prin-card{padding:32px;display:flex;flex-direction:column;gap:32px;
  background:#D2E3A1;border-radius:0px;}
.prin-card h3{font-family:var(--font-body);font-weight:400;
  font-size:clamp(1.3rem,1.95vw,var(--gallop-text-heading-xs));line-height:var(--gallop-leading-heading-xs);
  letter-spacing:var(--gallop-tracking);}
.prin-card h3+p{margin-top:12px;font-weight:300;font-size:var(--type-body-lg);
  letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-body);color:var(--gallop-text-secondary);}

/* --- stat tiles -------------------------------------------------------------- */
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.about-stat{min-height:clamp(180px,16.6vw,240px);padding:40px clamp(2rem,6.25vw,90px);
  display:flex;flex-direction:column;justify-content:center;gap:16px;background:var(--color-surface);}
.about-stat.is-ochre{background:var(--color-ochre);}
.about-stat .fig{font-family:var(--font-display);font-size:clamp(calc(2.1rem * var(--lustria-scale)),calc(3.3vw * var(--lustria-scale)),calc(3rem * var(--lustria-scale)));
  line-height:var(--gallop-leading-heading-xl);letter-spacing:var(--gallop-tracking-display);}
.about-stat .cap{font-family:var(--font-mono);font-weight:500;font-size:var(--type-label-md);
  letter-spacing:var(--gallop-tracking);text-transform:uppercase;line-height:var(--gallop-leading-label);
  color:var(--gallop-text-secondary);}
.about-stat.is-ochre .cap{color:var(--color-ink);opacity:.8;}

/* --- ochre statement band ------------------------------------------------------ */
.about-band{background:var(--color-ochre);}
.about-band .wrap{padding-block:clamp(6rem,11vw,10rem);
  padding-inline:clamp(1.15rem,5.5vw,80px);display:flex;flex-direction:column;gap:32px;align-items:flex-start;}
.about-band .hglyph{width:28px;color:var(--color-ink);}
.about-band .statement{font-family:var(--font-display);font-weight:400;
  font-size:clamp(calc(1.7rem * var(--lustria-scale)),calc(3.3vw * var(--lustria-scale)),calc(3rem * var(--lustria-scale)));line-height:var(--gallop-leading-heading-xl);
  letter-spacing:var(--gallop-tracking-display);max-width:24ch;}
/* the statement band butts straight into the textured footer field */
.about-band+.close-field{margin-top:0;}

@media (max-width:1100px){
  .about-row{flex-wrap:wrap;}
  .about-kicker{flex-basis:100%;}
  .prin-grid{grid-template-columns:repeat(2,1fr);}
  .about-stats{grid-template-columns:1fr;}
  .about-stat{min-height:150px;}
}
@media (max-width:760px){
  .about-row{gap:1.4rem;}
  .about-copy{flex-basis:100%;}
  .prin-grid{grid-template-columns:1fr;}
  .prin-card{padding-block:20px;}
}

/* =========================================================================
   [WEB] METHODOLOGY — reskinned to the About-page idiom: paper hero with the
   fading glyph, mono-kicker prose rows on hairline rules, Funnel Sans
   principle headings (no serif), and flat ochre statement bands. The existing
   defense-in-depth / ledger / phase visuals are re-homed full-width on paper.
   ========================================================================= */

/* principle rows: kicker column + a single readable prose measure */
.about-row.is-principle .about-copy{max-width:66ch;}
/* Funnel Sans heading that opens each principle (overrides the serif h2 default) */
.prin-title{font-family:var(--font-body);font-weight:400;
  font-size:clamp(1.3rem,1.95vw,var(--gallop-text-heading-xs));
  line-height:var(--gallop-leading-heading-xs);letter-spacing:var(--gallop-tracking);
  color:var(--color-ink);margin:0 0 clamp(1rem,1.7vw,1.45rem);}
.prin-title b{font-weight:500;}

/* full-width figures (defense-in-depth, ledger, phase gates) sit below their
   row on the paper canvas, capped to the content column */
.meth-figure{margin-top:clamp(2rem,3.4vw,3rem);}

/* ochre statement band, methodology variant: shorter than the About closer and
   carrying a lighter second line */
.about-band.is-wide .wrap{padding-block:clamp(3.4rem,6vw,5.6rem);}
.about-band.is-wide .statement{max-width:30ch;}
.about-band .statement-sub{display:block;margin-top:.4em;
  font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.14;
  letter-spacing:var(--gallop-tracking);opacity:.66;}

@media (max-width:1100px){
  .about-row.is-principle .about-copy{max-width:none;}
}

/* =========================================================================
   [WEB] CONTACT — split hero: heading on the left inside a fixed-height ochre
   band, the intake form in the right column top-aligned with the heading. The
   form is taller than the band, so its lower half spills past the ochre edge
   onto the paper below and reads as sitting half on each. The ochre is a
   fixed-height gradient band (keeps the yellow block height); the form stays
   in normal flow, so the section grows with it and the footer follows cleanly.
   ========================================================================= */
.contact-hero{position:relative;
  margin-top:calc(-1 * (66px + 14px));padding-top:calc(66px + 14px);
  --band-h:440px;
  background:linear-gradient(var(--color-ochre) 0 var(--band-h), transparent var(--band-h));}
.contact-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
  padding-block:clamp(4rem,8vw,6.5rem) clamp(4rem,8vw,7rem);}
.contact-hero-copy h1{font-size:var(--type-h-lg);letter-spacing:var(--gallop-tracking);line-height:var(--gallop-leading-heading-lg);max-width:24ch;}
.contact-hero-copy .sub{margin-top:1.4rem;font-weight:300;font-size:var(--type-body-lg);letter-spacing:var(--gallop-tracking);line-height:1.3;color:var(--color-ink);max-width:52ch;}
.contact-hero-form{width:100%;max-width:560px;margin:0;justify-self:end;}

@media (max-width:900px){
  /* stack: ochre sits behind the heading only (full-bleed), form on paper below */
  .contact-hero{background:none;}
  .contact-hero-inner{grid-template-columns:1fr;gap:0;padding-top:0;}
  .contact-hero-copy{max-width:none;background:var(--color-ochre);
    width:100vw;margin-left:calc(50% - 50vw);
    padding:clamp(3rem,7vw,4.5rem) var(--space-page-x) clamp(2.5rem,6vw,3.5rem);}
  .contact-hero-form{justify-self:stretch;max-width:none;margin-top:clamp(2rem,6vw,3rem);}
}