/* Option B Bold — production stylesheet.
   Rebuilt from the design canvas as classes rather than inline styles, so the
   markup stays semantic and readable to a crawler and an assistant. */

:root{
  --ink:#141312; --paper:#fff; --yellow:#ffd400;
  --grey:#6a6a6a; --line:#e6e6e6; --wash:#f2f1f0; --soft:#d9d7d4;
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}  /* the sticky header, so an in-page anchor does not land underneath it */
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Jost,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{max-width:var(--max);margin:0 auto}
section{padding:clamp(40px,7vw,96px) clamp(20px,4vw,40px)}
section.dark{background:var(--ink);color:#fff}
section.wash{background:var(--wash)}
section.hero{padding-top:clamp(40px,8vw,110px);padding-bottom:clamp(34px,6vw,80px)}

.eyebrow{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.eyebrow.on-light{color:var(--grey)}

h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em;text-transform:uppercase;line-height:1}
h1{font-size:clamp(32px,7.2vw,86px);line-height:.98;display:flex;flex-direction:column;gap:.06em}
h2{font-size:clamp(24px,3.6vw,42px);line-height:1.04}
h3{font-size:clamp(16px,1.6vw,19px);letter-spacing:.02em}
.mark{align-self:flex-start;background:var(--yellow);color:var(--ink);border-radius:8px;padding:0 .12em}
.dim{color:var(--grey)}

p{margin:0}
.stack{display:flex;flex-direction:column;gap:clamp(26px,4vw,48px)}
.stack-sm{display:flex;flex-direction:column;gap:14px}
.lede{font-size:clamp(18px,2.2vw,24px);line-height:1.4}
.muted{color:var(--grey)}
.dark .muted{color:rgba(255,255,255,.62)}
.small{font-size:14px;color:var(--grey)}
.dark .small{color:rgba(255,255,255,.55)}

.rule{border-top:1px solid var(--line);padding-top:clamp(24px,3vw,40px)}
.dark .rule{border-color:rgba(255,255,255,.2)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:60px;padding:0 36px;border:0;border-radius:999px;cursor:pointer;
  background:var(--yellow);color:var(--ink);
  font:inherit;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;box-shadow:0 14px 28px -14px rgba(20,19,18,.5);
}
/* The canvas sets a 14px gap between the words and the arrow. Tracked
   uppercase already eats the trailing space, so without this they touch. */
.btn span{margin-left:.55em}
.btn:hover{filter:brightness(.94)}
.btn.ghost{background:transparent;color:inherit;box-shadow:none;border:1px solid currentColor}

.split{display:flex;flex-wrap:wrap;gap:32px 48px;align-items:flex-end;justify-content:space-between}
.split>.col{flex:1 1 320px;max-width:620px}

.cards{display:grid;grid-template-columns:1fr;gap:14px;margin-top:clamp(20px,3vw,32px)}
@media(min-width:760px){.cards{grid-template-columns:1fr 1fr}}
.card{
  display:block;padding:26px 24px;border:1px solid var(--line);border-radius:14px;
  text-decoration:none;background:var(--paper);
}
.card:hover{border-color:var(--ink)}
.card h3{margin-bottom:8px}
.card p{color:var(--grey);font-size:15px}
.card .price{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;background:var(--yellow);border-radius:999px;padding:5px 14px}

.finds{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);margin-top:clamp(20px,3vw,32px)}
.find{display:flex;gap:18px;align-items:flex-start}
.find .no{flex:0 0 auto;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--yellow);padding-top:4px}
.dark .find{border-top:1px solid rgba(255,255,255,.14);padding-top:18px}

.list{margin:14px 0 0;padding-left:20px}
.list li{margin:6px 0}

.steps{counter-reset:s;display:flex;flex-direction:column;gap:18px;margin-top:24px}
.step{display:flex;gap:16px}
.step .n{flex:0 0 34px;height:34px;border-radius:999px;background:var(--yellow);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}

.slot{margin-top:clamp(20px,3vw,32px);border:1px dashed var(--soft);border-radius:12px;
  padding:34px 20px;text-align:center;color:var(--grey);font-size:14px;background:var(--wash)}

