/* ============================================================
   MAITRE — landing
   Pure black & white · Fraunces (display) + Inter (text)
   Soho House × Louis Vuitton · editorial, hairline rhythm
   ============================================================ */

:root{
  /* Warm-dark hybrid — Maître brand palette */
  --ink:        #0c3102;   /* Maître Green — authority near-black */
  --ink-soft:   #24331c;   /* softened green — body text on cream */
  --paper:      #f8f1eb;   /* Linen Cream */
  --white:      #fffdf9;   /* warm white */
  --accent:     #b9862f;   /* Amber Hour — the one accent, used sparingly */
  --accent-deep:#9c6f22;
  --grey:       #625448;   /* Walnut Taupe — secondary text, captions */
  --grey-soft:  #8a7c6c;   /* muted taupe */
  --hair:       #e4d9cc;   /* warm hairline on cream */
  --hair-dark:  #2b3a22;   /* hairline on green */
  --blush:      #efc4bb;   /* Banquette Blush — reserved micro-accent */
  --rose:       #ce8286;   /* Terrazzo Rose — reserved micro-accent */

  --maxw: 1320px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(5.5rem, 12vh, 10rem);

  /* 12-column grid */
  --gap: clamp(.9rem, 1.5vw, 1.5rem);

  /* radii — media is soft, controls stay editorial */
  --r-card: 16px;
  --r-ctl: 6px;

  /* headroom reserved so the hero search bar lands fully above the fold */
  --bar-clear: 104px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: .5s;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,blockquote,figure,ol,ul{ margin:0; }
button{ font:inherit; cursor:pointer; }

.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;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:var(--white); padding:.75rem 1.25rem;
  font-size:.85rem; letter-spacing:.02em;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.invert :focus-visible, .btn--light:focus-visible{ outline-color:var(--white); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section + .section:not(.invert):not(.offer){ border-top:1px solid var(--hair); }

/* ---------- 12-column grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:var(--gap);
}
@media (max-width:980px){ .grid{ grid-template-columns:repeat(6, minmax(0,1fr)); } }
@media (max-width:640px){ .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ---------- section header: title left, aside on the offset column ---------- */
.shead{ align-items:end; row-gap:clamp(1.5rem,3vw,2.25rem); }
.shead__lead{ grid-column:1 / span 6; }
.shead__aside{ grid-column:8 / span 4; padding-bottom:.4rem; }
.shead__aside .lede{ margin-top:0; font-size:clamp(1rem,.96rem + .3vw,1.12rem); }
.shead__aside .lede + .lede{ margin-top:1.25rem; }
.shead__aside--end{ display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem; }
@media (max-width:980px){
  .shead__lead{ grid-column:1 / -1; }
  .shead__aside{ grid-column:1 / -1; padding-bottom:0; }
}

/* ---------- type primitives ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.75rem;
}
.eyebrow--light{ color:#d9a95a; }

.display{
  font-family:var(--serif);
  font-weight:400;
  font-optical-sizing:auto;
  font-size:clamp(2rem, 1.3rem + 3.4vw, 3.9rem);
  line-height:1.06;
  letter-spacing:-.015em;
  text-wrap:balance;
  max-width:18ch;
}
.display--md{ font-size:clamp(1.8rem, 1.3rem + 2.4vw, 3rem); max-width:20ch; }
.display--light{ color:var(--paper); }
.display em{ font-style:italic; }
/* two-tone display: the second phrase recedes */
.display .tone{ color:var(--grey-soft); }
.display--light .tone{ color:rgba(248,241,235,.42); }

.lede{
  font-size:clamp(1.06rem, 1rem + .4vw, 1.3rem);
  line-height:1.6; color:var(--ink-soft);
  max-width:56ch; margin-top:1.5rem;
  text-wrap:pretty;
}
.lede--light{ color:rgba(255,255,255,.8); }
.lede em{ font-style:italic; color:var(--white); }

.figure{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- buttons ---------- */
.btn{
  --bh:52px;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--bh); padding-inline:1.75rem;
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--ink); border-radius:2px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform .12s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.98); }
.btn--primary{ background:var(--ink); color:var(--white); }
.btn--primary:hover{ background:transparent; color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--white); }

/* on dark imagery / inverted sections */
.btn--light.btn--primary{ background:var(--white); color:var(--ink); border-color:var(--white); }
.btn--light.btn--primary:hover{ background:transparent; color:var(--white); }
.btn--light.btn--ghost{ color:var(--white); border-color:rgba(255,255,255,.55); }
.btn--light.btn--ghost:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }

.btn--nav{ --bh:44px; padding-inline:1.35rem; font-size:.72rem; }
.btn, .offer__form input{ border-radius:var(--r-ctl); }

/* ---------- boxed arrow ---------- */
.arrowbox{
  display:inline-grid; place-items:center; flex:0 0 auto;
  width:34px; height:34px; border-radius:8px;
  border:1px solid rgba(255,255,255,.45); color:inherit;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.arrowbox svg{ width:13px; height:13px; }
.arrowbox--ink{ border-color:var(--hair); color:var(--ink); }

/* ============================================================
   MEDIA CARD — the grid primitive
   ============================================================ */
.mcard{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-card); background:var(--ink);
  isolation:isolate;
}
.mcard__img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.02) contrast(1.03) brightness(.94);
  transition:transform 1.1s var(--ease), filter var(--dur) var(--ease);
  will-change:transform;
}
.mcard::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,26,2,.16) 0%, rgba(8,26,2,.02) 26%,
    rgba(8,24,2,.52) 58%, rgba(6,18,1,.88) 82%, rgba(5,15,1,.95) 100%);
}
.mcard__body{
  position:absolute; z-index:2; inset:auto 0 0 0;
  padding:clamp(1.1rem,2vw,1.6rem);
  color:var(--white);
}
.mcard__kicker{
  display:block; font-size:.64rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:#e6b978; margin-bottom:.6rem;
}
.mcard__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.25rem,1rem + .9vw,1.7rem); line-height:1.1;
  letter-spacing:-.01em; text-wrap:balance;
}
.mcard__foot{
  display:flex; align-items:center; gap:.9rem;
  margin-top:.9rem;
}
.mcard__meta{
  font-size:.82rem; color:rgba(255,255,255,.78);
  font-variant-numeric:tabular-nums;
}
.mcard__meta b{ font-weight:600; color:var(--white); border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:1px; }
.mcard__foot .arrowbox{ margin-left:auto; }

