@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════
   28th Day Technology — soft UI (neumorphism)

   The style works by giving every surface the same tone as the page and
   moulding it with a pair of shadows: white from the top left, a darker
   shade of the same tone from the bottom right. Raised things catch the
   light; pressed things take it from the other side.

   The known failure of this style is that it hides affordances: if a
   button is the same colour as the page, nobody knows it is a button.
   So the moulding carries the SURFACES here — panels, wells, cards —
   while everything you click stays solid and high contrast, with a real
   focus ring. Text never relies on a shadow to be legible.

   Every token NAME the other sheets define survives, because bench.css
   and start.css read them.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:Archivo;src:url(../fonts/Archivo-Variable.woff2) format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Instrument;src:url(../fonts/InstrumentSans.woff2) format("woff2-variations");
  font-weight:400 700;font-style:normal;font-display:swap}

/* ── 1 · tokens ─────────────────────────────────────────────────────── */
:root{
  --surface:#E8EAEE;
  --lift:#FFFFFF;           /* the light that falls from the top left */
  --cast:#BFC5CE;           /* the shade it throws to the bottom right */

  --paper:#E8EAEE; --paper-2:#E8EAEE; --paper-3:#DFE2E7;
  --f-0:#E8EAEE; --f-1:#DFE2E7; --f-2:#D4D8DE;

  --ink:#0C0E11;            /* 16.1:1 on the surface */
  --body:#3C4248;           /*  8.4:1 */
  --dim:#5A6067;            /*  5.3:1 — the floor for words */
  --faint:#5A6067;

  --brand:#EA4B19;
  --brand-deep:#A8330B;     /* the accent darkened for text: 5.3:1 */
  --brand-btn:#C8400F;      /* white on it is 5.0:1 */
  --night:#2A2E34;
  --night-lift:#343941;
  --night-cast:#1E2228;

  --line:transparent; --line-2:#CDD2D9; --edge:#BFC5CE;
  --pane:#E8EAEE; --pane-2:#E8EAEE; --pane-3:#DFE2E7;
  --rim:transparent; --rim-2:#D4D8DE;
  --blur:none; --blur-s:none;
  --p1:#D4D8DE; --p3:#8A9097; --p4:#4C545C; --p5:#171C21;
  --ph-1:#D4D8DE; --ph-2:#B2B8C0; --ph-3:#6E757D; --ph-4:#2A2E34; --ph-5:#EA4B19;

  /* the moulding */
  --up:-7px -7px 15px var(--lift), 7px 7px 15px var(--cast);
  --up-sm:-3px -3px 7px var(--lift), 3px 3px 7px var(--cast);
  --up-lg:-11px -11px 22px var(--lift), 11px 11px 22px var(--cast);
  --press:inset -4px -4px 9px var(--lift), inset 4px 4px 9px var(--cast);
  --press-sm:inset -2px -2px 5px var(--lift), inset 3px 3px 6px var(--cast);
  --up-dark:-6px -6px 13px var(--night-lift), 6px 6px 13px var(--night-cast);
  --press-dark:inset -3px -3px 8px var(--night-lift), inset 4px 4px 9px var(--night-cast);

  --fd:Archivo,"Archivo",system-ui,sans-serif;
  --f:Instrument,system-ui,-apple-system,sans-serif;

  --t-s:.8125rem;
  --t-m:1rem;
  --t-b:1.0625rem;
  --t-l:clamp(1.125rem,1.03rem + .42vw,1.3125rem);
  --t-h:clamp(1.5rem,1.28rem + .95vw,2.125rem);
  --t-d:clamp(2.125rem,1.6rem + 2.3vw,3.5rem);
  --t--1:var(--t-m); --t-0:var(--t-b); --t-1:var(--t-b);
  --t-2:var(--t-l);  --t-3:var(--t-h); --t-4:var(--t-h);
  --t-5:var(--t-d);  --label:var(--t-s);

  --gut:clamp(1.25rem,4vw,2.5rem);
  --band-y:clamp(3.5rem,6.5vw,6rem);
  --r:18px; --r-s:12px; --r-l:26px;
  --rule:none;
  --tap:44px;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.33,1,.68,1);
  color-scheme:light;
}

