/* ============================================================
   Centralux — "The Field Report"
   Design system. One stylesheet, six pages.
   Tokens → reset → layout → type → components → sections → responsive
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* ground */
  --ink:        #0b0d0f;
  --ink-2:      #101315;
  --ink-3:      #171b1f;
  --ink-4:      #1f242a;

  /* paper (inverted bands) */
  --bone:       #F2EEE6;
  --bone-2:     #E7E1D5;
  --bone-3:     #D9D2C3;

  /* marks */
  --gold:       #E3B23E;
  --gold-hi:    #F0C868;
  --gold-deep:  #B98F26;
  --gold-ink:   #6E5310;   /* gold-family text ON bone — AA safe */

  /* text */
  --on-ink:     #E4E8EB;
  --on-ink-mid: #A9B2BA;
  --on-ink-dim: #79838C;
  --on-bone:    #14171A;
  --on-bone-mid:#4E555C;
  --on-bone-dim:#6E767D;

  /* signal — used only to flag a real operational problem */
  --flag:       #C2604A;
  --flag-bone:  #9E4530;

  /* lines */
  --line:       rgba(255,255,255,.11);
  --line-2:     rgba(255,255,255,.18);
  --line-bone:  rgba(20,23,26,.14);
  --line-bone-2:rgba(20,23,26,.26);

  /* type */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* rhythm */
  --pad:      clamp(1.15rem, 5vw, 2.75rem);
  --band:     clamp(3.6rem, 9vw, 7.5rem);
  --maxw:     1180px;
  --maxw-txt: 68ch;

  --r:  3px;
  --r2: 5px;

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--on-ink);
  font-family:var(--sans);
  font-size:clamp(1.02rem,.98rem + .35vw,1.125rem);
  line-height:1.62;
  font-weight:400;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; }
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.08; letter-spacing:-.02em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
hr{ border:0; height:1px; background:var(--line); margin:0; }

/* ---------- 3. LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.wrap--tight{ max-width:920px; }
.band{ padding-block:var(--band); position:relative; }
.band--bone{ background:var(--bone); color:var(--on-bone); }
.band--ink2{ background:#12161a; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.band--tight{ padding-block:clamp(2.6rem,6vw,4.6rem); }
.stack > * + *{ margin-top:1.05rem; }
.stack-lg > * + *{ margin-top:1.9rem; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:#0b0d0f; padding:.85rem 1.2rem;
  font-family:var(--mono); font-size:.82rem; font-weight:600;
}
.skip:focus{ left:.5rem; top:.5rem; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }
.band--bone :focus-visible{ outline-color:var(--gold-ink); }

/* ---------- 4. TYPE ---------- */
.h1,.h2,.h3,.srow__moment{ text-wrap:balance; }
.brk{ display:none; }
.nb{ display:inline-block; }
.h1{ font-size:clamp(2.05rem,1.2rem + 5.1vw,4.05rem); font-weight:800; letter-spacing:-.032em; line-height:1.02; }
.h2{ font-size:clamp(1.6rem,1.15rem + 2.3vw,2.7rem); font-weight:700; letter-spacing:-.028em; line-height:1.08; }
.h3{ font-size:clamp(1.2rem,1.05rem + .85vw,1.55rem); font-weight:700; letter-spacing:-.018em; line-height:1.18; }
.h4{ font-size:clamp(1.02rem,.98rem + .3vw,1.14rem); font-weight:700; letter-spacing:-.01em; line-height:1.25; }

.lede{
  font-size:clamp(1.1rem,1.02rem + .55vw,1.35rem);
  line-height:1.55; color:var(--on-ink-mid); font-weight:400; max-width:var(--maxw-txt);
}
.band--bone .lede{ color:var(--on-bone-mid); }
.body{ max-width:var(--maxw-txt); color:var(--on-ink-mid); }
.band--bone .body{ color:var(--on-bone-mid); }
.tight{ max-width:60ch; }
.gold{ color:var(--gold); }
.band--bone .gold{ color:var(--gold-ink); }
strong,b{ font-weight:700; color:var(--on-ink); }
.band--bone strong,.band--bone b{ color:var(--on-bone); }

/* section index label: "01 / THE SPREAD" */
.eyebrow{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.735rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--on-ink-dim);
  margin-bottom:1.15rem;
}
.band--bone .eyebrow{ color:var(--on-bone-dim); }
.eyebrow .num{ color:var(--gold); font-weight:600; }
.band--bone .eyebrow .num{ color:var(--gold-ink); }
.eyebrow::after{ content:""; flex:1 1 0; min-width:0; height:1px; background:var(--line-2); }
.band--bone .eyebrow::after{ background:var(--line-bone-2); }