/* hover: image breathes, hairline warms */
a.mcard::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:inherit; border:1px solid transparent;
  transition:border-color var(--dur) var(--ease);
}
a.mcard:hover::before{ border-color:rgba(230,185,120,.55); }
a.mcard:hover .mcard__img{ transform:scale(1.05); filter:saturate(1.06) contrast(1.05) brightness(1); }
a.mcard:hover .arrowbox{ background:var(--white); color:var(--ink); border-color:var(--white); }
@media (prefers-reduced-motion: reduce){
  .mcard__img{ transition:none; }
  a.mcard:hover .mcard__img{ transform:none; }
}

/* ---------- wordmark ---------- */
.wordmark{
  font-family:var(--sans); font-weight:600;
  font-size:1rem; letter-spacing:.28em; text-transform:uppercase;
}
.wordmark--dark{ color:var(--ink); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:1.1rem var(--gutter);
  display:flex; align-items:center; gap:2rem;
}
.nav .wordmark{ color:var(--white); transition:color var(--dur) var(--ease); }
/* wordmark + "Open right." lockup */
.nav__lockup{ display:flex; align-items:center; gap:.85rem; }
.nav__rule{
  width:1px; height:15px; background:rgba(255,255,255,.34);
  transition:background var(--dur) var(--ease);
}
.nav__tag{
  font-family:var(--serif); font-style:italic; font-size:.98rem;
  color:#e6b978; letter-spacing:.01em; white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.nav.is-solid .nav__rule{ background:var(--hair); }
.nav.is-solid .nav__tag{ color:var(--accent-deep); }
@media (max-width:560px){ .nav__rule, .nav__tag{ display:none; } }

.nav__menu{ display:flex; gap:2rem; margin-left:auto; }
.nav__menu a{
  font-size:.82rem; letter-spacing:.04em; color:rgba(255,255,255,.82);
  position:relative; padding-block:.25rem; transition:color var(--dur) var(--ease);
}
.nav__menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background:currentColor; transition:right var(--dur) var(--ease);
}
.nav__menu a:hover::after{ right:0; }
.nav .btn--nav{ color:var(--white); border-color:rgba(255,255,255,.55); }
.nav .btn--nav:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }

/* scrolled state → paper */
.nav.is-solid{ background:rgba(250,249,246,.9); backdrop-filter:blur(10px); border-bottom-color:var(--hair); }
.nav.is-solid .wordmark{ color:var(--ink); }
.nav.is-solid .nav__menu a{ color:var(--ink-soft); }
.nav.is-solid .btn--nav{ color:var(--ink); border-color:var(--ink); }
.nav.is-solid .btn--nav:hover{ background:var(--ink); color:var(--white); }

@media (max-width: 860px){
  .nav__menu{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  /* short enough that the whole search bar clears the fold once it overlaps */
  min-height:calc(100svh - var(--bar-clear));
  display:flex; align-items:flex-end;
  overflow:hidden; background:var(--ink);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:110%; object-fit:cover;
  filter:saturate(.88) contrast(1.04) brightness(.62);
  will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    /* vertical seat: dark top for nav, deep floor for the bar */
    linear-gradient(180deg, rgba(6,22,1,.78) 0%, rgba(6,22,1,.34) 34%, rgba(6,20,1,.68) 74%, rgba(4,16,1,.95) 100%),
    /* horizontal seat: carries the headline column */
    linear-gradient(90deg, rgba(6,22,1,.86) 0%, rgba(6,22,1,.58) 42%, rgba(6,22,1,.30) 72%, rgba(6,22,1,.42) 100%);
}
.hero__content{
  position:relative; z-index:2; width:100%;
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--gutter) clamp(6rem, 14vh, 9rem);
  color:var(--white);
  align-items:end; row-gap:clamp(2.5rem,5vw,3.5rem);
}
.hero__lede{ grid-column:1 / span 7; }
.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.5rem, 1.2rem + 5.4vw, 5.8rem);
  line-height:1.02; letter-spacing:-.025em;
  text-wrap:balance; margin-bottom:1.5rem;
}
.hero__title em{ font-style:italic; font-weight:400; }
.hero__title .tone{ color:rgba(255,255,255,.62); }
.hero__sub{
  font-size:clamp(1.05rem, 1rem + .5vw, 1.28rem);
  line-height:1.55; color:rgba(255,255,255,.85);
  max-width:50ch; margin-bottom:2.25rem; text-wrap:pretty;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* right rail — the four systems that get certified */
.hero__rail{ grid-column:10 / span 3; }
.rail__head{
  font-size:.64rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55); padding-bottom:.9rem;
  border-bottom:1px solid rgba(255,255,255,.22);
}
.rail__row{
  display:flex; align-items:center; gap:.7rem;
  padding:.72rem 0; border-bottom:1px solid rgba(255,255,255,.13);
  font-size:.86rem; color:rgba(255,255,255,.9);
}
.rail__dot{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  border:2px solid #e6b978;
}
.rail__row span:last-child{
  margin-left:auto; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.68);
}
@media (max-width:980px){
  .hero__lede{ grid-column:1 / -1; }
  .hero__rail{ display:none; }
}

