/* ============================================================
   IN THE ROUND — Circus Consulting, redesign prototype
   Palette, faces and lockup are our existing brand.
   Single-theme by design: a paper-and-ink press sheet.
   ============================================================ */

:root{
  --paper:#f4f1ea; --ink:#17160f; --red:#d7301f; --red-bright:#e8452f;
  --mid:#3d3a30; --quiet:#6b675b; --line:#c9c4b6; --light:#b8b3a4;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,monospace;
  --tech:"Chakra Petch","JetBrains Mono",Menlo,monospace;

  /* type ladder — h2 floor (40) >= h3 ceiling (40) at every width */
  --t-display:clamp(52px,8.2vw,118px);
  --t-act:clamp(54px,6.4vw,92px);
  --t-h2:clamp(40px,4.4vw,62px);
  --t-h3:clamp(26px,2.9vw,40px);
  --t-item:28px;
  --t-standfirst:26px;
  --t-pull:30px;
  --t-deck:18px;
  --t-body:17px; --t-small:15px; --t-label:12px;

  /* rules */
  --rule-hair:1px solid var(--light);
  --rule:2px solid var(--ink);
  --rule-col:1px solid var(--light);

  /* motion */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --d-fast:120ms; --d-mid:400ms; --d-draw:900ms;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 var(--t-body)/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:400;font-family:var(--serif);letter-spacing:-.03em;line-height:1;text-wrap:balance}
p{margin:0}
img,svg{display:block;max-width:100%}
em{font-style:italic;color:inherit}

/* links are ink and underlined; colour is never the only affordance */
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:var(--light)}
a:hover{text-decoration-thickness:2px;text-decoration-color:var(--ink)}
.main-nav a,.btn,.logo,.chip,.footer-contact a,.colophon a,.ro-cell,.rail a,.skip,.act-next{text-decoration:none}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.is-ink :focus-visible,.site-footer :focus-visible{outline-color:var(--paper)}

.wrap{max-width:1440px;margin:0 auto;padding-inline:64px}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px}

.lbl{font-family:var(--mono);font-size:var(--t-label);font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);line-height:1.5}
.is-ink .lbl,.site-footer .lbl{color:var(--light)}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--paper);padding:12px 18px;font-family:var(--tech);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:0}

/* ---------- buttons: the client's existing boxed technical caps ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--tech);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 18px;min-height:44px;border:1.5px solid var(--ink);color:var(--ink);background:transparent;
  cursor:pointer;transition:background-color var(--d-fast),color var(--d-fast),transform 100ms}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn-solid{border-color:var(--red);background:var(--red);color:var(--paper)}
.btn-solid:hover{background:var(--red);border-color:var(--red);color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--red),inset 0 0 0 3px var(--paper)}
.btn-paper{border-color:var(--paper);color:var(--paper)}
.btn-paper:hover{background:var(--paper);color:var(--ink)}
.btn .arr{transition:transform 200ms var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- masthead ---------- */
/* the masthead holds at the top of the window; the dateline scrolls away
   under it, so the page identity stays without the furniture piling up */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink);padding:16px 0}
.header-inner{display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:14px;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo>svg,.logo>img{width:46px;height:46px;flex:0 0 auto;position:relative;left:4px}
.logo-words{display:flex;flex-direction:column;align-items:stretch;gap:2px;line-height:1}
.logo-name{position:relative;top:-4px;font-weight:700;font-size:35px;letter-spacing:-.04em;line-height:.84}
/* The i carries the mark's dot. The square tittle is not covered, it is not
   there: Instrument Sans has a true dotless i (U+0131, same 27-unit advance,
   so the word's width and letterfit are untouched), and the dot is drawn over
   it. Placed from the font's own metrics rather than by eye - ascent .97em,
   tittle top .74em above the baseline, stem .15em - which puts its centre
   .305em below the inline box top. Everything is in em, so it holds at any
   font size, on any viewport, through a resize or a rotation, with no JS. */
.logo-name .tittle{position:relative}
.logo-name .tittle::after{content:"";position:absolute;left:50%;top:.305em;
  transform:translate(-50%,-50%);width:.2em;height:.2em;border-radius:50%;background:var(--red)}
.logo-sub{display:flex;width:100%;font-family:var(--mono);font-size:8px;text-transform:uppercase;color:var(--quiet);border:1px solid currentColor}
.logo-sub span{flex:1 1 0;text-align:center;padding:3px 0 2px;border-right:1px solid currentColor}
.logo-sub span:last-child{border-right:0}

.main-nav{display:flex;gap:8px;margin-left:auto}
.main-nav>a{
  font-family:var(--tech);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 16px;min-height:44px;display:inline-flex;align-items:center;border:1.5px solid var(--ink);color:var(--ink);
  transition:background-color var(--d-fast),color var(--d-fast)}
/* .has-current is the ANCESTOR class the generator puts on a link whose page
   is above the one being viewed - so codanomiq stays lit on
   /codanomiq/shop/, /codanomiq/agent-access/ and the rest. The markup was
   already right; only the styling stopped at .current, so every sub-page read
   as though nothing in the bar was selected.
   aria-current stays on the exact page alone, which is correct: a screen
   reader should be told which one you are ON, not which branch you are in. */
.main-nav>a:hover,.main-nav>a.current,.main-nav>a.has-current{background:var(--ink);color:var(--paper)}
.header-cta{white-space:nowrap}
.header-cta.current{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:none}
.header-cta.current:hover{background:var(--ink);box-shadow:none}

/* ---------- dateline (replaces the static strapline) ---------- */
.dateline{border-top:1px solid var(--line)}
.dateline-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:13px 0}
.dateline .centre{font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;color:var(--mid)}
.dateline [data-clock],.dateline [data-date]{font-variant-numeric:tabular-nums;color:var(--ink)}
.rule-oxford{border-top:4px solid var(--ink);position:relative;height:7px}
.rule-oxford::after{content:"";position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--ink)}

/* ---------- the ring ---------- */
.hero-ring{position:relative;overflow:hidden;background:var(--paper);display:grid;align-items:center}
/* geometry is measured in this state: the entrance animation puts transforms
   on the headline and the aside, and a bounding rect includes them */