.mono{ font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; }
.tag{
  display:inline-block; font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; padding:.3rem .55rem;
  border:1px solid var(--line-2); border-radius:2px; color:var(--on-ink-mid);
}
.band--bone .tag{ border-color:var(--line-bone-2); color:var(--on-bone-mid); }

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:.85rem 1.55rem;
  font-weight:700; font-size:1rem; letter-spacing:-.01em; text-decoration:none;
  border-radius:var(--r2); border:1px solid transparent;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--gold{ background:var(--gold); color:#0b0d0f; border-color:var(--gold); }
.btn--gold:hover{ background:var(--gold-hi); border-color:var(--gold-hi); }
.btn--line{ background:transparent; color:var(--on-ink); border-color:var(--line-2); }
.btn--line:hover{ border-color:var(--gold); color:var(--gold); }
.band--bone .btn--line{ color:var(--on-bone); border-color:var(--line-bone-2); }
.band--bone .btn--line:hover{ border-color:var(--gold-ink); color:var(--gold-ink); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }
.btn--full{ width:100%; }

.arrow-link{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px;
  font-family:var(--mono); font-size:.79rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none; color:var(--gold);
  border-bottom:1px solid transparent; align-self:flex-start;
}
.arrow-link:hover{ border-bottom-color:currentColor; }
.band--bone .arrow-link{ color:var(--gold-ink); }
.arrow-link .chev{ transition:transform .2s var(--ease); }
.arrow-link:hover .chev{ transform:translateX(3px); }

/* ---------- 6. MARK + HEADER ---------- */
.mark{ display:block; width:1em; height:1em; color:var(--gold); flex:none; }
.mark svg{ display:block; width:100%; height:100%; }

.brand{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--on-ink); min-height:48px;
}
.brand .mark{ font-size:29px; }
.brand__word{
  font-weight:700; font-size:1.02rem; letter-spacing:.19em; text-transform:uppercase;
  white-space:nowrap; padding-left:.05em;
}

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,13,15,.9);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:70px;
}
.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a:not(.btn){
  display:inline-flex; align-items:center; min-height:46px; padding:0 .85rem;
  text-decoration:none; color:var(--on-ink-mid);
  font-size:.95rem; font-weight:500; border-radius:var(--r);
  transition:color .15s var(--ease), background .15s var(--ease);
}
.nav a:not(.btn):hover{ color:var(--on-ink); background:rgba(255,255,255,.045); }
.nav a:not(.btn)[aria-current="page"]{ color:var(--gold); }
.nav .btn{ min-height:46px; padding:.6rem 1.15rem; font-size:.92rem; margin-left:.5rem; }

.navtoggle{
  display:none; align-items:center; gap:.5rem;
  min-height:46px; padding:0 .9rem; background:transparent;
  border:1px solid var(--line-2); border-radius:var(--r);
  font-family:var(--mono); font-size:.74rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--on-ink); cursor:pointer;
}
.navtoggle .bars{ display:grid; gap:3px; }
.navtoggle .bars i{ display:block; width:15px; height:1.5px; background:currentColor; }
.mobilenav{ display:none; border-top:1px solid var(--line); background:var(--ink-2); }
.mobilenav.is-open{ display:block; }
.mobilenav{ padding-bottom:1.5rem; }
.mobilenav ul{ padding:.5rem 0 1.1rem; }
.mobilenav a:not(.btn){
  display:flex; align-items:center; min-height:54px; padding:0 var(--pad);
  text-decoration:none; color:var(--on-ink); font-size:1.05rem; font-weight:600;
  border-bottom:1px solid var(--line);
}
.mobilenav a:not(.btn)[aria-current="page"]{ color:var(--gold); }
.mobilenav .btn{ margin:1rem var(--pad) 0; width:calc(100% - var(--pad)*2); }