/* short laptop viewports: compress the hero so the bar still clears the fold */
@media (min-width:981px) and (max-height:840px){
  /* bottom padding must stay clear of the overlapping bar — trim the type instead */
  .hero__content{ padding-bottom:7rem; }
  .hero .eyebrow{ margin-bottom:1rem; }
  .hero__title{ font-size:clamp(2.2rem,1rem + 2.9vw,3.4rem); margin-bottom:1rem; }
  .hero__sub{ font-size:1rem; line-height:1.5; margin-bottom:1.5rem; max-width:46ch; }
  .hero__rail .rail__row{ padding-block:.5rem; }
  .hero__rail .rail__head{ padding-bottom:.65rem; }
}
@media (min-width:981px) and (max-height:780px){
  /* headline, CTAs and the bar win the fold on short screens */
  .hero__sub{ display:none; }
}

/* ---------- floating search bar: breaks the hero boundary ---------- */
.barwrap{ position:relative; z-index:20; margin-top:clamp(-58px,-5vw,-42px); }
.sbar{
  background:var(--white); border:1px solid var(--hair);
  border-radius:var(--r-card); padding:8px;
  box-shadow:0 34px 70px - 30px rgba(6,20,1,.55), 0 2px 8px rgba(6,20,1,.06);
  transition:border-color var(--dur) var(--ease);
}
.sbar.is-open{ border-color:rgba(185,134,47,.5); }

.sbar__row{
  display:grid; grid-template-columns:1.5fr 1fr 1fr auto auto;
  align-items:stretch;
}
.sbar__field{
  display:flex; flex-direction:column; justify-content:center; min-width:0;
  padding:.8rem 1.2rem; border-right:1px solid var(--hair);
}
.sbar__field--lead{
  background:var(--ink); color:var(--paper);
  border-right:0; border-radius:10px;
  transition:box-shadow var(--dur) var(--ease);
}
.sbar__field--lead:focus-within{ box-shadow:0 0 0 2px rgba(230,185,120,.55); }
.sbar__lab{
  display:block;
  font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); margin-bottom:.3rem; padding:0;
}
.sbar__field--lead .sbar__lab{ color:rgba(248,241,235,.6); }
.sbar input, .sbar select{
  width:100%; border:0; background:transparent; padding:0;
  font-family:var(--sans); font-size:.95rem; color:inherit;
  border-radius:0; appearance:none;
}
.sbar input:focus, .sbar select:focus{ outline:none; }
.sbar input::placeholder{ color:rgba(248,241,235,.5); }
.sbar select{ color:var(--ink); cursor:pointer; }
.sbar.is-invalid .sbar__field--lead{ box-shadow:0 0 0 2px var(--rose); }

/* advanced toggle */
.sbar__adv{
  display:flex; align-items:center; gap:.5rem; align-self:center;
  margin-inline:.9rem; padding:.6rem .25rem; border:0; background:transparent;
  font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grey); white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sbar__adv svg{ width:15px; height:15px; }
.sbar__adv:hover{ color:var(--ink); border-bottom-color:var(--hair); }
.sbar__adv[aria-expanded="true"]{ color:var(--accent-deep); border-bottom-color:var(--accent); }

.sbar__go{
  display:grid; place-items:center; align-self:center;
  width:54px; height:54px;
  border:0; border-radius:12px; background:var(--ink); color:var(--white);
  transition:background var(--dur) var(--ease), transform .12s ease;
}
.sbar__go:hover{ background:var(--accent-deep); }
.sbar__go:active{ transform:scale(.96); }
.sbar__go svg{ width:18px; height:18px; }

.sbar__err{
  margin:.65rem 0 .1rem; padding-inline:1.2rem;
  font-size:.82rem; color:#8d3a3d;
}

/* ---------- advanced panel ---------- */
.sbar__panel{
  border-top:1px solid var(--hair); margin-top:8px; padding:1.4rem 1.2rem .4rem;
}
.sbar__panel[hidden]{ display:none; }
.sbar__panel-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.4rem clamp(1rem,2vw,2rem); align-items:start;
}
.sbar__set{ min-width:0; border:0; padding:0; margin:0; }
.sbar__set--wide{ grid-column:1 / -1; }
.sbar__sel{
  width:100%; min-height:34px; padding:0 0 .4rem;
  border:0; border-bottom:1px solid var(--hair); border-radius:0;
  background:transparent; appearance:none; cursor:pointer;
  font-family:var(--sans); font-size:.95rem; color:var(--ink);
  transition:border-color var(--dur) var(--ease);
}
.sbar__sel:focus{ outline:none; border-bottom-color:var(--accent); }

/* system chips — these drive the readout */
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.5rem; }
.chip{ position:relative; }
.chip input{
  position:absolute; opacity:0; width:100%; height:100%;
  margin:0; cursor:pointer; appearance:none;
}
.chip span{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem; border:1px solid var(--hair); border-radius:999px;
  font-size:.85rem; color:var(--ink-soft); background:var(--paper);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.chip span::before{
  content:""; width:7px; height:7px; border-radius:50%;
  border:1.5px solid var(--grey-soft); transition:all var(--dur) var(--ease);
}
.chip input:checked + span{
  border-color:var(--accent); background:rgba(185,134,47,.1); color:var(--ink);
}
.chip input:checked + span::before{ background:var(--accent); border-color:var(--accent); }
.chip input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:2px; }

