/* Tablesix — public site
   Layout concept: a run of full-width printed plates. Photographic plates carry
   corner metadata, flat colour plates carry one serif line, index plates rule
   the facts into hairline rows. Bone paper leads, moss and cocoa band it,
   Royal is spent once per page. */

/* Brand faces, self-hosted. Archivo ships its width axis here, which is what
   lets the display setting sit at width 112 instead of the default 100. */
@font-face{font-family:"Archivo";src:url("fonts/Archivo-Variable.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("fonts/DMMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("fonts/DMMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/InstrumentSerif-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/InstrumentSerif-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* colour */
  --bone:#e0ddd4;
  --paper:#ebe9e1;
  --cocoa:#2d1f00;
  --moss:#534212;
  --char:#242424;
  --royal:#193cb5;
  --ink:#2d1f00;
  --ink-soft:#5c5240;
  --rule:#c3bfb0;
  --rule-strong:#8a7325;
  --on-dark:#e0ddd4;
  --on-dark-soft:#a89f8c;
  --ochre:#b8862b;
  --danger:#9e2b12;
  /* type */
  --display:"Instrument Serif","Times New Roman",Times,serif;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* measure */
  --gut:clamp(18px,4vw,64px);
  --bar:64px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:900;
  opacity:.085;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,blockquote,ol,ul{margin:0}
a{color:inherit}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--royal);outline-offset:3px}

/* ---------- type ---------- */
.dsp{font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:-.012em;text-wrap:balance}
.d1{font-size:clamp(46px,7.4vw,108px)}
.d2{font-size:clamp(34px,4.9vw,70px)}
.d3{font-size:clamp(26px,2.9vw,42px)}
.d4{font-size:clamp(22px,2.1vw,30px);line-height:1.04}
.ital{font-style:italic}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;line-height:1.4}
.kick--sm{font-size:10px;letter-spacing:.2em}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.58}
.sm{font-size:14.5px;line-height:1.6}
.xs{font-size:13px;line-height:1.55}
.soft{color:var(--ink-soft)}
.on-soft{color:var(--on-dark-soft)}
.measure{max-width:60ch}
.measure-s{max-width:46ch}

/* ---------- shell ---------- */
.wrap{width:100%;max-width:1360px;margin-inline:auto;padding-inline:var(--gut)}
.plate{position:relative;padding-block:clamp(56px,7vw,112px)}
.plate--flush{padding-block:0}
.plate--moss{background:var(--moss);color:var(--on-dark)}
.plate--cocoa{background:var(--cocoa);color:var(--on-dark)}
.plate--char{background:var(--char);color:var(--on-dark)}
.plate--royal{background:var(--royal);color:var(--on-dark)}
.plate--paper{background:var(--paper)}
.plate--tight{padding-block:clamp(40px,4.4vw,64px)}

/* ---------- top bar ---------- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:800;background:var(--bone);border-bottom:1px solid var(--rule)}
.bar--dark{background:var(--cocoa);border-bottom-color:rgba(224,221,212,.22);color:var(--on-dark)}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--bar)}
.bar__logo{display:flex;align-items:center;flex:none}
.bar__logo img{height:17px;width:auto}
.bar__nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.navlink{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;padding:6px 0;color:inherit;opacity:.72}
.navlink:hover{opacity:1}
.navlink--on{opacity:1}
.navlink--on::before{content:"(";margin-right:2px}
.navlink--on::after{content:")";margin-left:2px}
.bar__end{display:flex;align-items:center;gap:14px}
.burger{display:none;align-items:center;justify-content:center;width:46px;height:46px;margin-right:-10px;background:none;border:0;color:inherit;cursor:pointer}
.burger svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.4;fill:none}
.drawer{display:none;background:var(--cocoa);color:var(--on-dark);padding-block:14px 26px}
.drawer.is-open{display:block}
.drawer nav a{display:block;font-family:var(--display);font-size:30px;line-height:1.55;text-decoration:none;border-bottom:1px solid rgba(224,221,212,.16)}
.drawer .btn{margin-top:22px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:14px 26px;border:1px solid transparent;border-radius:0;background:var(--cocoa);color:var(--bone);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:#44300a}
.btn--royal{background:var(--royal);color:var(--bone)}
.btn--royal:hover{background:#13309a}
.btn--line{background:transparent;color:inherit;border-color:currentColor}
.btn--line:hover{background:rgba(45,31,0,.06)}
.plate--cocoa .btn--line:hover,.plate--moss .btn--line:hover,.plate--char .btn--line:hover,.plate--royal .btn--line:hover,.drawer .btn--line:hover{background:rgba(224,221,212,.1)}
.btn--bone{background:var(--bone);color:var(--ink)}
.btn--bone:hover{background:#efede6}
.btn--sm{min-height:42px;padding:10px 18px;font-size:10px}
.btn--wide{width:100%}
.tlink{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.arr{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none;flex:none}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}

/* ---------- hero plate ---------- */
.hero{position:relative;min-height:clamp(440px,74vh,760px);display:flex;flex-direction:column;justify-content:space-between;color:var(--on-dark);overflow:hidden;padding-block:clamp(22px,3vw,34px) clamp(30px,4vw,52px)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(45,31,0,.6) 0%,rgba(45,31,0,.16) 30%,rgba(45,31,0,.74) 72%,rgba(45,31,0,.86) 100%)}
.hero__top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hero__foot{display:grid;grid-template-columns:1.5fr .5fr;gap:clamp(24px,4vw,56px);align-items:end}
.hero h1{margin-bottom:0}
.hero__note{border-top:1px solid rgba(224,221,212,.45);padding-top:16px}