/* ---------- 7. HERO ---------- */
.hero{ padding-block:clamp(2.9rem,7.5vw,6rem) clamp(3.2rem,8vw,6.5rem); position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 78% at 12% 0%, rgba(227,178,62,.085), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.028), transparent 40%);
  pointer-events:none;
}
.hero .wrap{ position:relative; }
.hero__grid{ display:grid; gap:clamp(2.2rem,5vw,3.6rem); align-items:start; }
.hero__kicker{
  display:grid; justify-items:start; gap:.3rem;
  font-family:var(--mono); font-size:.735rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--on-ink-dim);
  margin-bottom:1.3rem;
}
.hero__kicker .k{ display:inline-flex; align-items:center; gap:.55rem; }
@media (min-width:620px){
  .hero__kicker{ display:flex; align-items:center; gap:.8rem; }
  .hero__kicker .k + .k::before{ content:"·"; margin-right:.8rem; color:var(--on-ink-dim); }
}
.hero__kicker .dot{ width:5px; height:5px; background:var(--gold); border-radius:50%; flex:none; }
.spread__lede{ margin-top:1.1rem; }
.grid--top{ margin-top:2.4rem; }
.btn-row--closer{ margin-top:1.9rem; }
.hero h1{ margin-bottom:1.35rem; }
.hero h1 .line2{ display:block; color:var(--gold); }
.hero__sub{ max-width:56ch; margin-bottom:2rem; }
.hero__note{
  margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.755rem; letter-spacing:.05em; line-height:1.7;
  color:var(--on-ink-dim); max-width:54ch;
}

/* the job-record diagram */
.record{
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r2); overflow:hidden;
}
.record__head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.9rem 1.15rem; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent);
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-mid);
}
.record__head .lamp{ color:var(--gold); }
.record ol{ padding:1.25rem 1.15rem 1.4rem; }
.record li{ position:relative; padding-left:2.15rem; padding-bottom:1.35rem; }
.record li:last-child{ padding-bottom:0; }
.record li::before{
  content:""; position:absolute; left:6px; top:1.35em; bottom:-.15rem;
  width:1px; background:var(--line-2);
}
.record li:last-child::before{ display:none; }
.record li::after{
  content:""; position:absolute; left:2px; top:.42em;
  width:9px; height:9px; border-radius:50%;
  background:var(--ink-2); border:1.5px solid var(--gold);
}
.record li.is-final::after{ background:var(--gold); }
.record .step{ display:block; font-weight:700; font-size:1rem; letter-spacing:-.012em; }
.record .meta{
  display:block; margin-top:.2rem; font-family:var(--mono);
  font-size:.735rem; letter-spacing:.03em; color:var(--on-ink-dim); line-height:1.55;
}
.record__foot{
  padding:.85rem 1.15rem; border-top:1px solid var(--line); background:rgba(255,255,255,.022);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--on-ink-dim);
}