/* ── 2 · ground ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--surface)}
body{margin:0;background:var(--surface);color:var(--body);
  font-family:var(--f);font-size:var(--t-b);line-height:1.6;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font-family:inherit}
img,svg,canvas,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:3px solid var(--brand-btn);outline-offset:3px;border-radius:6px}
.vh{color:inherit;position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.shell{width:100%;max-width:78rem;margin-inline:auto;padding-inline:var(--gut)}

/* ── 3 · type ───────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{font-family:var(--fd);color:var(--ink);margin:0;
  font-weight:650;letter-spacing:-.022em;line-height:1.14;text-wrap:balance}
.dsp,.h1,h1{font-size:var(--t-d);line-height:1.06;letter-spacing:-.032em;font-weight:680}
h2,.h2{font-size:var(--t-h);line-height:1.14;letter-spacing:-.026em}
h3,.h3{font-size:var(--t-l);line-height:1.28;letter-spacing:-.016em;font-weight:650}
h4,.h4,h5,.h5{font-size:var(--t-b);line-height:1.35;font-weight:650}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.lede,.lead{font-size:var(--t-l);line-height:1.6;color:var(--body);max-width:34rem;margin:0 0 1.5rem}
.say{font-size:var(--t-l);line-height:1.6;color:var(--body);max-width:34rem;margin:0 0 1rem}
.small,.note,.cap{font-size:var(--t-m);color:var(--dim);line-height:1.55}
.kicker,.eyebrow,.subhead{display:block;font-size:var(--t-m);font-weight:650;
  color:var(--brand-deep);margin:0 0 .55rem;letter-spacing:0;text-transform:none}
.measure{max-width:38rem}

/* ── 4 · header: a moulded bar ──────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:var(--surface)}
.hdr .nav{display:flex;align-items:center;gap:clamp(.5rem,1.4vw,1.1rem);
  width:100%;max-width:78rem;margin-inline:auto;padding:.7rem var(--gut);
  background:none;border:0}
.hdr::after{content:"";display:block;height:1px;
  box-shadow:0 7px 14px -8px var(--cast)}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);
  font-family:var(--fd);font-weight:700;letter-spacing:-.025em;font-size:1rem;
  white-space:nowrap;min-height:var(--tap);flex:0 0 auto}
.brand .mk{display:grid;grid-template-columns:repeat(7,3px);gap:1.5px;flex:0 0 auto;
  padding:7px;border-radius:9px;box-shadow:var(--press-sm)}
.brand .mk i{display:block;width:3px;height:3px;background:var(--dim);opacity:.45;
  border-radius:50%}
.brand .mk i:nth-child(n+25){opacity:1;background:var(--brand)}
.nav-l{display:flex;gap:.15rem;margin-left:auto}
.nav-l a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 .8rem;
  text-decoration:none;font-size:var(--t-m);font-weight:600;color:var(--dim);
  border-radius:12px;transition:box-shadow .2s,color .2s}
.nav-l a:hover{color:var(--ink);box-shadow:var(--up-sm)}
.nav-l a[aria-current]{color:var(--ink);box-shadow:var(--press-sm)}
.hdr .soc{display:flex;gap:.25rem;align-items:center}
.hdr .soc a{display:grid;place-items:center;width:var(--tap);height:var(--tap);
  color:var(--dim);text-decoration:none;border-radius:12px}
.hdr .soc a:hover{color:var(--ink);box-shadow:var(--up-sm)}
.hdr .soc svg{width:17px;height:17px}
.burger{display:none;font:inherit;font-size:var(--t-m);font-weight:650;color:var(--ink);
  background:var(--surface);border:0;border-radius:12px;box-shadow:var(--up-sm);
  min-height:var(--tap);padding:0 .9rem;cursor:pointer}
.burger:active{box-shadow:var(--press-sm)}
.legend{display:none}

/* ── 5 · buttons: solid, because a moulded button is invisible ──────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:var(--tap);padding:.72rem 1.3rem;border:0;border-radius:14px;
  font-family:var(--f);font-size:var(--t-m);font-weight:650;line-height:1.2;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  background:var(--brand-btn);color:#fff;
  box-shadow:-4px -4px 9px rgba(255,255,255,.55), 5px 5px 12px rgba(120,60,30,.4);
  transition:box-shadow .2s,transform .2s,background .2s}
.btn:hover{background:#B2380C;transform:translateY(-1px);
  box-shadow:-5px -5px 11px rgba(255,255,255,.6), 7px 7px 16px rgba(120,60,30,.45)}
.btn:active{transform:none;
  box-shadow:inset 3px 3px 8px rgba(90,40,20,.45), inset -3px -3px 8px rgba(255,255,255,.25)}
.btn--p{background:var(--brand-btn);color:#fff}
.btn--g{background:var(--surface);color:var(--ink);box-shadow:var(--up)}
.btn--g:hover{background:var(--surface);color:var(--ink);box-shadow:var(--up-lg)}
.btn--g:active{box-shadow:var(--press)}
.btn--sm{padding:.55rem 1rem;font-size:var(--t-m)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 1.4rem}

/* ── 6 · bands ──────────────────────────────────────────────────────── */
.band{padding-block:var(--band-y);background:var(--surface)}
.f-white,.s-white,.f-stone,.s-paper,.f-brand{background:var(--surface)}
/* one band is pressed into the page instead of raised off it */
.band--well{box-shadow:var(--press);border-radius:var(--r-l);
  margin-inline:clamp(.5rem,2vw,1.5rem);padding-inline:clamp(.5rem,2vw,1.5rem)}