/* ---------- live readout ---------- */
.sbar__out{
  display:grid; grid-template-columns:auto auto 1fr; align-items:baseline;
  gap:.4rem clamp(1.5rem,3vw,2.75rem);
  margin-top:8px; padding:1.05rem 1.2rem;
  border-top:1px solid var(--hair);
}
.sbar__out[hidden]{ display:none; }
.sbar__out-main{ display:flex; align-items:baseline; gap:.7rem; white-space:nowrap; }
.sbar__out-lab{
  font-size:.62rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey);
}
.sbar__out-val{
  font-family:var(--serif); font-size:clamp(1.05rem,1rem + .5vw,1.3rem);
  color:var(--ink); line-height:1;
}
#sb-range{ color:var(--accent-deep); }
.sbar__out-note{
  grid-column:1 / -1;
  font-size:.74rem; line-height:1.5; color:var(--grey-soft); max-width:70ch;
}

/* ---------- success ---------- */
.sbar__done{
  display:flex; align-items:flex-start; gap:.85rem;
  margin-top:8px; padding:1.15rem 1.2rem;
  border-top:1px solid var(--hair);
}
.sbar__done[hidden]{ display:none; }
.sbar__done-dot{
  width:9px; height:9px; border-radius:50%; margin-top:.45rem; flex:0 0 auto;
  background:var(--accent);
}
.sbar__done-txt{ font-size:.92rem; line-height:1.55; color:var(--ink-soft); }
.sbar__done-txt b{ color:var(--ink); }

@media (max-width:900px){
  .barwrap{ margin-top:-32px; }
  .sbar__row{ grid-template-columns:1fr 1fr; row-gap:2px; }
  .sbar__field{ border-right:0; border-bottom:1px solid var(--hair); }
  .sbar__field--lead{ grid-column:1 / -1; border-bottom:0; }
  .sbar__adv{ grid-column:1; margin:.5rem 0 0; justify-content:center; }
  .sbar__go{ grid-column:2; width:100%; margin:.5rem 0 0; height:48px; }
  .sbar__panel-grid{ grid-template-columns:1fr 1fr; }
  .sbar__out{ grid-template-columns:1fr; }
  .sbar__out-main{ white-space:normal; }
}
@media (max-width:560px){
  /* keep the two selects paired so the bar stays compact on a phone */
  .sbar__field{ padding:.7rem .9rem; }
  .sbar input, .sbar select{ font-size:.9rem; }
  .sbar__panel-grid{ grid-template-columns:1fr; }
  .sbar__panel{ padding-inline:.9rem; }
  .sbar__out, .sbar__done, .sbar__err{ padding-inline:.9rem; }
}


/* ============================================================
   SYSTEMS — the four things that decide the deal
   ============================================================ */
.systems__grid{ margin-top:clamp(2.5rem,5vw,3.75rem); }
.systems__grid .mcard{ grid-column:span 3; aspect-ratio:3/4; }
/* reserve two lines so every kicker lands on the same baseline */
.systems__grid .mcard__title{ min-height:2.2em; }
@media (max-width:980px){ .systems__grid .mcard{ grid-column:span 3; aspect-ratio:4/5; } }
@media (max-width:640px){
  .systems__grid .mcard{ grid-column:1 / -1; aspect-ratio:16/10; }
}

/* ============================================================
   STAKES
   ============================================================ */
.stakes .display{ max-width:24ch; }
.stats{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:0; margin-top:clamp(3rem, 6vw, 5rem);
  border-top:1px solid var(--hair);
}
.stat{ padding:2.25rem 1.75rem 2.25rem 0; border-right:1px solid var(--hair); }
.stat + .stat{ padding-left:1.75rem; }
.stat:last-child{ border-right:0; }
.stat__num{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem); line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.stat__unit{
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey); margin:.75rem 0 1.1rem;
}
.stat__label{ font-size:.92rem; line-height:1.5; color:var(--ink-soft); max-width:26ch; }

.stakes__scandal{
  margin-top:2rem; max-width:60ch;
  font-size:clamp(1rem,.96rem + .3vw,1.15rem); line-height:1.6; color:var(--ink-soft);
}
.stakes__scandal{ font-style:normal; }

.pullquote{ margin-top:clamp(3.5rem, 8vw, 6rem); }
.pullquote blockquote{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.5rem, 1rem + 2.4vw, 2.6rem); line-height:1.2;
  letter-spacing:-.01em; text-wrap:balance; max-width:24ch;
  padding-left:clamp(1.25rem, 3vw, 2.5rem); border-left:2px solid var(--accent);
}

@media (max-width: 860px){
  .stats{ grid-template-columns:repeat(2, 1fr); }
  .stat{ padding:1.75rem 1.25rem; border-bottom:1px solid var(--hair); }
  .stat:nth-child(2n){ border-right:0; }
}
@media (max-width: 520px){
  .stats{ grid-template-columns:1fr; }
  .stat{ border-right:0; padding-inline:0; }
}

/* ============================================================
   SPLIT / POSITIONING
   ============================================================ */
.split__grid{ align-items:center; row-gap:clamp(2.5rem,5vw,3.5rem); }
.split__text{ grid-column:1 / span 5; }
.split__text .lede + .lede{ margin-top:1.25rem; }
.split__text .lede em{ font-style:italic; color:var(--ink); }

.split__media{ grid-column:7 / -1; position:relative; }
.split__frame{
  position:relative; overflow:hidden; border-radius:var(--r-card);
  background:var(--ink);
}
.split__frame img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:saturate(.95) contrast(1.04) brightness(.92);
  transition:transform 1.1s var(--ease);
}
.split__media:hover .split__frame img{ transform:scale(1.04); }
/* the chip that anchors the image to the argument */
.split__chip{
  position:absolute; z-index:2;
  left:clamp(1rem,2vw,1.5rem); bottom:clamp(1rem,2vw,1.5rem);
  background:var(--paper); color:var(--ink);
  padding:1rem 1.4rem 1.1rem;
  border-radius:12px;
  display:flex; flex-direction:column; gap:.3rem;
  box-shadow:0 18px 40px - 22px rgba(6,20,1,.65);
}
.split__chip-lab{
  font-size:.62rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey);
}
.split__chip-val{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.15rem,1rem + .6vw,1.45rem); line-height:1;
  color:var(--accent-deep);
}
.split__media figcaption{
  margin-top:.9rem; font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grey);
}
@media (max-width:980px){
  .split__text{ grid-column:1 / -1; }
  .split__media{ grid-column:1 / -1; order:-1; }
  .split__frame img{ aspect-ratio:4/3; }
}
@media (prefers-reduced-motion: reduce){
  .split__media:hover .split__frame img{ transform:none; }
}