.hero-ring.measuring,.hero-ring.measuring *{transition:none!important;transform:none!important}
.hero-ring .wrap{position:relative;z-index:1}
.ring{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ring-c{fill:none;stroke:var(--ink);stroke-width:2;opacity:.22}
.ring-t{stroke:var(--ink);stroke-width:1.5;opacity:.18}
.is-ink .ring-c{stroke:var(--paper);opacity:.5}
.is-ink .ring-t{stroke:var(--paper);opacity:.4}
.ring--hair .ring-c{stroke:var(--line);stroke-width:1;opacity:.9}
.ring--hair .ring-t{stroke:var(--line);stroke-width:1;opacity:.7}
.ring--quartered .ring-c{stroke-dasharray:86 4;stroke-dashoffset:-2}
.hero-pool{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle var(--r,300px) at var(--px,50%) var(--py,45%),#ebe7dd 0%,rgba(244,241,234,0) 72%)}
.is-ink .hero-pool{background:
  radial-gradient(circle var(--r,300px) at var(--px,50%) var(--py,45%),#2b291f 0%,#1d1c14 62%,#17160f 100%)}
.is-ink{background:var(--ink);color:var(--paper)}

.hero-ring .grid12{align-items:center}
.hero-home{min-height:clamp(560px,54vw,740px)}
.hero-inner-pad{padding-block:96px 72px}
.hero-sub{min-height:clamp(440px,40vw,560px)}
.hero-sub .hero-inner-pad{padding-block:80px 64px}
.hero-ring h1{grid-column:1/10;font-size:var(--t-display);line-height:.92}
.hero-ring h1 span.l{display:block}
.hero-ring h1 .l-indent{margin-left:22%}
.side-rule{padding-left:24px;border-left:var(--rule-col)}
.hero-aside{position:relative;grid-column:10/13;align-self:end;border-left:var(--rule-col);padding-left:24px;display:flex;flex-direction:column;gap:20px}
.is-ink .hero-aside{border-left-color:rgba(244,241,234,.28)}
/* The deck sits below the ring's keyline and shares the label's mono face,
   set smaller and darker than the label so it reads as the next step down
   rather than a second heading. The 36px is the clearance under the line. */
.hero-aside .lbl{margin-bottom:36px} /* recomputed by placeAside on desktop */
.hero-aside .deck{font:400 13px/1.75 var(--mono);letter-spacing:.01em;color:var(--ink);margin:0}
.is-ink .hero-aside .deck{color:#e6e1d5}
.is-ink .deck{color:#d9d4c6}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-aside .btn{align-self:flex-start}

/* the red goes down last, in register */
.reg-em{position:relative;display:inline-block;color:var(--ink)}
.is-ink .reg-em{color:var(--paper)}
/* the red word is a pseudo-element, not a duplicate span: a real span put the
   word into the page text twice, so the h1 read "digital side digital side"
   to a search engine, to copy-and-paste and to reader mode */
.reg-em::after{content:attr(data-word);position:absolute;left:0;top:0;width:100%;color:var(--red)}
.is-ink .reg-em::after{color:var(--red-bright)}
.contact-say .reg-em::after{color:var(--ink)}

/* named column spans — never inline, so the stack always wins */
.c1-6{grid-column:1/6}.c6-13{grid-column:6/13}.c1-7{grid-column:1/7}
.c7-13{grid-column:7/13}.c1-8{grid-column:1/8}.c9-13{grid-column:9/13}

/* ---------- bands ---------- */
.band{padding-block:76px}
.band-tight{padding-block:64px}
.band-head{border-bottom:var(--rule);padding-bottom:16px;margin-bottom:40px;display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.band-head h2{font-size:var(--t-h2)}
.rule-band{border-top:var(--rule)}

/* ---------- running order (replaces the four bare pillars) ---------- */
.ro-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:28px}
.ro-head .lead{font-family:var(--serif);font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.05;max-width:26ch}
.ro-head .lead a{display:block;font-size:17px;font-family:var(--sans);margin-top:12px}
.ro-line{position:relative;border-top:var(--rule);margin-bottom:26px}
.ro-dot{position:absolute;top:-6px;left:var(--ro-x,0px);width:10px;height:10px;border-radius:50%;background:var(--red);transition:left var(--d-mid) var(--ease-out)}
.ro-dot.arrived{animation:railArrive 1s var(--ease-out) 400ms 2}
.ro-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.ro-cells.ro-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ro-cell{display:block;color:var(--ink);padding-left:24px;border-left:var(--rule-col)}
.ro-cell:first-child{padding-left:0;border-left:0}
.ro-cell h3{font-size:var(--t-h3);margin:10px 0 12px}
.ro-cell p{font-size:15px;line-height:1.6;color:var(--mid);margin-bottom:14px}
.ro-cell .xref{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
.ro-cell:hover .xref{color:var(--ink)}
.ro-cell:hover .folio{background:var(--ink);color:var(--paper)}
.folio{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:2px 6px;border:1px solid var(--ink);color:var(--ink);transition:background-color var(--d-fast),color var(--d-fast)}

/* ---------- three-column listing ---------- */
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
/* Cards are direct children now, so the column rule is drawn per card and
   reset at the start of each row, and the hairline that used to sit between
   the two cards of a column is drawn above every row after the first. */
.cols-3>*{border-left:var(--rule-col);margin-left:-16px;padding-left:16px}
.cols-3>:nth-child(3n+1){border-left:0;margin-left:0;padding-left:0}
.cols-3>:nth-child(n+4){border-top:var(--rule-hair);margin-top:26px;padding-top:26px}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.cols-2>*+*{border-left:var(--rule-col);margin-left:-16px;padding-left:16px}
.listing h3{font-size:var(--t-item);margin:8px 0 8px}
.listing p{font-size:15px;line-height:1.6;color:var(--mid);max-width:36ch}
.listing .in-admin{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}

/* ---------- platform band: the mid-page tonal shift ---------- */
.platform{padding-block:96px}
.platform .wordmark{font-family:var(--sans);font-size:clamp(44px,4.6vw,64px);letter-spacing:-.04em;line-height:1;color:var(--paper)}
.platform .wordmark strong{font-weight:600}
.platform-mark{grid-column:1/6;display:flex;flex-direction:column;gap:18px}
.platform-list{border-left:1px solid rgba(244,241,234,.25);padding-left:20px;display:flex;flex-direction:column;gap:6px}
.platform-say{grid-column:7/13;display:flex;flex-direction:column;gap:24px;align-self:center}
.platform-say p{font-family:var(--serif);font-size:clamp(24px,2.2vw,30px);line-height:1.25;color:var(--paper)}
/* The platform name is a wordmark wherever it appears in prose, so "coda"
   always carries a heavier weight. The weights have to be ones we actually
   load: Instrument Sans ships 400-700, JetBrains Mono only 400 and 500, and
   Instrument Serif a single upright - ask any of them for a weight they do
   not have and the browser fakes it, which at standfirst size looks smeared.
   So mono contexts step to 500, and the one serif line borrows the sans the
   way the wordmark itself always is. */
.cdz b{font-weight:600}
.main-nav .cdz b{font-weight:700}
.lbl .cdz b,.rowset .cdz b,.colophon .cdz b,.chg .cdz b{font-weight:500}
.cdz-sans{font-family:var(--sans);font-size:.94em;letter-spacing:-.02em}
.link-red{color:var(--red-bright);font-family:var(--sans);font-weight:500;font-size:17px;text-decoration-color:var(--red-bright);align-self:flex-start}
.link-red:hover{text-decoration-color:var(--red-bright)}

/* ---------- proof band ---------- */
.proof-say{grid-column:1/7}
.proof-say h2{font-size:var(--t-h2);margin-bottom:28px}
.dot-stop{display:inline-block;width:.15em;height:.15em;border-radius:50%;background:var(--red);vertical-align:baseline;margin-left:.06em}
.struck{list-style:none;padding:0;margin:0 0 26px}
.struck li{padding:12px 0;border-top:var(--rule-hair);font-size:var(--t-body);color:var(--quiet)}
.struck li span{background-image:linear-gradient(var(--quiet),var(--quiet));background-repeat:no-repeat;background-position:0 55%;background-size:0% 1px;transition:background-size 300ms var(--ease-out);transition-delay:calc(var(--i,0)*80ms)}
.in .struck li span{background-size:100% 1px}
.key-line{font-family:var(--serif);font-size:clamp(24px,2.2vw,30px);line-height:1.25;margin-bottom:26px}
.facts{border-top:var(--rule);padding-top:14px}
.proof-ledger{grid-column:8/13}
.ledger-row{display:grid;grid-template-columns:1fr auto;gap:8px 24px;padding:14px 0;border-top:var(--rule-hair)}
.ledger-note{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.35;
  color:var(--mid);margin-top:10px;max-width:34ch}
.ledger-row .sector{font-family:var(--serif);font-size:22px;letter-spacing:-.01em}
.ledger-row .scope{font-size:var(--t-small);color:var(--mid);grid-column:1}
.ledger-row .status{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);grid-row:1;grid-column:2;align-self:center;white-space:nowrap}

/* ---------- services: acts ---------- */
.acts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px}
.rail{grid-column:1/3;position:sticky;top:112px;align-self:start}
.rail-line{position:relative;border-left:var(--rule);padding-left:18px;margin-top:14px}
.rail-dot{position:absolute;left:-6px;top:calc(var(--act,0)*76px + 26px);width:10px;height:10px;border-radius:50%;background:var(--ink);transition:top var(--d-mid) var(--ease-out),background-color var(--d-fast)}
.rail-dot.is-red{background:var(--red)}
/* the dot breathes for two seconds when it reaches a stop, then holds still.
   The delay clears the 400ms it spends travelling, so the breath begins on
   arrival rather than on the way. */
@keyframes railArrive{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(215,48,31,0)}
  50%{transform:scale(1.4);box-shadow:0 0 0 7px rgba(215,48,31,.10)}
}
.rail-dot.arrived{animation:railArrive 1s var(--ease-out) 400ms 2}
.rail a{display:block;height:76px;color:var(--quiet)}
.rail a .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.rail a .w{font-family:var(--serif);font-size:22px;color:var(--quiet);transition:color var(--d-fast)}
.rail a.on .w,.rail a:hover .w{color:var(--ink)}
.acts-body{grid-column:3/13;display:flex;flex-direction:column}
.act{border-top:4px solid var(--ink);position:relative;padding:34px 0 64px;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:32px;scroll-margin-top:calc(var(--hdr,80px) + 24px)}
.act::before{content:"";position:absolute;left:0;right:0;top:6px;border-top:1px solid var(--ink)}
.act-folio{grid-column:1/11;display:flex;justify-content:space-between;gap:24px}
.act-word{grid-column:1/11;font-size:var(--t-act);line-height:.9;margin:6px 0 26px}
.act-p{grid-column:1/7}
.act-p p{font-size:var(--t-deck);line-height:1.6;color:var(--mid)}
.act-p p:first-of-type::first-letter{font-family:var(--serif);font-size:3.208em;line-height:.954;float:left;padding:.043em .1em 0 0;color:var(--ink)}
.act-eg{grid-column:6/9;padding-left:24px;border-left:var(--rule-col)}
.act-eg p{font-size:var(--t-small);color:var(--mid);margin-top:8px}
.act-l{grid-column:8/11;padding-left:24px;border-left:var(--rule-col);font-size:var(--t-small);line-height:1.9;color:var(--mid)}
.act-foot{grid-column:1/11;display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:30px;flex-wrap:wrap}
.act-next{text-decoration:none;color:var(--quiet);display:inline-flex;align-items:center;gap:8px;min-height:44px;transition:color var(--d-fast)}
.act-next:hover,.act-next:focus-visible{color:var(--ink)}
.act-next .arr{display:inline-block;transition:transform 200ms var(--ease-out)}
.act-next:hover .arr{transform:translateY(3px)}
.act-next.to-contact:hover .arr{transform:translateX(4px)}

/* ---------- codanomix: the admin drawn in CSS ---------- */
.panel-admin{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);padding:22px}
.is-ink .panel-admin{border-color:rgba(244,241,234,.3)}
.panel-tabs{display:flex;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:20px}
.panel-tabs span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
.panel-tabs span.on{color:var(--ink);box-shadow:inset 0 -1.5px 0 var(--ink)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.kpi{padding:0 16px;border-left:1px solid var(--line)}
.kpi:first-child{padding-left:0;border-left:0}
.kpi .v{font-family:var(--serif);font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}
.chart{display:grid;grid-template-columns:repeat(24,1fr);gap:4px;align-items:end;height:150px;margin:26px 0 12px}
.chart i{display:block;background:var(--ink);opacity:.24;height:calc(var(--h)*1%);transform:scaleY(0);transform-origin:bottom;transition:transform 600ms var(--ease-out);transition-delay:calc(var(--i)*22ms)}
.in .chart i{transform:scaleY(1)}
.chart i.today{background:var(--red);opacity:1}
.panel-cap{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:10px;flex-wrap:wrap}

/* Real screens, brought into the house colours by a duotone rather than a
   veil: the image is desaturated, then ink is blended in with `lighten` so
   nothing sits darker than ink, and paper with `darken` so nothing sits
   lighter than paper. The full range is clamped to the palette and the UI
   stays legible - no gradient over the top, no recolouring by hand. */
.duo{position:relative;isolation:isolate;overflow:hidden;margin:0;border:1.5px solid var(--ink);background:var(--paper)}
/* every admin capture is 1600x1000; without the ratio the lazy images are
   zero-high until they load and the page jumps under the reader */
.duo img{display:block;width:100%;height:auto;aspect-ratio:8/5;filter:grayscale(1) contrast(1.16) brightness(.99)}
.duo .duo-a,.duo .duo-b{position:absolute;inset:0;pointer-events:none}
.duo .duo-a{background:var(--ink);mix-blend-mode:lighten}
.duo .duo-b{background:var(--paper);mix-blend-mode:darken}
/* One framed panel for now. The montage (a large screen with two smaller
   ones overlaid) needs genuinely different screens - crops of a single
   capture repeat what the main panel already shows. .m-inset is kept and
   ready for when those exist. */
.montage{position:relative}
.montage.has-insets{padding-bottom:66px}
.m-inset{position:absolute;box-shadow:0 18px 44px rgba(23,22,15,.30)}
.m-a{left:2%;bottom:-42px;width:40%}
.m-b{right:2%;bottom:-42px;width:34%}
.shot figcaption,.montage+figcaption{margin-top:10px;display:block}
@media(max-width:760px){
  .montage{padding-bottom:0}
  .m-inset{position:static;width:100%;margin-top:14px;box-shadow:none}
}

.chg{margin:12px 0 26px}
.chg div{font-size:14px;line-height:1.6;color:var(--mid);padding:9px 0;border-top:var(--rule-hair)}
.chg-note{font-size:14px;line-height:1.65;color:var(--mid);max-width:46ch}
.chg div:first-child{border-top:0;padding-top:4px}

/* this page / rate card / staff box / timeline / clocks */
.boxed{border:1.5px solid var(--ink);padding:22px 24px}
.rowset{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:var(--rule-hair);font-family:var(--mono);font-size:13px}
.rowset:first-of-type{border-top:0}
.rowset b{font-weight:500;font-variant-numeric:tabular-nums}
.rate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:22px 0 26px}
.rate>div{padding:0 24px;border-left:var(--rule-hair)}
.rate>div:first-child{padding-left:0;border-left:0}
.rate .amt{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--quiet);margin:8px 0 10px}
.rate p{font-size:var(--t-small);color:var(--mid)}
/* two people, two cities: the names share a row with a column rule, so the
   page reads as a small team rather than one person and an office */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px 32px;margin:16px 0 0}
.people>div+div{border-left:var(--rule-col);padding-left:24px}
.people h2{font-size:clamp(28px,3vw,40px);margin-bottom:6px}
.people .role{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink)}
@media(max-width:760px){.people{grid-template-columns:minmax(0,1fr);gap:0}
  .people>div+div{border-left:0;padding-left:0;border-top:var(--rule-hair);padding-top:18px;margin-top:18px}}