.f-ink{background:var(--night);color:#AFB5BC}
.f-ink h1,.f-ink h2,.f-ink h3,.f-ink h4{color:#fff}
.f-ink .lede,.f-ink p,.f-ink .say{color:#B6BCC3}
.f-ink .small,.f-ink .cap,.f-ink .note{color:#9AA1A9}
.f-ink a{color:#fff}
.f-ink .kicker{color:#F5804F}
.f-ink .btn--g{background:var(--night);color:#fff;box-shadow:var(--up-dark)}

.sec-hd{margin:0 0 clamp(1.8rem,3.4vw,2.75rem)}
.sec-hd h2,.sec-hd .h2{margin:0 0 .6rem;max-width:21em}
.sec-hd .lede,.sec-hd .say{margin:0}
.sec-hd--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,3rem);align-items:end}
@media (max-width:860px){.sec-hd--split{grid-template-columns:minmax(0,1fr);align-items:start}}

/* ── 7 · the first screen ───────────────────────────────────────────── */
.hero{padding-block:clamp(2.5rem,6vw,5rem);background:var(--surface)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2rem,4.5vw,4rem);align-items:start}
@media (max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero h1{font-size:clamp(2.125rem,1.45rem + 2.9vw,3.75rem);line-height:1.05;
  letter-spacing:-.033em;max-width:13em;margin:0 0 1.1rem}
.hero .lede{max-width:28rem;margin:0 0 1.7rem}

/* every panel on the page is the same moulded shape */
.soft{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--up);
  padding:clamp(1.1rem,2.2vw,1.6rem)}
.soft--sm{border-radius:var(--r);box-shadow:var(--up-sm)}
.well{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--press);
  padding:clamp(1.1rem,2.2vw,1.6rem)}

.hero-demo{display:grid;gap:1.1rem}
.hero-demo .benches{display:grid;gap:1.1rem;margin:0}
.hero-demo .benches > *{background:var(--surface);border-radius:var(--r-l);
  box-shadow:var(--up);padding:.5rem}
.hero-demo .bw{max-width:none}

.when-card{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--up);
  padding:1.1rem 1.25rem;border:0}
.when-k{font-size:var(--t-m);font-weight:600;color:var(--dim);margin:0 0 .5rem}
.when-line{font-family:var(--fd);font-weight:650;font-size:var(--t-l);color:var(--ink);
  letter-spacing:-.018em;margin:0 0 .85rem}
.slot{color:var(--brand-deep)}
.when{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none}
.when button{font:inherit;font-size:var(--t-m);font-weight:600;min-height:var(--tap);
  padding:.4rem .95rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--surface);color:var(--body);box-shadow:var(--up-sm);
  transition:box-shadow .18s,color .18s}
.when button:hover{color:var(--ink);box-shadow:var(--up)}
.when button[aria-pressed="true"]{color:var(--ink);font-weight:650;box-shadow:var(--press-sm)}
.when-note{font-size:var(--t-m);color:var(--dim);margin:.85rem 0 0}
.when-sub{font-size:var(--t-m);color:var(--dim);margin:1rem 0 0;max-width:28rem}

.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.5rem;
  margin:1.6rem 0 0;padding:0;list-style:none;font-size:var(--t-m);color:var(--dim)}
@media (max-width:520px){.facts{grid-template-columns:minmax(0,1fr)}}
.facts li{display:flex;align-items:flex-start;gap:.6rem}
.facts li::before{content:"";width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  margin-top:.22em;background:var(--surface);box-shadow:var(--press-sm)}
.hero-sectors{margin:1.6rem 0 0;font-size:var(--t-m);color:var(--dim);line-height:1.8;
  max-width:30rem;padding-top:1.4rem;box-shadow:0 -1px 0 var(--cast),0 -2px 0 var(--lift)}
.hero-sectors a{color:var(--body);text-decoration:none;font-weight:600}
.hero-sectors a:hover{color:var(--brand-deep)}

/* ── 8 · cards ──────────────────────────────────────────────────────── */
.cards{display:grid;gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr))}
.card{display:block;background:var(--surface);border:0;border-radius:var(--r-l);
  box-shadow:var(--up);padding:clamp(1.2rem,2.2vw,1.65rem);text-decoration:none;
  color:inherit;transition:box-shadow .22s,transform .22s}
a.card:hover{box-shadow:var(--up-lg);transform:translateY(-3px)}
a.card:active{box-shadow:var(--press);transform:none}
.card h2,.card h3,.card .h5{font-size:var(--t-l);margin:0 0 .5rem;color:var(--ink)}
.card p{margin:0 0 .6rem;font-size:var(--t-b);color:var(--body)}
.card p:last-child{margin-bottom:0}
.card svg,.card .ico,.card .n{display:none}
.f-ink .card{background:var(--night);box-shadow:var(--up-dark)}
.f-ink a.card:hover{box-shadow:-8px -8px 17px var(--night-lift),8px 8px 17px var(--night-cast)}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.85rem 0 0;padding:0}
.tags li{font-size:var(--t-s);color:var(--dim);border-radius:999px;padding:.25rem .7rem;
  box-shadow:var(--press-sm)}
.f-ink .tags li{color:#9AA1A9;box-shadow:var(--press-dark)}
.go{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--t-m);
  font-weight:650;color:var(--brand-deep);margin-top:.6rem}