/* ---------- 8. THE SPREAD (signature move) ---------- */
.spread{ margin-top:2.6rem; border-top:2px solid var(--on-bone); }
.spread__cols{
  display:none;
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
}
.srow{ border-bottom:1px solid var(--line-bone); padding-block:1.5rem; }
.srow__moment{
  font-weight:700; font-size:1.08rem; letter-spacing:-.015em; line-height:1.3;
  color:var(--on-bone); margin-bottom:1rem;
  display:flex; gap:.7rem; align-items:baseline;
}
.srow__moment .n{
  font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.08em;
  color:var(--on-bone-dim); flex:none; padding-top:.15em;
}
.srow__pair{ display:grid; gap:.85rem; }
.cell{ padding:.95rem 1.05rem; border-radius:var(--r); }
.cell__label{
  display:block; font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:.4rem;
}
.cell p{ font-size:.97rem; line-height:1.58; }
.cell--now{ background:var(--bone-2); border-left:2px solid var(--bone-3); }
.cell--now .cell__label{ color:var(--flag-bone); }
.cell--now p{ color:var(--on-bone-mid); }
.cell--sys{ background:var(--on-bone); border-left:2px solid var(--gold); }
.cell--sys .cell__label{ color:var(--gold); }
.cell--sys p{ color:#DCE0E4; }
.cell--sys strong{ color:#fff; }

.spread__note{
  margin-top:2.4rem; padding:1.15rem 1.25rem;
  border:1px solid var(--line-bone-2); border-left:3px solid var(--gold-deep);
  border-radius:var(--r); background:rgba(255,255,255,.5);
  font-size:.99rem; line-height:1.6; color:var(--on-bone-mid); max-width:none;
}

/* ---------- 9. CARDS / GRIDS ---------- */
.grid{ display:grid; gap:1.05rem; }
.grid--2{ grid-template-columns:1fr; }
.grid--3{ grid-template-columns:1fr; }
.grid--4{ grid-template-columns:1fr; }

.card{
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r2); padding:1.5rem 1.4rem;
  display:flex; flex-direction:column; gap:.75rem;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.card:hover{ border-color:var(--line-2); background:var(--ink-3); }
.card__n{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; color:var(--gold);
}
.card p{ color:var(--on-ink-mid); font-size:.99rem; }
.card ul.ticks{ margin-top:.15rem; }
.card .arrow-link{ margin-top:auto; padding-top:.4rem; }

.band--bone .card{ background:rgba(255,255,255,.58); border-color:var(--line-bone); }
.band--bone .card:hover{ background:#fff; border-color:var(--line-bone-2); }
.band--bone .card p{ color:var(--on-bone-mid); }
.band--bone .card__n{ color:var(--gold-ink); }

/* tick list */
.ticks li{
  position:relative; padding-left:1.35rem; margin-top:.55rem;
  font-size:.97rem; line-height:1.55; color:var(--on-ink-mid);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border:1px solid var(--gold); border-radius:1px;
  transform:rotate(45deg);
}
.band--bone .ticks li{ color:var(--on-bone-mid); }
.band--bone .ticks li::before{ border-color:var(--gold-ink); }

/* numbered phase rail */
.phases{ counter-reset:ph; display:grid; gap:0; margin-top:1.8rem; border-top:1px solid var(--line); }
.band--bone .phases{ border-color:var(--line-bone); }
.phase{
  counter-increment:ph; display:grid; gap:.35rem 1.35rem;
  padding-block:1.4rem; border-bottom:1px solid var(--line);
}
.band--bone .phase{ border-color:var(--line-bone); }
.phases .phase:last-child{ border-bottom:0; padding-bottom:0; }
.phase__n{
  font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.14em;
  color:var(--gold); text-transform:uppercase;
}
.band--bone .phase__n{ color:var(--gold-ink); }
.phase h3{ margin-bottom:.35rem; }
.phase p{ color:var(--on-ink-mid); }
.band--bone .phase p{ color:var(--on-bone-mid); }

/* definition rows (contact / about facts) */
.facts{ border-top:1px solid var(--line); margin-top:1.7rem; }
.band--bone .facts{ border-color:var(--line-bone); }
.fact{
  display:grid; gap:.3rem 1.5rem; padding-block:1.05rem;
  border-bottom:1px solid var(--line);
}
.band--bone .fact{ border-color:var(--line-bone); }
.facts .fact:last-child{ border-bottom:0; }
.fact dt{
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--on-ink-dim);
}
.band--bone .fact dt{ color:var(--on-bone-dim); }
.fact dd{ margin:0; font-size:1.02rem; line-height:1.55; overflow-wrap:anywhere; }
.fact dd a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(227,178,62,.4); }
.fact dd a:hover{ border-bottom-color:var(--gold); }
.band--bone .fact dd a{ color:var(--on-bone); border-bottom:1px solid var(--gold-deep); }
.band--bone .fact dd a:hover{ color:var(--gold-ink); }

/* callout */
.callout{
  border:1px solid var(--line-2); border-left:3px solid var(--gold);
  border-radius:var(--r); padding:1.3rem 1.35rem; background:var(--ink-2);
}
.band--bone .callout{ background:rgba(255,255,255,.55); border-color:var(--line-bone-2); border-left-color:var(--gold-deep); }

/* ---------- 10. LEGAL / LONG-FORM ---------- */
.doc{ max-width:74ch; }
.doc h2{ margin-top:2.9rem; margin-bottom:.75rem; font-size:clamp(1.24rem,1.1rem + .8vw,1.6rem); }
.doc h2:first-of-type{ margin-top:2rem; }
.doc h3{ margin-top:1.7rem; margin-bottom:.5rem; font-size:1.06rem; }
.doc p{ color:var(--on-ink-mid); margin-top:.85rem; }
.doc ul{ margin-top:.85rem; }
.doc ul li{
  position:relative; padding-left:1.25rem; margin-top:.5rem;
  color:var(--on-ink-mid); line-height:1.6;
}
.doc ul li::before{
  content:""; position:absolute; left:.1rem; top:.72em;
  width:5px; height:5px; background:var(--gold); border-radius:1px;
}
.doc a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(227,178,62,.4); overflow-wrap:anywhere; }
.doc a:hover{ border-bottom-color:var(--gold); }
.doc .updated{
  font-family:var(--mono); font-size:.715rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--on-ink-dim);
  padding-bottom:1.5rem; border-bottom:1px solid var(--line);
}
.toc{
  margin-top:1.9rem; padding:1.15rem 1.25rem; background:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r2);
}
.toc p{
  font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-ink-dim); margin:0 0 .6rem;
}
.toc ol{ display:grid; gap:.1rem; counter-reset:t; }
.toc a{
  display:block; padding:.32rem 0; font-size:.94rem; color:var(--on-ink-mid);
  text-decoration:none; border:0; line-height:1.45;
}
.toc a:hover{ color:var(--gold); }