/* ---------- rule heads ---------- */
.rh{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--rule-strong);padding-top:14px;margin-bottom:clamp(28px,3.4vw,52px)}
.plate--cocoa .rh,.plate--char .rh,.plate--moss .rh,.plate--royal .rh{border-top-color:rgba(224,221,212,.5)}
.rh span:last-child{opacity:.6}

/* ---------- editorial set (centred, tracked) ---------- */
.set{text-align:center;max-width:22ch;margin-inline:auto}
.set--wide{max-width:30ch}
.spread{display:flex;justify-content:space-between;gap:12px;max-width:760px;margin-inline:auto;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}

/* ---------- index list with superscripts ---------- */
.index{font-family:var(--display);font-size:clamp(26px,3.4vw,48px);line-height:1.42;text-align:center}
.index i{font-style:normal}
.index sup{font-family:var(--mono);font-size:.3em;letter-spacing:.06em;vertical-align:super;opacity:.62;padding-left:.18em}
.index .sep{opacity:.4;padding-inline:.18em}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{position:relative;overflow:hidden;background:var(--paper);aspect-ratio:4/5}
.tile img{width:100%;height:100%;object-fit:cover}
.tile--wide{aspect-ratio:3/2;grid-column:span 2}
.tile--sq{aspect-ratio:1/1}
.tile--word{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,1.6vw,24px);background:var(--moss);color:var(--on-dark)}
.tile--word.is-cocoa{background:var(--cocoa)}
.tile--word.is-royal{background:var(--royal)}
.tile--word.is-paper{background:var(--paper);color:var(--ink)}
.tile__cap{position:absolute;left:0;right:0;bottom:0;padding:14px;color:var(--on-dark);background:linear-gradient(to top,rgba(45,31,0,.78),transparent)}
.cap{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;line-height:1.5}

/* ---------- docket ---------- */
.docket{width:100%}
.docket div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;border-top:1px solid var(--rule);padding:13px 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.docket div:first-child{border-top-color:var(--rule-strong)}
.docket div:last-child{border-bottom:1px solid var(--rule)}
.docket span:last-child{text-align:right;opacity:.68}
.plate--cocoa .docket div,.plate--char .docket div,.plate--moss .docket div{border-top-color:rgba(224,221,212,.2)}
.plate--cocoa .docket div:first-child,.plate--char .docket div:first-child,.plate--moss .docket div:first-child{border-top-color:rgba(224,221,212,.5)}
.plate--cocoa .docket div:last-child,.plate--char .docket div:last-child,.plate--moss .docket div:last-child{border-bottom-color:rgba(224,221,212,.2)}

/* ---------- columns ---------- */
.cols{display:grid;gap:clamp(26px,3vw,48px)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,96px);align-items:end}
.split--top{align-items:start}
.split--text{grid-template-columns:1fr 1fr}

