/* Tektura — site stylesheet
   Hand-written. No framework, no reset library.
   Everything here follows the brand guidelines (Business/Brand/Tektura brand guidelines.pdf):
   one dark, one light, one accent; IBM Plex; and the corner rule on every rectangle —
   top-right and bottom-left rounded, top-left and bottom-right square. */

/* ---------- Fonts (self-hosted, SIL Open Font Licence) ---------- */
@font-face{font-family:"Plex";src:url("../fonts/plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/plex-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/plex-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"PlexMono";src:url("../fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --ink:#12161B;
  --paper:#F2F1EE;
  --white:#FFFFFF;
  --slate:#5C6470;
  --rule:#DEDCD6;
  --signal:#C2410C;
  --signal-dark:#E8590C;
  --body:#333B45;
  --tint:#F6CDBA;           /* pale orange: large type on signal or ink only — 3.5:1 on signal, so never for small text */

  --sans:"Plex",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"PlexMono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* The radius scale — roughly 22% of the element's height, capped at 30px */
  --r-tag:6px;
  --r-btn:10px;
  --r-tab:16px;
  --r-card:19px;
  --r-img:30px;

  --gutter:clamp(16px,4vw,40px);
  --max:1120px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;display:block}
[hidden]{display:none !important}
a{color:var(--signal);text-decoration:none;border-bottom:1px solid currentColor;transition:color .15s ease}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:2px}
::selection{background:var(--signal);color:var(--paper)}
p{margin:0 0 1em;max-width:62ch;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--rule);margin:0}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;border:0;z-index:100}
.skip:focus{left:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- The corner rule ---------- */
.tab{border-bottom-left-radius:var(--r,var(--r-card));border-top-right-radius:var(--r,var(--r-card))}
.r-tag{--r:var(--r-tag)} .r-btn{--r:var(--r-btn)} .r-tab{--r:var(--r-tab)} .r-card{--r:var(--r-card)} .r-img{--r:var(--r-img)}

/* ---------- Type ---------- */
.display{font-weight:600;font-size:clamp(34px,5.4vw,56px);line-height:1.08;letter-spacing:-0.005em;margin:0;text-wrap:balance}
h1,h2,h3,h4{margin:0;line-height:1.14;font-weight:600;text-wrap:balance}
h2{font-size:clamp(24px,3vw,30px);letter-spacing:0.06em;text-transform:uppercase}
h3{font-size:20px;letter-spacing:0.08em;text-transform:uppercase;line-height:1.3}
h4{font-size:17px;letter-spacing:0.02em}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--ink);max-width:56ch}
.small{font-size:14px;line-height:1.5;color:var(--slate)}
.muted{color:var(--slate)}
.mono{font-family:var(--mono)}
.label{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--slate);line-height:1.4}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Section heading tab — the orange "entry" per section */
.htab{display:inline-block;background:var(--signal);color:var(--paper);font-weight:600;font-size:clamp(20px,2.4vw,26px);line-height:1.15;letter-spacing:0.07em;text-transform:uppercase;padding:14px 26px 14px 22px;border-bottom-left-radius:var(--r-tab);border-top-right-radius:var(--r-tab);margin:0 0 24px}
.htab.ink{background:var(--ink)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(56px,8vw,104px)}
.section.tight{padding-block:clamp(16px,3vw,40px)}
.grid{display:grid;gap:clamp(20px,3vw,32px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.stack>*+*{margin-top:var(--stack,16px)}
.flow>*+*{margin-top:1em}
.row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.between{justify-content:space-between}
.dark{background:var(--ink);color:var(--paper)}
.dark .small,.dark .muted,.dark .label{color:#A7B0BA}
.dark a{color:var(--signal-dark)}
.dark a:hover{color:var(--paper)}
.dark h2,.dark h3{color:var(--paper)}
.dark p{color:#D6DADF}

/* ---------- Surfaces ---------- */
.card{background:var(--white);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);padding:clamp(22px,3vw,32px)}
.card.ink{background:var(--ink);color:var(--paper)}
.card.ink .small,.card.ink .label{color:#A7B0BA}
.card.ink p{color:#D6DADF}
.card.signal{background:var(--signal);color:var(--paper)}
.card.signal .label,.card.signal .small{color:var(--paper)}
.card.signal p{color:var(--paper)}
.card.paper{background:var(--paper)}
.tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--slate);background:var(--paper);padding:6px 11px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);line-height:1.2;white-space:nowrap}
.card .tag{background:var(--paper)}
.tag.white{background:var(--white)}
.tag.ink{background:var(--ink);color:var(--paper)}
.tag.signal{background:var(--signal);color:var(--paper)}
.tag.live{background:#E6EFE7;color:#1E6B3A}
.photo{background:radial-gradient(70% 90% at 32% 18%,#D08A52 0%,#9A4A22 38%,#3A2018 72%,#1A1216 100%);border-bottom-left-radius:var(--r-img);border-top-right-radius:var(--r-img);aspect-ratio:4/3;overflow:hidden;position:relative}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .cap{position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:var(--paper);padding:12px 18px;font-size:14px;font-weight:500;border-top-right-radius:var(--r-btn)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--signal);color:var(--paper);font-weight:500;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;padding:15px 24px;border:0;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);line-height:1.2;cursor:pointer;transition:background .15s ease,transform .15s ease;font-family:var(--sans);white-space:nowrap}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn.ink{background:var(--ink)}
.btn.ink:hover{background:var(--signal)}
.btn.white{background:var(--white);color:var(--ink)}
.btn.white:hover{background:var(--ink);color:var(--paper)}
.btn.quiet{background:transparent;color:var(--ink);padding-inline:0;border-bottom:1px solid var(--ink);border-radius:0;text-transform:none;letter-spacing:0;font-size:16px;font-weight:500;padding-block:2px}
.btn.quiet:hover{color:var(--signal);border-color:var(--signal)}
.btn[disabled]{opacity:.55;cursor:default}

/* ---------- Header device: white bar, ink chip let into the end ---------- */
/* The header is transparent at rest — over the hero it would be paper on paper
   anyway — and becomes a solid paper bar with a hairline once you have scrolled.
   The gradient it used to carry was invisible on paper and a pale smear over the
   dark band. Padding is identical in both states so nothing jumps. */
.site-head{padding:18px 0 10px;position:sticky;top:0;z-index:50;background:transparent;transition:background-color .18s ease,box-shadow .18s ease}
.site-head.stuck{background:var(--paper);box-shadow:0 1px 0 var(--rule)}
@media (prefers-reduced-motion:reduce){.site-head{transition:none}}
.bar{position:relative;display:flex;align-items:center;gap:24px;background:var(--white);border-bottom-left-radius:var(--r-tab);border-top-right-radius:var(--r-tab);padding:10px 18px 10px 20px;min-height:60px;box-shadow:0 1px 0 rgba(18,22,27,.03)}
.bar .brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);border:0;font-weight:600;letter-spacing:0.10em;font-size:17px;line-height:1}
.bar .brand svg{width:26px;height:26px;color:var(--ink)}
.bar nav{display:flex;gap:6px;margin-left:auto;margin-right:150px}
.bar nav a{border:0;color:var(--ink);font-size:14px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;padding:9px 12px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.bar nav a:hover,.bar nav a[aria-current="page"]{background:var(--paper)}
.bar .chip{position:absolute;top:0;right:0;bottom:0;display:inline-flex;align-items:center;background:var(--ink);color:var(--paper);padding:0 22px;font-size:13px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;border:0;border-bottom-left-radius:var(--r-tab);border-top-right-radius:var(--r-tab);transition:background .15s ease}
.bar .chip:hover{background:var(--signal);color:var(--paper)}
.bar .menu{display:none;margin-left:auto;background:var(--paper);border:0;font:inherit;font-size:13px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;padding:10px 14px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);cursor:pointer}
@media (max-width:860px){
  .bar nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--white);flex-direction:column;padding:12px;border-bottom-left-radius:var(--r-tab);border-top-right-radius:var(--r-tab);margin:0}
  .bar nav.open{display:flex}
  .bar nav a{padding:12px 14px}
  .bar .menu{display:inline-block;margin-right:130px}
  .bar .chip{padding:0 16px;font-size:12px}
}
@media (max-width:480px){.bar .brand span{display:none}.bar .menu{margin-right:118px}}

/* ---------- Footer device: same construction ---------- */
.site-foot{padding:clamp(48px,7vw,88px) 0 28px}
.foot-bar{position:relative;background:var(--white);border-bottom-left-radius:var(--r-tab);border-top-right-radius:var(--r-tab);padding:14px 20px;display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--slate);min-height:48px;margin-top:32px}
.foot-bar .chip{position:absolute;top:0;right:0;bottom:0;display:inline-flex;align-items:center;background:var(--ink);color:var(--paper);padding:0 18px;border:0;border-bottom-left-radius:var(--r-tab);border-top-right-radius:var(--r-tab);font-family:var(--mono);letter-spacing:0.12em}
.foot-bar .chip:hover{background:var(--signal)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}
.foot-grid a{border:0;color:var(--ink)}
.foot-grid a:hover{color:var(--signal)}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:0 0 8px}
.lockup{display:inline-flex;align-items:center;gap:14px;color:var(--ink);border:0;font-weight:600;letter-spacing:0.10em;font-size:22px;line-height:1}
.lockup svg{width:40px;height:40px}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(40px,7vw,96px) clamp(20px,4vw,48px)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero .actions{margin-top:32px}
.avail{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate);background:var(--white);padding:9px 14px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.avail i{width:8px;height:8px;background:var(--signal);border-radius:50%;display:inline-block}
.avail:empty{display:none}