/* ---------- 11. CLOSING CTA ---------- */
.closer{ border-top:1px solid var(--line); background:var(--ink-2); }
.closer__inner{ display:grid; gap:1.9rem; align-items:center; }
.closer h2{ margin-bottom:.9rem; }
.closer .lede{ max-width:52ch; }
.closer__aside{
  border:1px solid var(--line); border-radius:var(--r2); padding:1.3rem 1.35rem;
  background:var(--ink);
}
.closer__aside .tag{ margin-bottom:.85rem; }
.closer__aside p{ color:var(--on-ink-mid); font-size:.97rem; }

/* ---------- 12. FOOTER ---------- */
.site-footer{ background:var(--ink); border-top:1px solid var(--line); padding-block:clamp(2.6rem,6vw,4rem) 2rem; }
.foot__grid{ display:grid; gap:2.2rem; }
.foot__brand .brand{ margin-bottom:.9rem; }
.foot__blurb{ color:var(--on-ink-dim); font-size:.95rem; max-width:38ch; line-height:1.6; }
.site-footer h4{
  font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-ink-dim); margin-bottom:.9rem;
}
.site-footer .foot__grid ul li{ margin-bottom:.15rem; }
.site-footer ul a{
  display:inline-block; padding:.4rem 0; color:var(--on-ink-mid);
  text-decoration:none; font-size:.96rem; overflow-wrap:anywhere;
}
.site-footer ul a:hover{ color:var(--gold); }
.site-footer .brand{ display:inline-flex; }
.site-footer address{ font-style:normal; color:var(--on-ink-mid); font-size:.96rem; line-height:1.7; }
.foot__legal{
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:baseline;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--on-ink-dim);
}
.foot__legal .entity{ color:var(--on-ink-mid); }
.foot__legal ul{ display:flex; flex-wrap:wrap; gap:.4rem 1.15rem; }
.foot__legal a{ font-size:.72rem; font-family:var(--mono); letter-spacing:.06em; padding:.3rem 0; }

/* ---------- 12b. PAGE HEADS + JUMP LIST ---------- */
[id]{ scroll-margin-top:92px; }

.pagehead{ position:relative; overflow:hidden; }
.pagehead::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(110% 80% at 8% 0%, rgba(227,178,62,.075), transparent 60%);
  pointer-events:none;
}
.pagehead .wrap{ position:relative; }
.pagehead.band--tight{ padding-bottom:clamp(1.7rem,3.5vw,2.6rem); }

.jumplist{
  display:grid; gap:.4rem; margin-top:2.2rem;
  border-top:1px solid var(--line); padding-top:.5rem;
}
.jumplist a{
  display:flex; align-items:center; gap:.85rem; min-height:52px;
  padding:.35rem 0; text-decoration:none; color:var(--on-ink-mid);
  border-bottom:1px solid var(--line); font-weight:600; font-size:1.02rem;
  letter-spacing:-.012em;
}
.jumplist a:hover{ color:var(--gold); }
.jumplist .jn{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.13em; color:var(--gold); flex:none;
}

/* stacked split spacing on small screens */
.split > * + *{ margin-top:clamp(1.9rem,5vw,2.7rem); }