/* ============================================================
   ASSESSMENT — inverted centerpiece
   ============================================================ */
.invert{ background:var(--ink); color:var(--paper); }
.assessment{ overflow:hidden; }
.assessment__head .lede--light em{ font-style:italic; }

/* the 12-column grid, drawn as hairlines behind the section */
.colguides{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.colguides .grid{ height:100%; }
.colguides span{ border-left:1px solid rgba(248,241,235,.075); }
.colguides span:last-child{ border-right:1px solid rgba(248,241,235,.075); }
@media (max-width:980px){ .colguides{ display:none; } }

/* :not(.colguides) — the guides are also a .wrap and must stay absolute */
.assessment > .wrap:not(.colguides){ position:relative; z-index:1; }

/* ---------- section grid: document left, rail right ---------- */
.assess__grid{
  margin-top:clamp(3rem,6vw,4.75rem);
  align-items:start; row-gap:clamp(2.75rem,5vw,3.5rem);
}
.assess__doc{ grid-column:1 / span 7; }
.assess__rail{ grid-column:9 / -1; }
@media (max-width:980px){
  .assess__doc{ grid-column:1 / -1; }
  .assess__rail{ grid-column:1 / -1; }
}

/* ---------- the artifact ---------- */
.artifact{ position:relative; }
/* stacked sheets behind the top page */
.artifact__sheet{
  position:absolute; inset:0; border-radius:var(--r-card);
  background:var(--paper); z-index:0;
}
.artifact__sheet--1{ transform:translate(7px,7px) rotate(.35deg); opacity:.30; }
.artifact__sheet--2{ transform:translate(14px,14px) rotate(.7deg); opacity:.14; }

.artifact__paper{
  position:relative; z-index:1;
  width:100%; background:var(--paper); color:var(--ink);
  padding:clamp(1.75rem, 3.4vw, 2.75rem);
  border-radius:var(--r-card);
  box-shadow:0 40px 80px - 30px rgba(0,0,0,.6);
}
.artifact__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-bottom:1.15rem; border-bottom:1px solid var(--hair);
}
/* the brand lockup, repeated on the document */
.artifact__lockup{ display:flex; align-items:center; gap:.7rem; }
.artifact__top .wordmark{ font-size:.85rem; }
.artifact__rule{ width:1px; height:12px; background:var(--hair); }
.artifact__tag{
  font-family:var(--serif); font-style:italic; font-size:.85rem; color:var(--accent-deep);
}
.artifact__id{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey); font-variant-numeric:tabular-nums;
}

.artifact__addr{ padding:1.4rem 0; border-bottom:1px solid var(--hair); }
.artifact__eyebrow{ font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin-bottom:.5rem; }
.artifact__title{ font-family:var(--serif); font-size:clamp(1.3rem,1rem + 1.3vw,1.75rem); line-height:1.1; }
.artifact__meta{ font-size:.85rem; color:var(--grey); margin-top:.35rem; }

/* ---------- readiness meter ---------- */
.meter{ padding:1.35rem 0 1.5rem; border-bottom:1px solid var(--hair); }
.meter__top{ display:flex; align-items:center; gap:.75rem; }
.verdict__dot{
  width:12px; height:12px; border-radius:50%; flex:0 0 auto;
  /* ready-with-upgrades = ring; survives greyscale */
  background:transparent; border:3px solid var(--accent);
}
.meter__word{ font-weight:600; font-size:1rem; }
.meter__score{ margin-left:auto; color:var(--grey); font-size:.8rem; }
.meter__score b{
  font-family:var(--serif); font-size:1.6rem; color:var(--ink);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.meter__track{
  position:relative; height:8px; margin-top:1.1rem; border-radius:999px;
  background:linear-gradient(90deg,
    rgba(206,130,134,.42) 0%, rgba(206,130,134,.42) 40%,
    rgba(185,134,47,.42) 40%, rgba(185,134,47,.42) 75%,
    rgba(12,49,2,.30) 75%, rgba(12,49,2,.30) 100%);
}
.meter__pin{
  position:absolute; top:50%; width:3px; height:20px; border-radius:2px;
  background:var(--ink); transform:translate(-50%,-50%);
}
.meter__pin::after{
  content:""; position:absolute; left:50%; top:-9px;
  width:9px; height:9px; border-radius:50%; background:var(--accent);
  transform:translateX(-50%);
}
.meter__scale{
  display:flex; justify-content:space-between; margin-top:.6rem;
  font-size:.62rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--grey-soft);
}

/* ---------- cost table ---------- */
.cost{ width:100%; border-collapse:collapse; margin:.5rem 0 0; font-size:.9rem; }
.cost caption{ text-align:left; }
.cost th{
  text-align:left; font-size:.66rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey); padding:1.1rem 0 .6rem;
}
.cost td{ padding:.7rem 0; border-top:1px solid var(--hair); vertical-align:top; }
.cost tbody tr{ transition:color var(--dur) var(--ease); }
.cost__num{ text-align:right; white-space:nowrap; }
.cost tfoot td{ border-top:2px solid var(--ink); font-weight:600; padding-top:.9rem; }
.cost tfoot .cost__num{ color:var(--accent-deep); }
.tag{ font-size:.66rem; color:var(--grey); font-variant-numeric:tabular-nums; }