/* The system picture: a site and the pieces behind it, drawn in the brand's own shapes */
.system{position:relative;display:grid;gap:12px;padding:8px}
.system .piece{background:var(--white);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.system.in .piece{opacity:1;transform:none}
.system .piece:nth-child(2){transition-delay:.12s}.system .piece:nth-child(3){transition-delay:.24s}.system .piece:nth-child(4){transition-delay:.36s}.system .piece:nth-child(5){transition-delay:.48s}
.system .piece.ink{background:var(--ink);color:var(--paper)}
.system .piece.signal{background:var(--signal);color:var(--paper)}
.system .piece.signal .label{color:var(--paper)}
.system .piece.ink .label{color:#A7B0BA}
.system .piece strong{font-weight:600;font-size:16px;display:block}
.system .piece .label{margin-top:3px;display:block}
.system .piece .pill{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;background:var(--paper);color:var(--slate);border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);white-space:nowrap}
.system .piece.ink .pill{background:#1E242C;color:#C2C8CE}
.system .piece.signal .pill{background:#A33409;color:var(--paper)}
.system .link{margin-left:20px;width:2px;height:12px;background:var(--rule)}
@media (prefers-reduced-motion:reduce){.system .piece{opacity:1;transform:none;transition:none}}

/* ---------- Proof strip ---------- */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:860px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.strip .cell{background:var(--white);padding:18px 20px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.strip .cell b{display:block;font-size:15px;margin-bottom:4px}

/* ---------- Case study cards ---------- */
.case{display:grid;grid-template-rows:auto 1fr;background:var(--white);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);overflow:hidden;color:var(--ink);border:0;transition:transform .2s ease}
.case:hover{transform:translateY(-3px);color:var(--ink)}
.case .photo{border-radius:0;border-top-right-radius:var(--r-card);aspect-ratio:16/10}
.case .body{padding:22px 24px 26px}
.case .body h3{margin:10px 0 8px;font-size:18px;letter-spacing:0.04em}
.case .body p{font-size:15px;color:var(--body)}

/* ---------- Steps ---------- */
.steps{counter-reset:step;display:grid;gap:12px}
.step{display:grid;grid-template-columns:64px 1fr;gap:18px;background:var(--white);padding:20px 22px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);align-items:start}
.step .n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--paper);background:var(--ink);display:inline-flex;align-items:center;justify-content:center;width:52px;height:36px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.step h4{margin-bottom:6px}
.step p{font-size:15px;color:var(--body);max-width:none}

/* ---------- Tables ---------- */
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--slate);font-weight:400}
.table-wrap{overflow-x:auto}