/* ---------- 13. MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- 14. RESPONSIVE ---------- */
@media (max-width:859px){
  .nav{ display:none; }
  .navtoggle{ display:inline-flex; }
}
@media (min-width:560px){
  .grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fact{ grid-template-columns:minmax(0,10.5rem) minmax(0,1fr); align-items:baseline; }
  .phase{ grid-template-columns:minmax(0,7rem) minmax(0,1fr); }
}
@media (min-width:820px){
  .srow{ display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:0 2rem; padding-block:1.75rem; }
  .srow__moment{ margin-bottom:0; padding-right:1rem; }
  .srow__pair{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
  .spread__cols{
    display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:0 2rem;
    padding-block:.85rem;
  }
  .spread__cols .pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
  .spread__cols .a{ color:var(--flag-bone); }
  .spread__cols .b{ color:var(--gold-ink); }
  .spread__cols .lbl{ color:var(--on-bone-dim); }
  .cell__label{ display:none; }
}
@media (min-width:900px){
  .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hero__grid{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(2.5rem,4vw,4rem); align-items:center; }
  .closer__inner{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:3rem; }
  .foot__grid{ grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:2.5rem; }
  .split{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,4vw,3.5rem); align-items:start; }
  .split--even{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split > * + *{ margin-top:0; }
  .jumplist{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem; }
}
@media (min-width:1040px){
  .grid--2{ gap:1.4rem; }
  .grid--3,.grid--4{ gap:1.2rem; }
}

/* ---------- 15. PASS-2 REFINEMENTS ---------- */
@media (min-width:560px){
  .toc ol{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.6rem; }
}
@media (min-width:760px){
  .brk{ display:inline; }
}
@media (min-width:900px){
  .split--sticky > :first-child{ position:sticky; top:104px; }
}

/* ---------- 16. SMALL-SCREEN ERGONOMICS ---------- */
@media (max-width:519px){
  .btn-row .btn{ width:100%; }
}

/* ---- mark-as-C lockup (2026-08-31) -------------------------------------
   The locked mark sits INSIDE the wordmark span AS the letter C, so it inherits font-size at
   every breakpoint and is positioned like a glyph. Only the viewBox is cropped — the mark's
   geometry is untouched.

   SIZE + ORIENTATION are set against the REAL Outfit 500 "C" it replaces. These metrics are read
   from the WEBFONT FILE (fontTools: OS/2 sCapHeight + glyf bounds), per 1000em: C ink 720 tall
   (yMin -10, yMax 710), advance 683; cap height 700. ⚠ Do NOT source these from a canvas
   measureText. The figures this block carried until 2026-09-01 (cap 656.3, C ink 687.5, descends
   15.6 — note they are all exact binary fractions, the tell) were FALLBACK-font values that
   survived the document.fonts.ready fix, and they put the centring offset .0218em out.
     height .8594em = 1.194x the C's ink height. Matching 1:1 reads too SMALL: the mark's thick
       ring and tight counter make it denser than an open letterform, so it needs more area for
       equal presence. Size chosen by eye at true header size and operator-approved; only the
       "1.25x" LABEL was wrong (it was arithmetic off the bad cap height).
     top .0797em centres it on the CAP BAND = mark_h/2 - cap/2 = .8594/2 - .700/2. The real C is
       itself cap-centred (overshoot -10/+10 about a 700 band), so cap-centred IS C-centred.
       Verified by pixel-scanning a 400px render: 32px above cap, 32px below baseline, 0.00px
       residual. position:relative is visual only, so no layout shift.
     viewBox 575.48 wide, not 707.56 — the terminals are a VERTICAL cut at x=799.74, so a square
       box carries ~19% dead space on the right.

   SPACING. Chrome does not apply letter-spacing after an atomic inline, so the mark sat one
   whole tracking unit too close to the E (measured .125em against an even .370em elsewhere).
   A zero-width space does not help. margin-right = tracking + .0169em makes the gap dead even;
   the offset is tracking-independent, so tracking rides in --wm-ls and the media queries update
   that property instead of the margin.

   The wordmark is Outfit 500 gold in EVERY candidate — brand-level, so it should not vary per
   site design. Outfit is geometric (circular bowls, uniform stroke), which matches a compass-
   drawn mark; 500 matches the mark's stroke weight. */
.cmark{display:inline-block;width:auto;height:.8594em;line-height:0;
  vertical-align:baseline;position:relative;top:.0797em;
  margin-left:.0313em;margin-right:calc(var(--wm-ls,.2em) + .0169em);color:var(--gold)}
.cmark svg{display:block;height:100%;width:auto}
.sr-c{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.brand__word{font-family:Outfit,"Helvetica Neue",Arial,sans-serif;font-weight:500;color:var(--gold);--wm-ls:.19em}

/* ---------- 17. LEAD FORM ---------- */
/* Lives in contact.html §03, inside .band--bone, so every colour here is the
   bone-context pair. Gold-family text on bone uses --gold-ink (AA safe) and never
   --gold, per the token comment.

   Intrinsically responsive: the name/email row is an auto-fit grid, so it collapses
   to stacked at narrow widths with no media query to keep in sync.

   iOS: inputs must be >= 16px or Safari zooms the viewport on focus and the visitor
   lands mid-form at 1.4x with no way back. That is what font-size:1rem is doing —
   do not shrink it for density. */
.leadform{ margin-top:1.9rem; }
.leadform > * + *{ margin-top:1.15rem; }

.leadform__row{
  display:grid; gap:1.15rem;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
}

.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{
  font-family:var(--mono); font-size:.735rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--on-bone-dim);
}
.field__opt{ font-weight:500; opacity:.75; letter-spacing:.1em; }

.field input,
.field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--on-bone);
  background:var(--bone-2); border:1px solid var(--line-bone);
  border-radius:var(--r2); padding:.8rem .9rem;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.field input{ min-height:52px; }