a.card:hover .go{gap:.6rem}
.f-ink .go{color:#F5804F}

.rows{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.rows li{border:0}
.row-a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1.5rem;
  align-items:center;padding:1.1rem 1.3rem;text-decoration:none;color:inherit;
  min-height:var(--tap);border-radius:var(--r);box-shadow:var(--up-sm);
  transition:box-shadow .2s}
.row-a:hover{box-shadow:var(--up)}
.row-a:active{box-shadow:var(--press)}
.row-t{font-family:var(--fd);font-weight:650;font-size:var(--t-l);color:var(--ink);
  letter-spacing:-.016em;line-height:1.3}
.row-b{grid-column:1/-1;margin:.2rem 0 0;font-size:var(--t-b);color:var(--body);max-width:40rem}
.row-v{font-size:var(--t-m);color:var(--dim);white-space:nowrap}
.row-a:hover .row-t{color:var(--brand-deep)}

/* ── 9 · the process ────────────────────────────────────────────────── */
.steps{display:grid;gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.step{background:var(--surface);border:0;border-radius:var(--r-l);box-shadow:var(--up);
  padding:clamp(1.1rem,2vw,1.4rem)}
.f-ink .step{background:var(--night);box-shadow:var(--up-dark)}
.step .d{font-size:var(--t-s);font-weight:650;color:var(--brand-deep);margin:0 0 .45rem}
.f-ink .step .d{color:#F5804F}
.step h3{font-size:var(--t-b);margin:0 0 .35rem}
.step p{font-size:var(--t-m);color:var(--body);margin:0;line-height:1.55}
.f-ink .step p{color:#B6BCC3}

/* ── 10 · numbers, pressed into the page ────────────────────────────── */
.numbers{padding-block:clamp(2.25rem,4.5vw,3.5rem)}
.numbers .shell > .stats{background:var(--surface);border-radius:var(--r-l);
  box-shadow:var(--press);padding:clamp(1.4rem,3vw,2.2rem)}
.stats{display:grid;gap:clamp(1rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.stat b{display:block;font-family:var(--fd);font-weight:680;letter-spacing:-.03em;
  font-size:clamp(1.875rem,1.3rem + 2.1vw,2.875rem);line-height:1.1;color:var(--brand-deep)}
.stat span{display:block;font-size:var(--t-m);color:var(--dim);margin-top:.3rem;max-width:13rem}
.f-ink .stat b{color:#F5804F}
.f-ink .stat span{color:#9AA1A9}

/* ── 11 · checks ────────────────────────────────────────────────────── */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.checks li{font-size:var(--t-b);color:var(--body);padding:1rem 1.2rem 1rem 2.9rem;
  position:relative;line-height:1.55;border-radius:var(--r);box-shadow:var(--up-sm)}
.checks li::before{content:"";position:absolute;left:1.1rem;top:1.25rem;width:14px;height:14px;
  border-radius:50%;background:var(--brand)}
.checks li strong{color:var(--ink)}
.f-ink .checks li{color:#B6BCC3;box-shadow:var(--up-dark)}
.f-ink .checks li strong{color:#fff}

/* ── 12 · article pages ─────────────────────────────────────────────── */
.phead{padding-block:clamp(2.5rem,5.5vw,4.5rem) clamp(1.75rem,3.5vw,2.75rem)}
.phead > .shell{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  column-gap:clamp(1.5rem,4vw,4rem);row-gap:1rem;align-items:start;
  grid-auto-rows:min-content}
.phead h1,.phead .h1{grid-column:1;grid-row:1;max-width:15em;margin:0 0 .3rem;
  font-size:clamp(1.625rem,1.1rem + 2.35vw,3.125rem);line-height:1.08;letter-spacing:-.03em}
.phead .lede{grid-column:1;grid-row:2;margin:0;max-width:31rem}
.phead .subhead{grid-column:1;grid-row:2}
.phead > .shell:has(.subhead) .lede{grid-row:3}
.phead .phead-body{grid-column:1;grid-row:4;font-size:var(--t-b);color:var(--body);
  max-width:36rem;margin:0}
.phead .crumb,.phead .crumbs{grid-column:2;grid-row:1;justify-self:end;text-align:right;
  font-size:var(--t-m);color:var(--dim);margin:0;display:flex;flex-wrap:wrap;gap:.3rem;
  align-items:center;justify-content:flex-end;padding-top:.4rem}
.phead .crumb a{color:var(--dim);text-decoration:none;min-height:var(--tap);
  display:inline-flex;align-items:center}
.phead .crumb a:hover{color:var(--ink)}
.phead-card{grid-column:2;grid-row:2 / span 5;align-self:start;margin:0;
  background:var(--surface);border:0;border-radius:var(--r-l);box-shadow:var(--up);
  padding:1.2rem 1.3rem}
.phead-card .when-line{font-size:var(--t-b);margin:0 0 .5rem}
.phead-card .when-note{margin:0 0 1.1rem}
.phead-card .btn-row{margin:0;gap:.6rem}
.phead-card .btn{flex:1 1 auto}
.phead-fig,.phead-when,.phead > .shell > .phead-cta{display:none}
@media (max-width:900px){
  .phead > .shell{grid-template-columns:minmax(0,1fr)}
  .phead > .shell > *{grid-column:1!important;grid-row:auto!important;
    justify-self:start!important;text-align:left!important}
  .phead h1,.phead .h1{order:1}.phead .subhead{order:2}.phead .lede{order:3}
  .phead .phead-body{order:4}.phead-card{order:5}
  .phead .crumb,.phead .crumbs{order:6;justify-content:flex-start;padding-top:0}
}

.article{max-width:38rem;font-size:var(--t-b);line-height:1.75;color:var(--body)}
.article h2{font-size:var(--t-h);line-height:1.2;margin:2.4em 0 .6em;letter-spacing:-.024em}
.article h2:first-child{margin-top:0}
.article h3,.article h3.h5{font-size:var(--t-l);margin:2em 0 .5em;color:var(--ink)}
.article p,.article li{max-width:38rem}
.article p{margin:0 0 1.15em}
.article ul,.article ol{margin:0 0 1.4em;padding-left:1.2em}
.article li{margin:0 0 .55em}
.article a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:2px}
.article a:hover{color:var(--ink)}
.article strong,.article b{font-weight:650;color:var(--ink)}
blockquote,.article blockquote{margin:1.8em 0;padding:1.2rem 1.4rem;border:0;
  border-radius:var(--r);box-shadow:var(--press);font-size:var(--t-l);line-height:1.55;
  color:var(--ink);max-width:none}
.byline{font-size:var(--t-m);color:var(--dim);margin:0 0 1.2rem}

.doc,.grid.split.doc{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,18rem)!important;
  gap:clamp(1.8rem,4vw,4rem);align-items:start}
.doc > .article{grid-column:1;grid-row:1}
.doc > .side{grid-column:2;grid-row:1;position:sticky;top:5.5rem;align-self:start}
@media (max-width:980px){
  .doc,.grid.split.doc{grid-template-columns:minmax(0,1fr)!important}
  .doc > .article,.doc > .side{grid-column:1;grid-row:auto;position:static}
  .doc > .side{margin-top:2.5rem}
}
.side{display:grid;gap:1.4rem}
.side-box{background:var(--surface);border:0;border-radius:var(--r-l);
  box-shadow:var(--up);padding:1.2rem}
.side-box .btn{width:100%;margin-top:.9rem}
.side-k{font-size:var(--t-m);font-weight:650;color:var(--ink);margin:0 0 .5rem}
.side-mail,.side-tel{display:flex;align-items:center;min-height:var(--tap);
  font-size:var(--t-m);font-weight:600;color:var(--body);text-decoration:none;
  word-break:break-word}
.side-mail:hover,.side-tel:hover{color:var(--brand-deep)}
.side-m{font-size:var(--t-s);color:var(--dim);margin:.4rem 0 0}
.side-note{font-size:var(--t-m);color:var(--dim);margin:0}
.side-nav{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--press);
  padding:1rem 1.2rem}
.side-nav ul{list-style:none;margin:0;padding:0}
.side-nav a{display:flex;align-items:center;min-height:var(--tap);font-size:var(--t-m);
  color:var(--body);text-decoration:none}
.side-nav a:hover{color:var(--brand-deep)}
.toc{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--press);
  padding:1rem 1.2rem}
.toc ol,.toc ul{list-style:none;margin:0;padding:0}
.toc-k{font-size:var(--t-m);font-weight:650;color:var(--ink);margin:0 0 .4rem}
.toc a{display:flex;align-items:center;min-height:var(--tap);font-size:var(--t-m);
  line-height:1.35;color:var(--dim);text-decoration:none}
.toc a:hover{color:var(--ink)}
.toc a[aria-current]{color:var(--brand-deep);font-weight:650}

.back{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--t-m);
  font-weight:600;color:var(--dim);text-decoration:none}
.back:hover{color:var(--ink)}
.pager{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
.pager-c{display:block;padding:1.1rem 1.25rem;border:0;border-radius:var(--r);
  box-shadow:var(--up-sm);text-decoration:none;color:inherit;transition:box-shadow .2s}
.pager-c:hover{box-shadow:var(--up)}
.pager-c .k{display:block;font-size:var(--t-s);color:var(--dim);margin-bottom:.25rem}
.pager-c .t{display:block;font-family:var(--fd);font-weight:650;font-size:var(--t-b);
  line-height:1.3;color:var(--ink);letter-spacing:-.014em}
.pager-c:hover .t{color:var(--brand-deep)}
.pager .nx,.pager > div{display:none}
.nav-band{padding-block:clamp(1.75rem,3.5vw,2.75rem)}

/* ── 13 · the close ─────────────────────────────────────────────────── */
.close{background:var(--surface);padding-block:clamp(3rem,6vw,5rem)}
.close > .shell > *{position:relative}
.close{position:relative}
.close::before{content:"";position:absolute;inset:clamp(1rem,3vw,2.5rem) clamp(.75rem,3vw,2rem);
  border-radius:var(--r-l);box-shadow:var(--up-lg);background:var(--surface)}
.close > .shell{position:relative;z-index:1;padding-block:clamp(1.5rem,3vw,2.5rem)}
.close h2{color:var(--ink);font-size:var(--t-d);line-height:1.1;letter-spacing:-.03em;
  max-width:13em;margin:0 0 .9rem}
.close p,.close .lede{color:var(--body)}
.close .small{color:var(--dim)}
.close-b{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;
  justify-content:space-between;margin-top:1.6rem}
.close-b p{max-width:32rem;margin:0}
.close-note{margin-top:1.6rem}
.btn-row--flush{margin:0}

/* ── 14 · footer ────────────────────────────────────────────────────── */
.ftr{background:var(--surface);padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:1.5rem;
  box-shadow:inset 0 9px 16px -12px var(--cast)}
.ftr-g{display:grid;grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);width:100%;max-width:78rem;margin-inline:auto;
  padding-inline:var(--gut)}
@media (max-width:860px){.ftr-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.ftr-g{grid-template-columns:minmax(0,1fr)}}
.ftr h3{color:var(--ink);font-size:var(--t-m);font-weight:650;margin:0 0 .7rem}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin:0}
.ftr a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--dim);
  text-decoration:none;font-size:var(--t-m)}
.ftr a:hover{color:var(--brand-deep)}
.ftr p,.ftr p.ftr-blurb{color:var(--dim);font-size:var(--t-m);max-width:19rem;line-height:1.65}
.ftr-b{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;justify-content:space-between;
  width:100%;max-width:78rem;margin-inline:auto;padding:1.6rem var(--gut) 0;margin-top:2rem;
  font-size:var(--t-s);color:var(--dim);box-shadow:inset 0 1px 0 var(--lift),0 -1px 0 var(--cast)}
.ftr-b a{font-size:inherit;color:var(--dim);min-height:0}
.ftr-name{display:none}

/* ── 15 · forms: pressed wells with a real focus ring ───────────────── */
label{display:block;font-size:var(--t-m);font-weight:600;color:var(--ink);margin:0 0 .4rem}
input,select,textarea{width:100%;font:inherit;font-size:var(--t-b);padding:.75rem 1rem;
  min-height:var(--tap);background:var(--surface);color:var(--ink);border:0;
  border-radius:14px;box-shadow:var(--press)}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:focus,select:focus,textarea:focus{outline:3px solid var(--brand-btn);outline-offset:2px}
.field{margin:0 0 1.2rem}
.hint{font-size:var(--t-s);color:var(--dim);margin:.35rem 0 0}
.rail{display:grid;gap:.6rem}
.rail > div{display:grid;grid-template-columns:minmax(6.5rem,auto) minmax(0,1fr);
  gap:.5rem 1rem;align-items:center;padding:.85rem 1.1rem;border:0;border-radius:var(--r);
  box-shadow:var(--up-sm)}
.rail span{font-size:var(--t-m);color:var(--dim)}
.rail p{margin:0;font-size:var(--t-m)}
.rail a{font-size:var(--t-m);color:var(--ink);text-decoration:none;min-height:var(--tap);
  display:inline-flex;align-items:center}
.rail a:hover{color:var(--brand-deep)}

/* ── 16 · the planner ───────────────────────────────────────────────── */
.plan{background:var(--surface);border:0;border-radius:var(--r-l);box-shadow:var(--up);
  padding:clamp(1.2rem,2.4vw,1.9rem)}
.plan-k{font-size:var(--t-m);font-weight:600;color:var(--dim);margin:0 0 .55rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.3rem}
.chip{font:inherit;font-size:var(--t-m);font-weight:600;min-height:var(--tap);
  padding:.4rem 1rem;border:0;border-radius:999px;background:var(--surface);
  color:var(--body);cursor:pointer;box-shadow:var(--up-sm);transition:box-shadow .18s,color .18s}
.chip:hover{color:var(--ink);box-shadow:var(--up)}
.chip.on,.chip[aria-pressed="true"]{color:var(--ink);font-weight:650;box-shadow:var(--press-sm)}
.chip em{display:none}
.plan-hd{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:baseline;
  justify-content:space-between;margin:0 0 1.1rem;padding-top:1.2rem;
  box-shadow:inset 0 1px 0 var(--lift),0 -1px 0 var(--cast)}
.plan-hd h3{font-size:var(--t-l)}
.plan-hd span{font-size:var(--t-m);color:var(--dim)}
.days{display:grid;grid-template-columns:repeat(28,minmax(0,1fr));gap:4px;margin:0 0 1rem;
  padding:.8rem;border-radius:var(--r);box-shadow:var(--press)}
@media (max-width:760px){.days{grid-template-columns:repeat(14,minmax(0,1fr))}}
.days i{display:block;aspect-ratio:1;background:var(--f-2);border-radius:3px;font-size:0;
  line-height:0;color:transparent}
.phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,7.5rem),1fr));
  gap:.6rem;margin:0 0 1.4rem}