.staff div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-top:var(--rule-hair);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.staff div:first-child{border-top:0}
.staff b{font-weight:500;color:var(--ink);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:14px}
.pullquote{font-family:var(--serif);font-style:italic;font-size:var(--t-pull);line-height:1.25;border-top:var(--rule);padding-top:26px;position:relative}
.pullquote::after{content:"";position:absolute;left:0;right:0;top:5px;border-top:1px solid var(--ink)}
.pullquote cite{display:block;font:400 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);font-style:normal;margin-top:20px;border-top:var(--rule-hair);padding-top:14px}
.clocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:12px}
.clocks>div+div{border-left:var(--rule-col);padding-left:32px}
.clocks h3{font-size:clamp(36px,4vw,56px)}
.clocks .t{font-family:var(--mono);font-size:22px;letter-spacing:.06em;margin:10px 0 14px;font-variant-numeric:tabular-nums}
.clocks p{font-size:var(--t-small);color:var(--mid)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;padding-block:72px 0}
.contact-say{grid-column:1/6;position:relative}
.contact-say h1{font-size:clamp(48px,6.4vw,92px);line-height:.95;margin-bottom:24px}
.contact-say .lede{font-size:15px;line-height:1.6;color:var(--mid);max-width:38ch;margin-bottom:26px}
.contact-say [data-copy]{font-size:17px}
/* the cities line needs air before the footer closes under it */
.contact-say .cities{display:flex;gap:32px;margin:20px 0 56px}
.next-steps{border-left:var(--rule);padding-left:20px;display:flex;flex-direction:column;gap:14px;margin:26px 0}
.next-steps div{display:flex;gap:14px;align-items:baseline}
.next-steps .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--quiet);flex:0 0 auto}
.next-steps p{font-size:var(--t-small);color:var(--mid)}
.contact-form{grid-column:7/13;display:flex;flex-direction:column;gap:26px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.field{position:relative;display:flex;flex-direction:column}
.field label{position:absolute;top:0;left:0;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--quiet)}
.field input,.field textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);background:transparent;
  border:0;border-bottom:1.5px solid var(--ink);border-radius:0;padding:26px 0 10px;min-height:44px}