.field textarea{ resize:vertical; min-height:9.5rem; line-height:1.5; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--on-bone-dim); }
.field input:hover,
.field textarea:hover{ border-color:var(--line-bone-2); }
.field input:focus,
.field textarea:focus{
  outline:none; background:var(--bone);
  border-color:var(--gold-ink); box-shadow:0 0 0 3px rgba(110,83,16,.14);
}

.field__hint{
  font-size:.86rem; line-height:1.45; color:var(--on-bone-dim); margin:0;
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden inputs but
   fill positioned ones, and this keeps it out of the a11y tree via aria-hidden on
   the wrapper plus tabindex="-1" on the input itself. */
.leadform__hp{
  position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.leadform__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1.15rem;
}
.leadform__alt{ font-size:.9rem; color:var(--on-bone-dim); }
/* Every other interactive element on this page clears 44px; this fallback link was a
   bare inline <a> at .9rem. It sits beside the primary Send button on a phone, so give
   it the same minimum tap area rather than making it the one hard target in the form. */
.leadform__alt a{
  color:var(--gold-ink); display:inline-block;
  min-height:44px; line-height:44px; padding:0 .1rem;
}

.leadform button[disabled]{ opacity:.55; cursor:progress; }

/* Status line. Empty by default, so it must not reserve space or the actions row
   floats. role="status" + aria-live="polite" on the element itself announces it. */
.leadform__status{
  margin:0; font-size:.94rem; line-height:1.45; color:var(--on-bone-mid);
}
.leadform__status:empty{ display:none; }
.leadform__status.is-err{ color:var(--flag-bone); font-weight:600; }

.leadform__done{
  margin:0; font-size:1.02rem; line-height:1.55; color:var(--on-bone-mid);
  border-left:2px solid var(--gold-ink); padding:.15rem 0 .15rem 1.1rem;
}
.leadform.is-done{ margin-top:1.9rem; }
/* The success handler hides the inputs with el.hidden = true. That is NOT sufficient on
   its own here: .field sets display:flex and .leadform__row sets display:grid, and an
   AUTHOR display rule beats the UA stylesheet's [hidden]{display:none}. Without this
   override the fields stay on screen after a successful send, the visitor sees their own
   data still sitting in the form under a "Got it" message, and can resubmit.
   Caught by a rendered screenshot — a property check (el.hidden === true) reports success
   while the element is still painted, so verify this one visually if it ever changes. */
.leadform [hidden]{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  .field input, .field textarea{ transition:none; }
}

/* ---------- 18. QUALITY SWEEP (2026-09-02) ----------
   Fresh-eyes design review, applied as overrides here (later in the cascade)
   rather than by editing the earlier rules in place, so the pass reads as one diff. */

/* Legal pages read as a DOCUMENT: body on paper (bone), dark header + footer.
   .doc / .toc were written for the ink ground; these are their bone variants. */
.band--bone .doc p, .band--bone .doc ul li{ color:var(--on-bone-mid); }
.band--bone .doc ul li::before{ background:var(--gold-ink); }
.band--bone .doc a{ color:var(--gold-ink); border-bottom-color:color-mix(in srgb, var(--gold-ink) 45%, transparent); }
.band--bone .doc a:hover{ border-bottom-color:var(--gold-ink); }
.band--bone .doc .updated{ color:var(--on-bone-dim); border-bottom-color:var(--line-bone); }
.band--bone .toc{ background:rgba(255,255,255,.58); border-color:var(--line-bone); }
.band--bone .toc p{ color:var(--on-bone-dim); }
.band--bone .toc a{ color:var(--on-bone-mid); }
.band--bone .toc a:hover{ color:var(--gold-ink); }

/* Measure: legal prose ran a WIDER line (74ch) than marketing prose (68ch). One measure. */
.doc{ max-width:var(--maxw-txt); }

/* Tap targets: the two link lists that lacked the 44px floor every other control has. */
.toc a{ display:flex; align-items:center; min-height:44px; padding-block:.2rem; }
.foot__grid ul a{ display:flex; align-items:center; min-height:44px; padding-block:.2rem; }
.site-footer .foot__grid ul li{ margin-bottom:0; }

/* Card titles: a real size step above the card body, not weight + colour alone. */
.h4{ font-size:clamp(1.08rem,1rem + .4vw,1.22rem); }

/* Hero record meta: the densest text in the hero was also the smallest. */
.record .meta{ font-size:.8rem; }

/* Footer under 900px: link lists in two columns instead of one long stack;
   the brand block and the office address span the row. */
@media (max-width:899px){
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.5rem; row-gap:2rem; }
  .foot__grid > :first-child, .foot__grid > :last-child{ grid-column:1 / -1; }
}