.pricebar{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;
  margin-top:clamp(24px,3vw,36px);padding-top:24px;border-top:1px solid var(--line)}
.dark .pricebar{border-color:rgba(255,255,255,.2)}
.pricebar .amount{font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.01em}

footer{background:var(--ink);color:#fff;border-top:1px solid rgba(255,255,255,.2);
  padding:clamp(28px,4vw,44px) clamp(20px,4vw,40px) 104px}
footer a{color:var(--yellow)}
footer .foot-row{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:baseline;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase}
footer .foot-id{color:rgba(255,255,255,.62)}
/* No margin-left:auto: the canvas lets the nav flow after the identity on one
   baseline row rather than pushing it to the right edge, and the 104px bottom
   padding is the room the sticky call to action needs so it never covers the
   legal notice. */
footer .foot-nav{display:flex;flex-wrap:wrap;gap:0 20px}
footer .foot-nav a{color:#fff;text-decoration:none;display:inline-flex;align-items:center}
footer .foot-nav a:hover{color:var(--yellow)}
footer .foot-nav a.mail{color:var(--yellow)}

/* Legal notice, on every page. Well down the contrast range so it reads as a
   footnote rather than as another line of the pitch. Centred at the owner's
   request; the canvas has it flush left. */
footer .disclaimer{max-width:820px;margin:0 auto;padding-top:clamp(18px,3vw,26px);
  font-size:12px;line-height:1.55;color:rgba(255,255,255,.62);text-align:center}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--yellow);color:var(--ink);padding:10px 16px;border-radius:6px;z-index:9}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
@media(prefers-reduced-motion:reduce){
  .rise,*{animation:none!important;transition:none!important}
}


/* ═══════════════════════════════════════════════════════════════════════════
   The set-pieces from the design canvas.

   These are the parts that make the page the design rather than a page in the
   right colours: the ticker, the tile grid, the mock cards, the sticky call to
   action. They were missing from the first build.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The ticker ──────────────────────────────────────────────────────────── */
.ticker{
  background:var(--yellow);color:var(--ink);overflow:hidden;white-space:nowrap;
  padding:13px 0;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);
}
.ticker .run{display:inline-flex;gap:40px;padding-right:40px;animation:tick 38s linear infinite}
.ticker .run span{flex:0 0 auto}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── The shelf figure and its tiles ──────────────────────────────────────── */
.shelf{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px)}
.shelf .fig{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:18px}
.shelf .big{
  font-size:clamp(56px,13vw,150px);line-height:1;font-weight:700;
  letter-spacing:-.02em;padding:2px 0;font-variant-numeric:tabular-nums;
}
.shelf .said{font-size:clamp(20px,3vw,30px);line-height:1.25;max-width:420px}
.shelf .grid-side{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(22px,1fr));gap:4px}
.tiles i{
  aspect-ratio:1;border-radius:5px;background:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(20,19,18,.12);
  animation:tileIn .5s ease both;
}
.tiles i.gone{
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  background-image:linear-gradient(to top right,transparent calc(50% - 1px),
    var(--yellow) calc(50% - 1px),var(--yellow) calc(50% + 1px),transparent calc(50% + 1px));
}
@keyframes tileIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

.key{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.key span{display:flex;align-items:center;gap:8px}
.key i{width:16px;height:16px;border-radius:5px;background:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(20,19,18,.12);flex:0 0 auto}
.key .off{color:var(--grey)}
.key .off i{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  background-image:linear-gradient(to top right,transparent calc(50% - 1px),
    var(--yellow) calc(50% - 1px),var(--yellow) calc(50% + 1px),transparent calc(50% + 1px))}

/* ── The big number that heads a service page ────────────────────────────── */
.headline-fig{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 32px;
  border-top:1px solid rgba(255,255,255,.2);padding-top:clamp(24px,3vw,40px)}
.headline-fig .n{font-size:clamp(48px,9vw,96px);line-height:1;font-weight:700;letter-spacing:-.02em}
.headline-fig .what{padding-bottom:8px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yellow);max-width:260px}

/* ── Count cards ─────────────────────────────────────────────────────────── */
.counts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.counts .c{background:var(--paper);border-radius:18px;padding:26px 28px 30px;
  display:flex;flex-direction:column;gap:10px}
