/* ============================================================
   Zen Garden by Zariyaa — design system
   Self-contained. No CDN fonts, no external stylesheets.

   Principle: the page is an instrument reading, not a pitch.
   Every figure is rendered through .reading, which cannot be
   built without a provenance line. If a number has no source,
   the component looks broken — by design.

   Contrast: every text/background pair below is measured
   >= 4.5:1. Do not introduce a new colour without measuring it.
   ============================================================ */

/* ============================================================
   THE PALETTE — refined 2026-08-03, values taken verbatim from
   04-BRAND-DOCS/Zen-Garden-Brand-Book.html. Same family, less
   chroma. The neutrals were cold blue-grey and are now warm and
   almost neutral; the saturated blue is quieter and appears far
   less often; gold means one thing only.

   Two rules that govern USAGE, not just the hex values:
     1. Gold is provenance and nothing else. It is the line under
        a figure saying where the figure came from. It is not a
        section label, not a bullet marker, not a rule.
     2. Blue is under 4% of any page. Buttons, links, and at most
        one italic emphasis per screen.

   Contrast, already measured, do not re-derive:
     body on paper 5.86:1   ink on paper 16.15:1
     blue on paper 7.34:1   on-dark on dark 16.55:1
     muted-dark on dark 7.07:1  gold on dark 6.02:1
     white on blue 7.93:1
   ============================================================ */
:root{
  /* surfaces */
  --paper:#F7F6F3;      /* was #F6F8FB */
  --paper-2:#EFEDE8;    /* was #EDF1F9 */
  --blue-soft:#E8EAF3;  /* was #E7EDFB */
  --dark:#0B0F16;       /* was #0A1224 */
  --dark-2:#151A23;     /* was #111B33 */
  --panel:#FFFFFF;      /* raised panel: the form card, the menu sheet.
                           A ROLE, not a value. #fff was correct on paper
                           and invisible on a dark page. */

  /* ink — measured on --paper */
  --ink:#141A24;        /* was #0F1C36, chroma 39 to 16 */
  --muted:#5B6068;      /* was #556074, chroma 31 to 13 */
  --blue:#2A4AA8;       /* was #2A52CE, chroma 164 to 125 */
  --gold-ink:#7A5C29;   /* was #856121 */

  /* ink — measured on --dark */
  --on-dark:#F0EEE9;    /* was #EDF1F9 */
  --muted-dark:#9B9DA2; /* was #9AA4BC, chroma 34 to 7 */
  --blue-lt:#8FA6E0;    /* was #7FA1F0 */
  --gold:#B08A4E;       /* was #A97F3D, lifted to survive on a photograph */
  /* Kept for any surface that still sets a gold accent over a photograph.
     Nothing on the homepage does any more: the decorative gold rule that
     used to sit before the hero eyebrow read as a template mark, and as
     an em-dash, so it is gone. */
  --gold-on-image:#C9A467;

  /* lines */
  --hair:rgba(20,26,36,.11);
  --hair-2:rgba(20,26,36,.2);
  --hair-dark:rgba(240,238,233,.15);
  --hair-dark-2:rgba(240,238,233,.28);

  /* type — the established brand faces first, self-hosted (see @font-face
     below), then a system fallback. Nothing is fetched from a CDN. */
  --serif:"Newsreader",ui-serif,Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --sans:"Ubuntu Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1180px;
  --gut:clamp(20px,5vw,44px);
  /* More air. The old rhythm was 64 to 124; sections now open further
     apart, which is most of what "expensive" looks like. */
  --sec:clamp(76px,10.5vw,152px);
  --radius:14px;      /* cards and panels, was 10px */
  --radius-sm:10px;   /* buttons and inputs */
}

/* ============================================================
   SELF-HOSTED BRAND FACES — present in css/fonts/, no CDN.

   The brand faces are Newsreader (display), Ubuntu Sans (body) and
   Spline Sans Mono (micro-labels) — the decision recorded in
   _START-HERE.txt on 2026-07-30 that ended an old three-font split.
   The live site loads them from fonts.googleapis.com. This build
   does not contact a CDN, so the files are hosted with the site.

   Four variable files, latin subset, covering every weight and the
   one italic the design uses:
     ubuntu-sans-var.woff2         38 KB   wght 300..700
     newsreader-var.woff2         129 KB   opsz 6..72, wght 400..700
     newsreader-var-italic.woff2  144 KB   opsz 6..72, wght 400..700
     spline-sans-mono-var.woff2    36 KB   wght 400..600

   Licences: Newsreader and Spline Sans Mono are SIL OFL 1.1;
   Ubuntu Sans is the Ubuntu Font Licence 1.0. All three permit
   hosting on thezengarden.in. See css/fonts/LICENCES.txt.

   font-display:swap throughout, so text is readable from the first
   paint in the system fallback and never blocked on a download.
   Every measurement in this file — contrast, tap target, 360px
   overflow — holds in both the brand face and the fallback.
   ============================================================ */
/* Weight ranges below are the TRUE ranges read from each file's fvar
   table, not the narrower ranges these were first declared with.
   An under-declared range does not fail loudly: the browser silently
   clamps any weight outside it to the boundary, so a 750 display
   weight would quietly render at 700 and the hierarchy would flatten
   with nothing in the console to say why. */
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-var-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Ubuntu Sans";src:url("fonts/ubuntu-sans-var.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:"Spline Sans Mono";src:url("fonts/spline-sans-mono-var.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
/* [hidden] must beat a component's own display value. Without this,
   a .btn or .form-done carrying the hidden attribute stays visible,
   because inline-flex/grid wins over the UA sheet's [hidden] rule. */
[hidden]{display:none!important}
svg{max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
::selection{background:var(--blue);color:#fff}

/* ---------- focus: visible on every control, in both themes ---------- */
:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:3px;
}
.dark :focus-visible,.on-dark :focus-visible{outline-color:var(--blue-lt)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);
  padding:14px 20px;border-radius:0 0 var(--radius) 0;
  font-weight:600;
}
.skip:focus{left:0}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:760px}
section{padding:var(--sec) 0;position:relative}
.dark{background:var(--dark);color:var(--on-dark)}
.dark a{color:var(--on-dark)}
.tint{background:var(--blue-soft)}
.tint-2{background:var(--paper-2)}

.rule{height:1px;background:var(--hair);border:0;margin:0}
.dark .rule{background:var(--hair-dark)}

/* ---------- section heading ---------- */
.kicker{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:16px;
}
.dark .kicker{color:var(--muted-dark)}
.kicker.gold{color:var(--gold-ink)}
.dark .kicker.gold{color:var(--gold)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.015em}
h1{font-size:clamp(33px,6.4vw,62px);line-height:1.05;letter-spacing:-.025em}
h2{font-size:clamp(26px,4.4vw,44px);line-height:1.08;letter-spacing:-.02em}
h3{font-size:clamp(19px,2.6vw,26px)}
h4{font-size:clamp(17px,2vw,20px)}
/* The blue italic clause used to run on every headline on the site, which
   is both the template tell and most of the stray blue. Italic alone is
   the emphasis now. Blue emphasis is opt-in, once per screen at most,
   via .em-blue. */
h1 em,h2 em,h3 em{font-style:italic;color:inherit}
.em-blue{color:var(--blue)}
.dark .em-blue,.hero .em-blue,footer.site .em-blue{color:var(--blue-lt)}

.lede{
  font-size:clamp(17.5px,2.1vw,21px);
  line-height:1.58;
  max-width:56ch;
  margin-top:24px;
  color:var(--ink);
}
.dark .lede{color:var(--on-dark)}
p{max-width:68ch}
p + p{margin-top:14px}
.muted{color:var(--muted)}
.dark .muted{color:var(--muted-dark)}

/* ============================================================
   THE READING — the site's signature component.
   A figure may not appear on this site without one.
   fig  = the number
   what = what it counts
   src  = where it comes from, always present
   ============================================================ */
.reading{
  display:grid;
  /* align-content:start, because a .reading is itself a grid item inside
     .readings and gets stretched to the tallest row. Without this its own
     three rows stretch too, and a short figure ends up with its label
     floating half a column below the number. Measured on the Flipkart
     row, where 47 and 184 sat 60px away from what they count. */
  align-content:start;
  gap:6px;
  padding:22px 0;
  border-top:1px solid var(--hair);
}
.dark .reading{border-top-color:var(--hair-dark)}
.reading-fig{
  font-family:var(--serif);
  font-size:clamp(38px,6vw,58px);
  line-height:1;
  letter-spacing:-.03em;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.reading-fig .unit{font-size:.52em;letter-spacing:0;margin-left:1px}
.reading-what{font-size:16px;line-height:1.5;max-width:40ch}
.reading-src{
  font-family:var(--mono);
  font-size:12px;
  line-height:1.5;
  letter-spacing:.02em;
  color:var(--muted);
  max-width:44ch;
  padding-top:4px;
}
.dark .reading-src{color:var(--muted-dark)}
.reading-src b{
  font-weight:600;
  color:var(--gold-ink);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:10.5px;
  display:block;
  margin-bottom:3px;
}
.dark .reading-src b{color:var(--gold)}

.readings{
  display:grid;
  gap:0;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  margin-top:34px;
  column-gap:36px;
}
.readings .reading{border-top-width:2px;border-top-color:var(--hair-2)}
.dark .readings .reading{border-top-color:var(--hair-dark-2)}

/* inline reading, used in prose */
.fig{
  font-family:var(--serif);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:52px;
  padding:14px 26px;
  background:var(--blue);
  color:#fff;
  border:1px solid var(--blue);
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  text-align:center;
  transition:background .22s var(--ease),transform .22s var(--ease);
}
.btn:hover{background:#20397F;border-color:#20397F}
.btn:active{transform:translateY(1px)}
.btn-2{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:52px;
  padding:14px 24px;
  border:1px solid var(--hair-2);
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  color:var(--ink);
  background:transparent;
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
.btn-2:hover{border-color:var(--ink);background:rgba(15,28,54,.04)}
/* The hero is a dark surface but is not .dark (it carries its own
   scrim), so it needs the on-dark treatment explicitly. Without this
   the secondary button renders near-invisible: dark ink on dark. */
.dark .btn-2,.hero .btn-2,footer.site .btn-2{color:var(--on-dark);border-color:var(--hair-dark-2)}
.dark .btn-2:hover,.hero .btn-2:hover,footer.site .btn-2:hover{border-color:var(--on-dark);background:rgba(237,241,249,.07)}

/* ============================================================
   .hero and footer.site are dark surfaces that are NOT .dark —
   each paints its own background — so none of the `.dark X`
   rules above reach them. Measured on the rendered page, that
   left three real failures: the footer's h2 em at 2.84:1 and
   two .muted paragraphs at 2.94:1, all dark ink on dark ground.
   These give both surfaces the same on-dark palette, so any
   component dropped into either is legible by default.
   ============================================================ */
.hero :focus-visible,footer.site :focus-visible{outline-color:var(--blue-lt)}
.hero .muted,footer.site .muted{color:var(--muted-dark)}
.hero .kicker,footer.site .kicker{color:var(--muted-dark)}
.hero .kicker.gold,footer.site .kicker.gold{color:var(--gold)}
.hero h1 em,.hero h2 em,.hero h3 em,.hero .statement em,
footer.site h1 em,footer.site h2 em,footer.site h3 em,footer.site .statement em{color:inherit}
.hero .lede,footer.site .lede{color:var(--on-dark)}
.hero p,footer.site p{color:var(--on-dark)}
.hero .tlink,footer.site .tlink{color:var(--blue-lt)}
.hero .reading,footer.site .reading{border-top-color:var(--hair-dark)}
.hero .reading-src,footer.site .reading-src{color:var(--muted-dark)}
.hero .reading-src b,footer.site .reading-src b{color:var(--gold)}
.hero figure.shot figcaption,footer.site figure.shot figcaption{color:var(--muted-dark)}
.hero .form-note,footer.site .form-note{color:var(--muted-dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}

/* Measured at 360px with every font size doubled (text-only zoom 200%):
   a long button label could not wrap and pushed the page 78px wide.
   Flex items default to min-width:auto, so the button refused to
   shrink below its content. These three lines let a label wrap
   instead of overflowing, at any text size. */
.btn,.btn-2{max-width:100%;min-width:0;overflow-wrap:break-word}

/* Grid and flex items default to min-width:auto, which means they refuse
   to shrink below their content's min-content width. At 200% text on a
   360px screen that let a grid cell grow to 418px and push the page
   sideways — the button was the symptom, the track was the cause.
   Letting every layout child shrink fixes the class of bug, not the
   instance. Measured: 360px and 390px, plain and at 200% text. */
.split > *,.cards > *,.zone > *,.readings > *,.shot-grid > *,
.foot-grid > *,.form-row > *,.commit-row > *,.walk-frame > *,
.btn-row > *,.hero-strip > *,.faq details > *,.reading > *,
.nav > *,.nav-links > *,.dock > *{min-width:0}
.reading-fig,.reading-what,.reading-src{overflow-wrap:break-word}

.tlink{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;
  color:var(--blue);
  font-weight:600;
  border-bottom:1.5px solid currentColor;
  line-height:1.3;
  transition:opacity .2s var(--ease);
}
.tlink:hover{opacity:.72}
.dark .tlink{color:var(--blue-lt)}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:80;
  background:rgba(246,248,251,.94);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--hair);
}
@supports not (backdrop-filter:blur(2px)){header.site{background:var(--paper)}}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:62px;
  /* At very large text the brand and the nav can no longer sit on one
     line. Wrapping is the correct answer; pushing the page sideways
     is not. Measured at 360px with text at 200%. */
  flex-wrap:wrap;
}
.brand{display:flex;flex-direction:column;line-height:1.05;padding:8px 0;min-height:44px;justify-content:center}
.brand b{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.02em}
.brand span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0}
.nav-links a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:8px 12px;
  font-size:14.5px;font-weight:500;border-radius:9px;
  transition:background .18s var(--ease);
}
.nav-links a:hover{background:rgba(15,28,54,.06)}
.nav-links .btn{min-height:44px;padding:10px 18px;font-size:14.5px;margin-left:6px}
.nav-links .btn:hover{background:#20397F}
/* Specificity bug, found by measuring: `.nav-links a` (0,1,1) beat the
   bare `.nav-hide` (0,1,0), so this rule never applied and the desktop
   links stayed in the header on phones. The nav overflowed 360px by
   171px on the homepage; body{overflow-x:hidden} was hiding the damage
   rather than preventing it. Scoping the selector restores the intent. */
@media (max-width:900px){.nav-links .nav-hide{display:none}}

/* ---------- hero ---------- */
.hero{padding:0;position:relative;background:var(--dark);color:var(--on-dark);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(10,18,36,.90) 0%,rgba(10,18,36,.74) 42%,rgba(10,18,36,.93) 100%),
    linear-gradient(90deg,rgba(10,18,36,.80) 0%,rgba(10,18,36,.34) 78%);
}
.hero-inner{
  position:relative;z-index:2;
  padding:clamp(72px,13vw,150px) 0 clamp(44px,7vw,76px);
  max-width:840px;
}
.hero h1{color:var(--on-dark)}
.hero h1 em{color:var(--blue-lt)}
.hero-lede{
  font-size:clamp(17px,2.05vw,20.5px);
  line-height:1.55;max-width:54ch;margin-top:22px;color:var(--on-dark);
}
/* The 34px gold rule that used to sit in front of this label is gone.
   It was the single most repeated mark on the page, the owner read it
   as an em-dash, and it was doing no work. The label sits in the
   on-dark ink, which measures 16.55:1 over solid --dark and holds over
   the hero photograph, where the scrim never lets a pixel above
   rgb(50,56,71). */
.hero-eyebrow{
  display:inline-block;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-dark);opacity:.72;margin-bottom:26px;
}
.hero .btn-row{margin-top:34px}

/* the hero readings strip */
.hero-strip{
  position:relative;z-index:2;
  border-top:1px solid var(--hair-dark);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.hs{padding:22px 0 26px;padding-right:24px}
.hs + .hs{border-left:1px solid var(--hair-dark);padding-left:24px}
.hs-fig{font-family:var(--serif);font-size:clamp(27px,3.4vw,36px);font-weight:600;line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.hs-what{font-size:14px;line-height:1.45;margin-top:7px;color:var(--on-dark)}
.hs-src{font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--muted-dark);margin-top:6px}
@media (max-width:640px){
  .hs + .hs{border-left:0;border-top:1px solid var(--hair-dark);padding-left:0}
  .hs{padding-right:0}
}

/* ---------- the client strip ---------- */
.clients{padding:26px 0;border-bottom:1px solid var(--hair)}
.clients-lab{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px;
}
.clients-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,44px)}
.clients-row img{height:26px;width:auto;opacity:.62;filter:grayscale(1)}

/* ---------- big statement ---------- */
.statement{
  font-family:var(--serif);
  font-size:clamp(25px,4.1vw,42px);
  line-height:1.22;
  letter-spacing:-.02em;
  max-width:20ch;
  font-weight:600;
}
.statement em{font-style:italic;color:inherit}

.pull{
  font-family:var(--serif);
  font-size:clamp(19px,2.6vw,25px);
  line-height:1.38;
  letter-spacing:-.012em;
  /* was a 2px gold bar. Gold is provenance now, so a pulled sentence
     gets a hairline like every other rule on the page. */
  border-left:1px solid var(--hair-2);
  padding-left:24px;
  margin:32px 0;
  max-width:34ch;
}
.dark .pull{border-left-color:var(--hair-dark-2)}

/* ============================================================
   SECTION OPENINGS — a vocabulary, deliberately rotated.

   The previous homepage opened thirteen of its fourteen sections
   the same way: gold rule, gold mono label, serif headline with a
   blue italic clause. Applied thirteen times, a template reads as
   generated, which is what the owner saw. These are the other
   openings. The rule for anyone editing the page: no two
   consecutive sections may open with the same device.
   ============================================================ */

/* opening: one large sentence, alone, no label and no rule */
.opener-line{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(32px,6.6vw,64px);
  line-height:1.06;
  letter-spacing:-.028em;
  max-width:16ch;
}

/* opening: an epigraph in the left column, the argument running
   on in the right. The line IS the heading. */
.epigraph{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(24px,3.6vw,38px);
  line-height:1.22;
  letter-spacing:-.018em;
  max-width:17ch;
}

/* opening: a heading set as plain prose, so the section starts
   mid-thought with nothing that looks like a headline */
.opener-prose{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(17px,2vw,19.5px);
  line-height:1.6;
  letter-spacing:0;
  max-width:60ch;
  color:var(--ink);
}

/* opening: a running head, small and plain, after a bare rule */
.opener-quiet{
  font-family:var(--sans);
  font-weight:600;
  font-size:16px;
  line-height:1.5;
  letter-spacing:0;
  color:var(--muted);
  margin-top:clamp(30px,5vw,54px);
}

/* ---------- two-column split ---------- */
.split{
  display:grid;
  gap:clamp(28px,5vw,64px);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split-13{grid-template-columns:1.05fr 1fr}
  .split-sticky > :first-child{position:sticky;top:92px}
}

/* ---------- cards / list ---------- */
.cards{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:34px}
.card{
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:26px 24px 28px;
}
.dark .card{background:var(--dark-2);border-color:var(--hair-dark)}
.card h3,.card h4{margin-bottom:10px}
.card p{font-size:15.5px;color:var(--muted)}
.dark .card p{color:var(--muted-dark)}
.cards.gap{gap:14px}

.steps{margin-top:34px;counter-reset:s}
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  padding:24px 0;
  border-top:1px solid var(--hair);
  align-items:start;
}
.dark .step{border-top-color:var(--hair-dark)}
.step-n{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--muted);padding-top:5px;min-width:34px;
}
.dark .step-n{color:var(--muted-dark)}
.step h4{margin-bottom:6px}
.step p{font-size:15.5px;color:var(--muted);max-width:60ch}
.dark .step p{color:var(--muted-dark)}

/* ---------- the commitments (guarantee asymmetry) ---------- */
.commit{
  display:grid;gap:0;margin-top:30px;
  border-top:1px solid var(--hair-dark);
}
.commit-row{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  padding:22px 0;
  border-bottom:1px solid var(--hair-dark);
}
@media (min-width:760px){
  .commit-row{grid-template-columns:1.1fr 1fr;gap:28px;align-items:baseline}
}
.commit-what{font-family:var(--serif);font-size:clamp(18px,2.2vw,22px);line-height:1.32;letter-spacing:-.012em}
.commit-who{font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--muted-dark);letter-spacing:.02em}
.commit-note{
  margin-top:26px;padding:22px 24px;
  border:1px solid var(--hair-2);border-radius:var(--radius);
  font-size:15.5px;line-height:1.6;max-width:62ch;
}
.dark .commit-note{border-color:var(--hair-dark-2)}
/* Measured 3.41:1 on privacy, recovery-standard and cfo-brief: this
   used the on-dark gold on a light card. The light surface is the
   default case now, so it gets the light-surface ink and .dark
   overrides it, not the other way round. */
.commit-note b{color:var(--ink)}
.dark .commit-note b{color:var(--on-dark)}

/* ---------- photo figures ---------- */
figure.shot{margin:0}
figure.shot img{border-radius:var(--radius);width:100%}
figure.shot figcaption{
  font-family:var(--mono);font-size:11.5px;line-height:1.5;
  color:var(--muted);margin-top:10px;letter-spacing:.02em;
}
.dark figure.shot figcaption{color:var(--muted-dark)}
.shot-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:30px}
.shot-tall img{aspect-ratio:3/4;object-fit:cover}
.shot-wide img{aspect-ratio:16/10;object-fit:cover}

.bleed{margin-top:36px}
.bleed img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius)}
@media (max-width:620px){.bleed img{aspect-ratio:4/3}}

/* ---------- zones ---------- */
.zone{
  display:grid;gap:clamp(22px,4vw,48px);
  grid-template-columns:1fr;
  padding:clamp(30px,5vw,52px) 0;
  border-top:1px solid var(--hair);
  align-items:start;
}
@media (min-width:900px){.zone{grid-template-columns:1fr 1.05fr}}
.zone-n{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;display:block;
}
.zone h3{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em}
.zone-p{margin-top:12px;color:var(--ink);max-width:46ch;font-size:16.5px}
.zone-list{margin-top:18px;display:grid;gap:1px}
.zone-list li{padding:11px 0;border-top:1px solid var(--hair);font-size:15.5px}
.zone-list b{font-weight:600;display:inline-block;min-width:150px}
.zone-list span{color:var(--muted)}

/* ---------- forms ---------- */
.form-card{
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:clamp(24px,4vw,40px);
  max-width:720px;
  box-shadow:0 1px 2px rgba(15,28,54,.05),0 12px 34px -22px rgba(15,28,54,.4);
}
.dark .form-card{background:var(--dark-2);border-color:var(--hair-dark);box-shadow:none}
.field{margin-bottom:18px}
.field > label,.legend{
  display:block;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
  font-weight:600;
}
.dark .field > label,.dark .legend{color:var(--muted-dark)}
.field .hint{
  display:block;font-family:var(--sans);font-size:13.5px;letter-spacing:0;
  text-transform:none;color:var(--muted);margin-top:-2px;margin-bottom:8px;font-weight:400;
}
.dark .field .hint{color:var(--muted-dark)}  /* measured 2.70:1 without this */
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;
  min-height:52px;
  padding:14px 15px;
  background:var(--paper);
  border:1.5px solid var(--hair-2);
  border-radius:var(--radius-sm);
  font-size:16px;              /* 16px prevents iOS zoom-on-focus */
  line-height:1.4;
  color:var(--ink);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.dark input,.dark select,.dark textarea{background:rgba(237,241,249,.05);border-color:var(--hair-dark-2);color:var(--on-dark)}
textarea{min-height:112px;resize:vertical}
select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23556074' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:12px;
  padding-right:42px;
}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);background:var(--panel)}
.dark input:focus,.dark select:focus,.dark textarea:focus{background:rgba(237,241,249,.09)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.dark input::placeholder,.dark textarea::placeholder{color:var(--muted-dark)}
.form-row{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:620px){.form-row{grid-template-columns:1fr 1fr}}

/* radio cards — the intent chooser */
.choice{display:grid;gap:10px;margin-bottom:20px}
.choice label{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:13px;
  align-items:start;
  padding:15px 16px;
  min-height:56px;
  border:1.5px solid var(--hair-2);
  border-radius:12px;
  cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.choice label:hover{border-color:var(--muted)}
.choice input[type=radio]{
  width:20px;height:20px;min-height:20px;margin-top:2px;accent-color:var(--blue);flex:none;padding:0;
}
.choice input[type=radio]:checked ~ .choice-t{color:var(--blue)}
.choice label:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.choice-t{display:block;font-weight:600;font-size:16px;line-height:1.35}
.choice-d{display:block;font-size:14px;line-height:1.45;color:var(--muted);margin-top:3px}

/* validation */
.err-msg{
  display:none;
  font-size:14px;line-height:1.5;
  color:#A4232A;
  margin-top:6px;
  font-weight:500;
}
.field.invalid .err-msg{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#A4232A}
.dark .err-msg{color:#F2A0A4}
.form-err{
  display:none;
  padding:14px 16px;
  border:1.5px solid #A4232A;
  border-radius:var(--radius-sm);
  background:rgba(164,35,42,.06);
  color:#8C1D24;
  font-size:15px;
  line-height:1.55;
  margin-bottom:16px;
}
.form-err a{color:inherit;text-decoration:underline}
.dark .form-err{color:#F2A0A4;background:rgba(242,160,164,.09);border-color:#F2A0A4}
.form-note{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:14px;max-width:52ch}
.dark .form-note{color:var(--muted-dark)}
.form-done,.dark .form-done{
  border:1.5px solid var(--blue);
  background:var(--blue-soft);
  border-radius:var(--radius);
  padding:clamp(24px,4vw,34px);
  max-width:720px;
  color:var(--ink);
}
.form-done h3,.dark .form-done h3{margin-bottom:8px;color:var(--ink)}
.form-done p,.dark .form-done p{font-size:16px;max-width:52ch;color:var(--ink)}
.form-done .tlink,.dark .form-done .tlink{color:var(--blue)}
.form-done .form-note,.dark .form-done .form-note{color:var(--muted)}
.form-done .btn-2,.dark .form-done .btn-2{color:var(--ink);border-color:var(--hair-2)}

/* ---------- FAQ ---------- */
.faq{margin-top:30px;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:20px 0;min-height:56px;
  cursor:pointer;
  font-family:var(--serif);
  font-size:clamp(17.5px,2.2vw,21px);
  line-height:1.35;
  letter-spacing:-.012em;
  font-weight:600;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  /* was --blue. Three blue plus signs in one screenshot is three more
     accents than the page has budget for; blue is the buttons and links. */
  font-family:var(--sans);font-size:24px;line-height:1;color:var(--muted);
  flex:none;transition:transform .22s var(--ease);
}
.faq summary:hover{color:var(--blue)}
.faq details[open] summary::after{content:"\2013"}
.faq-a{padding:0 0 24px;max-width:66ch}
.faq-a p{font-size:16px;color:var(--ink)}
.faq-tag{
  display:inline-block;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--hair-2);
  border-radius:20px;padding:3px 9px;margin-bottom:10px;
}

/* ---------- footer ---------- */
footer.site{background:var(--dark);color:var(--on-dark);padding:clamp(52px,7vw,84px) 0 34px}
footer.site a{color:var(--on-dark)}
.foot-cta{
  display:grid;gap:22px;align-items:center;
  padding-bottom:clamp(40px,6vw,62px);
  border-bottom:1px solid var(--hair-dark);
}
@media (min-width:820px){.foot-cta{grid-template-columns:1.4fr auto}}
.foot-grid{
  display:grid;gap:clamp(28px,4vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  padding:clamp(38px,5vw,56px) 0;
}
.foot-col h5{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted-dark);margin-bottom:14px;font-weight:600;
}
.foot-col a{
  display:block;padding:9px 0;min-height:44px;
  font-size:15px;line-height:1.5;color:var(--on-dark);opacity:.82;
}
.foot-col a:hover{opacity:1}
.foot-mark b{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.02em;display:block}
.foot-mark span{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted-dark)}
.foot-legal{
  padding-top:24px;border-top:1px solid var(--hair-dark);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  font-size:13.5px;color:var(--muted-dark);
}
.foot-legal a{opacity:.85;min-height:44px;display:inline-flex;align-items:center}

/* ============================================================
   THE WALKTHROUGH — see the room before speaking to anyone.

   Two states, both real:

   FALLBACK (no JS): every stop is visible, stacked, in order,
   with its own heading, photograph and caption. It reads as an
   illustrated sequence. The rail renders as a plain list of
   in-page links and the prev/next controls are hidden, because
   without script they would be buttons that do nothing.

   LIVE (.walk-live added by js): one stop at a time, a numbered
   rail with tab semantics, keyboard arrows, prev/next.
   ============================================================ */
.walk{margin-top:34px}
.walk-frame{
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
}
.dark .walk-frame{background:var(--dark-2);border-color:var(--hair-dark)}

/* the rail */
.walk-rail{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:12px;
  border-bottom:1px solid var(--hair);
  background:var(--paper);
}
.dark .walk-rail{background:rgba(237,241,249,.04);border-bottom-color:var(--hair-dark)}
.walk-rail a,.walk-rail button{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:8px 13px;
  border:1px solid transparent;
  border-radius:9px;
  font-size:14px;font-weight:500;line-height:1.25;
  color:var(--ink);
  text-align:left;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.dark .walk-rail a,.dark .walk-rail button{color:var(--on-dark)}
.walk-rail a:hover,.walk-rail button:hover{background:rgba(15,28,54,.05)}
.dark .walk-rail a:hover,.dark .walk-rail button:hover{background:rgba(237,241,249,.07)}
.walk-rail [aria-selected="true"]{
  background:var(--blue-soft);
  border-color:var(--blue);
  color:var(--blue);
  font-weight:600;
}
.dark .walk-rail [aria-selected="true"]{background:rgba(127,161,240,.16);border-color:var(--blue-lt);color:var(--blue-lt)}
.walk-rail .n{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--muted);font-weight:600;flex:none;
}
.dark .walk-rail .n{color:var(--muted-dark)}
.walk-rail [aria-selected="true"] .n{color:inherit}

/* a stop */
.walk-stop{padding:0}
.walk-stop + .walk-stop{border-top:1px solid var(--hair)}
.dark .walk-stop + .walk-stop{border-top-color:var(--hair-dark)}
.walk-live .walk-stop + .walk-stop{border-top:0}
.walk-stop:focus{outline:none}
.walk-shot img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:0;
}
@media (max-width:560px){.walk-shot img{aspect-ratio:4/3}}
.walk-body{padding:clamp(20px,3.4vw,30px)}
.walk-body .n{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:9px;
}
.dark .walk-body .n{color:var(--muted-dark)}
.walk-body h3{font-size:clamp(21px,3vw,29px)}
.walk-body p{margin-top:11px;font-size:16.5px;max-width:60ch}
.walk-body .walk-notice{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--muted);max-width:56ch;
}
.dark .walk-body .walk-notice{border-top-color:var(--hair-dark);color:var(--muted-dark)}
.walk-body .walk-notice b{
  color:var(--ink);text-transform:uppercase;letter-spacing:.13em;
  font-size:10.5px;display:block;margin-bottom:4px;font-weight:600;
}
.dark .walk-body .walk-notice b{color:var(--on-dark)}

/* controls — only meaningful once script is running */
.walk-controls{display:none}
.walk-live .walk-controls{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px clamp(20px,3.4vw,30px) 20px;
  border-top:1px solid var(--hair);
}
.dark .walk-live .walk-controls{border-top-color:var(--hair-dark)}
.walk-controls button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;
  border:1px solid var(--hair-2);border-radius:var(--radius-sm);
  font-size:15px;font-weight:600;line-height:1.2;color:var(--ink);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.dark .walk-controls button{color:var(--on-dark);border-color:var(--hair-dark-2)}
.walk-controls button:hover:not(:disabled){border-color:var(--ink);background:rgba(15,28,54,.04)}
.dark .walk-controls button:hover:not(:disabled){border-color:var(--on-dark);background:rgba(237,241,249,.07)}
.walk-controls button:disabled{opacity:.42;cursor:default}
.walk-count{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-left:auto;
}
.dark .walk-count{color:var(--muted-dark)}

/* ============================================================
   THE FILM — a click-to-play facade.

   Until the button is pressed this is a photograph and a button.
   No iframe exists in the document, so no request goes to any
   Google domain, no cookie is set and nothing is measured. The
   iframe is built in js/zen.js on the click and points at
   youtube-nocookie.com. Verified in headless Chrome: zero
   requests to youtube, ytimg, googlevideo or doubleclick on
   load; the first one is the click.
   ============================================================ */
.film{margin:0 0 clamp(30px,4.5vw,48px)}
.film-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--dark);
}
.film-poster{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.film-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,15,22,.12) 0%,rgba(11,15,22,.30) 55%,rgba(11,15,22,.58) 100%);
}
.film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.film-play{
  position:absolute;left:50%;bottom:clamp(18px,4vw,32px);
  transform:translateX(-50%);
  z-index:2;
  display:inline-flex;align-items:center;gap:14px;
  min-height:56px;padding:10px 26px 10px 12px;
  border-radius:100px;
  background:rgba(11,15,22,.74);
  border:1px solid rgba(240,238,233,.34);
  color:var(--on-dark);
  font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.2;
  /* the label broke over two lines at 390px and read as a mistake */
  white-space:nowrap;
  transition:background .2s var(--ease);
}
@media (max-width:420px){.film-play{font-size:15px;padding:10px 20px 10px 11px;gap:11px}}
@supports (backdrop-filter:blur(2px)){.film-play{backdrop-filter:blur(8px)}}
.film-play:hover{background:rgba(11,15,22,.9)}
.film-play:focus-visible{outline:3px solid var(--on-dark);outline-offset:4px}
.film-play-mark{
  width:36px;height:36px;flex:none;border-radius:50%;
  background:var(--on-dark);position:relative;
}
.film-play-mark::before{
  content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-left:12px solid var(--dark);
  border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;
}
.film figcaption{
  font-family:var(--mono);font-size:11.5px;line-height:1.5;
  color:var(--muted);margin-top:12px;letter-spacing:.02em;
}

/* Spam trap. Off-screen rather than display:none, because some bots
   skip anything hidden. Never focusable, never announced. */
.trap{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

/* ---------- sticky mobile CTA ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(10,18,36,.97);
  border-top:1px solid var(--hair-dark);
  padding:10px var(--gut);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  display:none;
  gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.dock-t{font-size:13.5px;line-height:1.35;color:var(--on-dark);max-width:20ch}
.dock .btn{min-height:46px;padding:11px 18px;font-size:15px;flex:none}
@media (max-width:900px){.dock{display:flex}body{padding-bottom:76px}}
/* Once the form itself is on screen the dock is pointing at the thing
   it is covering, so it leaves. Enhancement only: without JS it stays. */
.dock-away{transform:translateY(105%);transition:transform .3s var(--ease)}
@media (prefers-reduced-motion:reduce){.dock-away{transition:none}}

/* ---------- mobile menu — a <details>, so it needs no script ---------- */
/* The menu used to be the small-screen fallback and was hidden above
   900px, because desktop had the three inline links. It now carries
   the trial action and the appearance control as well, so it has to
   exist at every width. The inline links stay on desktop: they are
   shortcuts, and hiding a shortcut behind a click to look tidier
   costs the reader more than the tidiness is worth. */
.menu{position:relative;display:block}
.menu > summary{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:9px 14px;
  border:1px solid var(--hair-2);border-radius:var(--radius-sm);
  font-size:14.5px;font-weight:600;cursor:pointer;list-style:none;
}
.menu > summary::-webkit-details-marker{display:none}
/* the typed "+"/"-" pair was replaced by the drawn .menu-x, which
   can rotate between the two states instead of swapping glyphs */
.menu-panel{
  position:absolute;right:0;top:calc(100% + 9px);z-index:90;
  min-width:232px;
  background:var(--paper);
  border:1px solid var(--hair-2);
  border-radius:12px;
  padding:7px;
  box-shadow:0 18px 40px -20px rgba(15,28,54,.55);
}
.menu-panel a{
  display:block;padding:11px 13px;min-height:44px;
  font-size:15.5px;line-height:1.4;border-radius:9px;
}
.menu-panel a:hover{background:rgba(15,28,54,.06)}

/* ---------- motion: opt-in, and only when allowed ---------- */
/* Default state is VISIBLE. JS adds .motion to <html> only when
   motion is permitted, which is what arms the hidden state.
   With JS off, or reduced-motion on, everything is simply visible. */
.motion .reveal{opacity:0;transform:translateY(14px)}
.motion .reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.motion .reveal-kids > *{opacity:0;transform:translateY(12px)}
.motion .reveal-kids.in > *{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.motion .reveal-kids.in > *:nth-child(2){transition-delay:.07s}
.motion .reveal-kids.in > *:nth-child(3){transition-delay:.14s}
.motion .reveal-kids.in > *:nth-child(4){transition-delay:.21s}
.motion .reveal-kids.in > *:nth-child(5){transition-delay:.28s}
.motion .reveal-kids.in > *:nth-child(6){transition-delay:.35s}

@media (prefers-reduced-motion:reduce){
  .motion .reveal,.motion .reveal-kids > *{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ============================================================
   PAIRS — a two-column row for LIGHT backgrounds.

   .commit is the same "left thing, right qualification" shape,
   but every ink and rule in it is measured against --dark and
   only against --dark: on paper its right-hand column would sit
   at roughly 2.6:1. Rather than weaken .commit, this is its
   light-surface twin, measured on --paper.
   Added for the leadership brief, which is read on screen and
   then printed on white.
   ============================================================ */
.pairs{display:grid;gap:0;margin-top:26px;border-top:2px solid var(--hair-2)}
.pair{
  display:grid;grid-template-columns:1fr;gap:5px;
  padding:17px 0;border-bottom:1px solid var(--hair);
}
@media (min-width:760px){
  .pair{grid-template-columns:1fr 1.15fr;gap:30px;align-items:baseline}
}
.pair-a{font-weight:600;font-size:16px;line-height:1.45;color:var(--ink)}
.pair-b{font-size:15.5px;line-height:1.6;color:var(--muted);max-width:52ch}
.dark .pair{border-bottom-color:var(--hair-dark)}
.dark .pairs{border-top-color:var(--hair-dark-2)}
.dark .pair-a{color:var(--on-dark)}
.dark .pair-b{color:var(--muted-dark)}

/* ============================================================
   THE BRIEF'S CLOSING RULE — one line, four items, inline.

   The previous leadership brief pushed the "Systems by
   compound.business" credit onto its own centred row of a
   separate document footer, where it read as an orphan. Here
   the four items are members of one flex rule and cannot be
   separated from it. No telephone number appears: three
   different numbers exist across this project's documents and
   none is confirmed.
   ============================================================ */
.brief-rule{
  margin-top:36px;padding-top:18px;
  border-top:2px solid var(--hair-2);
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:4px 14px;
  font-family:var(--mono);font-size:11.5px;line-height:1.85;
  letter-spacing:.05em;color:var(--muted);max-width:none;
}
.brief-rule b{color:var(--ink);font-weight:600}
.brief-rule a{color:var(--muted);border-bottom:1px solid var(--hair-2)}
.brief-rule .sep{color:var(--muted)}  /* was --hair-2, measured 1.66:1 */

/* ============================================================
   LEGAL DOCUMENTS — /privacy and /terms only.

   Those two pages are the one place on this site where a real
   bulleted list is the honest form: an enumeration of rights or
   of prohibited uses is a list, and flattening it into prose
   would make it harder to check. The reset at the top of this
   file removes list markers globally, so the markers are put
   back here rather than site-wide.

   .doc is a single reading column. .doc-list is the bulleted
   list. Nothing else on the site uses either.
   ============================================================ */
.doc{max-width:76ch}
.doc h2{margin-top:44px;font-size:clamp(22px,3vw,30px)}
.doc h3{margin-top:26px;font-size:17px;font-family:var(--sans);font-weight:700}
.doc p{margin-top:14px;max-width:72ch}
.doc .rule{margin:36px 0}
.doc-list{
  list-style:disc;
  padding-left:22px;
  margin-top:14px;
  max-width:70ch;
}
.doc-list li{
  list-style:disc;
  margin-bottom:8px;
  padding-left:2px;
  line-height:1.6;
}
.doc-list li::marker{color:var(--muted)}

/* ============================================================
   THE LOGO WALL — every logo on disk, one caption, one sentence.

   The old strip showed two logos and withheld thirteen behind a
   comment. Presence is not proof, but presence is worth showing;
   it just gets a different caption. The caption is fixed by
   proof.json's logoWall.correctCaption and is not editable here.
   ============================================================ */
.logo-wall{
  display:grid;
  /* Fifteen logos. Three across on a phone and five across above 760px
     both divide exactly, so no row is left with one orphan on it. */
  grid-template-columns:repeat(3,1fr);
  align-items:center;
  gap:clamp(22px,3.6vw,44px) clamp(18px,3vw,38px);
}
@media (min-width:760px){.logo-wall{grid-template-columns:repeat(5,1fr)}}
.logo-wall img{
  height:26px;width:auto;max-width:100%;
  margin:0 auto;
  opacity:.55;
  filter:grayscale(1);
}
@media (min-width:760px){.logo-wall img{height:30px}}
.logo-cap{
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  color:var(--muted);margin-top:clamp(26px,4vw,40px);
  padding-top:20px;border-top:1px solid var(--hair);
  max-width:none;
}
.logo-note{margin-top:10px;font-size:15.5px;color:var(--muted);max-width:64ch}

/* ============================================================
   DISCLOSURE — the deep proof, folded.

   A visitor who has watched the tour is a different reader from
   one who has not, and the second reader does not want eleven
   hundred words of methodology in front of the room. This is
   native <details>, so it works with script off, prints open on
   request, and is searchable in-page in every modern browser.

   Visually distinct from .faq on purpose: .faq summaries are
   serif questions, these are sans-serif labels. Two disclosure
   lists on one page must not read as the same component.
   ============================================================ */
.disclose{margin-top:clamp(26px,4vw,40px);border-top:1px solid var(--hair-2)}
.disclose details{border-bottom:1px solid var(--hair)}
.disclose summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 2px;min-height:56px;cursor:pointer;
  font-family:var(--sans);font-size:16.5px;font-weight:600;line-height:1.4;
  list-style:none;
}
.disclose summary::-webkit-details-marker{display:none}
.disclose summary::after{
  content:"+";
  font-family:var(--sans);font-size:22px;line-height:1;color:var(--muted);
  flex:none;font-weight:400;
}
.disclose details[open] summary::after{content:"\2013"}
.disclose summary:hover{color:var(--blue)}
.disclose-b{padding:2px 0 34px;max-width:72ch}
.disclose-b p{font-size:16px;max-width:66ch}
.disclose-b > * + *{margin-top:14px}
.disclose-b .readings{margin-top:22px}
.disclose-b .shot-grid{margin-top:22px}
.dark .disclose{border-top-color:var(--hair-dark-2)}
.dark .disclose details{border-bottom-color:var(--hair-dark)}

/* the provenance line, standing alone under a claim rather than
   under a .reading. Gold, because gold is provenance. */
.cite{
  font-family:var(--mono);font-size:12px;line-height:1.55;
  letter-spacing:.02em;color:var(--muted);max-width:64ch;margin-top:12px;
}
.cite b{
  display:block;font-weight:600;color:var(--gold-ink);
  text-transform:uppercase;letter-spacing:.13em;font-size:10.5px;margin-bottom:3px;
}
.dark .cite{color:var(--muted-dark)}
.dark .cite b{color:var(--gold)}

/* three zones side by side, replacing three full-width blocks */
.trio{
  display:grid;gap:clamp(22px,3vw,32px);
  grid-template-columns:1fr;
  margin-top:clamp(30px,4vw,46px);
}
@media (min-width:820px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio img{aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);width:100%}
.trio h3{margin-top:18px;font-size:clamp(21px,2.6vw,26px)}
.trio p{margin-top:8px;font-size:16px;color:var(--muted);max-width:34ch}
.trio .trio-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:block;margin-top:16px;
}
.trio h3 + .trio-n{margin-top:10px}

/* a section that opens on nothing but a rule */
.opener-rule{height:1px;background:var(--hair-2);border:0;margin:0}
.dark .opener-rule{background:var(--hair-dark-2)}

/* ---------- print ---------- */
@media print{
  header.site,.dock,footer.site .foot-cta{display:none}
  body{background:#fff;color:#000}
  section{padding:18px 0;break-inside:avoid}
  .hero{background:#fff;color:#000}
  .hero-media,.hero-scrim{display:none}
  .hero h1,.hero-lede,.hs-fig,.hs-what{color:#000}
}

/* ============================================================
   PRINT — THE LEADERSHIP BRIEF (body.brief)

   The brief is written to be forwarded, and forwarded usually
   means printed or saved as a PDF. The previous version forced
   the document into exactly two pages and read as cramped, and
   it did it with fixed-height page shells, which stranded dead
   whitespace wherever a block would not fit the shell.

   This does the opposite. Content flows naturally; the only
   instructions given to the printer are (a) do not split these
   blocks and (b) start these two sections on a fresh page.
   The page count is a result, not a target. At A4 with a 14mm
   margin it lands on three.
   ============================================================ */
@media print{
  @page{size:A4;margin:14mm}

  .brief header.site,
  .brief footer.site,
  .brief .dock,
  .brief .no-print{display:none!important}

  .brief{background:#fff;color:#000;font-size:11.5px;line-height:1.48;padding-bottom:0!important}
  .brief .wrap{max-width:100%;padding:0}
  .brief section{padding:9px 0;break-inside:auto}

  /* The colophon may not open a page by itself. Left free it took a
     whole fourth sheet for one contact line, which reads as a printing
     fault rather than a document. */
  .brief footer.site,.brief .foot-legal{break-before:avoid;page-break-before:avoid}
  .brief section:first-of-type{padding-top:0}

  /* An A4 page is about 690 CSS px wide, which is under every
     min-width query in this sheet, so on paper the two-column
     blocks would all collapse into one long column and the brief
     would run to six pages of half-empty rows. On paper the
     columns are restored explicitly. */
  .brief .split{grid-template-columns:1fr 1fr;gap:26px}
  .brief .split-13{grid-template-columns:1.05fr 1fr}
  .brief .commit-row{grid-template-columns:1.1fr 1fr;gap:24px;align-items:baseline}
  .brief .pair{grid-template-columns:1fr 1.2fr;gap:24px;align-items:baseline}

  /* The two deliberate page starts, WITHDRAWN 4 August 2026.

     A forced break is only ever as good as the length of the text
     above it. When the 91% reading grew by a line to carry its
     population, the paragraph before this break stopped fitting
     with its neighbours and landed alone: page two of a document
     that goes to a CFO held 241 characters and nothing else.

     A forced break cannot know that happened, which is why it does
     not belong in a document whose content changes. The break-inside
     rules below already keep every block whole, and that is the
     protection that actually holds as the text moves. */
  .brief .break-page{break-before:auto;page-break-before:auto}

  /* keep a block whole rather than let it straddle a fold */
  .brief .reading,
  .brief .pair,
  .brief .commit-row,
  .brief .step,
  .brief .card,
  .brief .commit-note,
  .brief .pull,
  .brief .brief-rule,
  .brief figure.shot{break-inside:avoid;page-break-inside:avoid}

  /* a heading never sits alone at the foot of a page */
  .brief h1,.brief h2,.brief h3,.brief h4,
  .brief .kicker,.brief .statement{break-after:avoid;page-break-after:avoid}
  .brief p{orphans:3;widows:3}

  /* dark and tinted panels become paper, and their inks come
     back to black so nothing is printed at 2:1 on white */
  .brief .dark,.brief .tint,.brief .tint-2{background:#fff!important;color:#000!important}
  .brief .dark h2,.brief .dark h3,.brief .dark p,
  .brief .dark .lede,.brief .dark .commit-what{color:#000!important}
  .brief .dark h1 em,.brief .dark h2 em,.brief .dark h3 em,
  .brief .dark .statement em{color:#1F41AC!important}
  .brief .dark .kicker,.brief .dark .commit-who,
  .brief .dark .muted,.brief .dark .reading-src{color:#3E4A61!important}
  .brief .dark .commit,.brief .dark .commit-row,
  .brief .dark .reading{border-color:rgba(0,0,0,.22)!important}
  .brief .dark .commit-note{border-color:#856121!important}
  .brief .dark .commit-note b,.brief .dark .reading-src b,
  .brief .dark .kicker.gold{color:#856121!important}

  /* print density: the brief breathes, it does not shout */
  .brief h1{font-size:29px;line-height:1.06}
  .brief h2{font-size:19px}
  .brief h3{font-size:15.5px}
  .brief .lede{font-size:13px;line-height:1.5;max-width:66ch}
  .brief .reading-fig{font-size:25px}
  .brief .reading-what{font-size:11.5px}
  .brief .reading-src{font-size:9.5px;line-height:1.45}
  .brief .readings{column-gap:22px;grid-template-columns:repeat(4,1fr);margin-top:18px}
  .brief .reading{padding:11px 0}
  .brief .pair{padding:8px 0}
  .brief .steps{margin-top:16px}
  .brief .lede{margin-top:12px}
  .brief p + p{margin-top:9px}
  .brief .pull{margin:14px 0 0;padding-left:16px;font-size:13px;max-width:60ch}
  .brief .pair-a{font-size:11.8px}
  .brief .pair-b{font-size:11.3px}
  .brief .commit-what{font-size:13px}
  .brief .commit-who{font-size:9.5px}
  .brief .commit-row{padding:13px 0}
  /* on screen this note is held to 62ch beside other content; on
     paper it is the full measure of the page, so it sets as three
     lines instead of six and stops pushing the section over a fold */
  .brief .commit-note{font-size:11px;padding:13px 15px;max-width:none;margin-top:14px}
  .brief .step{padding:10px 0}
  .brief .step p{font-size:11.3px}
  .brief .kicker{font-size:9px;margin-bottom:10px}
  .brief .pull{font-size:14px}
  .brief .brief-rule{font-size:9.5px;margin-top:14px;padding-top:10px;line-height:1.5}
  .brief a{color:#000;text-decoration:none}
}

/* ============================================================
   RHYTHM, REVISED — 4 August 2026

   The old rhythm was width-only: clamp(76px,10.5vw,152px). On a
   1440-wide, 900-tall desktop that is fine. On a 1000x625 laptop
   it spends a third of the visible screen on padding, and every
   section reads as mostly empty with a paragraph floating in it.

   Air should be governed by the SHORTER dimension. min(vw,vh)
   keeps the generous feel on a big monitor and takes it back on
   a short screen, which is where the site actually gets read.
   ============================================================ */
:root{
  --sec:clamp(52px, min(8vw, 10vh), 112px);
  --sec-tight:clamp(38px, min(5.4vw, 7vh), 76px);
}

/* Dense sections carry their own weight and do not need the full
   measure: a logo wall or an evidence table is already busy. */
#evidence,
#tour,
#clients,
.sec-tight{padding:var(--sec-tight) 0}

/* A split whose columns differ in length must align at the top.
   Centring leaves a short column floating with dead space above
   and below it, which is most of what looked broken. */
.split,.split-13{align-items:start}

/* ============================================================
   THE TOUR — ONE SCREEN

   Stacked, a 16:9 image at 1136px wide is 639px tall, so the
   reader meets a full screen of photograph before a single word
   and the Back/Next controls sit below the fold. Side by side
   the whole stop, image, copy and controls, fits one viewport.
   ============================================================ */
@media (min-width:900px){
  .walk-stop{
    display:grid;
    grid-template-columns:1.02fr .98fr;
    align-items:stretch;
    min-height:clamp(300px, 46vh, 430px);
  }
  /* JS toggles the `hidden` ATTRIBUTE. A class rule setting
     display would beat the UA's [hidden]{display:none} and paint
     all six stops at once, so restate it at higher specificity. */
  .walk-stop[hidden]{display:none}

  .walk-shot{height:100%;min-height:0}
  .walk-shot img{
    height:100%;width:100%;
    aspect-ratio:auto;
    object-fit:cover;
    min-height:clamp(300px, 46vh, 430px);
  }
  .walk-body{
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(24px,2.6vw,38px);
  }
  .walk-body p{font-size:16px;max-width:44ch}
  .walk-body .walk-notice{max-width:44ch}
}

/* ============================================================
   THE TOUR ON A PHONE

   The rail wrapped onto three rows, which cost more height than
   the photograph saved. One scrolling strip, snapped, with the
   selected stop always pulled into view by the existing JS.
   ============================================================ */
@media (max-width:899px){
  .walk-rail{
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:9px 10px;
  }
  .walk-rail::-webkit-scrollbar{display:none}
  .walk-rail a,.walk-rail button{flex:none;scroll-snap-align:start;min-height:40px;padding:7px 12px}
  .walk-shot img{aspect-ratio:5/3}
  .walk-body{padding:clamp(18px,4.5vw,24px)}
}

/* A hairline that separates photograph from copy without drawing
   a line anybody notices. */
@media (min-width:900px){
  .walk-body{border-left:1px solid var(--hair)}
  .dark .walk-body{border-left-color:var(--hair-dark)}
}

/* ============================================================
   DOWNLOAD BUTTONS — cfo-brief

   A CFO deciding whether to click a PDF wants to know what it
   is going to cost them: how long, how heavy, and whether it
   is going to take away the page they are reading. All three
   answers now sit on the button itself.
   ============================================================ */
.dl-row{gap:14px}
.dl{
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  min-height:62px;
  padding:12px 22px;
  text-align:left;
}
.dl .dl-t{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:600;font-size:15.5px;line-height:1.25;
}
.dl .dl-m{
  font-family:var(--mono);
  font-size:11.5px;letter-spacing:.03em;line-height:1.35;
  font-weight:400;
  color:var(--muted);
}
.btn.dl .dl-m{color:rgba(255,255,255,.74)}
.dark .btn-2.dl .dl-m{color:var(--muted-dark)}
.dl-ext{opacity:.45;flex:none;transform:translateY(-.5px);transition:opacity .18s var(--ease)}
.btn-2.dl:hover .dl-ext,.btn-2.dl:focus-visible .dl-ext{opacity:.95}

/* On a phone a row of three stacked-label buttons wraps badly.
   Full width, in order, each one an easy target. */
@media (max-width:640px){
  .dl-row{flex-direction:column;align-items:stretch;gap:10px}
  .dl{width:100%}
}

/* ============================================================
   BIG SCREENS — 4 August 2026

   The site is shown in client meetings: a MacBook driving an
   office display, or a scaled Retina panel. At --wrap:1180px a
   2560-wide screen puts the whole company inside a narrow
   column with a field of empty paper either side, which reads
   as a small business rather than a confident one.

   Three things grow together, or it looks stretched instead of
   scaled: the measure, the prose, and the headline ceiling.
   Body copy is the lever, because `p` inherits from body and
   the component sizes below ride along with it.

   Line length is still governed by `p{max-width:68ch}`, so the
   measure never becomes unreadable no matter how wide it gets.
   ============================================================ */
/* 1400 rather than 1500: a 13-inch MacBook Air at its default
   scaled resolution lands at 1470 wide and would otherwise miss
   the bump by thirty pixels. */
@media (min-width:1400px){
  :root{--wrap:1260px}
  body{font-size:17.5px}
  .card p,.step p,.faq-a p,.form-done p{font-size:16px}
  .zone-p{font-size:17px}
}

@media (min-width:1800px){
  :root{--wrap:1380px}
  body{font-size:18px}
  h1{font-size:clamp(33px,6.4vw,70px)}
  h2{font-size:clamp(26px,4.4vw,50px)}
  h3{font-size:clamp(19px,2.6vw,29px)}
  .hero-lede{font-size:clamp(17px,2.05vw,22px)}
  .card p,.step p,.faq-a p,.form-done p{font-size:16.5px}
  .zone-p{font-size:17.5px}
  .walk-body p{font-size:17px}
  /* The photograph should keep its share of a tall display. */
  .walk-stop,.walk-shot img{min-height:clamp(300px,46vh,520px)}
}

@media (min-width:2200px){
  :root{--wrap:1480px}
  body{font-size:18.5px}
  h1{font-size:clamp(33px,6.4vw,78px)}
  h2{font-size:clamp(26px,4.4vw,56px)}
}


/* ============================================================
   WHO BUILT THIS

   The founders were a collapsed disclosure. Promoted to a section
   on 4 August 2026, because a CFO signing a multi-year room asks
   who is behind it before asking what it costs, and that answer
   should not be behind a control nobody clicks.

   Two portraits, side by side on every width. They do not stack
   on a phone: seen together they read as two people who run a
   company, and stacked they read as two separate testimonials.
   ============================================================ */
.founders{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px,2.4vw,22px);
  align-content:start;
}
.founder{margin:0}
.founder img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius);
  display:block;
}
.founder figcaption{
  margin-top:11px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.founder figcaption b{
  font-family:var(--serif);
  font-size:clamp(16px,1.9vw,18.5px);
  font-weight:600;
  letter-spacing:-.01em;
}
.founder figcaption span{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--muted);
}
.founder figcaption .tlink{
  margin-top:5px;
  font-size:13px;
  min-height:0;
  align-self:flex-start;
}
@media (max-width:899px){
  .founders{margin-top:30px}
}


/* ============================================================
   THE THREE ZONES AS A SEQUENCE, NOT A MENU

   The section headline argues that the ORDER is the point:
   three zones, in this order, for a reason. The layout was
   contradicting it. Three equal cards side by side read as a
   feature list, where any one could be visited first, and the
   thesis of the section is that they cannot.

   So the order is drawn rather than asserted. A rule runs from
   each zone to the next, the ordinal is promoted to a marker
   sitting on that rule, and the last one closes rather than
   trailing off. Nothing is hidden and nothing is tabbed: three
   steps understood as an order have to be seen together, which
   is exactly the case where a stepper would be the wrong tool.
   ============================================================ */
/* A connecting rule was drawn here and removed. It depended on knowing
   the vertical position of the marker inside each card, which varies with
   the image and the headline wrap, so it landed in the wrong place. The
   markers below carry the sequence on their own without guessing at a
   coordinate that is not knowable from CSS. */
/* the ordinal, promoted from a caption to a step marker */
.trio-n{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.trio-n::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:var(--blue);
  flex:none;
}
.trio > div:last-child .trio-n::before{
  /* the end of a sequence should look like an end */
  background:none;
  border:2px solid var(--blue);
  width:9px;height:9px;
}


/* ============================================================
   THE HERO, REBUILT AS A SPLIT

   The old hero laid white type over a photograph, which forced a
   scrim at 90% opacity to keep the words legible. That is a fair
   trade when the photograph is a silhouette. It is a bad one when
   the photograph is a bright, daylit, empty room, because the
   scrim destroys the only thing worth showing.

   So the two stop competing. Words sit on paper, the room sits
   beside them at full brightness, and neither is compromised for
   the other. It is also the same grammar as the tour, image one
   side and copy the other, so the page gains a pattern instead of
   carrying a one-off.
   ============================================================ */
.hero-split{
  background:var(--paper);
  color:var(--ink);
  padding:clamp(30px,5vh,64px) 0 clamp(38px,6vh,72px);
  overflow:visible;
}
.hero-split .hero-grid{
  display:grid;
  gap:clamp(26px,4vw,48px);
  align-items:center;
}
@media (min-width:900px){
  .hero-split .hero-grid{grid-template-columns:1fr 1.06fr}
}
.hero-split .hero-inner{max-width:none}
.hero-split h1{color:var(--ink)}
.hero-split h1 em{color:var(--blue)}
.hero-split .hero-eyebrow{
  font-family:var(--mono);
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:16px;
}
.hero-split .hero-lede{color:var(--muted);max-width:46ch}
.hero-split .btn-2{color:var(--ink);border-color:var(--hair-2)}
.hero-split .btn-2:hover{border-color:var(--ink);background:rgba(15,28,54,.04)}

.hero-shot{margin:0}
.hero-shot img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:var(--radius);
  display:block;
}
.hero-shot figcaption{
  margin-top:13px;
  font-family:var(--mono);
  font-size:12.5px;line-height:1.6;
  color:var(--muted);
  max-width:52ch;
}
/* On a phone the words land first and the room proves them, rather
   than a photograph pushing the proposition below the fold. */
@media (max-width:899px){
  .hero-split .hero-grid{grid-template-columns:1fr}
  .hero-shot img{aspect-ratio:4/3}
  .hero-shot figcaption{font-size:12px}
}


/* The hero italic must follow the accent rule the brand book states:
   deep blue is the signal colour BECAUSE it survives on paper at
   7.35:1, and the light periwinkle sits at 2.23:1 and fails AA. That
   light value was correct while the hero was a dark photograph. It is
   wrong now the hero is paper, and a headline is the last place to
   lose contrast. Targeted at the class so it beats .em-blue. */
.hero-split h1 em,
.hero-split h1 .em-blue{color:var(--blue)}


/* ============================================================
   HERO, THIRD VERSION: a statement, then the room

   The split version was replaced because it was the default
   landing page: two columns, rounded image, paired buttons. The
   fix is not a restyle, it is removing the container. A room
   photographed edge to edge at the full width of a screen is a
   different experience from the same photograph inside a card,
   and only one of them feels like being shown something.
   ============================================================ */
.hero-open{
  background:var(--paper);
  color:var(--ink);
  padding:clamp(34px,6vh,84px) 0 0;
  overflow:visible;
}
.hero-open .hero-inner{max-width:none}
.hero-open h1{
  color:var(--ink);
  max-width:16.5ch;            /* narrowed 6 Aug: a longer H1 now runs under the floor plan at this width */
  margin-top:14px;
}
.hero-open h1 em,.hero-open h1 .em-blue{color:var(--blue)}
.hero-open .hero-eyebrow{
  font-family:var(--mono);
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);display:block;
}
.hero-open .hero-lede{
  color:var(--muted);
  max-width:52ch;
  margin-top:clamp(18px,2.4vw,26px);
}
.hero-open .btn{margin-top:clamp(24px,3vw,34px)}

/* the room, at the width of the screen */
.hero-plate{
  margin:clamp(34px,5vh,64px) 0 0;
  position:relative;
}
.hero-plate img{
  width:100%;
  height:auto;
  aspect-ratio:21/9;
  object-fit:cover;
  object-position:50% 54%;
  display:block;
  border-radius:0;             /* no card. it is the page, not an item on it */
}
.hero-plate figcaption{
  padding:14px 0 0;
  /* Was var(--mono). Monospace on a LABEL is a defensible convention;
     monospace on a two-sentence caption is the template tell, and it
     is the same one already removed from the kicker, the source
     labels, the zone numbers and the footer headings. Those sweeps
     looked for labels, so a sentence set in the label's typeface
     survived all four. A caption is prose. It gets the prose face. */
  font-family:var(--sans);
  font-size:13.5px;line-height:1.6;letter-spacing:-.004em;
  color:var(--muted);
}
/* the caption returns to the text column while the image does not */
.hero-plate figcaption .wrap{display:block;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

@media (max-width:899px){
  .hero-open{padding-top:clamp(24px,4vh,40px)}
  .hero-open h1{max-width:none}
  .hero-plate{margin-top:clamp(26px,4vh,40px)}
  .hero-plate img{aspect-ratio:5/4;object-position:50% 56%}
  .hero-plate figcaption{font-size:12px}
}


/* ------------------------------------------------------------
   Getting the room ABOVE the fold.

   Measured, not guessed: on a 1440x900 screen the photograph was
   starting at 820px, leaving an 80px sliver. A hero whose subject
   requires a scroll is not a hero.

   Two hundred pixels recovered, in the order that costs least:
   the headline runs wider so it sets in two lines instead of
   three, then the vertical padding comes down. Type size is not
   touched, because the scale is the thing carrying the confidence.
   ------------------------------------------------------------ */
@media (min-width:900px){
  .hero-open{padding-top:clamp(18px,2.6vh,34px)}
  .hero-open h1{max-width:32ch;margin-top:12px}
  .hero-open .hero-lede{margin-top:18px}
  .hero-open .btn{margin-top:24px}
  .hero-plate{margin-top:clamp(22px,3vh,34px)}
}


/* ------------------------------------------------------------
   SHORT SCREENS.

   A 1000x625 laptop, which is what this actually gets read on,
   had the room at 733px with a 625px viewport: entirely below the
   fold, so the hero was a paragraph and a button.

   Width told us nothing here. The constraint is HEIGHT, so the
   query is on height. Type scales against the shorter dimension
   and the vertical rhythm halves. The aim is not to fit the whole
   photograph in, which is impossible beside a headline on a
   625px screen, but to get a real band of it into view so the
   reader knows the room is there.
   ------------------------------------------------------------ */
@media (max-height:800px){
  .hero-open{padding-top:12px}
  .hero-open h1{font-size:clamp(27px,min(5vw,6.4vh),46px);margin-top:9px;max-width:34ch}
  .hero-open .hero-eyebrow{font-size:10.5px}
  .hero-open .hero-lede{margin-top:13px;font-size:15.5px;max-width:56ch}
  .hero-open .btn{margin-top:17px;min-height:46px;padding:11px 22px}
  .hero-plate{margin-top:16px}
  .hero-plate img{aspect-ratio:2.6/1}
  .hero-plate figcaption{padding-top:10px;font-size:11.5px}
}


/* .hero-inner carries padding-top:130px, which existed to push the
   type down the face of a full-bleed photograph. There is no
   photograph behind it now, so it was 130px of nothing sitting
   between the header and the first word, and on a 625px laptop that
   is a fifth of the screen spent pushing the room out of sight. */
.hero-open .hero-inner{padding-top:0}


/* ============================================================
   THE ONE MOMENT OF MOTION

   Asked for something moving, once, used deliberately.

   What it is NOT: a marquee, a ticker, text sliding past. The
   subject of this photograph is an empty, still room, and the
   proposition is that nothing in it demands anything of you.
   Sliding type across it would argue the opposite in the one
   place the page can least afford it.

   What it is: the room settles. It arrives fractionally large
   and eases down to rest, once, on an exponential curve so the
   deceleration is felt rather than seen. Four and a half percent
   over one and a half seconds is below the threshold most people
   consciously notice; what registers is that the room came to
   rest rather than simply being there.

   That is the product. A person walks in carrying the charge of
   the day and the first thing that happens is that they settle.
   The hero performs the thesis instead of decorating it.

   It runs once, never loops, never repeats on scroll, and does
   not run at all for anyone who has asked their system for less
   motion. Only transform and opacity, so it is composited and
   costs no layout.
   ============================================================ */
.hero-plate{overflow:hidden}

@media (prefers-reduced-motion:no-preference){
  .hero-plate img{
    animation:room-settles 1500ms cubic-bezier(.16,1,.3,1) both;
    will-change:transform;
  }
  @keyframes room-settles{
    from{transform:scale(1.045);opacity:.82}
    to{transform:scale(1);opacity:1}
  }
}

/* The caption opens on the fact the eyebrow used to carry, so the
   sentence a reader meets while looking at the room tells them what
   the room is. It was doing nothing above the headline except
   labelling the page before it had said anything. */
.hero-plate figcaption b{color:var(--ink);font-weight:600}


/* ============================================================
   VERY LARGE SCREENS

   Text is already governed: --wrap caps at 1480px and p{max-width:68ch}
   holds the measure, so prose never sprawls however wide the monitor.

   The one element with no ceiling was the full-bleed photograph. It is
   2400px wide natively, so on a 2560 or 3440 display it was being
   upscaled and going soft, and at 21:9 across 3440px it stood over
   1400px tall, taller than most of the screens it would appear on.

   Two ceilings, and nothing else needs one.
   ============================================================ */
@media (min-width:1900px){
  /* the plate keeps its proportion to the screen rather than swallowing it */
  .hero-plate img{max-height:62vh}
}
@media (min-width:2500px){
  /* stop before the upscale shows. beyond its native width the
     photograph is being invented rather than displayed. */
  .hero-plate img{max-width:2400px;margin-left:auto;margin-right:auto}
}


/* ============================================================
   THE BOARD QUESTIONS ON A PHONE

   The role tag sat INLINE at the head of the answer, so the first
   line of every answer was indented around a pill and the text
   wrapped back under it. On a 390px screen that left a ragged
   notch at the top of each paragraph and made a section of long
   answers read as cramped.

   The tag is a label for the whole answer, not the first word of
   it, so on a phone it becomes its own line and behaves like one.
   ============================================================ */
@media (max-width:640px){
  .faq-a .faq-tag{
    display:block;
    width:fit-content;
    margin:0 0 9px;
  }
  .faq-a p{margin-top:0}
  .faq summary{padding:17px 0;line-height:1.4}
  .faq details + details{border-top:1px solid var(--hair)}
  .faq-a{padding-bottom:18px}
}

/* ============================================================
   THE MOBILE HEADER

   Three competing controls in 390px: a two-line wordmark, an
   outlined Menu button and a filled CTA. Two bordered pills side
   by side is one border too many, and the outline was giving the
   menu the same visual weight as the only action on the page.

   The menu loses its box and becomes what it is, a control you
   press to see more. The CTA keeps the only filled shape in the
   header, so there is exactly one obvious thing to do.
   ============================================================ */
@media (max-width:899px){
  .menu > summary{
    border:0;
    background:none;
    padding:8px 10px;
    color:var(--muted);
    font-weight:500;
  }
  .menu > summary:hover{color:var(--ink);background:rgba(15,28,54,.05)}
  .nav-links{gap:2px}
  header.site .btn{padding:11px 18px;min-height:44px;font-size:15px}
  .brand b{font-size:17.5px}
  .brand span{font-size:10px;letter-spacing:.15em}
}


/* The route back, on every page a homepage button leads to. */
.back-home{padding:clamp(26px,4vw,44px) 0 clamp(30px,5vw,54px);border-top:1px solid var(--hair)}
.back-home .btn-2{min-height:48px}
@media print{.back-home{display:none!important}}


/* The role tag is a label for the whole answer, not the first word of
   it. Inline, it forced every answer to start indented around a pill
   and wrap back underneath, which left a ragged notch at the top of
   each paragraph. That reads as broken at EVERY width, not just on a
   phone, so the earlier 640px-only fix was scoped wrong. */
.faq-a .faq-tag{
  display:block;
  width:fit-content;
  margin:0 0 10px;
}
.faq-a .faq-tag + *{margin-top:0}


/* ============================================================
   THE LOGO WALL, UNSQUASHED

   The rule was height:26px, width:auto, max-width:100%. For a
   normal logo that is fine. For a WIDE one it is not: Tata Power
   is 8.97:1, so at 26px tall it wants 233px of width, the grid
   cell on a phone is 105px, and max-width clamps the width while
   the fixed height holds. The result is a logo squashed to 45% of
   its correct proportion, which is the one thing you must never do
   to somebody else's trademark.

   object-fit:contain makes the clamp letterbox instead of squash.
   Found by comparing natural aspect to rendered aspect at three
   widths, which is the only way to see it: it looks like a logo,
   just a wrong one.
   ============================================================ */
.logo-wall img{object-fit:contain}


/* ============================================================
   THE TYPE SYSTEM
   ============================================================

   Adopted 4 August 2026 from wordmark option 2, after a round of
   comparisons against the sans. The wordmark is not a special
   case sitting on top of the site: it is the first instance of
   the rule, and the rule now governs every heading.

   THREE THINGS, and the third is the one nobody does.

   1. OPTICAL SIZE. Newsreader carries an opsz axis from 6 to 72.
      Every heading here rendered at the default, which is a text
      design: sturdy serifs, low stroke contrast, engineered to
      survive inside a paragraph at 16px. At display sizes that
      reads as heavy and undifferentiated, which is most of what
      "generic" means in a typeface. Headings now request the
      display cut and get finer hairlines and sharper serifs.

   2. WEIGHT. 600 to 650. Enough to hold the page down without
      becoming a slab.

   3. TRACKING THAT MOVES WITH SIZE. Type set at 62px needs
      considerably tighter letterspacing than the same face at
      19px, because the gaps scale with the glyphs while the eye
      does not. One tracking value across a scale is the single
      most common reason a typographic system looks untuned. So
      the larger the heading, the tighter it is set: -0.042em at
      the top of the scale down to -0.018em at the bottom.

   This is the same discipline behind the headline typography
   the client admires on Apple's pages. It is not their typeface,
   which is a sans and would say engineered rather than
   considered. It is their method.
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-variation-settings:"opsz" 72;
  font-weight:650;
  line-height:1.1;
}
h1{letter-spacing:-.042em;line-height:1.02}
h2{letter-spacing:-.036em;line-height:1.06}
h3{font-variation-settings:"opsz" 48;font-weight:640;letter-spacing:-.026em}
h4{font-variation-settings:"opsz" 32;font-weight:620;letter-spacing:-.018em}

/* The italic clause inside a headline is set a touch lighter. At
   650 an italic serif thickens optically against its roman and
   starts to shout, which is the opposite of what the emphasis is
   for. */
h1 em,h2 em,h1 .em-blue,h2 .em-blue{font-weight:600}

/* Display figures follow the same rule: the bigger the number,
   the tighter it is set. */
.reading-fig,.hs-fig{font-variation-settings:"opsz" 72;letter-spacing:-.038em}

/* ============================================================
   THE WORDMARK
   Option C, in option 2. The rule runs the full width of the
   name and sets the mark's width; the parent name sits beneath
   it, right aligned to the same edge. The rule is structural,
   not decoration: it is what makes the lockup feel built rather
   than typed, and it is the only line of its kind on the site.
   ============================================================ */
.brand{display:block;padding:7px 0;min-height:44px}
.brand b{
  font-family:var(--serif);
  font-variation-settings:"opsz" 72;
  font-size:19.5px;font-weight:650;
  letter-spacing:-.042em;
  line-height:1;
  display:block;
}
.brand span{
  display:block;
  font-family:var(--serif);
  font-variation-settings:"opsz" 14;
  font-size:8.5px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);
  text-align:right;
  border-top:1px solid var(--hair-2);
  margin-top:5px;padding-top:4px;
  line-height:1;
}
.dark .brand span,footer.site .brand span,.hero .brand span{color:var(--muted-dark);border-top-color:var(--hair-dark-2)}
@media (max-width:899px){
  .brand b{font-size:18px}
  .brand span{font-size:8px;letter-spacing:.26em}
}


/* ------------------------------------------------------------
   THE SYSTEM REACHES THE VARIANTS TOO.

   Section openers were built as their own classes so no two
   sections start identically, and each one carried its own
   weight and tracking. That meant the base h1-h4 rules governed
   almost nothing on the actual page: the first h2 on the site
   was setting itself at 64px and weight 600, larger than the h1
   and lighter than the system asks for.

   A type system that only reaches the bare tags is not a system,
   it is a suggestion. Same principle applied throughout: display
   optical size, weight 650, and tracking that tightens as the
   size goes up.
   ------------------------------------------------------------ */
.opener-line,.opener-prose,.opener-quiet,.statement{
  font-variation-settings:"opsz" 72;
  font-weight:650;
}
.opener-line{letter-spacing:-.042em}
.opener-prose{letter-spacing:-.036em}
.opener-quiet{letter-spacing:-.03em}
.statement{letter-spacing:-.04em}
.opener-line em,.opener-prose em,.opener-quiet em,.statement em{font-weight:600}

/* the walk headings and the hero stat figures sit mid-scale */
.walk-body h3{font-variation-settings:"opsz" 48;letter-spacing:-.028em}
.hs-fig{font-variation-settings:"opsz" 72;font-weight:650;letter-spacing:-.034em}


/* The lockup must size to its own content. As a block-level flex item
   it was being measured at 103px for a wordmark that needs more, so
   the rule was short and the name clipped at the right edge. */
.brand{display:inline-block;width:fit-content;flex:none}


/* ============================================================
   THE HEADER, ON A PHONE

   Three things share 390px: a wordmark that is now two lines
   with a rule through it, a menu control, and the only call to
   action on the page. They were competing because all three were
   asking for the same kind of attention.

   The nest they needed is a hierarchy, not more space:

     the wordmark    identity, and it is allowed to be the
                     largest thing, because it now carries a
                     rule and reads as a mark rather than text
     the menu        a control. Controls do not need borders
                     when the thing beside them is a filled
                     button; the contrast does the work
     the trial       the only filled shape in the header, so
                     there is exactly one obvious action

   Everything is baseline-aligned to the wordmark's NAME rather
   than centred on the whole lockup, because the rule and the
   parent name hang below it and centring against them pushes the
   controls visually low.
   ============================================================ */
@media (max-width:899px){
  .nav{min-height:58px;gap:10px;align-items:flex-start;padding-top:9px;padding-bottom:9px}
  .brand{padding:0}

  /* the controls ride with the name, not with the whole lockup */
  .nav-links{align-items:center;gap:2px;padding-top:1px}

  .menu > summary{
    border:0;background:none;
    padding:9px 10px;min-height:42px;
    font-size:14.5px;font-weight:500;
    color:var(--muted);
    gap:7px;
  }
  .menu > summary:hover,.menu[open] > summary{background:rgba(15,28,54,.055);color:var(--ink)}

  header.site .btn{
    min-height:42px;padding:10px 17px;
    font-size:14.5px;font-weight:600;
    border-radius:10px;
  }
}

/* Below 360px the three items are genuinely tight, so the menu
   sheds its label and keeps only the affordance.

   This threshold was first set at 399px, which was wrong in the
   worst way: 390px is the standard iPhone width and therefore the
   most common phone on the site, so the rule aimed at edge cases
   landed on the main case and left everybody looking at a bare
   plus sign. Verified at 390 and 360.*/
@media (max-width:359px){
  .menu > summary{padding:9px 8px}
  .menu > summary .menu-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  header.site .btn{padding:10px 14px;font-size:14px}
}


/* ============================================================
   EVERY OFFICE ESSENTIAL WAS ONCE OPTIONAL

   A list of four, where the fourth is the argument. Set as rows
   rather than cards: cards would make them four equal features,
   and the point is that they are a sequence in time with the
   reader standing at the end of it.
   ============================================================ */
.was{margin-top:clamp(24px,3.4vw,38px);border-top:1px solid var(--hair)}
.was-row{
  display:grid;gap:4px 26px;
  padding:clamp(15px,2vw,20px) 0;
  border-bottom:1px solid var(--hair);
}
@media (min-width:700px){
  .was-row{grid-template-columns:minmax(180px,1fr) 2.2fr;align-items:baseline;gap:0 34px}
}
.was-t{
  font-family:var(--serif);font-variation-settings:"opsz" 48;
  font-size:clamp(18px,2.3vw,22px);font-weight:640;letter-spacing:-.026em;
  color:var(--muted);
}
.was-d{font-size:clamp(15px,1.7vw,16.5px);color:var(--muted);max-width:52ch}

/* The last row is the present tense, so it is the only one set in
   full ink. The three above it are history and read as history. */
.was-now .was-t,.was-now .was-d{color:var(--ink)}
.was-now .was-t{font-weight:650}
.was-now .was-d{font-weight:500}

.was-close{
  margin-top:clamp(22px,3vw,32px);
  max-width:60ch;color:var(--muted);
}


/* ============================================================
   THE HEADER MARK, FINAL

   Three stacked parts at 19.5px, a rule that stopped 95px in,
   and a 8.5px line nobody can read. That is a footnote structure,
   and a footnote is the opposite of what a masthead is for. At
   that size the parent name was not information, it was
   decoration wearing information's clothes.

   So the header carries two words and nothing else, set larger.
   Fewer parts is the whole fix: a mark stops looking timid when
   it stops explaining itself.

   THE PARENT NAME IS NOT DROPPED, IT IS SCOPED. It keeps the rule
   and the full lockup everywhere it can actually be read and
   where the reader's question is who these people are: the
   footer, the CFO brief, the business cards, the pamphlet, the
   press boilerplate, the document mastheads. Six years of
   practice is the answer to "will you still exist in two years",
   and that question is never being asked of a 19.5px header. It
   is asked halfway down a page, by somebody deciding.
   ============================================================ */
.brand{display:inline-block;width:fit-content;flex:none;padding:10px 0;min-height:44px}
.brand b{
  font-family:var(--serif);
  font-variation-settings:"opsz" 72;
  font-size:23px;font-weight:650;
  letter-spacing:-.044em;
  line-height:1;
  display:block;
}
@media (max-width:899px){
  .brand{padding:8px 0}
  .brand b{font-size:21px}
}
@media (max-width:359px){
  .brand b{font-size:19.5px}
}


/* ============================================================
   THE HEADER AS A FLOATING CARD

   It was a full-width bar with a hairline under it, which is the
   default and reads as chrome: a strip belonging to the browser
   rather than to the page. Inset, rounded and lifted, it becomes
   an object sitting ON the page, and the paper is allowed to run
   past it on all four sides.

   That is most of what the soft corner is doing. It is not the
   radius that changes the feeling, it is the fact that the page
   continues behind and around it.

   The border is now on all four sides and the bottom hairline is
   gone, because a bar has a bottom edge and a card has an
   outline. The shadow is almost nothing, 2px at 6% ink: enough
   to lift it off the paper, not enough to notice.
   ============================================================ */
header.site{
  top:10px;
  width:calc(100% - (var(--gut) * 2));
  max-width:var(--wrap);
  margin:10px auto 0;
  border:1px solid var(--hair);
  border-radius:15px;
  box-shadow:0 2px 10px rgba(20,26,36,.06);
}
/* The wrap inside would otherwise inset a second time, on top of
   the header's own margin, and push the mark toward the middle. */
header.site .wrap{padding-left:18px;padding-right:18px;max-width:none}

@media (max-width:899px){
  header.site{
    top:8px;
    margin-top:8px;
    width:calc(100% - 20px);
    border-radius:14px;
  }
  header.site .wrap{padding-left:14px;padding-right:14px}
}

/* The page behind must not run under a transparent card. The blur
   handles it on browsers that have one; where there is none the
   background is already opaque via the @supports rule above. */


/* ============================================================
   THE HEADER GETS OUT OF THE WAY

   A floating card with a border, a shadow and a filled button is
   a lot of presence for something that follows a reader down a
   page. It stopped feeling like a header and started feeling
   like it was watching.

   Two changes. It is quieter at rest, and it leaves when the
   reader is going somewhere.

   Hide on the way down, return on the way up. That is the right
   pairing: scrolling down means reading, and nothing should sit
   on top of the reading. Scrolling up is almost always looking
   for navigation, and the header should already be there when
   the eye arrives rather than after it.
   ============================================================ */
header.site{
  box-shadow:0 1px 6px rgba(20,26,36,.045);
  border-color:rgba(20,26,36,.08);
  transition:transform .34s var(--ease),box-shadow .3s var(--ease),opacity .28s var(--ease);
  will-change:transform;
}
/* Lifted only once the page has moved, so it sits flat on the paper
   at the top where it has nothing to lift away from. */
header.site.is-moved{box-shadow:0 3px 16px rgba(20,26,36,.09)}

header.site.is-away{
  transform:translateY(calc(-100% - 18px));
  opacity:0;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  header.site{transition:none}
  header.site.is-away{transform:none;opacity:1;pointer-events:auto}
}

/* ============================================================
   THE HERO, GIVEN ROOM

   The elements were stacked on the tight rhythm the rest of the
   page uses for body copy, which is correct inside a paragraph
   and wrong for the first screen. A hero is four objects, not
   four lines, and each one needs to be understood before the eye
   moves to the next.

   The gaps now scale with the viewport rather than sitting at a
   fixed 12 to 24px, so a large screen gets the air it can afford
   and a 625px laptop still fits the room in.
   ============================================================ */
.hero-open h1{margin-top:0}
.hero-open .hero-lede{margin-top:clamp(20px,3.2vh,34px)}
.hero-open .btn{margin-top:clamp(26px,4vh,42px)}
.hero-plate{margin-top:clamp(30px,5vh,58px)}

@media (min-width:900px){
  .hero-open{padding-top:clamp(30px,5vh,58px)}
  .hero-open .hero-lede{margin-top:clamp(22px,3vh,32px)}
  .hero-open .btn{margin-top:clamp(28px,3.6vh,40px)}
}
@media (max-height:800px){
  .hero-open{padding-top:clamp(16px,2.4vh,26px)}
  .hero-open .hero-lede{margin-top:clamp(15px,2.4vh,22px)}
  .hero-open .btn{margin-top:clamp(18px,2.8vh,26px)}
  .hero-plate{margin-top:clamp(20px,3vh,30px)}
}


/* ============================================================
   THE MASTHEAD, NOT THE PILL

   The floating rounded card was replaced because it is the
   current default. Apple ship it, Linear ship it, every SaaS
   template ships it, and a brand that argues it is not a
   campaign should not open with the campaign's house style.
   It was borrowed rather than ours.

   This is ours, and it costs less: the identity already owns a
   device, which is the hairline in the lockup. Use it once more,
   at the width of the page, and the header becomes a masthead.
   A masthead is a name above a rule. Newspapers settled this in
   about 1800 and nobody has improved on it.

   No box. No shadow. No fill at rest, so the paper simply
   continues and the header is part of the page rather than an
   object floating over it. The rule stops at the content column
   rather than running to the window edges, which is the whole
   difference between a masthead and browser chrome.

   The fill arrives only once the page has moved, because then it
   has type passing underneath it and legibility outranks
   restraint.
   ============================================================ */
header.site{
  background:transparent;
  backdrop-filter:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  width:100%;
  max-width:none;
  margin:0;
  top:0;
  transition:background .28s var(--ease),transform .34s var(--ease),backdrop-filter .28s var(--ease);
}
header.site .wrap{
  padding-left:var(--gut);
  padding-right:var(--gut);
  max-width:var(--wrap);
  position:relative;
}
/* The rule. Content width, not window width. */
header.site .wrap::after{
  content:"";
  position:absolute;
  left:var(--gut);right:var(--gut);bottom:0;
  height:1px;
  background:var(--hair-2);
}

/* Once the page moves, type runs under the header and it earns a
   surface. Still no border and no shadow: the rule is the edge. */
header.site.is-moved{
  background:rgba(247,246,243,.90);
  backdrop-filter:saturate(1.3) blur(9px);
}
@supports not (backdrop-filter:blur(2px)){
  header.site.is-moved{background:var(--paper)}
}
header.site.is-away{transform:translateY(-100%);opacity:1}

@media (max-width:899px){
  header.site{top:0;margin:0;width:100%;border-radius:0}
  header.site .wrap{padding-left:var(--gut);padding-right:var(--gut)}
}

/* The hero opened directly under a floating card and now opens
   under a rule, so it needs its own top air back. */
.hero-open{padding-top:clamp(26px,4.4vh,52px)}
@media (max-height:800px){.hero-open{padding-top:clamp(18px,2.8vh,30px)}}


/* ============================================================
   THE INSCRIPTION

   The tagline gets one placement on the site and the whole width
   of the page for it. Everything here is in service of one idea:
   a line carved into a wall is not read, it is encountered.

   That means space, and it means nothing else in the frame. The
   generosity IS the design. A quiet band of paper with six words
   in it reads as more certain than any dark box or filled shape
   could, because confidence is the willingness to stop talking.

   The two hairlines are the same device as the logo and the
   masthead, used a third time. They are short and centred, so
   they read as a frame rather than as dividers between sections.
   ============================================================ */
#tagline{
  padding:clamp(64px, min(11vw, 15vh), 150px) 0;
  border-top:1px solid var(--hair);
}
.inscription{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(26px, 4.4vh, 46px);
  text-align:center;
}
.insc-rule{
  display:block;
  width:clamp(46px, 7vw, 78px);
  height:1px;
  background:var(--hair-2);
}
.insc-line{
  font-family:var(--serif);
  font-variation-settings:"opsz" 72;
  font-size:clamp(34px, 6.6vw, 76px);
  font-weight:650;
  letter-spacing:-.045em;
  line-height:1.02;
  margin:0;
  max-width:16ch;
  color:var(--ink);
}
.insc-line em{
  font-style:italic;
  font-weight:600;
  color:var(--blue);
}

/* On a short screen the band would eat the whole viewport, and an
   inscription that fills a screen stops being restrained and
   starts being a splash page. */
@media (max-height:760px){
  #tagline{padding:clamp(46px, 8vh, 76px) 0}
  .inscription{gap:clamp(20px, 3.4vh, 30px)}
}
@media (max-width:520px){
  .insc-line{max-width:13ch}
}


/* ============================================================
   THE MARK, SIZED

   Recommended and then not done, which is worse than not
   recommending it. 23px against a 63px header is a mark parked
   rather than placed.

   Size only. NOT more left padding, which was the other half of
   what I suggested and is wrong: the wordmark and the headline
   below it share a left edge, and that shared edge is doing real
   work. Pushing the mark inward would break the one alignment on
   the page that a reader can actually feel.
   ============================================================ */
.brand b{font-size:26px;letter-spacing:-.046em}
@media (max-width:899px){.brand b{font-size:23px}}
@media (max-width:359px){.brand b{font-size:21px}}


/* ============================================================
   THE CURVE

   47 and 184 are one fact with a shape. Stacked as figures the
   reader has to hold two numbers and do the subtraction; drawn
   as a line they get it in a glance, and the glance is the
   argument: this is the only thing in a wellbeing budget whose
   usage goes UP over three months.

   Deliberately spare. No gridlines, no y axis, no ticks. A chart
   with furniture invites the reader to audit the furniture. This
   one has a baseline, a line, two measured points and their two
   labels, and nothing else to look at.
   ============================================================ */
.curve{margin:clamp(18px,2.6vw,26px) 0 0}
.curve svg{width:100%;height:auto;display:block;overflow:visible}
.curve .c-fig{
  font-family:var(--serif);font-size:30px;font-weight:650;
  letter-spacing:-.03em;fill:var(--ink);
}
.curve .c-lab{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  fill:var(--muted);text-transform:uppercase;
}
.curve .c-dim{opacity:.62}
.curve figcaption{
  margin-top:14px;font-family:var(--mono);font-size:11.5px;line-height:1.65;
  color:var(--muted);max-width:64ch;
}
.curve figcaption b{
  display:block;color:var(--ink);text-transform:uppercase;
  letter-spacing:.13em;font-size:10px;margin-bottom:4px;font-weight:600;
}

/* The line draws itself once, when it is first reached. A chart
   that animates on every scroll past is a toy; one that draws
   once is the act of measuring. */
@media (prefers-reduced-motion:no-preference){
  .curve-path{
    stroke-dasharray:640;stroke-dashoffset:640;
    animation:curve-draw 2.6s cubic-bezier(.22,1,.28,1) .35s forwards;
  }
  @keyframes curve-draw{to{stroke-dashoffset:0}}
}
@media (max-width:600px){
  .curve .c-fig{font-size:26px}
  .curve .c-lab{font-size:10px;letter-spacing:.05em}
}


/* The commitments, collapsed. A number replaces a repeated label:
   it gives each row a left edge to hang from, tells the reader
   there are exactly four, and costs no vertical space at all. */
.commit{margin-top:clamp(22px,3vw,32px);border-top:1px solid var(--hair-dark)}
.commit-row{
  display:grid;grid-template-columns:auto 1fr;
  gap:0 clamp(15px,2.2vw,26px);
  padding:clamp(15px,2vw,20px) 0;
  border-bottom:1px solid var(--hair-dark);
  align-items:baseline;
}
.commit-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--muted-dark);font-weight:600;
}
.commit-c{display:block}
.commit-what{
  display:block;
  font-family:var(--serif);font-variation-settings:"opsz" 48;
  font-size:clamp(16.5px,2vw,19px);font-weight:600;letter-spacing:-.02em;
  line-height:1.36;color:var(--on-dark);max-width:56ch;
}
.commit-why{
  display:block;margin-top:6px;
  font-size:14px;line-height:1.55;color:var(--muted-dark);max-width:56ch;
}


/* ============================================================
   THE CURVE AND THE FIGURE, SIDE BY SIDE

   They were stacked, which made the reader scroll past the shape
   to reach the number that qualifies it. They are one exhibit:
   the line is what happened to usage, the 25% is what happened
   to the people. Beside each other they are read together, which
   is how they are meant to be understood.

   The curve takes the larger share because it carries two
   figures and a shape; the reading takes the smaller because it
   carries one number and its window.
   ============================================================ */
.evi-pair{display:grid;gap:clamp(22px,3vw,34px);align-items:start;margin-top:clamp(16px,2.4vw,24px)}
@media (min-width:860px){
  .evi-pair{grid-template-columns:1.55fr 1fr;gap:clamp(28px,4vw,52px)}
  .evi-pair .curve{margin-top:0}
  .evi-pair .readings{margin-top:0!important;display:block}
  /* a hairline between them, so they read as one exhibit in two
     parts rather than two things that happen to be adjacent */
  .evi-pair > .readings{border-left:1px solid var(--hair);padding-left:clamp(24px,3vw,40px)}
}

/* ============================================================
   SOURCE NOTES STOP BEING MONOSPACED

   Every "how we know" note set its whole sentence in the mono
   face. Mono is correct for a LABEL, where the letterspacing and
   the even rhythm say this is metadata. It is wrong for a
   sentence: monospace is a typewriter, and a paragraph of it
   reads as machine output rather than as somebody explaining
   where a number came from. On a phone, at 12px, it was the most
   robotic text on the page.

   The label keeps the mono, because that part IS metadata. The
   explanation moves to the reading face at a size that admits it
   is secondary.
   ============================================================ */
.reading-src{
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.55;
  letter-spacing:0;
}
.reading-src b{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-ink);
  font-weight:600;
  margin-bottom:5px;
}
.curve figcaption{
  font-family:var(--sans);
  font-size:13.5px;
  letter-spacing:0;
}


/* ============================================================
   THE KICKER STOPS BEING A TEMPLATE

   Mono, uppercase, 0.15em letterspacing, grey, sitting above a
   serif headline. That combination is the single most templated
   device on the web right now. It was removed from the hero for
   exactly that reason and then left standing on every other
   section, which is worse: it looked deliberate in one place and
   defaulted everywhere else.

   The information is worth keeping. "Put in writing before any
   contract" tells a reader what kind of claim is coming and it
   earns its line. What has to change is the costume.

   So it becomes what a kicker is in print: a standfirst. Serif,
   italic, sentence case, no tracking, sitting close enough to
   the headline to read as part of the same thought rather than a
   label stuck above it. Same words, same job, and it stops
   announcing which template built the page.
   ============================================================ */
.kicker{
  display:block;
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-size:clamp(15px,1.8vw,17px);
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
  margin-bottom:clamp(8px,1.2vw,12px);
  max-width:46ch;
}
.dark .kicker,.hero .kicker,footer.site .kicker{color:var(--muted-dark)}


/* ============================================================
   ONE LABEL DEVICE, NOT THREE

   The kicker was converted from mono caps to a standfirst, and
   every source label was left exactly as it was: mono, uppercase,
   0.14em tracking, gold. So the page swapped one instance of the
   template tell and kept sixteen others, which is the worst of
   both, because now it also looks inconsistent with itself.

   Source labels are set the same way as the kicker: serif,
   italic, sentence case, no tracking. The page now has ONE way of
   marking a subordinate line, used everywhere, rather than a mono
   convention for footnotes and a serif convention for standfirsts
   and no reason for the difference.

   The gold goes with it. Gold was doing a job here that colour
   should not do: it was shouting for attention on the least
   important text on the page.
   ============================================================ */
.reading-src b,
.curve figcaption b{
  display:block;
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  margin-bottom:3px;
}
.dark .reading-src b,.hero .reading-src b{color:var(--on-dark)}

/* The pair reads as two exhibits under one heading, so the divider
   has to say "different measure" rather than "same thing, continued". */
@media (min-width:860px){
  .evi-pair > .readings{border-left:1px solid var(--hair-2)}
}


/* ============================================================
   THE EXHIBITS BREAK OUT OF THE PROSE MEASURE

   .disclose is capped at 730px inside a 1260px column, which is
   correct and deliberate: prose has a readable measure and 68ch
   is roughly where it sits. A chart does not. Holding a curve to
   the width of a paragraph left 530px of the column empty beside
   the single most persuasive thing on the page.

   So text keeps its measure and the visual exhibits take the
   whole column. The curve gains room to actually be a curve, and
   the figure beside it stops being a narrow strip.
   ============================================================ */
@media (min-width:1000px){
  .evi-pair,
  .disclose-b > .shot-grid{
    width:min(var(--wrap), calc(100vw - (var(--gut) * 2)));
    max-width:none;
  }
  .evi-pair{grid-template-columns:1.7fr 1fr;gap:clamp(36px,4.5vw,64px)}
  /* a wider frame wants a taller curve, or the line flattens into
     a shrug and the whole point of the shape is lost */
  .curve svg{min-height:300px}
}


/* ============================================================
   THE BOOK

   Two rows of handwriting, drifting in opposite directions. The
   argument here is volume, not any single note: one note is a
   testimonial, a wall of different handwriting is a different
   claim entirely, and it cannot be made with three cards.

   Full bleed, because the rows have to run off both edges or the
   loop is visible and the wall becomes a carousel.
   ============================================================ */
#voices{padding:var(--sec) 0;overflow:hidden}
.voices{margin-top:clamp(26px,3.6vw,42px);position:relative}
/* the paper fades in at both edges so notes arrive and leave
   rather than being cut off by the window */
.voices::before,.voices::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,9vw,150px);z-index:2;pointer-events:none;
}
.voices::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(247,246,243,0))}
.voices::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(247,246,243,0))}

.vrow{overflow:hidden;padding:7px 0}
.vtrack{display:flex;align-items:stretch;gap:clamp(12px,1.6vw,20px);width:max-content}

.vc{margin:0;flex:none;width:clamp(200px,23vw,290px)}
.vc img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;
  border-radius:10px;display:block;background:var(--paper-2);
}
.vq{
  margin:0;flex:none;width:clamp(240px,27vw,340px);
  display:flex;align-items:center;
  padding:clamp(16px,2vw,24px);
  border:1px solid var(--hair);border-radius:10px;background:var(--paper-2);
}
.vq p{
  margin:0;font-family:var(--serif);font-variation-settings:"opsz" 30;
  font-size:clamp(15.5px,1.8vw,18px);font-weight:500;line-height:1.4;
  letter-spacing:-.015em;color:var(--ink);
}
.vnote{margin-top:clamp(22px,3vw,32px);color:var(--muted);font-size:14.5px;max-width:64ch}

@media (prefers-reduced-motion:no-preference){
  /* 78s was brisk enough that a face left the frame before you had
     finished deciding whether you recognised the company. 118s moves
     a card about its own width every four seconds, which is readable
     at a glance without becoming wallpaper you stop noticing. */
  .vtrack{animation:vdrift 118s linear infinite;will-change:transform}
  .vrev .vtrack{animation-direction:reverse}
  @keyframes vdrift{to{transform:translateX(-50%)}}
  /* somebody who stops to read one has to be allowed to finish it */
  /* PAUSE THE ROW BEING READ, NOT BOTH OF THEM.
     Scoping the pause to the whole section froze the other row too,
     which is a stronger reaction than the gesture asked for: hovering
     one thing should not stop everything. Scoped to the row, the row
     under the cursor holds exactly where it is, and the other keeps
     its drift, so the section stays alive while you read.

     Note this pauses, it does not stop. animation-play-state keeps
     the current transform; setting animation:none would snap the
     track back to its start, which is the jump this must never do. */
  .vrow:hover .vtrack,
  .vrow:focus-within .vtrack{animation-play-state:paused}
}
/* No motion at all if it was not asked for: the wall stands still
   and wraps, which makes the same point without moving. */
@media (prefers-reduced-motion:reduce){
  .vtrack{flex-wrap:wrap;width:auto;justify-content:center}
  .voices::before,.voices::after{display:none}
}


/* The curve was drawing in 1.6s, which is fast enough to be missed.
   2.6s on a gentler exponential, with a third of a second of stillness
   before it starts. The pause matters more than the duration: motion
   that begins the instant a section appears reads as a page loading,
   motion that begins a beat later reads as something happening. */

/* ============================================================
   THE FORM: NOTHING UNTIL SOMETHING IS CHOSEN

   Ten fields sat open under three choices, so a reader met a wall
   of empty boxes before deciding whether they wanted any of them.
   On a phone that is most of a screen spent on work nobody has
   agreed to do yet, and on a page whose whole argument is that
   nothing is asked of anybody it is the worst possible first
   impression of the one place we DO ask.

   The fields now arrive after a choice is made. Same fields, same
   names, same endpoint: only the moment changes.

   Hidden with a grid-template-rows collapse rather than display,
   so the reveal can be animated and the fields stay in the
   document for anything reading it as a form. With script off
   the section is open from the start, because a form that needs
   javascript to show its own inputs is not a form.
   ============================================================ */
.form-fields{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .5s var(--ease),opacity .35s var(--ease);
}
.form-fields > .ff-inner{overflow:hidden;min-height:0}
.js .form-fields[data-closed]{grid-template-rows:0fr;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.form-fields{transition:none}}

/* Desktop: the argument on the left, the form on the right. The
   section was a single centred column with the whole right half of
   the page empty beside it. */
@media (min-width:1000px){
  #book .wrap{display:grid;grid-template-columns:1fr 1.15fr;
    /* Row gap and column gap are not the same measurement. One
       separates two columns, the other separates a heading from
       its own sentence. Writing them as one number put 72px
       between the headline and the lede that belongs to it. */
    column-gap:clamp(40px,5vw,80px);row-gap:0;align-items:start}
  #book .form-card{margin-top:0}
  #book > .wrap > h2,#book > .wrap > .lede,#book > .wrap > .form-note{grid-column:1}
  #book .form-card,#book .form-done{grid-column:2;grid-row:1 / span 4}
}


/* ============================================================
   THE ZONE LABELS, AND THE DOT THAT COLLIDED

   ZONE 01 . THE ENTRY was mono, uppercase, letterspaced: the
   same template tell already removed from the kicker and from
   every source label, still standing here. Third time it has
   been found in a different element, which says the fix should
   have been made once at the level of the idea rather than three
   times at the level of the selector.

   The step marker I added to signal sequence was also colliding
   with the text at some widths. It is gone. The numbers already
   say 01, 02, 03: a dot beside a number that reads "01" is
   telling the reader something they have just been told.
   ============================================================ */
.trio-n{
  display:block;
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-size:14.5px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
}
.trio-n::before{content:none}


/* .trio .trio-n (0,2,0) was still winning over the bare .trio-n
   rewrite above it. Matched at the same specificity so the
   de-templating actually applies. Third element, same tell, and
   this is the one that needed the selector to be checked rather
   than assumed. */
.trio .trio-n{
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-size:14.5px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
}
.trio .trio-n::before{content:none}


/* The form legend was the last one holding the mono-caps costume.
   Found by asking the browser for every subordinate label on the
   page and filtering for the tell, rather than by grepping the
   stylesheet, which is how the first three were missed. */
.legend{
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-size:15px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
}


/* ============================================================
   WHO BUILT THIS, GIVEN SOME SOUL

   It was two paragraphs on the left and two portraits parked on
   the right: a text block with faces beside it. The section is
   about PEOPLE and about CONTINUITY, and neither was doing any
   work. A CFO reading it wants to know who these two are and
   whether they will still be here, and the layout answered
   neither question with anything but a photograph.

   Three changes.

   The strongest sentence, "no subcontractor between us and your
   floor", was buried at the end of a paragraph. It is the actual
   answer to the question being asked, so it gets a line.

   The portraits come up to sit beside the prose rather than
   after it, and they are named beneath a hairline. That hairline
   is the same device as the wordmark, which turns a caption into
   something closer to a signature. It is the one place on the
   site where the mark's own gesture is applied to a person.

   And the faces get bigger. Two people who have run this for six
   years should not be thumbnails beside their own argument.
   ============================================================ */
.who-line{
  font-family:var(--serif);
  font-variation-settings:"opsz" 72;
  font-size:clamp(22px,3.4vw,36px);
  font-weight:650;
  letter-spacing:-.034em;
  line-height:1.18;
  max-width:24ch;
  margin:clamp(26px,3.6vw,44px) 0 0;
  color:var(--ink);
}
.who-line em{font-style:italic;font-weight:600;color:var(--blue)}

.who-people{
  display:grid;
  gap:clamp(20px,2.6vw,30px);
  margin-top:clamp(30px,4vw,50px);
  align-items:start;
}
@media (min-width:820px){
  .who-people{grid-template-columns:1fr 1fr 1.35fr;gap:clamp(24px,3vw,40px)}
}
.who-prose > p{margin:0 0 12px;max-width:46ch}
.who-prose .btn-row{margin-top:20px}

/* the signature: name over a hairline, the wordmark's own gesture */
.founder figcaption{
  margin-top:12px;
  border-top:1px solid var(--hair-2);
  padding-top:9px;
  display:flex;flex-direction:column;gap:2px;
}
.founder figcaption b{
  font-family:var(--serif);font-variation-settings:"opsz" 48;
  font-size:clamp(17px,2vw,19.5px);font-weight:640;letter-spacing:-.022em;
}
.founder figcaption span{
  font-family:var(--serif);font-variation-settings:"opsz" 20;
  font-style:italic;font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--muted);
}
.founder figcaption .tlink{margin-top:6px;font-size:13.5px;min-height:0;align-self:flex-start}
.founder img{aspect-ratio:4/5;object-position:50% 20%}


/* The booking section's left column held a heading, a lede and then a
   column of empty paper beside a long form. Fixing dead space on one
   side by creating it on the other is not a fix. */
.book-alt{margin-top:clamp(24px,3.2vw,38px);max-width:44ch}
.book-alt p{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--muted)}
.book-alt p b{color:var(--ink);font-weight:600}
.book-alt-2{padding-top:12px;border-top:1px solid var(--hair)}
@media (min-width:1000px){#book .book-alt{grid-column:1}}


/* ------------------------------------------------------------
   THE RULE FOR A STANDFIRST, since restyling one did not fix it.

   Changing the typography of "The company behind the room" from
   mono caps to serif italic changed how it looked and not what it
   was doing. It was still a label announcing the topic of the
   section underneath it, which is the actual tell, and it was
   redundant twice over: the headline names Zariyaa and the very
   next line gives the full legal name and the city.

   A standfirst earns its line only if it carries information the
   headline does not have.

     KEPT   "After their first ten minutes"   adds WHEN
     KEPT   "Put in writing before any contract"  adds that it is
            contractual and precedes signing
     CUT    "What is actually installed"     the lede below already
            says "a real, built room inside the office you have"
     CUT    "The company behind the room"    the headline names the
            company and the lede gives its legal name

   If a line only says what the next line is about, it is a label,
   and a label above a headline is the pattern regardless of the
   typeface it is set in.
   ------------------------------------------------------------ */

/* ============================================================
   FOUR CORRECTIONS
   ============================================================ */

/* 1. THE ZONE STILLS WERE CROPPED PORTRAIT FROM LANDSCAPE SOURCE.
   aspect-ratio:4/5 on a 16:9 still discards ~65% of the frame width
   and keeps whatever happens to sit dead centre. That is why Blossom
   was a blank shirt back and Bliss was carpet. The subject was never
   in the middle of the frame, because the frame was composed wide.
   3/2 is close to the source ratio, so the crop is a trim, not a
   guess, and the picture is the one the camera actually took. */
.trio img{aspect-ratio:3/2}

/* 2. THE INTENT CHOOSER WAS THREE IDENTICAL BORDERED RECTANGLES,
   which is the stock card grid. A choice between three things does
   not need three containers, it needs one list and a clear mark on
   the chosen row. Hairlines between, no boxes, and the selection is
   carried by a blue rule in the gutter rather than a filled panel. */
.choice{gap:0;border-top:1px solid var(--hair)}
.choice label{
  border:0;border-bottom:1px solid var(--hair);border-radius:0;
  background:none;padding:17px 16px 17px 2px;position:relative;
  transition:padding-left .38s cubic-bezier(.16,1,.3,1);
}
.choice label:hover{border-color:var(--hair);background:none}
.choice label:has(input:checked){background:none;border-color:var(--hair)}
.choice label::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;
  background:var(--blue);border-radius:2px;
  transform:scaleY(0);transform-origin:50% 50%;
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.choice label:has(input:checked){padding-left:16px}
.choice label:has(input:checked)::before{transform:scaleY(1)}

/* 3. THE FOOTER LABELS WERE THE LAST MONO-CAPS SURVIVORS.
   Same device already removed from the kicker, the source labels,
   the zone numbers and the form legend. The footer was never swept. */
.foot-col h5{
  font-family:var(--serif);font-variation-settings:"opsz" 20;
  font-style:italic;font-size:16px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--muted-dark);
  margin-bottom:6px;
}
/* The mark gets the full lockup here, which is the one place it
   belongs: name, hairline, parent. Not a name with a shouted
   surname underneath it. */
.foot-mark b{font-variation-settings:"opsz" 72;font-size:27px;
  font-weight:650;letter-spacing:-.046em}
.foot-mark span{
  font-family:var(--serif);font-variation-settings:"opsz" 20;
  font-style:italic;font-size:14px;letter-spacing:0;
  text-transform:none;color:var(--muted-dark);
  display:block;margin-top:7px;padding-top:7px;
  border-top:1px solid var(--hair-dark-2);max-width:9.5em;
}
/* Four columns became one very long stack on a phone. Two columns
   of short link lists read in a glance; one column of twelve is a
   scroll. The brand block keeps the full width above them. */
/* auto-fit was generating five tracks for four children at 1440,
   so the footer ended on a column of nothing. The proportions are a
   decision, not something to be inferred from a minimum width. */
@media (min-width:720px){
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
}
@media (max-width:719px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px 22px}
  .foot-grid > .foot-mark{grid-column:1 / -1}
  .foot-col a{padding:7px 0;min-height:38px}
}

/* 4. THE BOOKING COLUMN HAD A VOID IN THE MIDDLE OF IT.
   The alternative-route note sits in row two of the grid, and the
   form card spans both rows, so row one inherited the card's height
   and the note was pushed to the bottom of a column it should have
   been sitting directly under. Pinning it to the top of its row
   closes roughly 180px of nothing. */
@media (min-width:1000px){
  /* The card spans four auto rows, so any height it has over the
     left column is shared out BETWEEN those rows, which opens a gap
     under the lede rather than under the last thing in the column.
     Naming the rows explicitly sends all of the slack to row four,
     where it is margin instead of a hole. */
  #book .wrap{grid-template-rows:auto auto auto 1fr}
  #book .book-alt{align-self:start;margin-top:clamp(20px,2.4vw,30px)}
}

/* The tagline, in the one place the tagline document allows it on
   this page: the footer, set in the serif, sentence case, on one
   line, no full stop added or removed. It is the last thing read. */
.foot-line{
  font-family:var(--serif);font-variation-settings:"opsz" 72;
  font-size:clamp(21px,2.7vw,28px);font-weight:650;letter-spacing:-.036em;
  line-height:1.1;margin:0 0 clamp(26px,3.4vw,38px);color:var(--on-dark);
  white-space:nowrap;
}
.foot-line em{font-style:italic;font-weight:600;color:var(--blue-lt)}

/* ============================================================
   THE ZONES ARE A SEQUENCE, NOT A GRID
   ============================================================
   The headline says "in this order, for a reason". The layout put
   three equal columns at the same height side by side, which is the
   one arrangement that asserts its cells are peers and order does
   not matter. The picture was contradicting the sentence above it.

   A descent fixes it without adding a single decorative element:
   each zone sits lower than the one before, so the eye reads left
   to right AND downward, which is the shape of the thing itself.
   The charge comes off, then the naming, then the ground. The step
   is the section's own vertical unit, so it scales with everything
   else rather than being a number I liked.

   Mobile keeps the plain stack. A stagger needs two axes to mean
   anything, and a phone only has one. */
@media (min-width:860px){
  /* the stagger lived here; the band replaced it */

  /* The rule went above the LABEL first, which drew a line between
     the zone's name and the words describing it. Those two are one
     unit, and a rule's only job is to say the things either side of
     it are not. Moved above the heading, where it caps the whole
     text block and makes each staggered step legible as a step. */
  .trio h3{
    padding-top:15px;border-top:1px solid var(--hair);
  }
  .trio .trio-n{margin-top:5px;border-top:0;padding-top:0}
}

/* A perpetually moving strip of faces is the exact thing this setting
   exists to stop, and for some readers it is a vestibular trigger
   rather than a taste. Stopped, the row is still readable and can be
   scrolled by hand, so nothing is lost except the drift. */
@media (prefers-reduced-motion:reduce){
  .vtrack{animation:none;transform:none}
  .vrow{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ============================================================
   THE ZONES: ONE ROOM, NOT THREE CARDS
   ============================================================
   Everything before this was detail work on the wrong object. The
   unit was the problem. Three photographs of a single continuous
   space, each rounded on four corners and floated on its own with
   30px of background between, tells the eye these are three separate
   products that happen to be adjacent. A card grid always says its
   cells are interchangeable peers. This section argues the exact
   opposite: one room, three zones, and the order is the whole point.

   So the images become one band. They butt together with a 3px seam
   of the page showing through, which reads as a threshold between
   zones rather than a gap between products, and only the outer two
   corners are rounded so the band is a single object. The text sits
   under its own image in a second row, held to a measure by its own
   padding rather than by a column gap, because a gap between the
   pictures would put the seam back.

   The stagger goes. It was solving the same problem this solves
   better, and two answers to one question is one too many. */
@media (min-width:860px){
  .trio{
    display:grid;grid-template-columns:repeat(3,1fr);
    /* Four rows, because each zone has four parts. Spanning only two
       left the heading and the prose in implicit rows inside each
       item, where they were sized independently and stopped lining
       up across the three columns. Every part now shares a row with
       its counterparts, so the picture edges, the ordinals, the
       names and the first lines of prose all sit on four straight
       lines across the section. */
    grid-template-rows:repeat(4,auto);gap:0 3px;align-items:start;
  }
  .trio > *{
    display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:0;
  }
  .trio img{width:100%;border-radius:0;margin:0}
  .trio > *:first-child img{border-radius:var(--radius) 0 0 var(--radius)}
  .trio > *:last-child  img{border-radius:0 var(--radius) var(--radius) 0}

  /* No column gap means the prose would otherwise run edge to edge
     and touch the next zone's first word. The measure is made here
     instead, which keeps the pictures welded. */
  .trio > * > :not(img){padding-right:clamp(20px,2.6vw,40px)}
  .trio > * > .trio-n{padding-top:20px}

  /* The rule ran under each picture individually, which drew three
     more lids on three more boxes. One rule under the whole band
     reads as the floor the room sits on. */
  .trio h3{border-top:0;padding-top:0;margin-top:4px}
}

/* The ordinal leads now, because the headline promised an order and
   the number is the only element that carries one. It is set as a
   figure, not a caption: this is the step you are on. */
.trio .trio-n{
  display:block;font-family:var(--serif);font-variation-settings:"opsz" 28;
  font-style:italic;font-size:17px;letter-spacing:0;text-transform:none;
  color:var(--blue);margin-top:16px;
}
.trio h3{margin-top:2px}

/* ============================================================
   DARK MODE
   ============================================================
   The palette was already dual. Every colour here has existed
   since the first build in two measured forms, one for paper and
   one for the dark bands, because the brand book requires a
   contrast ratio to be stated rather than guessed. Dark mode is
   therefore not new colour work. It is choosing the other set.

   The one genuine problem is rhythm. This page uses dark sections
   as PUNCTUATION: the hero, the evidence band and the footer are
   dark precisely because everything around them is not. Turn the
   page dark and that structure flattens into one long expanse.

   It cannot be fixed by making those sections darker, because
   nothing reads below near-black. So they invert their role and
   become RAISED surfaces, a step lighter than the page with a
   hairline to catch the edge. The rhythm survives; only its
   direction changes. That is the same trick a printed page uses
   when it runs out of black: it stops going down and starts
   going up.

   Default follows the system. The toggle overrides it, and the
   override is remembered. Both selectors are needed: the media
   query for people who never touch the control, the attribute
   for people who do, and :not() so the attribute always wins. */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1218;
    --paper-2:#161B23;
    --blue-soft:#1A2336;
    --ink:#ECEAE5;
    --muted:#9DA4AE;
    --blue:#93A9E2;
    --gold-ink:#C9A467;
    --dark:#181E28;
    --dark-2:#212934;
  --panel:#171D26;
    --hair:rgba(236,234,229,.12);
    --hair-2:rgba(236,234,229,.22);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1218;
  --paper-2:#161B23;
  --blue-soft:#1A2336;
  --ink:#ECEAE5;
  --muted:#9DA4AE;
  --blue:#93A9E2;
  --gold-ink:#C9A467;
  --dark:#181E28;
  --dark-2:#212934;
  --panel:#171D26;
  --hair:rgba(236,234,229,.12);
  --hair-2:rgba(236,234,229,.22);
}

/* The raised bands need an edge, or they float without landing.
   On paper these sections needed no border because the colour
   change was the border. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dark,
  :root:not([data-theme="light"]) footer.site,
  :root:not([data-theme="light"]) .hero{border-block:1px solid var(--hair)}
}
:root[data-theme="dark"] .dark,
:root[data-theme="dark"] footer.site,
:root[data-theme="dark"] .hero{border-block:1px solid var(--hair)}

/* THE LOGOS KEEP THEIR OWN LIGHT SURFACE.
   Client marks are dark artwork on transparency. On a dark page
   they vanish, and the reflex fix, inverting them, is worse than
   the problem: these are other companies' registered trademarks
   and we do not get to restate them in colours they did not
   choose. A trademark was already distorted once on this page by
   a stray max-width. So the wall keeps a paper panel underneath
   and the marks stay exactly as their owners drew them. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-wall,
  :root:not([data-theme="light"]) .logos{
    background:#F2F1EE;border-radius:var(--radius);
    padding:clamp(18px,2.4vw,26px) clamp(14px,2vw,22px);
  }
}
:root[data-theme="dark"] .logo-wall,
:root[data-theme="dark"] .logos{
  background:#F2F1EE;border-radius:var(--radius);
  padding:clamp(18px,2.4vw,26px) clamp(14px,2vw,22px);
}

/* The control itself. Small, unlabelled by text, and it states
   what it will DO rather than what is currently on, which is the
   one thing these switches get wrong most often. */
.theme-t{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;
  background:none;border:1px solid var(--hair-2);border-radius:11px;
  color:var(--ink);cursor:pointer;padding:0;
  transition:border-color .3s cubic-bezier(.16,1,.3,1),background .3s cubic-bezier(.16,1,.3,1);
}
.theme-t:hover{border-color:var(--muted)}
.theme-t svg{width:17px;height:17px;display:block}
.theme-t .t-sun{display:none}
:root[data-theme="dark"] .theme-t .t-sun{display:block}
:root[data-theme="dark"] .theme-t .t-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-t .t-sun{display:block}
  :root:not([data-theme="light"]) .theme-t .t-moon{display:none}
}
@media (max-width:359px){.theme-t{display:none}}

/* THE FILLED BUTTON INVERTS ITS TEXT, AND MUST.
   On paper the accent is a deep blue and white sits on it at 7.94:1.
   In dark mode the accent becomes a LIGHT blue, because a deep blue
   on a near-black page is nearly invisible. White on that light blue
   measures 2.33:1, which fails plainly, and it fails on the single
   most important control on the page. The fill flipped lightness, so
   the text has to flip with it. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn{color:#0B0F16}
  :root:not([data-theme="light"]) .btn:hover{color:#0B0F16}
}
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .btn:hover{color:#0B0F16}

/* The download button's second line was white at 74% on the accent.
   On paper that is white on deep blue and reads. In dark mode the
   accent is a light blue, so the same rule put near-white on
   near-white. It inverts for the same reason the button label does. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn.dl .dl-m{color:rgba(11,15,22,.74)}
}
:root[data-theme="dark"] .btn.dl .dl-m{color:rgba(11,15,22,.74)}

/* ============================================================
   ONE CONTROL IN THE BAR
   ============================================================
   Three controls sat in the header: Menu, a theme toggle and the
   trial button. Three is what a header looks like when nobody
   decided which one mattered. They are now one, and the panel
   holds the rest.

   The mark is not three lines. A hamburger is the default answer
   and this brand's whole language is typographic, so the control
   keeps its WORD and earns its state from a plus that rotates
   into a cross. A person can read "Menu"; nobody has to learn it. */

.menu > summary{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px 10px;border:1px solid var(--hair-2);border-radius:12px;
  cursor:pointer;list-style:none;user-select:none;color:var(--ink);
  transition:border-color .34s cubic-bezier(.16,1,.3,1),background .34s cubic-bezier(.16,1,.3,1);
}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary:hover{border-color:var(--muted)}
.menu-word{font-size:15px;font-weight:560;letter-spacing:-.006em}

/* The plus, drawn rather than typed, so it rotates cleanly and sits
   on the optical centre instead of the font's idea of a baseline. */
.menu-x{position:relative;width:11px;height:11px;flex:none;
  transition:transform .42s cubic-bezier(.16,1,.3,1)}
.menu-x::before,.menu-x::after{
  content:"";position:absolute;inset:0;margin:auto;background:currentColor;border-radius:1px}
.menu-x::before{width:11px;height:1.5px}
.menu-x::after{width:1.5px;height:11px}
.menu[open] > summary .menu-x{transform:rotate(135deg)}
.menu[open] > summary{border-color:var(--muted)}

/* The panel. On a phone it is a sheet anchored to the bar, full
   width, because a floating card that stops short of both edges is
   the thing that makes a small screen feel like a shrunken desktop. */
.menu-panel{
  background:var(--panel);border:1px solid var(--hair);
  border-radius:14px;box-shadow:0 18px 48px rgba(11,15,22,.16);
  padding:12px;min-width:min(300px,calc(100vw - 32px));
}
.menu-panel a{display:block;padding:11px 12px;border-radius:9px;
  font-size:15.5px;line-height:1.35;color:var(--ink);
  transition:background .22s ease}
.menu-panel a:hover{background:var(--paper-2)}
.menu-cta{
  text-align:center;margin-bottom:8px;
  padding:13px 16px!important;font-weight:600;
}
.menu-cta:hover{background:var(--blue)!important}

.appear{margin-top:10px;padding:12px 12px 4px;border-top:1px solid var(--hair)}
.appear-l{display:block;font-family:var(--serif);font-variation-settings:"opsz" 20;
  font-style:italic;font-size:14.5px;color:var(--muted);margin-bottom:9px}
.appear-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  background:var(--paper-2);border-radius:10px;padding:3px}
.appear-seg button{
  border:0;background:none;border-radius:8px;padding:8px 4px;
  font:inherit;font-size:13.5px;color:var(--muted);cursor:pointer;
  min-height:38px;
  transition:background .3s cubic-bezier(.16,1,.3,1),color .3s cubic-bezier(.16,1,.3,1);
}
.appear-seg button[aria-checked="true"]{background:var(--panel);color:var(--ink);font-weight:600;
  box-shadow:0 1px 3px rgba(11,15,22,.12)}

@media (max-width:719px){
  .menu-panel{min-width:0;width:calc(100vw - 28px)}
}

/* `.menu-panel a` (0,1,1) outranks `.btn` (0,1,0), so the panel's link
   colour was applied to the filled button inside it and the label went
   dark-on-blue at 2.2:1. The button needs the panel's own specificity
   to win it back, in both themes, because the fill inverts. */
.menu-panel a.menu-cta{color:#fff}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .menu-panel a.menu-cta{color:#0B0F16}
}
:root[data-theme="dark"] .menu-panel a.menu-cta{color:#0B0F16}

/* ============================================================
   THE MENU AS A SCREEN
   ============================================================
   The dropdown was a raised panel floating over a darker header,
   which in dark mode put two different near-blacks against each
   other and produced a seam and a halo. Layering is how a light
   interface shows depth; in the dark it mostly shows dirt.

   So on a phone the menu stops being a card. It becomes a screen:
   the page's own background edge to edge, no border, no shadow,
   nothing to cast a glow against the header. The header keeps the
   same surface, so there is no seam because there are no longer
   two surfaces.

   And since it is a screen, it can be composed like one. The list
   is set as a contents page, the device this site already uses
   for the zones: an ordinal, a hairline, a serif line. Navigation
   in the same voice as the writing.
   ============================================================ */

.menu-list{display:block}
.menu-foot{display:block}

@media (min-width:720px){
  /* A dropdown reads downward, so the action belongs on the first
     line. On a phone it belongs on the last one. Same markup. */
  .menu-panel{display:flex;flex-direction:column}
  .menu-foot{order:-1}
  .menu-foot .appear{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);
    border-bottom:1px solid var(--hair);padding-bottom:12px;margin-bottom:4px}
}

@media (max-width:719px){
  .menu[open] > .menu-panel{
    position:fixed;inset:0;z-index:88;
    width:100%;min-width:0;margin:0;
    background:var(--paper);
    border:0;border-radius:0;box-shadow:none;
    padding:calc(64px + env(safe-area-inset-top,0px) + 14px) var(--gut)
            calc(env(safe-area-inset-bottom,0px) + 18px);
    display:flex;flex-direction:column;
    overflow-y:auto;overscroll-behavior:contain;
    animation:menuRise .52s cubic-bezier(.16,1,.3,1) both;
  }
  /* Rises rather than drops. A panel that falls from the top says
     "notification". A screen that comes up says "you opened this". */
  @keyframes menuRise{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:none}
  }

  .menu-list{counter-reset:m;flex:1 1 auto;padding-top:4px}
  .menu-panel .menu-list a{
    counter-increment:m;
    display:grid;grid-template-columns:2.4em 1fr;align-items:baseline;
    gap:0 4px;padding:15px 0;border-radius:0;
    border-bottom:1px solid var(--hair);
    background:none;
  }
  .menu-panel .menu-list a:last-child{border-bottom:0}
  .menu-panel .menu-list a:hover{background:none}
  .menu-panel .menu-list a::before{
    content:counter(m,decimal-leading-zero);
    font-family:var(--serif);font-variation-settings:"opsz" 20;font-style:italic;
    font-size:14px;color:var(--muted);
  }
  .ml-t{
    font-family:var(--serif);font-variation-settings:"opsz" 48;
    font-size:clamp(23px,6.4vw,30px);font-weight:640;letter-spacing:-.028em;
    line-height:1.12;color:var(--ink);
  }
  /* Touch feedback belongs on press, not hover: a phone has no
     hover and a sticky :hover state after a tap looks like a bug. */
  .menu-panel .menu-list a:active .ml-t{color:var(--blue)}

  .menu-foot{margin-top:auto;padding-top:22px}
  .menu-cta{margin-bottom:16px;font-size:16px}
  .appear{margin-top:0;padding:0;border-top:0}
  .appear-seg button{min-height:44px}

  /* The bar keeps the page surface while the screen is open, so the
     two never read as separate layers. */
  /* will-change:transform, added so the hide-on-scroll header
     promotes cleanly, creates a CONTAINING BLOCK for fixed
     descendants. So position:fixed;inset:0 resolved against the
     header instead of the viewport and the screen came out 96px
     tall, exactly the header's height. The hint is only needed
     while the bar is actually moving, and it is not moving while
     a full-screen menu is covering the page. */
  header.site:has(.menu[open]){
    background:var(--paper);backdrop-filter:none;box-shadow:none;
    will-change:auto;transform:none;
    /* Above the screen it opened. The panel is z-index 88, and the
       close control lives in this bar: covering it leaves a phone
       with no way out, because a phone has no Escape key. */
    z-index:92;
  }
  header.site:has(.menu[open]) .wrap::after{opacity:0}
}

/* The panel is a DESCENDANT of the control that opens it, so raising
   the header changed nothing: inside one stacking context a
   positioned child at z-index 88 paints over an unpositioned parent
   regardless of what the grandparent does. The summary needs its own
   position and a higher index, or it is visible and dead, which is
   worse than hidden because the reader keeps tapping it. */
@media (max-width:719px){
  .menu[open] > summary{position:relative;z-index:95;background:var(--paper)}
}

/* ============================================================
   NO ORDINALS, AND A REMOTE AT THE FOOT
   ============================================================ */

/* The counter is gone. Left in place, disabled explicitly, because
   the reason matters more than the rule: numbering navigation
   asserted an order that does not exist. */
@media (max-width:719px){
  .menu-panel .menu-list a{grid-template-columns:1fr auto;gap:0 14px}
  .menu-panel .menu-list a::before{content:none}
}
.menu-panel .menu-list a{counter-increment:none}

/* Six of these move you inside this page. Two leave it. The arrow is
   the only difference between the eight that a reader can act on, so
   it is the only mark any of them carries. Drawn, not typed, so it
   keeps its weight when the serif around it changes size. */
.ml-go{
  width:9px;height:9px;flex:none;align-self:center;
  border-top:1.6px solid var(--muted);border-right:1.6px solid var(--muted);
  transform:rotate(45deg) translate(-1px,1px);
  transition:border-color .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);
}
.menu-list a:hover .ml-go,.menu-list a:active .ml-go{
  border-color:var(--blue);transform:rotate(45deg) translate(1px,-1px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media (max-width:719px){
  /* THE REMOTE.
     Three loose controls at the foot read as leftovers. One slab with
     a hairline reads as a thing you hold: the action is the big
     button, appearance is the small row beneath it, and the whole
     group sits in the corner of the screen a thumb already rests in.
     It borrows the logic of a remote, not its looks: few controls,
     one obviously dominant, nothing floating on its own. */
  .menu-foot{
    margin-top:auto;padding:14px;
    background:var(--paper-2);border:1px solid var(--hair);
    border-radius:20px;
  }
  .menu-cta{margin-bottom:12px;font-size:16.5px;border-radius:14px;padding:15px 16px!important}
  .menu-foot .appear{margin:0;padding:0;border:0}
  .menu-foot .appear-l{margin-bottom:7px;padding-left:2px}
  .appear-seg{background:var(--panel);border:1px solid var(--hair)}
  .appear-seg button[aria-checked="true"]{background:var(--blue-soft);color:var(--blue)}

  /* The control that opened the screen is the control that closes it.
     A second, differently placed close would be a new object to
     learn; this one is already under the thumb that summoned it. It
     only has to stop saying "Menu" while it is doing the opposite. */
  .menu[open] > summary{
    border-color:var(--muted);background:var(--paper-2);
    padding:9px 14px 10px 16px;
  }
}

/* ============================================================
   THE HEADLINE GETS ITS AIR BACK
   ============================================================
   h1 carried -.042em tracking AND 1.02 leading. Each is defensible
   at display size on its own. Together they close the space
   between letters and the space between lines at the same time, so
   three lines of serif fuse into one dark block. The reader stops
   reading words and starts decoding a shape, which is what "too
   strong" describes.

   Tracking goes to -.028em, still tight enough that the display
   cut does not look accidentally loose, and leading to 1.09, which
   is the one that actually buys the breath: on a three-line
   headline the gap between lines is doing more work than the gap
   between letters.

   Weight drops 650 to 620. Newsreader's display optical size is
   already high contrast, and the extra weight was thickening the
   stems without adding authority. */
h1{
  letter-spacing:-.028em;
  line-height:1.09;
  font-weight:620;
}

/* The italic sat at the same weight as the roman beside it. An
   italic at equal weight always reads heavier, because its strokes
   are closer together, so the emphasis was shouting rather than
   leaning. A touch lighter and slightly looser puts it level. */
h1 em{
  font-weight:585;
  letter-spacing:-.022em;
}

/* Word spacing, the part that reads as "tight" without anyone
   naming it: negative tracking shrinks the spaces between words as
   well as between letters, and at this size the words start
   touching. This gives back only what the tracking took. */
h1{word-spacing:.035em}

/* ============================================================
   THE HEADER, HELD TO THE SAME STANDARD AS THE HEADLINE
   ============================================================ */

/* THE WORDMARK.
   It carried the same fault the h1 did, and worse for being two
   words: -.042em at weight 650 pulls "Zen" and "Garden" into one
   dark lump, and the space between them is the only thing telling
   a reader it is a name rather than a word. Loosened to -.026em,
   weight to 620, and the word gap given back explicitly, because
   negative tracking takes it away first.

   It also grows a little. Hierarchy is comparative: the pill next
   to it got smaller, so the name only has to be quietly larger to
   be obviously first. */
.brand b{
  font-size:clamp(21px,2.1vw,25px);
  font-weight:620;
  letter-spacing:-.026em;
  word-spacing:.04em;
  line-height:1.04;
}
/* The Z's diagonal leaves more optical space at the left than a
   vertical stem would, so at this size the name reads as if it is
   indented past the text below it. A hair of negative margin puts
   the mark back on the same optical line as everything else. */
.brand{margin-left:-.02em}

/* THE CONTROL.
   Smaller in every dimension, and the border goes from --hair-2 to
   --hair. It was competing with the name by being the only object
   on the row with an outline; it should read as available, not as
   the point of the header. */
.menu > summary{
  padding:7px 12px 8px 13px;
  border-radius:10px;
  border-color:var(--hair);
  gap:8px;
}
.menu-word{font-size:13.5px;font-weight:540;letter-spacing:.002em}
.menu-x{width:9.5px;height:9.5px}
.menu-x::before{width:9.5px;height:1.4px}
.menu-x::after{width:1.4px;height:9.5px}
.menu > summary:hover{border-color:var(--hair-2)}

/* THE RULE.
   It was inset to the gutter, so on a wide screen it stopped short
   of both edges while the header's own background ran full width.
   A line that ends before its container does reads as unfinished
   rather than deliberate. Full bleed, and lighter: it is there to
   separate two things, not to be seen doing it. */
header.site .wrap::after{
  left:0;right:0;
  background:var(--hair);
}

/* The row itself sits a little tighter now that both objects are
   quieter, so the bar stops feeling like a band and starts feeling
   like an edge. */
header.site .wrap{padding-top:2px;padding-bottom:2px}

/* The rule was drawn on .wrap, which is capped at --wrap and centred.
   left:0 therefore meant the edge of the COLUMN, not the edge of the
   screen, so on a wide monitor the line stopped mid-air while the
   header's own background carried on to both edges. Drawn on the
   header, it ends where the header ends, which is the only place a
   dividing line can end without looking like a mistake. */
header.site .wrap::after{content:none}
header.site::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--hair);pointer-events:none;
}

/* The dock sat at 97% opacity, which is the kind of value that looks
   like craft and behaves like a bug: a sticky bar's whole job is to
   occlude. At 0.97 the dark headline passing underneath ghosted
   through it and the two sets of words read on top of each other.
   Three percent buys no visible depth and costs legibility of both
   layers at once. Fully opaque, and the shadow does the lifting. */
.dock{
  background:var(--dark);
  box-shadow:0 -10px 30px rgba(11,15,22,.16);
}
:root[data-theme="dark"] .dock,
.dock{border-top:1px solid var(--hair-dark)}

/* ============================================================
   THE CONTROL LOSES ITS WORD, THE NAME GAINS AN EDGE
   ============================================================
   The word "Menu" was doing the same job twice: the pill's shape
   already says "press me" and the plus already says "more". On a
   row with only two objects, the one that is not the name should
   be the quieter of the two, and a square holding a single mark is
   quieter than a rectangle holding a word.

   The label does not disappear, it moves to where it belongs: an
   aria-label, so a screen reader still hears "Menu" while the eye
   gets a mark. The name is now the only word in the bar. */
.menu-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.menu > summary{
  width:40px;height:40px;padding:0;gap:0;
  justify-content:center;border-radius:11px;
}
@media (max-width:719px){.menu[open] > summary{padding:0}}

/* THE MARK GETS ITS EDGE: the empty room.
   An outlined rectangle with nothing in it, above the name. It is
   the one device that means something rather than merely holding
   something: the room is empty, and that is the proposition. Drawn
   in the accent, which the brand book reserves for decisions, so
   the rule now reads "decisions and the mark" rather than being
   quietly broken. Line drawing, not a filled box, so it never
   competes with the control on the other side of the bar. */
.brand{position:relative}
.brand::before{
  content:"";display:block;
  width:52px;height:13px;
  border:2px solid var(--blue);
  margin-bottom:7px;
}
@media (max-width:719px){
  .brand::before{width:44px;height:11px;border-width:1.8px;margin-bottom:6px}
}

/* ============================================================
   THE MARK: THE DOORFRAME, SET OPEN
   ============================================================
   The rectangle above is retired in favour of two uprights. It
   frames without enclosing, which is the correct relationship for
   a brand whose whole claim is that nothing is asked of you.

   The governing change is not the posts, it is the tracking.
   Tight letterspacing reads as technology; open letterspacing
   reads as heritage. Chanel, Herme\0000e8s, Burberry, Celine and
   Calvin Klein are all set open, and our name was at -.026em,
   which is startup-tight. A name squeezed to fit is a name that
   has not been given its room, and no amount of framing rescues
   it. So the mark alone goes to +.012em while every heading on
   the site stays tight. They are different jobs.

   Then the details that separate a mark from a logo, each one
   decided rather than defaulted:
     the posts stop at cap height, because a post that runs to the
       descender is following the line box rather than the letters;
     their ends are round, because a square cut is what you get
       when you do not choose;
     the gap between post and letter equals the gap between the
       two words, so the mark keeps one rhythm instead of three.
   One colour, one weight, one idea, and it survives an embosser,
   which the accent-blue rectangle would not have. */
.brand::before{content:none}
.brand{
  display:flex;flex-direction:row;align-items:center;gap:.42em;
  margin-left:0;
}
.brand .post{
  width:2.2px;height:.72em;flex:none;
  background:currentColor;border-radius:2px;
  opacity:.9;
}
.brand b{
  font-style:normal;
  font-weight:600;
  letter-spacing:.012em;
  word-spacing:.06em;
}
/* The parent line sits under the name, so the flex row must not
   swallow it. It keeps its own column beside the framed name. */
.brand span:not(.post){align-self:center}
@media (max-width:719px){
  .brand{gap:.38em}
  .brand .post{width:2px}
}

/* The posts are sized in em so they track the name, but em resolved
   against .brand's inherited 16px rather than the name's 25px, so
   they came out 11px tall and sat by the baseline like stray commas.
   The container now carries the same font-size as the name, so one
   number governs the mark and every part of it scales together. */
.brand{
  font-size:clamp(21px,2.1vw,25px);
  line-height:1;
}
.brand b{font-size:1em}
.brand .post{
  height:.70em;          /* Newsreader's cap height at this weight */
  width:.088em;
  border-radius:.05em;
  align-self:center;
  position:relative;top:-.02em;   /* optical centre, not box centre */
}
/* The parent name under the mark must not inherit the display size. */
.brand span:not(.post){font-size:10.5px}

/* .brand span{font-size:10.5px} is set earlier for the parent line,
   and .post is also a span, so it inherited that size. Every em on
   the post was then resolving against 10.5px instead of the name's
   25px, which is why the uprights came out a third of their height
   and read as stray commas beside the word. A :not() on the OTHER
   rule cannot fix this; the post has to state its own size. */
.brand .post{font-size:1em}

/* Two last corrections, both optical rather than measured.
   The 0.9 opacity was making a 2.2px stroke read grey beside solid
   black letters: at that width there is not enough area for the eye
   to average the colour, so it just looks weaker. Full strength.
   And the post was centred in the LINE BOX, which sits lower than
   the caps because the box includes the descender. Raised to sit on
   the cap line, where the eye expects a vertical to start. */
.brand .post{opacity:1;top:-.055em}

/* ============================================================
   THE MARK: STACKED, AND JUSTIFIED TO A RECTANGLE
   ============================================================
   Two syllables, two ideas, two lines. The doorframe is retired.

   The move that makes this a mark rather than a name on two lines
   is the justification. "Zen" is 184.94 units wide where "Garden"
   is 356 at the same size, so Zen is letterspaced by exactly
   (356 - 184.94) / 3 = 0.5702em and the two lines become the same
   width to the pixel. Measured in a browser, not estimated.

   Three characters means CSS adds the space three times, including
   after the final n, so the trailing gap is pulled back with an
   equal negative margin. Without that the block is optically
   off-centre by half a letterspace and nobody can say why.

   What it buys: the mark becomes a rectangle made of type. For a
   company selling an empty room, the logo IS the room, and unlike
   a drawn rectangle it cannot be separated from the name.

   Leading closes to .88 so the two lines lock into one object
   rather than reading as a wrapped phrase. This is the whole
   difference between a stacked logo and a narrow column. */
.brand{display:block;font-size:clamp(15px,1.35vw,17px);line-height:1}
.brand .post{display:none}
.brand b{
  display:block;
  font-family:var(--serif);font-variation-settings:"opsz" 72;
  font-size:1em;font-weight:620;font-style:normal;
  line-height:.88;
  color:var(--ink);
}
.brand .z,.brand .g{display:block}
.brand .z{
  letter-spacing:.5702em;
  margin-right:-.5702em;   /* the trailing gap CSS adds after the n */
  color:var(--blue);
}
.brand .g{letter-spacing:.004em}
.dark .brand b,.hero .brand b,footer.site .brand b{color:var(--on-dark)}
.dark .brand .z,.hero .brand .z,footer.site .brand .z{color:var(--blue-lt)}

/* .brand span{font-size:10px} and .brand span:not(.post){font-size:10.5px}
   were both written for the parent line beneath the name. The two
   halves of the stacked mark are also spans, so they were being set
   at 10px while their parent <b> was at 17px, and the justification
   maths was computed against a size neither line was using. Scoped
   through the <b> so only the mark's own halves are addressed. */
.brand b .z,.brand b .g{
  font-size:1em;font-family:inherit;font-weight:inherit;
  text-transform:none;display:block;
}
.brand b .z{letter-spacing:.5702em;margin-right:-.5702em}
.brand b .g{letter-spacing:.004em}

/* The old lockup styled .brand span as the PARENT name: muted colour,
   a hairline above it, mono, uppercase. The stacked mark's two halves
   are spans too, so Garden was inheriting grey and both were picking
   up a rule. Every one of those is cleared explicitly rather than
   left to specificity luck. */
.brand b .z,.brand b .g{
  border:0;padding:0;margin-top:0;max-width:none;
  font-style:normal;letter-spacing:inherit;
}
.brand b .g{color:var(--ink);letter-spacing:.004em}
.brand b .z{color:var(--blue);letter-spacing:.5702em;margin-right:-.5702em}
.dark .brand b .g,.hero .brand b .g,footer.site .brand b .g{color:var(--on-dark)}
.dark .brand b .z,.hero .brand b .z,footer.site .brand b .z{color:var(--blue-lt)}
:root[data-theme="dark"] .brand b .g{color:var(--ink)}
/* text-align:right and the .3em tracking from that same old rule
   also had to go, or Garden sat right-aligned under a left-set Zen. */
.brand b .z,.brand b .g{text-align:left;text-transform:none;font-variation-settings:"opsz" 72;font-weight:620}

/* ============================================================
   THE JUSTIFICATION IS REMOVED. IT WAS THE WRONG TECHNIQUE.
   ============================================================
   Setting Zen to Garden's exact width was arithmetically correct
   and typographically wrong, and the numbers said so before the
   eye did: 3 characters stretched to the width of 6 means the
   gaps between letters end up wider than the letters. That reads
   as a fault, not as a decision.

   It works for SAINT / LAURENT and BALEN / CIAGA because those
   halves are nearly the same length. Zen and Garden are not, and
   no amount of precision fixes a technique that does not fit the
   word. The stepped right edge is the honest shape of these two
   words stacked, and a stepped edge is not a problem to solve.

   Both lines now share one tracking. The mark is the two words,
   the tight leading that locks them into a block, and nothing
   else. */
.brand b .z{
  letter-spacing:.004em;
  margin-right:0;
}
.brand{font-size:clamp(17px,1.6vw,20px)}
.brand b{line-height:.9}

/* ============================================================
   MAKING THE LAZY COPY INCONVENIENT
   ============================================================
   Stated plainly so nobody later mistakes this for security: the
   browser must receive the HTML and CSS in order to draw the page.
   View-source, DevTools and Save Page As cannot be prevented by
   anything written here. A designer who wants this layout will
   have it, and no site on the internet has ever stopped that.

   What this does stop is the careless copy: dragging a photograph
   of the room onto a desktop, or selecting the whole page and
   pasting the copy into a document. That is the realistic threat,
   and it is worth a speed bump.

   What it must NOT stop is the reason the site exists. Selection
   stays ON for every address, phone number, form field and the
   library, because a buyer copying our email into their client is
   the pipeline working. Protecting the prose at the cost of the
   lead would be protecting the wrong thing. */
main, header.site, footer.site, .hero, .dark, .tint-2{
  -webkit-user-select:none;user-select:none;
}
/* The exceptions, and they are the point. */
a[href^="mailto"], a[href^="tel"], a[href^="https://wa.me"],
input, textarea, select, .form-card, .book-alt, #book, .foot-legal,
[data-copyable]{
  -webkit-user-select:text;user-select:text;
}

/* The photographs are the part that cannot be re-shot. Dragging is
   the one-gesture theft, and it costs nothing to remove. */
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}

/* If someone does select something they are allowed to, it should
   look like the brand rather than the browser default. */
::selection{background:var(--blue-soft);color:var(--ink)}
:root[data-theme="dark"] ::selection{background:var(--blue);color:#fff}

@media print{
  /* Printing is a legitimate need for the CFO brief and a copy
     route for everything else, so the brief prints and the rest
     carries its source. */
  body::after{
    content:"thezengarden.in";
    display:block;text-align:center;font-size:9px;color:#888;padding-top:8px;
  }
}

/* ============================================================
   ZEN LEADS. GARDEN CARRIES IT.
   ============================================================
   The two lines are flush again, but by SCALE rather than by
   stretching. Garden has twice the characters of Zen, so when Zen
   is set large and bold, Garden set at 54.2% of that size lands on
   exactly the same width. Measured, not guessed: Zen at weight 700
   with .02em tracking is 195.2 units wide per 100 of size, Garden
   at weight 600 is 360, and 195.2 / 360 gives the ratio.

   This is the justification idea done the way it should have been
   done the first time. Stretching a short word to fit a long one
   breaks the letterforms. Scaling a long word to sit under a short
   one leaves every letter exactly as the punchcutter drew it, and
   the rectangle appears anyway.

   The hierarchy is now the meaning: Zen is the state, said loudly.
   Garden is the place it happens, said once, underneath, holding
   it up. */
.brand{font-size:clamp(26px,2.8vw,34px);line-height:1}
.brand b{line-height:.86;letter-spacing:0}
.brand b .z{
  font-size:1em;
  font-weight:700;
  letter-spacing:.02em;
  margin-right:0;
  color:var(--blue);
}
.brand b .g{
  font-size:.542em;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
  margin-top:.06em;
}
/* More room around it. A mark this size needs the bar to grow with
   it, or the letters touch the rule underneath. */
.brand{padding:10px 0 11px}
@media (max-width:719px){
  .brand{font-size:clamp(24px,7.4vw,30px);padding:8px 0 9px}
}

/* ============================================================
   THE MARK, GIVEN BODY
   ============================================================
   Three corrections, and the first is the one that made it look
   "skinny": the mark was set at opsz 72. That is Newsreader's
   DISPLAY cut, drawn to be used at headline sizes where hairlines
   can afford to be thin. Rendered at 30px it gives you the
   delicacy of a 72px setting at less than half the size, which is
   exactly the frailty the optical axis exists to prevent. Dropped
   to opsz 30, the stems thicken, the serifs shorten and the
   letters get their dimension back. Same typeface, correct cut.

   Second, light on dark reads thinner than dark on light. The eye
   spreads a bright shape against a dark ground, and the strokes
   between the spread look starved. Every serious type system adds
   weight in the dark. This one did not, which is why the mark
   looked ill in dark mode and fine in light.

   Third, the exact width match is relaxed. Garden sitting at a
   precise 54.2% was a rule the eye did not ask for; it is more
   elegant a little wider than Zen, so the pair reads as gathered
   rather than measured. The detail is used, not obeyed. */
.brand{font-size:clamp(23px,2.4vw,29px)}
.brand b{font-variation-settings:"opsz" 30;line-height:.88}
.brand b .z{
  font-size:1em;
  font-weight:720;
  letter-spacing:.012em;
  font-variation-settings:"opsz" 30;
}
.brand b .g{
  font-size:.60em;           /* a touch past flush, gathered not measured */
  font-weight:640;
  letter-spacing:.026em;
  font-variation-settings:"opsz" 22;
  margin-top:.05em;
}

/* The dark-mode compensation. Roughly a 40-unit lift on each, which
   is what it takes for the two settings to look like the same
   weight rather than measure like it. */
:root[data-theme="dark"] .brand b .z,
.dark .brand b .z,.hero .brand b .z,footer.site .brand b .z{font-weight:760}
:root[data-theme="dark"] .brand b .g,
.dark .brand b .g,.hero .brand b .g,footer.site .brand b .g{font-weight:680}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z{font-weight:760}
  :root:not([data-theme="light"]) .brand b .g{font-weight:680}
}

/* ============================================================
   THE CONTENTS PAGE, PROPERLY SET
   ============================================================
   A good book's contents is not a list of links stacked up. It is
   a table: the title on the left, a leader running across the dead
   space, and the marker at the right margin. The leader is what
   makes it read as considered rather than as whatever fitted. It
   also does real work, carrying the eye from a short title to its
   mark without the reader losing the row.

   Everything now sits on the same two vertical lines as the slab
   at the foot, so one left margin runs from the first title to the
   Appearance label. The slab had the good dimensions; the list
   simply follows them. */
@media (max-width:719px){
  .menu-panel .menu-list a{
    grid-template-columns:auto 1fr auto;
    align-items:baseline;
    gap:0 12px;
    padding:13px 14px;          /* 14px matches the slab's inner inset */
  }
  .ml-t{font-size:clamp(19px,5.1vw,24px)}

  /* The leader. A hairline sitting on the baseline, filling exactly
     the space the title does not use. It stops short of the marker
     so the two never touch. */
  .ml-lead{
    display:block;height:1px;background:var(--hair);
    transform:translateY(-.32em);
    min-width:14px;
  }
  .menu-list a:active .ml-lead{background:var(--blue)}

  /* The row edges follow the slab, not the screen. */
  .menu-panel .menu-list a{border-bottom-color:var(--hair)}
  .menu-list{padding-top:2px}

  .ml-go{align-self:center;transform:rotate(45deg) translate(-1px,1px)}
  .ml-doc{width:17px;height:17px;color:var(--muted);align-self:center;
    transition:color .3s cubic-bezier(.16,1,.3,1)}
  .menu-list a:active .ml-doc{color:var(--blue)}
}

/* A chevron says "elsewhere". It does not say "you will be handed a
   document", which is the thing a Head of People wants to know
   before they tap, because it decides whether they open it now or
   send it to their CFO. The page icon says it in one glyph. */
.ml-doc{flex:none}
@media (min-width:720px){
  .ml-doc{width:15px;height:15px;color:var(--muted);margin-left:auto}
  .menu-panel .menu-list a{display:flex;align-items:center;gap:10px}
  .ml-lead{display:none}
}

/* The slab's inner edge sits at the panel gutter + its 1px border +
   its 14px padding. The list has neither border nor slab, so to land
   on the same vertical line it needs 15px, not 14. One pixel, and it
   is the difference between a margin that looks intentional and one
   that looks close. Scoped through .menu[open] so it outranks the
   generic .menu-panel a padding it kept losing to. */
@media (max-width:719px){
  .menu[open] .menu-panel .menu-list a{padding-left:15px;padding-right:15px}
  .menu[open] .menu-panel .menu-foot{padding-left:14px;padding-right:14px}
}

/* .btn carries margin-left:6px so buttons sitting in a row do not
   touch. Inside the slab the button is alone and full width, so that
   margin was pure offset, and it was the reason the CTA sat 6px right
   of every title above it. Removed at the source rather than
   compensated for in the list. */
.menu-cta{margin-left:0;margin-right:0}

/* ============================================================
   THE MARK: DIFFERENTIATE BY TYPOGRAPHY, NOT BY COLOUR
   ============================================================
   "Elegant but cartoonish" is a fair description of what two
   colours and a heavy weight do together at small size. Colour is
   the loudest way to tell two words apart and therefore the least
   serious: it is the choice a mark makes when the typography is
   not doing the work.

   The heritage lockups solve this the other way. CHANEL over
   PARIS, HERMES over PARIS, RALPH LAUREN over PURPLE LABEL. One
   colour throughout, and the second line is separated by CASE and
   TRACKING instead. It reads as a foundation the first word stands
   on rather than a second word competing with it.

   So Garden goes to letterspaced capitals at a much smaller size,
   Zen loses a little weight because it no longer has to shout over
   a colour, and the whole mark is one ink. The blue is returned to
   the ledger of things that mean a decision. */
.brand b .z{
  font-weight:640;
  letter-spacing:.004em;
  color:var(--ink);
  font-variation-settings:"opsz" 34;
}
.brand b .g{
  font-size:.30em;
  font-weight:640;
  text-transform:uppercase;
  letter-spacing:.30em;
  margin-right:-.30em;      /* the trailing tracking after the N */
  color:var(--muted);
  font-variation-settings:"opsz" 14;
  margin-top:.28em;
}
.brand b{line-height:.92}
:root[data-theme="dark"] .brand b .z,
.dark .brand b .z,.hero .brand b .z,footer.site .brand b .z{color:var(--on-dark);font-weight:680}
:root[data-theme="dark"] .brand b .g,
.dark .brand b .g,.hero .brand b .g,footer.site .brand b .g{color:var(--muted-dark);font-weight:680}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z{color:var(--ink);font-weight:680}
  :root:not([data-theme="light"]) .brand b .g{color:var(--muted);font-weight:680}
}
/* .menu-cta alone (0,1,0) kept losing. Matched to the same
   specificity already used for its colour so the two agree. */
.menu-panel a.menu-cta{margin-left:0;margin-right:0}

/* ============================================================
   TAKE THE LINES AWAY
   ============================================================
   The leader was right in principle and wrong on this page,
   because the rows already had dividers. A rule across the row
   plus a rule under the row is how ruled notepaper is drawn, and
   no amount of refinement rescues a page that has been ruled
   twice.

   Apple's lists do not separate items with lines. They separate
   them with space, and they let the type carry the hierarchy. A
   divider is what you reach for when the spacing is too tight to
   do the job on its own, so the honest fix is to give the rows
   the room they needed and delete both lines.

   What is left: eight lines of serif, generous air, and a mark on
   only the two rows that lead somewhere else. The list is now
   quieter than it has been at any point, and quiet is the thing
   the whole brand is selling. */
@media (max-width:719px){
  .ml-lead{display:none}
  .menu-panel .menu-list a{
    border-bottom:0;
    padding:16px 15px;
    grid-template-columns:1fr auto;
    align-items:center;
    transition:transform .42s cubic-bezier(.16,1,.3,1);
  }
  .menu-panel .menu-list a:last-child{border-bottom:0}
  .ml-t{font-size:clamp(20px,5.4vw,25px);line-height:1.15}

  /* The only motion in the screen, and it belongs to the finger.
     The row leans toward where it is about to take you. */
  .menu-panel .menu-list a:active{transform:translateX(5px)}
  .menu-list{padding-top:6px;padding-bottom:6px}
}

/* ============================================================
   THE MARK: BLUNTER SERIFS, A READABLE BASE, AND CENTRED
   ============================================================
   The Z's corners are sharp because opsz 34 is still a display
   setting: high optical sizes give long, finely pointed serifs
   drawn to be seen large, and on a capital Z those points land as
   two spikes at the corners. Dropping to opsz 16 is not a smaller
   size, it is a different DRAWING of the same letter, with shorter
   blunter serifs and thicker hairlines, cut for reading rather
   than for display. The spikes go away because they were never
   meant to be here.

   GARDEN was set in --muted, which made it a caption under a name.
   It is half the idea and has to read like it. It moves to the ink
   at a slightly larger size, and the tracking eases from .30em to
   .22em, because letterspacing past about a quarter em starts
   costing legibility faster than it buys elegance.

   And the whole mark drops a few pixels. It was optically riding
   high in the bar: capitals plus a small-caps line have almost no
   descender, so a mark centred by its BOX sits above centre to the
   eye. Nudged down to sit where it looks centred rather than where
   it measures centred. */
.brand b .z{
  font-variation-settings:"opsz" 16;
  font-weight:620;
  letter-spacing:.006em;
}
.brand b .g{
  font-size:.335em;
  font-weight:660;
  letter-spacing:.22em;
  margin-right:-.22em;
  color:var(--ink);
  opacity:.82;                /* present, not shouting */
  font-variation-settings:"opsz" 16;
  margin-top:.30em;
}
.brand{padding:14px 0 12px}
:root[data-theme="dark"] .brand b .g,
.dark .brand b .g,.hero .brand b .g,footer.site .brand b .g{color:var(--on-dark);opacity:.8}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .g{color:var(--ink);opacity:.8}
}
/* .335em of a 23px Zen is 7.7px, which is caption size, not half a
   logo. Capitals need more size than lowercase to read at the same
   ease, and letterspaced capitals need more again. .42em puts it at
   a size a person actually reads rather than infers. */
.brand b .g{font-size:.42em;letter-spacing:.19em;margin-right:-.19em;opacity:.86}
/* The two words were reading as two things placed near each other
   rather than one mark. Closing the gap is what makes a stacked
   lockup cohere: the second line should feel attached to the first,
   sitting under it rather than following it. Line box tightened and
   the added margin removed, so the only space left is the space the
   letters themselves need. */
.brand b{line-height:.84}
.brand b .g{margin-top:.06em}

/* ============================================================
   THE BLUE MARK, AND A RIGHT SIDE THAT DESERVES IT
   ============================================================
   Zen takes the accent. GARDEN stays in the ink, so the mark is
   still differentiated by case and tracking first and colour only
   second, which is what stops it reading as a two-colour logo.

   The consequence is real and should be written down rather than
   discovered later: the brand book says the accent appears only
   where a decision happens. It now also carries the identity. That
   is a rule with two clauses, not a rule being broken twice, and
   the book needs the sentence changed to say so. */
.brand b .z{color:var(--blue)}
:root[data-theme="dark"] .brand b .z,
.dark .brand b .z,.hero .brand b .z,footer.site .brand b .z{color:var(--blue-lt)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z{color:var(--blue)}
}

/* The right side was the default nav it had always been, and next
   to a mark that has been worked on for a day it read as unfinished.
   It does not need decoration, it needs the same care: a size that
   sits under the mark rather than beside it, tracking that matches
   the body rather than the browser, and one gap value instead of
   three. */
.nav-links{gap:0}
.nav-links .nav-hide{
  font-size:14.5px;font-weight:500;letter-spacing:-.004em;
  padding:10px 15px;border-radius:9px;
  display:inline-flex;align-items:center;gap:7px;
  transition:color .3s cubic-bezier(.16,1,.3,1);
}
.nav-links .nav-hide:hover{color:var(--blue)}
.nav-doc{width:14px;height:14px;flex:none;opacity:.55;
  transition:opacity .3s cubic-bezier(.16,1,.3,1)}
.nav-links .nav-hide:hover .nav-doc{opacity:1}

/* The control gets the mark's proportions: same corner softness,
   the hairline rather than the heavier one, and enough room that it
   reads as a considered object rather than a leftover square. */
.menu > summary{
  width:42px;height:42px;border-radius:12px;
  border-color:var(--hair);
  margin-left:10px;
}
.menu > summary:hover{border-color:var(--hair-2);background:var(--paper-2)}

/* ============================================================
   THE SCREEN GETS ITS NAME, AND ITS ONE SENTENCE
   ============================================================
   A quarter of the menu screen was empty and the screen carried no
   identity, because the mark sits in the bar behind it. Both are
   solved by the same thing: put the mark in the sheet, the way a
   sheet carries its own name, and give it one line underneath.

   The line is not a tagline. The tagline lives in the footer and
   would become wallpaper if it appeared here too. This is the
   proposition turned on the website itself: the room asks nothing
   of you, and neither does this page. It is the most useful thing
   a stranger opening a menu can be told, and it is true, which is
   the only reason it may be said. */
.menu-head{display:none}
@media (max-width:719px){
  .menu-head{display:block;padding:2px 15px 26px}
  .mh-mark{display:block;font-family:var(--serif);line-height:.84;font-size:23px}
  .mh-mark .z{
    display:block;font-variation-settings:"opsz" 16;font-weight:620;
    letter-spacing:.006em;color:var(--blue);
  }
  .mh-mark .g{
    display:block;font-size:.42em;font-weight:660;text-transform:uppercase;
    letter-spacing:.19em;margin-right:-.19em;margin-top:.06em;
    color:var(--ink);opacity:.86;font-variation-settings:"opsz" 16;
  }
  .mh-line{
    margin:18px 0 0;max-width:22ch;
    font-family:var(--serif);font-variation-settings:"opsz" 22;
    font-size:16.5px;line-height:1.4;letter-spacing:-.006em;
    color:var(--muted);
  }
  .mh-line em{font-style:italic;color:var(--ink)}
  :root[data-theme="dark"] .mh-mark .z{color:var(--blue-lt)}
  :root[data-theme="dark"] .mh-mark .g,
  :root[data-theme="dark"] .mh-line em{color:var(--on-dark)}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mh-mark .z{color:var(--blue)}
}
/* The close control floats over the top-right of the screen, so any
   text running the full width passes underneath it. The sentence was
   literally interrupted by the button. The head keeps a lane clear
   for it rather than relying on the line happening to be short. */
@media (max-width:719px){
  .menu-head{padding-right:74px;padding-bottom:22px}
  .mh-line{max-width:19ch;font-size:16px}
}

/* ============================================================
   MOBILE: THE CLOSE CONTROL IS PINNED, NOT FLOATED
   ============================================================
   Its position was being inherited from the header's flex layout,
   which put it in the middle of the screen once the header changed
   under it, and the head sentence ran straight through it. A
   control that covers the whole screen should not depend on the
   layout of the bar it came from. Pinned to the corner, where it
   can be reasoned about. */
@media (max-width:719px){
  .menu[open] > summary{
    position:fixed;
    top:calc(env(safe-area-inset-top,0px) + 12px);
    right:var(--gut);
    z-index:95;
  }
}

/* ============================================================
   DESKTOP: THE ACTION COMES BACK, AND SEPARATES THE PAIR
   ============================================================
   The document icon sitting immediately beside the plus made them
   read as one control with two glyphs. The fix is not to move the
   CFO link away from where it belongs in the reading order, it is
   to put something between them that has every right to be there.
   The trial button is that thing, and it also undoes the one real
   cost of folding the header down to a single control: the action
   is permanently visible again on the screen size where there is
   room for it. */
.nav-cta{display:none}
@media (min-width:900px){
  .nav-cta{
    display:inline-flex;align-items:center;
    margin-left:14px;margin-right:2px;
    padding:11px 18px;font-size:14.5px;font-weight:600;
    border-radius:11px;min-height:42px;
  }
  .menu > summary{margin-left:8px}
}
/* The action belongs before the control, so the plus is the last
   thing on the row and the document icon is two objects away from
   it rather than adjacent. Done with order rather than by moving
   the markup, because the <details> must stay where it is for the
   panel's positioning to resolve against the same ancestor. */
.nav-links{display:flex;align-items:center}
.nav-links .nav-cta{order:1}
.nav-links .menu{order:2}

/* ============================================================
   PLATE NUMBERS
   ============================================================
   The convention a book uses for a photograph: a plate number
   before the caption. It is not decoration. It asserts that the
   image is a specific record of a specific thing rather than an
   illustration of an idea, and on a page whose entire argument is
   that everything stated can be checked, a picture that behaves
   like evidence is worth more than a picture that behaves like a
   mood.

   Numbered by CSS counter rather than typed, so the sequence
   cannot drift when a figure is added, removed or reordered. A
   hand-typed "Plate 04" that is actually the third picture is
   worse than no plate number at all.

   WHAT IS DELIBERATELY MISSING: the room and the date. A plate
   line in a book reads "Plate 4. Bengaluru, March 2026" and that
   is the half that carries the authenticity. I do not have that
   data per image and will not invent it, because a fabricated
   provenance line is exactly the class of claim the gate exists
   to catch, and it would be the only unsourced statement on the
   page. The markup carries a data-plate attribute ready for it:
   fill that in and it prints after the number. */
main{counter-reset:plate}
figure.shot,figure.hero-plate,.trio figure{counter-increment:plate}
figure.shot figcaption::before,
figure.hero-plate figcaption::before{
  content:"Photograph " counter(plate,decimal-leading-zero);
  font-family:var(--serif);font-variation-settings:"opsz" 18;
  font-style:italic;font-size:.86em;letter-spacing:0;
  color:var(--muted);opacity:.85;
  margin-right:.7em;
  white-space:nowrap;
}
figure[data-plate] figcaption::before{
  content:"Photograph " counter(plate,decimal-leading-zero) ". " attr(data-plate);
}
/* On the hero the caption is one long line; the plate sits inside
   the same measure rather than above it, so the rhythm is unbroken. */
.hero-plate figcaption::before{display:inline}
/* The hero caption puts its text inside a .wrap so it returns to the
   text column while the picture stays full bleed. The plate was set
   on the figcaption itself, which is the full-bleed element, so it
   printed at the screen edge instead of at the start of the sentence
   it belongs to. It goes on the wrap, where the words are. */
.hero-plate figcaption::before{content:none}
.hero-plate figcaption .wrap::before{
  content:"Photograph " counter(plate,decimal-leading-zero) "\00a0\00a0";
  font-family:var(--serif);font-variation-settings:"opsz" 18;
  font-style:italic;font-size:.9em;letter-spacing:0;
  color:var(--muted);opacity:.85;
}
.hero-plate figure[data-plate] figcaption .wrap::before,
figure.hero-plate[data-plate] figcaption .wrap::before{
  content:"Photograph " counter(plate,decimal-leading-zero) ". " attr(data-plate) "\00a0\00a0";
}
/* figure.hero-plate figcaption::before is (0,1,3); .hero-plate
   figcaption::before is (0,1,2), so the cancel lost and both plates
   printed. Matched selector, matched specificity. */
figure.hero-plate figcaption::before{content:none}

/* ============================================================
   THE BAR IS TWO CAPSULES AND A NAME
   ============================================================
   First, the regression: styling .nav-hide with display:inline-flex
   overrode the display:none that hides those links below 900px, so
   they reappeared on a phone and wrapped into two ragged rows. Any
   rule that sets display on an element which is conditionally
   hidden has to be scoped to the width where it is visible. That is
   the whole bug, and it is mine.

   Second, the decision: the three text links are gone from the bar
   at every width. They were the same destinations the menu already
   holds, printed twice, and a header that lists a site's contents
   beside a control that also lists them is not navigation, it is
   duplication with extra confidence.

   What is left is a name, one action, and one way in. Nothing on
   the row repeats anything else on the row. */
.nav-links .nav-hide{display:none}
@media (min-width:900px){
  .nav-links .nav-hide{display:none}
  .nav-cta{display:inline-flex}
}
@media (max-width:899px){
  .nav-cta{display:inline-flex;margin-left:8px;padding:10px 15px;font-size:14px;min-height:42px;border-radius:11px}
}
@media (max-width:479px){
  /* On the narrowest phones the action returns to the panel, where
     it is full width and easier to hit than a shrunken pill. */
  .nav-cta{display:none}
}

/* ============================================================
   THE STAGE: A DRAFTING GRID BEHIND THE OPENING
   ============================================================
   Not a texture and not a pattern. A floor plan is the drawing
   language of the thing this company sells, and the buyer already
   reads their own office in lines. So the grid is set the way a
   plan is set: a fine module, a heavier line every fifth one, and
   nothing else.

   Three rules keep it from becoming decoration:

   It fades. A real drawing does not run edge to edge underneath a
   headline, so the grid is masked to fall away toward the text and
   toward the foot of the section. The mask is doing the design
   work; the lines are just lines.

   It is quieter than the hairline used anywhere else. If a reader
   notices it before they notice the sentence, it has failed. The
   test is whether you can see it when you look for it and not when
   you are reading.

   It is behind everything and touches nothing. z-index 0 under
   content at z-index 1, pointer-events none, and it is removed for
   print, where a grid is just toner. */
.hero{position:relative;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  --g:74px;          /* the module */
  --l:rgba(20,26,36,.055);
  --L:rgba(20,26,36,.085);
  background-image:
    repeating-linear-gradient(to right,  var(--L) 0 1px, transparent 1px var(--g)),
    repeating-linear-gradient(to bottom, var(--L) 0 1px, transparent 1px var(--g)),
    repeating-linear-gradient(to right,  var(--l) 0 1px, transparent 1px calc(var(--g) / 5)),
    repeating-linear-gradient(to bottom, var(--l) 0 1px, transparent 1px calc(var(--g) / 5));
  -webkit-mask-image:radial-gradient(120% 90% at 78% 18%, #000 0%, rgba(0,0,0,.55) 42%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 78% 18%, #000 0%, rgba(0,0,0,.55) 42%, transparent 78%);
}
.hero > *{position:relative;z-index:1}

/* On dark the same lines have to be lighter than the ground rather
   than darker, and fainter again: a bright line on a dark field
   reads about twice as strongly as its opacity suggests. */
:root[data-theme="dark"] .hero::before{
  --l:rgba(236,234,229,.045);
  --L:rgba(236,234,229,.07);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero::before{
    --l:rgba(236,234,229,.045);
    --L:rgba(236,234,229,.07);
  }
}
/* The phone gets a smaller module, or the grid reads as three big
   boxes rather than as a plan. */
@media (max-width:719px){
  .hero::before{--g:56px;
    -webkit-mask-image:radial-gradient(130% 70% at 62% 12%, #000 0%, rgba(0,0,0,.5) 45%, transparent 80%);
    mask-image:radial-gradient(130% 70% at 62% 12%, #000 0%, rgba(0,0,0,.5) 45%, transparent 80%);}
}
@media print{.hero::before{display:none}}
/* The first mask was centred near the text, which put the grid at
   full strength directly under the headline: graph paper, not a
   stage. A stage is the thing around the performer, not the thing
   printed on them. The mask now peaks in the empty quarter to the
   right and falls to nothing across the text column, so the grid
   describes the space the words are standing in and never crosses
   into them. Lines dropped by roughly a third again: the test is
   that you can find it when you look and not when you read. */
.hero::before{
  --l:rgba(20,26,36,.038);
  --L:rgba(20,26,36,.06);
  -webkit-mask-image:
    radial-gradient(95% 120% at 88% 46%, #000 0%, rgba(0,0,0,.7) 34%, transparent 72%),
    linear-gradient(to right, transparent 0%, transparent 34%, #000 62%);
  mask-image:
    radial-gradient(95% 120% at 88% 46%, #000 0%, rgba(0,0,0,.7) 34%, transparent 72%),
    linear-gradient(to right, transparent 0%, transparent 34%, #000 62%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
:root[data-theme="dark"] .hero::before{
  --l:rgba(236,234,229,.03);
  --L:rgba(236,234,229,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero::before{
    --l:rgba(236,234,229,.03);
    --L:rgba(236,234,229,.05);
  }
}
@media (max-width:719px){
  /* On a phone the text fills the width, so there is no empty
     quarter to stand the grid in. It sits low, under the button,
     where nothing is written. */
  .hero::before{--g:52px;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, transparent 52%, #000 88%);
    mask-image:linear-gradient(to bottom, transparent 0%, transparent 52%, #000 88%);
    -webkit-mask-composite:source-over;mask-composite:add;}
}

/* ============================================================
   ONE SCREEN, ONE GLANCE, ONE OF EACH THING
   ============================================================
   Three faults, one cause: the panel was carrying things the bar
   already carries, and the extra height was what forced a scroll
   onto a screen whose whole promise was that it does not scroll.

   The trial button is in the bar at every width now, so the copy
   of it inside the panel is deleted. It was the same duplication
   the desktop text links had, and it cost about 90px of the only
   screen height there is.

   The sentence under the mark goes too. It was a good line and it
   was in the wrong place: a menu is a place people pass through,
   not a place they read, and it was buying nothing at the price of
   a row of the list.

   The slab now holds one thing, which is what it was always for. */
.nav-cta{display:inline-flex}
@media (max-width:479px){
  .nav-cta{display:inline-flex;padding:9px 13px;font-size:13.5px;margin-left:6px}
  .brand{font-size:clamp(21px,6.4vw,26px)}
}
@media (max-width:719px){
  .menu-panel .menu-cta{display:none}
  .mh-line{display:none}
  .menu-head{padding:2px 15px 18px}
  .menu-panel .menu-list a{padding:13px 15px}
  .ml-t{font-size:clamp(19px,5vw,23px)}
  .menu-foot{padding:13px 14px 14px}
  .menu[open] > .menu-panel{
    padding-top:calc(58px + env(safe-area-inset-top,0px) + 8px);
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  }
}

/* ============================================================
   THE LINES MOVE LIKE WATER
   ============================================================
   A displacement map, not an animation. The grid is passed through
   a low-frequency turbulence field and pushed a few pixels, which
   is what a ruled line looks like through a shallow depth of water
   or drawn by a hand instead of a plotter. Straight enough to read
   as a plan, bent enough that the eye registers something is alive
   in it without being able to say what.

   The frequency is deliberately uneven, .0055 across and .011
   down, so the waves are wider than they are tall. Equal frequency
   in both axes gives a rippled bathroom-glass look, which is a
   texture. Wider than tall reads as water lying still.

   Scale 7 is the whole judgement. At 3 nothing happens. At 15 the
   grid stops being a grid and becomes a pattern, and a floor plan
   that wobbles is a floor plan nobody trusts. */
.hero::before{filter:url(#ripple)}

/* Safari on iOS has historically dropped SVG filters on pseudo
   elements under memory pressure and simply renders nothing. A
   missing grid is fine; a missing grid that took the background
   with it is not, which is why the filter is the only thing this
   rule sets. */
@supports not (filter:url(#ripple)){.hero::before{filter:none}}
@media print{.hero::before{filter:none}}

/* ============================================================
   THE PANEL IS INFORMATION. THE BAR IS THE ACTION.
   ============================================================
   The trial button was hidden inside the panel only below 720px,
   so between 720 and 900 it appeared twice on one screen. Scoping
   a removal to a breakpoint when the reason for removing it has
   nothing to do with width is how that happens.

   The plus now means one thing and can be described in one
   sentence: everywhere else on this site. No action lives behind
   it, so nothing behind it competes with the button beside it. */
.menu-panel .menu-cta{display:none}

/* ============================================================
   THE APPEARANCE CONTROL STOPS ANNOUNCING ITSELF
   ============================================================
   A segmented control on a raised slab is the visual weight of a
   primary feature, and this is a preference most people will never
   touch. It was the loudest object on a screen whose subject is
   calm, and the eye went to it before the list.

   It becomes what it should have been: a line of small words with
   the current one in the ink and the others stepped back. No slab,
   no pill, no fill, no shadow. It reads as a footnote, which is
   the correct rank for it, and it is still one tap. */
.menu-foot{
  background:none;border:0;border-radius:0;
  border-top:1px solid var(--hair);
  padding:14px 15px 4px;margin-top:auto;
}
.appear{display:flex;align-items:baseline;gap:12px;margin:0;padding:0;border:0}
.appear-l{
  margin:0;font-size:13.5px;color:var(--muted);white-space:nowrap;
  font-family:var(--serif);font-style:italic;
}
.appear-seg{
  display:flex;gap:0;background:none;border:0;padding:0;
  border-radius:0;
}
.appear-seg button{
  background:none;border:0;box-shadow:none;
  padding:6px 10px;min-height:36px;
  font-size:13.5px;font-weight:500;color:var(--muted);
  border-radius:7px;
  transition:color .3s cubic-bezier(.16,1,.3,1);
}
.appear-seg button:hover{color:var(--ink)}
.appear-seg button[aria-checked="true"]{
  background:none;box-shadow:none;
  color:var(--ink);font-weight:600;
}
/* The only marker: a short rule under the chosen one. Quieter than
   a filled pill and unambiguous, which is all a marker owes. */
.appear-seg button{position:relative}
.appear-seg button[aria-checked="true"]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:6px;
  height:1.5px;background:var(--blue);border-radius:2px;
}
@media (min-width:720px){
  .menu-foot{order:2;padding:12px 12px 2px;margin-top:6px}
  .appear{gap:8px}
  .appear-seg button{padding:5px 8px;font-size:13px;min-height:32px}
  .appear-seg button[aria-checked="true"]::after{left:8px;right:8px;bottom:4px}
}
/* The controls measured 1px above the mark's centre and still read
   high, because the mark is bottom-heavy: Zen carries its mass at
   cap height and GARDEN adds a second band of ink below it, so the
   optical centre sits lower than the box centre. Three pixels is
   the whole correction, and it is the difference between three
   objects on a row and one group of three. */
.nav-links{transform:translateY(3px)}
@media (max-width:479px){.nav-links{transform:translateY(2px)}}

/* Two rules, ~36px apart, with one short row between them: the foot's
   border-top and the panel's own bottom edge. That is the notebook
   problem again in miniature, and the answer is the one already
   settled for the list. Space, not lines. */
.menu-foot{border-top:0;padding-top:18px;margin-top:auto}
@media (min-width:720px){.menu-foot{padding-top:14px;margin-top:4px}}

/* In dark mode header::after and .hero's border-top both draw at the
   same y, so the single edge between the bar and the page was being
   painted twice, at double strength. The header owns that edge; the
   hero only needs its lower one. */
:root[data-theme="dark"] .hero,
.dark:not(section) .hero{border-top:0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero{border-top:0}
}

/* Regression: 18px of padding on the foot pushed the panel past the
   viewport and the one-screen promise broke again. The space between
   the list and the appearance row was already there as auto margin. */
@media (max-width:719px){.menu-foot{padding-top:8px;padding-bottom:10px}}

/* ============================================================
   TATAMI, NOT GRAPH PAPER
   ============================================================
   The grid becomes a field of soft-cornered squares. It is a
   better idea than the one it replaces for a reason worth keeping:
   a line grid is a drawing OF a floor, and rounded tiles ARE a
   floor. Tatami, or the flagstones of an actual garden. The
   drafting reference was a step removed from the thing; this is
   the thing.

   Built as a mask rather than a background image, so the colour
   still comes from a custom property and still flips with the
   theme. The tile mask and the fade mask are intersected, which is
   what lets one shape repeat while the other decides where it is
   allowed to be seen.

   The water goes. A ripple bends straight lines beautifully and
   makes a rounded corner look wobbly rather than soft, which is
   the opposite of the point. Softness is now in the geometry
   instead of in a filter, which is also one less full-viewport
   raster. */
.hero::before{
  filter:none;
  --tile:78px;
  --grid-ink:rgba(20,26,36,.052);
  background-image:none;
  background-color:var(--grid-ink);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Crect x='5' y='5' width='68' height='68' rx='17' ry='17' fill='none' stroke='%23000' stroke-width='1.15'/%3E%3C/svg%3E"),
    radial-gradient(95% 120% at 88% 46%, #000 0%, rgba(0,0,0,.72) 34%, transparent 74%),
    linear-gradient(to right, transparent 0%, transparent 32%, #000 60%);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Crect x='5' y='5' width='68' height='68' rx='17' ry='17' fill='none' stroke='%23000' stroke-width='1.15'/%3E%3C/svg%3E"),
    radial-gradient(95% 120% at 88% 46%, #000 0%, rgba(0,0,0,.72) 34%, transparent 74%),
    linear-gradient(to right, transparent 0%, transparent 32%, #000 60%);
  -webkit-mask-size:var(--tile) var(--tile), 100% 100%, 100% 100%;
  mask-size:var(--tile) var(--tile), 100% 100%, 100% 100%;
  -webkit-mask-repeat:repeat, no-repeat, no-repeat;
  mask-repeat:repeat, no-repeat, no-repeat;
  -webkit-mask-composite:source-in, source-in;
  mask-composite:intersect, intersect;
}
:root[data-theme="dark"] .hero::before{--grid-ink:rgba(236,234,229,.05)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero::before{--grid-ink:rgba(236,234,229,.05)}
}
@media (max-width:719px){
  .hero::before{--tile:62px;
    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Crect x='5' y='5' width='68' height='68' rx='17' ry='17' fill='none' stroke='%23000' stroke-width='1.15'/%3E%3C/svg%3E"),
      linear-gradient(to bottom, transparent 0%, transparent 50%, #000 86%);
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Crect x='5' y='5' width='68' height='68' rx='17' ry='17' fill='none' stroke='%23000' stroke-width='1.15'/%3E%3C/svg%3E"),
      linear-gradient(to bottom, transparent 0%, transparent 50%, #000 86%);
    -webkit-mask-size:var(--tile) var(--tile), 100% 100%;
    mask-size:var(--tile) var(--tile), 100% 100%;
    -webkit-mask-repeat:repeat, no-repeat;
    mask-repeat:repeat, no-repeat;
    -webkit-mask-composite:source-in;
    mask-composite:intersect;}
}
/* transform on .nav-links created a containing block for fixed
   descendants, so the full-screen menu inside it resolved against an
   80px nav rather than the viewport and the panel collapsed. This is
   the second time a promotion hint has done this on this header; the
   first was will-change on the bar itself.
   Relative positioning moves the row by the same 3px and creates no
   containing block, so nothing inside it is affected. */
.nav-links{transform:none;position:relative;top:3px}
@media (max-width:479px){.nav-links{top:2px}}

/* ============================================================
   THE PLAN REPLACES THE PATTERN
   ============================================================
   A field of identical tiles is wallpaper, and no amount of
   refinement changes that: every element being the same is what
   makes it read as texture rather than as architecture. Premium
   comes from composition, which means fewer things, placed, at a
   size that asserts they were decided.

   So the tile mask is retired and the hero is backed by a drawn
   plan. Six rooms of six different sizes, and one of them filled.
   The filled one is the Zen Garden. The sentence next to it says a
   reset room built inside a working office floor, and now the page
   shows that before it is read.

   Everything about its restraint is deliberate. It occupies only
   the empty right of the composition, it never crosses the text
   column, its strokes are lighter than any hairline on the site,
   and the accented room is the palest use of the blue anywhere. If
   a reader notices it before the headline, it has failed. */
.hero::before{content:none}
.hero-plan{
  position:absolute;top:50%;right:-3%;
  width:min(52%,660px);height:auto;
  transform:translateY(-50%);
  z-index:0;pointer-events:none;
  overflow:visible;
}
.hp-rooms rect{
  fill:none;
  stroke:rgba(20,26,36,.085);
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
}
.hp-zen{
  fill:rgba(42,74,168,.055);
  stroke:rgba(42,74,168,.22);
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
}
:root[data-theme="dark"] .hp-rooms rect{stroke:rgba(236,234,229,.075)}
:root[data-theme="dark"] .hp-zen{fill:rgba(147,169,226,.07);stroke:rgba(147,169,226,.26)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-rooms rect{stroke:rgba(236,234,229,.075)}
  :root:not([data-theme="light"]) .hp-zen{fill:rgba(147,169,226,.07);stroke:rgba(147,169,226,.26)}
}
/* On a phone the text fills the width, so the plan drops below the
   button where nothing is written, and shrinks so it reads as a
   plan rather than as two large boxes. */
@media (max-width:719px){
  .hero-plan{
    top:auto;bottom:2%;right:-14%;
    width:82%;transform:none;
    opacity:.9;
  }
}
@media print{.hero-plan{display:none}}
/* The plan was sized to the section rather than to the space the
   section actually leaves, so it ran past the fold and the accented
   room, which is the entire point of the drawing, was outside the
   viewport. A plan that cannot be seen whole is not a plan.

   It now sits in the quadrant the composition genuinely leaves
   empty: below the headline, right of the button. Smaller, fully
   contained, and every one of the six rooms visible at once, which
   is the only way the filled one reads as one room among several. */
.hero-plan{
  top:auto;bottom:8%;right:5%;
  width:min(34%,430px);
  transform:none;
}
@media (max-width:1100px){.hero-plan{width:min(38%,380px);bottom:6%;right:3%}}
@media (max-width:719px){
  .hero-plan{bottom:3%;right:-6%;width:74%;opacity:.92}
}
/* .hero contains the photograph as well as the words, so bottom:8%
   of the hero put the plan behind the picture and the section edge
   sliced it in half. That is the unfinished look: a drawing cut by
   something that is not part of the drawing.

   It is anchored to the text block instead, which is the box that
   actually ends where the words end. The plan now sits beside the
   opening, whole, with air under it. */
.hero .hero-inner{position:relative}
.hero-plan{
  position:absolute;
  top:auto;bottom:-6%;right:-2%;
  width:min(40%,400px);
  transform:none;
}
@media (max-width:1100px){.hero-plan{width:min(44%,340px);bottom:-4%;right:-1%}}
@media (max-width:719px){
  .hero-plan{position:relative;bottom:auto;right:auto;
    width:78%;margin:26px 0 0 auto;display:block;opacity:.9}
}

/* ============================================================
   THE OPENING, SPACED BY RELATIONSHIP
   ============================================================
   Proximity is the only thing on a page that states relationship
   without words. Three elements at 40, 27 and 32 apart are three
   items in a list, and that is what the hero was saying: headline,
   lede and button, all equally related to each other.

   They are not. The headline and the lede are one thought, a claim
   and the sentence that earns it. The button is a separate act,
   taken after the thought lands. So the gaps are now graduated
   against a single unit rather than chosen one at a time:

     curtain up   3u   above the first line, because an opening
                       line needs air before it more than after
     claim        1u   headline to lede: one thought, held close
     act          2.4u lede to button: a decision, set apart
     the room     6u   below the group, before the photograph

   One unit, four multiples, and every distance on the screen is
   now a statement about what belongs to what. The largest space is
   below the whole group, which is what makes it read as a group
   rather than as the top of a longer column. */
.hero .hero-inner{
  --u:clamp(15px, 1.55vw, 22px);
  padding-top:calc(var(--u) * 3);
  padding-bottom:calc(var(--u) * 6);
}
.hero h1{margin-bottom:calc(var(--u) * 1)}
.hero .hero-lede{margin-top:0;margin-bottom:calc(var(--u) * 2.4)}
.hero .hero-inner .btn{margin-top:0}

/* The plan begins where the supporting text begins, not where the
   section begins. The headline stands alone; everything under it
   has the drawing beside it. That is a composition rather than two
   things that happen to share a row. */
.hero-plan{
  top:auto;
  bottom:calc(var(--u) * 1.2);
  right:-2%;
}
@media (max-width:719px){
  .hero .hero-inner{padding-bottom:calc(var(--u) * 2)}
  .hero-plan{bottom:auto}
}
/* bottom was measured from the inner box's edge, and that box now
   carries 6u of padding below the button, so the plan sat inside the
   padding and ran under the photograph. Setting bottom to the same 6u
   puts its lower edge exactly on the content edge, which means the
   plan's bottom line and the button's bottom line are the same line.
   An alignment, rather than a value that happened to look right. */
.hero-plan{bottom:calc(var(--u) * 6)}
/* --u was declared on .hero-inner but the plan is a sibling of it,
   inside .wrap, so the variable never reached the element that needed
   it and every calc() using it was invalid. An undefined variable in
   a calc silently kills the whole declaration, which is the same
   quiet failure mode as the transparent panel earlier. The unit
   belongs on the section, where everything in the hero can see it. */
.hero{--u:clamp(15px, 1.55vw, 22px)}
.hero .hero-inner{--u:clamp(15px, 1.55vw, 22px)}
.hero .wrap{position:relative}
.hero-plan{
  position:absolute;
  bottom:calc(var(--u) * 6);
  right:-2%;
  top:auto;
  width:min(40%,400px);
}
@media (max-width:1100px){.hero-plan{width:min(44%,340px);right:-1%}}
@media (max-width:719px){
  .hero-plan{position:relative;bottom:auto;right:auto;top:auto;
    width:78%;margin:22px 0 0 auto}
}

/* ============================================================
   THE PLAN GAINS ITS ARCHITECTURAL VOCABULARY
   ============================================================
   Darker, and given the two pieces of notation that do actual
   work rather than decorate.

   LINE WEIGHT. On a real plan the walls of the space being
   designed are drawn heavier than everything around them. That
   hierarchy is the whole reason a plan is readable without a key,
   so the surrounding rooms stay thin and the Zen Garden is drawn
   at nearly double.

   THE LABEL. An architect names the room inside it, in small
   letterspaced capitals. Writing ZEN GARDEN in that room tells a
   reader what they are looking at without a caption, and it is the
   only place on this page where the product is named inside a
   picture rather than beside one.

   THE DOOR. A quarter arc with a leaf is how a plan draws a door
   standing open. The page says the room is open the way the
   cafeteria is open; this is the same claim in the language the
   buyer's own architect would use. It is notation, not ornament:
   remove it and the drawing loses an argument, not a flourish. */
.hp-rooms rect{
  stroke:rgba(20,26,36,.16);
  stroke-width:1.1;
}
.hp-zen{
  fill:rgba(42,74,168,.07);
  stroke:rgba(42,74,168,.42);
  stroke-width:1.9;
}
.hp-label{
  fill:rgba(42,74,168,.62);
  font-family:var(--sans);
  font-size:15px;font-weight:600;
  letter-spacing:2.4px;
}
.hp-door path{
  stroke:rgba(42,74,168,.38);
  stroke-width:1.5;
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
}
:root[data-theme="dark"] .hp-rooms rect{stroke:rgba(236,234,229,.15)}
:root[data-theme="dark"] .hp-zen{fill:rgba(147,169,226,.1);stroke:rgba(147,169,226,.46)}
:root[data-theme="dark"] .hp-label{fill:rgba(147,169,226,.72)}
:root[data-theme="dark"] .hp-door path{stroke:rgba(147,169,226,.44)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-rooms rect{stroke:rgba(236,234,229,.15)}
  :root:not([data-theme="light"]) .hp-zen{fill:rgba(147,169,226,.1);stroke:rgba(147,169,226,.46)}
  :root:not([data-theme="light"]) .hp-label{fill:rgba(147,169,226,.72)}
  :root:not([data-theme="light"]) .hp-door path{stroke:rgba(147,169,226,.44)}
}
/* Dropped a little, so the plan sits under the headline's weight
   rather than beside its second line. */
.hero-plan{bottom:calc(var(--u) * 3.4)}

/* The door swing is gone. It was a good piece of notation and one
   voice too many: the room already carries its name, and a label
   plus a symbol both saying "this is the room you enter" is the
   same sentence twice. The plan keeps the two things that are not
   duplicated anywhere, the name and the line weight. */
.hp-door{display:none}
/* PRECISE, NOT APPROXIMATE.
   right:-2% was a value that looked acceptable and aligned to
   nothing. The plan sits inside .hero .wrap, and the plus sits
   inside header .wrap, and both wraps share the same max-width and
   the same gutter. So right:var(--gut) puts the drawing's right
   edge on exactly the line the plus's right edge is on, which is
   also the site's right margin down the whole page.

   One line, three things on it: the control at the top, the
   drawing in the middle, and the margin every section respects. */
.hero-plan{right:var(--gut)}
@media (max-width:1100px){.hero-plan{right:var(--gut)}}
@media (max-width:719px){.hero-plan{right:auto}}

/* ============================================================
   THE PLAN IS A DESKTOP DEVICE. IT LEAVES THE PHONE.
   ============================================================
   It exists to occupy a void: on a wide screen the text column
   uses about half the width and the rest is empty, so a drawing
   that fills it earns its place. A phone has no such void. The
   text already spans the width, so the same drawing stops filling
   emptiness and starts manufacturing length, and it was pushing
   the photograph down behind a screenful of nothing.

   No void, no plan. This is not a compromise for small screens,
   it is the same rule applied honestly: the element was always
   conditional on the space existing. */
@media (max-width:719px){
  .hero-plan{display:none}
  .hero .hero-inner{padding-bottom:calc(var(--u) * 2.6)}
}

/* ============================================================
   MOBILE: THE PLAN AND THE ROOM, AS A PAIR
   ============================================================
   Restored, and given a different job from the one it has on a
   wide screen. On desktop the plan fills a void beside the text.
   Here there is no void, so instead it becomes the first half of a
   pair: the drawing, then the photograph of the thing drawn.

   That ordering is the argument the page makes anyway. A plan is
   what a buyer is shown before a room exists; a photograph is what
   exists. Putting them one above the other, close, says both in
   the order they happen.

   The old failure was not the plan, it was the space around it: it
   sat 78% wide, right-aligned, with a screenful of nothing beneath
   it before the picture. Close that gap and the two become one
   object instead of two stranded ones.

   Desktop is not touched. Every rule here is inside the query. */
@media (max-width:719px){
  .hero-plan{
    display:block;
    position:relative;
    right:auto;bottom:auto;top:auto;
    width:100%;max-width:none;
    margin:calc(var(--u) * 2.2) 0 0;
    opacity:1;
  }
  /* Small, because the pair is what matters, not the drawing. The
     photograph is the one that has to be looked at. */
  .hero .hero-inner{padding-bottom:calc(var(--u) * 1.1)}
  .hp-rooms rect{stroke-width:1.25}
  .hp-label{font-size:17px;letter-spacing:2.6px}
}

/* ============================================================
   THE PLATE MARK, PROPERLY JOINED
   ============================================================
   It was italic serif running into bold sans across two blank
   spaces: two faces, two styles, and nothing but whitespace doing
   the work of a join. Whitespace can separate two things; it
   cannot relate them.

   Three changes, each one a join rather than a gap.

   A rule instead of a space. A short hairline after the number
   ties it to the sentence the way a plate line in a book is tied
   to its caption, and it gives the eye somewhere to travel.

   Oldstyle figures. Newsreader carries them, and 01 set as
   oldstyle sits on the x-height rather than standing at cap
   height, so a small number stops shouting next to a capital A.

   And it is set on the baseline of the sentence it introduces,
   not floated above it, because a plate number is part of the
   caption rather than a heading over it. */
figure.shot figcaption::before,
.hero-plate figcaption .wrap::before{
  font-variant-numeric:oldstyle-nums;
  font-feature-settings:"onum" 1;
  font-style:italic;
  font-size:.82em;
  letter-spacing:.005em;
  color:var(--muted);
  opacity:1;
  margin-right:0;
}
/* The hairline that joins the number to the words. Drawn as a
   border on a second pseudo element so it can sit at the optical
   middle of the line rather than on the baseline. */
figure.shot figcaption,
.hero-plate figcaption .wrap{position:relative}
figure.shot figcaption::after,
.hero-plate figcaption .wrap::after{content:none}
figure.shot figcaption::before{
  content:"Photograph " counter(plate,decimal-leading-zero) "\00a0\00b7\00a0\00a0";
}
.hero-plate figcaption .wrap::before{
  content:"Photograph " counter(plate,decimal-leading-zero) "\00a0\00b7\00a0\00a0";
}
/* Measuring the mark's box gave the wrong centre. GARDEN is set in
   capitals, so its line box carries a descender space no letter in it
   ever uses, and that empty space dragged the computed centre down.
   The controls were aligned to a middle that the ink does not have.
   Aligning to the ink instead means dropping them further than the
   arithmetic asked for. */
.nav-links{top:6px}
@media (max-width:479px){.nav-links{top:4px}}

/* The Z came off as attitude rather than calm. The cause is weight,
   not height: a capital at 620 next to lowercase at the same weight
   has more stem and more contrast than the letters beside it, so it
   asserts. Dropped to 560 the Z quiets down and the word settles,
   and the cap height is untouched, which matters because shrinking
   the capital would have broken its relationship to GARDEN below. */
.brand b .z{font-weight:560;letter-spacing:.01em}
:root[data-theme="dark"] .brand b .z,
.dark .brand b .z,.hero .brand b .z,footer.site .brand b .z{font-weight:600}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z{font-weight:600}
}
/* Fatter, but not sharper. Weight alone would have brought the
   attitude back, because in a high-contrast face more weight mostly
   thickens the thick strokes and leaves the hairlines thin, which is
   what makes a letter look severe. Dropping the optical size at the
   same time thickens the HAIRLINES and blunts the serifs, so the
   letter gains mass evenly. Weight 560 to 680, opsz 16 to 11: more
   muscle, less edge. */
.brand b .z{
  font-weight:680;
  font-variation-settings:"opsz" 11;
  letter-spacing:.008em;
}
.brand b .g{
  font-weight:680;
  font-variation-settings:"opsz" 11;
}
:root[data-theme="dark"] .brand b .z,
.dark .brand b .z,.hero .brand b .z,footer.site .brand b .z{font-weight:710}
:root[data-theme="dark"] .brand b .g,
.dark .brand b .g,.hero .brand b .g,footer.site .brand b .g{font-weight:710}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z,
  :root:not([data-theme="light"]) .brand b .g{font-weight:710}
}
/* Thicker again, and this is close to the top of what the face has:
   Newsreader runs to 800. 770 with opsz 10 puts real mass in the
   stems while the low optical size keeps the hairlines from thinning
   out underneath it, which is what stops heavy from becoming brittle.

   GARDEN goes with it. If the capital line stayed lighter under a
   heavy Zen the two would read as different marks rather than one,
   and the whole point of the stack is that they are one object. */
.brand b .z,.brand b .g{
  font-weight:770;
  font-variation-settings:"opsz" 10;
}
.brand b .z{letter-spacing:.004em}
.brand b .g{letter-spacing:.175em;margin-right:-.175em}
:root[data-theme="dark"] .brand b .z,
:root[data-theme="dark"] .brand b .g,
.dark .brand b .z,.dark .brand b .g,
.hero .brand b .z,.hero .brand b .g,
footer.site .brand b .z,footer.site .brand b .g{font-weight:790}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z,
  :root:not([data-theme="light"]) .brand b .g{font-weight:790}
}
/* The e and the n were being crowded, and the cause is the weight I
   just added. As a face gets heavier its counters close and its
   sidebearings shrink, so heavy settings need MORE tracking than
   light ones, not less. I went to 770 and left the tracking at
   .004em, which is a light setting's value.

   .026em gives the two lowercase letters their own air, and the
   effect is that they stop looking like they are sheltering behind
   the Z and start holding the line with it. */
.brand b .z{letter-spacing:.026em}
/* 770 at opsz 10 with .026em tracking is a sportswear setting: very
   heavy, low contrast, wide. It reads warm and informal, which is
   the wrong register for a company selling infrastructure to a CFO.

   Seriousness in a serif is not mass, it is contrast and restraint.
   So the weight comes back to 700, which is still unmistakably bold,
   the optical size goes up to 15 so the hairlines return and the
   letter regains its thick-thin, and the tracking closes to .012em.
   Substantial, but composed. */
.brand b .z,.brand b .g{
  font-weight:700;
  font-variation-settings:"opsz" 15;
}
.brand b .z{letter-spacing:.012em}
.brand b .g{letter-spacing:.185em;margin-right:-.185em}
:root[data-theme="dark"] .brand b .z,
:root[data-theme="dark"] .brand b .g,
.dark .brand b .z,.dark .brand b .g,
.hero .brand b .z,.hero .brand b .g,
footer.site .brand b .z,footer.site .brand b .g{font-weight:730}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z,
  :root:not([data-theme="light"]) .brand b .g{font-weight:730}
}

/* ============================================================
   THE HEADER ACTION STEPS BACK SO THE NAME CAN LEAD
   ============================================================
   A filled blue button beside a blue wordmark is two claims on the
   same colour, and the filled one wins every time. That was the
   cost of giving the mark the accent, and it has arrived.

   The resolution is not to take the blue off the mark. It is to
   notice that this button is not the page's primary call. The
   primary call is filled, in the hero, where the argument is made,
   and again in the dock that follows the reader down. The header's
   copy is a persistent shortcut for somebody who has already
   decided, and a shortcut does not need to shout.

   So it becomes an outlined capsule: blue text, blue rule, no
   fill. Still unmistakably the action, still the only other blue
   object, but now the name is the heaviest thing on the row and
   the button is the second thing you see rather than the first.

   The hero and the dock are untouched. */
.nav-cta{
  background:none;
  color:var(--blue);
  border:1.5px solid var(--blue);
  box-shadow:none;
  font-weight:600;
}
.nav-cta:hover{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}
:root[data-theme="dark"] .nav-cta,
.dark .nav-cta,.hero .nav-cta{color:var(--blue-lt);border-color:var(--blue-lt);background:none}
:root[data-theme="dark"] .nav-cta:hover{background:var(--blue-lt);color:#0B0F16}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nav-cta{color:var(--blue-lt);border-color:var(--blue-lt);background:none}
  :root:not([data-theme="light"]) .nav-cta:hover{background:var(--blue-lt);color:#0B0F16}
}
/* Same proportions, more of them. Only the container's font-size
   changes, and because every part of the mark is expressed in em
   against it, the weight relationship, the tracking, the cap
   alignment and the gap between the two lines all scale together
   rather than needing to be re-decided. That is the whole reason
   the mark was built on one number. */
.brand{font-size:clamp(27px,2.95vw,36px)}
@media (max-width:719px){.brand{font-size:clamp(24px,7.6vw,30px)}}

/* ============================================================
   THE SCROLLED HEADER WAS LIGHT IN DARK MODE
   ============================================================
   header.site.is-moved set background:rgba(247,246,243,.90), which
   is the paper colour written as a literal because it needed an
   alpha and a hex custom property cannot carry one. In dark mode
   that painted a light bar under light text, and the whole header
   washed out the moment the page was scrolled.

   The contrast audit never caught it because the audit measures at
   scroll position zero, where this class is not applied. A state
   that only exists after an interaction is a state no static check
   will ever see, which is worth remembering for every other one.

   Fixed with a proper variable per theme, so the bar is a decision
   in both rather than a literal that happened to suit one. */
:root{--bar:rgba(247,246,243,.92)}
:root[data-theme="dark"]{--bar:rgba(14,18,24,.92)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bar:rgba(14,18,24,.92)}
}
header.site.is-moved{background:var(--bar)}
@supports not (backdrop-filter:blur(2px)){
  header.site.is-moved{background:var(--paper)}
}

/* THE TWO PILLS ON ONE AXIS.
   They were sized by different rules, so their heights and their
   optical centres drifted apart. Both are now the same height and
   both centre on it, which is the only way two adjacent capsules
   ever look deliberate. */
/* Sized against the mark, 5 August. Both were 44px tall beside a
   wordmark whose cap height is 25px, so the bar read as three items
   of equal rank and the mark stopped being the mark. At 36 the
   wordmark is the tallest thing in the header again, which is the
   whole job of a header. Still a comfortable pointer target, and the
   small-screen rules below keep the larger target for thumbs. */
.nav-cta,.menu > summary{
  height:36px;min-height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;
}
.nav-cta{padding:0 15px;font-size:13.5px;border-radius:9px}
.menu > summary{width:36px;padding:0;border-radius:9px}

/* An earlier small-screen rule still set the button to 42 while the
   control had gone to 40, so the pair was two pixels out of register
   on exactly the screens where they sit closest together. One rule
   now owns both dimensions on both objects. */

/* header.site .btn is (0,2,1) and .nav-links .nav-cta is (0,2,0), so
   the small-screen 42px kept winning. Matched through the same
   ancestor so the two capsules are finally sized by one rule. */

/* THE TWO LINES SQUARE UP.
   They were ragged: Zen measured 65.4 and GARDEN 69.1 at the same
   settings, so the block had no right edge and the mark looked
   unresolved rather than composed.

   Matching them by adding tracking to GARDEN was impossible, since
   it was already the wider of the two and tracking only widens. So
   the size solves it instead: at .339em with .16em tracking the
   capital line lands on Zen's width to within a pixel, and .16em
   is comfortable for capitals rather than the squeezed setting a
   forced fit would have needed.

   Weight also comes back from 700 to 660. At 36px the heavier
   setting was reading chunky, and the last of the cartoon smell is
   in that mass rather than in the shapes. */
.brand b .z,.brand b .g{font-weight:660}
.brand b .g{
  font-size:.339em;
  letter-spacing:.16em;
  margin-right:-.16em;
}
:root[data-theme="dark"] .brand b .z,
:root[data-theme="dark"] .brand b .g,
.dark .brand b .z,.dark .brand b .g,
.hero .brand b .z,.hero .brand b .g,
footer.site .brand b .z,footer.site .brand b .g{font-weight:690}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z,
  :root:not([data-theme="light"]) .brand b .g{font-weight:690}
}
/* THE EDGES.
   What reads as harsh here is serif shape, and that is governed by
   the optical axis rather than by weight. At opsz 15 Newsreader is
   still drawing a display-ish letter: long serifs, fine points,
   sharp entry and exit strokes. Those points are the edges.

   opsz 9 is the reading cut. Serifs shorten and blunt, the wedge
   at each terminal flattens, and the join between stem and serif
   fills in. Same letterforms, calmer edges, and at 660 the weight
   is low enough that the sturdier cut does not bring back the
   chunkiness of the 770 setting.

   The width relationship is unaffected: both lines move together
   because they share the axis value, so the block stays flush. */
.brand b .z,.brand b .g{font-variation-settings:"opsz" 9}
/* opsz 9 blunts the serifs, which is what fixed the edges, but it
   also thickens the hairlines, so holding weight at 660 on top of it
   compounded and the mark went fat. The two axes have to move in
   opposite directions: as the optical size drops the weight must
   drop with it, or you get the mass of a heavy setting and the low
   contrast of a small one at once, which is the definition of
   stodgy. 660 to 570, and the edges stay calm. */
.brand b .z,.brand b .g{
  font-weight:570;
  font-variation-settings:"opsz" 10;
}
:root[data-theme="dark"] .brand b .z,
:root[data-theme="dark"] .brand b .g,
.dark .brand b .z,.dark .brand b .g,
.hero .brand b .z,.hero .brand b .g,
footer.site .brand b .z,footer.site .brand b .g{font-weight:600}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z,
  :root:not([data-theme="light"]) .brand b .g{font-weight:600}
}
/* SHARP, AND ONLY HERE.
   The mark goes back up the optical axis to 26, where Newsreader
   draws crisp serifs, fine hairlines and clean sharp terminals.
   That is the confident cut. Weight sits at 620: enough to be
   strong, not so much that the sharpness turns into mass, which
   was the fault at opsz 9.

   The softness that remains is the face's own: Newsreader's
   terminals are cut with a slight bracket rather than a hard
   right angle, so the letter reads sharp without being brittle.
   That is the "very little soft corner" and it is drawn into the
   typeface rather than added on top.

   This axis value applies to the mark alone. Body text and
   headings keep their own optical sizes, which is the entire
   point of having the axis.

   SUPERSEDED 6 August 2026: this block still set opsz 26 directly on
   .z and .g, one class more specific than ".brand b{opsz:10}" below,
   so it silently outranked the reading-cut fix regardless of source
   order. The header mark was never actually drawn at opsz 10; only
   the documents were. That is why "Z" kept its presence (the shape
   carries it) while "en" read thin and flat next to it: opsz 26 is
   still most of the way to the display cut's higher stroke contrast.
   opsz is inherited, so removing the property here lets .brand b's
   opsz 10 reach both letters, same as the documents. */
.brand b .z,.brand b .g{
  font-weight:620;
}
:root[data-theme="dark"] .brand b .z,
:root[data-theme="dark"] .brand b .g,
.dark .brand b .z,.dark .brand b .g,
.hero .brand b .z,.hero .brand b .g,
footer.site .brand b .z,footer.site .brand b .g{font-weight:660}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z,
  :root:not([data-theme="light"]) .brand b .g{font-weight:660}
}

/* THE COMMITMENTS ROW PUSHED THE PAGE 62px WIDE ON A PHONE.
   grid-template-columns:auto 1fr looks safe and is not: a 1fr track
   has an automatic MINIMUM, so content wider than the track expands
   the grid instead of wrapping inside it. The prose in the second
   column carries max-width:56ch, which at this size is wider than a
   390px screen, so the row grew and took the whole document with it.

   minmax(0,1fr) gives the track permission to be smaller than its
   content, which is what makes the text wrap. This is the single
   most common cause of horizontal overflow in CSS grid and it is
   invisible until something inside is long enough to prove it. */
.commit-row{grid-template-columns:auto minmax(0,1fr)}
.commit-what,.commit-why{max-width:min(56ch,100%)}
/* There are two shapes of .commit-row in this estate: one with a
   number and a body, one with a statement and an attribution. My
   minmax(0,1fr) fixed the first and broke the second, collapsing its
   second column to 0px while the content needed 74. Two columns of
   prose do not belong side by side on a 390px screen at all, so
   below the breakpoint they stack, which is what the original base
   rule did before a later rule overrode it at every width. */
@media (max-width:719px){
  .commit-row{grid-template-columns:1fr;gap:6px}
  .commit-who{padding-top:2px}
}

/* ============================================================
   ONE DARK BLUE, NOT TWO
   ============================================================
   The mark resolved to --blue-lt down the [data-theme="dark"]
   path and to --blue down the prefers-color-scheme path, so the
   identity was one colour if you toggled it and a different one
   if your phone was already dark. Nobody would ever see both, and
   that is exactly why it could sit there: a brand inconsistency
   invisible to the person who has it.

   In dark mode --blue is ALREADY the light blue, because the whole
   palette flips. So --blue is correct on both paths and --blue-lt
   was the mistake, not the other way round. Stated once here for
   every element that was carrying the split. */
:root[data-theme="dark"] .brand b .z,
:root[data-theme="dark"] .mh-mark .z{color:var(--blue)}

/* ============================================================
   THE DEFINITION LINE
   ============================================================
   The opening said what is true of the room before it said what
   the room is. "Nobody has to be persuaded to use it" is a strong
   sentence and it is unreadable to somebody who has not yet been
   told what "it" is.

   So the first prose on the page is now a definition, and the
   argument follows it. It sits between the headline and the lede
   in size and weight: heavier than the argument because it is the
   thing, lighter than the headline because the headline is still
   the hook. The name is bolded inside it, which is the only place
   on the page where the product is named in running text. */
.hero-def{
  margin:calc(var(--u) * 1.1) 0 calc(var(--u) * .9);
  max-width:44ch;
  font-size:clamp(17px,1.55vw,20.5px);
  line-height:1.45;
  letter-spacing:-.004em;
  color:var(--ink);
  font-weight:450;
}
.hero-def b{font-weight:640;color:var(--blue)}
.hero .hero-lede{
  font-size:clamp(15px,1.15vw,16.5px);
  color:var(--muted);
  max-width:46ch;
}
:root[data-theme="dark"] .hero-def{color:var(--ink)}
:root[data-theme="dark"] .hero-def b{color:var(--blue)}
@media (max-width:719px){
  .hero-def{font-size:clamp(16.5px,4.4vw,19px);max-width:100%}
}
/* .hero p{color:var(--on-dark)} survives from when the hero was a
   dark band. It is (0,1,1) and .hero-def was (0,1,0), so the new
   definition inherited a colour meant for dark ground and rendered
   at 1.07:1 on paper. Matched through the section so the most
   important sentence on the page is actually legible. */
.hero .hero-def{color:var(--ink)}
.hero .hero-def b{color:var(--blue)}
:root[data-theme="dark"] .hero .hero-def{color:var(--ink)}
:root[data-theme="dark"] .hero .hero-def b{color:var(--blue)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero .hero-def{color:var(--ink)}
  :root:not([data-theme="light"]) .hero .hero-def b{color:var(--blue)}
}

/* THE SCOPE NOTE.
   Quiet by design. It is not a disclaimer hiding at the foot of a
   page, and it is not a headline either: it is a boundary stated
   plainly beside the thing it bounds. A supplier that names its own
   limit before being asked is the one a Head of People believes
   about everything else. */
.scope-note{padding:clamp(26px,3.4vw,40px) 0 0}
.scope-line{
  max-width:74ch;margin:0;
  padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid var(--hair);
  font-size:clamp(14.5px,1.15vw,16px);
  line-height:1.6;color:var(--muted);
}
.scope-line em{font-style:normal;font-weight:600;color:var(--ink)}

/* ============================================================
   THE ONE UNDERLINE ON THE SITE
   ============================================================
   "Permanent" is the word doing the differentiating. Everything
   else in this category is a pop-up, a wellness week or a one-day
   activation, and that single adjective is what separates the
   product from all of them. It deserves a mark of its own.

   Underline is normally forbidden on the web because it means
   link. Here it is free: every link on this site signals with
   COLOUR and carries text-decoration:none, so a rule under a word
   cannot be mistaken for one. The convention was available
   because the site had already spent its link signal elsewhere.

   Drawn rather than defaulted. The word stays ink so it is plainly
   not a link; the rule is the accent, which is the site's mark of
   consequence. Offset well clear of the baseline so the p's
   descender is not struck through, skip-ink on so it breaks
   cleanly around it, and 2px so it reads as deliberate at the
   sizes this line takes.

   It is used exactly once on the whole site. A second use would
   make it a style; one use makes it a point. */
.hero-def u.mk{
  text-decoration-line:underline;
  text-decoration-color:var(--blue);
  text-decoration-thickness:2px;
  text-underline-offset:5px;
  text-decoration-skip-ink:auto;
  font-weight:520;
  color:var(--ink);
}
:root[data-theme="dark"] .hero-def u.mk{text-decoration-color:var(--blue);color:var(--ink)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero-def u.mk{text-decoration-color:var(--blue);color:var(--ink)}
}
@media (max-width:719px){
  .hero-def u.mk{text-underline-offset:4px;text-decoration-thickness:1.8px}
}
/* GARDEN was set at 86% opacity, which put a third value into a
   two-word mark: the accent, the ink, and a washed grey that is
   neither. At this size the eye reads that as faded rather than as
   quiet, so the second line looked like a subtitle attached to the
   name instead of half of it.

   Full ink. The two words are now two deliberate colours, and the
   hierarchy is carried by size, case and tracking, which were doing
   that job already and did not need opacity's help.

   The band gap closes a little with it: at 8px the two lines were
   reading as stacked rather than locked. */
.brand b .g{opacity:1;margin-top:.02em}
.brand b{line-height:.82}
:root[data-theme="dark"] .brand b .g,
.dark .brand b .g,.hero .brand b .g,footer.site .brand b .g{opacity:1}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .g{opacity:1}
}

/* ============================================================
   THE UNDERLINE, DRAWN RATHER THAN DECLARED
   ============================================================
   text-decoration:underline gives you a rule with square ends that
   runs the full advance width of the word, including the sidebearing
   air at each end. It is a default, and it looks like one.

   Drawn as an element instead, three things become possible and all
   three are the difference:

   ROUNDED ENDS. A 2px rule with square corners is a hyphen stretched
   long. Rounding it to its own height turns it into a stroke, which
   is what a person would draw.

   OPTICAL INSET. The rule stops 0.06em short at each end so it sits
   under the LETTERS rather than under the word's metric box. A rule
   that runs to the metric edge always looks slightly too long, and
   nobody can say why.

   IT ARRIVES. The stroke draws itself in from the left, once, over
   half a second, easing out. Nothing else on this page moves on
   load, so the eye goes to the one word that matters at the moment
   the sentence is being read. It never repeats and it never loops:
   a mark that keeps moving stops being a mark.

   Off entirely under prefers-reduced-motion, where it is simply
   present from the first frame. */
.hero-def u.mk{
  text-decoration:none;
  position:relative;
  font-weight:520;
  color:var(--ink);
}
.hero-def u.mk::after{
  content:"";
  position:absolute;
  left:.06em;right:.06em;
  bottom:-.14em;
  height:2px;
  border-radius:2px;
  background:var(--blue);
  transform-origin:left center;
  animation:mkDraw .62s cubic-bezier(.16,1,.3,1) .35s both;
}
@keyframes mkDraw{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .hero-def u.mk::after{animation:none}
}
@media (max-width:719px){
  .hero-def u.mk::after{height:1.8px;bottom:-.12em}
}

/* THE DOWNLOAD METADATA LEAVES THE MONOSPACE.
   Sixth instance of the same tell: mono, small, letterspaced, used
   for a label. It was removed from the kicker, the source labels,
   the zone ordinals, the form legend and the hero caption, and it
   survived here because this block sits on a page the sweeps kept
   treating as finished. A file size is not code. It is a caption,
   and captions on this site are set in the serif italic. */
.dl .dl-m{
  font-family:var(--serif);
  font-variation-settings:"opsz" 18;
  font-style:italic;
  font-size:13px;
  letter-spacing:0;
  font-weight:450;
}
/* The line that names the set. */
.dl-lead{
  max-width:56ch;
  margin:0 0 clamp(14px,1.8vw,18px);
  font-size:clamp(14.5px,1.15vw,16px);
  line-height:1.55;
  color:var(--muted);
}
.dl-lead b{color:var(--ink);font-weight:600}
/* The filled room becomes a photograph. The stroke stays and the
   fill goes, or the tint would sit over the picture and grey it.
   The label goes too: it was naming a thing that is now visible. */
.hp-zen{fill:none;stroke:rgba(42,74,168,.55);stroke-width:2}
.hp-photo{opacity:.92}
:root[data-theme="dark"] .hp-zen{stroke:rgba(147,169,226,.6)}
:root[data-theme="dark"] .hp-photo{opacity:.82}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-zen{stroke:rgba(147,169,226,.6)}
  :root:not([data-theme="light"]) .hp-photo{opacity:.82}
}
/* Partitions thin, envelope heavy. That weight difference is the
   whole grammar of an architectural drawing: it tells you what is
   structure and what is division, without a legend. */
.hp-rooms rect{stroke:rgba(20,26,36,.17);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.hp-envelope{fill:none;stroke:rgba(20,26,36,.34);stroke-width:2.1;vector-effect:non-scaling-stroke}
.hp-zen{fill:none;stroke:rgba(42,74,168,.62);stroke-width:2.1;vector-effect:non-scaling-stroke}
:root[data-theme="dark"] .hp-rooms rect{stroke:rgba(236,234,229,.16)}
:root[data-theme="dark"] .hp-envelope{stroke:rgba(236,234,229,.3)}
:root[data-theme="dark"] .hp-zen{stroke:rgba(147,169,226,.66)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-rooms rect{stroke:rgba(236,234,229,.16)}
  :root:not([data-theme="light"]) .hp-envelope{stroke:rgba(236,234,229,.3)}
  :root:not([data-theme="light"]) .hp-zen{stroke:rgba(147,169,226,.66)}
}
/* The subject room, marked the way a plan marks one: a light fill,
   a wall drawn at the envelope's weight rather than a partition's,
   and the name set inside the space. The fill returns now that
   there is no photograph for it to sit on top of. */
.hp-zen{fill:rgba(42,74,168,.07);stroke:rgba(42,74,168,.62);stroke-width:2.1}
.hp-label{
  fill:rgba(42,74,168,.72);
  font-family:var(--sans);
  font-size:14px;font-weight:600;
  letter-spacing:2.2px;
}
:root[data-theme="dark"] .hp-zen{fill:rgba(147,169,226,.1);stroke:rgba(147,169,226,.66)}
:root[data-theme="dark"] .hp-label{fill:rgba(147,169,226,.8)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-zen{fill:rgba(147,169,226,.1);stroke:rgba(147,169,226,.66)}
  :root:not([data-theme="light"]) .hp-label{fill:rgba(147,169,226,.8)}
}

/* ============================================================
   MOBILE: THE ROOM ARRIVES SOONER
   ============================================================
   Measured before changing anything: the plan was 360px wide and
   273px tall on a 400px phone, a full third of the screen, and the
   photograph did not begin until 830px down. So a first-time
   reader met a whole screen of technical drawing before they saw
   the thing being described.

   The plan is evidence, not the payoff. On desktop it earns its
   size because it fills a column that would otherwise be empty. On
   a phone there is no empty column, so the same drawing at the same
   scale is just delay.

   It becomes what it always was: an annotation. Smaller, set to
   the right the way a margin figure sits in a book, tight to the
   photograph beneath it so the two read as one exhibit. The
   sequence is unchanged and now legible in a glance: here is the
   idea, here is where it sits, here it is.

   The dock also stopped covering it. A sticky bar that overlaps
   content is a bar the reader has to scroll around. */
@media (max-width:719px){
  .hero-plan{
    width:62%;
    margin:calc(var(--u) * 1.5) 0 0 auto;
  }
  .hp-label{font-size:16px;letter-spacing:1.6px}
  .hero .hero-inner{padding-bottom:calc(var(--u) * .5)}
  /* clearance for the sticky dock, which is 64px plus safe area */
  .hero-plate{margin-bottom:0}
  .hero{padding-bottom:0}
}

/* ============================================================
   THE MONOSPACE SWEEP, DONE PROPERLY THIS TIME
   ============================================================
   This device has been removed from the kicker, the source labels,
   the zone ordinals, the form legend, the hero caption and the
   download metadata, one at a time, each time it was spotted. That
   is not a sweep, it is whack-a-mole, and it is why it kept coming
   back. A scan of every element on all seven pages found it still
   living in fourteen classes, including a nineteen-word sentence.

   The rule, stated once so it can be applied rather than
   rediscovered: MONOSPACE IS FOR CODE. Not for labels, not for
   captions, not for prose, and never for a sentence. A file path
   is code. "Why it matters" is a heading. "Stop 1 of 6" is a
   caption. None of them are code.

   Two replacements, by kind:
     prose  -> the sans, because it is prose
     labels -> the serif italic, sentence case, which is this
               site's one label device and has been since the
               kicker was fixed.

   Nothing here changes size or spacing. Only the face, the case
   and the tracking, which are the three things that were making
   ordinary English look like terminal output. */

/* PROSE. These carry sentences. */
.commit-who,.logo-cap,figure figcaption,.walk-why,.walk-why p,
.foot-legal span,.foot-legal a{
  font-family:var(--sans);
  letter-spacing:normal;
  text-transform:none;
}

/* LABELS. Short, and they name the thing beside them. */
.label,.step-n,.faq-tag,.walk-count,.walk-stop .n,.commit-n,.walk-why-t,
.trio .trio-n,.legend,.reading-src b,.hs-what,.hs-src,.clients-lab,.commit-what{
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  letter-spacing:0;
  text-transform:none;
}
/* .commit-what is a statement, not a label: it keeps the serif but
   loses the italic, which is for labels only. */
.commit-what{font-style:normal;font-variation-settings:"opsz" 48}

/* Contact details are read by people, not machines. */
.foot-legal a[href^="mailto"],a[href^="mailto"]{font-family:var(--sans);letter-spacing:normal}
/* The last six, named by their real path rather than by the class I
   assumed. Chasing them one at a time is what let this device
   survive six sweeps, so these are matched precisely and the rule
   above them states the principle for whoever comes next.

   .film figcaption   a caption, two sentences
   .walk-rail .n      a step number in the tour rail
   .walk-notice b     the heading "Why it matters"
   .curve svg text    axis labels on the graph
   .cite .tlink       a link in a citation line
   .field label       every form field label on the site */
figure.film figcaption,
.walk-rail .n,
.walk-notice b,
.cite .tlink,
.field label{
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  letter-spacing:0;
  text-transform:none;
}
/* Captions and links are prose, not labels: serif but upright. */
figure.film figcaption,.cite .tlink{font-family:var(--sans);font-style:normal}
/* The graph's axis labels stay small and quiet but stop being code. */
.curve svg text{font-family:var(--serif);font-style:italic;letter-spacing:0;text-transform:none}
/* A form label is read once, quickly, by somebody deciding whether to
   type. It gets the sans at the size it always had. */
.field label{font-family:var(--sans);font-style:normal;letter-spacing:normal}
/* The complete remaining set, taken from a scan of all seven pages
   rather than from guessing. Every one of these carries English
   read by a person: two captions, a note, a citation and the brief's
   footer rule. None is code.

   Declared as one block with inheritance doing the work, so a child
   added inside any of them tomorrow is prose by default and does not
   have to be found in a seventh sweep. */
.walk-notice, .walk-notice *,
figure.shot figcaption, figure.shot figcaption *,
figure.film figcaption, figure.film figcaption *,
p.cite, p.cite *,
p.brief-rule, p.brief-rule *{
  font-family:var(--sans);
  letter-spacing:normal;
  text-transform:none;
}
/* Inside those, the lead-in b stays a label and takes the site's
   label face, which is the serif italic. */
.walk-notice b, figure.shot figcaption b, figure.film figcaption b, p.cite b{
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-weight:600;
  color:var(--ink);
}
/* Except the photograph lead-in, which is a statement and reads
   better upright. */
figure.shot figcaption b, figure.film figcaption b{font-style:normal;font-family:var(--sans);font-weight:600}
/* Axis labels on the curve. */
.curve svg text, svg text{font-family:var(--serif);font-style:italic;letter-spacing:0;text-transform:none}
/* Two survivors, both beaten by a longer selector declared earlier.
   Matched at the same depth so this is the last word rather than
   another round. */
.walk-body p.walk-notice,.walk-body p.walk-notice *{
  font-family:var(--sans);letter-spacing:normal;text-transform:none;
}
.walk-body p.walk-notice b{font-family:var(--serif);font-style:italic;font-weight:600}
.curve figure svg text,figure.curve svg text,.curve svg text{
  font-family:var(--serif);font-style:italic;letter-spacing:0;text-transform:none;
}
/* The curve's own axis labels, .c-lab, were the last one. They are
   words on a chart, which is the classic place a designer reaches
   for monospace and the classic place it is wrong: a chart label is
   read as language, not parsed as data. */
.c-lab,text.c-lab{
  font-family:var(--serif);
  font-variation-settings:"opsz" 18;
  font-style:italic;
  letter-spacing:0;
  text-transform:none;
}
/* The blanket `svg text` rule in the monospace sweep caught the
   plan's room label and made it serif italic. A room label on an
   architectural drawing is annotation, not prose: it is set in the
   sans, in capitals, letterspaced, the way a draughtsman letters a
   plan. Restored, and scoped so the sweep cannot reach it again. */
.hero-plan text.hp-label,.hp-label{
  font-family:var(--sans);
  font-style:normal;
  font-size:14px;
  font-weight:600;
  letter-spacing:2.2px;
  text-transform:none;
}
/* The corridor: two wall lines with space between them, at partition
   weight. Space is what a corridor is; drawing it as a filled room
   would make it look like a room. */
.hp-corridor path{
  stroke:rgba(20,26,36,.17);
  stroke-width:1;
  fill:none;
  vector-effect:non-scaling-stroke;
}
:root[data-theme="dark"] .hp-corridor path{stroke:rgba(236,234,229,.16)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-corridor path{stroke:rgba(236,234,229,.16)}
}
/* The final two. `.curve .c-lab` is (0,2,0) and my `text.c-lab` was
   (0,1,1), so the earlier declaration kept winning. Matched at the
   same specificity, declared later, which is the last word.
   These are the curve's axis captions: "week one", "month three".
   Words on a chart are read as language, not parsed as data. */
.curve .c-lab{
  font-family:var(--serif);
  font-variation-settings:"opsz" 18;
  font-style:italic;
  letter-spacing:.01em;
  text-transform:none;
}
/* Contents, not structure. Lighter than a partition and much
   lighter than the envelope, so the eye reads the walls first, the
   rooms second and the furniture last, which is the order a plan is
   meant to be read in. */
.hp-desks rect{
  fill:none;
  stroke:rgba(20,26,36,.11);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.hp-desks path{
  stroke:rgba(20,26,36,.11);
  stroke-width:1;
  fill:none;
  vector-effect:non-scaling-stroke;
}
:root[data-theme="dark"] .hp-desks rect,
:root[data-theme="dark"] .hp-desks path{stroke:rgba(236,234,229,.1)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-desks rect,
  :root:not([data-theme="light"]) .hp-desks path{stroke:rgba(236,234,229,.1)}
}
/* Room names, in the draughtsman's convention: sans, capitals,
   letterspaced, small, and quieter than every wall. They label the
   space without becoming the subject of the drawing. The Zen
   Garden's own label stays a step stronger and takes the accent,
   because on a plan the room being designed is the one that carries
   the weight. */
.hp-names text{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:1.6px;
  fill:rgba(20,26,36,.36);
}
:root[data-theme="dark"] .hp-names text{fill:rgba(236,234,229,.34)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-names text{fill:rgba(236,234,229,.34)}
}
/* The booths sit at contents weight with the desks, not at wall
   weight. They are furniture inside a room, and a plan that draws
   them as heavy as a partition tells the reader they are structure,
   which they are not. */
.hp-booths rect{
  fill:none;
  stroke:rgba(20,26,36,.13);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
:root[data-theme="dark"] .hp-booths rect{stroke:rgba(236,234,229,.12)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-booths rect{stroke:rgba(236,234,229,.12)}
}
/* The service core. Lifts and stairs drawn inside it, at contents
   weight, because a core is a room containing things rather than a
   solid block. It is the one part of a floor that never moves, which
   is why every plan puts it in first. */
.hp-core rect{fill:none;stroke:rgba(20,26,36,.17);stroke-width:1;vector-effect:non-scaling-stroke}
.hp-core rect:first-child{stroke-width:1.4}
.hp-core path{stroke:rgba(20,26,36,.12);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
:root[data-theme="dark"] .hp-core rect{stroke:rgba(236,234,229,.16)}
:root[data-theme="dark"] .hp-core path{stroke:rgba(236,234,229,.11)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-core rect{stroke:rgba(236,234,229,.16)}
  :root:not([data-theme="light"]) .hp-core path{stroke:rgba(236,234,229,.11)}
}
/* Glazing ticks: the lightest mark on the drawing, because a window
   run is the least structural thing an outer wall does. */
.hp-glazing path{stroke:rgba(20,26,36,.14);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
/* The dimension line, in the accent, because it is measuring the
   thing the accent belongs to. Ticks at both ends, annotation above
   the line and clear of it, which is the convention. */
.hp-dim path{stroke:rgba(42,74,168,.5);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.hp-dim text{
  font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:1.5px;fill:rgba(42,74,168,.66);
}
:root[data-theme="dark"] .hp-glazing path{stroke:rgba(236,234,229,.13)}
:root[data-theme="dark"] .hp-dim path{stroke:rgba(147,169,226,.55)}
:root[data-theme="dark"] .hp-dim text{fill:rgba(147,169,226,.75)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-glazing path{stroke:rgba(236,234,229,.13)}
  :root:not([data-theme="light"]) .hp-dim path{stroke:rgba(147,169,226,.55)}
  :root:not([data-theme="light"]) .hp-dim text{fill:rgba(147,169,226,.75)}
}
/* The glazed facade. The inner face is the faintest line in the whole
   drawing, because it is glass: present, and not structure. Mullions
   sit a shade stronger so the rhythm reads, and both stay well under
   the partitions so the plan is still read walls-first. */
.hp-glazing path{stroke:rgba(20,26,36,.13);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.hp-glazing path.cw{stroke:rgba(20,26,36,.09);stroke-width:1}
:root[data-theme="dark"] .hp-glazing path{stroke:rgba(236,234,229,.12)}
:root[data-theme="dark"] .hp-glazing path.cw{stroke:rgba(236,234,229,.08)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-glazing path{stroke:rgba(236,234,229,.12)}
  :root:not([data-theme="light"]) .hp-glazing path.cw{stroke:rgba(236,234,229,.08)}
}
/* The dimension comes up a step. It is the one annotation on the
   drawing that carries the argument, so it may sit slightly above
   the glazing and the partitions rather than among them. Line from
   .5 to .62, label from .66 to .84, and a point of size. Still well
   under the Zen Garden's own wall, which stays the strongest accent
   mark on the plan. */
.hp-dim path{stroke:rgba(42,74,168,.62);stroke-width:1.15}
.hp-dim text{font-size:11.5px;fill:rgba(42,74,168,.84);letter-spacing:1.6px}
:root[data-theme="dark"] .hp-dim path{stroke:rgba(147,169,226,.66)}
:root[data-theme="dark"] .hp-dim text{fill:rgba(147,169,226,.9)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-dim path{stroke:rgba(147,169,226,.66)}
  :root:not([data-theme="light"]) .hp-dim text{fill:rgba(147,169,226,.9)}
}
/* Full width on a phone. The plate is landscape now, so running it
   edge to edge costs little height and removes the dead strip that
   only existed because a square drawing had to be shrunk to fit. */
@media (max-width:719px){
  .hero-plan{width:100%;margin:calc(var(--u) * 1.4) 0 0}
}
/* DESKTOP: BIGGER, AND LIFTED OFF THE FLOOR.
   It was 400px wide anchored to the button's baseline, which put it
   low in a tall column and left air above it doing nothing. The
   column is the widest empty space on the page and the drawing was
   using about half of it.

   Wider, and anchored so its centre sits against the middle of the
   text block rather than its foot. Two objects on one row read as a
   pair when their centres agree; when one is bottom-aligned to the
   other it reads as one thing having fallen. */
@media (min-width:900px){
  .hero-plan{
    width:min(47%,520px);
    bottom:auto;
    top:50%;
    transform:translateY(-46%);
  }
}
@media (min-width:1100px){
  .hero-plan{width:min(46%,540px)}
}
/* Measured at -46% the plan's centre sat 45px below the text block's
   centre, because top:50% centres it on the inner box and that box
   carries 6u of padding under the button. Corrected against the
   measurement rather than by eye. */
@media (min-width:900px){
  .hero-plan{transform:translateY(-61%)}
}
/* 540 overshot. 400 was too small and left the column half used;
   540 crowded the headline above it. 460 is the size at which the
   plan reads as a considered exhibit beside the text rather than as
   either an afterthought or a second subject. The centring holds
   because translateY is a percentage of the element's own height. */
@media (min-width:900px){
  .hero-plan{width:min(41%,460px)}
}
@media (min-width:1100px){
  .hero-plan{width:min(40%,470px)}
}
/* THE VOID UNDER THE OPENING.
   Measured: 177px of nothing between the lowest thing in the hero
   and the top of the photograph. That band is what a template
   leaves when it stretches to fill a viewport, and it is the last
   thing in this section that reads as assembled rather than
   composed. Space above a group is composition. Space below the
   last thing, before the next thing, is a gap.

   Cut to a deliberate breath. The photograph now arrives while the
   sentence is still in the reader's eye, which is the relationship
   the two are supposed to have: the claim, then the room. */
@media (min-width:900px){
  .hero .hero-inner{padding-bottom:calc(var(--u) * 2.2)}
}
/* Cutting the padding moved the inner box's centre, so the plan
   rose 37px above the text block. Re-solved against the new
   measurement rather than left to drift: this is the second time
   the centring has had to follow a spacing change, which is what
   happens when a thing is centred on a container rather than on
   the content it is meant to relate to. */
@media (min-width:900px){
  .hero-plan{transform:translateY(-47%)}
}
/* The three take-away controls sit on one row and must read as one
   set: equal height at every width, including when the print
   control's longer sub-label wraps on a phone. Unequal heights in a
   row of siblings is the commonest sign nobody checked the small
   screen. */
.dl-row .dl{align-items:flex-start;justify-content:center}
@media (max-width:719px){
  .dl-row{display:grid;gap:10px}
  .dl-row .dl{width:100%;min-height:76px;display:flex;flex-direction:column;justify-content:center}
}
/* The document icon belongs on the two documents, not on printing. */
.btn.dl .dl-t{color:inherit}
/* min-height alone does not equalise a grid row when one item wraps
   to two lines: it sets a floor, not a match. The grid rows are the
   right tool, since grid items stretch to their row by default. */
@media (max-width:719px){
  .dl-row{grid-auto-rows:1fr}
  .dl-row .dl{height:100%}
}

/* THE WORDMARK, SET ON ONE LINE -----------------------------------
   Stacked, the two words read as two objects sharing a corner, and
   closing the gap never fixed that: the problem was the stack.

   Side by side, one rule matters and it is measured, not judged. In
   a horizontal lockup the small word's CAP height is set against the
   large word's X-HEIGHT. Zen's x-height is 16.92px against a 25.88px
   cap, so GARDEN is sized until its caps land at about three
   quarters of that x-height:

     .40em  61% of x-height   GARDEN sags, reads as a footnote
     .52em  78%               chosen
     .628em 94%               GARDEN competes, the mark shouts

   Weight carries the hierarchy alongside size: 580 against Zen's
   620, so the eye is told twice which word leads.

   The gap is 0.39 of a word space. A word space in this face is
   7.7px at 36px; at .30em the gap was 5.6px, nearly a full space,
   and the two words floated apart. At .16em it is 3px, close enough
   to read as one mark and open enough that the n and the G are not
   fighting.

   NO FLEX HERE, DELIBERATELY. Flex blockifies its children, and
   align-items:baseline then fought the differing half-leading of two
   very different font sizes: GARDEN sat 3.5px above Zen's baseline,
   which is exactly the "not on the same floor" a reader notices
   without being able to name. Plain inline text shares a baseline by
   construction, with nothing to align and nothing to drift.

   Colours untouched: Zen in the deep blue, GARDEN in ink. */
.brand{
  display:inline-block;
  line-height:1;
  white-space:nowrap;
}
.brand b{
  display:inline;
  line-height:1;
  /* THE OPTICAL SIZE IS THE CONFIDENCE.

     Newsreader carries an opsz axis from 6 to 72. High values give the
     DISPLAY cut: long, fine serifs and high stroke contrast, drawn to be
     set large. Low values give the READING cut: blunt serifs, thicker
     joints, less contrast, drawn to survive being set small.

     The mark sat at 26, the middle of the axis, which is neither. Set at
     36px it read as wiry: the thin strokes went thin and the serifs came
     to points, and the whole thing looked hesitant beside any logo with
     weight in it.

     So the mark uses the READING cut at DISPLAY size, which is the oldest
     trick in the drawer and the correct one here. opsz 10 thickens the
     joints and blunts the serifs; the weight goes to 700 to match. The
     letterforms are unchanged, the typeface is unchanged, and nothing has
     been faked with a stroke or a transform.

     Set on .brand b so both words share one optical size. Two words of
     one mark drawn at different points on the axis would not belong to
     each other, which is the fault this whole pass was chasing. */
  font-variation-settings:"opsz" 10;
}
.brand b .z{
  display:inline;
  font-size:1em;
  font-weight:700;
  letter-spacing:.012em;
  color:var(--blue);
}
.brand b .g{
  display:inline;
  font-size:.70em;
  font-weight:620;
  /* Tracking follows the letterforms. The old caps were the delicate cut
     and needed .10em to stop them rattling; opsz 10 draws them wider and
     heavier, so the same tracking left them airy. Caps still need some,
     though: below about .03em they read cramped, which is why this stops
     at .06 rather than going to zero.

     margin-right cancels the tracking that CSS adds after the final N, so
     the mark ends on the last stroke instead of on a space nobody can see
     but everything after it can feel. */
  letter-spacing:.045em;
  /* ONE WORD. The gap had already closed to 0.17 of a word space and
     the pair was reading as a single word, so the gap was doing no
     work except leaving a seam. Closed to nothing.

     The colour break now does the separating, which is the FedEx
     arrangement: one word, two tones, and the join is the point
     rather than an accident. A hair of optical space remains because
     the n ends on a vertical stem and the G opens on a curve, and
     flush metal there would read as tighter than everywhere else. */
  margin-left:.014em;
  margin-right:-.045em;
  /* GARDEN's ink-bottom measured 2px above Zen's, both being cap-height
     with no descenders, so this is the two words sitting on different
     planes rather than a rendering artefact. margin-top does nothing
     here: it has no effect on inline, non-replaced elements, which is
     why every earlier attempt at this correction in this file's
     history was silently inert. vertical-align is the property that
     actually moves inline content; measured and nudged until the two
     ink-bottoms matched exactly. */
  vertical-align:-.106em;
  text-transform:uppercase;
  color:#39435A;
  opacity:1;
}

/* THE SIGNATURE, THE THREE ZONES ----------------------------------
   PARKED, 5 August. The mark is final without a device, so nothing in
   the markup uses this any more. The rules stay because the idea was
   right and only the timing was wrong: the dots come off the room's
   own wooden sign, and each one belongs to a zone. Putting them back
   is one line of markup, not a rebuild.
   Three dots come off the room's own wooden sign, where they sit
   between the name and three words. Here each dot belongs to a zone
   and the zone is named beside it, so the device carries information
   rather than pattern.

   Deliberately NOT set inline with the name. Three dots on a text
   line is an ellipsis, and an ellipsis already means "something
   omitted": "Zen ... GARDEN" reads as a gap, not a rhythm. Below the
   mark they read as a mark.

   Sized in em of the lockup so the whole signature scales as one
   object. Shown only where the names are legible; the header runs
   the mark alone rather than printing dots too small to resolve. */
.zg-sig{
  display:flex;
  flex-wrap:wrap;
  gap:.55em 1.5em;
  margin-top:.9em;
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-size:14px;
  line-height:1;
  color:var(--muted-dark);
  letter-spacing:.006em;
}
.zg-sig span,.foot-mark .zg-sig span{
  /* .foot-mark span already carries a border-top and its own type, and the
     zone items are spans inside .foot-mark, so they inherited a hairline
     above each name. Reset explicitly rather than renaming the element:
     the next person to add a span in this footer would hit the same wall. */
  display:inline-flex;align-items:baseline;gap:.5em;white-space:nowrap;
  border:0;margin:0;padding:0;
  font-family:inherit;font-size:inherit;font-style:inherit;
  letter-spacing:inherit;text-transform:none;color:inherit;
}
.zg-sig i{
  width:.24em;height:.24em;border-radius:50%;
  background:var(--blue);flex:none;
  transform:translateY(-.3em);
}
.foot-mark .brand{font-size:29px}
.foot-mark > span{display:block;margin-top:.85em}
@media (max-width:719px){
  .zg-sig{font-size:13px;gap:.5em 1.15em}
}

/* ============================================================
   Zen Garden by Zariyaa — design system
   Self-contained. No CDN fonts, no external stylesheets.

   Principle: the page is an instrument reading, not a pitch.
   Every figure is rendered through .reading, which cannot be
   built without a provenance line. If a number has no source,
   the component looks broken — by design.

   Contrast: every text/background pair below is measured
   >= 4.5:1. Do not introduce a new colour without measuring it.
   ============================================================ */

/* ============================================================
   THE PALETTE — refined 2026-08-03, values taken verbatim from
   04-BRAND-DOCS/Zen-Garden-Brand-Book.html. Same family, less
   chroma. The neutrals were cold blue-grey and are now warm and
   almost neutral; the saturated blue is quieter and appears far
   less often; gold means one thing only.

   Two rules that govern USAGE, not just the hex values:
     1. Gold is provenance and nothing else. It is the line under
        a figure saying where the figure came from. It is not a
        section label, not a bullet marker, not a rule.
     2. Blue is under 4% of any page. Buttons, links, and at most
        one italic emphasis per screen.

   Contrast, already measured, do not re-derive:
     body on paper 5.86:1   ink on paper 16.15:1
     blue on paper 7.34:1   on-dark on dark 16.55:1
     muted-dark on dark 7.07:1  gold on dark 6.02:1
     white on blue 7.93:1
   ============================================================ */
:root{
  /* surfaces */
  --paper:#F7F6F3;      /* was #F6F8FB */
  --paper-2:#EFEDE8;    /* was #EDF1F9 */
  --blue-soft:#E8EAF3;  /* was #E7EDFB */
  --dark:#0B0F16;       /* was #0A1224 */
  --dark-2:#151A23;     /* was #111B33 */
  --panel:#FFFFFF;      /* raised panel: the form card, the menu sheet.
                           A ROLE, not a value. #fff was correct on paper
                           and invisible on a dark page. */

  /* ink — measured on --paper */
  --ink:#141A24;        /* was #0F1C36, chroma 39 to 16 */
  --muted:#5B6068;      /* was #556074, chroma 31 to 13 */
  --blue:#2A4AA8;       /* was #2A52CE, chroma 164 to 125 */
  --gold-ink:#7A5C29;   /* was #856121 */

  /* ink — measured on --dark */
  --on-dark:#F0EEE9;    /* was #EDF1F9 */
  --muted-dark:#9B9DA2; /* was #9AA4BC, chroma 34 to 7 */
  --blue-lt:#8FA6E0;    /* was #7FA1F0 */
  --gold:#B08A4E;       /* was #A97F3D, lifted to survive on a photograph */
  /* Kept for any surface that still sets a gold accent over a photograph.
     Nothing on the homepage does any more: the decorative gold rule that
     used to sit before the hero eyebrow read as a template mark, and as
     an em-dash, so it is gone. */
  --gold-on-image:#C9A467;

  /* lines */
  --hair:rgba(20,26,36,.11);
  --hair-2:rgba(20,26,36,.2);
  --hair-dark:rgba(240,238,233,.15);
  --hair-dark-2:rgba(240,238,233,.28);

  /* type — the established brand faces first, self-hosted (see @font-face
     below), then a system fallback. Nothing is fetched from a CDN. */
  --serif:"Newsreader",ui-serif,Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --sans:"Ubuntu Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1180px;
  --gut:clamp(20px,5vw,44px);
  /* More air. The old rhythm was 64 to 124; sections now open further
     apart, which is most of what "expensive" looks like. */
  --sec:clamp(76px,10.5vw,152px);
  --radius:14px;      /* cards and panels, was 10px */
  --radius-sm:10px;   /* buttons and inputs */
}

/* ============================================================
   SELF-HOSTED BRAND FACES — present in css/fonts/, no CDN.

   The brand faces are Newsreader (display), Ubuntu Sans (body) and
   Spline Sans Mono (micro-labels) — the decision recorded in
   _START-HERE.txt on 2026-07-30 that ended an old three-font split.
   The live site loads them from fonts.googleapis.com. This build
   does not contact a CDN, so the files are hosted with the site.

   Four variable files, latin subset, covering every weight and the
   one italic the design uses:
     ubuntu-sans-var.woff2         38 KB   wght 300..700
     newsreader-var.woff2         129 KB   opsz 6..72, wght 400..700
     newsreader-var-italic.woff2  144 KB   opsz 6..72, wght 400..700
     spline-sans-mono-var.woff2    36 KB   wght 400..600

   Licences: Newsreader and Spline Sans Mono are SIL OFL 1.1;
   Ubuntu Sans is the Ubuntu Font Licence 1.0. All three permit
   hosting on thezengarden.in. See css/fonts/LICENCES.txt.

   font-display:swap throughout, so text is readable from the first
   paint in the system fallback and never blocked on a download.
   Every measurement in this file — contrast, tap target, 360px
   overflow — holds in both the brand face and the fallback.
   ============================================================ */
/* Weight ranges below are the TRUE ranges read from each file's fvar
   table, not the narrower ranges these were first declared with.
   An under-declared range does not fail loudly: the browser silently
   clamps any weight outside it to the boundary, so a 750 display
   weight would quietly render at 700 and the hierarchy would flatten
   with nothing in the console to say why. */
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-var-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Ubuntu Sans";src:url("fonts/ubuntu-sans-var.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:"Spline Sans Mono";src:url("fonts/spline-sans-mono-var.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
/* [hidden] must beat a component's own display value. Without this,
   a .btn or .form-done carrying the hidden attribute stays visible,
   because inline-flex/grid wins over the UA sheet's [hidden] rule. */
[hidden]{display:none!important}
svg{max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
::selection{background:var(--blue);color:#fff}

/* ---------- focus: visible on every control, in both themes ---------- */
:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:3px;
}
.dark :focus-visible,.on-dark :focus-visible{outline-color:var(--blue-lt)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);
  padding:14px 20px;border-radius:0 0 var(--radius) 0;
  font-weight:600;
}
.skip:focus{left:0}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:760px}
section{padding:var(--sec) 0;position:relative}
.dark{background:var(--dark);color:var(--on-dark)}
.dark a{color:var(--on-dark)}
.tint{background:var(--blue-soft)}
.tint-2{background:var(--paper-2)}

.rule{height:1px;background:var(--hair);border:0;margin:0}
.dark .rule{background:var(--hair-dark)}

/* ---------- section heading ---------- */
.kicker{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:16px;
}
.dark .kicker{color:var(--muted-dark)}
.kicker.gold{color:var(--gold-ink)}
.dark .kicker.gold{color:var(--gold)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.015em}
h1{font-size:clamp(33px,6.4vw,62px);line-height:1.05;letter-spacing:-.025em}
h2{font-size:clamp(26px,4.4vw,44px);line-height:1.08;letter-spacing:-.02em}
h3{font-size:clamp(19px,2.6vw,26px)}
h4{font-size:clamp(17px,2vw,20px)}
/* The blue italic clause used to run on every headline on the site, which
   is both the template tell and most of the stray blue. Italic alone is
   the emphasis now. Blue emphasis is opt-in, once per screen at most,
   via .em-blue. */
h1 em,h2 em,h3 em{font-style:italic;color:inherit}
.em-blue{color:var(--blue)}
.dark .em-blue,.hero .em-blue,footer.site .em-blue{color:var(--blue-lt)}

.lede{
  font-size:clamp(17.5px,2.1vw,21px);
  line-height:1.58;
  max-width:56ch;
  margin-top:24px;
  color:var(--ink);
}
.dark .lede{color:var(--on-dark)}
p{max-width:68ch}
p + p{margin-top:14px}
.muted{color:var(--muted)}
.dark .muted{color:var(--muted-dark)}

/* ============================================================
   THE READING — the site's signature component.
   A figure may not appear on this site without one.
   fig  = the number
   what = what it counts
   src  = where it comes from, always present
   ============================================================ */
.reading{
  display:grid;
  /* align-content:start, because a .reading is itself a grid item inside
     .readings and gets stretched to the tallest row. Without this its own
     three rows stretch too, and a short figure ends up with its label
     floating half a column below the number. Measured on the Flipkart
     row, where 47 and 184 sat 60px away from what they count. */
  align-content:start;
  gap:6px;
  padding:22px 0;
  border-top:1px solid var(--hair);
}
.dark .reading{border-top-color:var(--hair-dark)}
.reading-fig{
  font-family:var(--serif);
  font-size:clamp(38px,6vw,58px);
  line-height:1;
  letter-spacing:-.03em;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.reading-fig .unit{font-size:.52em;letter-spacing:0;margin-left:1px}
.reading-what{font-size:16px;line-height:1.5;max-width:40ch}
.reading-src{
  font-family:var(--mono);
  font-size:12px;
  line-height:1.5;
  letter-spacing:.02em;
  color:var(--muted);
  max-width:44ch;
  padding-top:4px;
}
.dark .reading-src{color:var(--muted-dark)}
.reading-src b{
  font-weight:600;
  color:var(--gold-ink);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:10.5px;
  display:block;
  margin-bottom:3px;
}
.dark .reading-src b{color:var(--gold)}

.readings{
  display:grid;
  gap:0;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  margin-top:34px;
  column-gap:36px;
}
.readings .reading{border-top-width:2px;border-top-color:var(--hair-2)}
.dark .readings .reading{border-top-color:var(--hair-dark-2)}

/* inline reading, used in prose */
.fig{
  font-family:var(--serif);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:52px;
  padding:14px 26px;
  background:var(--blue);
  color:#fff;
  border:1px solid var(--blue);
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  text-align:center;
  transition:background .22s var(--ease),transform .22s var(--ease);
}
.btn:hover{background:#20397F;border-color:#20397F}
.btn:active{transform:translateY(1px)}
.btn-2{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:52px;
  padding:14px 24px;
  border:1px solid var(--hair-2);
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  color:var(--ink);
  background:transparent;
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
.btn-2:hover{border-color:var(--ink);background:rgba(15,28,54,.04)}
/* The hero is a dark surface but is not .dark (it carries its own
   scrim), so it needs the on-dark treatment explicitly. Without this
   the secondary button renders near-invisible: dark ink on dark. */
.dark .btn-2,.hero .btn-2,footer.site .btn-2{color:var(--on-dark);border-color:var(--hair-dark-2)}
.dark .btn-2:hover,.hero .btn-2:hover,footer.site .btn-2:hover{border-color:var(--on-dark);background:rgba(237,241,249,.07)}

/* ============================================================
   .hero and footer.site are dark surfaces that are NOT .dark —
   each paints its own background — so none of the `.dark X`
   rules above reach them. Measured on the rendered page, that
   left three real failures: the footer's h2 em at 2.84:1 and
   two .muted paragraphs at 2.94:1, all dark ink on dark ground.
   These give both surfaces the same on-dark palette, so any
   component dropped into either is legible by default.
   ============================================================ */
.hero :focus-visible,footer.site :focus-visible{outline-color:var(--blue-lt)}
.hero .muted,footer.site .muted{color:var(--muted-dark)}
.hero .kicker,footer.site .kicker{color:var(--muted-dark)}
.hero .kicker.gold,footer.site .kicker.gold{color:var(--gold)}
.hero h1 em,.hero h2 em,.hero h3 em,.hero .statement em,
footer.site h1 em,footer.site h2 em,footer.site h3 em,footer.site .statement em{color:inherit}
.hero .lede,footer.site .lede{color:var(--on-dark)}
.hero p,footer.site p{color:var(--on-dark)}
.hero .tlink,footer.site .tlink{color:var(--blue-lt)}
.hero .reading,footer.site .reading{border-top-color:var(--hair-dark)}
.hero .reading-src,footer.site .reading-src{color:var(--muted-dark)}
.hero .reading-src b,footer.site .reading-src b{color:var(--gold)}
.hero figure.shot figcaption,footer.site figure.shot figcaption{color:var(--muted-dark)}
.hero .form-note,footer.site .form-note{color:var(--muted-dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}

/* Measured at 360px with every font size doubled (text-only zoom 200%):
   a long button label could not wrap and pushed the page 78px wide.
   Flex items default to min-width:auto, so the button refused to
   shrink below its content. These three lines let a label wrap
   instead of overflowing, at any text size. */
.btn,.btn-2{max-width:100%;min-width:0;overflow-wrap:break-word}

/* Grid and flex items default to min-width:auto, which means they refuse
   to shrink below their content's min-content width. At 200% text on a
   360px screen that let a grid cell grow to 418px and push the page
   sideways — the button was the symptom, the track was the cause.
   Letting every layout child shrink fixes the class of bug, not the
   instance. Measured: 360px and 390px, plain and at 200% text. */
.split > *,.cards > *,.zone > *,.readings > *,.shot-grid > *,
.foot-grid > *,.form-row > *,.commit-row > *,.walk-frame > *,
.btn-row > *,.hero-strip > *,.faq details > *,.reading > *,
.nav > *,.nav-links > *,.dock > *{min-width:0}
.reading-fig,.reading-what,.reading-src{overflow-wrap:break-word}

.tlink{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;
  color:var(--blue);
  font-weight:600;
  border-bottom:1.5px solid currentColor;
  line-height:1.3;
  transition:opacity .2s var(--ease);
}
.tlink:hover{opacity:.72}
.dark .tlink{color:var(--blue-lt)}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:80;
  background:rgba(246,248,251,.94);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--hair);
}
@supports not (backdrop-filter:blur(2px)){header.site{background:var(--paper)}}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:62px;
  /* At very large text the brand and the nav can no longer sit on one
     line. Wrapping is the correct answer; pushing the page sideways
     is not. Measured at 360px with text at 200%. */
  flex-wrap:wrap;
}
.brand{display:flex;flex-direction:column;line-height:1.05;padding:8px 0;min-height:44px;justify-content:center}
.brand b{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.02em}
.brand span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0}
.nav-links a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:8px 12px;
  font-size:14.5px;font-weight:500;border-radius:9px;
  transition:background .18s var(--ease);
}
.nav-links a:hover{background:rgba(15,28,54,.06)}
.nav-links .btn{min-height:44px;padding:10px 18px;font-size:14.5px;margin-left:6px}
.nav-links .btn:hover{background:#20397F}
/* Specificity bug, found by measuring: `.nav-links a` (0,1,1) beat the
   bare `.nav-hide` (0,1,0), so this rule never applied and the desktop
   links stayed in the header on phones. The nav overflowed 360px by
   171px on the homepage; body{overflow-x:hidden} was hiding the damage
   rather than preventing it. Scoping the selector restores the intent. */
@media (max-width:900px){.nav-links .nav-hide{display:none}}

/* ---------- hero ---------- */
.hero{padding:0;position:relative;background:var(--dark);color:var(--on-dark);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(10,18,36,.90) 0%,rgba(10,18,36,.74) 42%,rgba(10,18,36,.93) 100%),
    linear-gradient(90deg,rgba(10,18,36,.80) 0%,rgba(10,18,36,.34) 78%);
}
.hero-inner{
  position:relative;z-index:2;
  padding:clamp(72px,13vw,150px) 0 clamp(44px,7vw,76px);
  max-width:840px;
}
.hero h1{color:var(--on-dark)}
.hero h1 em{color:var(--blue-lt)}
.hero-lede{
  font-size:clamp(17px,2.05vw,20.5px);
  line-height:1.55;max-width:54ch;margin-top:22px;color:var(--on-dark);
}
/* The 34px gold rule that used to sit in front of this label is gone.
   It was the single most repeated mark on the page, the owner read it
   as an em-dash, and it was doing no work. The label sits in the
   on-dark ink, which measures 16.55:1 over solid --dark and holds over
   the hero photograph, where the scrim never lets a pixel above
   rgb(50,56,71). */
.hero-eyebrow{
  display:inline-block;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-dark);opacity:.72;margin-bottom:26px;
}
.hero .btn-row{margin-top:34px}

/* the hero readings strip */
.hero-strip{
  position:relative;z-index:2;
  border-top:1px solid var(--hair-dark);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.hs{padding:22px 0 26px;padding-right:24px}
.hs + .hs{border-left:1px solid var(--hair-dark);padding-left:24px}
.hs-fig{font-family:var(--serif);font-size:clamp(27px,3.4vw,36px);font-weight:600;line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.hs-what{font-size:14px;line-height:1.45;margin-top:7px;color:var(--on-dark)}
.hs-src{font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--muted-dark);margin-top:6px}
@media (max-width:640px){
  .hs + .hs{border-left:0;border-top:1px solid var(--hair-dark);padding-left:0}
  .hs{padding-right:0}
}

/* ---------- the client strip ---------- */
.clients{padding:26px 0;border-bottom:1px solid var(--hair)}
.clients-lab{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px;
}
.clients-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,44px)}
.clients-row img{height:26px;width:auto;opacity:.62;filter:grayscale(1)}

/* ---------- big statement ---------- */
.statement{
  font-family:var(--serif);
  font-size:clamp(25px,4.1vw,42px);
  line-height:1.22;
  letter-spacing:-.02em;
  max-width:20ch;
  font-weight:600;
}
.statement em{font-style:italic;color:inherit}

.pull{
  font-family:var(--serif);
  font-size:clamp(19px,2.6vw,25px);
  line-height:1.38;
  letter-spacing:-.012em;
  /* was a 2px gold bar. Gold is provenance now, so a pulled sentence
     gets a hairline like every other rule on the page. */
  border-left:1px solid var(--hair-2);
  padding-left:24px;
  margin:32px 0;
  max-width:34ch;
}
.dark .pull{border-left-color:var(--hair-dark-2)}

/* ============================================================
   SECTION OPENINGS — a vocabulary, deliberately rotated.

   The previous homepage opened thirteen of its fourteen sections
   the same way: gold rule, gold mono label, serif headline with a
   blue italic clause. Applied thirteen times, a template reads as
   generated, which is what the owner saw. These are the other
   openings. The rule for anyone editing the page: no two
   consecutive sections may open with the same device.
   ============================================================ */

/* opening: one large sentence, alone, no label and no rule */
.opener-line{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(32px,6.6vw,64px);
  line-height:1.06;
  letter-spacing:-.028em;
  max-width:16ch;
}

/* opening: an epigraph in the left column, the argument running
   on in the right. The line IS the heading. */
.epigraph{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(24px,3.6vw,38px);
  line-height:1.22;
  letter-spacing:-.018em;
  max-width:17ch;
}

/* opening: a heading set as plain prose, so the section starts
   mid-thought with nothing that looks like a headline */
.opener-prose{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(17px,2vw,19.5px);
  line-height:1.6;
  letter-spacing:0;
  max-width:60ch;
  color:var(--ink);
}

/* opening: a running head, small and plain, after a bare rule */
.opener-quiet{
  font-family:var(--sans);
  font-weight:600;
  font-size:16px;
  line-height:1.5;
  letter-spacing:0;
  color:var(--muted);
  margin-top:clamp(30px,5vw,54px);
}

/* ---------- two-column split ---------- */
.split{
  display:grid;
  gap:clamp(28px,5vw,64px);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split-13{grid-template-columns:1.05fr 1fr}
  .split-sticky > :first-child{position:sticky;top:92px}
}

/* ---------- cards / list ---------- */
.cards{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:34px}
.card{
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:26px 24px 28px;
}
.dark .card{background:var(--dark-2);border-color:var(--hair-dark)}
.card h3,.card h4{margin-bottom:10px}
.card p{font-size:15.5px;color:var(--muted)}
.dark .card p{color:var(--muted-dark)}
.cards.gap{gap:14px}

.steps{margin-top:34px;counter-reset:s}
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  padding:24px 0;
  border-top:1px solid var(--hair);
  align-items:start;
}
.dark .step{border-top-color:var(--hair-dark)}
.step-n{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--muted);padding-top:5px;min-width:34px;
}
.dark .step-n{color:var(--muted-dark)}
.step h4{margin-bottom:6px}
.step p{font-size:15.5px;color:var(--muted);max-width:60ch}
.dark .step p{color:var(--muted-dark)}

/* ---------- the commitments (guarantee asymmetry) ---------- */
.commit{
  display:grid;gap:0;margin-top:30px;
  border-top:1px solid var(--hair-dark);
}
.commit-row{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  padding:22px 0;
  border-bottom:1px solid var(--hair-dark);
}
@media (min-width:760px){
  .commit-row{grid-template-columns:1.1fr 1fr;gap:28px;align-items:baseline}
}
.commit-what{font-family:var(--serif);font-size:clamp(18px,2.2vw,22px);line-height:1.32;letter-spacing:-.012em}
.commit-who{font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--muted-dark);letter-spacing:.02em}
.commit-note{
  margin-top:26px;padding:22px 24px;
  border:1px solid var(--hair-2);border-radius:var(--radius);
  font-size:15.5px;line-height:1.6;max-width:62ch;
}
.dark .commit-note{border-color:var(--hair-dark-2)}
/* Measured 3.41:1 on privacy, recovery-standard and cfo-brief: this
   used the on-dark gold on a light card. The light surface is the
   default case now, so it gets the light-surface ink and .dark
   overrides it, not the other way round. */
.commit-note b{color:var(--ink)}
.dark .commit-note b{color:var(--on-dark)}

/* ---------- photo figures ---------- */
figure.shot{margin:0}
figure.shot img{border-radius:var(--radius);width:100%}
figure.shot figcaption{
  font-family:var(--mono);font-size:11.5px;line-height:1.5;
  color:var(--muted);margin-top:10px;letter-spacing:.02em;
}
.dark figure.shot figcaption{color:var(--muted-dark)}
.shot-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:30px}
.shot-tall img{aspect-ratio:3/4;object-fit:cover}
.shot-wide img{aspect-ratio:16/10;object-fit:cover}

.bleed{margin-top:36px}
.bleed img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius)}
@media (max-width:620px){.bleed img{aspect-ratio:4/3}}

/* ---------- zones ---------- */
.zone{
  display:grid;gap:clamp(22px,4vw,48px);
  grid-template-columns:1fr;
  padding:clamp(30px,5vw,52px) 0;
  border-top:1px solid var(--hair);
  align-items:start;
}
@media (min-width:900px){.zone{grid-template-columns:1fr 1.05fr}}
.zone-n{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;display:block;
}
.zone h3{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em}
.zone-p{margin-top:12px;color:var(--ink);max-width:46ch;font-size:16.5px}
.zone-list{margin-top:18px;display:grid;gap:1px}
.zone-list li{padding:11px 0;border-top:1px solid var(--hair);font-size:15.5px}
.zone-list b{font-weight:600;display:inline-block;min-width:150px}
.zone-list span{color:var(--muted)}

/* ---------- forms ---------- */
.form-card{
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:clamp(24px,4vw,40px);
  max-width:720px;
  box-shadow:0 1px 2px rgba(15,28,54,.05),0 12px 34px -22px rgba(15,28,54,.4);
}
.dark .form-card{background:var(--dark-2);border-color:var(--hair-dark);box-shadow:none}
.field{margin-bottom:18px}
.field > label,.legend{
  display:block;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
  font-weight:600;
}
.dark .field > label,.dark .legend{color:var(--muted-dark)}
.field .hint{
  display:block;font-family:var(--sans);font-size:13.5px;letter-spacing:0;
  text-transform:none;color:var(--muted);margin-top:-2px;margin-bottom:8px;font-weight:400;
}
.dark .field .hint{color:var(--muted-dark)}  /* measured 2.70:1 without this */
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;
  min-height:52px;
  padding:14px 15px;
  background:var(--paper);
  border:1.5px solid var(--hair-2);
  border-radius:var(--radius-sm);
  font-size:16px;              /* 16px prevents iOS zoom-on-focus */
  line-height:1.4;
  color:var(--ink);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.dark input,.dark select,.dark textarea{background:rgba(237,241,249,.05);border-color:var(--hair-dark-2);color:var(--on-dark)}
textarea{min-height:112px;resize:vertical}
select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23556074' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:12px;
  padding-right:42px;
}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);background:var(--panel)}
.dark input:focus,.dark select:focus,.dark textarea:focus{background:rgba(237,241,249,.09)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.dark input::placeholder,.dark textarea::placeholder{color:var(--muted-dark)}
.form-row{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:620px){.form-row{grid-template-columns:1fr 1fr}}

/* radio cards — the intent chooser */
.choice{display:grid;gap:10px;margin-bottom:20px}
.choice label{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:13px;
  align-items:start;
  padding:15px 16px;
  min-height:56px;
  border:1.5px solid var(--hair-2);
  border-radius:12px;
  cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.choice label:hover{border-color:var(--muted)}
.choice input[type=radio]{
  width:20px;height:20px;min-height:20px;margin-top:2px;accent-color:var(--blue);flex:none;padding:0;
}
.choice input[type=radio]:checked ~ .choice-t{color:var(--blue)}
.choice label:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.choice-t{display:block;font-weight:600;font-size:16px;line-height:1.35}
.choice-d{display:block;font-size:14px;line-height:1.45;color:var(--muted);margin-top:3px}

/* validation */
.err-msg{
  display:none;
  font-size:14px;line-height:1.5;
  color:#A4232A;
  margin-top:6px;
  font-weight:500;
}
.field.invalid .err-msg{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#A4232A}
.dark .err-msg{color:#F2A0A4}
.form-err{
  display:none;
  padding:14px 16px;
  border:1.5px solid #A4232A;
  border-radius:var(--radius-sm);
  background:rgba(164,35,42,.06);
  color:#8C1D24;
  font-size:15px;
  line-height:1.55;
  margin-bottom:16px;
}
.form-err a{color:inherit;text-decoration:underline}
.dark .form-err{color:#F2A0A4;background:rgba(242,160,164,.09);border-color:#F2A0A4}
.form-note{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:14px;max-width:52ch}
.dark .form-note{color:var(--muted-dark)}
.form-done,.dark .form-done{
  border:1.5px solid var(--blue);
  background:var(--blue-soft);
  border-radius:var(--radius);
  padding:clamp(24px,4vw,34px);
  max-width:720px;
  color:var(--ink);
}
.form-done h3,.dark .form-done h3{margin-bottom:8px;color:var(--ink)}
.form-done p,.dark .form-done p{font-size:16px;max-width:52ch;color:var(--ink)}
.form-done .tlink,.dark .form-done .tlink{color:var(--blue)}
.form-done .form-note,.dark .form-done .form-note{color:var(--muted)}
.form-done .btn-2,.dark .form-done .btn-2{color:var(--ink);border-color:var(--hair-2)}

/* ---------- FAQ ---------- */
.faq{margin-top:30px;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:20px 0;min-height:56px;
  cursor:pointer;
  font-family:var(--serif);
  font-size:clamp(17.5px,2.2vw,21px);
  line-height:1.35;
  letter-spacing:-.012em;
  font-weight:600;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  /* was --blue. Three blue plus signs in one screenshot is three more
     accents than the page has budget for; blue is the buttons and links. */
  font-family:var(--sans);font-size:24px;line-height:1;color:var(--muted);
  flex:none;transition:transform .22s var(--ease);
}
.faq summary:hover{color:var(--blue)}
.faq details[open] summary::after{content:"\2013"}
.faq-a{padding:0 0 24px;max-width:66ch}
.faq-a p{font-size:16px;color:var(--ink)}
.faq-tag{
  display:inline-block;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--hair-2);
  border-radius:20px;padding:3px 9px;margin-bottom:10px;
}

/* ---------- footer ---------- */
footer.site{background:var(--dark);color:var(--on-dark);padding:clamp(52px,7vw,84px) 0 34px}
footer.site a{color:var(--on-dark)}
.foot-cta{
  display:grid;gap:22px;align-items:center;
  padding-bottom:clamp(40px,6vw,62px);
  border-bottom:1px solid var(--hair-dark);
}
@media (min-width:820px){.foot-cta{grid-template-columns:1.4fr auto}}
.foot-grid{
  display:grid;gap:clamp(28px,4vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  padding:clamp(38px,5vw,56px) 0;
}
.foot-col h5{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted-dark);margin-bottom:14px;font-weight:600;
}
.foot-col a{
  display:block;padding:9px 0;min-height:44px;
  font-size:15px;line-height:1.5;color:var(--on-dark);opacity:.82;
}
.foot-col a:hover{opacity:1}
.foot-mark b{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.02em;display:block}
.foot-mark span{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted-dark)}
.foot-legal{
  padding-top:24px;border-top:1px solid var(--hair-dark);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  font-size:13.5px;color:var(--muted-dark);
}
.foot-legal a{opacity:.85;min-height:44px;display:inline-flex;align-items:center}

/* ============================================================
   THE WALKTHROUGH — see the room before speaking to anyone.

   Two states, both real:

   FALLBACK (no JS): every stop is visible, stacked, in order,
   with its own heading, photograph and caption. It reads as an
   illustrated sequence. The rail renders as a plain list of
   in-page links and the prev/next controls are hidden, because
   without script they would be buttons that do nothing.

   LIVE (.walk-live added by js): one stop at a time, a numbered
   rail with tab semantics, keyboard arrows, prev/next.
   ============================================================ */
.walk{margin-top:34px}
.walk-frame{
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
}
.dark .walk-frame{background:var(--dark-2);border-color:var(--hair-dark)}

/* the rail */
.walk-rail{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:12px;
  border-bottom:1px solid var(--hair);
  background:var(--paper);
}
.dark .walk-rail{background:rgba(237,241,249,.04);border-bottom-color:var(--hair-dark)}
.walk-rail a,.walk-rail button{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:8px 13px;
  border:1px solid transparent;
  border-radius:9px;
  font-size:14px;font-weight:500;line-height:1.25;
  color:var(--ink);
  text-align:left;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.dark .walk-rail a,.dark .walk-rail button{color:var(--on-dark)}
.walk-rail a:hover,.walk-rail button:hover{background:rgba(15,28,54,.05)}
.dark .walk-rail a:hover,.dark .walk-rail button:hover{background:rgba(237,241,249,.07)}
.walk-rail [aria-selected="true"]{
  background:var(--blue-soft);
  border-color:var(--blue);
  color:var(--blue);
  font-weight:600;
}
.dark .walk-rail [aria-selected="true"]{background:rgba(127,161,240,.16);border-color:var(--blue-lt);color:var(--blue-lt)}
.walk-rail .n{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--muted);font-weight:600;flex:none;
}
.dark .walk-rail .n{color:var(--muted-dark)}
.walk-rail [aria-selected="true"] .n{color:inherit}

/* a stop */
.walk-stop{padding:0}
.walk-stop + .walk-stop{border-top:1px solid var(--hair)}
.dark .walk-stop + .walk-stop{border-top-color:var(--hair-dark)}
.walk-live .walk-stop + .walk-stop{border-top:0}
.walk-stop:focus{outline:none}
.walk-shot img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:0;
}
@media (max-width:560px){.walk-shot img{aspect-ratio:4/3}}
.walk-body{padding:clamp(20px,3.4vw,30px)}
.walk-body .n{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:9px;
}
.dark .walk-body .n{color:var(--muted-dark)}
.walk-body h3{font-size:clamp(21px,3vw,29px)}
.walk-body p{margin-top:11px;font-size:16.5px;max-width:60ch}
.walk-body .walk-notice{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--muted);max-width:56ch;
}
.dark .walk-body .walk-notice{border-top-color:var(--hair-dark);color:var(--muted-dark)}
.walk-body .walk-notice b{
  color:var(--ink);text-transform:uppercase;letter-spacing:.13em;
  font-size:10.5px;display:block;margin-bottom:4px;font-weight:600;
}
.dark .walk-body .walk-notice b{color:var(--on-dark)}

/* controls — only meaningful once script is running */
.walk-controls{display:none}
.walk-live .walk-controls{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px clamp(20px,3.4vw,30px) 20px;
  border-top:1px solid var(--hair);
}
.dark .walk-live .walk-controls{border-top-color:var(--hair-dark)}
.walk-controls button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;
  border:1px solid var(--hair-2);border-radius:var(--radius-sm);
  font-size:15px;font-weight:600;line-height:1.2;color:var(--ink);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.dark .walk-controls button{color:var(--on-dark);border-color:var(--hair-dark-2)}
.walk-controls button:hover:not(:disabled){border-color:var(--ink);background:rgba(15,28,54,.04)}
.dark .walk-controls button:hover:not(:disabled){border-color:var(--on-dark);background:rgba(237,241,249,.07)}
.walk-controls button:disabled{opacity:.42;cursor:default}
.walk-count{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-left:auto;
}
.dark .walk-count{color:var(--muted-dark)}

/* ============================================================
   THE FILM — a click-to-play facade.

   Until the button is pressed this is a photograph and a button.
   No iframe exists in the document, so no request goes to any
   Google domain, no cookie is set and nothing is measured. The
   iframe is built in js/zen.js on the click and points at
   youtube-nocookie.com. Verified in headless Chrome: zero
   requests to youtube, ytimg, googlevideo or doubleclick on
   load; the first one is the click.
   ============================================================ */
.film{margin:0 0 clamp(30px,4.5vw,48px)}
.film-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--dark);
}
.film-poster{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.film-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,15,22,.12) 0%,rgba(11,15,22,.30) 55%,rgba(11,15,22,.58) 100%);
}
.film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.film-play{
  position:absolute;left:50%;bottom:clamp(18px,4vw,32px);
  transform:translateX(-50%);
  z-index:2;
  display:inline-flex;align-items:center;gap:14px;
  min-height:56px;padding:10px 26px 10px 12px;
  border-radius:100px;
  background:rgba(11,15,22,.74);
  border:1px solid rgba(240,238,233,.34);
  color:var(--on-dark);
  font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.2;
  /* the label broke over two lines at 390px and read as a mistake */
  white-space:nowrap;
  transition:background .2s var(--ease);
}
@media (max-width:420px){.film-play{font-size:15px;padding:10px 20px 10px 11px;gap:11px}}
@supports (backdrop-filter:blur(2px)){.film-play{backdrop-filter:blur(8px)}}
.film-play:hover{background:rgba(11,15,22,.9)}
.film-play:focus-visible{outline:3px solid var(--on-dark);outline-offset:4px}
.film-play-mark{
  width:36px;height:36px;flex:none;border-radius:50%;
  background:var(--on-dark);position:relative;
}
.film-play-mark::before{
  content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-left:12px solid var(--dark);
  border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;
}
.film figcaption{
  font-family:var(--mono);font-size:11.5px;line-height:1.5;
  color:var(--muted);margin-top:12px;letter-spacing:.02em;
}

/* Spam trap. Off-screen rather than display:none, because some bots
   skip anything hidden. Never focusable, never announced. */
.trap{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

/* ---------- sticky mobile CTA ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(10,18,36,.97);
  border-top:1px solid var(--hair-dark);
  padding:10px var(--gut);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  display:none;
  gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.dock-t{font-size:13.5px;line-height:1.35;color:var(--on-dark);max-width:20ch}
.dock .btn{min-height:46px;padding:11px 18px;font-size:15px;flex:none}
@media (max-width:900px){.dock{display:flex}body{padding-bottom:76px}}
/* Once the form itself is on screen the dock is pointing at the thing
   it is covering, so it leaves. Enhancement only: without JS it stays. */
.dock-away{transform:translateY(105%);transition:transform .3s var(--ease)}
@media (prefers-reduced-motion:reduce){.dock-away{transition:none}}

/* ---------- mobile menu — a <details>, so it needs no script ---------- */
/* The menu used to be the small-screen fallback and was hidden above
   900px, because desktop had the three inline links. It now carries
   the trial action and the appearance control as well, so it has to
   exist at every width. The inline links stay on desktop: they are
   shortcuts, and hiding a shortcut behind a click to look tidier
   costs the reader more than the tidiness is worth. */
.menu{position:relative;display:block}
.menu > summary{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:9px 14px;
  border:1px solid var(--hair-2);border-radius:var(--radius-sm);
  font-size:14.5px;font-weight:600;cursor:pointer;list-style:none;
}
.menu > summary::-webkit-details-marker{display:none}
/* the typed "+"/"-" pair was replaced by the drawn .menu-x, which
   can rotate between the two states instead of swapping glyphs */
.menu-panel{
  position:absolute;right:0;top:calc(100% + 9px);z-index:90;
  min-width:232px;
  background:var(--paper);
  border:1px solid var(--hair-2);
  border-radius:12px;
  padding:7px;
  box-shadow:0 18px 40px -20px rgba(15,28,54,.55);
}
.menu-panel a{
  display:block;padding:11px 13px;min-height:44px;
  font-size:15.5px;line-height:1.4;border-radius:9px;
}
.menu-panel a:hover{background:rgba(15,28,54,.06)}

/* ---------- motion: opt-in, and only when allowed ---------- */
/* Default state is VISIBLE. JS adds .motion to <html> only when
   motion is permitted, which is what arms the hidden state.
   With JS off, or reduced-motion on, everything is simply visible. */
.motion .reveal{opacity:0;transform:translateY(14px)}
.motion .reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.motion .reveal-kids > *{opacity:0;transform:translateY(12px)}
.motion .reveal-kids.in > *{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.motion .reveal-kids.in > *:nth-child(2){transition-delay:.07s}
.motion .reveal-kids.in > *:nth-child(3){transition-delay:.14s}
.motion .reveal-kids.in > *:nth-child(4){transition-delay:.21s}
.motion .reveal-kids.in > *:nth-child(5){transition-delay:.28s}
.motion .reveal-kids.in > *:nth-child(6){transition-delay:.35s}

@media (prefers-reduced-motion:reduce){
  .motion .reveal,.motion .reveal-kids > *{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ============================================================
   PAIRS — a two-column row for LIGHT backgrounds.

   .commit is the same "left thing, right qualification" shape,
   but every ink and rule in it is measured against --dark and
   only against --dark: on paper its right-hand column would sit
   at roughly 2.6:1. Rather than weaken .commit, this is its
   light-surface twin, measured on --paper.
   Added for the leadership brief, which is read on screen and
   then printed on white.
   ============================================================ */
.pairs{display:grid;gap:0;margin-top:26px;border-top:2px solid var(--hair-2)}
.pair{
  display:grid;grid-template-columns:1fr;gap:5px;
  padding:17px 0;border-bottom:1px solid var(--hair);
}
@media (min-width:760px){
  .pair{grid-template-columns:1fr 1.15fr;gap:30px;align-items:baseline}
}
.pair-a{font-weight:600;font-size:16px;line-height:1.45;color:var(--ink)}
.pair-b{font-size:15.5px;line-height:1.6;color:var(--muted);max-width:52ch}
.dark .pair{border-bottom-color:var(--hair-dark)}
.dark .pairs{border-top-color:var(--hair-dark-2)}
.dark .pair-a{color:var(--on-dark)}
.dark .pair-b{color:var(--muted-dark)}

/* ============================================================
   THE BRIEF'S CLOSING RULE — one line, four items, inline.

   The previous leadership brief pushed the "Systems by
   compound.business" credit onto its own centred row of a
   separate document footer, where it read as an orphan. Here
   the four items are members of one flex rule and cannot be
   separated from it. No telephone number appears: three
   different numbers exist across this project's documents and
   none is confirmed.
   ============================================================ */
.brief-rule{
  margin-top:36px;padding-top:18px;
  border-top:2px solid var(--hair-2);
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:4px 14px;
  font-family:var(--mono);font-size:11.5px;line-height:1.85;
  letter-spacing:.05em;color:var(--muted);max-width:none;
}
.brief-rule b{color:var(--ink);font-weight:600}
.brief-rule a{color:var(--muted);border-bottom:1px solid var(--hair-2)}
.brief-rule .sep{color:var(--muted)}  /* was --hair-2, measured 1.66:1 */

/* ============================================================
   LEGAL DOCUMENTS — /privacy and /terms only.

   Those two pages are the one place on this site where a real
   bulleted list is the honest form: an enumeration of rights or
   of prohibited uses is a list, and flattening it into prose
   would make it harder to check. The reset at the top of this
   file removes list markers globally, so the markers are put
   back here rather than site-wide.

   .doc is a single reading column. .doc-list is the bulleted
   list. Nothing else on the site uses either.
   ============================================================ */
.doc{max-width:76ch}
.doc h2{margin-top:44px;font-size:clamp(22px,3vw,30px)}
.doc h3{margin-top:26px;font-size:17px;font-family:var(--sans);font-weight:700}
.doc p{margin-top:14px;max-width:72ch}
.doc .rule{margin:36px 0}
.doc-list{
  list-style:disc;
  padding-left:22px;
  margin-top:14px;
  max-width:70ch;
}
.doc-list li{
  list-style:disc;
  margin-bottom:8px;
  padding-left:2px;
  line-height:1.6;
}
.doc-list li::marker{color:var(--muted)}

/* ============================================================
   THE LOGO WALL — every logo on disk, one caption, one sentence.

   The old strip showed two logos and withheld thirteen behind a
   comment. Presence is not proof, but presence is worth showing;
   it just gets a different caption. The caption is fixed by
   proof.json's logoWall.correctCaption and is not editable here.
   ============================================================ */
.logo-wall{
  display:grid;
  /* Fifteen logos. Three across on a phone and five across above 760px
     both divide exactly, so no row is left with one orphan on it. */
  grid-template-columns:repeat(3,1fr);
  align-items:center;
  gap:clamp(22px,3.6vw,44px) clamp(18px,3vw,38px);
}
@media (min-width:760px){.logo-wall{grid-template-columns:repeat(5,1fr)}}
.logo-wall img{
  height:26px;width:auto;max-width:100%;
  margin:0 auto;
  opacity:.55;
  filter:grayscale(1);
}
@media (min-width:760px){.logo-wall img{height:30px}}
.logo-cap{
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  color:var(--muted);margin-top:clamp(26px,4vw,40px);
  padding-top:20px;border-top:1px solid var(--hair);
  max-width:none;
}
.logo-note{margin-top:10px;font-size:15.5px;color:var(--muted);max-width:64ch}

/* ============================================================
   DISCLOSURE — the deep proof, folded.

   A visitor who has watched the tour is a different reader from
   one who has not, and the second reader does not want eleven
   hundred words of methodology in front of the room. This is
   native <details>, so it works with script off, prints open on
   request, and is searchable in-page in every modern browser.

   Visually distinct from .faq on purpose: .faq summaries are
   serif questions, these are sans-serif labels. Two disclosure
   lists on one page must not read as the same component.
   ============================================================ */
.disclose{margin-top:clamp(26px,4vw,40px);border-top:1px solid var(--hair-2)}
.disclose details{border-bottom:1px solid var(--hair)}
.disclose summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 2px;min-height:56px;cursor:pointer;
  font-family:var(--sans);font-size:16.5px;font-weight:600;line-height:1.4;
  list-style:none;
}
.disclose summary::-webkit-details-marker{display:none}
.disclose summary::after{
  content:"+";
  font-family:var(--sans);font-size:22px;line-height:1;color:var(--muted);
  flex:none;font-weight:400;
}
.disclose details[open] summary::after{content:"\2013"}
.disclose summary:hover{color:var(--blue)}
.disclose-b{padding:2px 0 34px;max-width:72ch}
.disclose-b p{font-size:16px;max-width:66ch}
.disclose-b > * + *{margin-top:14px}
.disclose-b .readings{margin-top:22px}
.disclose-b .shot-grid{margin-top:22px}
.dark .disclose{border-top-color:var(--hair-dark-2)}
.dark .disclose details{border-bottom-color:var(--hair-dark)}

/* the provenance line, standing alone under a claim rather than
   under a .reading. Gold, because gold is provenance. */
.cite{
  font-family:var(--mono);font-size:12px;line-height:1.55;
  letter-spacing:.02em;color:var(--muted);max-width:64ch;margin-top:12px;
}
.cite b{
  display:block;font-weight:600;color:var(--gold-ink);
  text-transform:uppercase;letter-spacing:.13em;font-size:10.5px;margin-bottom:3px;
}
.dark .cite{color:var(--muted-dark)}
.dark .cite b{color:var(--gold)}

/* three zones side by side, replacing three full-width blocks */
.trio{
  display:grid;gap:clamp(22px,3vw,32px);
  grid-template-columns:1fr;
  margin-top:clamp(30px,4vw,46px);
}
@media (min-width:820px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio img{aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);width:100%}
.trio h3{margin-top:18px;font-size:clamp(21px,2.6vw,26px)}
.trio p{margin-top:8px;font-size:16px;color:var(--muted);max-width:34ch}
.trio .trio-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:block;margin-top:16px;
}
.trio h3 + .trio-n{margin-top:10px}

/* a section that opens on nothing but a rule */
.opener-rule{height:1px;background:var(--hair-2);border:0;margin:0}
.dark .opener-rule{background:var(--hair-dark-2)}

/* ---------- print ---------- */
@media print{
  header.site,.dock,footer.site .foot-cta{display:none}
  body{background:#fff;color:#000}
  section{padding:18px 0;break-inside:avoid}
  .hero{background:#fff;color:#000}
  .hero-media,.hero-scrim{display:none}
  .hero h1,.hero-lede,.hs-fig,.hs-what{color:#000}
}

/* ============================================================
   PRINT — THE LEADERSHIP BRIEF (body.brief)

   The brief is written to be forwarded, and forwarded usually
   means printed or saved as a PDF. The previous version forced
   the document into exactly two pages and read as cramped, and
   it did it with fixed-height page shells, which stranded dead
   whitespace wherever a block would not fit the shell.

   This does the opposite. Content flows naturally; the only
   instructions given to the printer are (a) do not split these
   blocks and (b) start these two sections on a fresh page.
   The page count is a result, not a target. At A4 with a 14mm
   margin it lands on three.
   ============================================================ */
@media print{
  @page{size:A4;margin:14mm}

  .brief header.site,
  .brief footer.site,
  .brief .dock,
  .brief .no-print{display:none!important}

  .brief{background:#fff;color:#000;font-size:11.5px;line-height:1.48;padding-bottom:0!important}
  .brief .wrap{max-width:100%;padding:0}
  .brief section{padding:9px 0;break-inside:auto}

  /* The colophon may not open a page by itself. Left free it took a
     whole fourth sheet for one contact line, which reads as a printing
     fault rather than a document. */
  .brief footer.site,.brief .foot-legal{break-before:avoid;page-break-before:avoid}
  .brief section:first-of-type{padding-top:0}

  /* An A4 page is about 690 CSS px wide, which is under every
     min-width query in this sheet, so on paper the two-column
     blocks would all collapse into one long column and the brief
     would run to six pages of half-empty rows. On paper the
     columns are restored explicitly. */
  .brief .split{grid-template-columns:1fr 1fr;gap:26px}
  .brief .split-13{grid-template-columns:1.05fr 1fr}
  .brief .commit-row{grid-template-columns:1.1fr 1fr;gap:24px;align-items:baseline}
  .brief .pair{grid-template-columns:1fr 1.2fr;gap:24px;align-items:baseline}

  /* The two deliberate page starts, WITHDRAWN 4 August 2026.

     A forced break is only ever as good as the length of the text
     above it. When the 91% reading grew by a line to carry its
     population, the paragraph before this break stopped fitting
     with its neighbours and landed alone: page two of a document
     that goes to a CFO held 241 characters and nothing else.

     A forced break cannot know that happened, which is why it does
     not belong in a document whose content changes. The break-inside
     rules below already keep every block whole, and that is the
     protection that actually holds as the text moves. */
  .brief .break-page{break-before:auto;page-break-before:auto}

  /* keep a block whole rather than let it straddle a fold */
  .brief .reading,
  .brief .pair,
  .brief .commit-row,
  .brief .step,
  .brief .card,
  .brief .commit-note,
  .brief .pull,
  .brief .brief-rule,
  .brief figure.shot{break-inside:avoid;page-break-inside:avoid}

  /* a heading never sits alone at the foot of a page */
  .brief h1,.brief h2,.brief h3,.brief h4,
  .brief .kicker,.brief .statement{break-after:avoid;page-break-after:avoid}
  .brief p{orphans:3;widows:3}

  /* dark and tinted panels become paper, and their inks come
     back to black so nothing is printed at 2:1 on white */
  .brief .dark,.brief .tint,.brief .tint-2{background:#fff!important;color:#000!important}
  .brief .dark h2,.brief .dark h3,.brief .dark p,
  .brief .dark .lede,.brief .dark .commit-what{color:#000!important}
  .brief .dark h1 em,.brief .dark h2 em,.brief .dark h3 em,
  .brief .dark .statement em{color:#1F41AC!important}
  .brief .dark .kicker,.brief .dark .commit-who,
  .brief .dark .muted,.brief .dark .reading-src{color:#3E4A61!important}
  .brief .dark .commit,.brief .dark .commit-row,
  .brief .dark .reading{border-color:rgba(0,0,0,.22)!important}
  .brief .dark .commit-note{border-color:#856121!important}
  .brief .dark .commit-note b,.brief .dark .reading-src b,
  .brief .dark .kicker.gold{color:#856121!important}

  /* print density: the brief breathes, it does not shout */
  .brief h1{font-size:29px;line-height:1.06}
  .brief h2{font-size:19px}
  .brief h3{font-size:15.5px}
  .brief .lede{font-size:13px;line-height:1.5;max-width:66ch}
  .brief .reading-fig{font-size:25px}
  .brief .reading-what{font-size:11.5px}
  .brief .reading-src{font-size:9.5px;line-height:1.45}
  .brief .readings{column-gap:22px;grid-template-columns:repeat(4,1fr);margin-top:18px}
  .brief .reading{padding:11px 0}
  .brief .pair{padding:8px 0}
  .brief .steps{margin-top:16px}
  .brief .lede{margin-top:12px}
  .brief p + p{margin-top:9px}
  .brief .pull{margin:14px 0 0;padding-left:16px;font-size:13px;max-width:60ch}
  .brief .pair-a{font-size:11.8px}
  .brief .pair-b{font-size:11.3px}
  .brief .commit-what{font-size:13px}
  .brief .commit-who{font-size:9.5px}
  .brief .commit-row{padding:13px 0}
  /* on screen this note is held to 62ch beside other content; on
     paper it is the full measure of the page, so it sets as three
     lines instead of six and stops pushing the section over a fold */
  .brief .commit-note{font-size:11px;padding:13px 15px;max-width:none;margin-top:14px}
  .brief .step{padding:10px 0}
  .brief .step p{font-size:11.3px}
  .brief .kicker{font-size:9px;margin-bottom:10px}
  .brief .pull{font-size:14px}
  .brief .brief-rule{font-size:9.5px;margin-top:14px;padding-top:10px;line-height:1.5}
  .brief a{color:#000;text-decoration:none}
}

/* ============================================================
   RHYTHM, REVISED — 4 August 2026

   The old rhythm was width-only: clamp(76px,10.5vw,152px). On a
   1440-wide, 900-tall desktop that is fine. On a 1000x625 laptop
   it spends a third of the visible screen on padding, and every
   section reads as mostly empty with a paragraph floating in it.

   Air should be governed by the SHORTER dimension. min(vw,vh)
   keeps the generous feel on a big monitor and takes it back on
   a short screen, which is where the site actually gets read.
   ============================================================ */
:root{
  --sec:clamp(52px, min(8vw, 10vh), 112px);
  --sec-tight:clamp(38px, min(5.4vw, 7vh), 76px);
}

/* Dense sections carry their own weight and do not need the full
   measure: a logo wall or an evidence table is already busy. */
#evidence,
#tour,
#clients,
.sec-tight{padding:var(--sec-tight) 0}

/* A split whose columns differ in length must align at the top.
   Centring leaves a short column floating with dead space above
   and below it, which is most of what looked broken. */
.split,.split-13{align-items:start}

/* ============================================================
   THE TOUR — ONE SCREEN

   Stacked, a 16:9 image at 1136px wide is 639px tall, so the
   reader meets a full screen of photograph before a single word
   and the Back/Next controls sit below the fold. Side by side
   the whole stop, image, copy and controls, fits one viewport.
   ============================================================ */
@media (min-width:900px){
  .walk-stop{
    display:grid;
    grid-template-columns:1.02fr .98fr;
    align-items:stretch;
    min-height:clamp(300px, 46vh, 430px);
  }
  /* JS toggles the `hidden` ATTRIBUTE. A class rule setting
     display would beat the UA's [hidden]{display:none} and paint
     all six stops at once, so restate it at higher specificity. */
  .walk-stop[hidden]{display:none}

  .walk-shot{height:100%;min-height:0}
  .walk-shot img{
    height:100%;width:100%;
    aspect-ratio:auto;
    object-fit:cover;
    min-height:clamp(300px, 46vh, 430px);
  }
  .walk-body{
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(24px,2.6vw,38px);
  }
  .walk-body p{font-size:16px;max-width:44ch}
  .walk-body .walk-notice{max-width:44ch}
}

/* ============================================================
   THE TOUR ON A PHONE

   The rail wrapped onto three rows, which cost more height than
   the photograph saved. One scrolling strip, snapped, with the
   selected stop always pulled into view by the existing JS.
   ============================================================ */
@media (max-width:899px){
  .walk-rail{
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:9px 10px;
  }
  .walk-rail::-webkit-scrollbar{display:none}
  .walk-rail a,.walk-rail button{flex:none;scroll-snap-align:start;min-height:40px;padding:7px 12px}
  .walk-shot img{aspect-ratio:5/3}
  .walk-body{padding:clamp(18px,4.5vw,24px)}
}

/* A hairline that separates photograph from copy without drawing
   a line anybody notices. */
@media (min-width:900px){
  .walk-body{border-left:1px solid var(--hair)}
  .dark .walk-body{border-left-color:var(--hair-dark)}
}

/* ============================================================
   DOWNLOAD BUTTONS — cfo-brief

   A CFO deciding whether to click a PDF wants to know what it
   is going to cost them: how long, how heavy, and whether it
   is going to take away the page they are reading. All three
   answers now sit on the button itself.
   ============================================================ */
.dl-row{gap:14px}
.dl{
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  min-height:62px;
  padding:12px 22px;
  text-align:left;
}
.dl .dl-t{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:600;font-size:15.5px;line-height:1.25;
}
.dl .dl-m{
  font-family:var(--mono);
  font-size:11.5px;letter-spacing:.03em;line-height:1.35;
  font-weight:400;
  color:var(--muted);
}
.btn.dl .dl-m{color:rgba(255,255,255,.74)}
.dark .btn-2.dl .dl-m{color:var(--muted-dark)}
.dl-ext{opacity:.45;flex:none;transform:translateY(-.5px);transition:opacity .18s var(--ease)}
.btn-2.dl:hover .dl-ext,.btn-2.dl:focus-visible .dl-ext{opacity:.95}

/* On a phone a row of three stacked-label buttons wraps badly.
   Full width, in order, each one an easy target. */
@media (max-width:640px){
  .dl-row{flex-direction:column;align-items:stretch;gap:10px}
  .dl{width:100%}
}

/* ============================================================
   BIG SCREENS — 4 August 2026

   The site is shown in client meetings: a MacBook driving an
   office display, or a scaled Retina panel. At --wrap:1180px a
   2560-wide screen puts the whole company inside a narrow
   column with a field of empty paper either side, which reads
   as a small business rather than a confident one.

   Three things grow together, or it looks stretched instead of
   scaled: the measure, the prose, and the headline ceiling.
   Body copy is the lever, because `p` inherits from body and
   the component sizes below ride along with it.

   Line length is still governed by `p{max-width:68ch}`, so the
   measure never becomes unreadable no matter how wide it gets.
   ============================================================ */
/* 1400 rather than 1500: a 13-inch MacBook Air at its default
   scaled resolution lands at 1470 wide and would otherwise miss
   the bump by thirty pixels. */
@media (min-width:1400px){
  :root{--wrap:1260px}
  body{font-size:17.5px}
  .card p,.step p,.faq-a p,.form-done p{font-size:16px}
  .zone-p{font-size:17px}
}

@media (min-width:1800px){
  :root{--wrap:1380px}
  body{font-size:18px}
  h1{font-size:clamp(33px,6.4vw,70px)}
  h2{font-size:clamp(26px,4.4vw,50px)}
  h3{font-size:clamp(19px,2.6vw,29px)}
  .hero-lede{font-size:clamp(17px,2.05vw,22px)}
  .card p,.step p,.faq-a p,.form-done p{font-size:16.5px}
  .zone-p{font-size:17.5px}
  .walk-body p{font-size:17px}
  /* The photograph should keep its share of a tall display. */
  .walk-stop,.walk-shot img{min-height:clamp(300px,46vh,520px)}
}

@media (min-width:2200px){
  :root{--wrap:1480px}
  body{font-size:18.5px}
  h1{font-size:clamp(33px,6.4vw,78px)}
  h2{font-size:clamp(26px,4.4vw,56px)}
}


/* ============================================================
   WHO BUILT THIS

   The founders were a collapsed disclosure. Promoted to a section
   on 4 August 2026, because a CFO signing a multi-year room asks
   who is behind it before asking what it costs, and that answer
   should not be behind a control nobody clicks.

   Two portraits, side by side on every width. They do not stack
   on a phone: seen together they read as two people who run a
   company, and stacked they read as two separate testimonials.
   ============================================================ */
.founders{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px,2.4vw,22px);
  align-content:start;
}
.founder{margin:0}
.founder img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius);
  display:block;
}
.founder figcaption{
  margin-top:11px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.founder figcaption b{
  font-family:var(--serif);
  font-size:clamp(16px,1.9vw,18.5px);
  font-weight:600;
  letter-spacing:-.01em;
}
.founder figcaption span{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--muted);
}
.founder figcaption .tlink{
  margin-top:5px;
  font-size:13px;
  min-height:0;
  align-self:flex-start;
}
@media (max-width:899px){
  .founders{margin-top:30px}
}


/* ============================================================
   THE THREE ZONES AS A SEQUENCE, NOT A MENU

   The section headline argues that the ORDER is the point:
   three zones, in this order, for a reason. The layout was
   contradicting it. Three equal cards side by side read as a
   feature list, where any one could be visited first, and the
   thesis of the section is that they cannot.

   So the order is drawn rather than asserted. A rule runs from
   each zone to the next, the ordinal is promoted to a marker
   sitting on that rule, and the last one closes rather than
   trailing off. Nothing is hidden and nothing is tabbed: three
   steps understood as an order have to be seen together, which
   is exactly the case where a stepper would be the wrong tool.
   ============================================================ */
/* A connecting rule was drawn here and removed. It depended on knowing
   the vertical position of the marker inside each card, which varies with
   the image and the headline wrap, so it landed in the wrong place. The
   markers below carry the sequence on their own without guessing at a
   coordinate that is not knowable from CSS. */
/* the ordinal, promoted from a caption to a step marker */
.trio-n{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.trio-n::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:var(--blue);
  flex:none;
}
.trio > div:last-child .trio-n::before{
  /* the end of a sequence should look like an end */
  background:none;
  border:2px solid var(--blue);
  width:9px;height:9px;
}


/* ============================================================
   THE HERO, REBUILT AS A SPLIT

   The old hero laid white type over a photograph, which forced a
   scrim at 90% opacity to keep the words legible. That is a fair
   trade when the photograph is a silhouette. It is a bad one when
   the photograph is a bright, daylit, empty room, because the
   scrim destroys the only thing worth showing.

   So the two stop competing. Words sit on paper, the room sits
   beside them at full brightness, and neither is compromised for
   the other. It is also the same grammar as the tour, image one
   side and copy the other, so the page gains a pattern instead of
   carrying a one-off.
   ============================================================ */
.hero-split{
  background:var(--paper);
  color:var(--ink);
  padding:clamp(30px,5vh,64px) 0 clamp(38px,6vh,72px);
  overflow:visible;
}
.hero-split .hero-grid{
  display:grid;
  gap:clamp(26px,4vw,48px);
  align-items:center;
}
@media (min-width:900px){
  .hero-split .hero-grid{grid-template-columns:1fr 1.06fr}
}
.hero-split .hero-inner{max-width:none}
.hero-split h1{color:var(--ink)}
.hero-split h1 em{color:var(--blue)}
.hero-split .hero-eyebrow{
  font-family:var(--mono);
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:16px;
}
.hero-split .hero-lede{color:var(--muted);max-width:46ch}
.hero-split .btn-2{color:var(--ink);border-color:var(--hair-2)}
.hero-split .btn-2:hover{border-color:var(--ink);background:rgba(15,28,54,.04)}

.hero-shot{margin:0}
.hero-shot img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:var(--radius);
  display:block;
}
.hero-shot figcaption{
  margin-top:13px;
  font-family:var(--mono);
  font-size:12.5px;line-height:1.6;
  color:var(--muted);
  max-width:52ch;
}
/* On a phone the words land first and the room proves them, rather
   than a photograph pushing the proposition below the fold. */
@media (max-width:899px){
  .hero-split .hero-grid{grid-template-columns:1fr}
  .hero-shot img{aspect-ratio:4/3}
  .hero-shot figcaption{font-size:12px}
}


/* The hero italic must follow the accent rule the brand book states:
   deep blue is the signal colour BECAUSE it survives on paper at
   7.35:1, and the light periwinkle sits at 2.23:1 and fails AA. That
   light value was correct while the hero was a dark photograph. It is
   wrong now the hero is paper, and a headline is the last place to
   lose contrast. Targeted at the class so it beats .em-blue. */
.hero-split h1 em,
.hero-split h1 .em-blue{color:var(--blue)}


/* ============================================================
   HERO, THIRD VERSION: a statement, then the room

   The split version was replaced because it was the default
   landing page: two columns, rounded image, paired buttons. The
   fix is not a restyle, it is removing the container. A room
   photographed edge to edge at the full width of a screen is a
   different experience from the same photograph inside a card,
   and only one of them feels like being shown something.
   ============================================================ */
.hero-open{
  background:var(--paper);
  color:var(--ink);
  padding:clamp(34px,6vh,84px) 0 0;
  overflow:visible;
}
.hero-open .hero-inner{max-width:none}
.hero-open h1{
  color:var(--ink);
  max-width:16.5ch;            /* narrowed 6 Aug: a longer H1 now runs under the floor plan at this width */
  margin-top:14px;
}
.hero-open h1 em,.hero-open h1 .em-blue{color:var(--blue)}
.hero-open .hero-eyebrow{
  font-family:var(--mono);
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);display:block;
}
.hero-open .hero-lede{
  color:var(--muted);
  max-width:52ch;
  margin-top:clamp(18px,2.4vw,26px);
}
.hero-open .btn{margin-top:clamp(24px,3vw,34px)}

/* the room, at the width of the screen */
.hero-plate{
  margin:clamp(34px,5vh,64px) 0 0;
  position:relative;
}
.hero-plate img{
  width:100%;
  height:auto;
  aspect-ratio:21/9;
  object-fit:cover;
  object-position:50% 54%;
  display:block;
  border-radius:0;             /* no card. it is the page, not an item on it */
}
.hero-plate figcaption{
  padding:14px 0 0;
  /* Was var(--mono). Monospace on a LABEL is a defensible convention;
     monospace on a two-sentence caption is the template tell, and it
     is the same one already removed from the kicker, the source
     labels, the zone numbers and the footer headings. Those sweeps
     looked for labels, so a sentence set in the label's typeface
     survived all four. A caption is prose. It gets the prose face. */
  font-family:var(--sans);
  font-size:13.5px;line-height:1.6;letter-spacing:-.004em;
  color:var(--muted);
}
/* the caption returns to the text column while the image does not */
.hero-plate figcaption .wrap{display:block;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

@media (max-width:899px){
  .hero-open{padding-top:clamp(24px,4vh,40px)}
  .hero-open h1{max-width:none}
  .hero-plate{margin-top:clamp(26px,4vh,40px)}
  .hero-plate img{aspect-ratio:5/4;object-position:50% 56%}
  .hero-plate figcaption{font-size:12px}
}


/* ------------------------------------------------------------
   Getting the room ABOVE the fold.

   Measured, not guessed: on a 1440x900 screen the photograph was
   starting at 820px, leaving an 80px sliver. A hero whose subject
   requires a scroll is not a hero.

   Two hundred pixels recovered, in the order that costs least:
   the headline runs wider so it sets in two lines instead of
   three, then the vertical padding comes down. Type size is not
   touched, because the scale is the thing carrying the confidence.
   ------------------------------------------------------------ */
@media (min-width:900px){
  .hero-open{padding-top:clamp(18px,2.6vh,34px)}
  .hero-open h1{max-width:32ch;margin-top:12px}
  .hero-open .hero-lede{margin-top:18px}
  .hero-open .btn{margin-top:24px}
  .hero-plate{margin-top:clamp(22px,3vh,34px)}
}


/* ------------------------------------------------------------
   SHORT SCREENS.

   A 1000x625 laptop, which is what this actually gets read on,
   had the room at 733px with a 625px viewport: entirely below the
   fold, so the hero was a paragraph and a button.

   Width told us nothing here. The constraint is HEIGHT, so the
   query is on height. Type scales against the shorter dimension
   and the vertical rhythm halves. The aim is not to fit the whole
   photograph in, which is impossible beside a headline on a
   625px screen, but to get a real band of it into view so the
   reader knows the room is there.
   ------------------------------------------------------------ */
@media (max-height:800px){
  .hero-open{padding-top:12px}
  .hero-open h1{font-size:clamp(27px,min(5vw,6.4vh),46px);margin-top:9px;max-width:34ch}
  .hero-open .hero-eyebrow{font-size:10.5px}
  .hero-open .hero-lede{margin-top:13px;font-size:15.5px;max-width:56ch}
  .hero-open .btn{margin-top:17px;min-height:46px;padding:11px 22px}
  .hero-plate{margin-top:16px}
  .hero-plate img{aspect-ratio:2.6/1}
  .hero-plate figcaption{padding-top:10px;font-size:11.5px}
}


/* .hero-inner carries padding-top:130px, which existed to push the
   type down the face of a full-bleed photograph. There is no
   photograph behind it now, so it was 130px of nothing sitting
   between the header and the first word, and on a 625px laptop that
   is a fifth of the screen spent pushing the room out of sight. */
.hero-open .hero-inner{padding-top:0}


/* ============================================================
   THE ONE MOMENT OF MOTION

   Asked for something moving, once, used deliberately.

   What it is NOT: a marquee, a ticker, text sliding past. The
   subject of this photograph is an empty, still room, and the
   proposition is that nothing in it demands anything of you.
   Sliding type across it would argue the opposite in the one
   place the page can least afford it.

   What it is: the room settles. It arrives fractionally large
   and eases down to rest, once, on an exponential curve so the
   deceleration is felt rather than seen. Four and a half percent
   over one and a half seconds is below the threshold most people
   consciously notice; what registers is that the room came to
   rest rather than simply being there.

   That is the product. A person walks in carrying the charge of
   the day and the first thing that happens is that they settle.
   The hero performs the thesis instead of decorating it.

   It runs once, never loops, never repeats on scroll, and does
   not run at all for anyone who has asked their system for less
   motion. Only transform and opacity, so it is composited and
   costs no layout.
   ============================================================ */
.hero-plate{overflow:hidden}

@media (prefers-reduced-motion:no-preference){
  .hero-plate img{
    animation:room-settles 1500ms cubic-bezier(.16,1,.3,1) both;
    will-change:transform;
  }
  @keyframes room-settles{
    from{transform:scale(1.045);opacity:.82}
    to{transform:scale(1);opacity:1}
  }
}

/* The caption opens on the fact the eyebrow used to carry, so the
   sentence a reader meets while looking at the room tells them what
   the room is. It was doing nothing above the headline except
   labelling the page before it had said anything. */
.hero-plate figcaption b{color:var(--ink);font-weight:600}


/* ============================================================
   VERY LARGE SCREENS

   Text is already governed: --wrap caps at 1480px and p{max-width:68ch}
   holds the measure, so prose never sprawls however wide the monitor.

   The one element with no ceiling was the full-bleed photograph. It is
   2400px wide natively, so on a 2560 or 3440 display it was being
   upscaled and going soft, and at 21:9 across 3440px it stood over
   1400px tall, taller than most of the screens it would appear on.

   Two ceilings, and nothing else needs one.
   ============================================================ */
@media (min-width:1900px){
  /* the plate keeps its proportion to the screen rather than swallowing it */
  .hero-plate img{max-height:62vh}
}
@media (min-width:2500px){
  /* stop before the upscale shows. beyond its native width the
     photograph is being invented rather than displayed. */
  .hero-plate img{max-width:2400px;margin-left:auto;margin-right:auto}
}


/* ============================================================
   THE BOARD QUESTIONS ON A PHONE

   The role tag sat INLINE at the head of the answer, so the first
   line of every answer was indented around a pill and the text
   wrapped back under it. On a 390px screen that left a ragged
   notch at the top of each paragraph and made a section of long
   answers read as cramped.

   The tag is a label for the whole answer, not the first word of
   it, so on a phone it becomes its own line and behaves like one.
   ============================================================ */
@media (max-width:640px){
  .faq-a .faq-tag{
    display:block;
    width:fit-content;
    margin:0 0 9px;
  }
  .faq-a p{margin-top:0}
  .faq summary{padding:17px 0;line-height:1.4}
  .faq details + details{border-top:1px solid var(--hair)}
  .faq-a{padding-bottom:18px}
}

/* ============================================================
   THE MOBILE HEADER

   Three competing controls in 390px: a two-line wordmark, an
   outlined Menu button and a filled CTA. Two bordered pills side
   by side is one border too many, and the outline was giving the
   menu the same visual weight as the only action on the page.

   The menu loses its box and becomes what it is, a control you
   press to see more. The CTA keeps the only filled shape in the
   header, so there is exactly one obvious thing to do.
   ============================================================ */
@media (max-width:899px){
  .menu > summary{
    border:0;
    background:none;
    padding:8px 10px;
    color:var(--muted);
    font-weight:500;
  }
  .menu > summary:hover{color:var(--ink);background:rgba(15,28,54,.05)}
  .nav-links{gap:2px}
  header.site .btn{padding:11px 18px;min-height:44px;font-size:15px}
  .brand b{font-size:17.5px}
  .brand span{font-size:10px;letter-spacing:.15em}
}


/* The route back, on every page a homepage button leads to. */
.back-home{padding:clamp(26px,4vw,44px) 0 clamp(30px,5vw,54px);border-top:1px solid var(--hair)}
.back-home .btn-2{min-height:48px}
@media print{.back-home{display:none!important}}


/* The role tag is a label for the whole answer, not the first word of
   it. Inline, it forced every answer to start indented around a pill
   and wrap back underneath, which left a ragged notch at the top of
   each paragraph. That reads as broken at EVERY width, not just on a
   phone, so the earlier 640px-only fix was scoped wrong. */
.faq-a .faq-tag{
  display:block;
  width:fit-content;
  margin:0 0 10px;
}
.faq-a .faq-tag + *{margin-top:0}


/* ============================================================
   THE LOGO WALL, UNSQUASHED

   The rule was height:26px, width:auto, max-width:100%. For a
   normal logo that is fine. For a WIDE one it is not: Tata Power
   is 8.97:1, so at 26px tall it wants 233px of width, the grid
   cell on a phone is 105px, and max-width clamps the width while
   the fixed height holds. The result is a logo squashed to 45% of
   its correct proportion, which is the one thing you must never do
   to somebody else's trademark.

   object-fit:contain makes the clamp letterbox instead of squash.
   Found by comparing natural aspect to rendered aspect at three
   widths, which is the only way to see it: it looks like a logo,
   just a wrong one.
   ============================================================ */
.logo-wall img{object-fit:contain}


/* ============================================================
   THE TYPE SYSTEM
   ============================================================

   Adopted 4 August 2026 from wordmark option 2, after a round of
   comparisons against the sans. The wordmark is not a special
   case sitting on top of the site: it is the first instance of
   the rule, and the rule now governs every heading.

   THREE THINGS, and the third is the one nobody does.

   1. OPTICAL SIZE. Newsreader carries an opsz axis from 6 to 72.
      Every heading here rendered at the default, which is a text
      design: sturdy serifs, low stroke contrast, engineered to
      survive inside a paragraph at 16px. At display sizes that
      reads as heavy and undifferentiated, which is most of what
      "generic" means in a typeface. Headings now request the
      display cut and get finer hairlines and sharper serifs.

   2. WEIGHT. 600 to 650. Enough to hold the page down without
      becoming a slab.

   3. TRACKING THAT MOVES WITH SIZE. Type set at 62px needs
      considerably tighter letterspacing than the same face at
      19px, because the gaps scale with the glyphs while the eye
      does not. One tracking value across a scale is the single
      most common reason a typographic system looks untuned. So
      the larger the heading, the tighter it is set: -0.042em at
      the top of the scale down to -0.018em at the bottom.

   This is the same discipline behind the headline typography
   the client admires on Apple's pages. It is not their typeface,
   which is a sans and would say engineered rather than
   considered. It is their method.
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-variation-settings:"opsz" 72;
  font-weight:650;
  line-height:1.1;
}
h1{letter-spacing:-.042em;line-height:1.02}
h2{letter-spacing:-.036em;line-height:1.06}
h3{font-variation-settings:"opsz" 48;font-weight:640;letter-spacing:-.026em}
h4{font-variation-settings:"opsz" 32;font-weight:620;letter-spacing:-.018em}

/* The italic clause inside a headline is set a touch lighter. At
   650 an italic serif thickens optically against its roman and
   starts to shout, which is the opposite of what the emphasis is
   for. */
h1 em,h2 em,h1 .em-blue,h2 .em-blue{font-weight:600}

/* Display figures follow the same rule: the bigger the number,
   the tighter it is set. */
.reading-fig,.hs-fig{font-variation-settings:"opsz" 72;letter-spacing:-.038em}

/* ============================================================
   THE WORDMARK
   Option C, in option 2. The rule runs the full width of the
   name and sets the mark's width; the parent name sits beneath
   it, right aligned to the same edge. The rule is structural,
   not decoration: it is what makes the lockup feel built rather
   than typed, and it is the only line of its kind on the site.
   ============================================================ */
.brand{display:block;padding:7px 0;min-height:44px}
.brand b{
  font-family:var(--serif);
  font-variation-settings:"opsz" 72;
  font-size:19.5px;font-weight:650;
  letter-spacing:-.042em;
  line-height:1;
  display:block;
}
.brand span{
  display:block;
  font-family:var(--serif);
  font-variation-settings:"opsz" 14;
  font-size:8.5px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);
  text-align:right;
  border-top:1px solid var(--hair-2);
  margin-top:5px;padding-top:4px;
  line-height:1;
}
.dark .brand span,footer.site .brand span,.hero .brand span{color:var(--muted-dark);border-top-color:var(--hair-dark-2)}
@media (max-width:899px){
  .brand b{font-size:18px}
  .brand span{font-size:8px;letter-spacing:.26em}
}


/* ------------------------------------------------------------
   THE SYSTEM REACHES THE VARIANTS TOO.

   Section openers were built as their own classes so no two
   sections start identically, and each one carried its own
   weight and tracking. That meant the base h1-h4 rules governed
   almost nothing on the actual page: the first h2 on the site
   was setting itself at 64px and weight 600, larger than the h1
   and lighter than the system asks for.

   A type system that only reaches the bare tags is not a system,
   it is a suggestion. Same principle applied throughout: display
   optical size, weight 650, and tracking that tightens as the
   size goes up.
   ------------------------------------------------------------ */
.opener-line,.opener-prose,.opener-quiet,.statement{
  font-variation-settings:"opsz" 72;
  font-weight:650;
}
.opener-line{letter-spacing:-.042em}
.opener-prose{letter-spacing:-.036em}
.opener-quiet{letter-spacing:-.03em}
.statement{letter-spacing:-.04em}
.opener-line em,.opener-prose em,.opener-quiet em,.statement em{font-weight:600}

/* the walk headings and the hero stat figures sit mid-scale */
.walk-body h3{font-variation-settings:"opsz" 48;letter-spacing:-.028em}
.hs-fig{font-variation-settings:"opsz" 72;font-weight:650;letter-spacing:-.034em}


/* The lockup must size to its own content. As a block-level flex item
   it was being measured at 103px for a wordmark that needs more, so
   the rule was short and the name clipped at the right edge. */
.brand{display:inline-block;width:fit-content;flex:none}


/* ============================================================
   THE HEADER, ON A PHONE

   Three things share 390px: a wordmark that is now two lines
   with a rule through it, a menu control, and the only call to
   action on the page. They were competing because all three were
   asking for the same kind of attention.

   The nest they needed is a hierarchy, not more space:

     the wordmark    identity, and it is allowed to be the
                     largest thing, because it now carries a
                     rule and reads as a mark rather than text
     the menu        a control. Controls do not need borders
                     when the thing beside them is a filled
                     button; the contrast does the work
     the trial       the only filled shape in the header, so
                     there is exactly one obvious action

   Everything is baseline-aligned to the wordmark's NAME rather
   than centred on the whole lockup, because the rule and the
   parent name hang below it and centring against them pushes the
   controls visually low.
   ============================================================ */
@media (max-width:899px){
  .nav{min-height:58px;gap:10px;align-items:flex-start;padding-top:9px;padding-bottom:9px}
  .brand{padding:0}

  /* the controls ride with the name, not with the whole lockup */
  .nav-links{align-items:center;gap:2px;padding-top:1px}

  .menu > summary{
    border:0;background:none;
    padding:9px 10px;min-height:42px;
    font-size:14.5px;font-weight:500;
    color:var(--muted);
    gap:7px;
  }
  .menu > summary:hover,.menu[open] > summary{background:rgba(15,28,54,.055);color:var(--ink)}

  header.site .btn{
    min-height:42px;padding:10px 17px;
    font-size:14.5px;font-weight:600;
    border-radius:10px;
  }
}

/* Below 360px the three items are genuinely tight, so the menu
   sheds its label and keeps only the affordance.

   This threshold was first set at 399px, which was wrong in the
   worst way: 390px is the standard iPhone width and therefore the
   most common phone on the site, so the rule aimed at edge cases
   landed on the main case and left everybody looking at a bare
   plus sign. Verified at 390 and 360.*/
@media (max-width:359px){
  .menu > summary{padding:9px 8px}
  .menu > summary .menu-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  header.site .btn{padding:10px 14px;font-size:14px}
}


/* ============================================================
   EVERY OFFICE ESSENTIAL WAS ONCE OPTIONAL

   A list of four, where the fourth is the argument. Set as rows
   rather than cards: cards would make them four equal features,
   and the point is that they are a sequence in time with the
   reader standing at the end of it.
   ============================================================ */
.was{margin-top:clamp(24px,3.4vw,38px);border-top:1px solid var(--hair)}
.was-row{
  display:grid;gap:4px 26px;
  padding:clamp(15px,2vw,20px) 0;
  border-bottom:1px solid var(--hair);
}
@media (min-width:700px){
  .was-row{grid-template-columns:minmax(180px,1fr) 2.2fr;align-items:baseline;gap:0 34px}
}
.was-t{
  font-family:var(--serif);font-variation-settings:"opsz" 48;
  font-size:clamp(18px,2.3vw,22px);font-weight:640;letter-spacing:-.026em;
  color:var(--muted);
}
.was-d{font-size:clamp(15px,1.7vw,16.5px);color:var(--muted);max-width:52ch}

/* The last row is the present tense, so it is the only one set in
   full ink. The three above it are history and read as history. */
.was-now .was-t,.was-now .was-d{color:var(--ink)}
.was-now .was-t{font-weight:650}
.was-now .was-d{font-weight:500}

.was-close{
  margin-top:clamp(22px,3vw,32px);
  max-width:60ch;color:var(--muted);
}


/* ============================================================
   THE HEADER MARK, FINAL

   Three stacked parts at 19.5px, a rule that stopped 95px in,
   and a 8.5px line nobody can read. That is a footnote structure,
   and a footnote is the opposite of what a masthead is for. At
   that size the parent name was not information, it was
   decoration wearing information's clothes.

   So the header carries two words and nothing else, set larger.
   Fewer parts is the whole fix: a mark stops looking timid when
   it stops explaining itself.

   THE PARENT NAME IS NOT DROPPED, IT IS SCOPED. It keeps the rule
   and the full lockup everywhere it can actually be read and
   where the reader's question is who these people are: the
   footer, the CFO brief, the business cards, the pamphlet, the
   press boilerplate, the document mastheads. Six years of
   practice is the answer to "will you still exist in two years",
   and that question is never being asked of a 19.5px header. It
   is asked halfway down a page, by somebody deciding.
   ============================================================ */
.brand{display:inline-block;width:fit-content;flex:none;padding:10px 0;min-height:44px}
.brand b{
  font-family:var(--serif);
  font-variation-settings:"opsz" 72;
  font-size:23px;font-weight:650;
  letter-spacing:-.044em;
  line-height:1;
  display:block;
}
@media (max-width:899px){
  .brand{padding:8px 0}
  .brand b{font-size:21px}
}
@media (max-width:359px){
  .brand b{font-size:19.5px}
}


/* ============================================================
   THE HEADER AS A FLOATING CARD

   It was a full-width bar with a hairline under it, which is the
   default and reads as chrome: a strip belonging to the browser
   rather than to the page. Inset, rounded and lifted, it becomes
   an object sitting ON the page, and the paper is allowed to run
   past it on all four sides.

   That is most of what the soft corner is doing. It is not the
   radius that changes the feeling, it is the fact that the page
   continues behind and around it.

   The border is now on all four sides and the bottom hairline is
   gone, because a bar has a bottom edge and a card has an
   outline. The shadow is almost nothing, 2px at 6% ink: enough
   to lift it off the paper, not enough to notice.
   ============================================================ */
header.site{
  top:10px;
  width:calc(100% - (var(--gut) * 2));
  max-width:var(--wrap);
  margin:10px auto 0;
  border:1px solid var(--hair);
  border-radius:15px;
  box-shadow:0 2px 10px rgba(20,26,36,.06);
}
/* The wrap inside would otherwise inset a second time, on top of
   the header's own margin, and push the mark toward the middle. */
header.site .wrap{padding-left:18px;padding-right:18px;max-width:none}

@media (max-width:899px){
  header.site{
    top:8px;
    margin-top:8px;
    width:calc(100% - 20px);
    border-radius:14px;
  }
  header.site .wrap{padding-left:14px;padding-right:14px}
}

/* The page behind must not run under a transparent card. The blur
   handles it on browsers that have one; where there is none the
   background is already opaque via the @supports rule above. */


/* ============================================================
   THE HEADER GETS OUT OF THE WAY

   A floating card with a border, a shadow and a filled button is
   a lot of presence for something that follows a reader down a
   page. It stopped feeling like a header and started feeling
   like it was watching.

   Two changes. It is quieter at rest, and it leaves when the
   reader is going somewhere.

   Hide on the way down, return on the way up. That is the right
   pairing: scrolling down means reading, and nothing should sit
   on top of the reading. Scrolling up is almost always looking
   for navigation, and the header should already be there when
   the eye arrives rather than after it.
   ============================================================ */
header.site{
  box-shadow:0 1px 6px rgba(20,26,36,.045);
  border-color:rgba(20,26,36,.08);
  transition:transform .34s var(--ease),box-shadow .3s var(--ease),opacity .28s var(--ease);
  will-change:transform;
}
/* Lifted only once the page has moved, so it sits flat on the paper
   at the top where it has nothing to lift away from. */
header.site.is-moved{box-shadow:0 3px 16px rgba(20,26,36,.09)}

header.site.is-away{
  transform:translateY(calc(-100% - 18px));
  opacity:0;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  header.site{transition:none}
  header.site.is-away{transform:none;opacity:1;pointer-events:auto}
}

/* ============================================================
   THE HERO, GIVEN ROOM

   The elements were stacked on the tight rhythm the rest of the
   page uses for body copy, which is correct inside a paragraph
   and wrong for the first screen. A hero is four objects, not
   four lines, and each one needs to be understood before the eye
   moves to the next.

   The gaps now scale with the viewport rather than sitting at a
   fixed 12 to 24px, so a large screen gets the air it can afford
   and a 625px laptop still fits the room in.
   ============================================================ */
.hero-open h1{margin-top:0}
.hero-open .hero-lede{margin-top:clamp(20px,3.2vh,34px)}
.hero-open .btn{margin-top:clamp(26px,4vh,42px)}
.hero-plate{margin-top:clamp(30px,5vh,58px)}

@media (min-width:900px){
  .hero-open{padding-top:clamp(30px,5vh,58px)}
  .hero-open .hero-lede{margin-top:clamp(22px,3vh,32px)}
  .hero-open .btn{margin-top:clamp(28px,3.6vh,40px)}
}
@media (max-height:800px){
  .hero-open{padding-top:clamp(16px,2.4vh,26px)}
  .hero-open .hero-lede{margin-top:clamp(15px,2.4vh,22px)}
  .hero-open .btn{margin-top:clamp(18px,2.8vh,26px)}
  .hero-plate{margin-top:clamp(20px,3vh,30px)}
}


/* ============================================================
   THE MASTHEAD, NOT THE PILL

   The floating rounded card was replaced because it is the
   current default. Apple ship it, Linear ship it, every SaaS
   template ships it, and a brand that argues it is not a
   campaign should not open with the campaign's house style.
   It was borrowed rather than ours.

   This is ours, and it costs less: the identity already owns a
   device, which is the hairline in the lockup. Use it once more,
   at the width of the page, and the header becomes a masthead.
   A masthead is a name above a rule. Newspapers settled this in
   about 1800 and nobody has improved on it.

   No box. No shadow. No fill at rest, so the paper simply
   continues and the header is part of the page rather than an
   object floating over it. The rule stops at the content column
   rather than running to the window edges, which is the whole
   difference between a masthead and browser chrome.

   The fill arrives only once the page has moved, because then it
   has type passing underneath it and legibility outranks
   restraint.
   ============================================================ */
header.site{
  background:transparent;
  backdrop-filter:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  width:100%;
  max-width:none;
  margin:0;
  top:0;
  transition:background .28s var(--ease),transform .34s var(--ease),backdrop-filter .28s var(--ease);
}
header.site .wrap{
  padding-left:var(--gut);
  padding-right:var(--gut);
  max-width:var(--wrap);
  position:relative;
}
/* The rule. Content width, not window width. */
header.site .wrap::after{
  content:"";
  position:absolute;
  left:var(--gut);right:var(--gut);bottom:0;
  height:1px;
  background:var(--hair-2);
}

/* Once the page moves, type runs under the header and it earns a
   surface. Still no border and no shadow: the rule is the edge. */
header.site.is-moved{
  background:rgba(247,246,243,.90);
  backdrop-filter:saturate(1.3) blur(9px);
}
@supports not (backdrop-filter:blur(2px)){
  header.site.is-moved{background:var(--paper)}
}
header.site.is-away{transform:translateY(-100%);opacity:1}

@media (max-width:899px){
  header.site{top:0;margin:0;width:100%;border-radius:0}
  header.site .wrap{padding-left:var(--gut);padding-right:var(--gut)}
}

/* The hero opened directly under a floating card and now opens
   under a rule, so it needs its own top air back. */
.hero-open{padding-top:clamp(26px,4.4vh,52px)}
@media (max-height:800px){.hero-open{padding-top:clamp(18px,2.8vh,30px)}}


/* ============================================================
   THE INSCRIPTION

   The tagline gets one placement on the site and the whole width
   of the page for it. Everything here is in service of one idea:
   a line carved into a wall is not read, it is encountered.

   That means space, and it means nothing else in the frame. The
   generosity IS the design. A quiet band of paper with six words
   in it reads as more certain than any dark box or filled shape
   could, because confidence is the willingness to stop talking.

   The two hairlines are the same device as the logo and the
   masthead, used a third time. They are short and centred, so
   they read as a frame rather than as dividers between sections.
   ============================================================ */
#tagline{
  padding:clamp(64px, min(11vw, 15vh), 150px) 0;
  border-top:1px solid var(--hair);
}
.inscription{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(26px, 4.4vh, 46px);
  text-align:center;
}
.insc-rule{
  display:block;
  width:clamp(46px, 7vw, 78px);
  height:1px;
  background:var(--hair-2);
}
.insc-line{
  font-family:var(--serif);
  font-variation-settings:"opsz" 72;
  font-size:clamp(34px, 6.6vw, 76px);
  font-weight:650;
  letter-spacing:-.045em;
  line-height:1.02;
  margin:0;
  max-width:16ch;
  color:var(--ink);
}
.insc-line em{
  font-style:italic;
  font-weight:600;
  color:var(--blue);
}

/* On a short screen the band would eat the whole viewport, and an
   inscription that fills a screen stops being restrained and
   starts being a splash page. */
@media (max-height:760px){
  #tagline{padding:clamp(46px, 8vh, 76px) 0}
  .inscription{gap:clamp(20px, 3.4vh, 30px)}
}
@media (max-width:520px){
  .insc-line{max-width:13ch}
}


/* ============================================================
   THE MARK, SIZED

   Recommended and then not done, which is worse than not
   recommending it. 23px against a 63px header is a mark parked
   rather than placed.

   Size only. NOT more left padding, which was the other half of
   what I suggested and is wrong: the wordmark and the headline
   below it share a left edge, and that shared edge is doing real
   work. Pushing the mark inward would break the one alignment on
   the page that a reader can actually feel.
   ============================================================ */
.brand b{font-size:26px;letter-spacing:-.046em}
@media (max-width:899px){.brand b{font-size:23px}}
@media (max-width:359px){.brand b{font-size:21px}}


/* ============================================================
   THE CURVE

   47 and 184 are one fact with a shape. Stacked as figures the
   reader has to hold two numbers and do the subtraction; drawn
   as a line they get it in a glance, and the glance is the
   argument: this is the only thing in a wellbeing budget whose
   usage goes UP over three months.

   Deliberately spare. No gridlines, no y axis, no ticks. A chart
   with furniture invites the reader to audit the furniture. This
   one has a baseline, a line, two measured points and their two
   labels, and nothing else to look at.
   ============================================================ */
.curve{margin:clamp(18px,2.6vw,26px) 0 0}
.curve svg{width:100%;height:auto;display:block;overflow:visible}
.curve .c-fig{
  font-family:var(--serif);font-size:30px;font-weight:650;
  letter-spacing:-.03em;fill:var(--ink);
}
.curve .c-lab{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  fill:var(--muted);text-transform:uppercase;
}
.curve .c-dim{opacity:.62}
.curve figcaption{
  margin-top:14px;font-family:var(--mono);font-size:11.5px;line-height:1.65;
  color:var(--muted);max-width:64ch;
}
.curve figcaption b{
  display:block;color:var(--ink);text-transform:uppercase;
  letter-spacing:.13em;font-size:10px;margin-bottom:4px;font-weight:600;
}

/* The line draws itself once, when it is first reached. A chart
   that animates on every scroll past is a toy; one that draws
   once is the act of measuring. */
@media (prefers-reduced-motion:no-preference){
  .curve-path{
    stroke-dasharray:640;stroke-dashoffset:640;
    animation:curve-draw 2.6s cubic-bezier(.22,1,.28,1) .35s forwards;
  }
  @keyframes curve-draw{to{stroke-dashoffset:0}}
}
@media (max-width:600px){
  .curve .c-fig{font-size:26px}
  .curve .c-lab{font-size:10px;letter-spacing:.05em}
}


/* The commitments, collapsed. A number replaces a repeated label:
   it gives each row a left edge to hang from, tells the reader
   there are exactly four, and costs no vertical space at all. */
.commit{margin-top:clamp(22px,3vw,32px);border-top:1px solid var(--hair-dark)}
.commit-row{
  display:grid;grid-template-columns:auto 1fr;
  gap:0 clamp(15px,2.2vw,26px);
  padding:clamp(15px,2vw,20px) 0;
  border-bottom:1px solid var(--hair-dark);
  align-items:baseline;
}
.commit-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--muted-dark);font-weight:600;
}
.commit-c{display:block}
.commit-what{
  display:block;
  font-family:var(--serif);font-variation-settings:"opsz" 48;
  font-size:clamp(16.5px,2vw,19px);font-weight:600;letter-spacing:-.02em;
  line-height:1.36;color:var(--on-dark);max-width:56ch;
}
.commit-why{
  display:block;margin-top:6px;
  font-size:14px;line-height:1.55;color:var(--muted-dark);max-width:56ch;
}


/* ============================================================
   THE CURVE AND THE FIGURE, SIDE BY SIDE

   They were stacked, which made the reader scroll past the shape
   to reach the number that qualifies it. They are one exhibit:
   the line is what happened to usage, the 25% is what happened
   to the people. Beside each other they are read together, which
   is how they are meant to be understood.

   The curve takes the larger share because it carries two
   figures and a shape; the reading takes the smaller because it
   carries one number and its window.
   ============================================================ */
.evi-pair{display:grid;gap:clamp(22px,3vw,34px);align-items:start;margin-top:clamp(16px,2.4vw,24px)}
@media (min-width:860px){
  .evi-pair{grid-template-columns:1.55fr 1fr;gap:clamp(28px,4vw,52px)}
  .evi-pair .curve{margin-top:0}
  .evi-pair .readings{margin-top:0!important;display:block}
  /* a hairline between them, so they read as one exhibit in two
     parts rather than two things that happen to be adjacent */
  .evi-pair > .readings{border-left:1px solid var(--hair);padding-left:clamp(24px,3vw,40px)}
}

/* ============================================================
   SOURCE NOTES STOP BEING MONOSPACED

   Every "how we know" note set its whole sentence in the mono
   face. Mono is correct for a LABEL, where the letterspacing and
   the even rhythm say this is metadata. It is wrong for a
   sentence: monospace is a typewriter, and a paragraph of it
   reads as machine output rather than as somebody explaining
   where a number came from. On a phone, at 12px, it was the most
   robotic text on the page.

   The label keeps the mono, because that part IS metadata. The
   explanation moves to the reading face at a size that admits it
   is secondary.
   ============================================================ */
.reading-src{
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.55;
  letter-spacing:0;
}
.reading-src b{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-ink);
  font-weight:600;
  margin-bottom:5px;
}
.curve figcaption{
  font-family:var(--sans);
  font-size:13.5px;
  letter-spacing:0;
}


/* ============================================================
   THE KICKER STOPS BEING A TEMPLATE

   Mono, uppercase, 0.15em letterspacing, grey, sitting above a
   serif headline. That combination is the single most templated
   device on the web right now. It was removed from the hero for
   exactly that reason and then left standing on every other
   section, which is worse: it looked deliberate in one place and
   defaulted everywhere else.

   The information is worth keeping. "Put in writing before any
   contract" tells a reader what kind of claim is coming and it
   earns its line. What has to change is the costume.

   So it becomes what a kicker is in print: a standfirst. Serif,
   italic, sentence case, no tracking, sitting close enough to
   the headline to read as part of the same thought rather than a
   label stuck above it. Same words, same job, and it stops
   announcing which template built the page.
   ============================================================ */
.kicker{
  display:block;
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-size:clamp(15px,1.8vw,17px);
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
  margin-bottom:clamp(8px,1.2vw,12px);
  max-width:46ch;
}
.dark .kicker,.hero .kicker,footer.site .kicker{color:var(--muted-dark)}


/* ============================================================
   ONE LABEL DEVICE, NOT THREE

   The kicker was converted from mono caps to a standfirst, and
   every source label was left exactly as it was: mono, uppercase,
   0.14em tracking, gold. So the page swapped one instance of the
   template tell and kept sixteen others, which is the worst of
   both, because now it also looks inconsistent with itself.

   Source labels are set the same way as the kicker: serif,
   italic, sentence case, no tracking. The page now has ONE way of
   marking a subordinate line, used everywhere, rather than a mono
   convention for footnotes and a serif convention for standfirsts
   and no reason for the difference.

   The gold goes with it. Gold was doing a job here that colour
   should not do: it was shouting for attention on the least
   important text on the page.
   ============================================================ */
.reading-src b,
.curve figcaption b{
  display:block;
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  margin-bottom:3px;
}
.dark .reading-src b,.hero .reading-src b{color:var(--on-dark)}

/* The pair reads as two exhibits under one heading, so the divider
   has to say "different measure" rather than "same thing, continued". */
@media (min-width:860px){
  .evi-pair > .readings{border-left:1px solid var(--hair-2)}
}


/* ============================================================
   THE EXHIBITS BREAK OUT OF THE PROSE MEASURE

   .disclose is capped at 730px inside a 1260px column, which is
   correct and deliberate: prose has a readable measure and 68ch
   is roughly where it sits. A chart does not. Holding a curve to
   the width of a paragraph left 530px of the column empty beside
   the single most persuasive thing on the page.

   So text keeps its measure and the visual exhibits take the
   whole column. The curve gains room to actually be a curve, and
   the figure beside it stops being a narrow strip.
   ============================================================ */
@media (min-width:1000px){
  .evi-pair,
  .disclose-b > .shot-grid{
    width:min(var(--wrap), calc(100vw - (var(--gut) * 2)));
    max-width:none;
  }
  .evi-pair{grid-template-columns:1.7fr 1fr;gap:clamp(36px,4.5vw,64px)}
  /* a wider frame wants a taller curve, or the line flattens into
     a shrug and the whole point of the shape is lost */
  .curve svg{min-height:300px}
}


/* ============================================================
   THE BOOK

   Two rows of handwriting, drifting in opposite directions. The
   argument here is volume, not any single note: one note is a
   testimonial, a wall of different handwriting is a different
   claim entirely, and it cannot be made with three cards.

   Full bleed, because the rows have to run off both edges or the
   loop is visible and the wall becomes a carousel.
   ============================================================ */
#voices{padding:var(--sec) 0;overflow:hidden}
.voices{margin-top:clamp(26px,3.6vw,42px);position:relative}
/* the paper fades in at both edges so notes arrive and leave
   rather than being cut off by the window */
.voices::before,.voices::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,9vw,150px);z-index:2;pointer-events:none;
}
.voices::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(247,246,243,0))}
.voices::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(247,246,243,0))}

.vrow{overflow:hidden;padding:7px 0}
.vtrack{display:flex;align-items:stretch;gap:clamp(12px,1.6vw,20px);width:max-content}

.vc{margin:0;flex:none;width:clamp(200px,23vw,290px)}
.vc img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;
  border-radius:10px;display:block;background:var(--paper-2);
}
.vq{
  margin:0;flex:none;width:clamp(240px,27vw,340px);
  display:flex;align-items:center;
  padding:clamp(16px,2vw,24px);
  border:1px solid var(--hair);border-radius:10px;background:var(--paper-2);
}
.vq p{
  margin:0;font-family:var(--serif);font-variation-settings:"opsz" 30;
  font-size:clamp(15.5px,1.8vw,18px);font-weight:500;line-height:1.4;
  letter-spacing:-.015em;color:var(--ink);
}
.vnote{margin-top:clamp(22px,3vw,32px);color:var(--muted);font-size:14.5px;max-width:64ch}

@media (prefers-reduced-motion:no-preference){
  /* 78s was brisk enough that a face left the frame before you had
     finished deciding whether you recognised the company. 118s moves
     a card about its own width every four seconds, which is readable
     at a glance without becoming wallpaper you stop noticing. */
  .vtrack{animation:vdrift 118s linear infinite;will-change:transform}
  .vrev .vtrack{animation-direction:reverse}
  @keyframes vdrift{to{transform:translateX(-50%)}}
  /* somebody who stops to read one has to be allowed to finish it */
  /* PAUSE THE ROW BEING READ, NOT BOTH OF THEM.
     Scoping the pause to the whole section froze the other row too,
     which is a stronger reaction than the gesture asked for: hovering
     one thing should not stop everything. Scoped to the row, the row
     under the cursor holds exactly where it is, and the other keeps
     its drift, so the section stays alive while you read.

     Note this pauses, it does not stop. animation-play-state keeps
     the current transform; setting animation:none would snap the
     track back to its start, which is the jump this must never do. */
  .vrow:hover .vtrack,
  .vrow:focus-within .vtrack{animation-play-state:paused}
}
/* No motion at all if it was not asked for: the wall stands still
   and wraps, which makes the same point without moving. */
@media (prefers-reduced-motion:reduce){
  .vtrack{flex-wrap:wrap;width:auto;justify-content:center}
  .voices::before,.voices::after{display:none}
}


/* The curve was drawing in 1.6s, which is fast enough to be missed.
   2.6s on a gentler exponential, with a third of a second of stillness
   before it starts. The pause matters more than the duration: motion
   that begins the instant a section appears reads as a page loading,
   motion that begins a beat later reads as something happening. */

/* ============================================================
   THE FORM: NOTHING UNTIL SOMETHING IS CHOSEN

   Ten fields sat open under three choices, so a reader met a wall
   of empty boxes before deciding whether they wanted any of them.
   On a phone that is most of a screen spent on work nobody has
   agreed to do yet, and on a page whose whole argument is that
   nothing is asked of anybody it is the worst possible first
   impression of the one place we DO ask.

   The fields now arrive after a choice is made. Same fields, same
   names, same endpoint: only the moment changes.

   Hidden with a grid-template-rows collapse rather than display,
   so the reveal can be animated and the fields stay in the
   document for anything reading it as a form. With script off
   the section is open from the start, because a form that needs
   javascript to show its own inputs is not a form.
   ============================================================ */
.form-fields{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .5s var(--ease),opacity .35s var(--ease);
}
.form-fields > .ff-inner{overflow:hidden;min-height:0}
.js .form-fields[data-closed]{grid-template-rows:0fr;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.form-fields{transition:none}}

/* Desktop: the argument on the left, the form on the right. The
   section was a single centred column with the whole right half of
   the page empty beside it. */
@media (min-width:1000px){
  #book .wrap{display:grid;grid-template-columns:1fr 1.15fr;
    /* Row gap and column gap are not the same measurement. One
       separates two columns, the other separates a heading from
       its own sentence. Writing them as one number put 72px
       between the headline and the lede that belongs to it. */
    column-gap:clamp(40px,5vw,80px);row-gap:0;align-items:start}
  #book .form-card{margin-top:0}
  #book > .wrap > h2,#book > .wrap > .lede,#book > .wrap > .form-note{grid-column:1}
  #book .form-card,#book .form-done{grid-column:2;grid-row:1 / span 4}
}


/* ============================================================
   THE ZONE LABELS, AND THE DOT THAT COLLIDED

   ZONE 01 . THE ENTRY was mono, uppercase, letterspaced: the
   same template tell already removed from the kicker and from
   every source label, still standing here. Third time it has
   been found in a different element, which says the fix should
   have been made once at the level of the idea rather than three
   times at the level of the selector.

   The step marker I added to signal sequence was also colliding
   with the text at some widths. It is gone. The numbers already
   say 01, 02, 03: a dot beside a number that reads "01" is
   telling the reader something they have just been told.
   ============================================================ */
.trio-n{
  display:block;
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-size:14.5px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
}
.trio-n::before{content:none}


/* .trio .trio-n (0,2,0) was still winning over the bare .trio-n
   rewrite above it. Matched at the same specificity so the
   de-templating actually applies. Third element, same tell, and
   this is the one that needed the selector to be checked rather
   than assumed. */
.trio .trio-n{
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-size:14.5px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
}
.trio .trio-n::before{content:none}


/* The form legend was the last one holding the mono-caps costume.
   Found by asking the browser for every subordinate label on the
   page and filtering for the tell, rather than by grepping the
   stylesheet, which is how the first three were missed. */
.legend{
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-size:15px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
}


/* ============================================================
   WHO BUILT THIS, GIVEN SOME SOUL

   It was two paragraphs on the left and two portraits parked on
   the right: a text block with faces beside it. The section is
   about PEOPLE and about CONTINUITY, and neither was doing any
   work. A CFO reading it wants to know who these two are and
   whether they will still be here, and the layout answered
   neither question with anything but a photograph.

   Three changes.

   The strongest sentence, "no subcontractor between us and your
   floor", was buried at the end of a paragraph. It is the actual
   answer to the question being asked, so it gets a line.

   The portraits come up to sit beside the prose rather than
   after it, and they are named beneath a hairline. That hairline
   is the same device as the wordmark, which turns a caption into
   something closer to a signature. It is the one place on the
   site where the mark's own gesture is applied to a person.

   And the faces get bigger. Two people who have run this for six
   years should not be thumbnails beside their own argument.
   ============================================================ */
.who-line{
  font-family:var(--serif);
  font-variation-settings:"opsz" 72;
  font-size:clamp(22px,3.4vw,36px);
  font-weight:650;
  letter-spacing:-.034em;
  line-height:1.18;
  max-width:24ch;
  margin:clamp(26px,3.6vw,44px) 0 0;
  color:var(--ink);
}
.who-line em{font-style:italic;font-weight:600;color:var(--blue)}

.who-people{
  display:grid;
  gap:clamp(20px,2.6vw,30px);
  margin-top:clamp(30px,4vw,50px);
  align-items:start;
}
@media (min-width:820px){
  .who-people{grid-template-columns:1fr 1fr 1.35fr;gap:clamp(24px,3vw,40px)}
}
.who-prose > p{margin:0 0 12px;max-width:46ch}
.who-prose .btn-row{margin-top:20px}

/* the signature: name over a hairline, the wordmark's own gesture */
.founder figcaption{
  margin-top:12px;
  border-top:1px solid var(--hair-2);
  padding-top:9px;
  display:flex;flex-direction:column;gap:2px;
}
.founder figcaption b{
  font-family:var(--serif);font-variation-settings:"opsz" 48;
  font-size:clamp(17px,2vw,19.5px);font-weight:640;letter-spacing:-.022em;
}
.founder figcaption span{
  font-family:var(--serif);font-variation-settings:"opsz" 20;
  font-style:italic;font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--muted);
}
.founder figcaption .tlink{margin-top:6px;font-size:13.5px;min-height:0;align-self:flex-start}
.founder img{aspect-ratio:4/5;object-position:50% 20%}


/* The booking section's left column held a heading, a lede and then a
   column of empty paper beside a long form. Fixing dead space on one
   side by creating it on the other is not a fix. */
.book-alt{margin-top:clamp(24px,3.2vw,38px);max-width:44ch}
.book-alt p{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--muted)}
.book-alt p b{color:var(--ink);font-weight:600}
.book-alt-2{padding-top:12px;border-top:1px solid var(--hair)}
@media (min-width:1000px){#book .book-alt{grid-column:1}}


/* ------------------------------------------------------------
   THE RULE FOR A STANDFIRST, since restyling one did not fix it.

   Changing the typography of "The company behind the room" from
   mono caps to serif italic changed how it looked and not what it
   was doing. It was still a label announcing the topic of the
   section underneath it, which is the actual tell, and it was
   redundant twice over: the headline names Zariyaa and the very
   next line gives the full legal name and the city.

   A standfirst earns its line only if it carries information the
   headline does not have.

     KEPT   "After their first ten minutes"   adds WHEN
     KEPT   "Put in writing before any contract"  adds that it is
            contractual and precedes signing
     CUT    "What is actually installed"     the lede below already
            says "a real, built room inside the office you have"
     CUT    "The company behind the room"    the headline names the
            company and the lede gives its legal name

   If a line only says what the next line is about, it is a label,
   and a label above a headline is the pattern regardless of the
   typeface it is set in.
   ------------------------------------------------------------ */

/* ============================================================
   FOUR CORRECTIONS
   ============================================================ */

/* 1. THE ZONE STILLS WERE CROPPED PORTRAIT FROM LANDSCAPE SOURCE.
   aspect-ratio:4/5 on a 16:9 still discards ~65% of the frame width
   and keeps whatever happens to sit dead centre. That is why Blossom
   was a blank shirt back and Bliss was carpet. The subject was never
   in the middle of the frame, because the frame was composed wide.
   3/2 is close to the source ratio, so the crop is a trim, not a
   guess, and the picture is the one the camera actually took. */
.trio img{aspect-ratio:3/2}

/* 2. THE INTENT CHOOSER WAS THREE IDENTICAL BORDERED RECTANGLES,
   which is the stock card grid. A choice between three things does
   not need three containers, it needs one list and a clear mark on
   the chosen row. Hairlines between, no boxes, and the selection is
   carried by a blue rule in the gutter rather than a filled panel. */
.choice{gap:0;border-top:1px solid var(--hair)}
.choice label{
  border:0;border-bottom:1px solid var(--hair);border-radius:0;
  background:none;padding:17px 16px 17px 2px;position:relative;
  transition:padding-left .38s cubic-bezier(.16,1,.3,1);
}
.choice label:hover{border-color:var(--hair);background:none}
.choice label:has(input:checked){background:none;border-color:var(--hair)}
.choice label::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;
  background:var(--blue);border-radius:2px;
  transform:scaleY(0);transform-origin:50% 50%;
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.choice label:has(input:checked){padding-left:16px}
.choice label:has(input:checked)::before{transform:scaleY(1)}

/* 3. THE FOOTER LABELS WERE THE LAST MONO-CAPS SURVIVORS.
   Same device already removed from the kicker, the source labels,
   the zone numbers and the form legend. The footer was never swept. */
.foot-col h5{
  font-family:var(--serif);font-variation-settings:"opsz" 20;
  font-style:italic;font-size:16px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--muted-dark);
  margin-bottom:6px;
}
/* The mark gets the full lockup here, which is the one place it
   belongs: name, hairline, parent. Not a name with a shouted
   surname underneath it. */
.foot-mark b{font-variation-settings:"opsz" 72;font-size:27px;
  font-weight:650;letter-spacing:-.046em}
.foot-mark span{
  font-family:var(--serif);font-variation-settings:"opsz" 20;
  font-style:italic;font-size:14px;letter-spacing:0;
  text-transform:none;color:var(--muted-dark);
  display:block;margin-top:7px;padding-top:7px;
  border-top:1px solid var(--hair-dark-2);max-width:9.5em;
}
/* Four columns became one very long stack on a phone. Two columns
   of short link lists read in a glance; one column of twelve is a
   scroll. The brand block keeps the full width above them. */
/* auto-fit was generating five tracks for four children at 1440,
   so the footer ended on a column of nothing. The proportions are a
   decision, not something to be inferred from a minimum width. */
@media (min-width:720px){
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
}
@media (max-width:719px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px 22px}
  .foot-grid > .foot-mark{grid-column:1 / -1}
  .foot-col a{padding:7px 0;min-height:38px}
}

/* 4. THE BOOKING COLUMN HAD A VOID IN THE MIDDLE OF IT.
   The alternative-route note sits in row two of the grid, and the
   form card spans both rows, so row one inherited the card's height
   and the note was pushed to the bottom of a column it should have
   been sitting directly under. Pinning it to the top of its row
   closes roughly 180px of nothing. */
@media (min-width:1000px){
  /* The card spans four auto rows, so any height it has over the
     left column is shared out BETWEEN those rows, which opens a gap
     under the lede rather than under the last thing in the column.
     Naming the rows explicitly sends all of the slack to row four,
     where it is margin instead of a hole. */
  #book .wrap{grid-template-rows:auto auto auto 1fr}
  #book .book-alt{align-self:start;margin-top:clamp(20px,2.4vw,30px)}
}

/* The tagline, in the one place the tagline document allows it on
   this page: the footer, set in the serif, sentence case, on one
   line, no full stop added or removed. It is the last thing read. */
.foot-line{
  font-family:var(--serif);font-variation-settings:"opsz" 72;
  font-size:clamp(21px,2.7vw,28px);font-weight:650;letter-spacing:-.036em;
  line-height:1.1;margin:0 0 clamp(26px,3.4vw,38px);color:var(--on-dark);
  white-space:nowrap;
}
.foot-line em{font-style:italic;font-weight:600;color:var(--blue-lt)}

/* ============================================================
   THE ZONES ARE A SEQUENCE, NOT A GRID
   ============================================================
   The headline says "in this order, for a reason". The layout put
   three equal columns at the same height side by side, which is the
   one arrangement that asserts its cells are peers and order does
   not matter. The picture was contradicting the sentence above it.

   A descent fixes it without adding a single decorative element:
   each zone sits lower than the one before, so the eye reads left
   to right AND downward, which is the shape of the thing itself.
   The charge comes off, then the naming, then the ground. The step
   is the section's own vertical unit, so it scales with everything
   else rather than being a number I liked.

   Mobile keeps the plain stack. A stagger needs two axes to mean
   anything, and a phone only has one. */
@media (min-width:860px){
  /* the stagger lived here; the band replaced it */

  /* The rule went above the LABEL first, which drew a line between
     the zone's name and the words describing it. Those two are one
     unit, and a rule's only job is to say the things either side of
     it are not. Moved above the heading, where it caps the whole
     text block and makes each staggered step legible as a step. */
  .trio h3{
    padding-top:15px;border-top:1px solid var(--hair);
  }
  .trio .trio-n{margin-top:5px;border-top:0;padding-top:0}
}

/* A perpetually moving strip of faces is the exact thing this setting
   exists to stop, and for some readers it is a vestibular trigger
   rather than a taste. Stopped, the row is still readable and can be
   scrolled by hand, so nothing is lost except the drift. */
@media (prefers-reduced-motion:reduce){
  .vtrack{animation:none;transform:none}
  .vrow{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ============================================================
   THE ZONES: ONE ROOM, NOT THREE CARDS
   ============================================================
   Everything before this was detail work on the wrong object. The
   unit was the problem. Three photographs of a single continuous
   space, each rounded on four corners and floated on its own with
   30px of background between, tells the eye these are three separate
   products that happen to be adjacent. A card grid always says its
   cells are interchangeable peers. This section argues the exact
   opposite: one room, three zones, and the order is the whole point.

   So the images become one band. They butt together with a 3px seam
   of the page showing through, which reads as a threshold between
   zones rather than a gap between products, and only the outer two
   corners are rounded so the band is a single object. The text sits
   under its own image in a second row, held to a measure by its own
   padding rather than by a column gap, because a gap between the
   pictures would put the seam back.

   The stagger goes. It was solving the same problem this solves
   better, and two answers to one question is one too many. */
@media (min-width:860px){
  .trio{
    display:grid;grid-template-columns:repeat(3,1fr);
    /* Four rows, because each zone has four parts. Spanning only two
       left the heading and the prose in implicit rows inside each
       item, where they were sized independently and stopped lining
       up across the three columns. Every part now shares a row with
       its counterparts, so the picture edges, the ordinals, the
       names and the first lines of prose all sit on four straight
       lines across the section. */
    grid-template-rows:repeat(4,auto);gap:0 3px;align-items:start;
  }
  .trio > *{
    display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:0;
  }
  .trio img{width:100%;border-radius:0;margin:0}
  .trio > *:first-child img{border-radius:var(--radius) 0 0 var(--radius)}
  .trio > *:last-child  img{border-radius:0 var(--radius) var(--radius) 0}

  /* No column gap means the prose would otherwise run edge to edge
     and touch the next zone's first word. The measure is made here
     instead, which keeps the pictures welded. */
  .trio > * > :not(img){padding-right:clamp(20px,2.6vw,40px)}
  .trio > * > .trio-n{padding-top:20px}

  /* The rule ran under each picture individually, which drew three
     more lids on three more boxes. One rule under the whole band
     reads as the floor the room sits on. */
  .trio h3{border-top:0;padding-top:0;margin-top:4px}
}

/* The ordinal leads now, because the headline promised an order and
   the number is the only element that carries one. It is set as a
   figure, not a caption: this is the step you are on. */
.trio .trio-n{
  display:block;font-family:var(--serif);font-variation-settings:"opsz" 28;
  font-style:italic;font-size:17px;letter-spacing:0;text-transform:none;
  color:var(--blue);margin-top:16px;
}
.trio h3{margin-top:2px}

/* ============================================================
   DARK MODE
   ============================================================
   The palette was already dual. Every colour here has existed
   since the first build in two measured forms, one for paper and
   one for the dark bands, because the brand book requires a
   contrast ratio to be stated rather than guessed. Dark mode is
   therefore not new colour work. It is choosing the other set.

   The one genuine problem is rhythm. This page uses dark sections
   as PUNCTUATION: the hero, the evidence band and the footer are
   dark precisely because everything around them is not. Turn the
   page dark and that structure flattens into one long expanse.

   It cannot be fixed by making those sections darker, because
   nothing reads below near-black. So they invert their role and
   become RAISED surfaces, a step lighter than the page with a
   hairline to catch the edge. The rhythm survives; only its
   direction changes. That is the same trick a printed page uses
   when it runs out of black: it stops going down and starts
   going up.

   Default follows the system. The toggle overrides it, and the
   override is remembered. Both selectors are needed: the media
   query for people who never touch the control, the attribute
   for people who do, and :not() so the attribute always wins. */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1218;
    --paper-2:#161B23;
    --blue-soft:#1A2336;
    --ink:#ECEAE5;
    --muted:#9DA4AE;
    --blue:#93A9E2;
    --gold-ink:#C9A467;
    --dark:#181E28;
    --dark-2:#212934;
  --panel:#171D26;
    --hair:rgba(236,234,229,.12);
    --hair-2:rgba(236,234,229,.22);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1218;
  --paper-2:#161B23;
  --blue-soft:#1A2336;
  --ink:#ECEAE5;
  --muted:#9DA4AE;
  --blue:#93A9E2;
  --gold-ink:#C9A467;
  --dark:#181E28;
  --dark-2:#212934;
  --panel:#171D26;
  --hair:rgba(236,234,229,.12);
  --hair-2:rgba(236,234,229,.22);
}

/* The raised bands need an edge, or they float without landing.
   On paper these sections needed no border because the colour
   change was the border. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dark,
  :root:not([data-theme="light"]) footer.site,
  :root:not([data-theme="light"]) .hero{border-block:1px solid var(--hair)}
}
:root[data-theme="dark"] .dark,
:root[data-theme="dark"] footer.site,
:root[data-theme="dark"] .hero{border-block:1px solid var(--hair)}

/* THE LOGOS KEEP THEIR OWN LIGHT SURFACE.
   Client marks are dark artwork on transparency. On a dark page
   they vanish, and the reflex fix, inverting them, is worse than
   the problem: these are other companies' registered trademarks
   and we do not get to restate them in colours they did not
   choose. A trademark was already distorted once on this page by
   a stray max-width. So the wall keeps a paper panel underneath
   and the marks stay exactly as their owners drew them. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-wall,
  :root:not([data-theme="light"]) .logos{
    background:#F2F1EE;border-radius:var(--radius);
    padding:clamp(18px,2.4vw,26px) clamp(14px,2vw,22px);
  }
}
:root[data-theme="dark"] .logo-wall,
:root[data-theme="dark"] .logos{
  background:#F2F1EE;border-radius:var(--radius);
  padding:clamp(18px,2.4vw,26px) clamp(14px,2vw,22px);
}

/* The control itself. Small, unlabelled by text, and it states
   what it will DO rather than what is currently on, which is the
   one thing these switches get wrong most often. */
.theme-t{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;
  background:none;border:1px solid var(--hair-2);border-radius:11px;
  color:var(--ink);cursor:pointer;padding:0;
  transition:border-color .3s cubic-bezier(.16,1,.3,1),background .3s cubic-bezier(.16,1,.3,1);
}
.theme-t:hover{border-color:var(--muted)}
.theme-t svg{width:17px;height:17px;display:block}
.theme-t .t-sun{display:none}
:root[data-theme="dark"] .theme-t .t-sun{display:block}
:root[data-theme="dark"] .theme-t .t-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-t .t-sun{display:block}
  :root:not([data-theme="light"]) .theme-t .t-moon{display:none}
}
@media (max-width:359px){.theme-t{display:none}}

/* THE FILLED BUTTON INVERTS ITS TEXT, AND MUST.
   On paper the accent is a deep blue and white sits on it at 7.94:1.
   In dark mode the accent becomes a LIGHT blue, because a deep blue
   on a near-black page is nearly invisible. White on that light blue
   measures 2.33:1, which fails plainly, and it fails on the single
   most important control on the page. The fill flipped lightness, so
   the text has to flip with it. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn{color:#0B0F16}
  :root:not([data-theme="light"]) .btn:hover{color:#0B0F16}
}
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .btn:hover{color:#0B0F16}

/* The download button's second line was white at 74% on the accent.
   On paper that is white on deep blue and reads. In dark mode the
   accent is a light blue, so the same rule put near-white on
   near-white. It inverts for the same reason the button label does. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn.dl .dl-m{color:rgba(11,15,22,.74)}
}
:root[data-theme="dark"] .btn.dl .dl-m{color:rgba(11,15,22,.74)}

/* ============================================================
   ONE CONTROL IN THE BAR
   ============================================================
   Three controls sat in the header: Menu, a theme toggle and the
   trial button. Three is what a header looks like when nobody
   decided which one mattered. They are now one, and the panel
   holds the rest.

   The mark is not three lines. A hamburger is the default answer
   and this brand's whole language is typographic, so the control
   keeps its WORD and earns its state from a plus that rotates
   into a cross. A person can read "Menu"; nobody has to learn it. */

.menu > summary{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px 10px;border:1px solid var(--hair-2);border-radius:12px;
  cursor:pointer;list-style:none;user-select:none;color:var(--ink);
  transition:border-color .34s cubic-bezier(.16,1,.3,1),background .34s cubic-bezier(.16,1,.3,1);
}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary:hover{border-color:var(--muted)}
.menu-word{font-size:15px;font-weight:560;letter-spacing:-.006em}

/* The plus, drawn rather than typed, so it rotates cleanly and sits
   on the optical centre instead of the font's idea of a baseline. */
.menu-x{position:relative;width:11px;height:11px;flex:none;
  transition:transform .42s cubic-bezier(.16,1,.3,1)}
.menu-x::before,.menu-x::after{
  content:"";position:absolute;inset:0;margin:auto;background:currentColor;border-radius:1px}
.menu-x::before{width:11px;height:1.5px}
.menu-x::after{width:1.5px;height:11px}
.menu[open] > summary .menu-x{transform:rotate(135deg)}
.menu[open] > summary{border-color:var(--muted)}

/* The panel. On a phone it is a sheet anchored to the bar, full
   width, because a floating card that stops short of both edges is
   the thing that makes a small screen feel like a shrunken desktop. */
.menu-panel{
  background:var(--panel);border:1px solid var(--hair);
  border-radius:14px;box-shadow:0 18px 48px rgba(11,15,22,.16);
  padding:12px;min-width:min(300px,calc(100vw - 32px));
}
.menu-panel a{display:block;padding:11px 12px;border-radius:9px;
  font-size:15.5px;line-height:1.35;color:var(--ink);
  transition:background .22s ease}
.menu-panel a:hover{background:var(--paper-2)}
.menu-cta{
  text-align:center;margin-bottom:8px;
  padding:13px 16px!important;font-weight:600;
}
.menu-cta:hover{background:var(--blue)!important}

.appear{margin-top:10px;padding:12px 12px 4px;border-top:1px solid var(--hair)}
.appear-l{display:block;font-family:var(--serif);font-variation-settings:"opsz" 20;
  font-style:italic;font-size:14.5px;color:var(--muted);margin-bottom:9px}
.appear-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  background:var(--paper-2);border-radius:10px;padding:3px}
.appear-seg button{
  border:0;background:none;border-radius:8px;padding:8px 4px;
  font:inherit;font-size:13.5px;color:var(--muted);cursor:pointer;
  min-height:38px;
  transition:background .3s cubic-bezier(.16,1,.3,1),color .3s cubic-bezier(.16,1,.3,1);
}
.appear-seg button[aria-checked="true"]{background:var(--panel);color:var(--ink);font-weight:600;
  box-shadow:0 1px 3px rgba(11,15,22,.12)}

@media (max-width:719px){
  .menu-panel{min-width:0;width:calc(100vw - 28px)}
}

/* `.menu-panel a` (0,1,1) outranks `.btn` (0,1,0), so the panel's link
   colour was applied to the filled button inside it and the label went
   dark-on-blue at 2.2:1. The button needs the panel's own specificity
   to win it back, in both themes, because the fill inverts. */
.menu-panel a.menu-cta{color:#fff}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .menu-panel a.menu-cta{color:#0B0F16}
}
:root[data-theme="dark"] .menu-panel a.menu-cta{color:#0B0F16}

/* ============================================================
   THE MENU AS A SCREEN
   ============================================================
   The dropdown was a raised panel floating over a darker header,
   which in dark mode put two different near-blacks against each
   other and produced a seam and a halo. Layering is how a light
   interface shows depth; in the dark it mostly shows dirt.

   So on a phone the menu stops being a card. It becomes a screen:
   the page's own background edge to edge, no border, no shadow,
   nothing to cast a glow against the header. The header keeps the
   same surface, so there is no seam because there are no longer
   two surfaces.

   And since it is a screen, it can be composed like one. The list
   is set as a contents page, the device this site already uses
   for the zones: an ordinal, a hairline, a serif line. Navigation
   in the same voice as the writing.
   ============================================================ */

.menu-list{display:block}
.menu-foot{display:block}

@media (min-width:720px){
  /* A dropdown reads downward, so the action belongs on the first
     line. On a phone it belongs on the last one. Same markup. */
  .menu-panel{display:flex;flex-direction:column}
  .menu-foot{order:-1}
  .menu-foot .appear{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);
    border-bottom:1px solid var(--hair);padding-bottom:12px;margin-bottom:4px}
}

@media (max-width:719px){
  .menu[open] > .menu-panel{
    position:fixed;inset:0;z-index:88;
    width:100%;min-width:0;margin:0;
    background:var(--paper);
    border:0;border-radius:0;box-shadow:none;
    padding:calc(64px + env(safe-area-inset-top,0px) + 14px) var(--gut)
            calc(env(safe-area-inset-bottom,0px) + 18px);
    display:flex;flex-direction:column;
    overflow-y:auto;overscroll-behavior:contain;
    animation:menuRise .52s cubic-bezier(.16,1,.3,1) both;
  }
  /* Rises rather than drops. A panel that falls from the top says
     "notification". A screen that comes up says "you opened this". */
  @keyframes menuRise{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:none}
  }

  .menu-list{counter-reset:m;flex:1 1 auto;padding-top:4px}
  .menu-panel .menu-list a{
    counter-increment:m;
    display:grid;grid-template-columns:2.4em 1fr;align-items:baseline;
    gap:0 4px;padding:15px 0;border-radius:0;
    border-bottom:1px solid var(--hair);
    background:none;
  }
  .menu-panel .menu-list a:last-child{border-bottom:0}
  .menu-panel .menu-list a:hover{background:none}
  .menu-panel .menu-list a::before{
    content:counter(m,decimal-leading-zero);
    font-family:var(--serif);font-variation-settings:"opsz" 20;font-style:italic;
    font-size:14px;color:var(--muted);
  }
  .ml-t{
    font-family:var(--serif);font-variation-settings:"opsz" 48;
    font-size:clamp(23px,6.4vw,30px);font-weight:640;letter-spacing:-.028em;
    line-height:1.12;color:var(--ink);
  }
  /* Touch feedback belongs on press, not hover: a phone has no
     hover and a sticky :hover state after a tap looks like a bug. */
  .menu-panel .menu-list a:active .ml-t{color:var(--blue)}

  .menu-foot{margin-top:auto;padding-top:22px}
  .menu-cta{margin-bottom:16px;font-size:16px}
  .appear{margin-top:0;padding:0;border-top:0}
  .appear-seg button{min-height:44px}

  /* The bar keeps the page surface while the screen is open, so the
     two never read as separate layers. */
  /* will-change:transform, added so the hide-on-scroll header
     promotes cleanly, creates a CONTAINING BLOCK for fixed
     descendants. So position:fixed;inset:0 resolved against the
     header instead of the viewport and the screen came out 96px
     tall, exactly the header's height. The hint is only needed
     while the bar is actually moving, and it is not moving while
     a full-screen menu is covering the page. */
  header.site:has(.menu[open]){
    background:var(--paper);backdrop-filter:none;box-shadow:none;
    will-change:auto;transform:none;
    /* Above the screen it opened. The panel is z-index 88, and the
       close control lives in this bar: covering it leaves a phone
       with no way out, because a phone has no Escape key. */
    z-index:92;
  }
  header.site:has(.menu[open]) .wrap::after{opacity:0}
}

/* The panel is a DESCENDANT of the control that opens it, so raising
   the header changed nothing: inside one stacking context a
   positioned child at z-index 88 paints over an unpositioned parent
   regardless of what the grandparent does. The summary needs its own
   position and a higher index, or it is visible and dead, which is
   worse than hidden because the reader keeps tapping it. */
@media (max-width:719px){
  .menu[open] > summary{position:relative;z-index:95;background:var(--paper)}
}

/* ============================================================
   NO ORDINALS, AND A REMOTE AT THE FOOT
   ============================================================ */

/* The counter is gone. Left in place, disabled explicitly, because
   the reason matters more than the rule: numbering navigation
   asserted an order that does not exist. */
@media (max-width:719px){
  .menu-panel .menu-list a{grid-template-columns:1fr auto;gap:0 14px}
  .menu-panel .menu-list a::before{content:none}
}
.menu-panel .menu-list a{counter-increment:none}

/* Six of these move you inside this page. Two leave it. The arrow is
   the only difference between the eight that a reader can act on, so
   it is the only mark any of them carries. Drawn, not typed, so it
   keeps its weight when the serif around it changes size. */
.ml-go{
  width:9px;height:9px;flex:none;align-self:center;
  border-top:1.6px solid var(--muted);border-right:1.6px solid var(--muted);
  transform:rotate(45deg) translate(-1px,1px);
  transition:border-color .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);
}
.menu-list a:hover .ml-go,.menu-list a:active .ml-go{
  border-color:var(--blue);transform:rotate(45deg) translate(1px,-1px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media (max-width:719px){
  /* THE REMOTE.
     Three loose controls at the foot read as leftovers. One slab with
     a hairline reads as a thing you hold: the action is the big
     button, appearance is the small row beneath it, and the whole
     group sits in the corner of the screen a thumb already rests in.
     It borrows the logic of a remote, not its looks: few controls,
     one obviously dominant, nothing floating on its own. */
  .menu-foot{
    margin-top:auto;padding:14px;
    background:var(--paper-2);border:1px solid var(--hair);
    border-radius:20px;
  }
  .menu-cta{margin-bottom:12px;font-size:16.5px;border-radius:14px;padding:15px 16px!important}
  .menu-foot .appear{margin:0;padding:0;border:0}
  .menu-foot .appear-l{margin-bottom:7px;padding-left:2px}
  .appear-seg{background:var(--panel);border:1px solid var(--hair)}
  .appear-seg button[aria-checked="true"]{background:var(--blue-soft);color:var(--blue)}

  /* The control that opened the screen is the control that closes it.
     A second, differently placed close would be a new object to
     learn; this one is already under the thumb that summoned it. It
     only has to stop saying "Menu" while it is doing the opposite. */
  .menu[open] > summary{
    border-color:var(--muted);background:var(--paper-2);
    padding:9px 14px 10px 16px;
  }
}

/* ============================================================
   THE HEADLINE GETS ITS AIR BACK
   ============================================================
   h1 carried -.042em tracking AND 1.02 leading. Each is defensible
   at display size on its own. Together they close the space
   between letters and the space between lines at the same time, so
   three lines of serif fuse into one dark block. The reader stops
   reading words and starts decoding a shape, which is what "too
   strong" describes.

   Tracking goes to -.028em, still tight enough that the display
   cut does not look accidentally loose, and leading to 1.09, which
   is the one that actually buys the breath: on a three-line
   headline the gap between lines is doing more work than the gap
   between letters.

   Weight drops 650 to 620. Newsreader's display optical size is
   already high contrast, and the extra weight was thickening the
   stems without adding authority. */
h1{
  letter-spacing:-.028em;
  line-height:1.09;
  font-weight:620;
}

/* The italic sat at the same weight as the roman beside it. An
   italic at equal weight always reads heavier, because its strokes
   are closer together, so the emphasis was shouting rather than
   leaning. A touch lighter and slightly looser puts it level. */
h1 em{
  font-weight:585;
  letter-spacing:-.022em;
}

/* Word spacing, the part that reads as "tight" without anyone
   naming it: negative tracking shrinks the spaces between words as
   well as between letters, and at this size the words start
   touching. This gives back only what the tracking took. */
h1{word-spacing:.035em}

/* ============================================================
   THE HEADER, HELD TO THE SAME STANDARD AS THE HEADLINE
   ============================================================ */

/* THE WORDMARK.
   It carried the same fault the h1 did, and worse for being two
   words: -.042em at weight 650 pulls "Zen" and "Garden" into one
   dark lump, and the space between them is the only thing telling
   a reader it is a name rather than a word. Loosened to -.026em,
   weight to 620, and the word gap given back explicitly, because
   negative tracking takes it away first.

   It also grows a little. Hierarchy is comparative: the pill next
   to it got smaller, so the name only has to be quietly larger to
   be obviously first. */
.brand b{
  font-size:clamp(21px,2.1vw,25px);
  font-weight:620;
  letter-spacing:-.026em;
  word-spacing:.04em;
  line-height:1.04;
}
/* The Z's diagonal leaves more optical space at the left than a
   vertical stem would, so at this size the name reads as if it is
   indented past the text below it. A hair of negative margin puts
   the mark back on the same optical line as everything else. */
.brand{margin-left:-.02em}

/* THE CONTROL.
   Smaller in every dimension, and the border goes from --hair-2 to
   --hair. It was competing with the name by being the only object
   on the row with an outline; it should read as available, not as
   the point of the header. */
.menu > summary{
  padding:7px 12px 8px 13px;
  border-radius:10px;
  border-color:var(--hair);
  gap:8px;
}
.menu-word{font-size:13.5px;font-weight:540;letter-spacing:.002em}
.menu-x{width:9.5px;height:9.5px}
.menu-x::before{width:9.5px;height:1.4px}
.menu-x::after{width:1.4px;height:9.5px}
.menu > summary:hover{border-color:var(--hair-2)}

/* THE RULE.
   It was inset to the gutter, so on a wide screen it stopped short
   of both edges while the header's own background ran full width.
   A line that ends before its container does reads as unfinished
   rather than deliberate. Full bleed, and lighter: it is there to
   separate two things, not to be seen doing it. */
header.site .wrap::after{
  left:0;right:0;
  background:var(--hair);
}

/* The row itself sits a little tighter now that both objects are
   quieter, so the bar stops feeling like a band and starts feeling
   like an edge. */
header.site .wrap{padding-top:2px;padding-bottom:2px}

/* The rule was drawn on .wrap, which is capped at --wrap and centred.
   left:0 therefore meant the edge of the COLUMN, not the edge of the
   screen, so on a wide monitor the line stopped mid-air while the
   header's own background carried on to both edges. Drawn on the
   header, it ends where the header ends, which is the only place a
   dividing line can end without looking like a mistake. */
header.site .wrap::after{content:none}
header.site::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--hair);pointer-events:none;
}

/* The dock sat at 97% opacity, which is the kind of value that looks
   like craft and behaves like a bug: a sticky bar's whole job is to
   occlude. At 0.97 the dark headline passing underneath ghosted
   through it and the two sets of words read on top of each other.
   Three percent buys no visible depth and costs legibility of both
   layers at once. Fully opaque, and the shadow does the lifting. */
.dock{
  background:var(--dark);
  box-shadow:0 -10px 30px rgba(11,15,22,.16);
}
:root[data-theme="dark"] .dock,
.dock{border-top:1px solid var(--hair-dark)}

/* ============================================================
   THE CONTROL LOSES ITS WORD, THE NAME GAINS AN EDGE
   ============================================================
   The word "Menu" was doing the same job twice: the pill's shape
   already says "press me" and the plus already says "more". On a
   row with only two objects, the one that is not the name should
   be the quieter of the two, and a square holding a single mark is
   quieter than a rectangle holding a word.

   The label does not disappear, it moves to where it belongs: an
   aria-label, so a screen reader still hears "Menu" while the eye
   gets a mark. The name is now the only word in the bar. */
.menu-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.menu > summary{
  width:40px;height:40px;padding:0;gap:0;
  justify-content:center;border-radius:11px;
}
@media (max-width:719px){.menu[open] > summary{padding:0}}

/* THE MARK GETS ITS EDGE: the empty room.
   An outlined rectangle with nothing in it, above the name. It is
   the one device that means something rather than merely holding
   something: the room is empty, and that is the proposition. Drawn
   in the accent, which the brand book reserves for decisions, so
   the rule now reads "decisions and the mark" rather than being
   quietly broken. Line drawing, not a filled box, so it never
   competes with the control on the other side of the bar. */
.brand{position:relative}
.brand::before{
  content:"";display:block;
  width:52px;height:13px;
  border:2px solid var(--blue);
  margin-bottom:7px;
}
@media (max-width:719px){
  .brand::before{width:44px;height:11px;border-width:1.8px;margin-bottom:6px}
}

/* ============================================================
   THE MARK: THE DOORFRAME, SET OPEN
   ============================================================
   The rectangle above is retired in favour of two uprights. It
   frames without enclosing, which is the correct relationship for
   a brand whose whole claim is that nothing is asked of you.

   The governing change is not the posts, it is the tracking.
   Tight letterspacing reads as technology; open letterspacing
   reads as heritage. Chanel, Herme\0000e8s, Burberry, Celine and
   Calvin Klein are all set open, and our name was at -.026em,
   which is startup-tight. A name squeezed to fit is a name that
   has not been given its room, and no amount of framing rescues
   it. So the mark alone goes to +.012em while every heading on
   the site stays tight. They are different jobs.

   Then the details that separate a mark from a logo, each one
   decided rather than defaulted:
     the posts stop at cap height, because a post that runs to the
       descender is following the line box rather than the letters;
     their ends are round, because a square cut is what you get
       when you do not choose;
     the gap between post and letter equals the gap between the
       two words, so the mark keeps one rhythm instead of three.
   One colour, one weight, one idea, and it survives an embosser,
   which the accent-blue rectangle would not have. */
.brand::before{content:none}
.brand{
  display:flex;flex-direction:row;align-items:center;gap:.42em;
  margin-left:0;
}
.brand .post{
  width:2.2px;height:.72em;flex:none;
  background:currentColor;border-radius:2px;
  opacity:.9;
}
.brand b{
  font-style:normal;
  font-weight:600;
  letter-spacing:.012em;
  word-spacing:.06em;
}
/* The parent line sits under the name, so the flex row must not
   swallow it. It keeps its own column beside the framed name. */
.brand span:not(.post){align-self:center}
@media (max-width:719px){
  .brand{gap:.38em}
  .brand .post{width:2px}
}

/* The posts are sized in em so they track the name, but em resolved
   against .brand's inherited 16px rather than the name's 25px, so
   they came out 11px tall and sat by the baseline like stray commas.
   The container now carries the same font-size as the name, so one
   number governs the mark and every part of it scales together. */
.brand{
  font-size:clamp(21px,2.1vw,25px);
  line-height:1;
}
.brand b{font-size:1em}
.brand .post{
  height:.70em;          /* Newsreader's cap height at this weight */
  width:.088em;
  border-radius:.05em;
  align-self:center;
  position:relative;top:-.02em;   /* optical centre, not box centre */
}
/* The parent name under the mark must not inherit the display size. */
.brand span:not(.post){font-size:10.5px}

/* .brand span{font-size:10.5px} is set earlier for the parent line,
   and .post is also a span, so it inherited that size. Every em on
   the post was then resolving against 10.5px instead of the name's
   25px, which is why the uprights came out a third of their height
   and read as stray commas beside the word. A :not() on the OTHER
   rule cannot fix this; the post has to state its own size. */
.brand .post{font-size:1em}

/* Two last corrections, both optical rather than measured.
   The 0.9 opacity was making a 2.2px stroke read grey beside solid
   black letters: at that width there is not enough area for the eye
   to average the colour, so it just looks weaker. Full strength.
   And the post was centred in the LINE BOX, which sits lower than
   the caps because the box includes the descender. Raised to sit on
   the cap line, where the eye expects a vertical to start. */
.brand .post{opacity:1;top:-.055em}

/* ============================================================
   THE MARK: STACKED, AND JUSTIFIED TO A RECTANGLE
   ============================================================
   Two syllables, two ideas, two lines. The doorframe is retired.

   The move that makes this a mark rather than a name on two lines
   is the justification. "Zen" is 184.94 units wide where "Garden"
   is 356 at the same size, so Zen is letterspaced by exactly
   (356 - 184.94) / 3 = 0.5702em and the two lines become the same
   width to the pixel. Measured in a browser, not estimated.

   Three characters means CSS adds the space three times, including
   after the final n, so the trailing gap is pulled back with an
   equal negative margin. Without that the block is optically
   off-centre by half a letterspace and nobody can say why.

   What it buys: the mark becomes a rectangle made of type. For a
   company selling an empty room, the logo IS the room, and unlike
   a drawn rectangle it cannot be separated from the name.

   Leading closes to .88 so the two lines lock into one object
   rather than reading as a wrapped phrase. This is the whole
   difference between a stacked logo and a narrow column. */
.brand{display:block;font-size:clamp(15px,1.35vw,17px);line-height:1}
.brand .post{display:none}
.brand b{
  display:block;
  font-family:var(--serif);font-variation-settings:"opsz" 72;
  font-size:1em;font-weight:620;font-style:normal;
  line-height:.88;
  color:var(--ink);
}
.brand .z,.brand .g{display:block}
.brand .z{
  letter-spacing:.5702em;
  margin-right:-.5702em;   /* the trailing gap CSS adds after the n */
  color:var(--blue);
}
.brand .g{letter-spacing:.004em}
.dark .brand b,.hero .brand b,footer.site .brand b{color:var(--on-dark)}
.dark .brand .z,.hero .brand .z,footer.site .brand .z{color:var(--blue-lt)}

/* .brand span{font-size:10px} and .brand span:not(.post){font-size:10.5px}
   were both written for the parent line beneath the name. The two
   halves of the stacked mark are also spans, so they were being set
   at 10px while their parent <b> was at 17px, and the justification
   maths was computed against a size neither line was using. Scoped
   through the <b> so only the mark's own halves are addressed. */
.brand b .z,.brand b .g{
  font-size:1em;font-family:inherit;font-weight:inherit;
  text-transform:none;display:block;
}
.brand b .z{letter-spacing:.5702em;margin-right:-.5702em}
.brand b .g{letter-spacing:.004em}

/* The old lockup styled .brand span as the PARENT name: muted colour,
   a hairline above it, mono, uppercase. The stacked mark's two halves
   are spans too, so Garden was inheriting grey and both were picking
   up a rule. Every one of those is cleared explicitly rather than
   left to specificity luck. */
.brand b .z,.brand b .g{
  border:0;padding:0;margin-top:0;max-width:none;
  font-style:normal;letter-spacing:inherit;
}
.brand b .g{color:var(--ink);letter-spacing:.004em}
.brand b .z{color:var(--blue);letter-spacing:.5702em;margin-right:-.5702em}
.dark .brand b .g,.hero .brand b .g,footer.site .brand b .g{color:var(--on-dark)}
.dark .brand b .z,.hero .brand b .z,footer.site .brand b .z{color:var(--blue-lt)}
:root[data-theme="dark"] .brand b .g{color:var(--ink)}
/* text-align:right and the .3em tracking from that same old rule
   also had to go, or Garden sat right-aligned under a left-set Zen. */
.brand b .z,.brand b .g{text-align:left;text-transform:none;font-variation-settings:"opsz" 72;font-weight:620}

/* ============================================================
   THE JUSTIFICATION IS REMOVED. IT WAS THE WRONG TECHNIQUE.
   ============================================================
   Setting Zen to Garden's exact width was arithmetically correct
   and typographically wrong, and the numbers said so before the
   eye did: 3 characters stretched to the width of 6 means the
   gaps between letters end up wider than the letters. That reads
   as a fault, not as a decision.

   It works for SAINT / LAURENT and BALEN / CIAGA because those
   halves are nearly the same length. Zen and Garden are not, and
   no amount of precision fixes a technique that does not fit the
   word. The stepped right edge is the honest shape of these two
   words stacked, and a stepped edge is not a problem to solve.

   Both lines now share one tracking. The mark is the two words,
   the tight leading that locks them into a block, and nothing
   else. */
.brand b .z{
  letter-spacing:.004em;
  margin-right:0;
}
.brand{font-size:clamp(17px,1.6vw,20px)}
.brand b{line-height:.9}

/* ============================================================
   MAKING THE LAZY COPY INCONVENIENT
   ============================================================
   Stated plainly so nobody later mistakes this for security: the
   browser must receive the HTML and CSS in order to draw the page.
   View-source, DevTools and Save Page As cannot be prevented by
   anything written here. A designer who wants this layout will
   have it, and no site on the internet has ever stopped that.

   What this does stop is the careless copy: dragging a photograph
   of the room onto a desktop, or selecting the whole page and
   pasting the copy into a document. That is the realistic threat,
   and it is worth a speed bump.

   What it must NOT stop is the reason the site exists. Selection
   stays ON for every address, phone number, form field and the
   library, because a buyer copying our email into their client is
   the pipeline working. Protecting the prose at the cost of the
   lead would be protecting the wrong thing. */
main, header.site, footer.site, .hero, .dark, .tint-2{
  -webkit-user-select:none;user-select:none;
}
/* The exceptions, and they are the point. */
a[href^="mailto"], a[href^="tel"], a[href^="https://wa.me"],
input, textarea, select, .form-card, .book-alt, #book, .foot-legal,
[data-copyable]{
  -webkit-user-select:text;user-select:text;
}

/* The photographs are the part that cannot be re-shot. Dragging is
   the one-gesture theft, and it costs nothing to remove. */
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}

/* If someone does select something they are allowed to, it should
   look like the brand rather than the browser default. */
::selection{background:var(--blue-soft);color:var(--ink)}
:root[data-theme="dark"] ::selection{background:var(--blue);color:#fff}

@media print{
  /* Printing is a legitimate need for the CFO brief and a copy
     route for everything else, so the brief prints and the rest
     carries its source. */
  body::after{
    content:"thezengarden.in";
    display:block;text-align:center;font-size:9px;color:#888;padding-top:8px;
  }
}

/* ============================================================
   ZEN LEADS. GARDEN CARRIES IT.
   ============================================================
   The two lines are flush again, but by SCALE rather than by
   stretching. Garden has twice the characters of Zen, so when Zen
   is set large and bold, Garden set at 54.2% of that size lands on
   exactly the same width. Measured, not guessed: Zen at weight 700
   with .02em tracking is 195.2 units wide per 100 of size, Garden
   at weight 600 is 360, and 195.2 / 360 gives the ratio.

   This is the justification idea done the way it should have been
   done the first time. Stretching a short word to fit a long one
   breaks the letterforms. Scaling a long word to sit under a short
   one leaves every letter exactly as the punchcutter drew it, and
   the rectangle appears anyway.

   The hierarchy is now the meaning: Zen is the state, said loudly.
   Garden is the place it happens, said once, underneath, holding
   it up. */
.brand{font-size:clamp(26px,2.8vw,34px);line-height:1}
.brand b{line-height:.86;letter-spacing:0}
.brand b .z{
  font-size:1em;
  font-weight:700;
  letter-spacing:.02em;
  margin-right:0;
  color:var(--blue);
}
.brand b .g{
  font-size:.542em;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
  margin-top:.06em;
}
/* More room around it. A mark this size needs the bar to grow with
   it, or the letters touch the rule underneath. */
.brand{padding:10px 0 11px}
@media (max-width:719px){
  .brand{font-size:clamp(24px,7.4vw,30px);padding:8px 0 9px}
}

/* ============================================================
   THE MARK, GIVEN BODY
   ============================================================
   Three corrections, and the first is the one that made it look
   "skinny": the mark was set at opsz 72. That is Newsreader's
   DISPLAY cut, drawn to be used at headline sizes where hairlines
   can afford to be thin. Rendered at 30px it gives you the
   delicacy of a 72px setting at less than half the size, which is
   exactly the frailty the optical axis exists to prevent. Dropped
   to opsz 30, the stems thicken, the serifs shorten and the
   letters get their dimension back. Same typeface, correct cut.

   Second, light on dark reads thinner than dark on light. The eye
   spreads a bright shape against a dark ground, and the strokes
   between the spread look starved. Every serious type system adds
   weight in the dark. This one did not, which is why the mark
   looked ill in dark mode and fine in light.

   Third, the exact width match is relaxed. Garden sitting at a
   precise 54.2% was a rule the eye did not ask for; it is more
   elegant a little wider than Zen, so the pair reads as gathered
   rather than measured. The detail is used, not obeyed. */
.brand{font-size:clamp(23px,2.4vw,29px)}
.brand b{font-variation-settings:"opsz" 30;line-height:.88}
.brand b .z{
  font-size:1em;
  font-weight:720;
  letter-spacing:.012em;
  font-variation-settings:"opsz" 30;
}
.brand b .g{
  font-size:.60em;           /* a touch past flush, gathered not measured */
  font-weight:640;
  letter-spacing:.026em;
  font-variation-settings:"opsz" 22;
  margin-top:.05em;
}

/* The dark-mode compensation. Roughly a 40-unit lift on each, which
   is what it takes for the two settings to look like the same
   weight rather than measure like it. */
:root[data-theme="dark"] .brand b .z,
.dark .brand b .z,.hero .brand b .z,footer.site .brand b .z{font-weight:760}
:root[data-theme="dark"] .brand b .g,
.dark .brand b .g,.hero .brand b .g,footer.site .brand b .g{font-weight:680}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z{font-weight:760}
  :root:not([data-theme="light"]) .brand b .g{font-weight:680}
}

/* ============================================================
   THE CONTENTS PAGE, PROPERLY SET
   ============================================================
   A good book's contents is not a list of links stacked up. It is
   a table: the title on the left, a leader running across the dead
   space, and the marker at the right margin. The leader is what
   makes it read as considered rather than as whatever fitted. It
   also does real work, carrying the eye from a short title to its
   mark without the reader losing the row.

   Everything now sits on the same two vertical lines as the slab
   at the foot, so one left margin runs from the first title to the
   Appearance label. The slab had the good dimensions; the list
   simply follows them. */
@media (max-width:719px){
  .menu-panel .menu-list a{
    grid-template-columns:auto 1fr auto;
    align-items:baseline;
    gap:0 12px;
    padding:13px 14px;          /* 14px matches the slab's inner inset */
  }
  .ml-t{font-size:clamp(19px,5.1vw,24px)}

  /* The leader. A hairline sitting on the baseline, filling exactly
     the space the title does not use. It stops short of the marker
     so the two never touch. */
  .ml-lead{
    display:block;height:1px;background:var(--hair);
    transform:translateY(-.32em);
    min-width:14px;
  }
  .menu-list a:active .ml-lead{background:var(--blue)}

  /* The row edges follow the slab, not the screen. */
  .menu-panel .menu-list a{border-bottom-color:var(--hair)}
  .menu-list{padding-top:2px}

  .ml-go{align-self:center;transform:rotate(45deg) translate(-1px,1px)}
  .ml-doc{width:17px;height:17px;color:var(--muted);align-self:center;
    transition:color .3s cubic-bezier(.16,1,.3,1)}
  .menu-list a:active .ml-doc{color:var(--blue)}
}

/* A chevron says "elsewhere". It does not say "you will be handed a
   document", which is the thing a Head of People wants to know
   before they tap, because it decides whether they open it now or
   send it to their CFO. The page icon says it in one glyph. */
.ml-doc{flex:none}
@media (min-width:720px){
  .ml-doc{width:15px;height:15px;color:var(--muted);margin-left:auto}
  .menu-panel .menu-list a{display:flex;align-items:center;gap:10px}
  .ml-lead{display:none}
}

/* The slab's inner edge sits at the panel gutter + its 1px border +
   its 14px padding. The list has neither border nor slab, so to land
   on the same vertical line it needs 15px, not 14. One pixel, and it
   is the difference between a margin that looks intentional and one
   that looks close. Scoped through .menu[open] so it outranks the
   generic .menu-panel a padding it kept losing to. */
@media (max-width:719px){
  .menu[open] .menu-panel .menu-list a{padding-left:15px;padding-right:15px}
  .menu[open] .menu-panel .menu-foot{padding-left:14px;padding-right:14px}
}

/* .btn carries margin-left:6px so buttons sitting in a row do not
   touch. Inside the slab the button is alone and full width, so that
   margin was pure offset, and it was the reason the CTA sat 6px right
   of every title above it. Removed at the source rather than
   compensated for in the list. */
.menu-cta{margin-left:0;margin-right:0}

/* ============================================================
   THE MARK: DIFFERENTIATE BY TYPOGRAPHY, NOT BY COLOUR
   ============================================================
   "Elegant but cartoonish" is a fair description of what two
   colours and a heavy weight do together at small size. Colour is
   the loudest way to tell two words apart and therefore the least
   serious: it is the choice a mark makes when the typography is
   not doing the work.

   The heritage lockups solve this the other way. CHANEL over
   PARIS, HERMES over PARIS, RALPH LAUREN over PURPLE LABEL. One
   colour throughout, and the second line is separated by CASE and
   TRACKING instead. It reads as a foundation the first word stands
   on rather than a second word competing with it.

   So Garden goes to letterspaced capitals at a much smaller size,
   Zen loses a little weight because it no longer has to shout over
   a colour, and the whole mark is one ink. The blue is returned to
   the ledger of things that mean a decision. */
.brand b .z{
  font-weight:640;
  letter-spacing:.004em;
  color:var(--ink);
  font-variation-settings:"opsz" 34;
}
.brand b .g{
  font-size:.30em;
  font-weight:640;
  text-transform:uppercase;
  letter-spacing:.30em;
  margin-right:-.30em;      /* the trailing tracking after the N */
  color:var(--muted);
  font-variation-settings:"opsz" 14;
  margin-top:.28em;
}
.brand b{line-height:.92}
:root[data-theme="dark"] .brand b .z,
.dark .brand b .z,.hero .brand b .z,footer.site .brand b .z{color:var(--on-dark);font-weight:680}
:root[data-theme="dark"] .brand b .g,
.dark .brand b .g,.hero .brand b .g,footer.site .brand b .g{color:var(--muted-dark);font-weight:680}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z{color:var(--ink);font-weight:680}
  :root:not([data-theme="light"]) .brand b .g{color:var(--muted);font-weight:680}
}
/* .menu-cta alone (0,1,0) kept losing. Matched to the same
   specificity already used for its colour so the two agree. */
.menu-panel a.menu-cta{margin-left:0;margin-right:0}

/* ============================================================
   TAKE THE LINES AWAY
   ============================================================
   The leader was right in principle and wrong on this page,
   because the rows already had dividers. A rule across the row
   plus a rule under the row is how ruled notepaper is drawn, and
   no amount of refinement rescues a page that has been ruled
   twice.

   Apple's lists do not separate items with lines. They separate
   them with space, and they let the type carry the hierarchy. A
   divider is what you reach for when the spacing is too tight to
   do the job on its own, so the honest fix is to give the rows
   the room they needed and delete both lines.

   What is left: eight lines of serif, generous air, and a mark on
   only the two rows that lead somewhere else. The list is now
   quieter than it has been at any point, and quiet is the thing
   the whole brand is selling. */
@media (max-width:719px){
  .ml-lead{display:none}
  .menu-panel .menu-list a{
    border-bottom:0;
    padding:16px 15px;
    grid-template-columns:1fr auto;
    align-items:center;
    transition:transform .42s cubic-bezier(.16,1,.3,1);
  }
  .menu-panel .menu-list a:last-child{border-bottom:0}
  .ml-t{font-size:clamp(20px,5.4vw,25px);line-height:1.15}

  /* The only motion in the screen, and it belongs to the finger.
     The row leans toward where it is about to take you. */
  .menu-panel .menu-list a:active{transform:translateX(5px)}
  .menu-list{padding-top:6px;padding-bottom:6px}
}

/* ============================================================
   THE MARK: BLUNTER SERIFS, A READABLE BASE, AND CENTRED
   ============================================================
   The Z's corners are sharp because opsz 34 is still a display
   setting: high optical sizes give long, finely pointed serifs
   drawn to be seen large, and on a capital Z those points land as
   two spikes at the corners. Dropping to opsz 16 is not a smaller
   size, it is a different DRAWING of the same letter, with shorter
   blunter serifs and thicker hairlines, cut for reading rather
   than for display. The spikes go away because they were never
   meant to be here.

   GARDEN was set in --muted, which made it a caption under a name.
   It is half the idea and has to read like it. It moves to the ink
   at a slightly larger size, and the tracking eases from .30em to
   .22em, because letterspacing past about a quarter em starts
   costing legibility faster than it buys elegance.

   And the whole mark drops a few pixels. It was optically riding
   high in the bar: capitals plus a small-caps line have almost no
   descender, so a mark centred by its BOX sits above centre to the
   eye. Nudged down to sit where it looks centred rather than where
   it measures centred. */
.brand b .z{
  font-variation-settings:"opsz" 16;
  font-weight:620;
  letter-spacing:.006em;
}
.brand b .g{
  font-size:.335em;
  font-weight:660;
  letter-spacing:.22em;
  margin-right:-.22em;
  color:var(--ink);
  opacity:.82;                /* present, not shouting */
  font-variation-settings:"opsz" 16;
  margin-top:.30em;
}
.brand{padding:14px 0 12px}
:root[data-theme="dark"] .brand b .g,
.dark .brand b .g,.hero .brand b .g,footer.site .brand b .g{color:var(--on-dark);opacity:.8}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .g{color:var(--ink);opacity:.8}
}
/* .335em of a 23px Zen is 7.7px, which is caption size, not half a
   logo. Capitals need more size than lowercase to read at the same
   ease, and letterspaced capitals need more again. .42em puts it at
   a size a person actually reads rather than infers. */
.brand b .g{font-size:.42em;letter-spacing:.19em;margin-right:-.19em;opacity:.86}
/* The two words were reading as two things placed near each other
   rather than one mark. Closing the gap is what makes a stacked
   lockup cohere: the second line should feel attached to the first,
   sitting under it rather than following it. Line box tightened and
   the added margin removed, so the only space left is the space the
   letters themselves need. */
.brand b{line-height:.84}
.brand b .g{margin-top:.06em}

/* ============================================================
   THE BLUE MARK, AND A RIGHT SIDE THAT DESERVES IT
   ============================================================
   Zen takes the accent. GARDEN stays in the ink, so the mark is
   still differentiated by case and tracking first and colour only
   second, which is what stops it reading as a two-colour logo.

   The consequence is real and should be written down rather than
   discovered later: the brand book says the accent appears only
   where a decision happens. It now also carries the identity. That
   is a rule with two clauses, not a rule being broken twice, and
   the book needs the sentence changed to say so. */
.brand b .z{color:var(--blue)}
:root[data-theme="dark"] .brand b .z,
.dark .brand b .z,.hero .brand b .z,footer.site .brand b .z{color:var(--blue-lt)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z{color:var(--blue)}
}

/* The right side was the default nav it had always been, and next
   to a mark that has been worked on for a day it read as unfinished.
   It does not need decoration, it needs the same care: a size that
   sits under the mark rather than beside it, tracking that matches
   the body rather than the browser, and one gap value instead of
   three. */
.nav-links{gap:0}
.nav-links .nav-hide{
  font-size:14.5px;font-weight:500;letter-spacing:-.004em;
  padding:10px 15px;border-radius:9px;
  display:inline-flex;align-items:center;gap:7px;
  transition:color .3s cubic-bezier(.16,1,.3,1);
}
.nav-links .nav-hide:hover{color:var(--blue)}
.nav-doc{width:14px;height:14px;flex:none;opacity:.55;
  transition:opacity .3s cubic-bezier(.16,1,.3,1)}
.nav-links .nav-hide:hover .nav-doc{opacity:1}

/* The control gets the mark's proportions: same corner softness,
   the hairline rather than the heavier one, and enough room that it
   reads as a considered object rather than a leftover square. */
.menu > summary{
  width:42px;height:42px;border-radius:12px;
  border-color:var(--hair);
  margin-left:10px;
}
.menu > summary:hover{border-color:var(--hair-2);background:var(--paper-2)}

/* ============================================================
   THE SCREEN GETS ITS NAME, AND ITS ONE SENTENCE
   ============================================================
   A quarter of the menu screen was empty and the screen carried no
   identity, because the mark sits in the bar behind it. Both are
   solved by the same thing: put the mark in the sheet, the way a
   sheet carries its own name, and give it one line underneath.

   The line is not a tagline. The tagline lives in the footer and
   would become wallpaper if it appeared here too. This is the
   proposition turned on the website itself: the room asks nothing
   of you, and neither does this page. It is the most useful thing
   a stranger opening a menu can be told, and it is true, which is
   the only reason it may be said. */
.menu-head{display:none}
@media (max-width:719px){
  .menu-head{display:block;padding:2px 15px 26px}
  .mh-mark{display:block;font-family:var(--serif);line-height:.84;font-size:23px}
  .mh-mark .z{
    display:block;font-variation-settings:"opsz" 16;font-weight:620;
    letter-spacing:.006em;color:var(--blue);
  }
  .mh-mark .g{
    display:block;font-size:.42em;font-weight:660;text-transform:uppercase;
    letter-spacing:.19em;margin-right:-.19em;margin-top:.06em;
    color:var(--ink);opacity:.86;font-variation-settings:"opsz" 16;
  }
  .mh-line{
    margin:18px 0 0;max-width:22ch;
    font-family:var(--serif);font-variation-settings:"opsz" 22;
    font-size:16.5px;line-height:1.4;letter-spacing:-.006em;
    color:var(--muted);
  }
  .mh-line em{font-style:italic;color:var(--ink)}
  :root[data-theme="dark"] .mh-mark .z{color:var(--blue-lt)}
  :root[data-theme="dark"] .mh-mark .g,
  :root[data-theme="dark"] .mh-line em{color:var(--on-dark)}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mh-mark .z{color:var(--blue)}
}
/* The close control floats over the top-right of the screen, so any
   text running the full width passes underneath it. The sentence was
   literally interrupted by the button. The head keeps a lane clear
   for it rather than relying on the line happening to be short. */
@media (max-width:719px){
  .menu-head{padding-right:74px;padding-bottom:22px}
  .mh-line{max-width:19ch;font-size:16px}
}

/* ============================================================
   MOBILE: THE CLOSE CONTROL IS PINNED, NOT FLOATED
   ============================================================
   Its position was being inherited from the header's flex layout,
   which put it in the middle of the screen once the header changed
   under it, and the head sentence ran straight through it. A
   control that covers the whole screen should not depend on the
   layout of the bar it came from. Pinned to the corner, where it
   can be reasoned about. */
@media (max-width:719px){
  .menu[open] > summary{
    position:fixed;
    top:calc(env(safe-area-inset-top,0px) + 12px);
    right:var(--gut);
    z-index:95;
  }
}

/* ============================================================
   DESKTOP: THE ACTION COMES BACK, AND SEPARATES THE PAIR
   ============================================================
   The document icon sitting immediately beside the plus made them
   read as one control with two glyphs. The fix is not to move the
   CFO link away from where it belongs in the reading order, it is
   to put something between them that has every right to be there.
   The trial button is that thing, and it also undoes the one real
   cost of folding the header down to a single control: the action
   is permanently visible again on the screen size where there is
   room for it. */
.nav-cta{display:none}
@media (min-width:900px){
  .nav-cta{
    display:inline-flex;align-items:center;
    margin-left:14px;margin-right:2px;
    padding:11px 18px;font-size:14.5px;font-weight:600;
    border-radius:11px;min-height:42px;
  }
  .menu > summary{margin-left:8px}
}
/* The action belongs before the control, so the plus is the last
   thing on the row and the document icon is two objects away from
   it rather than adjacent. Done with order rather than by moving
   the markup, because the <details> must stay where it is for the
   panel's positioning to resolve against the same ancestor. */
.nav-links{display:flex;align-items:center}
.nav-links .nav-cta{order:1}
.nav-links .menu{order:2}

/* ============================================================
   PLATE NUMBERS
   ============================================================
   The convention a book uses for a photograph: a plate number
   before the caption. It is not decoration. It asserts that the
   image is a specific record of a specific thing rather than an
   illustration of an idea, and on a page whose entire argument is
   that everything stated can be checked, a picture that behaves
   like evidence is worth more than a picture that behaves like a
   mood.

   Numbered by CSS counter rather than typed, so the sequence
   cannot drift when a figure is added, removed or reordered. A
   hand-typed "Plate 04" that is actually the third picture is
   worse than no plate number at all.

   WHAT IS DELIBERATELY MISSING: the room and the date. A plate
   line in a book reads "Plate 4. Bengaluru, March 2026" and that
   is the half that carries the authenticity. I do not have that
   data per image and will not invent it, because a fabricated
   provenance line is exactly the class of claim the gate exists
   to catch, and it would be the only unsourced statement on the
   page. The markup carries a data-plate attribute ready for it:
   fill that in and it prints after the number. */
main{counter-reset:plate}
figure.shot,figure.hero-plate,.trio figure{counter-increment:plate}
figure.shot figcaption::before,
figure.hero-plate figcaption::before{
  content:"Photograph " counter(plate,decimal-leading-zero);
  font-family:var(--serif);font-variation-settings:"opsz" 18;
  font-style:italic;font-size:.86em;letter-spacing:0;
  color:var(--muted);opacity:.85;
  margin-right:.7em;
  white-space:nowrap;
}
figure[data-plate] figcaption::before{
  content:"Photograph " counter(plate,decimal-leading-zero) ". " attr(data-plate);
}
/* On the hero the caption is one long line; the plate sits inside
   the same measure rather than above it, so the rhythm is unbroken. */
.hero-plate figcaption::before{display:inline}
/* The hero caption puts its text inside a .wrap so it returns to the
   text column while the picture stays full bleed. The plate was set
   on the figcaption itself, which is the full-bleed element, so it
   printed at the screen edge instead of at the start of the sentence
   it belongs to. It goes on the wrap, where the words are. */
.hero-plate figcaption::before{content:none}
.hero-plate figcaption .wrap::before{
  content:"Photograph " counter(plate,decimal-leading-zero) "\00a0\00a0";
  font-family:var(--serif);font-variation-settings:"opsz" 18;
  font-style:italic;font-size:.9em;letter-spacing:0;
  color:var(--muted);opacity:.85;
}
.hero-plate figure[data-plate] figcaption .wrap::before,
figure.hero-plate[data-plate] figcaption .wrap::before{
  content:"Photograph " counter(plate,decimal-leading-zero) ". " attr(data-plate) "\00a0\00a0";
}
/* figure.hero-plate figcaption::before is (0,1,3); .hero-plate
   figcaption::before is (0,1,2), so the cancel lost and both plates
   printed. Matched selector, matched specificity. */
figure.hero-plate figcaption::before{content:none}

/* ============================================================
   THE BAR IS TWO CAPSULES AND A NAME
   ============================================================
   First, the regression: styling .nav-hide with display:inline-flex
   overrode the display:none that hides those links below 900px, so
   they reappeared on a phone and wrapped into two ragged rows. Any
   rule that sets display on an element which is conditionally
   hidden has to be scoped to the width where it is visible. That is
   the whole bug, and it is mine.

   Second, the decision: the three text links are gone from the bar
   at every width. They were the same destinations the menu already
   holds, printed twice, and a header that lists a site's contents
   beside a control that also lists them is not navigation, it is
   duplication with extra confidence.

   What is left is a name, one action, and one way in. Nothing on
   the row repeats anything else on the row. */
.nav-links .nav-hide{display:none}
@media (min-width:900px){
  .nav-links .nav-hide{display:none}
  .nav-cta{display:inline-flex}
}
@media (max-width:899px){
  .nav-cta{display:inline-flex;margin-left:8px;padding:10px 15px;font-size:14px;min-height:42px;border-radius:11px}
}
@media (max-width:479px){
  /* On the narrowest phones the action returns to the panel, where
     it is full width and easier to hit than a shrunken pill. */
  .nav-cta{display:none}
}

/* ============================================================
   THE STAGE: A DRAFTING GRID BEHIND THE OPENING
   ============================================================
   Not a texture and not a pattern. A floor plan is the drawing
   language of the thing this company sells, and the buyer already
   reads their own office in lines. So the grid is set the way a
   plan is set: a fine module, a heavier line every fifth one, and
   nothing else.

   Three rules keep it from becoming decoration:

   It fades. A real drawing does not run edge to edge underneath a
   headline, so the grid is masked to fall away toward the text and
   toward the foot of the section. The mask is doing the design
   work; the lines are just lines.

   It is quieter than the hairline used anywhere else. If a reader
   notices it before they notice the sentence, it has failed. The
   test is whether you can see it when you look for it and not when
   you are reading.

   It is behind everything and touches nothing. z-index 0 under
   content at z-index 1, pointer-events none, and it is removed for
   print, where a grid is just toner. */
.hero{position:relative;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  --g:74px;          /* the module */
  --l:rgba(20,26,36,.055);
  --L:rgba(20,26,36,.085);
  background-image:
    repeating-linear-gradient(to right,  var(--L) 0 1px, transparent 1px var(--g)),
    repeating-linear-gradient(to bottom, var(--L) 0 1px, transparent 1px var(--g)),
    repeating-linear-gradient(to right,  var(--l) 0 1px, transparent 1px calc(var(--g) / 5)),
    repeating-linear-gradient(to bottom, var(--l) 0 1px, transparent 1px calc(var(--g) / 5));
  -webkit-mask-image:radial-gradient(120% 90% at 78% 18%, #000 0%, rgba(0,0,0,.55) 42%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 78% 18%, #000 0%, rgba(0,0,0,.55) 42%, transparent 78%);
}
.hero > *{position:relative;z-index:1}

/* On dark the same lines have to be lighter than the ground rather
   than darker, and fainter again: a bright line on a dark field
   reads about twice as strongly as its opacity suggests. */
:root[data-theme="dark"] .hero::before{
  --l:rgba(236,234,229,.045);
  --L:rgba(236,234,229,.07);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero::before{
    --l:rgba(236,234,229,.045);
    --L:rgba(236,234,229,.07);
  }
}
/* The phone gets a smaller module, or the grid reads as three big
   boxes rather than as a plan. */
@media (max-width:719px){
  .hero::before{--g:56px;
    -webkit-mask-image:radial-gradient(130% 70% at 62% 12%, #000 0%, rgba(0,0,0,.5) 45%, transparent 80%);
    mask-image:radial-gradient(130% 70% at 62% 12%, #000 0%, rgba(0,0,0,.5) 45%, transparent 80%);}
}
@media print{.hero::before{display:none}}
/* The first mask was centred near the text, which put the grid at
   full strength directly under the headline: graph paper, not a
   stage. A stage is the thing around the performer, not the thing
   printed on them. The mask now peaks in the empty quarter to the
   right and falls to nothing across the text column, so the grid
   describes the space the words are standing in and never crosses
   into them. Lines dropped by roughly a third again: the test is
   that you can find it when you look and not when you read. */
.hero::before{
  --l:rgba(20,26,36,.038);
  --L:rgba(20,26,36,.06);
  -webkit-mask-image:
    radial-gradient(95% 120% at 88% 46%, #000 0%, rgba(0,0,0,.7) 34%, transparent 72%),
    linear-gradient(to right, transparent 0%, transparent 34%, #000 62%);
  mask-image:
    radial-gradient(95% 120% at 88% 46%, #000 0%, rgba(0,0,0,.7) 34%, transparent 72%),
    linear-gradient(to right, transparent 0%, transparent 34%, #000 62%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
:root[data-theme="dark"] .hero::before{
  --l:rgba(236,234,229,.03);
  --L:rgba(236,234,229,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero::before{
    --l:rgba(236,234,229,.03);
    --L:rgba(236,234,229,.05);
  }
}
@media (max-width:719px){
  /* On a phone the text fills the width, so there is no empty
     quarter to stand the grid in. It sits low, under the button,
     where nothing is written. */
  .hero::before{--g:52px;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, transparent 52%, #000 88%);
    mask-image:linear-gradient(to bottom, transparent 0%, transparent 52%, #000 88%);
    -webkit-mask-composite:source-over;mask-composite:add;}
}

/* ============================================================
   ONE SCREEN, ONE GLANCE, ONE OF EACH THING
   ============================================================
   Three faults, one cause: the panel was carrying things the bar
   already carries, and the extra height was what forced a scroll
   onto a screen whose whole promise was that it does not scroll.

   The trial button is in the bar at every width now, so the copy
   of it inside the panel is deleted. It was the same duplication
   the desktop text links had, and it cost about 90px of the only
   screen height there is.

   The sentence under the mark goes too. It was a good line and it
   was in the wrong place: a menu is a place people pass through,
   not a place they read, and it was buying nothing at the price of
   a row of the list.

   The slab now holds one thing, which is what it was always for. */
.nav-cta{display:inline-flex}
@media (max-width:479px){
  .nav-cta{display:inline-flex;padding:9px 13px;font-size:13.5px;margin-left:6px}
  .brand{font-size:clamp(21px,6.4vw,26px)}
}
@media (max-width:719px){
  .menu-panel .menu-cta{display:none}
  .mh-line{display:none}
  .menu-head{padding:2px 15px 18px}
  .menu-panel .menu-list a{padding:13px 15px}
  .ml-t{font-size:clamp(19px,5vw,23px)}
  .menu-foot{padding:13px 14px 14px}
  .menu[open] > .menu-panel{
    padding-top:calc(58px + env(safe-area-inset-top,0px) + 8px);
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  }
}

/* ============================================================
   THE LINES MOVE LIKE WATER
   ============================================================
   A displacement map, not an animation. The grid is passed through
   a low-frequency turbulence field and pushed a few pixels, which
   is what a ruled line looks like through a shallow depth of water
   or drawn by a hand instead of a plotter. Straight enough to read
   as a plan, bent enough that the eye registers something is alive
   in it without being able to say what.

   The frequency is deliberately uneven, .0055 across and .011
   down, so the waves are wider than they are tall. Equal frequency
   in both axes gives a rippled bathroom-glass look, which is a
   texture. Wider than tall reads as water lying still.

   Scale 7 is the whole judgement. At 3 nothing happens. At 15 the
   grid stops being a grid and becomes a pattern, and a floor plan
   that wobbles is a floor plan nobody trusts. */
.hero::before{filter:url(#ripple)}

/* Safari on iOS has historically dropped SVG filters on pseudo
   elements under memory pressure and simply renders nothing. A
   missing grid is fine; a missing grid that took the background
   with it is not, which is why the filter is the only thing this
   rule sets. */
@supports not (filter:url(#ripple)){.hero::before{filter:none}}
@media print{.hero::before{filter:none}}

/* ============================================================
   THE PANEL IS INFORMATION. THE BAR IS THE ACTION.
   ============================================================
   The trial button was hidden inside the panel only below 720px,
   so between 720 and 900 it appeared twice on one screen. Scoping
   a removal to a breakpoint when the reason for removing it has
   nothing to do with width is how that happens.

   The plus now means one thing and can be described in one
   sentence: everywhere else on this site. No action lives behind
   it, so nothing behind it competes with the button beside it. */
.menu-panel .menu-cta{display:none}

/* ============================================================
   THE APPEARANCE CONTROL STOPS ANNOUNCING ITSELF
   ============================================================
   A segmented control on a raised slab is the visual weight of a
   primary feature, and this is a preference most people will never
   touch. It was the loudest object on a screen whose subject is
   calm, and the eye went to it before the list.

   It becomes what it should have been: a line of small words with
   the current one in the ink and the others stepped back. No slab,
   no pill, no fill, no shadow. It reads as a footnote, which is
   the correct rank for it, and it is still one tap. */
.menu-foot{
  background:none;border:0;border-radius:0;
  border-top:1px solid var(--hair);
  padding:14px 15px 4px;margin-top:auto;
}
.appear{display:flex;align-items:baseline;gap:12px;margin:0;padding:0;border:0}
.appear-l{
  margin:0;font-size:13.5px;color:var(--muted);white-space:nowrap;
  font-family:var(--serif);font-style:italic;
}
.appear-seg{
  display:flex;gap:0;background:none;border:0;padding:0;
  border-radius:0;
}
.appear-seg button{
  background:none;border:0;box-shadow:none;
  padding:6px 10px;min-height:36px;
  font-size:13.5px;font-weight:500;color:var(--muted);
  border-radius:7px;
  transition:color .3s cubic-bezier(.16,1,.3,1);
}
.appear-seg button:hover{color:var(--ink)}
.appear-seg button[aria-checked="true"]{
  background:none;box-shadow:none;
  color:var(--ink);font-weight:600;
}
/* The only marker: a short rule under the chosen one. Quieter than
   a filled pill and unambiguous, which is all a marker owes. */
.appear-seg button{position:relative}
.appear-seg button[aria-checked="true"]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:6px;
  height:1.5px;background:var(--blue);border-radius:2px;
}
@media (min-width:720px){
  .menu-foot{order:2;padding:12px 12px 2px;margin-top:6px}
  .appear{gap:8px}
  .appear-seg button{padding:5px 8px;font-size:13px;min-height:32px}
  .appear-seg button[aria-checked="true"]::after{left:8px;right:8px;bottom:4px}
}
/* The controls measured 1px above the mark's centre and still read
   high, because the mark is bottom-heavy: Zen carries its mass at
   cap height and GARDEN adds a second band of ink below it, so the
   optical centre sits lower than the box centre. Three pixels is
   the whole correction, and it is the difference between three
   objects on a row and one group of three. */
.nav-links{transform:translateY(3px)}
@media (max-width:479px){.nav-links{transform:translateY(2px)}}

/* Two rules, ~36px apart, with one short row between them: the foot's
   border-top and the panel's own bottom edge. That is the notebook
   problem again in miniature, and the answer is the one already
   settled for the list. Space, not lines. */
.menu-foot{border-top:0;padding-top:18px;margin-top:auto}
@media (min-width:720px){.menu-foot{padding-top:14px;margin-top:4px}}

/* In dark mode header::after and .hero's border-top both draw at the
   same y, so the single edge between the bar and the page was being
   painted twice, at double strength. The header owns that edge; the
   hero only needs its lower one. */
:root[data-theme="dark"] .hero,
.dark:not(section) .hero{border-top:0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero{border-top:0}
}

/* Regression: 18px of padding on the foot pushed the panel past the
   viewport and the one-screen promise broke again. The space between
   the list and the appearance row was already there as auto margin. */
@media (max-width:719px){.menu-foot{padding-top:8px;padding-bottom:10px}}

/* ============================================================
   TATAMI, NOT GRAPH PAPER
   ============================================================
   The grid becomes a field of soft-cornered squares. It is a
   better idea than the one it replaces for a reason worth keeping:
   a line grid is a drawing OF a floor, and rounded tiles ARE a
   floor. Tatami, or the flagstones of an actual garden. The
   drafting reference was a step removed from the thing; this is
   the thing.

   Built as a mask rather than a background image, so the colour
   still comes from a custom property and still flips with the
   theme. The tile mask and the fade mask are intersected, which is
   what lets one shape repeat while the other decides where it is
   allowed to be seen.

   The water goes. A ripple bends straight lines beautifully and
   makes a rounded corner look wobbly rather than soft, which is
   the opposite of the point. Softness is now in the geometry
   instead of in a filter, which is also one less full-viewport
   raster. */
.hero::before{
  filter:none;
  --tile:78px;
  --grid-ink:rgba(20,26,36,.052);
  background-image:none;
  background-color:var(--grid-ink);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Crect x='5' y='5' width='68' height='68' rx='17' ry='17' fill='none' stroke='%23000' stroke-width='1.15'/%3E%3C/svg%3E"),
    radial-gradient(95% 120% at 88% 46%, #000 0%, rgba(0,0,0,.72) 34%, transparent 74%),
    linear-gradient(to right, transparent 0%, transparent 32%, #000 60%);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Crect x='5' y='5' width='68' height='68' rx='17' ry='17' fill='none' stroke='%23000' stroke-width='1.15'/%3E%3C/svg%3E"),
    radial-gradient(95% 120% at 88% 46%, #000 0%, rgba(0,0,0,.72) 34%, transparent 74%),
    linear-gradient(to right, transparent 0%, transparent 32%, #000 60%);
  -webkit-mask-size:var(--tile) var(--tile), 100% 100%, 100% 100%;
  mask-size:var(--tile) var(--tile), 100% 100%, 100% 100%;
  -webkit-mask-repeat:repeat, no-repeat, no-repeat;
  mask-repeat:repeat, no-repeat, no-repeat;
  -webkit-mask-composite:source-in, source-in;
  mask-composite:intersect, intersect;
}
:root[data-theme="dark"] .hero::before{--grid-ink:rgba(236,234,229,.05)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero::before{--grid-ink:rgba(236,234,229,.05)}
}
@media (max-width:719px){
  .hero::before{--tile:62px;
    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Crect x='5' y='5' width='68' height='68' rx='17' ry='17' fill='none' stroke='%23000' stroke-width='1.15'/%3E%3C/svg%3E"),
      linear-gradient(to bottom, transparent 0%, transparent 50%, #000 86%);
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Crect x='5' y='5' width='68' height='68' rx='17' ry='17' fill='none' stroke='%23000' stroke-width='1.15'/%3E%3C/svg%3E"),
      linear-gradient(to bottom, transparent 0%, transparent 50%, #000 86%);
    -webkit-mask-size:var(--tile) var(--tile), 100% 100%;
    mask-size:var(--tile) var(--tile), 100% 100%;
    -webkit-mask-repeat:repeat, no-repeat;
    mask-repeat:repeat, no-repeat;
    -webkit-mask-composite:source-in;
    mask-composite:intersect;}
}
/* transform on .nav-links created a containing block for fixed
   descendants, so the full-screen menu inside it resolved against an
   80px nav rather than the viewport and the panel collapsed. This is
   the second time a promotion hint has done this on this header; the
   first was will-change on the bar itself.
   Relative positioning moves the row by the same 3px and creates no
   containing block, so nothing inside it is affected. */
.nav-links{transform:none;position:relative;top:3px}
@media (max-width:479px){.nav-links{top:2px}}

/* ============================================================
   THE PLAN REPLACES THE PATTERN
   ============================================================
   A field of identical tiles is wallpaper, and no amount of
   refinement changes that: every element being the same is what
   makes it read as texture rather than as architecture. Premium
   comes from composition, which means fewer things, placed, at a
   size that asserts they were decided.

   So the tile mask is retired and the hero is backed by a drawn
   plan. Six rooms of six different sizes, and one of them filled.
   The filled one is the Zen Garden. The sentence next to it says a
   reset room built inside a working office floor, and now the page
   shows that before it is read.

   Everything about its restraint is deliberate. It occupies only
   the empty right of the composition, it never crosses the text
   column, its strokes are lighter than any hairline on the site,
   and the accented room is the palest use of the blue anywhere. If
   a reader notices it before the headline, it has failed. */
.hero::before{content:none}
.hero-plan{
  position:absolute;top:50%;right:-3%;
  width:min(52%,660px);height:auto;
  transform:translateY(-50%);
  z-index:0;pointer-events:none;
  overflow:visible;
}
.hp-rooms rect{
  fill:none;
  stroke:rgba(20,26,36,.085);
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
}
.hp-zen{
  fill:rgba(42,74,168,.055);
  stroke:rgba(42,74,168,.22);
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
}
:root[data-theme="dark"] .hp-rooms rect{stroke:rgba(236,234,229,.075)}
:root[data-theme="dark"] .hp-zen{fill:rgba(147,169,226,.07);stroke:rgba(147,169,226,.26)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-rooms rect{stroke:rgba(236,234,229,.075)}
  :root:not([data-theme="light"]) .hp-zen{fill:rgba(147,169,226,.07);stroke:rgba(147,169,226,.26)}
}
/* On a phone the text fills the width, so the plan drops below the
   button where nothing is written, and shrinks so it reads as a
   plan rather than as two large boxes. */
@media (max-width:719px){
  .hero-plan{
    top:auto;bottom:2%;right:-14%;
    width:82%;transform:none;
    opacity:.9;
  }
}
@media print{.hero-plan{display:none}}
/* The plan was sized to the section rather than to the space the
   section actually leaves, so it ran past the fold and the accented
   room, which is the entire point of the drawing, was outside the
   viewport. A plan that cannot be seen whole is not a plan.

   It now sits in the quadrant the composition genuinely leaves
   empty: below the headline, right of the button. Smaller, fully
   contained, and every one of the six rooms visible at once, which
   is the only way the filled one reads as one room among several. */
.hero-plan{
  top:auto;bottom:8%;right:5%;
  width:min(34%,430px);
  transform:none;
}
@media (max-width:1100px){.hero-plan{width:min(38%,380px);bottom:6%;right:3%}}
@media (max-width:719px){
  .hero-plan{bottom:3%;right:-6%;width:74%;opacity:.92}
}
/* .hero contains the photograph as well as the words, so bottom:8%
   of the hero put the plan behind the picture and the section edge
   sliced it in half. That is the unfinished look: a drawing cut by
   something that is not part of the drawing.

   It is anchored to the text block instead, which is the box that
   actually ends where the words end. The plan now sits beside the
   opening, whole, with air under it. */
.hero .hero-inner{position:relative}
.hero-plan{
  position:absolute;
  top:auto;bottom:-6%;right:-2%;
  width:min(40%,400px);
  transform:none;
}
@media (max-width:1100px){.hero-plan{width:min(44%,340px);bottom:-4%;right:-1%}}
@media (max-width:719px){
  .hero-plan{position:relative;bottom:auto;right:auto;
    width:78%;margin:26px 0 0 auto;display:block;opacity:.9}
}

/* ============================================================
   THE OPENING, SPACED BY RELATIONSHIP
   ============================================================
   Proximity is the only thing on a page that states relationship
   without words. Three elements at 40, 27 and 32 apart are three
   items in a list, and that is what the hero was saying: headline,
   lede and button, all equally related to each other.

   They are not. The headline and the lede are one thought, a claim
   and the sentence that earns it. The button is a separate act,
   taken after the thought lands. So the gaps are now graduated
   against a single unit rather than chosen one at a time:

     curtain up   3u   above the first line, because an opening
                       line needs air before it more than after
     claim        1u   headline to lede: one thought, held close
     act          2.4u lede to button: a decision, set apart
     the room     6u   below the group, before the photograph

   One unit, four multiples, and every distance on the screen is
   now a statement about what belongs to what. The largest space is
   below the whole group, which is what makes it read as a group
   rather than as the top of a longer column. */
.hero .hero-inner{
  --u:clamp(15px, 1.55vw, 22px);
  padding-top:calc(var(--u) * 3);
  padding-bottom:calc(var(--u) * 6);
}
.hero h1{margin-bottom:calc(var(--u) * 1)}
.hero .hero-lede{margin-top:0;margin-bottom:calc(var(--u) * 2.4)}
.hero .hero-inner .btn{margin-top:0}

/* The plan begins where the supporting text begins, not where the
   section begins. The headline stands alone; everything under it
   has the drawing beside it. That is a composition rather than two
   things that happen to share a row. */
.hero-plan{
  top:auto;
  bottom:calc(var(--u) * 1.2);
  right:-2%;
}
@media (max-width:719px){
  .hero .hero-inner{padding-bottom:calc(var(--u) * 2)}
  .hero-plan{bottom:auto}
}
/* bottom was measured from the inner box's edge, and that box now
   carries 6u of padding below the button, so the plan sat inside the
   padding and ran under the photograph. Setting bottom to the same 6u
   puts its lower edge exactly on the content edge, which means the
   plan's bottom line and the button's bottom line are the same line.
   An alignment, rather than a value that happened to look right. */
.hero-plan{bottom:calc(var(--u) * 6)}
/* --u was declared on .hero-inner but the plan is a sibling of it,
   inside .wrap, so the variable never reached the element that needed
   it and every calc() using it was invalid. An undefined variable in
   a calc silently kills the whole declaration, which is the same
   quiet failure mode as the transparent panel earlier. The unit
   belongs on the section, where everything in the hero can see it. */
.hero{--u:clamp(15px, 1.55vw, 22px)}
.hero .hero-inner{--u:clamp(15px, 1.55vw, 22px)}
.hero .wrap{position:relative}
.hero-plan{
  position:absolute;
  bottom:calc(var(--u) * 6);
  right:-2%;
  top:auto;
  width:min(40%,400px);
}
@media (max-width:1100px){.hero-plan{width:min(44%,340px);right:-1%}}
@media (max-width:719px){
  .hero-plan{position:relative;bottom:auto;right:auto;top:auto;
    width:78%;margin:22px 0 0 auto}
}

/* ============================================================
   THE PLAN GAINS ITS ARCHITECTURAL VOCABULARY
   ============================================================
   Darker, and given the two pieces of notation that do actual
   work rather than decorate.

   LINE WEIGHT. On a real plan the walls of the space being
   designed are drawn heavier than everything around them. That
   hierarchy is the whole reason a plan is readable without a key,
   so the surrounding rooms stay thin and the Zen Garden is drawn
   at nearly double.

   THE LABEL. An architect names the room inside it, in small
   letterspaced capitals. Writing ZEN GARDEN in that room tells a
   reader what they are looking at without a caption, and it is the
   only place on this page where the product is named inside a
   picture rather than beside one.

   THE DOOR. A quarter arc with a leaf is how a plan draws a door
   standing open. The page says the room is open the way the
   cafeteria is open; this is the same claim in the language the
   buyer's own architect would use. It is notation, not ornament:
   remove it and the drawing loses an argument, not a flourish. */
.hp-rooms rect{
  stroke:rgba(20,26,36,.16);
  stroke-width:1.1;
}
.hp-zen{
  fill:rgba(42,74,168,.07);
  stroke:rgba(42,74,168,.42);
  stroke-width:1.9;
}
.hp-label{
  fill:rgba(42,74,168,.62);
  font-family:var(--sans);
  font-size:15px;font-weight:600;
  letter-spacing:2.4px;
}
.hp-door path{
  stroke:rgba(42,74,168,.38);
  stroke-width:1.5;
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
}
:root[data-theme="dark"] .hp-rooms rect{stroke:rgba(236,234,229,.15)}
:root[data-theme="dark"] .hp-zen{fill:rgba(147,169,226,.1);stroke:rgba(147,169,226,.46)}
:root[data-theme="dark"] .hp-label{fill:rgba(147,169,226,.72)}
:root[data-theme="dark"] .hp-door path{stroke:rgba(147,169,226,.44)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-rooms rect{stroke:rgba(236,234,229,.15)}
  :root:not([data-theme="light"]) .hp-zen{fill:rgba(147,169,226,.1);stroke:rgba(147,169,226,.46)}
  :root:not([data-theme="light"]) .hp-label{fill:rgba(147,169,226,.72)}
  :root:not([data-theme="light"]) .hp-door path{stroke:rgba(147,169,226,.44)}
}
/* Dropped a little, so the plan sits under the headline's weight
   rather than beside its second line. */
.hero-plan{bottom:calc(var(--u) * 3.4)}

/* The door swing is gone. It was a good piece of notation and one
   voice too many: the room already carries its name, and a label
   plus a symbol both saying "this is the room you enter" is the
   same sentence twice. The plan keeps the two things that are not
   duplicated anywhere, the name and the line weight. */
.hp-door{display:none}
/* PRECISE, NOT APPROXIMATE.
   right:-2% was a value that looked acceptable and aligned to
   nothing. The plan sits inside .hero .wrap, and the plus sits
   inside header .wrap, and both wraps share the same max-width and
   the same gutter. So right:var(--gut) puts the drawing's right
   edge on exactly the line the plus's right edge is on, which is
   also the site's right margin down the whole page.

   One line, three things on it: the control at the top, the
   drawing in the middle, and the margin every section respects. */
.hero-plan{right:var(--gut)}
@media (max-width:1100px){.hero-plan{right:var(--gut)}}
@media (max-width:719px){.hero-plan{right:auto}}

/* ============================================================
   THE PLAN IS A DESKTOP DEVICE. IT LEAVES THE PHONE.
   ============================================================
   It exists to occupy a void: on a wide screen the text column
   uses about half the width and the rest is empty, so a drawing
   that fills it earns its place. A phone has no such void. The
   text already spans the width, so the same drawing stops filling
   emptiness and starts manufacturing length, and it was pushing
   the photograph down behind a screenful of nothing.

   No void, no plan. This is not a compromise for small screens,
   it is the same rule applied honestly: the element was always
   conditional on the space existing. */
@media (max-width:719px){
  .hero-plan{display:none}
  .hero .hero-inner{padding-bottom:calc(var(--u) * 2.6)}
}

/* ============================================================
   MOBILE: THE PLAN AND THE ROOM, AS A PAIR
   ============================================================
   Restored, and given a different job from the one it has on a
   wide screen. On desktop the plan fills a void beside the text.
   Here there is no void, so instead it becomes the first half of a
   pair: the drawing, then the photograph of the thing drawn.

   That ordering is the argument the page makes anyway. A plan is
   what a buyer is shown before a room exists; a photograph is what
   exists. Putting them one above the other, close, says both in
   the order they happen.

   The old failure was not the plan, it was the space around it: it
   sat 78% wide, right-aligned, with a screenful of nothing beneath
   it before the picture. Close that gap and the two become one
   object instead of two stranded ones.

   Desktop is not touched. Every rule here is inside the query. */
@media (max-width:719px){
  .hero-plan{
    display:block;
    position:relative;
    right:auto;bottom:auto;top:auto;
    width:100%;max-width:none;
    margin:calc(var(--u) * 2.2) 0 0;
    opacity:1;
  }
  /* Small, because the pair is what matters, not the drawing. The
     photograph is the one that has to be looked at. */
  .hero .hero-inner{padding-bottom:calc(var(--u) * 1.1)}
  .hp-rooms rect{stroke-width:1.25}
  .hp-label{font-size:17px;letter-spacing:2.6px}
}

/* ============================================================
   THE PLATE MARK, PROPERLY JOINED
   ============================================================
   It was italic serif running into bold sans across two blank
   spaces: two faces, two styles, and nothing but whitespace doing
   the work of a join. Whitespace can separate two things; it
   cannot relate them.

   Three changes, each one a join rather than a gap.

   A rule instead of a space. A short hairline after the number
   ties it to the sentence the way a plate line in a book is tied
   to its caption, and it gives the eye somewhere to travel.

   Oldstyle figures. Newsreader carries them, and 01 set as
   oldstyle sits on the x-height rather than standing at cap
   height, so a small number stops shouting next to a capital A.

   And it is set on the baseline of the sentence it introduces,
   not floated above it, because a plate number is part of the
   caption rather than a heading over it. */
figure.shot figcaption::before,
.hero-plate figcaption .wrap::before{
  font-variant-numeric:oldstyle-nums;
  font-feature-settings:"onum" 1;
  font-style:italic;
  font-size:.82em;
  letter-spacing:.005em;
  color:var(--muted);
  opacity:1;
  margin-right:0;
}
/* The hairline that joins the number to the words. Drawn as a
   border on a second pseudo element so it can sit at the optical
   middle of the line rather than on the baseline. */
figure.shot figcaption,
.hero-plate figcaption .wrap{position:relative}
figure.shot figcaption::after,
.hero-plate figcaption .wrap::after{content:none}
figure.shot figcaption::before{
  content:"Photograph " counter(plate,decimal-leading-zero) "\00a0\00b7\00a0\00a0";
}
.hero-plate figcaption .wrap::before{
  content:"Photograph " counter(plate,decimal-leading-zero) "\00a0\00b7\00a0\00a0";
}
/* Measuring the mark's box gave the wrong centre. GARDEN is set in
   capitals, so its line box carries a descender space no letter in it
   ever uses, and that empty space dragged the computed centre down.
   The controls were aligned to a middle that the ink does not have.
   Aligning to the ink instead means dropping them further than the
   arithmetic asked for. */
.nav-links{top:6px}
@media (max-width:479px){.nav-links{top:4px}}

/* The Z came off as attitude rather than calm. The cause is weight,
   not height: a capital at 620 next to lowercase at the same weight
   has more stem and more contrast than the letters beside it, so it
   asserts. Dropped to 560 the Z quiets down and the word settles,
   and the cap height is untouched, which matters because shrinking
   the capital would have broken its relationship to GARDEN below. */
.brand b .z{font-weight:560;letter-spacing:.01em}
:root[data-theme="dark"] .brand b .z,
.dark .brand b .z,.hero .brand b .z,footer.site .brand b .z{font-weight:600}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z{font-weight:600}
}
/* Fatter, but not sharper. Weight alone would have brought the
   attitude back, because in a high-contrast face more weight mostly
   thickens the thick strokes and leaves the hairlines thin, which is
   what makes a letter look severe. Dropping the optical size at the
   same time thickens the HAIRLINES and blunts the serifs, so the
   letter gains mass evenly. Weight 560 to 680, opsz 16 to 11: more
   muscle, less edge. */
.brand b .z{
  font-weight:680;
  font-variation-settings:"opsz" 11;
  letter-spacing:.008em;
}
.brand b .g{
  font-weight:680;
  font-variation-settings:"opsz" 11;
}
:root[data-theme="dark"] .brand b .z,
.dark .brand b .z,.hero .brand b .z,footer.site .brand b .z{font-weight:710}
:root[data-theme="dark"] .brand b .g,
.dark .brand b .g,.hero .brand b .g,footer.site .brand b .g{font-weight:710}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z,
  :root:not([data-theme="light"]) .brand b .g{font-weight:710}
}
/* Thicker again, and this is close to the top of what the face has:
   Newsreader runs to 800. 770 with opsz 10 puts real mass in the
   stems while the low optical size keeps the hairlines from thinning
   out underneath it, which is what stops heavy from becoming brittle.

   GARDEN goes with it. If the capital line stayed lighter under a
   heavy Zen the two would read as different marks rather than one,
   and the whole point of the stack is that they are one object. */
.brand b .z,.brand b .g{
  font-weight:770;
  font-variation-settings:"opsz" 10;
}
.brand b .z{letter-spacing:.004em}
.brand b .g{letter-spacing:.175em;margin-right:-.175em}
:root[data-theme="dark"] .brand b .z,
:root[data-theme="dark"] .brand b .g,
.dark .brand b .z,.dark .brand b .g,
.hero .brand b .z,.hero .brand b .g,
footer.site .brand b .z,footer.site .brand b .g{font-weight:790}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z,
  :root:not([data-theme="light"]) .brand b .g{font-weight:790}
}
/* The e and the n were being crowded, and the cause is the weight I
   just added. As a face gets heavier its counters close and its
   sidebearings shrink, so heavy settings need MORE tracking than
   light ones, not less. I went to 770 and left the tracking at
   .004em, which is a light setting's value.

   .026em gives the two lowercase letters their own air, and the
   effect is that they stop looking like they are sheltering behind
   the Z and start holding the line with it. */
.brand b .z{letter-spacing:.026em}
/* 770 at opsz 10 with .026em tracking is a sportswear setting: very
   heavy, low contrast, wide. It reads warm and informal, which is
   the wrong register for a company selling infrastructure to a CFO.

   Seriousness in a serif is not mass, it is contrast and restraint.
   So the weight comes back to 700, which is still unmistakably bold,
   the optical size goes up to 15 so the hairlines return and the
   letter regains its thick-thin, and the tracking closes to .012em.
   Substantial, but composed. */
.brand b .z,.brand b .g{
  font-weight:700;
  font-variation-settings:"opsz" 15;
}
.brand b .z{letter-spacing:.012em}
.brand b .g{letter-spacing:.185em;margin-right:-.185em}
:root[data-theme="dark"] .brand b .z,
:root[data-theme="dark"] .brand b .g,
.dark .brand b .z,.dark .brand b .g,
.hero .brand b .z,.hero .brand b .g,
footer.site .brand b .z,footer.site .brand b .g{font-weight:730}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z,
  :root:not([data-theme="light"]) .brand b .g{font-weight:730}
}

/* ============================================================
   THE HEADER ACTION STEPS BACK SO THE NAME CAN LEAD
   ============================================================
   A filled blue button beside a blue wordmark is two claims on the
   same colour, and the filled one wins every time. That was the
   cost of giving the mark the accent, and it has arrived.

   The resolution is not to take the blue off the mark. It is to
   notice that this button is not the page's primary call. The
   primary call is filled, in the hero, where the argument is made,
   and again in the dock that follows the reader down. The header's
   copy is a persistent shortcut for somebody who has already
   decided, and a shortcut does not need to shout.

   So it becomes an outlined capsule: blue text, blue rule, no
   fill. Still unmistakably the action, still the only other blue
   object, but now the name is the heaviest thing on the row and
   the button is the second thing you see rather than the first.

   The hero and the dock are untouched. */
.nav-cta{
  background:none;
  color:var(--blue);
  border:1.5px solid var(--blue);
  box-shadow:none;
  font-weight:600;
}
.nav-cta:hover{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}
:root[data-theme="dark"] .nav-cta,
.dark .nav-cta,.hero .nav-cta{color:var(--blue-lt);border-color:var(--blue-lt);background:none}
:root[data-theme="dark"] .nav-cta:hover{background:var(--blue-lt);color:#0B0F16}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nav-cta{color:var(--blue-lt);border-color:var(--blue-lt);background:none}
  :root:not([data-theme="light"]) .nav-cta:hover{background:var(--blue-lt);color:#0B0F16}
}
/* Same proportions, more of them. Only the container's font-size
   changes, and because every part of the mark is expressed in em
   against it, the weight relationship, the tracking, the cap
   alignment and the gap between the two lines all scale together
   rather than needing to be re-decided. That is the whole reason
   the mark was built on one number. */
.brand{font-size:clamp(27px,2.95vw,36px)}
@media (max-width:719px){.brand{font-size:clamp(24px,7.6vw,30px)}}

/* ============================================================
   THE SCROLLED HEADER WAS LIGHT IN DARK MODE
   ============================================================
   header.site.is-moved set background:rgba(247,246,243,.90), which
   is the paper colour written as a literal because it needed an
   alpha and a hex custom property cannot carry one. In dark mode
   that painted a light bar under light text, and the whole header
   washed out the moment the page was scrolled.

   The contrast audit never caught it because the audit measures at
   scroll position zero, where this class is not applied. A state
   that only exists after an interaction is a state no static check
   will ever see, which is worth remembering for every other one.

   Fixed with a proper variable per theme, so the bar is a decision
   in both rather than a literal that happened to suit one. */
:root{--bar:rgba(247,246,243,.92)}
:root[data-theme="dark"]{--bar:rgba(14,18,24,.92)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bar:rgba(14,18,24,.92)}
}
header.site.is-moved{background:var(--bar)}
@supports not (backdrop-filter:blur(2px)){
  header.site.is-moved{background:var(--paper)}
}

/* THE TWO PILLS ON ONE AXIS.
   They were sized by different rules, so their heights and their
   optical centres drifted apart. Both are now the same height and
   both centre on it, which is the only way two adjacent capsules
   ever look deliberate. */
/* Sized against the mark, 5 August. Both were 44px tall beside a
   wordmark whose cap height is 25px, so the bar read as three items
   of equal rank and the mark stopped being the mark. At 36 the
   wordmark is the tallest thing in the header again, which is the
   whole job of a header. Still a comfortable pointer target, and the
   small-screen rules below keep the larger target for thumbs. */
.nav-cta,.menu > summary{
  height:36px;min-height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;
}
.nav-cta{padding:0 15px;font-size:13.5px;border-radius:9px}
.menu > summary{width:36px;padding:0;border-radius:9px}

/* An earlier small-screen rule still set the button to 42 while the
   control had gone to 40, so the pair was two pixels out of register
   on exactly the screens where they sit closest together. One rule
   now owns both dimensions on both objects. */

/* header.site .btn is (0,2,1) and .nav-links .nav-cta is (0,2,0), so
   the small-screen 42px kept winning. Matched through the same
   ancestor so the two capsules are finally sized by one rule. */

/* THE TWO LINES SQUARE UP.
   They were ragged: Zen measured 65.4 and GARDEN 69.1 at the same
   settings, so the block had no right edge and the mark looked
   unresolved rather than composed.

   Matching them by adding tracking to GARDEN was impossible, since
   it was already the wider of the two and tracking only widens. So
   the size solves it instead: at .339em with .16em tracking the
   capital line lands on Zen's width to within a pixel, and .16em
   is comfortable for capitals rather than the squeezed setting a
   forced fit would have needed.

   Weight also comes back from 700 to 660. At 36px the heavier
   setting was reading chunky, and the last of the cartoon smell is
   in that mass rather than in the shapes. */
.brand b .z,.brand b .g{font-weight:660}
.brand b .g{
  font-size:.339em;
  letter-spacing:.16em;
  margin-right:-.16em;
}
:root[data-theme="dark"] .brand b .z,
:root[data-theme="dark"] .brand b .g,
.dark .brand b .z,.dark .brand b .g,
.hero .brand b .z,.hero .brand b .g,
footer.site .brand b .z,footer.site .brand b .g{font-weight:690}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z,
  :root:not([data-theme="light"]) .brand b .g{font-weight:690}
}
/* THE EDGES.
   What reads as harsh here is serif shape, and that is governed by
   the optical axis rather than by weight. At opsz 15 Newsreader is
   still drawing a display-ish letter: long serifs, fine points,
   sharp entry and exit strokes. Those points are the edges.

   opsz 9 is the reading cut. Serifs shorten and blunt, the wedge
   at each terminal flattens, and the join between stem and serif
   fills in. Same letterforms, calmer edges, and at 660 the weight
   is low enough that the sturdier cut does not bring back the
   chunkiness of the 770 setting.

   The width relationship is unaffected: both lines move together
   because they share the axis value, so the block stays flush. */
.brand b .z,.brand b .g{font-variation-settings:"opsz" 9}
/* opsz 9 blunts the serifs, which is what fixed the edges, but it
   also thickens the hairlines, so holding weight at 660 on top of it
   compounded and the mark went fat. The two axes have to move in
   opposite directions: as the optical size drops the weight must
   drop with it, or you get the mass of a heavy setting and the low
   contrast of a small one at once, which is the definition of
   stodgy. 660 to 570, and the edges stay calm. */
.brand b .z,.brand b .g{
  font-weight:570;
  font-variation-settings:"opsz" 10;
}
:root[data-theme="dark"] .brand b .z,
:root[data-theme="dark"] .brand b .g,
.dark .brand b .z,.dark .brand b .g,
.hero .brand b .z,.hero .brand b .g,
footer.site .brand b .z,footer.site .brand b .g{font-weight:600}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z,
  :root:not([data-theme="light"]) .brand b .g{font-weight:600}
}
/* SHARP, AND ONLY HERE.
   The mark goes back up the optical axis to 26, where Newsreader
   draws crisp serifs, fine hairlines and clean sharp terminals.
   That is the confident cut. Weight sits at 620: enough to be
   strong, not so much that the sharpness turns into mass, which
   was the fault at opsz 9.

   The softness that remains is the face's own: Newsreader's
   terminals are cut with a slight bracket rather than a hard
   right angle, so the letter reads sharp without being brittle.
   That is the "very little soft corner" and it is drawn into the
   typeface rather than added on top.

   This axis value applies to the mark alone. Body text and
   headings keep their own optical sizes, which is the entire
   point of having the axis.

   SUPERSEDED 6 August 2026: this block still set opsz 26 directly on
   .z and .g, one class more specific than ".brand b{opsz:10}" below,
   so it silently outranked the reading-cut fix regardless of source
   order. The header mark was never actually drawn at opsz 10; only
   the documents were. That is why "Z" kept its presence (the shape
   carries it) while "en" read thin and flat next to it: opsz 26 is
   still most of the way to the display cut's higher stroke contrast.
   opsz is inherited, so removing the property here lets .brand b's
   opsz 10 reach both letters, same as the documents. */
.brand b .z,.brand b .g{
  font-weight:620;
}
:root[data-theme="dark"] .brand b .z,
:root[data-theme="dark"] .brand b .g,
.dark .brand b .z,.dark .brand b .g,
.hero .brand b .z,.hero .brand b .g,
footer.site .brand b .z,footer.site .brand b .g{font-weight:660}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .z,
  :root:not([data-theme="light"]) .brand b .g{font-weight:660}
}

/* THE COMMITMENTS ROW PUSHED THE PAGE 62px WIDE ON A PHONE.
   grid-template-columns:auto 1fr looks safe and is not: a 1fr track
   has an automatic MINIMUM, so content wider than the track expands
   the grid instead of wrapping inside it. The prose in the second
   column carries max-width:56ch, which at this size is wider than a
   390px screen, so the row grew and took the whole document with it.

   minmax(0,1fr) gives the track permission to be smaller than its
   content, which is what makes the text wrap. This is the single
   most common cause of horizontal overflow in CSS grid and it is
   invisible until something inside is long enough to prove it. */
.commit-row{grid-template-columns:auto minmax(0,1fr)}
.commit-what,.commit-why{max-width:min(56ch,100%)}
/* There are two shapes of .commit-row in this estate: one with a
   number and a body, one with a statement and an attribution. My
   minmax(0,1fr) fixed the first and broke the second, collapsing its
   second column to 0px while the content needed 74. Two columns of
   prose do not belong side by side on a 390px screen at all, so
   below the breakpoint they stack, which is what the original base
   rule did before a later rule overrode it at every width. */
@media (max-width:719px){
  .commit-row{grid-template-columns:1fr;gap:6px}
  .commit-who{padding-top:2px}
}

/* ============================================================
   ONE DARK BLUE, NOT TWO
   ============================================================
   The mark resolved to --blue-lt down the [data-theme="dark"]
   path and to --blue down the prefers-color-scheme path, so the
   identity was one colour if you toggled it and a different one
   if your phone was already dark. Nobody would ever see both, and
   that is exactly why it could sit there: a brand inconsistency
   invisible to the person who has it.

   In dark mode --blue is ALREADY the light blue, because the whole
   palette flips. So --blue is correct on both paths and --blue-lt
   was the mistake, not the other way round. Stated once here for
   every element that was carrying the split. */
:root[data-theme="dark"] .brand b .z,
:root[data-theme="dark"] .mh-mark .z{color:var(--blue)}

/* ============================================================
   THE DEFINITION LINE
   ============================================================
   The opening said what is true of the room before it said what
   the room is. "Nobody has to be persuaded to use it" is a strong
   sentence and it is unreadable to somebody who has not yet been
   told what "it" is.

   So the first prose on the page is now a definition, and the
   argument follows it. It sits between the headline and the lede
   in size and weight: heavier than the argument because it is the
   thing, lighter than the headline because the headline is still
   the hook. The name is bolded inside it, which is the only place
   on the page where the product is named in running text. */
.hero-def{
  margin:calc(var(--u) * 1.1) 0 calc(var(--u) * .9);
  max-width:44ch;
  font-size:clamp(17px,1.55vw,20.5px);
  line-height:1.45;
  letter-spacing:-.004em;
  color:var(--ink);
  font-weight:450;
}
.hero-def b{font-weight:640;color:var(--blue)}
.hero .hero-lede{
  font-size:clamp(15px,1.15vw,16.5px);
  color:var(--muted);
  max-width:46ch;
}
:root[data-theme="dark"] .hero-def{color:var(--ink)}
:root[data-theme="dark"] .hero-def b{color:var(--blue)}
@media (max-width:719px){
  .hero-def{font-size:clamp(16.5px,4.4vw,19px);max-width:100%}
}
/* .hero p{color:var(--on-dark)} survives from when the hero was a
   dark band. It is (0,1,1) and .hero-def was (0,1,0), so the new
   definition inherited a colour meant for dark ground and rendered
   at 1.07:1 on paper. Matched through the section so the most
   important sentence on the page is actually legible. */
.hero .hero-def{color:var(--ink)}
.hero .hero-def b{color:var(--blue)}
:root[data-theme="dark"] .hero .hero-def{color:var(--ink)}
:root[data-theme="dark"] .hero .hero-def b{color:var(--blue)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero .hero-def{color:var(--ink)}
  :root:not([data-theme="light"]) .hero .hero-def b{color:var(--blue)}
}

/* THE SCOPE NOTE.
   Quiet by design. It is not a disclaimer hiding at the foot of a
   page, and it is not a headline either: it is a boundary stated
   plainly beside the thing it bounds. A supplier that names its own
   limit before being asked is the one a Head of People believes
   about everything else. */
.scope-note{padding:clamp(26px,3.4vw,40px) 0 0}
.scope-line{
  max-width:74ch;margin:0;
  padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid var(--hair);
  font-size:clamp(14.5px,1.15vw,16px);
  line-height:1.6;color:var(--muted);
}
.scope-line em{font-style:normal;font-weight:600;color:var(--ink)}

/* ============================================================
   THE ONE UNDERLINE ON THE SITE
   ============================================================
   "Permanent" is the word doing the differentiating. Everything
   else in this category is a pop-up, a wellness week or a one-day
   activation, and that single adjective is what separates the
   product from all of them. It deserves a mark of its own.

   Underline is normally forbidden on the web because it means
   link. Here it is free: every link on this site signals with
   COLOUR and carries text-decoration:none, so a rule under a word
   cannot be mistaken for one. The convention was available
   because the site had already spent its link signal elsewhere.

   Drawn rather than defaulted. The word stays ink so it is plainly
   not a link; the rule is the accent, which is the site's mark of
   consequence. Offset well clear of the baseline so the p's
   descender is not struck through, skip-ink on so it breaks
   cleanly around it, and 2px so it reads as deliberate at the
   sizes this line takes.

   It is used exactly once on the whole site. A second use would
   make it a style; one use makes it a point. */
.hero-def u.mk{
  text-decoration-line:underline;
  text-decoration-color:var(--blue);
  text-decoration-thickness:2px;
  text-underline-offset:5px;
  text-decoration-skip-ink:auto;
  font-weight:520;
  color:var(--ink);
}
:root[data-theme="dark"] .hero-def u.mk{text-decoration-color:var(--blue);color:var(--ink)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero-def u.mk{text-decoration-color:var(--blue);color:var(--ink)}
}
@media (max-width:719px){
  .hero-def u.mk{text-underline-offset:4px;text-decoration-thickness:1.8px}
}
/* GARDEN was set at 86% opacity, which put a third value into a
   two-word mark: the accent, the ink, and a washed grey that is
   neither. At this size the eye reads that as faded rather than as
   quiet, so the second line looked like a subtitle attached to the
   name instead of half of it.

   Full ink. The two words are now two deliberate colours, and the
   hierarchy is carried by size, case and tracking, which were doing
   that job already and did not need opacity's help.

   The band gap closes a little with it: at 8px the two lines were
   reading as stacked rather than locked. */
.brand b .g{opacity:1;margin-top:.02em}
.brand b{line-height:.82}
:root[data-theme="dark"] .brand b .g,
.dark .brand b .g,.hero .brand b .g,footer.site .brand b .g{opacity:1}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand b .g{opacity:1}
}

/* ============================================================
   THE UNDERLINE, DRAWN RATHER THAN DECLARED
   ============================================================
   text-decoration:underline gives you a rule with square ends that
   runs the full advance width of the word, including the sidebearing
   air at each end. It is a default, and it looks like one.

   Drawn as an element instead, three things become possible and all
   three are the difference:

   ROUNDED ENDS. A 2px rule with square corners is a hyphen stretched
   long. Rounding it to its own height turns it into a stroke, which
   is what a person would draw.

   OPTICAL INSET. The rule stops 0.06em short at each end so it sits
   under the LETTERS rather than under the word's metric box. A rule
   that runs to the metric edge always looks slightly too long, and
   nobody can say why.

   IT ARRIVES. The stroke draws itself in from the left, once, over
   half a second, easing out. Nothing else on this page moves on
   load, so the eye goes to the one word that matters at the moment
   the sentence is being read. It never repeats and it never loops:
   a mark that keeps moving stops being a mark.

   Off entirely under prefers-reduced-motion, where it is simply
   present from the first frame. */
.hero-def u.mk{
  text-decoration:none;
  position:relative;
  font-weight:520;
  color:var(--ink);
}
.hero-def u.mk::after{
  content:"";
  position:absolute;
  left:.06em;right:.06em;
  bottom:-.14em;
  height:2px;
  border-radius:2px;
  background:var(--blue);
  transform-origin:left center;
  animation:mkDraw .62s cubic-bezier(.16,1,.3,1) .35s both;
}
@keyframes mkDraw{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .hero-def u.mk::after{animation:none}
}
@media (max-width:719px){
  .hero-def u.mk::after{height:1.8px;bottom:-.12em}
}

/* THE DOWNLOAD METADATA LEAVES THE MONOSPACE.
   Sixth instance of the same tell: mono, small, letterspaced, used
   for a label. It was removed from the kicker, the source labels,
   the zone ordinals, the form legend and the hero caption, and it
   survived here because this block sits on a page the sweeps kept
   treating as finished. A file size is not code. It is a caption,
   and captions on this site are set in the serif italic. */
.dl .dl-m{
  font-family:var(--serif);
  font-variation-settings:"opsz" 18;
  font-style:italic;
  font-size:13px;
  letter-spacing:0;
  font-weight:450;
}
/* The line that names the set. */
.dl-lead{
  max-width:56ch;
  margin:0 0 clamp(14px,1.8vw,18px);
  font-size:clamp(14.5px,1.15vw,16px);
  line-height:1.55;
  color:var(--muted);
}
.dl-lead b{color:var(--ink);font-weight:600}
/* The filled room becomes a photograph. The stroke stays and the
   fill goes, or the tint would sit over the picture and grey it.
   The label goes too: it was naming a thing that is now visible. */
.hp-zen{fill:none;stroke:rgba(42,74,168,.55);stroke-width:2}
.hp-photo{opacity:.92}
:root[data-theme="dark"] .hp-zen{stroke:rgba(147,169,226,.6)}
:root[data-theme="dark"] .hp-photo{opacity:.82}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-zen{stroke:rgba(147,169,226,.6)}
  :root:not([data-theme="light"]) .hp-photo{opacity:.82}
}
/* Partitions thin, envelope heavy. That weight difference is the
   whole grammar of an architectural drawing: it tells you what is
   structure and what is division, without a legend. */
.hp-rooms rect{stroke:rgba(20,26,36,.17);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.hp-envelope{fill:none;stroke:rgba(20,26,36,.34);stroke-width:2.1;vector-effect:non-scaling-stroke}
.hp-zen{fill:none;stroke:rgba(42,74,168,.62);stroke-width:2.1;vector-effect:non-scaling-stroke}
:root[data-theme="dark"] .hp-rooms rect{stroke:rgba(236,234,229,.16)}
:root[data-theme="dark"] .hp-envelope{stroke:rgba(236,234,229,.3)}
:root[data-theme="dark"] .hp-zen{stroke:rgba(147,169,226,.66)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-rooms rect{stroke:rgba(236,234,229,.16)}
  :root:not([data-theme="light"]) .hp-envelope{stroke:rgba(236,234,229,.3)}
  :root:not([data-theme="light"]) .hp-zen{stroke:rgba(147,169,226,.66)}
}
/* The subject room, marked the way a plan marks one: a light fill,
   a wall drawn at the envelope's weight rather than a partition's,
   and the name set inside the space. The fill returns now that
   there is no photograph for it to sit on top of. */
.hp-zen{fill:rgba(42,74,168,.07);stroke:rgba(42,74,168,.62);stroke-width:2.1}
.hp-label{
  fill:rgba(42,74,168,.72);
  font-family:var(--sans);
  font-size:14px;font-weight:600;
  letter-spacing:2.2px;
}
:root[data-theme="dark"] .hp-zen{fill:rgba(147,169,226,.1);stroke:rgba(147,169,226,.66)}
:root[data-theme="dark"] .hp-label{fill:rgba(147,169,226,.8)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-zen{fill:rgba(147,169,226,.1);stroke:rgba(147,169,226,.66)}
  :root:not([data-theme="light"]) .hp-label{fill:rgba(147,169,226,.8)}
}

/* ============================================================
   MOBILE: THE ROOM ARRIVES SOONER
   ============================================================
   Measured before changing anything: the plan was 360px wide and
   273px tall on a 400px phone, a full third of the screen, and the
   photograph did not begin until 830px down. So a first-time
   reader met a whole screen of technical drawing before they saw
   the thing being described.

   The plan is evidence, not the payoff. On desktop it earns its
   size because it fills a column that would otherwise be empty. On
   a phone there is no empty column, so the same drawing at the same
   scale is just delay.

   It becomes what it always was: an annotation. Smaller, set to
   the right the way a margin figure sits in a book, tight to the
   photograph beneath it so the two read as one exhibit. The
   sequence is unchanged and now legible in a glance: here is the
   idea, here is where it sits, here it is.

   The dock also stopped covering it. A sticky bar that overlaps
   content is a bar the reader has to scroll around. */
@media (max-width:719px){
  .hero-plan{
    width:62%;
    margin:calc(var(--u) * 1.5) 0 0 auto;
  }
  .hp-label{font-size:16px;letter-spacing:1.6px}
  .hero .hero-inner{padding-bottom:calc(var(--u) * .5)}
  /* clearance for the sticky dock, which is 64px plus safe area */
  .hero-plate{margin-bottom:0}
  .hero{padding-bottom:0}
}

/* ============================================================
   THE MONOSPACE SWEEP, DONE PROPERLY THIS TIME
   ============================================================
   This device has been removed from the kicker, the source labels,
   the zone ordinals, the form legend, the hero caption and the
   download metadata, one at a time, each time it was spotted. That
   is not a sweep, it is whack-a-mole, and it is why it kept coming
   back. A scan of every element on all seven pages found it still
   living in fourteen classes, including a nineteen-word sentence.

   The rule, stated once so it can be applied rather than
   rediscovered: MONOSPACE IS FOR CODE. Not for labels, not for
   captions, not for prose, and never for a sentence. A file path
   is code. "Why it matters" is a heading. "Stop 1 of 6" is a
   caption. None of them are code.

   Two replacements, by kind:
     prose  -> the sans, because it is prose
     labels -> the serif italic, sentence case, which is this
               site's one label device and has been since the
               kicker was fixed.

   Nothing here changes size or spacing. Only the face, the case
   and the tracking, which are the three things that were making
   ordinary English look like terminal output. */

/* PROSE. These carry sentences. */
.commit-who,.logo-cap,figure figcaption,.walk-why,.walk-why p,
.foot-legal span,.foot-legal a{
  font-family:var(--sans);
  letter-spacing:normal;
  text-transform:none;
}

/* LABELS. Short, and they name the thing beside them. */
.label,.step-n,.faq-tag,.walk-count,.walk-stop .n,.commit-n,.walk-why-t,
.trio .trio-n,.legend,.reading-src b,.hs-what,.hs-src,.clients-lab,.commit-what{
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  letter-spacing:0;
  text-transform:none;
}
/* .commit-what is a statement, not a label: it keeps the serif but
   loses the italic, which is for labels only. */
.commit-what{font-style:normal;font-variation-settings:"opsz" 48}

/* Contact details are read by people, not machines. */
.foot-legal a[href^="mailto"],a[href^="mailto"]{font-family:var(--sans);letter-spacing:normal}
/* The last six, named by their real path rather than by the class I
   assumed. Chasing them one at a time is what let this device
   survive six sweeps, so these are matched precisely and the rule
   above them states the principle for whoever comes next.

   .film figcaption   a caption, two sentences
   .walk-rail .n      a step number in the tour rail
   .walk-notice b     the heading "Why it matters"
   .curve svg text    axis labels on the graph
   .cite .tlink       a link in a citation line
   .field label       every form field label on the site */
figure.film figcaption,
.walk-rail .n,
.walk-notice b,
.cite .tlink,
.field label{
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  letter-spacing:0;
  text-transform:none;
}
/* Captions and links are prose, not labels: serif but upright. */
figure.film figcaption,.cite .tlink{font-family:var(--sans);font-style:normal}
/* The graph's axis labels stay small and quiet but stop being code. */
.curve svg text{font-family:var(--serif);font-style:italic;letter-spacing:0;text-transform:none}
/* A form label is read once, quickly, by somebody deciding whether to
   type. It gets the sans at the size it always had. */
.field label{font-family:var(--sans);font-style:normal;letter-spacing:normal}
/* The complete remaining set, taken from a scan of all seven pages
   rather than from guessing. Every one of these carries English
   read by a person: two captions, a note, a citation and the brief's
   footer rule. None is code.

   Declared as one block with inheritance doing the work, so a child
   added inside any of them tomorrow is prose by default and does not
   have to be found in a seventh sweep. */
.walk-notice, .walk-notice *,
figure.shot figcaption, figure.shot figcaption *,
figure.film figcaption, figure.film figcaption *,
p.cite, p.cite *,
p.brief-rule, p.brief-rule *{
  font-family:var(--sans);
  letter-spacing:normal;
  text-transform:none;
}
/* Inside those, the lead-in b stays a label and takes the site's
   label face, which is the serif italic. */
.walk-notice b, figure.shot figcaption b, figure.film figcaption b, p.cite b{
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-weight:600;
  color:var(--ink);
}
/* Except the photograph lead-in, which is a statement and reads
   better upright. */
figure.shot figcaption b, figure.film figcaption b{font-style:normal;font-family:var(--sans);font-weight:600}
/* Axis labels on the curve. */
.curve svg text, svg text{font-family:var(--serif);font-style:italic;letter-spacing:0;text-transform:none}
/* Two survivors, both beaten by a longer selector declared earlier.
   Matched at the same depth so this is the last word rather than
   another round. */
.walk-body p.walk-notice,.walk-body p.walk-notice *{
  font-family:var(--sans);letter-spacing:normal;text-transform:none;
}
.walk-body p.walk-notice b{font-family:var(--serif);font-style:italic;font-weight:600}
.curve figure svg text,figure.curve svg text,.curve svg text{
  font-family:var(--serif);font-style:italic;letter-spacing:0;text-transform:none;
}
/* The curve's own axis labels, .c-lab, were the last one. They are
   words on a chart, which is the classic place a designer reaches
   for monospace and the classic place it is wrong: a chart label is
   read as language, not parsed as data. */
.c-lab,text.c-lab{
  font-family:var(--serif);
  font-variation-settings:"opsz" 18;
  font-style:italic;
  letter-spacing:0;
  text-transform:none;
}
/* The blanket `svg text` rule in the monospace sweep caught the
   plan's room label and made it serif italic. A room label on an
   architectural drawing is annotation, not prose: it is set in the
   sans, in capitals, letterspaced, the way a draughtsman letters a
   plan. Restored, and scoped so the sweep cannot reach it again. */
.hero-plan text.hp-label,.hp-label{
  font-family:var(--sans);
  font-style:normal;
  font-size:14px;
  font-weight:600;
  letter-spacing:2.2px;
  text-transform:none;
}
/* The corridor: two wall lines with space between them, at partition
   weight. Space is what a corridor is; drawing it as a filled room
   would make it look like a room. */
.hp-corridor path{
  stroke:rgba(20,26,36,.17);
  stroke-width:1;
  fill:none;
  vector-effect:non-scaling-stroke;
}
:root[data-theme="dark"] .hp-corridor path{stroke:rgba(236,234,229,.16)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-corridor path{stroke:rgba(236,234,229,.16)}
}
/* The final two. `.curve .c-lab` is (0,2,0) and my `text.c-lab` was
   (0,1,1), so the earlier declaration kept winning. Matched at the
   same specificity, declared later, which is the last word.
   These are the curve's axis captions: "week one", "month three".
   Words on a chart are read as language, not parsed as data. */
.curve .c-lab{
  font-family:var(--serif);
  font-variation-settings:"opsz" 18;
  font-style:italic;
  letter-spacing:.01em;
  text-transform:none;
}
/* Contents, not structure. Lighter than a partition and much
   lighter than the envelope, so the eye reads the walls first, the
   rooms second and the furniture last, which is the order a plan is
   meant to be read in. */
.hp-desks rect{
  fill:none;
  stroke:rgba(20,26,36,.11);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.hp-desks path{
  stroke:rgba(20,26,36,.11);
  stroke-width:1;
  fill:none;
  vector-effect:non-scaling-stroke;
}
:root[data-theme="dark"] .hp-desks rect,
:root[data-theme="dark"] .hp-desks path{stroke:rgba(236,234,229,.1)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-desks rect,
  :root:not([data-theme="light"]) .hp-desks path{stroke:rgba(236,234,229,.1)}
}
/* Room names, in the draughtsman's convention: sans, capitals,
   letterspaced, small, and quieter than every wall. They label the
   space without becoming the subject of the drawing. The Zen
   Garden's own label stays a step stronger and takes the accent,
   because on a plan the room being designed is the one that carries
   the weight. */
.hp-names text{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:1.6px;
  fill:rgba(20,26,36,.36);
}
:root[data-theme="dark"] .hp-names text{fill:rgba(236,234,229,.34)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-names text{fill:rgba(236,234,229,.34)}
}
/* The booths sit at contents weight with the desks, not at wall
   weight. They are furniture inside a room, and a plan that draws
   them as heavy as a partition tells the reader they are structure,
   which they are not. */
.hp-booths rect{
  fill:none;
  stroke:rgba(20,26,36,.13);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
:root[data-theme="dark"] .hp-booths rect{stroke:rgba(236,234,229,.12)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-booths rect{stroke:rgba(236,234,229,.12)}
}
/* The service core. Lifts and stairs drawn inside it, at contents
   weight, because a core is a room containing things rather than a
   solid block. It is the one part of a floor that never moves, which
   is why every plan puts it in first. */
.hp-core rect{fill:none;stroke:rgba(20,26,36,.17);stroke-width:1;vector-effect:non-scaling-stroke}
.hp-core rect:first-child{stroke-width:1.4}
.hp-core path{stroke:rgba(20,26,36,.12);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
:root[data-theme="dark"] .hp-core rect{stroke:rgba(236,234,229,.16)}
:root[data-theme="dark"] .hp-core path{stroke:rgba(236,234,229,.11)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-core rect{stroke:rgba(236,234,229,.16)}
  :root:not([data-theme="light"]) .hp-core path{stroke:rgba(236,234,229,.11)}
}
/* Glazing ticks: the lightest mark on the drawing, because a window
   run is the least structural thing an outer wall does. */
.hp-glazing path{stroke:rgba(20,26,36,.14);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
/* The dimension line, in the accent, because it is measuring the
   thing the accent belongs to. Ticks at both ends, annotation above
   the line and clear of it, which is the convention. */
.hp-dim path{stroke:rgba(42,74,168,.5);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.hp-dim text{
  font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:1.5px;fill:rgba(42,74,168,.66);
}
:root[data-theme="dark"] .hp-glazing path{stroke:rgba(236,234,229,.13)}
:root[data-theme="dark"] .hp-dim path{stroke:rgba(147,169,226,.55)}
:root[data-theme="dark"] .hp-dim text{fill:rgba(147,169,226,.75)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-glazing path{stroke:rgba(236,234,229,.13)}
  :root:not([data-theme="light"]) .hp-dim path{stroke:rgba(147,169,226,.55)}
  :root:not([data-theme="light"]) .hp-dim text{fill:rgba(147,169,226,.75)}
}
/* The glazed facade. The inner face is the faintest line in the whole
   drawing, because it is glass: present, and not structure. Mullions
   sit a shade stronger so the rhythm reads, and both stay well under
   the partitions so the plan is still read walls-first. */
.hp-glazing path{stroke:rgba(20,26,36,.13);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.hp-glazing path.cw{stroke:rgba(20,26,36,.09);stroke-width:1}
:root[data-theme="dark"] .hp-glazing path{stroke:rgba(236,234,229,.12)}
:root[data-theme="dark"] .hp-glazing path.cw{stroke:rgba(236,234,229,.08)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-glazing path{stroke:rgba(236,234,229,.12)}
  :root:not([data-theme="light"]) .hp-glazing path.cw{stroke:rgba(236,234,229,.08)}
}
/* The dimension comes up a step. It is the one annotation on the
   drawing that carries the argument, so it may sit slightly above
   the glazing and the partitions rather than among them. Line from
   .5 to .62, label from .66 to .84, and a point of size. Still well
   under the Zen Garden's own wall, which stays the strongest accent
   mark on the plan. */
.hp-dim path{stroke:rgba(42,74,168,.62);stroke-width:1.15}
.hp-dim text{font-size:11.5px;fill:rgba(42,74,168,.84);letter-spacing:1.6px}
:root[data-theme="dark"] .hp-dim path{stroke:rgba(147,169,226,.66)}
:root[data-theme="dark"] .hp-dim text{fill:rgba(147,169,226,.9)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-dim path{stroke:rgba(147,169,226,.66)}
  :root:not([data-theme="light"]) .hp-dim text{fill:rgba(147,169,226,.9)}
}
/* Full width on a phone. The plate is landscape now, so running it
   edge to edge costs little height and removes the dead strip that
   only existed because a square drawing had to be shrunk to fit. */
@media (max-width:719px){
  .hero-plan{width:100%;margin:calc(var(--u) * 1.4) 0 0}
}
/* DESKTOP: BIGGER, AND LIFTED OFF THE FLOOR.
   It was 400px wide anchored to the button's baseline, which put it
   low in a tall column and left air above it doing nothing. The
   column is the widest empty space on the page and the drawing was
   using about half of it.

   Wider, and anchored so its centre sits against the middle of the
   text block rather than its foot. Two objects on one row read as a
   pair when their centres agree; when one is bottom-aligned to the
   other it reads as one thing having fallen. */
@media (min-width:900px){
  .hero-plan{
    width:min(47%,520px);
    bottom:auto;
    top:50%;
    transform:translateY(-46%);
  }
}
@media (min-width:1100px){
  .hero-plan{width:min(46%,540px)}
}
/* Measured at -46% the plan's centre sat 45px below the text block's
   centre, because top:50% centres it on the inner box and that box
   carries 6u of padding under the button. Corrected against the
   measurement rather than by eye. */
@media (min-width:900px){
  .hero-plan{transform:translateY(-61%)}
}
/* 540 overshot. 400 was too small and left the column half used;
   540 crowded the headline above it. 460 is the size at which the
   plan reads as a considered exhibit beside the text rather than as
   either an afterthought or a second subject. The centring holds
   because translateY is a percentage of the element's own height. */
@media (min-width:900px){
  .hero-plan{width:min(41%,460px)}
}
@media (min-width:1100px){
  .hero-plan{width:min(40%,470px)}
}
/* THE VOID UNDER THE OPENING.
   Measured: 177px of nothing between the lowest thing in the hero
   and the top of the photograph. That band is what a template
   leaves when it stretches to fill a viewport, and it is the last
   thing in this section that reads as assembled rather than
   composed. Space above a group is composition. Space below the
   last thing, before the next thing, is a gap.

   Cut to a deliberate breath. The photograph now arrives while the
   sentence is still in the reader's eye, which is the relationship
   the two are supposed to have: the claim, then the room. */
@media (min-width:900px){
  .hero .hero-inner{padding-bottom:calc(var(--u) * 2.2)}
}
/* Cutting the padding moved the inner box's centre, so the plan
   rose 37px above the text block. Re-solved against the new
   measurement rather than left to drift: this is the second time
   the centring has had to follow a spacing change, which is what
   happens when a thing is centred on a container rather than on
   the content it is meant to relate to. */
@media (min-width:900px){
  .hero-plan{transform:translateY(-47%)}
}
/* The three take-away controls sit on one row and must read as one
   set: equal height at every width, including when the print
   control's longer sub-label wraps on a phone. Unequal heights in a
   row of siblings is the commonest sign nobody checked the small
   screen. */
.dl-row .dl{align-items:flex-start;justify-content:center}
@media (max-width:719px){
  .dl-row{display:grid;gap:10px}
  .dl-row .dl{width:100%;min-height:76px;display:flex;flex-direction:column;justify-content:center}
}
/* The document icon belongs on the two documents, not on printing. */
.btn.dl .dl-t{color:inherit}
/* min-height alone does not equalise a grid row when one item wraps
   to two lines: it sets a floor, not a match. The grid rows are the
   right tool, since grid items stretch to their row by default. */
@media (max-width:719px){
  .dl-row{grid-auto-rows:1fr}
  .dl-row .dl{height:100%}
}

/* THE WORDMARK, SET ON ONE LINE -----------------------------------
   Stacked, the two words read as two objects sharing a corner, and
   closing the gap never fixed that: the problem was the stack.

   Side by side, one rule matters and it is measured, not judged. In
   a horizontal lockup the small word's CAP height is set against the
   large word's X-HEIGHT. Zen's x-height is 16.92px against a 25.88px
   cap, so GARDEN is sized until its caps land at about three
   quarters of that x-height:

     .40em  61% of x-height   GARDEN sags, reads as a footnote
     .52em  78%               chosen
     .628em 94%               GARDEN competes, the mark shouts

   Weight carries the hierarchy alongside size: 580 against Zen's
   620, so the eye is told twice which word leads.

   The gap is 0.39 of a word space. A word space in this face is
   7.7px at 36px; at .30em the gap was 5.6px, nearly a full space,
   and the two words floated apart. At .16em it is 3px, close enough
   to read as one mark and open enough that the n and the G are not
   fighting.

   NO FLEX HERE, DELIBERATELY. Flex blockifies its children, and
   align-items:baseline then fought the differing half-leading of two
   very different font sizes: GARDEN sat 3.5px above Zen's baseline,
   which is exactly the "not on the same floor" a reader notices
   without being able to name. Plain inline text shares a baseline by
   construction, with nothing to align and nothing to drift.

   Colours untouched: Zen in the deep blue, GARDEN in ink. */
.brand{
  display:inline-block;
  line-height:1;
  white-space:nowrap;
}
.brand b{
  display:inline;
  line-height:1;
  /* THE OPTICAL SIZE IS THE CONFIDENCE.

     Newsreader carries an opsz axis from 6 to 72. High values give the
     DISPLAY cut: long, fine serifs and high stroke contrast, drawn to be
     set large. Low values give the READING cut: blunt serifs, thicker
     joints, less contrast, drawn to survive being set small.

     The mark sat at 26, the middle of the axis, which is neither. Set at
     36px it read as wiry: the thin strokes went thin and the serifs came
     to points, and the whole thing looked hesitant beside any logo with
     weight in it.

     So the mark uses the READING cut at DISPLAY size, which is the oldest
     trick in the drawer and the correct one here. opsz 10 thickens the
     joints and blunts the serifs; the weight goes to 700 to match. The
     letterforms are unchanged, the typeface is unchanged, and nothing has
     been faked with a stroke or a transform.

     Set on .brand b so both words share one optical size. Two words of
     one mark drawn at different points on the axis would not belong to
     each other, which is the fault this whole pass was chasing. */
  font-variation-settings:"opsz" 10;
}
.brand b .z{
  display:inline;
  font-size:1em;
  font-weight:700;
  letter-spacing:.012em;
  color:var(--blue);
}
.brand b .g{
  display:inline;
  font-size:.70em;
  font-weight:620;
  /* Tracking follows the letterforms. The old caps were the delicate cut
     and needed .10em to stop them rattling; opsz 10 draws them wider and
     heavier, so the same tracking left them airy. Caps still need some,
     though: below about .03em they read cramped, which is why this stops
     at .06 rather than going to zero.

     margin-right cancels the tracking that CSS adds after the final N, so
     the mark ends on the last stroke instead of on a space nobody can see
     but everything after it can feel. */
  letter-spacing:.045em;
  /* ONE WORD. The gap had already closed to 0.17 of a word space and
     the pair was reading as a single word, so the gap was doing no
     work except leaving a seam. Closed to nothing.

     The colour break now does the separating, which is the FedEx
     arrangement: one word, two tones, and the join is the point
     rather than an accident. A hair of optical space remains because
     the n ends on a vertical stem and the G opens on a curve, and
     flush metal there would read as tighter than everywhere else. */
  margin-left:.014em;
  margin-right:-.045em;
  /* GARDEN's ink-bottom measured 2px above Zen's, both being cap-height
     with no descenders, so this is the two words sitting on different
     planes rather than a rendering artefact. margin-top does nothing
     here: it has no effect on inline, non-replaced elements, which is
     why every earlier attempt at this correction in this file's
     history was silently inert. vertical-align is the property that
     actually moves inline content; measured and nudged until the two
     ink-bottoms matched exactly. */
  vertical-align:-.106em;
  text-transform:uppercase;
  color:#39435A;
  opacity:1;
}

/* THE SIGNATURE, THE THREE ZONES ----------------------------------
   PARKED, 5 August. The mark is final without a device, so nothing in
   the markup uses this any more. The rules stay because the idea was
   right and only the timing was wrong: the dots come off the room's
   own wooden sign, and each one belongs to a zone. Putting them back
   is one line of markup, not a rebuild.
   Three dots come off the room's own wooden sign, where they sit
   between the name and three words. Here each dot belongs to a zone
   and the zone is named beside it, so the device carries information
   rather than pattern.

   Deliberately NOT set inline with the name. Three dots on a text
   line is an ellipsis, and an ellipsis already means "something
   omitted": "Zen ... GARDEN" reads as a gap, not a rhythm. Below the
   mark they read as a mark.

   Sized in em of the lockup so the whole signature scales as one
   object. Shown only where the names are legible; the header runs
   the mark alone rather than printing dots too small to resolve. */
.zg-sig{
  display:flex;
  flex-wrap:wrap;
  gap:.55em 1.5em;
  margin-top:.9em;
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-size:14px;
  line-height:1;
  color:var(--muted-dark);
  letter-spacing:.006em;
}
.zg-sig span,.foot-mark .zg-sig span{
  /* .foot-mark span already carries a border-top and its own type, and the
     zone items are spans inside .foot-mark, so they inherited a hairline
     above each name. Reset explicitly rather than renaming the element:
     the next person to add a span in this footer would hit the same wall. */
  display:inline-flex;align-items:baseline;gap:.5em;white-space:nowrap;
  border:0;margin:0;padding:0;
  font-family:inherit;font-size:inherit;font-style:inherit;
  letter-spacing:inherit;text-transform:none;color:inherit;
}
.zg-sig i{
  width:.24em;height:.24em;border-radius:50%;
  background:var(--blue);flex:none;
  transform:translateY(-.3em);
}
.foot-mark .brand{font-size:29px}
.foot-mark > span{display:block;margin-top:.85em}
@media (max-width:719px){
  .zg-sig{font-size:13px;gap:.5em 1.15em}
}

/* THE HEADER CONTROLS, SIZED AGAINST THE MARK ---------------------
   The trial button and the menu toggle were both 44px tall against a
   mark whose cap height is 25px. Two controls the same visual weight
   as the thing they sit beside makes a header read as three items of
   equal rank, and the mark stops being the mark.

   Brought down to 36px, which keeps a comfortable pointer target and
   leaves the wordmark the tallest thing in the bar. Type comes down
   with the box so the buttons do not turn into slabs of text.

   The mobile rule is deliberately not touched below 719px: a control
   a thumb has to find wants the larger target, and there the mark is
   smaller anyway, so nothing competes. */
/* THE PLAN NAMES ITSELF ------------------------------------------
   Dimmer than the dimension line and dimmer than the room label,
   because it captions the sheet rather than marking anything on it.
   A caption that competes with the drawing is a second drawing. */
.hp-caption{
  font-family:var(--sans);
  /* Up from 9.5 and darkened from .34. It was legible in the sense
     that the pixels were there, which is not the same as being read.
     This line is the only thing on the drawing that explains the
     drawing, so it earns enough contrast to actually get read, while
     staying below the dimension line in the hierarchy. */
  font-size:11px;
  font-weight:500;
  letter-spacing:1.15px;
  fill:rgba(20,26,36,.48);
}
:root[data-theme="dark"] .hp-caption{fill:rgba(236,234,229,.46)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hp-caption{fill:rgba(236,234,229,.46)}
}

/* THE PLAN LANDS ON THE BUTTON'S LINE ------------------------------
   It was centred on the section, which meant it was aligned to
   nothing: its top ran 70px INTO the headline's last line, and its
   bottom floated 64px above the call to action, so the composition
   had a drawing in it rather than a drawing as part of it.

   Anchored to the bottom instead. The inner box's lower padding is
   2.2u and the button is the last thing in it, so the button's lower
   edge sits exactly 2.2u above the box's bottom. Giving the plan the
   same offset puts its baseline on the button's baseline, and the eye
   gets one horizontal running the width of the screen: the button on
   the left, the drawing's bottom rule on the right.

   It also clears the headline, which is what started this. */
@media (min-width:900px){
  .hero .hero-plan{
    top:auto;
    bottom:calc(var(--u) * 2.2);
    transform:none;
  }
}
/* Between 900 and 1280 the headline wraps to a second line that runs
   further right, and its descenders caught the plan's top corner: 14px
   of real overlap at 1150. The bottom edge is spoken for now, so the
   height is what gives. A slightly narrower plate drops its top clear
   of the text and keeps the baseline exactly where it belongs. */
@media (min-width:900px) and (max-width:1319px){
  .hero .hero-plan{width:min(35%,430px)}
}

/* THE PLAN DRAWS ITSELF -------------------------------------------
   The order is the argument, not decoration. The floor arrives
   first, because it is the floor the client already has. The
   partitions and desks settle into it. Then the one room fills,
   because that is the only thing being added. Then the dimension
   runs out from the desks to the room, because the last thing worth
   knowing is how near it is.

   Anything that reverses that order would be animation for its own
   sake. This is the sentence the drawing already makes, timed.

   Under two seconds, ease-out only, nothing moves position: strokes
   reveal and fills come up. Motion that shifts layout in a hero is
   how a page feels cheap, and it is also how it feels slow. */
@media (prefers-reduced-motion:no-preference){
  .hero-plan .hp-envelope{
    stroke-dasharray:1;stroke-dashoffset:1;
    animation:hp-draw 1.05s cubic-bezier(.22,1,.36,1) .15s forwards;
  }
  .hero-plan .hp-rooms,
  .hero-plan .hp-glazing{opacity:0;animation:hp-in .7s cubic-bezier(.22,1,.36,1) .55s forwards}
  .hero-plan .hp-desks{opacity:0;animation:hp-in .7s cubic-bezier(.22,1,.36,1) .78s forwards}
  .hero-plan .hp-zen-g{opacity:0;animation:hp-in .75s cubic-bezier(.22,1,.36,1) 1s forwards}
  .hero-plan .hp-dim path{
    stroke-dasharray:1;stroke-dashoffset:1;
    animation:hp-draw .75s cubic-bezier(.22,1,.36,1) 1.32s forwards;
  }
  .hero-plan .hp-dim text{opacity:0;animation:hp-in .6s cubic-bezier(.22,1,.36,1) 1.62s forwards}
  .hero-plan .hp-caption{opacity:0;animation:hp-in .7s cubic-bezier(.22,1,.36,1) 1.8s forwards}
}
@keyframes hp-draw{to{stroke-dashoffset:0}}
@keyframes hp-in{to{opacity:1}}

/* THE HEADER CONTROLS ON A PHONE ----------------------------------
   They were 40px here against 36 on the desktop, so the two controls
   drew MORE attention on the screen where there is least room for
   them to be shouting. Down to 34.

   The tap target does not come down with them. A 34px pill is under
   the comfortable minimum, and a control that looks right and misses
   half the time is a worse control. So the box that is painted is 34
   and the box that receives the touch is 44, extended by a
   transparent pseudo-element beyond the visible edge.

   This is the reason the pair carries position:relative: the
   extension is positioned against it, and without that the hit area
   would attach itself to whatever ancestor happened to be
   positioned, which is how invisible dead zones get made. */
@media (max-width:719px){
  header.site .nav-cta,
  header.site .menu > summary{
    height:34px;min-height:34px;max-height:34px;
    position:relative;
    font-size:13px;
    border-radius:9px;
  }
  header.site .nav-cta{padding:0 13px}
  header.site .menu > summary{width:34px;padding:0}

  header.site .nav-cta::after,
  header.site .menu > summary::after{
    content:"";
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:calc(100% + 12px);
    height:44px;
    border-radius:inherit;
  }
}

/* THE TWO CONTROLS, ONE RULE PER SCREEN ---------------------------
   `header.site .btn` sets min-height:44px, and a plain height:36px
   loses to a larger min-height however the cascade is arranged. The
   earlier attempt only appeared to work because it happened to sit
   later in the file at equal specificity, which is not a rule, it is
   a coincidence waiting to be tidied up.

   So both dimensions are stated at the same specificity as the rule
   they have to beat, and min and max are pinned alongside height so
   nothing can quietly grow them again. Desktop 36, phone 34, and the
   phone keeps a 44px touch target through the pseudo-element above. */
@media (min-width:720px){
  header.site .nav-links .nav-cta,
  header.site .nav-links .menu > summary{
    height:36px;min-height:36px;max-height:36px;
    font-size:13.5px;border-radius:9px;
  }
  header.site .nav-links .nav-cta{padding:0 15px}
  header.site .nav-links .menu > summary{width:36px;padding:0}
}
@media (max-width:719px){
  header.site .nav-links .nav-cta,
  header.site .nav-links .menu > summary{
    height:34px;min-height:34px;max-height:34px;
    font-size:13px;border-radius:9px;
  }
  header.site .nav-links .nav-cta{padding:0 13px}
  header.site .nav-links .menu > summary{width:34px;padding:0}
}

/* ONE FLOOR ACROSS THE HEADER -------------------------------------
   Three separate mechanisms were deciding the vertical, and they
   disagreed: the row centred on desktop but the links carried a
   legacy top:6px nudge from an old fix, and on a phone the row used
   flex-start instead of centre. The controls landed 8px BELOW the
   mark's optical centre on desktop and 5px ABOVE it on a phone.

   And centring the boxes would still be wrong, because a wordmark's
   box is not its optical centre: "Zen" has no descender, so the line
   box carries empty room under the baseline and the letters sit
   high inside it. Box-centred, the mark always reads as floating.

   So the mark's own box is corrected until its centre IS its optical
   centre, in em so it holds as the mark scales, and then ordinary
   centring aligns everything for free at every width.

   The controls come down another step as well. Smaller controls beside
   an unchanged mark is the cheapest way to give the mark the room,
   and the mark is the only thing in a header that has to be noticed. */
header.site .nav{align-items:center}
header.site .nav-links{position:static;top:auto}

header.site .brand{
  /* was 14 / 12: the extra below the baseline pushed the box centre
     under the optical centre by about .06em at every size. */
  padding-top:.39em;
  padding-bottom:.22em;
}

@media (min-width:720px){
  header.site .nav-links .nav-cta,
  header.site .nav-links .menu > summary{
    height:32px;min-height:32px;max-height:32px;
    font-size:13px;border-radius:8px;
  }
  header.site .nav-links .nav-cta{padding:0 13px}
  header.site .nav-links .menu > summary{width:32px;padding:0}
}
@media (max-width:719px){
  header.site .nav-links .nav-cta,
  header.site .nav-links .menu > summary{
    height:31px;min-height:31px;max-height:31px;
    font-size:12.5px;border-radius:8px;
  }
  header.site .nav-links .nav-cta{padding:0 12px}
  header.site .nav-links .menu > summary{width:31px;padding:0}
}

/* ONE CONTROL ON A PHONE ------------------------------------------
   The trial button and the menu sat side by side in a bar that is
   already the narrowest thing on the site, and the trial button was
   a duplicate: the menu panel has carried "Run a trial" at its foot
   the whole time. Two doors to the same room, in the least room.

   So on a phone the header keeps one control, and that control takes
   the accent, because it is now the only thing in the bar that does
   anything. The plus uses currentColor for its strokes, so colouring
   the control colours the glyph and there is nothing to keep in sync.

   Desktop is untouched. There the bar has width to spare, and a
   named action beats a symbol whenever there is room to name it. */
@media (max-width:719px){
  header.site .nav-links .nav-cta{display:none}

  header.site .menu > summary{
    color:var(--blue);
    border-color:var(--blue);
    border-width:1.5px;
  }
}

/* THE TRIAL MOVES INTO THE MENU ON A PHONE ------------------------
   An earlier pass deleted the panel's copy of the trial button
   BECAUSE the header carried one at every width. That reasoning was
   sound then and is now inverted: the header's copy is gone below
   720, so the panel's copy is the only one left and hiding it left
   the primary action unreachable on a phone.

   The pairing is what matters, not either rule alone. Exactly one of
   these two is visible at any width, and this block owns both sides
   of that so the next person changing one cannot silently orphan the
   other. That is the failure this very edit caused, and it was found
   by opening the menu and looking rather than by reading the CSS. */
@media (max-width:719px){
  header.site .nav-links .nav-cta{display:none !important}
  .menu-panel .menu-cta{display:block !important}
}
@media (min-width:720px){
  header.site .nav-links .nav-cta{display:inline-flex}
  .menu-panel .menu-cta{display:none}
}

/* THE MARK IN THE MENU, SAME AS EVERYWHERE ELSE -------------------
   It carried its own class and its own settings, so it kept the old
   stacked lockup and the old optical size while the header moved on.
   A second version of the mark living in a drawer is exactly how an
   identity drifts: nobody sees the two side by side, so nobody
   notices they stopped matching.

   Same numbers as the header, stated once here rather than inherited
   by accident: one line, opsz 10, 700 over 640, GARDEN at .52em, and
   the same near-zero join. */
.menu-panel .mh-mark{
  display:inline-block;
  white-space:nowrap;
  line-height:1;
  font-family:var(--serif);
  font-variation-settings:"opsz" 10;
  font-size:26px;
}
.menu-panel .mh-mark .z{
  display:inline;
  font-size:1em;
  font-weight:700;
  letter-spacing:.012em;
  color:var(--blue);
}
.menu-panel .mh-mark .g{
  display:inline;
  font-size:.70em;
  font-weight:620;
  letter-spacing:.045em;
  margin-left:.014em;
  margin-right:-.045em;
  /* GARDEN's ink-bottom measured 2px above Zen's, both being cap-height
     with no descenders, so this is the two words sitting on different
     planes rather than a rendering artefact. margin-top does nothing
     here: it has no effect on inline, non-replaced elements, which is
     why every earlier attempt at this correction in this file's
     history was silently inert. vertical-align is the property that
     actually moves inline content; measured and nudged until the two
     ink-bottoms matched exactly. */
  vertical-align:-.106em;
  text-transform:uppercase;
  color:#39435A;
  opacity:1;
}

/* THE MENU DROPS ITS MARK -----------------------------------------
   The panel opens over the hero, and the mark sat in the same corner
   as the header's mark, one over the other with the page showing
   between them. Two copies of a logo a few pixels apart is the one
   thing an identity cannot survive, and no amount of spacing fixes
   it: the header's mark is still there, underneath.

   The panel does not need to say the name. The reader arrived from
   the header, which is where the mark already is. */
.menu-panel .menu-head{display:none}

/* THE HERO PLATES -------------------------------------------------
   Four photographs, none of them cropped.

   The column ratios are the IMAGE ratios, so the grid resolves to
   each picture's own shape:

     room   16:9  -> 1.78fr
     tall    2:3  -> 0.667fr
     stack  16:9 x2, so half the height each -> 0.89fr

   Sum 3.337, which is the container's aspect-ratio. Every cell then
   lands on its native proportion, and object-fit has nothing left to
   trim. Building the grid the other way round, picking pleasant
   widths and cropping to fit, is how a page ends up with a beheaded
   subject nobody notices until it is printed.

   Cover is still set, because a hairline rounding difference between
   the fr maths and the real pixels should crop half a pixel rather
   than letterbox. */
.hero-plates{margin:0;position:relative}
.hero-plates .hp-grid{
  display:grid;
  /* Rebuilt on 3:2, 5 August. The photographs arrived at 3:2 and 2:3,
     not 16:9. Cropping four real photographs by 16% to protect a
     column ratio would be the grid dictating to the pictures, which
     is the exact fault this note warns against. The maths simply
     re-runs:

       room   3:2  -> 1.5fr
       tall   2:3  -> .667fr
       stack  3:2 x2, half height each -> .75fr

     Sum 2.917, which is the new aspect-ratio. Nothing is cropped. */
  grid-template-columns:1.5fr .667fr .75fr;
  grid-template-rows:1fr 1fr;
  gap:6px;
  aspect-ratio:2.917;
  width:100%;
}
.hero-plates .hp-room{grid-column:1;grid-row:1 / span 2}
.hero-plates .hp-tall{grid-column:2;grid-row:1 / span 2}
.hero-plates .hp-a{grid-column:3;grid-row:1}
.hero-plates .hp-b{grid-column:3;grid-row:2}
.hero-plates .hp-cell{
  position:relative;overflow:hidden;display:block;
  background:var(--paper-2,#EFEDE8);
}
.hero-plates .hp-cell img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover){
  .hero-plates .hp-cell:hover img{transform:scale(1.022)}
}
@media (prefers-reduced-motion:reduce){
  .hero-plates .hp-cell img{transition:none}
  .hero-plates .hp-cell:hover img{transform:none}
}

/* On a phone three columns would make four stamps. The room keeps
   the full width because it is the one that has to read, and the
   other three share a row underneath at their own proportions. */
/* On a phone three columns would make four stamps, so the room takes
   the full width and the other three form a band beneath it.

   The first attempt put the two 16:9 photographs into 2:3 slots and
   cropped 62% off each, which is precisely the fault the note above
   warns about: the ratios were chosen for the layout instead of read
   off the pictures. Measured, not eyeballed, is the only reason it
   was caught.

   The band is therefore .667fr for the upright and .89fr for the
   stacked pair, the same two numbers as the desktop grid, so every
   photograph keeps its shape here too. */
@media (max-width:719px){
  .hero-plates .hp-grid{
    grid-template-columns:.905fr 1fr;
    grid-template-rows:auto auto auto;
    aspect-ratio:auto;
    gap:5px;
  }
  .hero-plates .hp-room{grid-column:1 / -1;grid-row:1;aspect-ratio:3/2}
  /* The upright fills its two-row span instead of carrying its own
     aspect-ratio. Two 3:2 frames stacked are taller than one 2:3
     frame is by itself, so with a fixed ratio the column ended 51px
     short and left a hole under it.

     The column widths are solved so the two sides finish level:

       tallW * 3/2  =  2 * stackW / (3/2)  +  gap

     which gives .905fr against 1fr. The upright then stretches into
     a box it already almost exactly fits, so what object-fit trims
     is a fraction of a percent rather than a design decision. */
  .hero-plates .hp-tall{grid-column:1;grid-row:2 / span 2;aspect-ratio:auto;height:100%}
  .hero-plates .hp-a{grid-column:2;grid-row:2;aspect-ratio:3/2}
  .hero-plates .hp-b{grid-column:2;grid-row:3;aspect-ratio:3/2}
}

/* THE GAP BETWEEN THE DRAWING AND THE ROOM ------------------------
   Opened, because it is doing work now. The plan stays where it is:
   it is anchored to the wrap's lower edge, so the space is added
   below it rather than around it, and the button alignment that the
   plan was tuned to is untouched. */
.hero .hero-plates{margin-top:clamp(46px,5.2vw,84px)}

.hero .as-built > .wrap{position:relative;height:100%}
.hero .as-built{
  position:relative;
  height:clamp(46px,5.2vw,84px);
  margin-top:calc(clamp(46px,5.2vw,84px) * -1);
  pointer-events:none;
  z-index:1;
}
.hero .as-built .ab-rule{
  /* Inside the same .wrap as the plan, and inset by the same --gut
     the plan is inset by. Measuring from .hero put it 49px out
     because that box is the whole window; measuring from the wrap
     but ignoring --gut put it 44px out, which is --gut. The rule now
     lands on the plan's right edge, which is the accented room's
     right edge, at every width. */
  position:absolute;
  right:var(--gut);
  top:6px;bottom:6px;
  width:1px;
  background:linear-gradient(to bottom,
    rgba(42,74,168,0) 0%,
    rgba(42,74,168,.42) 22%,
    rgba(42,74,168,.42) 78%,
    rgba(42,74,168,0) 100%);
}
.hero .as-built .ab-label{
  position:absolute;
  right:calc(var(--gut) + 14px);
  top:50%;
  transform:translateY(-50%);
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-size:13px;
  letter-spacing:.01em;
  color:var(--muted);
  white-space:nowrap;
}
:root[data-theme="dark"] .hero .as-built .ab-rule{
  background:linear-gradient(to bottom,
    rgba(147,169,226,0) 0%, rgba(147,169,226,.5) 22%,
    rgba(147,169,226,.5) 78%, rgba(147,169,226,0) 100%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero .as-built .ab-rule{
    background:linear-gradient(to bottom,
      rgba(147,169,226,0) 0%, rgba(147,169,226,.5) 22%,
      rgba(147,169,226,.5) 78%, rgba(147,169,226,0) 100%);
  }
}
/* On a phone the plan is full width and the rule would land on the
   screen edge, so it moves to the middle and the label sits above it. */
@media (max-width:719px){
  .hero .as-built .ab-rule{right:auto;left:50%}
  .hero .as-built .ab-label{
    right:auto;left:50%;
    transform:translate(-50%,-50%);
    background:var(--paper);
    padding:0 10px;
    font-size:12.5px;
  }
}

/* The plate caption was sitting straight under the photographs with
   no room to be read, and its first line carried a stray indent. */
.hero-plates figcaption{
  margin-top:clamp(14px,1.5vw,22px);
  text-indent:0;
}

/* THE PLATE CAPTION RETURNS TO THE TEXT COLUMN --------------------
   The caption puts its text in a span.wrap so the words sit in the
   measure while the photographs stay full bleed. A .wrap is only a
   .wrap when it is a block: max-width, auto margins and padding all
   do nothing to an inline box, so the sentence ran the full width of
   the window and its last word hung off the left edge.

   The rule that fixes this already existed for .hero-plate. The new
   grid is .hero-plates, one letter apart, so it never matched. Two
   selectors that differ by a plural is a trap; they are matched here
   rather than renamed, because the old plate is still used further
   down the page. */
.hero-plates figcaption .wrap{
  display:block;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gut);
}
.hero-plates figcaption{
  padding:0;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}
.hero-plates figcaption b{color:var(--ink);font-weight:600}
@media (max-width:719px){
  .hero-plates figcaption{font-size:12.5px;line-height:1.5}
}

/* THE TRIAL TERMS -------------------------------------------------
   A trial is a deal, and deals are read as terms, so these are set
   as terms: a definition list, ruled, with the label in the serif
   italic the rest of the page uses for labels and the answer in the
   body face. Three rows, each one a question a buyer actually asks
   out loud.

   No cards. A bordered box around each row would turn a contract
   into a feature grid, which is the costume this whole pass has been
   taking off the site.

   The price is set at the size of a price. It was body text under an
   italic label, quieter than the caption on the photograph beside
   it, which is an odd thing to do to the only number on the page a
   CFO is looking for. */
.terms{margin:clamp(22px,2.6vw,34px) 0 0;display:grid;gap:0}
.terms .term{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:5px;
  padding:clamp(15px,1.7vw,20px) 0;
  border-top:1px solid var(--hair);
}
.terms .term:last-child{border-bottom:1px solid var(--hair)}
.terms dt{
  font-family:var(--serif);
  font-variation-settings:"opsz" 20;
  font-style:italic;
  font-size:14.5px;
  color:var(--muted-dark);
  letter-spacing:.004em;
}
.terms dd{
  margin:0;
  font-size:clamp(15px,1.15vw,16.5px);
  line-height:1.6;
  color:var(--muted);
  max-width:52ch;
}
.terms dd b{color:var(--ink);font-weight:600}
.term-fig{
  font-family:var(--serif);
  font-variation-settings:"opsz" 14;
  font-size:1.42em;
  font-weight:640;
  letter-spacing:-.012em;
  color:var(--ink);
  margin-right:.12em;
}
@media (min-width:900px){
  /* Label and answer side by side once there is room, which is how a
     term sheet is read: run your eye down the left, stop, read right. */
  .terms .term{grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:6px clamp(16px,1.8vw,28px)}
  .terms dt{padding-top:.18em}
}

/* 6 August 2026: something upstream in this file still computes the
   hero H1's max-width as ~1283px at desktop widths despite two edited
   blocks above, and a longer headline now runs under the floor plan
   SVG as a result. Rather than keep hunting a cascade this file has
   already shown a habit of duplicating, this wins unconditionally. */
.hero-open h1{max-width:16.5ch!important}

/* 6 Aug, second pass: manual two-clause break gives exactly two lines
   regardless of width, so the max-width fight is over; kept wide as a
   cap only. The shorter two-line heading left .hero-open shorter than
   the bottom-anchored floor plan needs, so it rode up into the text;
   min-height guarantees the room. GARDEN's tracking tightened: six
   letters at full ink was reading as heavier than Zen despite the
   smaller cap height. */
.hero-open h1{max-width:46ch!important}
.hero-open>.wrap{min-height:600px!important}
.brand b .g{letter-spacing:-.035em!important;margin-right:0!important}

/* Z alone carries Newsreader's swash flourish; "en" at the same weight
   reads flat beside it, same complaint as the header mark generally.
   Splitting only Z from en (not touching GARDEN) lets en's weight rise
   a touch to close the gap without also thickening Z's decoration. */
.brand b .z i{font-style:normal;font-weight:780;font-size:.72em;vertical-align:-.09em}
.brand b .z .zc{display:inline;font-size:1em;color:inherit;font-weight:inherit;vertical-align:-.045em}

/* 6 Aug, third pass: an older stacked-mark rule still gives .z a large
   letter-spacing cancelled only by margin-right on .z itself, which
   only removes the trailing gap after the LAST character. Splitting Z
   into its own span exposed that gap at the Z/en boundary instead,
   visible in at least the mobile menu context. Killed outright rather
   than chased through another duplicate block. */
.brand b .z{letter-spacing:0!important}
.brand b .z .zc{margin-right:0!important}
.brand b .z .zc,.brand b .z i{margin:0!important;padding:0!important;letter-spacing:0!important;word-spacing:0!important;display:inline!important}

/* 6 Aug, final: back to one size for both words, ZEN and GARDEN both
   set exactly like .g was (uppercase, same size/weight/tracking),
   colour is the only difference. Ends the whole Z-taller-than-the-
   rest experiment and the gap bug that came with splitting it. */
.brand b .z{
  font-size:.70em!important;font-weight:680!important;
  letter-spacing:.045em!important;text-transform:uppercase!important;
  color:var(--blue)!important;vertical-align:-.10em!important;margin:0!important;
}