.field textarea{border:1.5px solid var(--ink);padding:55px 14px 14px;min-height:175px;resize:vertical}
.field label{z-index:1}
.field:has(textarea) label{left:14px;top:12px}
/* A phone number is two facts, so the field is two controls that have to read
   as one. The rule belongs to the pair rather than the input, or the picker
   and the number sit on separate rules and the field looks broken in half.
   The list is set the way the rest of the site sets metadata: ISO code in the
   technical face, name in the sans, dial code in the mono, on hairlines. */
.field-tel .tel{display:flex;align-items:stretch;border-bottom:1.5px solid var(--ink)}
.field-tel .tel input{border-bottom:0;flex:1 1 auto;min-width:0;padding-left:12px}
.field-tel.is-bad .tel{border-color:var(--red);outline:1.5px solid var(--red);outline-offset:4px}
.field-tel.is-bad .tel input{outline:0}
.field-tel .tick{bottom:15px}
/* The divider is drawn rather than bordered: the button is as tall as the
   field, so a border-right ran the full height and struck through the
   floating label above it. This one is only as tall as the value row. */
.tel-dial{appearance:none;background:transparent;border:0;position:relative;
  padding:26px 12px 10px 0;display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink);
  font-family:var(--tech);font-size:12px;font-weight:600;letter-spacing:.1em;flex:0 0 auto}
.tel-dial::after{content:"";position:absolute;right:0;bottom:0;width:1.5px;height:28px;background:var(--line)}
.tel-dial .tel-code{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--mid);font-weight:400}
.tel-dial .tel-chev{width:9px;height:6px;color:var(--quiet);transition:transform 160ms var(--ease-out)}
.tel-dial[aria-expanded="true"] .tel-chev{transform:rotate(180deg)}
.tel-dial:hover .tel-code,.tel-dial:hover .tel-chev{color:var(--ink)}
.tel-dial:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* anchored right: the field is the narrow half of a two-up row on the desk,
   and a panel wide enough to read would otherwise run off the page */
.tel-pop{position:absolute;z-index:40;right:0;left:auto;top:calc(100% + 6px);
  width:max(100%,320px);max-width:calc(100vw - 40px);display:none;flex-direction:column;max-height:304px;
  background:var(--paper);border:1.5px solid var(--ink);box-shadow:0 18px 44px rgba(23,22,15,.20)}