.phases b{display:block;font-size:var(--t-m);font-weight:600;color:var(--ink)}
.phases span{display:none}
.plan-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:1.4rem;margin:0 0 1.4rem;padding-top:1.3rem;
  box-shadow:inset 0 1px 0 var(--lift),0 -1px 0 var(--cast)}
.crew,.drops{display:flex;flex-wrap:wrap;gap:.35rem .85rem;font-size:var(--t-m);color:var(--body)}
.plan-say{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  justify-content:space-between;padding-top:1.3rem;
  box-shadow:inset 0 1px 0 var(--lift),0 -1px 0 var(--cast)}
.plan-say p{margin:0;font-size:var(--t-m);color:var(--body);max-width:26rem}

/* ── 17 · odds ──────────────────────────────────────────────────────── */
.strip{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:var(--t-m);color:var(--dim);
  margin:0;padding:0;list-style:none}
.hot{color:inherit}
.n{display:none}
#swarm,.hero3d,.cityband,.nightband,.markband,.verb-fig,.sector-fig,.next-fig,
.close-fig,.mark-fig,.lp-band,.lp-fig{display:none}
.grid{display:grid;gap:clamp(1rem,2vw,1.4rem)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr))}
.grid.split{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:clamp(1.5rem,3.5vw,3.5rem);align-items:start}
.grid.split.lead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
@media (max-width:900px){.grid.split,.grid.split.lead{grid-template-columns:minmax(0,1fr)}}
.sectors{display:grid;gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr))}
.sector{display:block;background:var(--surface);border:0;border-radius:var(--r-l);
  box-shadow:var(--up);padding:clamp(1.2rem,2.2vw,1.6rem);text-decoration:none;color:inherit;
  transition:box-shadow .22s,transform .22s}