/* ---------- numbered steps ---------- */
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,40px);align-items:baseline;border-top:1px solid var(--rule);padding-block:clamp(22px,2.6vw,34px)}
.plate--cocoa .step,.plate--char .step,.plate--moss .step{border-top-color:rgba(224,221,212,.2)}
.step:last-child{border-bottom:1px solid var(--rule)}
.plate--cocoa .step:last-child,.plate--char .step:last-child,.plate--moss .step:last-child{border-bottom-color:rgba(224,221,212,.2)}
.step__n{font-family:var(--display);font-size:clamp(28px,3.2vw,44px);line-height:1;opacity:.45;min-width:1.6em}
.step__b{display:grid;gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:baseline}

/* ---------- accordion ---------- */
.qa{border-top:1px solid var(--rule)}
.qa:last-of-type{border-bottom:1px solid var(--rule)}
.plate--cocoa .qa,.plate--char .qa,.plate--moss .qa{border-top-color:rgba(224,221,212,.2)}
.plate--cocoa .qa:last-of-type,.plate--char .qa:last-of-type,.plate--moss .qa:last-of-type{border-bottom-color:rgba(224,221,212,.2)}
.qa__btn{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:22px 0;background:none;border:0;color:inherit;text-align:left;cursor:pointer;font-family:var(--display);font-size:clamp(20px,1.9vw,27px);line-height:1.2}
.qa__sign{font-family:var(--mono);font-size:15px;line-height:1;flex:none;opacity:.6}
.qa__a{padding-bottom:24px;max-width:62ch}
.qa__a[hidden]{display:none}

/* ---------- forms ---------- */
.form{display:grid;gap:22px}
.field{display:block}
.field>span{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase}
.field>span em{font-style:normal;opacity:.55}
.input{width:100%;min-height:52px;padding:14px 16px;background:transparent;border:1px solid var(--rule-strong);border-radius:0;color:inherit;font-family:var(--sans);font-size:16px}
.input::placeholder{color:var(--ink-soft);opacity:.75}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 23px,calc(100% - 14px) 23px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:46px}
textarea.input{min-height:120px;resize:vertical}
.input.is-bad{border-color:var(--danger)}
.ferr{display:none;margin-top:8px;font-size:13.5px;color:var(--danger)}
.ferr.is-on{display:block}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:12px 18px;border:1px solid var(--rule-strong);cursor:pointer;font-size:15.5px}
.choice input{accent-color:var(--royal);width:16px;height:16px}
.choice:has(input:checked){background:var(--moss);border-color:var(--moss);color:var(--on-dark)}
.summary{border:1px solid var(--danger);padding:16px 20px;color:var(--danger);display:flex;gap:12px;align-items:flex-start}
.summary[hidden]{display:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* ---------- picker ---------- */
.days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.day{min-height:68px;padding:12px 8px;border:1px solid var(--rule-strong);background:transparent;color:inherit;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1.7}
.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.slot{min-height:50px;border:1px solid var(--rule-strong);background:transparent;color:inherit;cursor:pointer;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}
.day.is-on,.slot.is-on{background:var(--moss);border-color:var(--moss);color:var(--on-dark)}
.slot.is-on{background:var(--royal);border-color:var(--royal)}

/* ---------- opportunity cards ---------- */
.ocard{display:grid;grid-template-columns:1.5fr 1fr auto;gap:clamp(20px,3vw,44px);align-items:start;border-top:1px solid var(--rule);padding-block:clamp(24px,2.6vw,34px)}
.ocard:last-of-type{border-bottom:1px solid var(--rule)}
.facts{display:grid;gap:9px}
.fact{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.fact svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.4;fill:none;flex:none}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--rule-strong);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.badge i{width:7px;height:7px;border-radius:999px;background:var(--ochre);display:block}
.filters{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:12px;align-items:end}

/* ---------- plans ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);align-items:stretch}
.plan{display:flex;flex-direction:column;border:1px solid var(--rule-strong);background:var(--bone)}
.plan--on{border:2px solid var(--moss)}
.plan__h{padding:clamp(18px,1.8vw,26px);border-bottom:1px solid var(--rule)}
.plan--on .plan__h{background:var(--moss);color:var(--on-dark);border-bottom-color:transparent}
.plan__b{padding:clamp(18px,1.8vw,26px);flex:1}
.plan__f{padding:0 clamp(18px,1.8vw,26px) clamp(18px,1.8vw,26px)}
.price{font-family:var(--display);font-size:clamp(34px,3.4vw,50px);line-height:1;font-variant-numeric:tabular-nums}
.plan .docket div{border-top-color:var(--rule)}
.plan .docket div:first-child{border-top-color:var(--rule-strong)}
@media (max-width:980px){.plans{grid-template-columns:1fr}}

/* ---------- six-dot mark ---------- */
.six{display:grid;grid-template-columns:repeat(3,var(--dot,9px));gap:calc(var(--dot,9px)*.508) calc(var(--dot,9px)*.667)}
.six i{display:block;width:var(--dot,9px);height:var(--dot,9px);border-radius:999px;background:currentColor}