.tel-pop.open{display:flex}
.tel-search{flex:0 0 auto;border-bottom:1.5px solid var(--ink)}
.tel-search input{width:100%;font-family:var(--mono);font-size:13px;color:var(--ink);
  padding:12px 14px;border:0;background:transparent;min-height:46px}
.tel-search input:focus{outline:0}
.tel-search input::placeholder{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
.tel-list{overflow-y:auto;overscroll-behavior:contain;margin:0;padding:0;list-style:none;flex:1 1 auto}
.tel-opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 14px;cursor:pointer;
  border-top:var(--rule-hair);color:var(--ink)}
/* display:flex beats the user-agent [hidden]{display:none}, so filtered-out
   rows stayed on screen and only the ordering appeared to change */
.tel-opt[hidden]{display:none}
.tel-list>li:first-child{border-top:0}
.tel-opt .iso{font-family:var(--tech);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--quiet);flex:0 0 26px}
.tel-opt .nm{font-family:var(--sans);font-size:14px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tel-opt .dc{font-family:var(--mono);font-size:12px;color:var(--mid);flex:0 0 auto;font-variant-numeric:tabular-nums}
.tel-opt.on,.tel-opt:hover{background:var(--ink);color:var(--paper)}
.tel-opt.on .iso,.tel-opt.on .dc,.tel-opt.on .nm,
.tel-opt:hover .iso,.tel-opt:hover .dc,.tel-opt:hover .nm{color:var(--paper)}
.tel-none{padding:16px 14px;font-family:var(--mono);font-size:12px;color:var(--quiet)}
.chips{display:flex;flex-direction:column;gap:14px;position:relative;padding-top:22px}
.chips>.lbl{position:absolute;top:0;left:0}
.chip-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chip{position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--tech);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 12px;min-height:44px;border:1.5px solid var(--ink);cursor:pointer;transition:background-color 140ms}
.chip:hover{background:rgba(23,22,15,.07)}
.chip:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.chip i{width:12px;height:12px;border:1.5px solid var(--ink);flex:0 0 auto;transition:background-color 140ms}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:has(input:checked) i{background:var(--ink)}
/* Validation in the house language: the rule under the field turns red, the
   reason is set in the label's own mono, and a tick draws itself when the
   field is right. Errors are the one place the "one red per view" rule bends
   - a warning that is not red is not a warning. */
/* The message is a tag pinned under the field, not a line in the flow:
   showing and hiding it in the flow pushed everything below it up and down
   as fields were fixed. Absolute, so nothing moves. The field takes a red
   outline rather than a red border - an outline paints outside the box and
   costs no layout either. */
/* The tag sits on the field's own label line, right-aligned, pointing down
   into the field it belongs to. Under the field it covered the label of
   the next one down; the label line is empty on the right, so nothing is
   obscured and the layout still never moves. */
.field .err{position:absolute;bottom:calc(100% - 18px);right:0;z-index:5;display:none;
  background:var(--red);color:var(--paper);font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;line-height:1.4;
  max-width:calc(100% - 60px)}
.field .err::before{content:"";position:absolute;top:100%;right:14px;
  border:6px solid transparent;border-top-color:var(--red)}
/* inside the box for a textarea, on the same line as its label */
.field.has-area .err{top:9px;bottom:auto;right:11px;max-width:calc(100% - 220px)}
.field.has-area .err::before{display:none}
.field.is-bad .err{display:block}
.field.is-bad input,.field.is-bad textarea{border-color:var(--red);outline:1.5px solid var(--red);outline-offset:4px}
.field.is-bad label{color:var(--red)}
.field .tick{position:absolute;right:0;bottom:13px;width:15px;height:15px;opacity:0;transition:opacity 160ms}
.field.has-area .tick{right:13px;bottom:auto;top:16px}
.field.is-ok .tick{opacity:1}
.field.is-ok .tick path{animation:tickdraw .34s var(--ease-out) forwards}
@keyframes tickdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.form-foot .note.is-bad{color:var(--red)}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:16px}
.form-foot .note{font-size:var(--t-small);color:var(--quiet)}
.form-foot .btn{min-width:200px}
/* The receipt is a docket: a ruled head, the thanks set large, then what was
   actually sent read back so it is obvious the right details arrived - not a
   repeat of the three steps already standing in the left column. The mark is
   stamped into the corner the way a press sheet is signed off. */
.receipt{border:1.5px solid var(--ink);position:relative;overflow:hidden;background:var(--paper)}
.receipt-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:1.5px solid var(--ink);padding:13px 26px}
.receipt-body{padding:32px 26px 30px;position:relative;z-index:1}
.receipt h3{font-size:clamp(30px,3.2vw,44px);letter-spacing:-.03em;margin-bottom:26px}
.receipt-rows{border-top:var(--rule)}
.receipt-rows>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;
  padding:11px 0;border-top:var(--rule-hair);align-items:baseline}
.receipt-rows>div:first-child{border-top:0}
.receipt-rows .v{font-size:15px;color:var(--ink);word-break:break-word}
/* 26ch broke the closing line across three; the sentence is 74 characters,
   so a 44ch measure with balanced wrapping sets it as two even lines that
   break after the dash. */
.receipt-key{font-family:var(--serif);font-size:24px;line-height:1.3;margin-top:28px;max-width:44ch;text-wrap:balance}
/* The mark develops rather than just sitting there: the ring draws itself,
   the whole thing lifts out of the paper it was watermarked into, and the
   centre goes red last - the same order the red lands in on every other page.
   Only the receipt earns this, because it is the one screen with nothing else
   on it competing for the eye. */
.receipt-mark{position:absolute;right:20px;bottom:16px;width:78px;height:78px;opacity:.13;z-index:0;
  transform:scale(.96);transform-origin:70% 70%;
  animation:markLift 800ms var(--ease-out) 640ms forwards}