.counts .c.on{background:var(--ink);color:#fff}
.counts .c .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.counts .c.on .k{color:var(--yellow)}
.counts .c .v{font-size:clamp(30px,4vw,44px);line-height:.95;font-weight:700}
.counts .c p{font-size:15px;line-height:1.55;color:var(--grey)}
.counts .c.on p{color:rgba(255,255,255,.62)}

/* ── A findings list, worst first ────────────────────────────────────────── */
.findings .row{border-bottom:1px solid var(--line);padding:20px 0;
  display:flex;flex-wrap:wrap;gap:12px 20px;align-items:baseline}
.findings .row .n{flex:0 0 auto;font-size:clamp(26px,4vw,40px);line-height:1;
  font-weight:700;color:var(--yellow)}
.findings .row.minor .n{color:var(--grey)}
.findings .row .txt{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px}
.findings .row .txt b{font-size:clamp(17px,2.2vw,22px);line-height:1.25;
  text-transform:uppercase;font-weight:400}
.findings .row .txt span{font-size:15px;line-height:1.55;color:var(--grey)}
.findings .tag{flex:0 0 auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:var(--yellow);border-radius:999px;padding:6px 10px;white-space:nowrap}
.findings .tag.quiet{background:none;border:1px solid var(--line);color:var(--grey)}

/* ── Before / after ──────────────────────────────────────────────────────── */
.ba{display:flex;flex-wrap:wrap;gap:14px}
.ba .side{flex:1 1 260px;min-width:0;background:var(--wash);border-radius:20px;
  padding:24px;display:flex;flex-direction:column;gap:16px}
.ba .side.after{background:var(--ink);color:#fff}
.ba .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.ba .side.after .k{color:var(--yellow)}
.ba .shot{width:100%;aspect-ratio:4/5;background:var(--line);border-radius:14px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px;gap:10px}
.ba .side.after .shot{background:#241f1a}
.ba .shot .bar{height:10px;background:var(--soft)}
.ba .side.after .shot .bar{background:#3a342c}
.ba .shot .cta{min-height:44px;background:var(--ink);color:#fff;border-radius:999px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center}
.ba .side.after .shot .cta{background:var(--yellow);color:var(--ink)}
.ba .side p.li{border-bottom:1px solid var(--soft);padding:12px 0;font-size:15px;line-height:1.5}
.ba .side.after p.li{border-bottom-color:rgba(255,255,255,.2)}
.ba .side p.li:last-child{border-bottom:0}

/* ── The pack-builder mock ───────────────────────────────────────────────── */
.mock{flex:0 1 340px;min-width:0;background:var(--paper);border-radius:20px;
  box-shadow:0 24px 50px -34px rgba(20,19,18,.5);padding:24px;
  display:flex;flex-direction:column;gap:18px}
.mock .head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--ink);padding-bottom:12px}
.mock .head p{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.mock .head .of{font-size:13px;letter-spacing:.06em}
.mock .sizes{display:flex;gap:8px}
.mock .sizes span{flex:1;min-height:48px;border:1px solid var(--line);border-radius:999px;
  font-size:14px;display:flex;align-items:center;justify-content:center}
.mock .sizes span.on{background:var(--yellow);border-color:var(--yellow)}
.mock .style{background:var(--wash);border-radius:14px;padding:16px;
  display:flex;flex-direction:column;gap:14px}
.mock .style .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mock .style .top p{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.mock .style .top span{font-size:13px;color:var(--grey)}
.mock .sw{display:flex;gap:8px}
.mock .sw i{width:48px;height:48px;padding:3px;border:1px solid var(--line);
  border-radius:50%;background:var(--paper);display:flex}
.mock .sw i.on{border:2px solid var(--ink)}
.mock .sw i b{width:100%;height:100%;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(20,19,18,.12)}
.mock .tip{font-size:13px;line-height:1.5;color:var(--grey)}
.mock .total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:1px solid var(--ink);padding-top:14px}
.mock .total p{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.mock .total .amt{font-size:22px;letter-spacing:0;font-weight:700}
.mock .add{width:100%;min-height:56px;background:var(--ink);color:#fff;border-radius:999px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center}

/* ── The test run ────────────────────────────────────────────────────────── */
.runs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.runs p{background:#241f1a;border-radius:14px;padding:18px 20px;font-size:16px;line-height:1.5}
.runs p .ok{color:var(--yellow)}
.pill{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--yellow);color:var(--ink);border-radius:999px;padding:6px 12px}

/* ── The monthly note ────────────────────────────────────────────────────── */
.note{flex:1 1 320px;min-width:0;background:var(--paper);border-radius:20px;
  box-shadow:0 24px 50px -34px rgba(20,19,18,.5);padding:26px;
  display:flex;flex-direction:column;gap:16px}
.note .head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px 20px;border-bottom:1px solid var(--ink);padding-bottom:14px}
.note .head p{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.note .head .when{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.note .line{border-bottom:1px solid var(--line);padding:14px 0;display:flex;gap:16px}
.note .line .k{flex:0 0 82px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey);padding-top:3px}
.note .line .k.found{background:var(--yellow);color:var(--ink);border-radius:999px;
  padding:4px 8px;align-self:flex-start;flex:0 0 auto}
.note .line p{font-size:15.5px;line-height:1.55}

/* ── The portrait ────────────────────────────────────────────────────────── */
.portrait{flex:0 0 auto;width:clamp(170px,30vw,280px);aspect-ratio:4/5;
  background:var(--line);border-radius:20px;display:flex;align-items:flex-end;
  padding:14px;color:var(--grey);font-size:12px;line-height:1.4}
section.dark .portrait{background:#241f1a;color:rgba(255,255,255,.5)}
.who{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:flex-start}
.who .col{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:18px}

/* ── The sticky call to action ───────────────────────────────────────────── */
.sticky{position:fixed;left:14px;right:14px;bottom:14px;z-index:20;
  animation:rise .3s ease both;display:none}
.sticky.on{display:block}
/* Full width at every size, edge to edge with a 14px margin, exactly as drawn.
   There used to be a desktop rule here that shrank it to a 340px pill in the
   corner; the canvas never had one. */
.sticky a{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 8px;
  width:100%;min-height:60px;padding:10px 18px;text-align:center;line-height:1.3;
  background:#ffd400;color:#141312;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;border-radius:999px;
  box-shadow:0 18px 36px -16px rgba(20,19,18,.6);text-decoration:none}
.sticky a:hover,.sticky a:focus-visible{background:#141312;color:#ffd400}

/* Anything that animates stops for someone who asked it to. */
@media (prefers-reduced-motion:reduce){ *{animation:none!important} }

/* ── Service page layout ─────────────────────────────────────────────────── */
.metarow{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 24px}
.pricepill{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--yellow);color:var(--ink);border-radius:999px;padding:5px 10px}
.lede.wide{max-width:760px;font-size:clamp(19px,2.6vw,30px);line-height:1.3;font-weight:400}
h1 .last{align-self:flex-start}

.two{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px)}
.two .lhs{flex:1 1 240px;min-width:0}
.two .lhs h2{font-size:clamp(22px,3.4vw,36px);line-height:1.05}
.two .rhs{flex:2 1 400px;min-width:0;max-width:680px}
.two .rhs p{font-size:clamp(17px,2vw,21px);line-height:1.5}
.two .rhs p.muted{font-size:17px}

.list{border-top:1px solid var(--ink);margin-top:8px}
.list p{border-bottom:1px solid var(--soft);padding:14px 0;font-size:16px!important;line-height:1.5}
section.dark .list{border-top-color:rgba(255,255,255,.35)}
section.dark .list p{border-bottom-color:rgba(255,255,255,.2)}

.slot{border:1px dashed var(--soft);border-radius:16px;min-height:220px;
  display:flex;align-items:center;justify-content:center;color:var(--grey);
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;background:var(--wash)}

.pricebar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:28px 48px}
.pricebar .amount{font-size:clamp(44px,8vw,110px);line-height:1;font-weight:700;letter-spacing:-.02em}
section.wash.quiet .lhs h2{color:var(--grey)}

/* ── Home: the parts the first build missed ──────────────────────────────── */
.stack-lg{display:flex;flex-direction:column;gap:clamp(20px,3vw,36px)}
.hl{color:var(--yellow)}

section.dark .finds{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
section.dark .find{background:#241f1a;border-radius:20px;padding:clamp(22px,3vw,34px);
  display:flex;flex-direction:column;gap:14px}
section.dark .find .no{font-size:clamp(38px,5vw,64px);line-height:.9;font-weight:700;color:var(--yellow)}
section.dark .find p{font-size:16px;line-height:1.55;color:#fff}

.rows{border-top:1px solid var(--ink)}
.rows .row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;
  border-bottom:1px solid var(--line);padding:clamp(20px,3vw,32px) 0;
  text-decoration:none;transition:background .15s,padding .15s}
.rows .row:hover{background:var(--yellow);border-radius:18px;
  padding-left:22px;padding-right:22px;border-bottom-color:transparent}
.rows .name{flex:1 1 260px;font-size:clamp(20px,3vw,34px);line-height:1.05;text-transform:uppercase}
.rows .desc{flex:1 1 240px;font-size:15px;line-height:1.55;color:var(--grey)}
.rows .row:hover .desc{color:var(--ink)}
.rows .pill{display:inline-flex;align-items:center;gap:8px;background:var(--ink);
  color:var(--yellow);border-radius:999px;padding:9px 15px;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}

.mailto{align-self:flex-start;font-size:clamp(17px,2vw,22px);
  border-bottom:2px solid var(--yellow);padding-bottom:2px;text-decoration:none}
.small{font-size:14px}

@media (max-width:640px){
  .rows .row:hover{padding-left:0;padding-right:0}
  .shelf .big{font-size:clamp(52px,18vw,90px)}
}

.rulehead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px 20px;border-bottom:1px solid var(--ink);padding-bottom:14px}
.rulehead.light{border-bottom-color:rgba(255,255,255,.2)}
.mock,.note{flex:0 1 360px}
@media (max-width:760px){ .mock,.note{flex:1 1 100%} }

/* ═══════════════════════════════════════════════════════════════════════════
   The header.

   Sticky, blurred, hairline, shadow — the one part of the design that is on
   screen the whole time, so it is the part worth getting exactly right.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The wash and the blur sit on a pseudo-element rather than on <header>, and
   that is not a style choice. backdrop-filter makes an element the containing
   block for every fixed-position descendant, so with the filter on the header
   itself the full-screen menu panel resolved inset:0 against a 62px strip and
   collapsed into the bar. The layer carries the paint; the header carries the
   position and the hairline. */
.site-head{position:sticky;top:0;z-index:6;border-bottom:1px solid var(--line)}
.site-head::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 10px 30px -24px rgba(20,19,18,.8);
}
.site-head .bar{
  max-width:var(--max);margin:0 auto;
  padding:7px clamp(20px,4vw,40px);min-height:62px;
  display:flex;flex-wrap:nowrap;align-items:center;gap:6px 20px;
}

.site-head .wordmark{
  margin-right:auto;display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink);font-size:15px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;white-space:nowrap;text-decoration:none;
}
.site-head .wordmark:hover{color:var(--grey)}

/* ── The wide nav ────────────────────────────────────────────────────────── */

/* nowrap on the list and on every item, which is the whole point: the nav is
   ten items of tracked uppercase and the owner asked that it never fall onto a
   second line. It cannot, because below the width where it stops fitting it is
   not on the page at all — the burger is. */
.site-head nav.top{
  display:flex;margin:0 -4px;padding:0 4px;
  font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.site-head nav.top ul{
  display:flex;flex-wrap:nowrap;align-items:center;gap:0 16px;
  list-style:none;margin:0;padding:0;
}
.site-head nav.top a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  white-space:nowrap;color:var(--grey);text-decoration:none;
}
.site-head nav.top a:hover{color:var(--ink)}

/* The yellow bar under the page you are on. Drawn as an inset shadow rather
   than a border so the active item is exactly as tall as the others and the
   nav does not jump by 3px as you move between pages. Keyed off aria-current
   so what a sighted reader sees and what a screen reader is told cannot
   drift apart. */
.site-head nav.top a[aria-current]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--yellow)}

/* The way into the product. It sits in the nav but is not another page of the
   pitch, so it is marked rather than blending in. */
.site-head nav.top .signin a{
  min-height:34px;padding:0 13px;color:var(--ink);
  border:1px solid var(--soft);border-radius:999px;
}
.site-head nav.top .signin a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}