/* certification seal — amber stamp on the artifact */
/* stamped half-off the corner so it never fights the document's own footer */
.seal{
  position:absolute; bottom:-26px; right:-22px;
  width:92px; height:92px; border-radius:50%; z-index:3;
  background:var(--paper);
  border:1.5px solid var(--accent); color:var(--accent-deep);
  display:grid; place-items:center; text-align:center;
  transform:rotate(-8deg);
  box-shadow:0 12px 28px - 14px rgba(6,20,1,.55);
}
.seal::before{
  content:""; position:absolute; inset:5px; border-radius:50%;
  border:1px dashed rgba(185,134,47,.5);
}
.seal span{
  font-size:.5rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  line-height:1.35; max-width:70px;
}
.seal b{ display:block; font-family:var(--serif); font-size:.9rem; letter-spacing:.02em; margin-top:2px; }
@media (max-width:520px){ .seal{ width:74px; height:74px; } .seal span{ font-size:.44rem; } }

/* ---------- document footer ---------- */
.artifact__sign{
  margin-top:1.35rem; padding-top:1.1rem; border-top:1px solid var(--hair);
}
.artifact__foot{ font-size:.76rem; color:var(--grey); line-height:1.5; max-width:38ch; }
.artifact__note{
  /* clears the corner stamp */
  margin-top:3.25rem; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(248,241,235,.42);
}

@media (max-width:560px){
  /* the stamp must stay inside the viewport, not bleed past the gutter */
  .seal{ right:1rem; bottom:-20px; width:76px; height:76px; }
  .artifact__note{ margin-top:2.75rem; }
  /* let the letterhead wrap instead of squeezing the lockup */
  .artifact__top{ flex-wrap:wrap; gap:.5rem 0; }
  .artifact__lockup{ flex:1 0 100%; }
  .artifact__id{ flex:1 0 100%; font-size:.62rem; }
  /* stack each cost row: label, then the range beneath it */
  .cost thead{ display:none; }
  .cost tbody tr, .cost tfoot tr{ display:block; padding:.8rem 0; border-top:1px solid var(--hair); }
  .cost tfoot tr{ border-top:2px solid var(--ink); }
  .cost td, .cost tfoot td{ display:block; border:0; padding:0; }
  .cost__num{ text-align:left; margin-top:.3rem; font-weight:600; }
}

/* ---------- branded rail ---------- */
.arail + .arail{ margin-top:clamp(2rem,3.5vw,2.75rem); }
.rail__head--dark{
  font-size:.64rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(248,241,235,.55); padding-bottom:.85rem;
  border-bottom:1px solid rgba(248,241,235,.22);
}
.arail__row{
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem 0; border-bottom:1px solid rgba(248,241,235,.12);
  font-size:.9rem; color:rgba(248,241,235,.9);
}
.arail__row span:last-child:not(.vdot):not(.arail__num){
  margin-left:auto; font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(248,241,235,.42);
}
.arail__num{
  font-family:var(--serif); font-size:.85rem; color:var(--accent);
  font-variant-numeric:tabular-nums; min-width:1.4rem;
}
/* verdict legend dots — the brand's three states */
.vdot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.vdot--ready{ background:#8fae74; }
.vdot--upgrade{ background:transparent; border:3px solid var(--accent); }
.vdot--no{ background:transparent; border:1px solid var(--rose); position:relative; }
.vdot--no::after{
  content:""; position:absolute; inset:50% -1px auto -1px; height:1px;
  background:var(--rose); transform:rotate(-45deg);
}
.arail__cta{ margin-top:clamp(2rem,3.5vw,2.75rem); width:100%; }
.arail__fine{
  margin-top:.9rem; font-size:.78rem; color:rgba(248,241,235,.5); text-align:center;
}

/* "Open right." master-line lockup */
.openright{
  font-family:var(--serif); font-style:italic; color:var(--accent);
  font-size:1.05rem; letter-spacing:.01em;
}
.openright--hero{ display:inline-block; margin-top:1.75rem; color:#e6b978; font-size:1.15rem; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps{
  list-style:none; padding:0;
  margin:clamp(3rem,6vw,4.5rem) 0 0;
}
.step{
  grid-column:span 4; position:relative;
  padding:clamp(1.9rem,3vw,2.5rem);
  border:1px solid var(--hair); border-radius:var(--r-card);
  background:var(--white); overflow:hidden;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.step:hover{
  border-color:rgba(156,111,34,.45); transform:translateY(-4px);
  box-shadow:0 26px 50px - 34px rgba(6,20,1,.45);
}
/* oversized ghost numeral */
.step__num{
  position:absolute; z-index:0;
  top:clamp(1.1rem,2vw,1.5rem); right:clamp(1.2rem,2.2vw,1.7rem);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3rem,5vw,4.25rem); line-height:.9;
  color:var(--accent); opacity:.15;
  font-variant-numeric:tabular-nums; pointer-events:none;
}
.step__title{
  position:relative; z-index:1;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.3rem,1rem + 1.2vw,1.65rem); line-height:1.15;
  margin-bottom:.85rem; padding-top:.35rem;
}
.step__title::before{
  content:""; display:block; width:26px; height:2px;
  background:var(--accent); margin-bottom:1.25rem;
}
.step__body{ position:relative; z-index:1; font-size:.95rem; line-height:1.6; color:var(--ink-soft); }
@media (max-width:980px){ .step{ grid-column:span 6; } }
@media (max-width:640px){ .step{ grid-column:1 / -1; } }
@media (prefers-reduced-motion: reduce){ .step:hover{ transform:none; } }
.how__thesis{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:2rem; border-top:1px solid var(--hair);
  font-family:var(--serif); font-size:clamp(1.2rem,1rem + 1vw,1.6rem); color:var(--ink);
}
.how__thesis em{ font-style:italic; color:var(--accent-deep); }