.receipt-mark .sr{stroke-dasharray:1;stroke-dashoffset:1;animation:tickdraw .9s var(--ease-out) .15s forwards}
.receipt-mark .core{animation:markRed 520ms var(--ease-out) 1240ms forwards}
@keyframes markLift{to{opacity:1;transform:scale(1)}}
@keyframes markRed{to{fill:#d7301f}}
@media(max-width:760px){
  .receipt-rows>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .receipt-mark{display:none}
}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--paper);padding:80px 0 36px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:end}
.footer-say{grid-column:1/8}
.footer-head{font-family:var(--serif);font-size:clamp(38px,5vw,72px);line-height:1;letter-spacing:-.02em;margin-bottom:20px}
.footer-head em{color:var(--paper)}
.footer-offer{font-size:var(--t-body);color:#d9d4c6;max-width:44ch;margin-bottom:28px}
.footer-contact{grid-column:9/13;text-align:right;display:flex;flex-direction:column;gap:8px;font-size:var(--t-small);color:var(--light)}
.footer-contact a{color:var(--paper)}
body:has(#circusContact) .site-footer .footer-say{display:none}
body:has(#circusContact) .site-footer .footer-contact{grid-column:1/13;text-align:left;align-items:flex-start}
body:has(#circusContact) .site-footer .mail-big{font-family:var(--serif);font-size:clamp(26px,3vw,40px);letter-spacing:-.02em}
.footer-contact .t{font-variant-numeric:tabular-nums}
.colophon{display:flex;justify-content:space-between;gap:32px;align-items:flex-end;
  border-top:1px solid rgba(244,241,234,.16);margin-top:56px;padding-top:22px;
  font-family:var(--mono);font-size:12px;line-height:1.8;color:var(--light)}
.colophon a{color:var(--light);text-decoration-color:rgba(184,179,164,.5)}
.colophon-mark{flex:0 0 auto}
.colophon-links{flex:0 0 auto;text-align:right;white-space:nowrap}

/* ---------- reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(14px)}
.js [data-reveal].in{opacity:1;transform:none;transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.js [data-reveal] .stagger>*{opacity:0;transform:translateY(14px)}
.js [data-reveal].in .stagger>*{opacity:1;transform:none;
  transition:opacity 500ms var(--ease-out) calc(var(--i,0)*60ms),transform 500ms var(--ease-out) calc(var(--i,0)*60ms)}

/* ---------- the load sequence ---------- */
.js .hero-ring .ring-c{stroke-dasharray:1;stroke-dashoffset:1}
.js .hero-ring.in .ring-c{stroke-dashoffset:0;transition:stroke-dashoffset var(--d-draw) var(--ease-out)}
.js .hero-ring.ring--quartered .ring-c{stroke-dasharray:86 4}
.js .hero-ring .ring-t{opacity:0;transform:translate(var(--tx,0),var(--ty,0))}
.js .hero-ring.in .ring-t{opacity:.18;transform:none;
  transition:opacity 600ms var(--ease-out) calc(300ms + var(--i,0)*60ms),transform 600ms var(--ease-out) calc(300ms + var(--i,0)*60ms)}
.js .is-ink.hero-ring.in .ring-t{opacity:.4}
.js .hero-ring h1 span.l{opacity:0;transform:translateY(16px)}
.js .hero-ring.in h1 span.l{opacity:1;transform:none;
  transition:opacity 600ms var(--ease-out) calc(100ms + var(--i,0)*80ms),transform 600ms var(--ease-out) calc(100ms + var(--i,0)*80ms)}
.js .hero-ring .hero-aside{opacity:0;transform:translateY(12px)}
.js .hero-ring.in .hero-aside{opacity:1;transform:none;transition:opacity 500ms var(--ease-out) 500ms,transform 500ms var(--ease-out) 500ms}
.js .reg-em::after{opacity:0;transform:translate(6px,-4px)}
.js .hero-ring.in .reg-em::after{opacity:1;transform:none;
  transition:opacity 300ms var(--ease-out) 900ms,transform 600ms var(--ease-out) 900ms}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal] .stagger>*,.js .hero-ring h1 span.l,.js .hero-ring .hero-aside,.js .reg-em::after{
    opacity:1!important;transform:none!important;transition:none!important}
  .js .hero-ring .ring-c{stroke-dashoffset:0!important;transition:none!important}
  .js .hero-ring .ring-t{opacity:.18!important;transform:none!important;transition:none!important}
  .js .is-ink.hero-ring .ring-t{opacity:.4!important}
  .chart i{transform:scaleY(1)!important;transition:none!important}
  .receipt-mark{opacity:1!important;transform:none!important;animation:none!important}
  .receipt-mark .sr{stroke-dashoffset:0!important;animation:none!important}
  .receipt-mark .core{fill:#d7301f!important;animation:none!important}
  .struck li span{background-size:100% 1px!important;transition:none!important}
  *{scroll-behavior:auto!important}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .wrap{padding-inline:32px}
  .hero-ring h1,.hero-aside,.platform-mark,.platform-say,.proof-say,.proof-ledger,
  .contact-say,.contact-form{grid-column:1/13}
  .side-rule{border-left:0;padding-left:0}
  .hero-aside{align-self:start;border-left:0;padding-left:0;border-top:var(--rule-col);padding-top:20px;margin-top:32px}
  /* placeAside bails below 1100 and the aside no longer sits at the ring's
     tick corner, so the 36px it reserves under the label is clearance for a
     line that is not there - the flex gap is the whole gap now. */
  .hero-aside .lbl{margin-bottom:0}
  .is-ink .hero-aside{border-top-color:rgba(244,241,234,.28)}
  .hero-ring h1 .l-indent{margin-left:0}
  .hero-home,.hero-sub{min-height:0}
  .hero-inner-pad{padding-block:64px 56px}
  .platform-say{margin-top:36px}
  .proof-ledger{margin-top:44px}
  .rail{display:none}
  .acts-body{grid-column:1/13}
  .act{grid-template-columns:repeat(6,minmax(0,1fr))}
  .act-folio,.act-word,.act-foot{grid-column:1/7}
  .act-p{grid-column:1/7}
  .act-eg,.act-l{grid-column:1/7;border-left:0;padding-left:0;border-top:var(--rule-hair);padding-top:16px;margin-top:24px}
  /* the cities line was clearing a footer that no longer follows it, and
     .c7-13 already contributes 40px above the form */
  .contact-say .cities{margin-bottom:0}
  .contact-form{margin-top:0}
  body:has(#circusContact) .site-footer .footer-contact{margin-top:0}
  .c1-6,.c6-13,.c1-7,.c7-13,.c1-8,.c9-13{grid-column:1/13}
  .c6-13,.c7-13,.c9-13{margin-top:40px}
  .footer-say,.footer-contact{grid-column:1/13}
  .footer-contact{text-align:left;align-items:flex-start;margin-top:32px}
}
@media (max-width:760px){
  :root{--t-body:16px;--t-display:52px}
  /* the headline rewraps to the phone instead of keeping desktop line breaks,
     so the registration ghost is dropped and the em is simply red */
  .hero-ring h1 span.l{display:inline}
  .hero-ring h1 .l-indent{margin-left:0}
  .js .hero-ring h1 span.l{opacity:1;transform:none}
  .reg-em::after{display:none}
  .reg-em{color:var(--red)}
  /* except here: .contact-say's registration ghost is ink by design, so the
     page composed around the Send button as its one red was showing three */
  .contact-say .reg-em{color:var(--ink)}
  .is-ink .reg-em{color:var(--red-bright)}
  .chart{gap:2px}
  .wrap{padding-inline:20px}
  .header-inner{flex-wrap:wrap;gap:12px}
  .logo>svg,.logo>img{width:40px;height:40px}
  .logo-name{font-size:30px}
  .header-cta{margin-left:auto;flex:0 0 auto}
  .main-nav{order:3;width:100%;margin-left:0;gap:0}
  .main-nav>a{flex:1 1 0;justify-content:center;padding:11px 6px;margin-left:-1.5px}
  .main-nav>a:first-child{margin-left:0}
  /* Two mono blocks in a nowrap flex row broke mid-phrase, leaving middots
     dangling at the end of a line and the two columns baseline-aligned on
     their first line only. Each takes its own row; the date is generated at
     runtime and its width varies by weekday, so it is left free to wrap. */
  .dateline-row{flex-wrap:wrap;justify-content:flex-start;gap:6px 0;padding:11px 0}
  .dateline-row>.lbl{flex:1 0 100%}
  .dateline-row .centre{display:none}
  .hero-inner-pad{padding-block:48px 40px}
  .band,.platform{padding-block:52px}
  .band-tight{padding-block:44px}
  .cols-3,.cols-2,.ro-cells,.ro-cells.ro-3,.kpis,.rate,.tl-events,.clocks,.chip-row,.two{grid-template-columns:minmax(0,1fr)}
  .cols-3>*+*,.cols-2>*+*,.rate>div,.tl-events div,.clocks>div+div{border-left:0;margin-left:0;padding-left:0}
  .cols-3>*+*,.cols-2>*+*{border-top:var(--rule-hair);margin-top:26px;padding-top:26px}
  .rate>div+div,.tl-events div+div,.clocks>div+div{border-top:var(--rule-hair);margin-top:22px;padding-top:22px}
  .ro-cells{gap:0}
  .ro-cell{border-left:0;border-top:var(--rule-hair);padding:20px 0 0;margin-top:20px}
  .ro-cell:first-child{border-top:0;margin-top:0;padding-top:0}
  .ro-line{margin-bottom:0}
  .chip-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-foot{flex-direction:column-reverse;align-items:stretch}
  .form-foot .btn{width:100%;min-height:52px}
  .hero-aside .btn,.platform .btn{width:100%}
  .kpi{padding:14px 0;border-left:0;border-top:var(--rule-hair)}
  .kpi:first-child{padding-top:0;border-top:0}
  .chart{height:110px}
  .clocks .t{font-size:18px}
  /* the rule between the two clocks sat 3:1 toward New York: the 32px row gap
     landed above it and the 22px margin below */
  .clocks{row-gap:0}
  /* the rate card keeps a column's right padding with no column beside it */
  .rate>div{padding-inline:0}
  /* .montage.has-insets reserves 66px for insets that are stacked here */
  .montage.has-insets{padding-bottom:0}
  .colophon{flex-direction:column;align-items:flex-start;gap:20px}

  /* Twelve tracks need eleven 32px gaps - 352px - before a single character
     is set, and a 375px phone leaves 335px inside the gutters. The tracks
     collapsed to 0 and every child spanning 1/13 hung 17px past the right
     gutter, so the whole page read as though it had been nudged left. At this
     width every child spans the full set anyway, so the column gap has
     nothing left to separate. */
  /* .acts and .clause carry their own twelve-track grids rather than the
     .grid12 class, and .clause re-asserts the shorthand 69 lines further down,
     so both have to be named here as well as fixed at their source. */
  .grid12,.footer-grid,.contact,.clause,.act,.acts{column-gap:0}

  /* The running order stacks here, so all four cells share one left edge and
     the dot has nowhere to travel to - it just sits on the rule looking like
     a stray bullet. */
  .ro-dot{display:none}

  /* The ring still registers to the red word here, but at 0.55 of the width
     its diameter is wider than the phone, so the arc crosses the headline
     instead of sitting behind it and the four ticks are reduced to stubs
     hanging in the margin. The ticks go; the arc stays as a watermark. */
  .ring-t{display:none}
  /* .ring--hair .ring-c is (0,2,0) and a media query adds nothing, so the
     unqualified rule lost and the hairline arc stayed at .9 - straight across
     the headline, the lede and the numbered steps on all three sub pages. */
  .ring-c,.ring--hair .ring-c{opacity:.12}
  .is-ink .ring-c,.is-ink.ring--hair .ring-c{opacity:.2}

  /* The smallest targets on the site: 16px of text with nothing around it. */
  .colophon a,.footer-contact a,.link-red,.contents a,.legal-foot a,
  .rule-band p a,.contact-say [data-copy]{display:inline-flex;align-items:center;min-height:44px}
  .contents{gap:0 16px}
  .colophon-links{white-space:normal}
}

/* =========================================================
   Legacy: the Work index and the Humdingers case study are
   unpublished (status=0) but still seeded, so the rules they
   need stay here rather than breaking if they are switched on.
   ========================================================= */
.hero{position:relative;background:var(--ink);color:var(--paper);min-height:480px;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,22,15,.5) 0%,rgba(23,22,15,.88) 100%)}
.hero-inner{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:end;padding-block:112px 72px;min-height:480px}
.hero-inner h1{grid-column:span 8;font-size:var(--t-display);line-height:.92}
.hero-inner h1 em{color:var(--red-bright)}
.content{padding-block:64px 0}
.content.narrow .wrap{max-width:860px}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}
.work-card{display:flex;flex-direction:column;gap:16px;color:var(--ink);text-decoration:none}
.work-card img,.work-card .ph{width:100%;height:320px;object-fit:cover;background:#dcd6c6}
.work-card h3{font-size:30px}
.work-card .meta{font-size:14px;color:var(--quiet)}
.filters{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:24px}
.filters span{font-family:var(--tech);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;border:1.5px solid var(--ink)}
.filters span.on{background:var(--ink);color:var(--paper)}
.case-meta{grid-column:10/13;border-left:var(--rule-col);padding-left:24px;display:flex;flex-direction:column;gap:14px;font-size:14px;color:var(--mid);align-self:end}
.case-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:var(--rule);padding-top:36px}
.case-cols p{font-size:15px;line-height:1.6;color:var(--mid)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:56px}
.pair img{width:100%;height:380px;object-fit:cover;background:#dcd6c6}
.prevnext{display:flex;justify-content:space-between;gap:16px;border-top:var(--rule);padding-top:24px;margin-top:56px}
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 40px}
.rule-top{border-top:var(--rule);padding-top:28px}
@media(max-width:1100px){.hero-inner h1,.case-meta{grid-column:1/13}.case-meta{border-left:0;padding-left:0}
  .work-grid,.case-cols,.pillars,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.work-grid,.case-cols,.pair,.pillars,.grid-3{grid-template-columns:minmax(0,1fr)}
  .work-card img,.work-card .ph{height:240px}.hero-inner{padding-block:72px 40px}}

/* =========================================================
   Legal pages, set as an annotated edition: the clause on the
   left, a plain-English gloss in the margin. The company sells
   plain English, so these two pages are where it gets proved.
   ========================================================= */
.legal-lede{grid-column:1/8}
.legal-lede p{font-family:var(--serif);font-size:var(--t-standfirst);line-height:1.3;max-width:32ch}
.short-version{grid-column:9/13;border:1.5px solid var(--ink);padding:22px 24px}
.short-version div{font-size:14px;line-height:1.55;color:var(--mid);padding:10px 0;border-top:var(--rule-hair)}
.short-version div:first-of-type{border-top:0;padding-top:12px}
.contents{border-top:var(--rule);border-bottom:var(--rule-hair);padding:14px 0;display:flex;flex-wrap:wrap;gap:6px 22px}
.contents a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--quiet);text-decoration:none}
.contents a:hover,.contents a:focus-visible,.contents a.nav-current{color:var(--ink)}
/* the page ships JS that sets .nav-current and nothing was styling it, so the
   only state these links had was hover - which a phone does not have */