.sector:hover{box-shadow:var(--up-lg);transform:translateY(-3px)}
.sector h3{font-size:var(--t-l);margin:0 0 .45rem}
.sector p{margin:0;font-size:var(--t-b);color:var(--body)}
.arrow{display:inline-flex;align-items:center;gap:.3rem;min-height:var(--tap);
  font-size:var(--t-m);font-weight:650;color:var(--brand-deep);text-decoration:none}
.arrow:hover{gap:.5rem}
.acc{display:grid;gap:.7rem}
.acc details{border:0;border-radius:var(--r);box-shadow:var(--up-sm);
  padding:0 1.2rem;transition:box-shadow .2s}
.acc details[open]{box-shadow:var(--press)}
.acc summary{cursor:pointer;padding:1rem 0;font-family:var(--fd);font-weight:650;
  font-size:var(--t-b);color:var(--ink);list-style:none;min-height:var(--tap);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--brand-deep);font-weight:600;font-size:1.25em}
.acc details[open] summary::after{content:"\2212"}
.acc details p{margin:0 0 1.1rem;font-size:var(--t-b);color:var(--body);max-width:40rem}
.pic{display:block;width:100%;height:auto;border-radius:var(--r);box-shadow:var(--up)}

/* ── 18 · mobile ────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .nav-l{display:none}
  .hdr .soc{display:none}
  .burger{display:inline-flex;align-items:center;order:3;margin-left:.4rem}
  .hdr .btn--sm{order:2;margin-left:auto}
}
@media (max-width:430px){
  :root{--gut:1rem}
  .hdr .nav{gap:.3rem}
  .brand{font-size:.8125rem;gap:.4rem}
  .brand .mk{padding:5px;grid-template-columns:repeat(7,2.5px)}
  .brand .mk i{width:2.5px;height:2.5px}
  .hdr .btn--sm{padding:.45rem .7rem;font-size:.8125rem}
  .burger{padding:0 .6rem;font-size:.8125rem}
}
.mnav{display:none;position:fixed;inset:0;z-index:70;background:var(--surface);
  padding:4.5rem var(--gut) 2rem;overflow-y:auto}
.mnav.on{display:grid;gap:.6rem;align-content:start}
.mnav a{display:flex;align-items:center;min-height:58px;padding:0 1.2rem;
  font-family:var(--fd);font-weight:650;font-size:1.25rem;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;border-radius:var(--r);box-shadow:var(--up-sm)}
.mnav a:active{box-shadow:var(--press-sm)}
.mnav .soc{display:flex;gap:.6rem;margin-top:1rem}
.mnav .soc a{font-size:0;width:var(--tap);height:var(--tap);display:grid;place-items:center;
  min-height:0;padding:0}
.mnav .soc svg{width:19px;height:19px}
body.locked{overflow:hidden}
.skip{position:fixed;top:.6rem;left:.6rem;z-index:99;transform:translateY(-200%)}
.skip:focus{transform:none}

/* ── 19 · motion ────────────────────────────────────────────────────── */
.js .rv{opacity:0;transform:translateY(14px)}
.js .rv.in{opacity:1;transform:none;
  transition:opacity .55s var(--e-soft) var(--d,0ms),transform .55s var(--e-soft) var(--d,0ms)}