/* ── The burger ──────────────────────────────────────────────────────────── */

/* details/summary rather than a button, so the menu opens and closes with no
   JavaScript at all. A crawler, a reader with scripts off and a reader on a
   flaky connection all get the same working menu. The script that ships with
   the page only adds Escape, aria-expanded and close-on-blur on top. */
.site-head .menu{display:none}
.site-head .burger{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:46px;height:46px;margin-right:-12px;cursor:pointer;list-style:none;
}
.site-head .burger::-webkit-details-marker{display:none}
.site-head .burger i{
  display:block;width:22px;height:2px;background:var(--ink);
  transition:transform .18s ease,opacity .18s ease,background .18s ease;
}
.site-head .burger:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}

/* Open, the bars cross into a close button and the summary is lifted above the
   panel so the same 46px target that opened the menu also shuts it. */
.site-head .menu[open] .burger{position:relative;z-index:31}
.site-head .menu[open] .burger i{background:#fff}
.site-head .menu[open] .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-head .menu[open] .burger i:nth-child(2){opacity:0}
.site-head .menu[open] .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-head .menu[open] .burger:focus-visible{outline-color:#fff}

/* ── The open menu ───────────────────────────────────────────────────────── */
.site-head .panel{
  position:fixed;inset:0;z-index:30;
  background:var(--ink);color:#fff;
  display:flex;flex-direction:column;
  animation:fadeIn .16s ease both;
}
.site-head .panel-head{
  flex:0 0 auto;min-height:54px;display:flex;align-items:center;
  padding:0 clamp(20px,4vw,40px);border-bottom:1px solid rgba(255,255,255,.2);
}
.site-head .panel-mark{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow)}

.site-head .panel-nav{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;
  padding:6px clamp(20px,4vw,40px) 20px;
}
.site-head .panel-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:62px;border-bottom:1px solid rgba(255,255,255,.16);
  color:#fff;text-decoration:none;
  font-size:clamp(21px,6.4vw,28px);line-height:1.1;text-transform:uppercase;
}
.site-head .panel-nav a:last-child{border-bottom:0}
.site-head .panel-nav a:hover{color:var(--yellow)}
.site-head .panel-nav a[aria-current]{color:var(--yellow)}