.contents a.nav-current{box-shadow:inset 0 -1px 0 var(--ink)}
.contents a.nav-current b{color:var(--red)}
.contents a b{font-weight:400;color:var(--light);margin-right:7px}
/* scroll-margin was a hard 104px measured against the 80px desktop masthead.
   On a phone the header is 136px - and 194px under about 326px, where the CTA
   drops to a third row - so every anchor landed behind it. site.js measures
   the header and publishes it as --hdr, so the clearance follows the furniture
   instead of a number that was true on one machine. */
.clause{border-top:var(--rule);padding:26px 0 42px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:32px;scroll-margin-top:calc(var(--hdr,80px) + 24px)}
.clause-n{grid-column:1/4}
.clause-n h2{font-size:var(--t-h3);margin-top:10px}
.clause-body{grid-column:4/10}
.clause-body p{font-size:15px;line-height:1.7;color:var(--mid)}
.clause-body p+p{margin-top:14px}
.clause-body ul{margin:14px 0 0;padding-left:18px}
.clause-body li{font-size:15px;line-height:1.7;color:var(--mid);margin-bottom:10px}
.clause-body strong{color:var(--ink);font-weight:600}
.clause-gloss{grid-column:10/13;border-left:var(--rule-col);padding-left:24px}
.clause-gloss p{font-family:var(--mono);font-size:12px;line-height:1.85;color:var(--ink);margin-top:12px}
.legal-foot{border-top:var(--rule);padding-top:20px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
@media(max-width:1100px){
  .legal-lede,.short-version{grid-column:1/13}
  .short-version{margin-top:32px}
  .clause-n,.clause-body,.clause-gloss{grid-column:1/13}
  .clause-gloss{border-left:0;padding-left:0;border-top:var(--rule-hair);padding-top:16px;margin-top:20px}
  .clause{padding-bottom:34px}
}
@media(max-width:760px){
  .contents{gap:4px 16px}
  .clause-n h2{margin-top:6px}
  /* .clause re-asserts its gap shorthand 69 lines after the earlier reset, so
     the override is pinned here, where nothing later can undo it */
  .clause{column-gap:0}
  /* 220px of label reserve inside a 335px field wrapped the message onto four
     lines across the placeholder; the tag takes its own line instead */
  .field.has-area .err{top:34px;left:14px;right:11px;max-width:none}
  .field textarea{padding-top:74px}
}

/* print: the page as a sheet */
@media print{
  .site-header,.dateline,.hero-aside .btn,.ring,.hero-pool,.bench-bar,.site-footer .btn{display:none!important}
  body{background:#fff;color:#000}
  .hero-ring,.is-ink,.platform{background:#fff!important;color:#000!important}
  .is-ink *,.platform *{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#444}
}

/* align-items:start, so a two-line caption under one tile does not push the
   picture beside it down the page. The pictures line up; the captions hang. */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px 20px;margin-top:24px;align-items:start}
.shot{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:zoom-in;font:inherit;color:inherit}
.shot .shot-frame{display:block;background:var(--ink);padding:8px;border:var(--rule-hair);overflow:hidden}
/* THE THUMBNAILS ARE HOUSE STYLE, THE LIGHTBOX IS TRUE COLOUR. A grid of
   screenshots in their own blues and greens fights the paper-and-ink palette
   and reads as a contact sheet from another site. Desaturated, they sit as
   plates on the page. The full frame in the lightbox is never filtered - it
   is there to be read, and the colour is information. */
.shot img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.06) brightness(.97);
          transition:transform var(--d-mid) var(--ease-out),filter var(--d-mid) var(--ease-out)}
.shot:hover img,.shot:focus-visible img{transform:scale(1.02);filter:grayscale(.55) contrast(1.03)}
.shot:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* the caption is a system label, like every other note on the site */
.shot .shot-cap{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;font-weight:400;
                letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);line-height:1.6}