/* Contact form: the submit was the one control on the site that stayed narrow on a
   phone. Under 520px it goes full-width like every other button, with the
   "or email" fallback stacked beneath it. */
@media (max-width:519px){
  .leadform__actions{ display:grid; gap:.85rem; }
  .leadform__actions .btn{ width:100%; }
}

/* An email address inside running prose is a plain underlined link, in the same
   colour as the sentence, not a caps monospace CTA that breaks the line rhythm. */
.body a.inline-link{
  color:inherit; text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:var(--gold-ink); text-underline-offset:.18em;
}
.body a.inline-link:hover{ color:var(--gold-ink); }

/* ---------- 19. HERO EMAIL-FIRST FORM (2026-09-02) ----------
   Operator ask: a low-friction "leave your email and I'll reach out" path in the hero.
   Email is the only required field; the first tap into the form reveals two optional
   fields (name, business). Dark-ground twin of the contact form's bone-ground .field
   rules -- same selector weight, later in the cascade, so these win inside .heroform.

   Layout is a two-column grid in plain DOM order: email, Send, then the optional
   fields. Send belongs to the email (the only required field), so it sits beside it on
   wide screens and directly under it on phones; the optional fields drop below either
   way. No `order` anywhere: visual order == DOM order == Tab order on every width
   (WCAG 2.4.3 -- the UX review caught an earlier `order`-based mismatch). */
.heroform{
  margin-top:1.75rem; max-width:34rem;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap:.7rem; row-gap:.85rem; align-items:start;
}
.heroform > *{ grid-column:1 / -1; margin:0; }
.heroform__email{ grid-column:1; }
.heroform__btn{ grid-column:2; }
.heroform__lead{ font-size:1.02rem; line-height:1.5; color:var(--on-ink-mid); }
.heroform__srlabel{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.heroform input{
  width:100%; font:inherit; font-size:1rem; color:var(--on-ink);
  background:rgba(255,255,255,.04); border:1px solid var(--line-2);
  border-radius:var(--r2); padding:.8rem .95rem; min-height:52px;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.heroform input::placeholder{ color:var(--on-ink-dim); }
.heroform input:hover{ border-color:rgba(255,255,255,.3); }
.heroform input:focus{
  outline:none; background:rgba(255,255,255,.06);
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(227,178,62,.18);
}
.heroform .field label{ color:var(--on-ink-dim); }
/* Collapsed -> open: the grid-row trick animates height without measuring it. The block
   starts with the hidden ATTRIBUTE (so its inputs are not in the tab order while
   collapsed); lead.js removes it, waits a frame, then adds .is-open. */
.heroform__more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease); }
.heroform__more > div{ min-height:0; overflow:hidden; }
.heroform.is-open .heroform__more{ grid-template-rows:1fr; }
.heroform__fields{
  display:grid; gap:.85rem; padding-top:.15rem;
  grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr));
}
.heroform__fine{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.02em;
  line-height:1.5; color:var(--on-ink-dim);
}
.heroform .leadform__status{ color:var(--on-ink-mid); }
.heroform .leadform__status.is-err{ color:var(--flag); }
.heroform .leadform__status.is-done{
  font-size:1.02rem; border-left:2px solid var(--gold); padding:.15rem 0 .15rem 1rem;
}
.heroform button[disabled]{ opacity:.55; cursor:progress; }
/* The contact form reaches the same is-done state through the shared lead.js but had no
   rule for it (its success read as plain muted text). Bone-ground twin of the hero rule
   above; the .heroform-scoped rule still wins inside the hero by specificity. */
.leadform__status.is-done{
  font-size:1.02rem; border-left:2px solid var(--gold-ink); padding:.15rem 0 .15rem 1rem;
}
/* Same reason as .leadform [hidden]: .field / .heroform__more set display, and an author
   display rule beats the UA stylesheet's [hidden]. */
.heroform [hidden]{ display:none !important; }
@media (max-width:519px){
  .heroform{ grid-template-columns:minmax(0,1fr); }
  .heroform__email, .heroform__btn{ grid-column:1; }
  .heroform__btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .heroform__more, .heroform input{ transition:none; }
}