/* Same yellow bar as the wide nav, outset here because the row is 62px tall and
   an inset shadow would park the line at the bottom of the row rather than
   under the word. */
.site-head .panel-nav a[aria-current]>span:first-child{box-shadow:0 3px 0 var(--yellow)}
.site-head .panel-price{
  flex:0 0 auto;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yellow);
}
.site-head .panel-price.quiet{color:var(--grey)}

.site-head .panel-foot{
  flex:0 0 auto;display:flex;flex-direction:column;gap:14px;
  padding:0 clamp(20px,4vw,40px) max(20px,env(safe-area-inset-bottom));
}
.site-head .panel-cta{
  display:flex;align-items:center;justify-content:center;min-height:60px;
  background:var(--yellow);color:var(--ink);border-radius:999px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
}
.site-head .panel-cta:hover{background:#fff}
.site-head .panel-cta.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.site-head .panel-cta.ghost:hover{border-color:#fff}
.site-head .panel-cta span{margin-left:.7em}
.site-head .panel-mail{align-self:center;color:var(--yellow);font-size:15px;text-decoration:none}
.site-head .panel-mail:hover{color:#fff}

/* The page behind an open menu should not scroll. :has does it without script;
   where it is missing the panel is opaque and full-screen anyway, so the worst
   case is a page that moves behind something you cannot see through. */
html:has(.site-head .menu[open]){overflow:hidden}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* The breakpoint. Measured, not picked: the wordmark, the ten nav items, the
   gaps between them and the page gutters come to 1126px, so 1140 is the first
   round number with any slack in it. Above that the nav is on one line with
   room to spare; below it the nav is not on the page at all and the burger is,
   which is the only way a nowrap list can be promised never to wrap.

   1024 would have been the nicer number. Fitting it means cutting the tracking
   from .14em, closing the 16px gaps, or dropping an item — all three of which
   are the canvas header rather than the breakpoint. */
@media (max-width:1139.98px){
  .site-head nav.top{display:none}
  .site-head .menu{display:block}
}

/* ── What fell out, and the three real ones ──────────────────────────────── */
.fellout{border-top:1px solid var(--ink)}
.fellout .row{border-bottom:1px solid var(--line);padding:18px 0;display:flex;gap:20px;align-items:baseline}
.fellout .n{flex:0 0 auto;font-size:clamp(24px,3.4vw,36px);line-height:1;font-weight:700;color:var(--yellow)}
.fellout .row.quiet .n{color:var(--grey)}
.fellout .row p:last-child{flex:1 1 auto;font-size:clamp(16px,1.8vw,19px);line-height:1.45}
.fellout .row.quiet p:last-child{color:var(--grey)}

.found{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.found .card{background:var(--wash);border-radius:18px;padding:24px 26px 28px;
  display:flex;flex-direction:column;gap:12px}
.found .badge{align-self:flex-start;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--yellow);color:var(--ink);border-radius:999px;padding:5px 10px}
.found .card p{font-size:16px;line-height:1.55}

.slotnote{margin-top:10px;max-width:680px}

/* ─────────────────────────────────────────────────────────────────────────
   CANVAS VOCABULARY — transcribed from "Option B Bold.dc.html", frame by
   frame, at the frame's own values. Scoped under .cv- so it can be rolled
   out one screen at a time without disturbing the pages not yet converted.
   Every number here is the designer's, not an approximation of it.
   ───────────────────────────────────────────────────────────────────────── */
.cv-sec{padding:clamp(34px,6vw,80px) clamp(20px,4vw,40px)}
.cv-sec.dark{background:#141312;color:#fff;padding:clamp(36px,6vw,84px) clamp(20px,4vw,40px)}
.cv-sec.wash{background:#f2f1f0}
.cv-wrap{max-width:1180px;margin:0 auto}
.cv-stack{display:flex;flex-direction:column;gap:22px}

.cv-eyebrow{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#ffd400}
.cv-h1{margin:0;font-size:clamp(34px,8vw,92px);font-weight:700;line-height:.96;
  letter-spacing:-.01em;text-transform:uppercase}
.cv-lede{margin:0;max-width:640px;font-size:clamp(18px,2.4vw,26px);font-weight:400;line-height:1.35}

/* the white band: call to action on the left, the four definitions on the right */
.cv-split{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px)}
.cv-left{flex:1 1 300px;min-width:0;max-width:460px;display:flex;flex-direction:column;gap:16px}
.cv-right{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:8px}
.cv-cta{width:100%;min-height:64px;background:#ffd400;color:#141312;border-radius:999px;
  box-shadow:0 14px 28px -14px rgba(20,19,18,.5);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;
  gap:14px;text-decoration:none;font-weight:500}
.cv-cta:hover,.cv-cta:focus-visible{background:#141312;color:#ffd400}
.cv-note{margin:0;font-size:16px;line-height:1.55}
.cv-fine{margin:0;font-size:14px;color:#6a6a6a}
.cv-def{padding:16px 0;border-top:1px solid #e6e6e6}
.cv-def:first-child{border-top:1px solid #141312}
.cv-def-k{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.cv-def-v{margin:0;font-size:16px;line-height:1.5;color:#6a6a6a}

.cv-h2{margin:0;font-size:clamp(24px,4.4vw,46px);font-weight:700;line-height:1.02;
  text-transform:uppercase}
.cv-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cv-card{background:#fff;border-radius:18px;padding:26px 24px 30px}
.cv-card.on{background:#141312;color:#fff}
.cv-card-k{margin:0 0 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6a6a6a}
.cv-card.on .cv-card-k{color:#ffd400}
.cv-card-n{margin:0;font-size:clamp(38px,6vw,64px);line-height:.9;font-weight:700}