.js .rv-s > *{opacity:0;transform:translateY(12px)}
.js .rv-s.in > *{opacity:1;transform:none;
  transition:opacity .5s var(--e-soft),transform .5s var(--e-soft)}
.js .rv-s.in > :nth-child(1){transition-delay:0ms}
.js .rv-s.in > :nth-child(2){transition-delay:60ms}
.js .rv-s.in > :nth-child(3){transition-delay:120ms}
.js .rv-s.in > :nth-child(4){transition-delay:180ms}
.js .rv-s.in > :nth-child(5){transition-delay:240ms}
.js .rv-s.in > :nth-child(6){transition-delay:300ms}
.js .rv-s.in > :nth-child(n+7){transition-delay:360ms}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .js .rv,.js .rv-s > *{opacity:1;transform:none}
}

/* ═══ 20 · openings without a start card ═════════════════════════════ */
/* Contact, thank-you and 404 carry no card in the second column, which
   left the right half of the opening empty. Their copy takes the width. */
.phead > .shell:not(:has(.phead-card)) h1,
.phead > .shell:not(:has(.phead-card)) .lede,
.phead > .shell:not(:has(.phead-card)) .phead-body{grid-column:1 / -1;max-width:44rem}
.phead > .shell:not(:has(.phead-card)) h1{max-width:17em}
/* and the first band under an opening sits closer to it */
.phead + .band,.phead + section{padding-top:clamp(2rem,4vw,3rem)}

/* ── 21 · the partnership: two places, one piece of work ─────────────
   Two raised cards with a pressed channel running between them. The
   channel carries four dots and the last one is brand orange, which is
   the same idea as the logo — twenty-seven cells and then the twenty-
   eighth. On a phone the channel turns and runs downward instead, so the
   two places read top to bottom rather than side by side. */
.pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(.9rem,2vw,1.6rem);align-items:stretch}
.pair-c{display:flex;flex-direction:column;background:var(--surface);
  border-radius:var(--r-l);box-shadow:var(--up);
  padding:clamp(1.3rem,2.4vw,1.9rem)}