/* ---------- Forms ---------- */
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.input,textarea,select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:0;padding:14px 16px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .15s ease}
.card .input,.card textarea,.card select{background:var(--paper)}
.input:focus,textarea:focus,select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--signal)}
textarea{min-height:140px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--body)}
.check input{margin-top:5px;accent-color:var(--signal)}
.note{font-size:14px;color:var(--slate)}
.error{color:var(--signal);font-size:14px}
.ok{background:var(--ink);color:var(--paper);padding:18px 20px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}

/* ---------- Estimator ---------- */
.est{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,32px);align-items:start}
@media (max-width:860px){.est{grid-template-columns:1fr}}
.q{background:var(--white);padding:22px 24px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.q h4{margin-bottom:12px}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--paper);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);cursor:pointer;font-size:15px}
.opt:has(input:checked){background:var(--ink);color:var(--paper)}
.opt:has(input:checked) .small{color:#A7B0BA}
.opt input{margin-top:4px;accent-color:var(--signal)}
.opt .small{display:block}
/* Sticky, but never taller than the viewport it sits in — with ten parts the panel
   can outgrow a laptop screen, and a sticky panel you cannot reach the bottom of is a trap. */
.result{position:sticky;top:96px;max-height:calc(100vh - 112px);overflow:auto}
.result .big{font-weight:600;font-size:clamp(30px,4vw,44px);line-height:1.05;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.result .days{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--tint)}
/* ---------- The estimate, measured ----------
   Each part of the quote is a bar on a track ticked every two days: solid paper up
   to the low estimate, a lighter band on to the high, so the range is visible as
   well as the number. Bars extend or shorten when an answer changes rather than
   being rebuilt, and the price ticks to its new value. Paper on ink; the button
   stays the one signal on the panel. */
.breakdown{list-style:none;padding:0;margin:16px 0 0;font-size:14px;--max:1}
.breakdown li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name days" "bar bar";gap:7px 12px;padding:9px 0 11px;border-top:1px solid rgba(255,255,255,.14)}
.breakdown li>span:first-child{grid-area:name}
.breakdown li .d{grid-area:days;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:#C2C8CE;font-variant-numeric:tabular-nums}
.breakdown .gauge{grid-area:bar;position:relative;display:block;height:8px;overflow:hidden;border-bottom-left-radius:2px;border-top-right-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px calc(100% / var(--max) * 2))}
.breakdown .gauge i,.breakdown .gauge b{position:absolute;inset:0;transform-origin:left;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.breakdown .gauge i{background:rgba(242,241,238,.3);transform:scaleX(var(--hi,0))}
.breakdown .gauge b{background:var(--paper);transform:scaleX(var(--lo,0))}
.breakdown li.new .gauge i,.breakdown li.new .gauge b{transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){.breakdown .gauge i,.breakdown .gauge b{transition:none}}

/* ---------- Accent bar for a caveat ---------- */
.caveat{display:flex;gap:16px;align-items:flex-start}
.caveat::before{content:"";width:6px;align-self:stretch;background:var(--signal);border-bottom-left-radius:4px;border-top-right-radius:4px;flex-shrink:0}
.caveat p{font-size:15px;color:var(--body)}

/* ---------- Prose (case studies, terms) ---------- */
.prose{max-width:66ch}
.prose h2{margin:48px 0 16px;font-size:22px}
.prose h3{margin:32px 0 10px;font-size:16px}
.prose ul{padding-left:20px}
.prose li{margin:6px 0}
.prose .label{margin-top:40px;margin-bottom:8px;display:block}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Print ---------- */
@media print{.site-head,.site-foot,.btn,.avail{display:none !important}body{background:#fff}}

/* ---------- Scrollbars ---------- */
/* Same shape as everything else: an ink thumb with the corner rule, on a paper track.
   On dark surfaces the thumb is paper. Firefox gets the colours; the shape is Chromium/Safari. */
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:var(--ink) var(--paper)}
  .dark,.card.ink,.rail,.result{scrollbar-color:var(--paper) var(--ink)}
}
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-button{display:none;height:0;width:0}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--ink);border:3px solid var(--paper);border-bottom-left-radius:5px;border-top-right-radius:5px;background-clip:padding-box;min-height:40px}
::-webkit-scrollbar-thumb:hover{background:var(--signal);background-clip:padding-box}
::-webkit-scrollbar-corner{background:var(--paper)}
.dark::-webkit-scrollbar-track,.card.ink::-webkit-scrollbar-track,.rail::-webkit-scrollbar-track{background:var(--ink)}
.dark::-webkit-scrollbar-thumb,.card.ink::-webkit-scrollbar-thumb,.rail::-webkit-scrollbar-thumb{background:var(--paper);border-color:var(--ink)}
.dark::-webkit-scrollbar-thumb:hover,.card.ink::-webkit-scrollbar-thumb:hover,.rail::-webkit-scrollbar-thumb:hover{background:var(--signal-dark)}
.card ::-webkit-scrollbar-track,.panel ::-webkit-scrollbar-track{background:var(--white)}
.card ::-webkit-scrollbar-thumb,.panel ::-webkit-scrollbar-thumb{border-color:var(--white)}