/* ---------- footer ---------- */
.foot{background:var(--char);color:var(--on-dark);padding-block:clamp(44px,5vw,72px) 34px}
.foot__grid{display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,48px)}
.foot a{text-decoration:none}
.foot__col a{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:2.25;color:var(--on-dark-soft)}
.foot__col a:hover{color:var(--on-dark)}
.foot__end{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid rgba(224,221,212,.18);margin-top:clamp(34px,4vw,56px);padding-top:22px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .split,.split--text{grid-template-columns:1fr;align-items:start;gap:30px}
  .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__foot{grid-template-columns:1fr;gap:26px}
  .step__b{grid-template-columns:1fr;gap:8px}
  .foot__grid{grid-template-columns:1fr 1fr}
  .ocard{grid-template-columns:1fr 1fr}
  .filters{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .bar__nav{display:none}
  .bar__end .btn{display:none}
  .burger{display:inline-flex}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile--wide{grid-column:span 2}
  .index{font-size:clamp(22px,5.4vw,34px);line-height:1.5}
  .days{grid-template-columns:repeat(3,minmax(0,1fr))}
  .slots{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  body{font-size:16px}
  .cols-2,.cols-3,.two{grid-template-columns:1fr}
  .ocard{grid-template-columns:1fr;gap:18px}
  .filters{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .tile--wide{grid-column:span 1}
  .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .actions .btn{width:100%}
  .hero{min-height:clamp(480px,78vh,620px);padding-block:18px 30px}
  .hero__foot{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ============================================================
   Option B — Archivo carries the headlines.
   The grotesque is the workhorse: heroes, section openers, plan
   names, closing lines, all uppercase at width 112. The serif is
   kept for the index modules, the centred editorial sets and any
   italic word set inside a grotesque line.
   ============================================================ */
.dsp{
  font-family:var(--sans);
  font-weight:600;
  font-stretch:112%;   /* the house display width */
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:.92;
}
.d1{font-size:clamp(31px,5vw,74px)}
.d2{font-size:clamp(25px,3.4vw,50px)}
.d3{font-size:clamp(19px,2.1vw,29px)}
.d4{
  font-size:clamp(19px,1.75vw,25px);
  font-weight:500;
  font-stretch:100%;
  text-transform:none;
  letter-spacing:0;
  line-height:1.2;
}
/* a serif italic word inside a grotesque line */
.dsp .ital{
  font-family:var(--display);
  font-weight:400;
  font-stretch:normal;
  text-transform:none;
  letter-spacing:-.01em;
  font-size:1.1em;
  line-height:.86;
}
/* the serif exceptions */
.ser{
  font-family:var(--display);
  font-weight:400;
  font-stretch:normal;
  text-transform:none;
  letter-spacing:-.012em;
  line-height:.98;
}
.ser.d1{font-size:clamp(44px,7.2vw,104px)}
.ser.d2{font-size:clamp(33px,4.7vw,66px)}
.ser.d3{font-size:clamp(25px,2.8vw,40px)}
.ser.d4{font-size:clamp(22px,2.1vw,30px);line-height:1.1}
.ser .ital{font-family:var(--display);font-size:1em;line-height:inherit;letter-spacing:inherit}
/* questions read better in sentence case */
.qa__btn{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(18px,1.65vw,24px);
  line-height:1.25;
}
.price{font-family:var(--sans);font-weight:600;font-stretch:112%;letter-spacing:-.02em}

/* ============================================================
   Royal accents. Small, repeated, always against moss, cocoa or
   bone. Royal holds on the light grounds; the dark grounds take
   the lifted blue, since #193cb5 on moss is unreadable.
   ============================================================ */
:root{--accent:#193cb5;--accent-ink:#193cb5}
.hero,.plate--cocoa,.plate--char,.plate--moss,.foot,.drawer{--accent:#193cb5;--accent-ink:#e0ddd4}
.plate--royal{--accent:var(--bone);--accent-ink:var(--bone)}

/* a touch heavier across the display sizes */
.dsp{font-weight:700}
.d4{font-weight:600}
.qa__btn{font-weight:600}
.price{font-weight:700}

/* the tick that starts every section rule */
.rh{position:relative}
.rh::before{content:"";position:absolute;left:0;top:-1px;width:36px;height:2px;background:var(--accent)}
.plate--royal .rh::before{background:var(--bone)}

/* index superscripts and step numerals */
.index sup{color:var(--accent);opacity:1}
.step__n{color:var(--accent);opacity:1}

/* the six, the active nav item, text links, card facts */
.six i{background:var(--accent)}
.navlink--on{color:inherit}
.navlink--on::before,.navlink--on::after{color:var(--accent)}
.tlink{border-bottom-color:var(--accent)}
.tlink:hover{color:var(--accent)}
.plate--royal .tlink:hover{color:var(--bone)}
.fact svg{color:var(--accent)}
.tile--word .cap{color:var(--accent)}
.tile--word.is-paper .cap{color:#193cb5}

/* a blue head on every docket table */
.docket div:first-child{border-top-color:var(--accent)}
.plate--cocoa .docket div:first-child,.plate--char .docket div:first-child,.plate--moss .docket div:first-child{border-top-color:var(--accent)}

/* the opening eyebrow carries a blue dot */
.hero__top .kick:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-radius:999px;background:var(--accent);margin-right:10px;vertical-align:.08em}

/* ============================================================
   Fewer rules. Sections are separated by ground changes, space and
   the royal mark rather than by hairlines running across the page.
   ============================================================ */
.rh{border-top:0;padding-top:0;margin-bottom:clamp(24px,3vw,44px)}
.rh::before{display:none}
.rh span:first-child::before{content:"";display:inline-block;width:26px;height:3px;background:var(--accent);margin-right:13px;vertical-align:.2em}

/* docket tables become a tinted block */
.docket{background:rgba(45,31,0,.05);padding:4px 18px}
.hero .docket,.plate--cocoa .docket,.plate--char .docket,.plate--moss .docket,.plate--royal .docket{background:rgba(224,221,212,.08)}
.docket div{border-top:0;padding:12px 0}
.docket div:first-child{border-top:0}
.docket div:last-child{border-bottom:0}
.plan .docket{background:rgba(45,31,0,.05)}

/* steps carry their own weight */
.step{border-top:0;padding-block:clamp(16px,2vw,26px)}
.step:last-child{border-bottom:0}
.step__n{font-size:clamp(30px,3.4vw,46px)}

/* questions: a tint on the open one instead of a row of rules */
.qa{border-top:0;margin-bottom:4px}
.qa:last-of-type{border-bottom:0}
.qa__btn{padding:18px 18px}
.qa__btn:hover{background:rgba(45,31,0,.04)}
.plate--cocoa .qa__btn:hover,.plate--char .qa__btn:hover,.plate--moss .qa__btn:hover{background:rgba(224,221,212,.06)}
.qa__a{padding:0 18px 22px}
.qa:has(.qa__a:not([hidden])){background:rgba(45,31,0,.05)}
.plate--cocoa .qa:has(.qa__a:not([hidden])),.plate--char .qa:has(.qa__a:not([hidden])),.plate--moss .qa:has(.qa__a:not([hidden])){background:rgba(224,221,212,.07)}
.qa__sign{color:var(--accent-ink);opacity:1}

/* opportunity rows become blocks */
.ocard{border-top:0;padding:clamp(20px,2.4vw,30px);background:rgba(45,31,0,.05);margin-bottom:12px}
.ocard:last-of-type{border-bottom:0}

/* plan head: tint, not a rule */
.plan__h{border-bottom:0;background:rgba(45,31,0,.04)}
.plan--on .plan__h{background:var(--moss)}

.hero__note{border-top:0;padding-top:0}
.foot__end{border-top:0;padding-top:0}

/* text accents that must stay legible on the dark grounds */
.index sup,.tile--word .cap,.fact svg,.tlink:hover{color:var(--accent-ink)}
.tlink{border-bottom-color:var(--accent-ink)}
.step__n{color:var(--accent-ink)}
.navlink--on::before,.navlink--on::after{color:var(--accent-ink)}
.docket div:first-child{border-top:0}

/* the mark, drawn in the word tile at the measured geometry */
.tile--word{position:relative}
.six--mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);--dot:20px}
.six--mark i{background:#193cb5}
@supports (width:1cqw){
  .tile--word{container-type:inline-size}
  .six--mark{--dot:10.4cqw}
}

/* Instrument Serif ships a single weight, so the serif moments take a
   1px stroke in their own colour to sit closer to the Archivo weight. */
.ser,.index,.dsp .ital{-webkit-text-stroke:1px currentColor}
.index sup{-webkit-text-stroke:0}
.step__n,.drawer nav a{-webkit-text-stroke:.7px currentColor}
.index i.ital{font-style:italic}

/* the word tile caption sits in off-white, the dots carry the blue */
.tile--word .cap{color:var(--bone)}
.tile--word.is-paper .cap{color:var(--ink)}

/* the drawer takes the electric royal ground */
.drawer{background:#193cb5;--accent:var(--bone);--accent-ink:var(--bone)}
.drawer nav a{border-bottom-color:rgba(224,221,212,.28)}
.drawer nav a:last-of-type{border-bottom:0}

/* Bigger display. The identity carries better when the headline owns
   the plate, so the scale steps up and the hero lets the line break
   where it balances rather than where a <br> used to sit. */
.d1{font-size:clamp(34px,5.9vw,88px)}
.d2{font-size:clamp(27px,4vw,60px)}
.d3{font-size:clamp(20px,2.3vw,33px)}
.d4{font-size:clamp(20px,1.9vw,27px)}
.ser.d1{font-size:clamp(46px,8vw,118px)}
.ser.d2{font-size:clamp(35px,5.2vw,76px)}
.ser.d3{font-size:clamp(26px,3vw,44px)}
.hero h1{max-width:15ch}
.close h2,.plate--royal h2{max-width:16ch}

/* the tracked-out spread wraps instead of pushing the page wide */
.spread{flex-wrap:wrap}
@media (max-width:860px){
  .spread{justify-content:center;gap:10px 22px}
}

/* stacked layouts put both actions on the right, where the eye lands
   and the thumb already is */
@media (max-width:860px){
  .actions{justify-content:flex-end;text-align:right}
  .actions .btn{width:auto}
  .hero__foot .actions,.close .actions{justify-content:flex-end}
}
@media (max-width:620px){
  .actions .btn{width:auto}
}

/* ONE blue on the site: electric royal #193cb5. On moss and cocoa the
   royal sits at about 1.1:1, so anything text-sized there takes the
   off-white instead of a lighter blue. The royal stays for fills. */
.hero,.plate--cocoa,.plate--char,.plate--moss,.foot,.drawer{--accent-ink:var(--bone)}
.rh span:first-child::before{background:var(--accent-ink)}

/* ---------- jobs ---------- */
.jobcard{display:grid;grid-template-columns:220px 1fr auto;gap:clamp(20px,2.6vw,36px);align-items:center;background:rgba(45,31,0,.05);padding:clamp(16px,1.8vw,22px);margin-bottom:14px}
.jobcard__img{display:block;overflow:hidden;aspect-ratio:4/5;background:var(--paper)}
.jobcard__img img{width:100%;height:100%;object-fit:cover}
.jobcard__end{display:grid;gap:12px;justify-items:end;text-align:right}
.jobfee{font-family:var(--sans);font-weight:700;font-stretch:112%;letter-spacing:-.02em;font-size:clamp(26px,2.4vw,34px);line-height:1;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:rgba(45,31,0,.07);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.plate--cocoa .chip,.plate--char .chip,.plate--moss .chip{background:rgba(224,221,212,.12)}
.jobmedia{position:relative}
.applybar{display:grid;gap:14px;background:rgba(45,31,0,.05);padding:clamp(20px,2.4vw,28px)}
@media (min-width:1081px){.jobmedia{position:sticky;top:96px}}
@media (max-width:1080px){.jobcard{grid-template-columns:160px 1fr}.jobcard__end{grid-column:1 / -1;justify-items:end}}
@media (max-width:620px){.jobcard{grid-template-columns:1fr}.jobcard__img{aspect-ratio:3/2}}
.dotmark{width:7px;height:7px;border-radius:999px;background:var(--accent);display:block;flex:none}