.f-ink .pair-c{background:var(--night);box-shadow:var(--up-dark)}
.pair-k{margin:0 0 .45rem;font-size:var(--t-s);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--brand-deep)}
.f-ink .pair-k{color:#F5804F}
.pair-c h3{font-size:var(--t-l);margin:0 0 .55rem}
.pair-c > p{margin:0 0 .75rem;font-size:var(--t-b);color:var(--body)}
.f-ink .pair-c > p{color:#B6BCC3}
.pair-c .tags{margin:.2rem 0 0}
/* the address sits at the foot of the card whatever the card above it does,
   so the two addresses line up with each other across the pair */
.pair-a{margin:auto 0 0;padding-top:1.1rem;font-size:var(--t-m);
  line-height:1.55;color:var(--dim);font-style:normal}
.f-ink .pair-a{color:#9AA1A9}
.pair-a b{display:block;color:var(--ink);font-weight:650}
.f-ink .pair-a b{color:#fff}

/* a short centred capsule, not a full-height one: run it the whole height
   of the cards and it reads as a scrollbar rather than as a link between
   two places. */
.pair-link{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;width:34px;height:124px;align-self:center;
  border-radius:999px;box-shadow:var(--press-sm)}
.f-ink .pair-link{box-shadow:var(--press-dark)}
.pair-link i{display:block;width:6px;height:6px;border-radius:50%;
  background:var(--dim);opacity:.4}
.pair-link i:last-child{background:var(--brand);opacity:1}

.pair-note{margin:clamp(1.1rem,2.2vw,1.6rem) 0 0;max-width:46rem;
  font-size:var(--t-m);color:var(--dim)}
.f-ink .pair-note{color:#9AA1A9}

@media (max-width:860px){
  .pair{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .pair-link{flex-direction:row;width:auto;height:30px;justify-self:center;
    padding-inline:14px}
}

/* ── 22 · the two offices in the footer, and the line by the wordmark ── */
.ftr-office{margin:1.1rem 0 0;padding-top:1rem;font-size:var(--t-m);
  line-height:1.6;color:var(--dim);box-shadow:inset 0 1px 0 var(--lift)}
.ftr-office span{display:block}
.ftr-office b{color:var(--ink);font-weight:650}
/* A quiet line beside the wordmark. It is hidden under 1024px because the
   header there is already carrying a logo, a menu button and a button —
   the same words are in the footer and in the partnership section, so
   nothing is lost by letting the header breathe on a phone. */
.brand em{font-style:normal;font-size:var(--t-s);font-weight:600;
  color:var(--dim);letter-spacing:.01em;padding-left:.6rem;margin-left:.15rem;
  box-shadow:inset 1px 0 0 var(--cast)}
@media (max-width:1023px){.brand em{display:none}}
/* an inline link inside the footer office lines stays inline: the footer's
   own rule turns links into 44px flex rows, which is right for a menu and
   wrong for a word inside a sentence (WCAG 2.5.8 exempts inline links). */
.ftr-office-a{display:flex;align-items:center;min-height:var(--tap);
  font-size:inherit;color:var(--dim);text-decoration:none;border-radius:10px;
  margin-inline:-.55rem;padding-inline:.55rem;transition:box-shadow .2s,color .2s}
.ftr-office-a:hover{color:var(--ink);box-shadow:var(--up-sm)}
.ftr-office-a b{margin-right:.35ch}
/* an <address> should not lean */
address{font-style:normal}

/* ── 23 · the work page: products and client sites ──────────────────── */
.works{display:grid;gap:clamp(1rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,23rem),1fr))}
.work{display:flex;flex-direction:column;background:var(--surface);
  border-radius:var(--r-l);box-shadow:var(--up);
  padding:clamp(1.3rem,2.4vw,1.9rem)}
.f-ink .work{background:var(--night);box-shadow:var(--up-dark)}
.work-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.35rem}
.work-h h3{font-size:var(--t-h);margin:0;letter-spacing:-.02em}
/* a small pressed badge, for the one product that cannot simply be opened */
.work-lock{font-size:var(--t-s);font-weight:650;color:var(--dim);
  padding:.3rem .75rem;border-radius:999px;box-shadow:var(--press-sm)}
.f-ink .work-lock{color:#9AA1A9;box-shadow:var(--press-dark)}
.work-l{margin:0 0 .7rem;font-size:var(--t-l);font-weight:600;color:var(--brand-deep)}
.f-ink .work-l{color:#F5804F}
.work-b{margin:0 0 .9rem;font-size:var(--t-b);color:var(--body)}
.f-ink .work-b{color:#B6BCC3}
.work .tags{margin:0}
/* the button sits at the foot of the card, so buttons line up across a row
   however much text sits above them */
.work-cta{margin:auto 0 0;padding-top:1.2rem}
/* full width in a narrow card, capped in a wide one: a single card on a
   row stretches to the whole grid, and a 1100px button looks like a
   mistake rather than a call to action. */
.work-cta .btn{width:100%;max-width:22rem;justify-content:center}

/* The draft marker. It is loud on purpose: it exists so that nothing
   unconfirmed can reach a visitor without somebody noticing first, and a
   quiet warning is one nobody acts on. Removed from the card as soon as
   the text and the link are right. */
.work-draft{margin:1.1rem 0 0;padding:.85rem 1rem;border-radius:var(--r-s);
  font-size:var(--t-m);line-height:1.55;color:#7A3A05;background:#FFF4E8;
  box-shadow:inset 0 0 0 2px #E8A05C}
.work-draft b{display:block;font-weight:700;color:#8A2D05;
  letter-spacing:.04em;text-transform:uppercase;font-size:var(--t-s);
  margin-bottom:.25rem}
.f-ink .work-draft{color:#2A1A08;background:#F6C68A;box-shadow:inset 0 0 0 2px #B9731F}
.f-ink .work-draft b{color:#6B2404}

/* ── 24 · the partner lockup ─────────────────────────────────────────
   Two marks and a small multiplication sign, which is how a partnership
   is usually set and reads as equal billing rather than as a logo soup.
   Both marks are capped by height, never by width, so neither one wins by
   being drawn on a wider canvas than the other. */
.lockup{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.5rem);
  margin:0 0 clamp(1.6rem,3vw,2.4rem);padding:clamp(.9rem,1.8vw,1.25rem) 0}
.lockup-m,.lockup-p{width:auto;height:clamp(30px,3.6vw,42px);flex:0 0 auto}
.f-ink .lockup-m,.f-ink .lockup-p{filter:invert(1) brightness(1.9)}
.lockup-x{font-size:clamp(1rem,1.8vw,1.35rem);color:var(--dim);font-weight:300}
/* the stand-in while we are waiting for the real mark */
.lockup-t{font-family:var(--fd);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.25rem,2.4vw,1.75rem);color:var(--ink)}
.f-ink .lockup-t{color:#fff}
@media (max-width:520px){.lockup{flex-wrap:wrap;gap:.75rem}}

/* the partner's mark beside the wordmark in the header */
.brand-p{height:18px;width:auto;display:block}