/* ---------- The mark as a background device ----------
   The mark is a square and a band is a wide, short rectangle, so the only placement
   that does not look accidental is this one: a fraction of the band's height, sitting
   inside the top and bottom edges, running off one side. One clean cut, on one edge.
   It needs a tall band with room in it; on a short or busy band, leave it out. */
.section{position:relative;isolation:isolate}
.dark>.wrap{position:relative;z-index:1}
.mark-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.mark-bg svg{position:absolute;top:50%;transform:translateY(-50%);height:var(--mh,56%);width:auto;opacity:var(--mo,.09);color:currentColor}
.mark-bg.r svg{right:-9%}
.mark-bg.l svg{left:-9%}
@media (max-width:860px){.mark-bg{display:none}}

/* ---------- Icons ----------
   Drawn on the mark's own geometry: a 24 x 24 field, right angles only, and the
   corner rule on every rectangle — top-right and bottom-left rounded, the other two
   square. 2px stroke, butt caps, mitred joins, so they sit at the weight of the type.
   Ink, not signal: the guidelines give signal three jobs and these are not one of them.
   An icon never gets a line to itself; it sits on the line it belongs to. */
.ico{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;color:var(--ink)}
.strip .cell b{display:flex;align-items:center;gap:9px}
.strip .cell .ico{width:17px;height:17px;flex:none}