/* ============================================================
   WHO WE SERVE — doors
   ============================================================ */
/* header parked left, cards run right — the reference grid */
.serve__grid{ align-items:center; row-gap:clamp(2.5rem,5vw,3.5rem); }
.serve__lead{ grid-column:1 / span 4; }
.serve__lead .display{ max-width:12ch; }
.serve__lead .lede{ max-width:34ch; }
.serve__lead .btn{ margin-top:2rem; }
.serve__mark{
  width:38px; height:38px; margin-bottom:1.5rem;
  border:1px solid var(--hair); border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:1.05rem; color:var(--accent-deep);
}
.serve__cards{
  grid-column:5 / -1;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap);
}
.serve__cards .mcard{ aspect-ratio:2/3; }
.serve__cards .mcard__title{ font-size:clamp(1.15rem,1rem + .55vw,1.4rem); }
.serve__cards .mcard__kicker{ margin-bottom:.5rem; }
@media (max-width:980px){
  .serve__lead{ grid-column:1 / -1; }
  .serve__cards{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .serve__cards{ grid-template-columns:1fr; }
  .serve__cards .mcard{ aspect-ratio:4/3; }
}

/* the three hooks, as a hairline row under the cards */
.hooks{
  margin-top:clamp(3rem,6vw,4.5rem); padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--hair);
}
.hook{ grid-column:span 4; }
.hook__line{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.1rem,1rem + .6vw,1.35rem); line-height:1.3;
  color:var(--accent-deep); text-wrap:balance; margin-bottom:.9rem;
}
.hook__body{ font-size:.93rem; line-height:1.6; color:var(--ink-soft); max-width:36ch; }
@media (max-width:980px){ .hook{ grid-column:span 6; } }
@media (max-width:640px){ .hook{ grid-column:1 / -1; } }


/* ============================================================
   EVIDENCE
   ============================================================ */
.proof-founder{
  margin:clamp(3rem,6vw,4.5rem) 0 0; padding:clamp(2rem,4vw,3rem);
  background:var(--ink); color:var(--paper); border-left:3px solid var(--accent);
}
.proof-founder blockquote{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem);
  line-height:1.1; letter-spacing:-.01em; text-wrap:balance; color:var(--paper);
}
.proof-founder figcaption{
  margin-top:1.25rem; font-size:clamp(1rem,.96rem + .3vw,1.15rem); line-height:1.6;
  color:rgba(248,241,235,.82); max-width:62ch;
}
.proof-founder strong{ color:#e6b978; font-weight:600; }

.eyebrow--sub{ margin-top:clamp(2.75rem,5vw,3.75rem); margin-bottom:0; color:var(--grey); }

/* asymmetric field-evidence grid: two unequal media cards + a narrow tile */
.ev-grid{ margin-top:1.75rem; grid-auto-rows:clamp(300px,27vw,420px); }
.ev-grid .mcard, .ev-more{ height:100%; }
.ev--wide{ grid-column:span 5; }
.ev--mid{ grid-column:span 4; }
.ev-grid .mcard .mcard__title{ font-size:clamp(1.15rem,1rem + .7vw,1.45rem); }
.ev-grid .mcard b{ color:#e6b978; font-weight:600; }

.ev-more{
  grid-column:span 3; border-radius:var(--r-card);
  background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.1rem,2vw,1.6rem);
  transition:background var(--dur) var(--ease);
}
.ev-more:hover{ background:#0f3d03; }
.ev-more:hover .arrowbox{ background:var(--white); color:var(--ink); border-color:var(--white); }
.ev-more__label{
  display:flex; align-items:center; gap:1rem;
  font-size:.95rem; font-weight:600; letter-spacing:.02em;
}
.ev-more__label .arrowbox{ margin-left:auto; }
.ev-more__note{
  font-size:.8rem; line-height:1.5; color:rgba(248,241,235,.55);
  margin-bottom:auto;
}

/* the remaining field notes, as a hairline pair */
.ev-notes{
  margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--hair);
}
.ev-note{
  grid-column:span 6; padding:1.75rem 2rem 1.75rem 0;
}
.ev-note + .ev-note{ border-left:1px solid var(--hair); padding-left:2rem; }
.ev-note p{ font-family:var(--serif); font-size:clamp(1.05rem,1rem + .5vw,1.28rem); line-height:1.35; text-wrap:pretty; }
.ev-note p b{ font-weight:600; }
.ev__tag{ display:block; font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin-bottom:.9rem; }
.ev-sources{ margin-top:2.25rem; font-size:.85rem; color:var(--grey); max-width:70ch; }

@media (max-width:980px){
  .ev--wide, .ev--mid{ grid-column:span 6; }
  .ev-more{ grid-column:span 6; min-height:180px; }
  .ev-note{ grid-column:span 6; padding-right:0; }
  .ev-note + .ev-note{ border-left:0; border-top:1px solid var(--hair); padding-left:0; }
}
@media (max-width:640px){
  .ev--wide, .ev--mid, .ev-more, .ev-note{ grid-column:1 / -1; }
  /* let each tile size to its own content instead of a locked row */
  .ev-grid{ grid-auto-rows:auto; }
  .ev-grid .mcard{ height:auto; aspect-ratio:4/3; }
  .ev-more{ height:auto; min-height:0; gap:2.5rem; }
}

/* ============================================================
   OFFER
   ============================================================ */
.offer{ border-top:1px solid var(--hair); }
/* the offer sits in its own framed panel — a ticket, not a band */
.offer__panel{
  position:relative; overflow:hidden;
  background:var(--white); border:1px solid var(--hair);
  border-radius:var(--r-card);
  padding:clamp(2.75rem,6vw,5rem) clamp(1.5rem,4vw,3rem);
  text-align:center;
  box-shadow:0 30px 60px - 40px rgba(6,20,1,.35);
}
/* amber hairline across the top edge */
.offer__panel::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,
    transparent, var(--accent) 22%, var(--accent) 78%, transparent);
}
.offer__inner{ display:flex; flex-direction:column; align-items:center; }
.offer .display{ max-width:20ch; }
.offer .lede{ margin-inline:auto; text-align:center; max-width:52ch; }