.shots-note{margin-top:18px;color:var(--quiet)}

/* The lightbox is built by site.js and lives at the end of <body>. Hidden by
   the [hidden] attribute as well as the class, so a reader with no JavaScript
   never meets an empty black panel - the thumbnails are then simply pictures. */
.lb{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
    background:rgba(23,22,15,.94);padding:clamp(16px,4vw,48px)}
.lb[hidden]{display:none}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:14px;align-items:center}
.lb-fig img{max-width:min(1600px,92vw);max-height:78vh;width:auto;height:auto;border:1px solid rgba(244,241,234,.18)}
.lb-cap{color:var(--paper);font-size:14px;line-height:1.5;text-align:center;max-width:70ch}
.lb-cap b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
          color:rgba(244,241,234,.55);margin-bottom:6px}
.lb button{position:absolute;background:none;border:1px solid rgba(244,241,234,.3);color:var(--paper);
           font:inherit;font-size:22px;line-height:1;width:46px;height:46px;cursor:pointer;border-radius:0}
.lb button:hover,.lb button:focus-visible{border-color:var(--paper);background:rgba(244,241,234,.1)}
.lb .lb-x{top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px)}
.lb .lb-prev{left:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
.lb .lb-next{right:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
@media(max-width:600px){ .lb .lb-prev,.lb .lb-next{top:auto;bottom:16px;transform:none} }
@media(prefers-reduced-motion:reduce){ .shot img{transition:none} .shot:hover img{transform:none} }