/* ---------- The system, in the hero ----------
   The four pieces as before. A spine draws down beside them and a dot walks it,
   each piece lighting as the dot arrives. The dot is ink, not signal: ink carries
   structure, and signal is already doing its one job on this view — the button.
   The switch underneath shows what a page builder gives you instead. */
.system{padding-left:30px}
/* The spine grows by height rather than scaleY: a lingering transform leaves the
   line on its own composited layer, and at a fractional x that rasterises soft.
   Absolutely positioned, so growing it costs no layout. */
.system .spine{position:absolute;left:12px;top:8px;width:2px;height:0;background:var(--rule);z-index:0}
.system.in .spine{transition:height 1.1s cubic-bezier(.4,0,.2,1) .5s;height:calc(100% - 16px)}
/* The dot moves by transform, not by top. Animating top repaints the dot and the
   spine under it on every frame, which is what left the fringing around it. */
.system .dot{position:absolute;left:9px;top:8px;width:8px;height:8px;background:var(--ink);border-bottom-left-radius:2px;border-top-right-radius:2px;z-index:2;opacity:0;
  transform:translate3d(0,0,0);will-change:transform,opacity;
  transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .28s ease}
.system.in .dot{opacity:1}
.system .dot.jump{opacity:0}
.system .piece{position:relative;z-index:1;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),background-color .35s,color .35s,border-bottom-left-radius .4s cubic-bezier(.2,.7,.2,1),border-top-right-radius .4s cubic-bezier(.2,.7,.2,1)}
.system .piece .pill{transition:background-color .3s,color .3s}
.system .piece.lit .pill{background:var(--ink);color:var(--paper)}
.system .piece.ink.lit .pill{background:var(--paper);color:var(--ink)}
.system .piece.signal.lit .pill{background:var(--paper);color:var(--signal)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .system .piece:hover{transform:translateY(-3px);border-bottom-left-radius:calc(var(--r-card) * 1.6);border-top-right-radius:calc(var(--r-card) * 1.6)}
}
/* the other state: what a page builder gives you */
.system .piece .alt{display:none}
.system.builder .piece .alt{display:block}
.system.builder .piece .own{display:none}
.system .pill .alt{display:none}
.system.builder .pill .alt{display:inline}
.system.builder .piece{background:var(--white);color:var(--slate)}
.system.builder .piece .label{color:#8A939E}
.system.builder .piece .pill{background:var(--paper);color:#8A939E}
.system.builder .piece.off{background:transparent;outline:1px dashed var(--rule);outline-offset:-1px}
.system.builder .spine{background:repeating-linear-gradient(var(--rule) 0 6px,transparent 6px 14px)}
.system.builder .dot{opacity:0}
/* The stack and its switch are one column of the hero grid, or the switch wraps
   onto a second row and lands under the headline. */
.sys-col{min-width:0}
.switch{display:inline-flex;align-items:center;gap:11px;margin:14px 0 0 30px;background:transparent;border:0;padding:0;color:var(--slate);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.switch:hover{color:var(--ink)}
.switch .track{position:relative;flex:none;width:38px;height:22px;background:var(--rule);border-bottom-left-radius:6px;border-top-right-radius:6px}
.switch .track::after{content:"";position:absolute;top:4px;left:4px;width:14px;height:14px;background:var(--ink);border-bottom-left-radius:4px;border-top-right-radius:4px;transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s}
.switch[aria-pressed="true"] .track::after{transform:translateX(16px);background:var(--slate)}
@media (prefers-reduced-motion:reduce){.system .spine{transform:none;transition:none}.system .dot{display:none}}

/* ---------- The intro ----------
   The mark drafts itself in outline, floods with paper from the bottom up, the
   wordmark wipes in beside it to the guidelines-cover lockup, a signal rule draws
   underneath and the descriptor follows. The finished lockup then holds for half a
   second before the panel parts at the half — the cover's own 50/50 split — the top
   half rounding its bottom-left corner as it rises and the bottom half its top-right
   as it falls, which is the corner rule shared across two pieces.

   Every duration and delay is a multiple of --t, so the whole sequence retimes from
   one number. --t:1s runs about three and a half seconds end to end; .7s makes it
   brisk. Home page only, once a session, and any click, key or scroll skips it.

   The flood is a clipped wrapper rather than an animated fill: interpolating a fill
   from transparent goes through a muddy grey.

   Two safeguards. Every exit is a CSS animation with forwards fill, so the panel
   clears itself even if no script ever runs; and it is skipped outright for anyone
   who has asked for less motion. */
.intro{position:fixed;inset:0;z-index:200;pointer-events:none;
  --t:1s;                                     /* the one number that retimes it all */
  --m:clamp(64px,8.6vw,124px);
  animation:intro-gone 0s linear calc(var(--t) * 3.62) forwards}
.intro-half{position:absolute;left:0;right:0;height:50.2%;background:var(--ink);will-change:transform}
.intro-half.t{top:0;animation:intro-part-t calc(var(--t) * .74) cubic-bezier(.65,0,.35,1) calc(var(--t) * 2.88) forwards}
.intro-half.b{bottom:0;animation:intro-part-b calc(var(--t) * .74) cubic-bezier(.65,0,.35,1) calc(var(--t) * 2.88) forwards}
.intro-mid{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:calc(var(--m) * .28);
  animation:intro-lift calc(var(--t) * .34) cubic-bezier(.5,0,.2,1) calc(var(--t) * 2.5) forwards}

/* The lockup, to the ratios on the cover of the guidelines: mark 38mm, gap
   12.67mm, wordmark 65.82pt — a gap of exactly a third of the mark, a wordmark of
   0.6111 of it, and a negative right margin cancelling the trailing letter-space
   so it centres on its optical edge. */
.intro-in{display:flex;align-items:center;gap:calc(var(--m) / 3)}
.intro .mk{position:relative;flex:none;width:var(--m);height:var(--m)}
.intro .mk svg{display:block;width:100%;height:100%}
.intro .draft,.intro .flood{position:absolute;inset:0}
.intro .draft path{fill:none;stroke:var(--paper);stroke-width:2.5;stroke-dasharray:760;stroke-dashoffset:760;
  animation:intro-draw calc(var(--t) * .78) cubic-bezier(.4,0,.25,1) forwards,
            intro-dim calc(var(--t) * .24) ease calc(var(--t) * 1.12) forwards}
.intro .flood{clip-path:inset(100% 0 0 0);
  animation:intro-flood calc(var(--t) * .44) cubic-bezier(.5,0,.2,1) calc(var(--t) * .76) forwards}
.intro .flood path{fill:var(--paper)}
.intro .word{display:block;clip-path:inset(0 101% 0 0);
  animation:intro-word calc(var(--t) * .56) cubic-bezier(.5,0,.2,1) calc(var(--t) * .98) forwards}
.intro b{display:block;font-weight:600;font-size:calc(var(--m) * 0.6111);line-height:1;
  letter-spacing:.10em;margin-right:-.10em;color:var(--paper)}
.intro-sub{margin:0;font-size:clamp(12px,1.15vw,15px);letter-spacing:.02em;color:var(--tint);
  opacity:0;transform:translateY(6px);
  animation:intro-sub calc(var(--t) * .44) cubic-bezier(.2,.7,.2,1) calc(var(--t) * 1.52) forwards}
/* Signal doing its "entry" job, once. */
.intro-rule{display:block;height:2px;width:min(58vw,520px);background:var(--signal-dark);
  border-bottom-left-radius:1px;border-top-right-radius:1px;transform:scaleX(0);transform-origin:center;
  animation:intro-rule calc(var(--t) * .72) cubic-bezier(.5,0,.2,1) calc(var(--t) * 1.18) forwards}

/* Skipped: cut the sequence short rather than snapping it off. */
.intro.skip .intro-mid{animation:intro-lift .16s ease forwards}
.intro.skip .intro-half.t{animation:intro-part-t .34s cubic-bezier(.65,0,.35,1) .1s forwards}
.intro.skip .intro-half.b{animation:intro-part-b .34s cubic-bezier(.65,0,.35,1) .1s forwards}
.intro.skip{animation:intro-gone 0s linear .46s forwards}

@keyframes intro-draw{to{stroke-dashoffset:0}}
@keyframes intro-flood{to{clip-path:inset(0 0 0 0)}}
@keyframes intro-dim{to{opacity:0}}
@keyframes intro-word{to{clip-path:inset(0 -.12em 0 0)}}
@keyframes intro-sub{to{opacity:1;transform:none}}
@keyframes intro-rule{to{transform:scaleX(1)}}
@keyframes intro-lift{to{opacity:0;transform:translateY(-10px)}}
@keyframes intro-part-t{to{transform:translateY(-100%);border-bottom-left-radius:22vmin}}
@keyframes intro-part-b{to{transform:translateY(100%);border-top-right-radius:22vmin}}
@keyframes intro-gone{to{visibility:hidden}}
html.introed .intro{display:none}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* ---------- Between pages ----------
   Cross-document view transitions: the header bar keeps its place while the old
   page's content slips out and the new page's slips in, so five documents read as
   one system. Nothing to load, nothing to script. Browsers without it simply
   navigate as they always did, and it is switched off entirely under reduced
   motion. */
@view-transition{navigation:auto}
.site-head{view-transition-name:head}
main{view-transition-name:main}
::view-transition-group(head){animation-duration:.25s}
::view-transition-old(main){animation:vt-out .2s cubic-bezier(.4,0,1,1) forwards}
::view-transition-new(main){animation:vt-in .34s cubic-bezier(0,0,.2,1) .06s both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-old(main),::view-transition-new(main){animation:none}
}