/* joined input + button, matching the hero bar */
.offer__form{
  display:flex; margin-top:2.5rem; width:100%; max-width:580px;
  background:var(--paper); border:1px solid var(--hair);
  border-radius:var(--r-card); padding:7px;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.offer__form:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(185,134,47,.14);
}
.offer__form input{
  flex:1 1 auto; min-width:0; min-height:50px; padding:0 1.15rem;
  font-size:1rem; font-family:var(--sans);
  background:transparent; border:0; border-radius:0; color:var(--ink);
}
.offer__form input:focus{ outline:none; }
.offer__form input::placeholder{ color:var(--grey); }
.offer__form .btn{ flex:0 0 auto; border-radius:10px; }
.offer__fine{ margin-top:1.5rem; font-size:.85rem; color:var(--grey); }
@media (max-width:560px){
  .offer__form{ flex-direction:column; gap:7px; }
  .offer__form .btn{ width:100%; }
}

/* ============================================================
   FINAL CTA — bookends the hero
   ============================================================ */
.final{
  position:relative; min-height:82svh;
  display:flex; align-items:center;
  overflow:hidden; background:var(--ink);
}
.final__media{ position:absolute; inset:0; }
.final__media img{ width:100%; height:110%; object-fit:cover; filter:saturate(.98) contrast(1.03) brightness(.8); }
.final__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(6,22,1,.06) 0%, rgba(6,22,1,.52) 82%),
    linear-gradient(180deg, rgba(5,18,1,.58), rgba(6,22,1,.22) 42%, rgba(5,16,1,.72)),
    /* seats both columns: headline left, rail right */
    linear-gradient(90deg,
      rgba(6,22,1,.84) 0%, rgba(6,22,1,.52) 38%, rgba(6,22,1,.28) 60%,
      rgba(6,22,1,.58) 82%, rgba(6,22,1,.74) 100%);
}
.final__content{
  position:relative; z-index:2; width:100%;
  padding-block:clamp(4rem,9vh,6rem);
  align-items:end; row-gap:clamp(2.5rem,5vw,3.5rem);
  color:var(--white);
}
.final__lede{ grid-column:1 / span 7; }
.final__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,1rem + 3.3vw,3.9rem);
  line-height:1.05; letter-spacing:-.02em;
  color:var(--white); text-wrap:balance; margin-bottom:1.35rem;
}
.final__title .tone{ color:rgba(255,255,255,.6); }
.final__title em{ font-style:italic; font-weight:400; }
.final__sub{
  font-size:clamp(1.02rem,1rem + .35vw,1.2rem);
  line-height:1.55; color:rgba(255,255,255,.82);
  max-width:48ch; margin-bottom:2.15rem; text-wrap:pretty;
}
.final__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

/* closing rail — mirrors the hero's "what we certify" */
.final__rail{ grid-column:10 / span 3; }
.final__rail .rail__row{ justify-content:space-between; }
.rail__row--link{
  display:flex; align-items:center; gap:.75rem;
  color:var(--white); transition:color var(--dur) var(--ease);
}
.rail__row--link .arrowbox{ margin-left:auto; width:30px; height:30px; }
.rail__row--link:hover{ color:#e6b978; }
.rail__row--link:hover .arrowbox{ background:var(--white); color:var(--ink); border-color:var(--white); }

@media (max-width:980px){
  .final__lede{ grid-column:1 / -1; }
  .final__rail{ grid-column:1 / -1; max-width:22rem; }
}
@media (max-width:560px){
  .final__actions .btn{ width:100%; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--paper); border-top:1px solid var(--hair); padding-top:clamp(3.5rem,7vw,5rem); overflow:hidden; }

/* oversized closing wordmark — the master line, set as a monument */
.footer__mega{
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  line-height:.78; overflow:hidden;
}
.footer__mega span{
  display:block;
  font-family:var(--serif); font-weight:400; font-style:italic;
  /* sized to sit inside the container, bleeding only at the baseline */
  font-size:clamp(2.4rem, 10.6vw, 10.5rem);
  letter-spacing:-.03em; white-space:nowrap;
  color:var(--accent); opacity:.14;
  transform:translateY(.1em);
}
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem 1.5rem; }
.footer__brand .wordmark{ font-size:1.1rem; }
.footer__tag{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--ink-soft); margin-top:1rem; max-width:24ch; }
.footer__head{ font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin-bottom:1.1rem; }
.footer__col{ display:flex; flex-direction:column; gap:.7rem; }
.footer__col a{ font-size:.9rem; color:var(--ink-soft); width:fit-content; transition:opacity .2s ease; }
.footer__col a:hover{ opacity:.55; }
.footer__addr{ font-size:.9rem; color:var(--ink-soft); line-height:1.6; }
.footer__base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  margin-top:clamp(3rem,6vw,4.5rem); padding-block:2rem;
  border-top:1px solid var(--hair); font-size:.8rem; color:var(--grey);
}
.footer__legal a:hover{ color:var(--ink); }
@media (max-width:760px){ .footer__grid{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1 / -1; } }

/* ============================================================
   REVEAL (IntersectionObserver)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero__media img, .final__media img{ transform:none !important; }
}