/* generated by scripts/fetch-fonts.py — do not edit */
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-next-normal.04327e57.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-normal.4f27206c.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/newsreader-400-italic.a7be0dca.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/newsreader-normal.e599ceb4.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================
   keelsonsystems.org -- Direction E ("Thread"), the site's one design system.
   Tokens per docs/design_guidelines.md §5 / §8; the mark and palette come
   from the Keelson Systems Logo Brand Kit. Section breaks are alternating
   grounds with real contrast, no labelled strips. One jump device, high.
   No side or rail navigation. No JavaScript. No content at opacity:0.
   Mobile is designed, not merely stacked: every block steps its padding,
   type and rhythm down below 720px and is judged in screens of scroll
   (keelson-design never-again #5).
   ============================================================ */

:root{
  /* the six kit colours, plus amber as the 10% accent. Every other tone
     is an opacity derivative of navy or white — never an invented hex. */
  --navy:#051731; --steel:#1E3751; --slate:#4F677B; --mid:#758696; --light:#959FAC;
  --white:#FFFFFF; --amber:#E0A33E; --amber-hi:#F0B754;
  --amber-ink:#8A5D06;                /* amber is 2.0:1 on white: text-role amber only */
  --tint:#EDF1F5;                     /* a real step off white, not a whisper */
  --hair:rgba(5,23,49,.16);
  --hair-d:rgba(255,255,255,.18);
  --ink-2:rgba(255,255,255,.86);
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --body:'Atkinson Hyperlegible Next',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.2,0,.2,1);

  /* design_guidelines.md §8 — 4px base. Nothing off this scale. */
  --space-1:4px;  --space-2:8px;   --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px;  --space-8:64px; --space-9:96px; --space-10:128px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--space-9)}
body{margin:0;background:var(--white);color:var(--navy);font-family:var(--body);
  font-size:1.05rem;line-height:1.62;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--space-7)}
a{color:var(--steel);text-underline-offset:3px;text-decoration-thickness:1px}
/* Skip link. Off-canvas until focused, then parked inside the masthead. */
.skip{position:absolute;left:-999px;top:var(--space-2);background:var(--amber);color:var(--navy);
  padding:var(--space-2) var(--space-4);font-weight:600;z-index:50;border-radius:2px;
  min-height:44px;display:flex;align-items:center;text-decoration:none}
.skip:focus{left:var(--space-4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:hover{color:var(--amber-ink)}
:focus-visible{outline:2px solid var(--amber-ink);outline-offset:3px}
.on-navy :focus-visible,.tier--lead :focus-visible{outline-color:var(--amber)}

h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.05rem,1.25rem+2.4vw,3.25rem);line-height:1.12}
h2{font-size:clamp(1.75rem,1.15rem+1.9vw,2.6rem);line-height:1.15}
h3{font-size:1.2rem;line-height:1.3}
p{margin:0}
.mono{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--slate);margin:0}
.nowrap{white-space:nowrap}

/* ---------- two button languages, kept visually separate ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:0 var(--space-5);
  min-height:52px;border-radius:2px;
  font-family:var(--body);font-weight:600;font-size:1rem;text-decoration:none;
  border:1px solid transparent;
  transition:transform .18s var(--ease),background-color .18s var(--ease),
             border-color .18s var(--ease),color .18s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn .label{display:inline}
/* conversion */
.btn-amber{background:var(--amber);color:var(--navy);border-color:var(--amber)}
.btn-amber:hover{background:var(--amber-hi);color:var(--navy)}
.btn-navy{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn-navy:hover{background:var(--steel);color:var(--white)}
.btn-line{background:transparent;color:var(--white);border-color:var(--light)}
.btn-line:hover{border-color:var(--white);color:var(--white)}
.btn-inverse{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn-inverse:hover{background:var(--tint);color:var(--navy)}
/* in-page jump — mono, outline, amber arrow. Deliberately not a conversion button. */
.btn-jump{background:transparent;color:var(--navy);border-color:var(--mid);
  font-family:var(--mono);font-weight:400;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.1em;min-height:46px;padding:0 var(--space-4)}
.btn-jump .arw{color:var(--amber-ink);font-size:.95rem;line-height:1;
  transition:transform .18s var(--ease)}
.btn-jump:hover{border-color:var(--navy);color:var(--navy);background:var(--tint)}
.btn-jump:hover .arw{transform:translateY(2px)}
.cta-row{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)}

/* ---------- masthead ----------
   One bar on every page: the lockup, the site nav (plus the homepage's own
   section anchors on the homepage), and the booking CTA. Above 1100px the
   nav is inline; below it the same links live in a native <details> menu --
   no JavaScript, so the disclosure is the browser's own. The menu panel is
   absolutely positioned under the bar so opening it overlays the page
   instead of shifting it. */
.masthead{position:sticky;top:0;z-index:20;background:var(--white);
  border-bottom:1px solid var(--hair)}
.masthead-in{display:flex;align-items:center;gap:var(--space-5);min-height:76px}
.lockup-h{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;flex:0 0 auto;
  margin-right:auto}
.lockup-h .sym{width:56px}
.lockup-h .word{width:152px}
.lockup-h .sep{width:1px;align-self:stretch;background:var(--hair);margin-block:var(--space-1)}
.nav{display:flex;align-items:center;gap:var(--space-5)}
.nav a,.menu-nav a{font-family:var(--mono);font-size:.73rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--steel);text-decoration:none;padding-block:var(--space-2);white-space:nowrap}
.nav a:hover,.menu-nav a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:6px}
.nav a[aria-current="page"],.menu-nav a[aria-current="page"]{color:var(--navy);
  text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;
  text-underline-offset:6px}
.masthead .cta{font-family:var(--mono);font-size:.73rem;text-transform:uppercase;letter-spacing:.13em;
  text-decoration:none;white-space:nowrap;background:var(--amber);color:var(--navy);
  padding:var(--space-3) var(--space-4);font-weight:500;border-radius:2px;flex:0 0 auto}
.masthead .cta:hover{background:var(--amber-hi);color:var(--navy)}
.menu{display:none}
.menu-toggle{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-2);
  min-height:44px;padding-inline:var(--space-2);font-family:var(--mono);font-size:.73rem;
  text-transform:uppercase;letter-spacing:.13em;color:var(--steel);user-select:none}
.menu-toggle::-webkit-details-marker{display:none}
/* the three-bar glyph, drawn rather than shipped as an icon */
.menu-toggle::before{content:"";width:20px;height:2px;background:var(--navy);flex:0 0 auto;
  box-shadow:0 -6px 0 var(--navy),0 6px 0 var(--navy)}
.menu[open] .menu-toggle{color:var(--navy)}
.menu-nav{position:absolute;left:0;right:0;top:100%;background:var(--white);
  border-bottom:1px solid var(--hair);box-shadow:0 12px 24px -12px var(--hair);
  display:flex;flex-direction:column;padding:var(--space-3) var(--space-5) var(--space-4)}
.menu-nav a{padding-block:var(--space-3);border-top:1px solid var(--hair)}
.menu-nav a:first-child{border-top:0}

/* ---------- hero: light ground, so the full-colour lockup is kit-legal ---------- */
.hero{background:var(--white);color:var(--navy);text-align:center;
  padding:var(--space-7) 0 var(--space-7)}
.hero .lockup-full{width:min(400px,88%);margin:0 auto var(--space-5);
  animation:settle .8s var(--ease) both}
@keyframes settle{from{transform:translateY(-10px)}to{transform:none}}
.eyebrow{font-family:var(--mono);font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--amber-ink);margin:0 0 var(--space-5)}
.hero h1{max-width:24ch;margin:0 auto}
.hero .lead{font-size:1.14rem;color:var(--steel);max-width:64ch;
  margin:var(--space-5) auto 0}
.hero .cta-row{justify-content:center}
/* the metaphor, explicit above the fold — design_guidelines.md §1 */
.namesake{font-family:var(--display);font-style:italic;font-size:1rem;line-height:1.6;
  color:var(--slate);max-width:66ch;margin:var(--space-6) auto 0;
  padding-top:var(--space-5);border-top:1px solid var(--hair)}
.namesake strong{font-style:normal;font-weight:500;color:var(--navy)}
.hero-beams{margin-top:var(--space-5)}
.beams{width:270px;height:auto;margin:0 auto;display:block}
.beams .b1{fill:var(--navy)}.beams .b2{fill:var(--steel)}.beams .b3{fill:var(--slate)}
.beams .r1{fill:var(--slate)}.beams .r2{fill:var(--mid)}.beams .r3{fill:var(--light)}
.beams .sp{fill:var(--amber)}

/* ---------- the jump device: once, high, self-selection ---------- */
.jump-band{background:var(--white);border-top:1px solid var(--hair)}
.jump-in{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);
  padding-block:var(--space-5)}
.jump-lede{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin:0 var(--space-2) 0 0}
.jump-row{display:flex;flex-wrap:wrap;gap:var(--space-3);flex:1 1 auto}

/* ---------- section shell ----------
   A band pays HALF the rhythm on each edge, so a band boundary is one
   --space-9 gap, not two stacked. Sections sharing a band keep the full gap. */
.band{padding-block:var(--space-7)}
.sec{padding:0}
.sec + .sec{margin-top:var(--space-8)}
.band-tint{background:var(--tint)}
.band-navy{background:var(--navy);color:var(--white)}
/* the heading and its lead carry their own measures — a shared container
   clamps the lead to the heading's width and wraps it into a narrow column */
.sec-head h2{max-width:34ch}
.sec-head.wide h2{max-width:46ch}
.sec-head p{margin-top:var(--space-4);color:var(--steel);max-width:68ch;font-size:1.08rem}
.band-navy .sec-head p{color:var(--ink-2)}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);margin-bottom:var(--space-4)}
.band-navy .kicker{color:var(--light)}

/* ---------- the condition: six tiles, then the figure ---------- */
.stack{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin-top:var(--space-6)}
.item{background:var(--tint);padding:var(--space-5)}
.item-no{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--slate);
  margin-bottom:var(--space-3)}
.item h3{margin-bottom:var(--space-2)}
.item p{color:var(--steel);font-size:.95rem}
/* ---------- the figure: the owner standing in for a missing keelson ----------
   Inlined rather than referenced as an image file, so it inherits the page's
   self-hosted fonts and colour tokens; neither reaches it any other way. The
   figure's own stylesheet lives here, scoped to #owner-keelson: an inline
   SVG's <style> is global, and unscoped its .note would have overridden the
   Core band's tier note (keelson-design never-again #16). */
.keelson-fig{margin-top:var(--space-6);overflow-x:auto}
.keelson-fig svg{display:block;width:100%;max-width:660px;height:auto;margin-inline:auto}
.fig-payoff{font-family:var(--display);font-size:1.3rem;line-height:1.5;color:var(--steel);
  max-width:62ch;margin:var(--space-5) auto 0;text-align:center}
#owner-keelson{--ks-navy:var(--navy);--ks-steel:var(--steel);--ks-slate:var(--slate);
  --ks-mid:var(--mid);--ks-light:var(--light);--ks-white:var(--white);--ks-amber:var(--amber);
  --ks-amber-ink:var(--amber-ink);--ks-tint:var(--tint)}
#owner-keelson .ground{fill:var(--ks-tint)}
#owner-keelson .hull{fill:none;stroke:var(--ks-light);stroke-width:2}
#owner-keelson .centerline{fill:none;opacity:.7;stroke:var(--ks-mid);stroke-dasharray:5 8;stroke-width:1}
#owner-keelson .port-beam{fill:var(--ks-navy);stroke:var(--ks-light);stroke-width:1.5}
#owner-keelson .starboard-beam{fill:var(--ks-steel);stroke:var(--ks-light);stroke-width:1.5}
#owner-keelson .beam-edge{fill:var(--ks-slate)}
#owner-keelson .system-index,#owner-keelson .system-name{fill:var(--ks-white)}
#owner-keelson .system-index,#owner-keelson .note,#owner-keelson .owner-label,#owner-keelson .handoff-label{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;letter-spacing:.1em}
#owner-keelson .system-index{font-size:11px}
#owner-keelson .system-name{font-family:"Atkinson Hyperlegible Next",Arial,sans-serif;font-size:17px;font-weight:500}
#owner-keelson .missing-member{fill:none;stroke:var(--ks-amber);stroke-dasharray:8 7;stroke-width:2}
#owner-keelson .note{fill:var(--ks-amber-ink);font-size:11px}
#owner-keelson .note-line,#owner-keelson .handoff{fill:none;stroke:var(--ks-amber);stroke-linecap:square;
  stroke-linejoin:miter;stroke-width:2}
#owner-keelson .handoff{stroke-width:3}
#owner-keelson .handoff-node{fill:var(--ks-amber);stroke:var(--ks-navy);stroke-width:2}
#owner-keelson .owner-head{fill:var(--ks-navy)}
#owner-keelson .owner-body{fill:var(--ks-steel);stroke:var(--ks-navy);stroke-width:2}
#owner-keelson .owner-label{fill:var(--ks-navy);font-size:13px}
#owner-keelson .handoff-label{fill:var(--ks-amber-ink);font-size:10px}
#owner-keelson .label-plate{fill:var(--ks-tint)}
#owner-keelson .keel{fill:var(--ks-navy)}
#owner-keelson .keel-top{fill:var(--ks-steel)}
#owner-keelson .bottom-line{fill:var(--ks-navy);font-family:"Newsreader",Georgia,serif;font-size:23px;font-weight:600}
.condition-cta{margin-top:var(--space-6)}

/* ---------- the thread: estimate to ledger, in outcomes ---------- */
.thread{list-style:none;margin:var(--space-6) 0 0;padding:0;border-top:2px solid var(--navy)}
.thread li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--space-6);
  padding:var(--space-4) 0;border-bottom:1px solid var(--hair);align-items:baseline}
.thread .step{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);margin:0}
.thread .out{font-family:var(--display);font-size:1.35rem;line-height:1.4;margin:0}

/* ---------- the work carousel: native scroll-snap, no JavaScript ----------
   Every slide image is landscape, close to 16:10, so it uses the frame's
   width: the two phone builds are cropped to the TOP of the device (bezel
   kept, so it still reads as a phone) rather than shown as a whole phone
   floating in a landscape canvas, which rendered their UI at ~130px wide. */
.shots{display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;
  margin-top:var(--space-6);padding-bottom:var(--space-2);scroll-padding-left:var(--space-1)}
.shot{flex:0 0 min(470px,82%);min-width:0;scroll-snap-align:start;position:relative;margin:0;
  border:1px solid var(--hair);background:var(--white);display:flex;flex-direction:column}
.shot-img{background:var(--navy);padding:var(--space-4);aspect-ratio:16/10;
  display:grid;place-items:center}
.shot-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border:1px solid var(--hair-d)}
.shot-body{padding:var(--space-5);display:flex;flex-direction:column;flex:1 1 auto}
.shot-body h3{margin-bottom:var(--space-2)}
.shot-body p{color:var(--steel);font-size:.95rem}
/* two caption languages: shipped client work, and Core design prototypes.
   Nothing that is not running in a real business may wear the first one. */
.shot-runs{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber-ink);margin-top:auto;padding-top:var(--space-3);
  border-top:1px solid var(--hair)}
.shot-proto{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);margin-top:auto;padding-top:var(--space-3);
  border-top:1px dashed var(--mid)}
.swipe-hint{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);margin-top:var(--space-3)}
.band-navy .swipe-hint{color:var(--light)}

/* ---------- THE CORE — the ask on navy, the offer on white ----------
   One section, two bands. The navy band carries the heading and the chassis
   figure and is the page's only mid-page navy; the tier cards sit on white
   below it, so the ask is one deliberate dark moment rather than the start
   of a navy run that reached the footer (keelson-design never-again #6). */
.arch{margin-top:var(--space-7);border:1px solid var(--hair-d);padding:var(--space-5)}
/* The shared-chassis figure. Two arrangements of the same diagram: the mobile
   one is laid out for a phone column rather than being the desktop one shrunk,
   because a 760-wide viewBox squeezed into ~342px renders its labels unreadably
   small (keelson-design never-again #16). display:none keeps the inactive one
   out of the accessibility tree, so it is never announced twice. */
.chassis{margin:0}
.chassis svg{display:block;width:100%;height:auto}
.chassis .chassis-mobile{display:none}
@media (max-width:720px){
  .chassis .chassis-desktop{display:none}
  .chassis .chassis-mobile{display:block}
}
.arch-rule{margin-top:var(--space-4);padding-top:var(--space-4);border-top:3px solid var(--amber);
  display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;align-items:baseline}
.arch-rule .lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);margin:0}
.arch-rule .say{color:var(--ink-2);font-size:.95rem;margin:0;max-width:62ch}

/* the tier cards: Core leads on navy with the amber keyline, Custom sits on
   a tint card beside it. Both on the white band. */
.tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);align-items:start}
.tier{background:var(--tint);border:1px solid var(--hair);padding:var(--space-5);
  position:relative;display:flex;flex-direction:column;color:var(--navy)}
.tier--lead{background:var(--navy);color:var(--white);border:2px solid var(--amber);
  box-shadow:0 0 0 1px var(--amber)}
.tier-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);
  padding-bottom:var(--space-3);border-bottom:1px solid var(--hair);margin-bottom:var(--space-4)}
.tier--lead .tier-top{border-bottom-color:var(--hair-d)}
.tier-top h3{color:inherit}
.status{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);white-space:nowrap}
.status.live{color:var(--amber-ink)}
.tier--lead .status{color:var(--light)}
.tier--lead .status.live{color:var(--amber)}
.tier-for{color:var(--steel);font-size:.94rem}
.tier--lead .tier-for{color:var(--ink-2)}
.tier ul{list-style:none;padding:0;margin:var(--space-4) 0 var(--space-5)}
.tier li{position:relative;padding-left:var(--space-5);margin-bottom:var(--space-2);
  font-size:.92rem;color:var(--steel)}
.tier--lead li{color:var(--ink-2)}
.tier li::before{content:"";position:absolute;left:0;top:.66em;width:10px;height:2px;
  background:var(--mid)}
.tier--lead li::before{background:var(--light)}
.tier li small{display:block;color:var(--slate);font-size:.8rem}
.tier--lead li small{color:var(--light)}
.tier .btn{margin-top:auto;justify-content:center;text-align:center;height:auto;
  padding-block:var(--space-3);font-size:.92rem;line-height:1.3}
/* the phone-only "Show all nine" disclosure on the Core card: hidden on
   desktop, where the full list shows; the 720px block swaps them */
.tier .more{display:none}
.tier .more summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-3);min-height:44px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber-ink);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
/* amber as text is only safe on the navy lead card (8.1:1); on a tint card
   the summary keeps text-role amber-ink */
.tier--lead .more summary{color:var(--amber);border-color:var(--hair-d)}
.tier .more summary::-webkit-details-marker{display:none}
.tier .more summary::after{content:"+";font-size:1.1rem;line-height:1;
  transition:transform .18s var(--ease)}
.tier .more[open] summary::after{transform:rotate(45deg)}
.tier .more ul{margin:var(--space-3) 0 0}
.note{color:var(--steel);font-size:.9rem;max-width:74ch;margin-top:var(--space-5)}

/* ---------- the doors ---------- */
.door{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--space-8);align-items:start}
.door p{color:var(--ink-2)}
.contact{text-align:center;border-top:1px solid var(--hair-d);padding-top:var(--space-8)}
.contact h2{max-width:22ch;margin-inline:auto}
.contact .body{max-width:58ch;margin:var(--space-4) auto 0;color:var(--ink-2)}
.mailto{display:inline-block;font-family:var(--display);
  font-size:clamp(1.5rem,1rem+1.8vw,2.3rem);color:var(--white);text-decoration:none;
  border-bottom:2px solid var(--amber);margin-top:var(--space-5)}
.mailto:hover{color:var(--amber)}
.contact .cta-row{justify-content:center}
.house{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--light);margin-top:var(--space-5)}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:var(--light);padding:var(--space-7) 0 var(--space-5);
  border-top:1px solid var(--hair-d)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--space-7);align-items:start}
/* Outbound client links in the footer. Colour alone does not distinguish a link,
   so the underline carries it. The footer ground is navy, where --amber is high
   contrast -- the inverse of the light band, where amber is 1.95:1 and the
   underline had to be --amber-ink instead. Same rule, opposite ground. */
.foot-grid a[target="_blank"]{text-decoration-color:var(--amber);text-decoration-thickness:2px}
.foot .lockup-full{width:280px;margin-bottom:var(--space-5)}
.foot .legal{font-size:.87rem;line-height:1.6;max-width:44ch;color:var(--ink-2)}
.foot .legal strong{color:var(--white)}
.foot-label{color:var(--light);margin-bottom:var(--space-4)}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:0}
/* a footer link is a tap target on every page: padded to a 35px row, above
   the WCAG 2.5.8 24px floor, without the old system's 44px rows that cost a
   phone screen of footer (review round 1, S2) */
.foot a{display:inline-block;color:var(--ink-2);text-decoration:none;font-size:.9rem;
  padding-block:var(--space-2)}
.foot a:hover{color:var(--amber)}
.foot-bottom{display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;
  margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--hair-d);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mid)}

/* ---------- the shared-chassis figures ----------
   Hoisted out of the two inlined <svg> elements. An inline <style> is stripped
   by the shipped CSP (style-src 'self', no 'unsafe-inline'), which paints
   perfectly over file:// and silently unstyles the figure the moment express
   serves it -- keelson-design never-again #15. Every selector is scoped to the
   figure's own id, so hoisting changes nothing about specificity and cannot
   leak (never-again #16); the figure's --ks-* variables map onto the page
   tokens rather than restating the hex. Values track the source artwork at
   variants/kit2/assets/core-shared-chassis{,-mobile}.svg -- edit there first. */
#core-shared-chassis,#core-shared-chassis-mobile{--ks-navy:var(--navy);--ks-steel:var(--steel);
  --ks-slate:var(--slate);--ks-mid:var(--mid);--ks-light:var(--light);--ks-white:var(--white);
  --ks-amber:var(--amber);--ks-amber-ink:var(--amber-ink);--ks-tint:var(--tint)}
#core-shared-chassis .ground{fill:var(--ks-navy)}
#core-shared-chassis .trace{fill:none;stroke:var(--ks-amber);stroke-linecap:square;stroke-linejoin:miter;stroke-width:3}
#core-shared-chassis .trace-muted{fill:none;stroke:var(--ks-slate);stroke-dasharray:4 8;stroke-width:1}
#core-shared-chassis .node{fill:var(--ks-amber)}
#core-shared-chassis .edge-light{fill:var(--ks-white);stroke:var(--ks-light);stroke-width:1}
#core-shared-chassis .edge-steel{fill:var(--ks-slate);stroke:var(--ks-mid);stroke-width:1}
#core-shared-chassis .edge-open{fill:var(--ks-navy);stroke:var(--ks-amber);stroke-dasharray:8 6;stroke-width:2}
#core-shared-chassis .edge-label{font-family:"Atkinson Hyperlegible Next",Arial,sans-serif;font-size:18px;font-weight:600;text-anchor:middle}
#core-shared-chassis .edge-label-dark{fill:var(--ks-navy)}
#core-shared-chassis .edge-label-light{fill:var(--ks-white)}
#core-shared-chassis .body{fill:var(--ks-steel);stroke:var(--ks-amber);stroke-width:3}
#core-shared-chassis .facet-port{fill:var(--ks-slate)}
#core-shared-chassis .facet-starboard{fill:var(--ks-mid)}
#core-shared-chassis .core-field{fill:var(--ks-navy)}
#core-shared-chassis .keelson{fill:var(--ks-amber)}
#core-shared-chassis .bolt{fill:var(--ks-navy);stroke:var(--ks-amber);stroke-width:2}
#core-shared-chassis .core-name{fill:var(--ks-white);font-family:"Newsreader",Georgia,serif;font-size:48px;font-weight:500;letter-spacing:-1px;text-anchor:middle}
#core-shared-chassis .core-kicker,#core-shared-chassis .module-label,#core-shared-chassis .foot-label{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;text-anchor:middle}
#core-shared-chassis .core-kicker{fill:var(--ks-light);font-size:12px;letter-spacing:2px}
#core-shared-chassis .module-label{fill:var(--ks-white);font-size:14px}
#core-shared-chassis .module-rule{stroke:var(--ks-slate);stroke-width:1}
#core-shared-chassis .foot-label{fill:var(--ks-light);font-size:12px;letter-spacing:1.5px}

#core-shared-chassis-mobile .ground{fill:var(--ks-navy)}
#core-shared-chassis-mobile .guide{fill:none;stroke:var(--ks-slate);stroke-dasharray:3 7;stroke-width:1}
#core-shared-chassis-mobile .trace{fill:none;stroke:var(--ks-amber);stroke-linecap:square;stroke-width:2}
#core-shared-chassis-mobile .node{fill:var(--ks-amber)}
#core-shared-chassis-mobile .edge-light{fill:var(--ks-white);stroke:var(--ks-light);stroke-width:1}
#core-shared-chassis-mobile .edge-steel{fill:var(--ks-slate);stroke:var(--ks-mid);stroke-width:1}
#core-shared-chassis-mobile .edge-open{fill:var(--ks-navy);stroke:var(--ks-amber);stroke-dasharray:7 5;stroke-width:2}
#core-shared-chassis-mobile .edge-label{font-family:"Atkinson Hyperlegible Next",Arial,sans-serif;font-size:12px;font-weight:600;text-anchor:middle}
#core-shared-chassis-mobile .edge-label-dark{fill:var(--ks-navy)}
#core-shared-chassis-mobile .edge-label-light{fill:var(--ks-white)}
#core-shared-chassis-mobile .body{fill:var(--ks-steel);stroke:var(--ks-amber);stroke-width:2}
#core-shared-chassis-mobile .facet-port{fill:var(--ks-slate)}
#core-shared-chassis-mobile .facet-starboard{fill:var(--ks-mid)}
#core-shared-chassis-mobile .core-field{fill:var(--ks-navy)}
#core-shared-chassis-mobile .keelson{fill:var(--ks-amber)}
#core-shared-chassis-mobile .bolt{fill:var(--ks-navy);stroke:var(--ks-amber);stroke-width:1.5}
#core-shared-chassis-mobile .core-name{fill:var(--ks-white);font-family:"Newsreader",Georgia,serif;font-size:34px;font-weight:500;letter-spacing:-1px;text-anchor:middle}
#core-shared-chassis-mobile .core-kicker,#core-shared-chassis-mobile .module-label,#core-shared-chassis-mobile .foot-label{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;text-anchor:middle}
#core-shared-chassis-mobile .core-kicker{fill:var(--ks-light);font-size:9px;letter-spacing:1px}
#core-shared-chassis-mobile .module-label{fill:var(--ks-white);font-size:11px}
#core-shared-chassis-mobile .module-rule{stroke:var(--ks-slate);stroke-width:1}
#core-shared-chassis-mobile .foot-label{fill:var(--ks-light);font-size:10px;letter-spacing:1.1px}

/* ============================================================
   Interior pages (about/services/contact/404/legal) -- 2026-09-05.
   The page-type patterns below extend Direction E to the seven pages that
   were still on the retired "Night Watch" system (src/site.css). Same
   identity: white ground, navy ink, amber as the 10% accent (text-role
   amber is --amber-ink; --amber only for fills/keylines/buttons/graphical
   markers on dark grounds, never for text on white), two or three real
   ground changes per page, no labelled strips, no per-section button rows.
   ============================================================ */

/* ---------- .page-head: the interior page opening ---------- */
.page-head{background:var(--white);padding-block:var(--space-8) var(--space-7);
  border-bottom:1px solid var(--hair)}
.page-head .mono{color:var(--amber-ink);margin-bottom:var(--space-4)}
.page-head h1{max-width:22ch}
.page-head p:not(.mono){font-size:1.14rem;color:var(--steel);max-width:60ch;margin-top:var(--space-4)}

/* ---------- .split: two-column white-ground layout (about's name section).
   Same grid mechanics as .door, but .door's --ink-2 paragraph colour is for
   the navy band -- reusing it here on white would print near-invisible text,
   so this is its own class rather than a second use of .door. ---------- */
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--space-8);align-items:start}
/* running prose inside the column: the first paragraph after the heading is
   the lead, the rest keep paragraph rhythm -- p{margin:0} is the page default */
.split .mono{margin-bottom:var(--space-4)}
.split h2 + p{font-size:1.14rem;color:var(--steel);margin-top:var(--space-4)}
.split p + p{margin-top:var(--space-4)}

/* ---------- the midship section drawing (about) -- kept, restyled ---------- */
.hero-art{margin:0}
.section-drawing{display:block;width:100%;height:auto}
.section-drawing .hull{fill:none;stroke:var(--navy);stroke-width:2}
.section-drawing .frame{fill:none;stroke:var(--slate);stroke-width:1}
.section-drawing .keel{fill:var(--navy)}
.section-drawing .keelson{fill:var(--amber);stroke:var(--amber)}
.section-drawing .bolt{fill:var(--navy)}
.section-drawing .dim{fill:none;stroke:var(--mid);stroke-width:1}
.section-drawing .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--slate)}
.section-drawing .lbl.hot{fill:var(--amber-ink)}
.section-drawing .wl{fill:none;stroke:var(--mid);stroke-width:1;stroke-dasharray:4 6}
.drawing-caption{margin-top:var(--space-3);font-family:var(--mono);font-size:.74rem;
  letter-spacing:.04em;color:var(--slate);line-height:1.5}

/* ---------- .ledger / .ledger-row: entries (replaces .log/.entry) ----------
   Same grammar as .thread: mono index in a 150px left column, a 2px navy top
   rule, hairline row dividers. */
.ledger{border-top:2px solid var(--navy);margin-top:var(--space-6)}
.ledger-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--space-6);
  padding-block:var(--space-6);border-bottom:1px solid var(--hair);align-items:start}
.ledger-idx{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);margin:0}
.ledger-row h3{margin-bottom:var(--space-2)}
.ledger-row p{color:var(--steel);font-size:.95rem}
.ledger-basis{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);margin-top:var(--space-3)}
.ledger-basis em{display:block;font-style:normal;text-transform:none;letter-spacing:0;
  color:var(--steel);font-family:var(--body);font-size:.88rem;margin-top:var(--space-1)}

/* ---------- .checklist: shared by the ledger's AEO entry, .orders and
   .contact-grid -- amber-ink dash marker on white/tint, amber on navy. ---------- */
.checklist{list-style:none;padding:0;margin:var(--space-3) 0 0;display:grid;gap:var(--space-2) var(--space-5)}
@media (min-width:640px){.checklist.two{grid-template-columns:1fr 1fr}}
.checklist li{position:relative;padding-left:var(--space-5);color:var(--steel)}
.checklist li::before{content:"";position:absolute;left:0;top:.66em;width:10px;height:2px;
  background:var(--amber-ink)}
.band-navy .checklist li{color:var(--ink-2)}
.band-navy .checklist li::before{background:var(--amber)}

/* ---------- .tiers.tiers--three: Basic / Core / Custom (services) ----------
   .tiers already collapses to one column at <=1060px (below); the 3-up rule
   only needs to state the desktop case. Never a horizontal swipe. */
.tiers--three{grid-template-columns:repeat(3,1fr)}

/* ---------- .papers / .paper: label/value/note cards (about, services) ---------- */
.papers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-6)}
.paper{background:var(--tint);border:1px solid var(--hair);padding:var(--space-5)}
/* a tint card on a tint band is the same colour byte for byte -- only its
   hairline survives (review round 1, S3). On the tint band, cards go white. */
.band-tint .tier:not(.tier--lead),.band-tint .paper{background:var(--white)}
.paper-label{display:block;color:var(--amber-ink);margin-bottom:var(--space-2)}
.paper-value{display:block;font-family:var(--display);font-size:1.25rem;line-height:1.3;color:var(--navy)}
.paper-note{display:block;margin-top:var(--space-2);font-size:.92rem;color:var(--steel);line-height:1.5}

/* ---------- .faq: native <details>, no JS ----------
   No flex on summary (unlike the retired system) -- the "+" is positioned
   absolutely, so the flex-whitespace guard never applies here; summary
   content stays pure text regardless. Marker rotates via transform only. */
.faq{border-top:1px solid var(--hair);margin-top:var(--space-6)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;position:relative;
  padding:var(--space-4) var(--space-6) var(--space-4) 0;
  font-family:var(--display);font-size:1.15rem;line-height:1.3;color:var(--navy);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;top:50%;right:0;
  transform:translateY(-50%) rotate(0deg);font-family:var(--mono);color:var(--amber-ink);
  font-size:1.2em;line-height:1;width:1em;text-align:center;transition:transform .18s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--amber-ink)}
.faq .answer{max-width:68ch;padding-bottom:var(--space-4);color:var(--steel)}
.faq .answer p{margin:0 0 var(--space-3)}
.faq .answer p:last-child{margin:0}
.faq details:target summary{background:var(--tint)}

/* ---------- .orders: plain prose block (billing) ---------- */
.orders{max-width:68ch;margin-top:var(--space-6)}
.orders p + p{margin-top:var(--space-4)}
.orders strong{color:var(--navy);font-weight:600}
.band-navy .orders p{color:var(--ink-2)}
.band-navy .orders strong{color:var(--white)}
.band-navy .orders .mono{color:var(--light)}
.band-navy .orders .mono a{color:var(--white);text-decoration-color:var(--amber);
  text-decoration-thickness:2px}
.band-navy .orders .mono a:hover{color:var(--amber)}

/* ---------- .contact-grid (/contact): two columns, page-level text --------
   Not the navy .contact close -- the left column is ordinary left-aligned
   text on white, spaced by a flat rhythm rather than a bespoke class per
   element. */
.contact-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--space-8);align-items:start}
.contact-grid > div > *{margin-top:var(--space-4)}
.contact-grid > div > *:first-child{margin-top:0}
.contact-grid h2{max-width:26ch}
.contact-grid h3{margin-top:var(--space-6)}
.contact-grid p:not(.mono){color:var(--steel);max-width:52ch}
.contact-grid .mailto{display:inline-block;font-family:var(--display);
  font-size:clamp(1.3rem,1rem+1vw,1.7rem);color:var(--navy);text-decoration:none;
  border-bottom:2px solid var(--amber)}
.contact-grid .mailto:hover{color:var(--amber-ink)}
.dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:var(--space-2) var(--space-5);
  align-items:baseline}
.dl dt{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--slate)}
.dl dd{margin:0 0 var(--space-4)}

/* ---------- .course (/contact): "what happens next", on the navy band ---------- */
.course{list-style:none;padding:0;margin:var(--space-6) 0 0;counter-reset:leg;
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6) var(--space-8)}
.course li{position:relative;padding-left:var(--space-7);counter-increment:leg}
.course li::before{content:counter(leg,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--mono);font-size:.85rem;letter-spacing:.06em;color:var(--amber)}
.course h3{color:var(--white);margin-bottom:var(--space-2)}
.course p{color:var(--ink-2);font-size:.98rem}

/* ---------- .prose (legal: terms/privacy/refunds) ---------- */
.prose{max-width:72ch;padding-block:var(--space-7)}
.prose h2{font-family:var(--display);font-weight:500;font-size:1.5rem;line-height:1.25;
  padding-top:var(--space-5);margin-top:var(--space-7);border-top:1px solid var(--hair)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:1.15rem;margin-top:var(--space-5);margin-bottom:var(--space-2)}
.prose p,.prose li{font-size:1rem;line-height:1.62;color:var(--navy)}
.prose p{margin-bottom:var(--space-4)}
.prose ul,.prose ol{padding-left:var(--space-5);margin:0 0 var(--space-4)}
.prose li{margin-bottom:var(--space-2)}
.prose .meta{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--slate);
  margin:0 0 var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--hair)}
.prose .toc{font-size:.85rem;margin:0 0 var(--space-6);padding:var(--space-4) var(--space-5);
  border:1px solid var(--hair);background:var(--tint);columns:2;column-gap:var(--space-6)}
.prose .toc ol{margin:0;padding-left:var(--space-5)}
.prose .toc li{margin-bottom:0;break-inside:avoid;font-family:var(--mono);font-size:.85rem;
  line-height:1.4;padding-left:var(--space-1)}
/* block, not inline-block: a wrapped inline-block's baseline is its LAST line,
   so the list marker landed on the second line of any two-line entry */
.prose .toc a{display:block;padding:var(--space-2) 0;color:var(--steel);text-decoration:none}
.prose .toc a:hover{color:var(--amber-ink);text-decoration:underline}
.prose .table-wrap{overflow-x:auto;margin:var(--space-4) 0 var(--space-5)}
.prose table{border-collapse:collapse;width:100%;font-size:.9rem}
.prose th,.prose td{text-align:left;padding:var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom:1px solid var(--hair);vertical-align:top}
.prose th{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.08em;
  color:var(--slate)}
.prose .draft-banner{border-left:2px solid var(--amber);background:var(--tint);color:var(--amber-ink);
  padding:var(--space-3) var(--space-4);font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;margin:0 0 var(--space-5)}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--tint);padding:.1em .3em}

/* ---------- .btn-outline: light-ground secondary button (404, tier cards) ---------- */
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--tint);color:var(--navy)}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .stack{grid-template-columns:repeat(2,1fr)}
  .door{grid-template-columns:1fr;gap:var(--space-6)}
  .thread li{grid-template-columns:120px minmax(0,1fr);gap:var(--space-5)}
  .tiers{grid-template-columns:1fr;gap:var(--space-3)}
  .tier .btn{margin-top:var(--space-4)}
  .split{grid-template-columns:1fr;gap:var(--space-6)}
  .papers{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:var(--space-6)}
}
/* Below 1100px the seven links, the lockup and the CTA no longer share one
   line (measured: ~1,000px of content on the homepage), so the nav folds
   into the <details> menu and the bar keeps only the lockup, the toggle and
   the CTA. The old 940px wrap-to-a-second-row block is gone with it. */
@media (max-width:1100px){
  .nav{display:none}
  .menu{display:block}
  .masthead-in{gap:var(--space-4)}
}
/* ---------- the phone pass ----------
   Everything below is a deliberate step-down, judged in screens of scroll at
   390x844 (keelson-design never-again #5): shorter hero, spec-sheet condition
   list, tighter rhythm, figure on the band's own ground, compact tier lists.
   Nothing here hides primary content -- no scroller, no disclosure. */
@media (max-width:720px){
  .wrap{padding-inline:var(--space-5)}
  body{font-size:1rem;line-height:1.55}
  html{scroll-padding-top:var(--space-8)}
  h2{font-size:1.6rem;line-height:1.18}
  h3{font-size:1.12rem}
  .masthead-in{min-height:62px;gap:var(--space-3)}
  .lockup-h{gap:var(--space-2)}
  .lockup-h .sym{width:40px}.lockup-h .word{width:110px}
  .masthead .cta{padding:var(--space-3);font-size:.66rem;letter-spacing:.08em}
  .menu-toggle{padding-inline:var(--space-2);font-size:0;gap:0;min-width:44px;justify-content:center}
  .menu-nav{padding-inline:var(--space-5)}

  .band{padding-block:var(--space-5)}
  .sec + .sec{margin-top:var(--space-6)}

  /* mobile hero is deliberately shorter, not merely stacked */
  .hero{padding:var(--space-5) 0 var(--space-6)}
  .hero .lockup-full{width:min(320px,100%);margin-bottom:var(--space-4)}
  .eyebrow{margin-bottom:var(--space-3);font-size:.66rem;letter-spacing:.2em}
  .hero h1{font-size:1.9rem;max-width:none}
  .hero .lead{font-size:1rem;margin-top:var(--space-3)}
  .namesake{font-size:.92rem;line-height:1.5;margin-top:var(--space-5);padding-top:var(--space-4)}
  .hero-beams{margin-top:var(--space-4)}
  .beams{width:210px}
  .btn{min-height:48px;padding:0 var(--space-4);font-size:.95rem}
  .cta-row{margin-top:var(--space-4)}
  .cta-row .btn{flex:1 1 100%;justify-content:center}

  /* jump nav goes two-up so the row stays one compact device, not four bars */
  .jump-in{padding-block:var(--space-3);gap:var(--space-2)}
  .jump-lede{flex:1 1 100%;margin:0 0 var(--space-1)}
  .jump-row{gap:var(--space-2)}
  .btn-jump{flex:1 1 calc(50% - var(--space-1));min-width:0;justify-content:center;
    text-align:center;padding:0 var(--space-3);gap:var(--space-1);
    font-size:.66rem;letter-spacing:.07em;line-height:1.3;min-height:52px}

  .sec-head h2,.sec-head.wide h2{max-width:none}
  .sec-head p{margin-top:var(--space-3);font-size:.98rem}
  .kicker{margin-bottom:var(--space-2)}

  /* the six read as a spec sheet on a phone: index and name share a baseline */
  .stack{grid-template-columns:1fr;margin-top:var(--space-4);border-inline:0}
  .item{padding:var(--space-3) 0;background:var(--tint);
    display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-3);
    align-items:baseline}
  .item-no{grid-column:1;margin-bottom:0}
  .item h3{grid-column:2;font-size:1.04rem}
  .item p:not(.item-no){grid-column:2;font-size:.88rem;line-height:1.45;
    margin-top:var(--space-1)}
  /* the figure fits the column rather than scrolling — half a diagram reads
     as broken. Its type steps up so the labels survive the smaller render;
     22px is the most the beam polygons can carry without the longest label
     running past the beam that holds it. */
  .keelson-fig{overflow-x:visible;margin-top:var(--space-5)}
  .keelson-fig svg{width:100%;max-width:none}
  #owner-keelson .system-name{font-size:22px}
  #owner-keelson .system-index{font-size:20px}
  #owner-keelson .note{font-size:19px}
  #owner-keelson .owner-label{font-size:26px}
  #owner-keelson .handoff-label{font-size:18px}
  #owner-keelson .bottom-line{font-size:32px}
  .fig-payoff{font-size:1.08rem;text-align:left;margin-top:var(--space-4)}
  .condition-cta{margin-top:var(--space-4)}

  .thread{margin-top:var(--space-4)}
  .thread li{grid-template-columns:1fr;gap:var(--space-1);padding:var(--space-3) 0}
  .thread .out{font-size:1.08rem}

  .shots{gap:var(--space-3);margin-top:var(--space-4)}
  .shot{flex:0 0 86%}
  .shot-img{padding:var(--space-3)}
  .shot-body{padding:var(--space-4)}
  .shot-body p{font-size:.9rem}
  .shot-runs,.shot-proto{padding-top:var(--space-2)}

  /* the chassis sits straight on the band's navy -- the box around it was
     paying padding and a keyline for nothing at this width */
  .arch{margin-top:var(--space-4);padding:0;border:0}
  .arch-rule{margin-top:var(--space-3);padding-top:var(--space-3);gap:var(--space-2)}
  .arch-rule .say{font-size:.9rem}
  /* the tiers stack rather than swiping: a carousel hid Core and Custom
     entirely, and Core is the tier the page is asking for. Core leads. */
  .tiers{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
  .tier{padding:var(--space-4)}
  .tier-top{padding-bottom:var(--space-2);margin-bottom:var(--space-3)}
  .tier-for{font-size:.9rem}
  .tier ul{margin:var(--space-3) 0 var(--space-4)}
  .tier li{font-size:.88rem;line-height:1.4;margin-bottom:var(--space-1);padding-left:var(--space-4)}
  .tier li::before{width:8px}
  /* three bullets stand; the other six are behind the show-all tap */
  .tier .more-desk{display:none}
  .tier .more{display:block;margin-bottom:var(--space-4)}
  .tier ul:has(+ .more){margin-bottom:var(--space-2)}
  .note{margin-top:var(--space-4);font-size:.86rem}

  .door{gap:var(--space-4)}
  .contact{padding-top:var(--space-5)}
  .contact .body{margin-top:var(--space-3)}
  .mailto{margin-top:var(--space-4)}
  .house{margin-top:var(--space-3)}

  .foot{padding:var(--space-5) 0 var(--space-4)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--space-4)}
  .foot-grid > :first-child{grid-column:1/-1}
  .foot .lockup-full{width:172px;margin-bottom:var(--space-3)}
  .foot .legal{font-size:.82rem}
  .foot li{margin-bottom:var(--space-1)}
  .foot-label{margin-bottom:var(--space-2)}
  .foot-bottom{margin-top:var(--space-3);padding-top:var(--space-3);font-size:.62rem}

  /* ---- interior pages: phone step-down, 2026-09-05 ---- */
  .page-head{padding-block:var(--space-6) var(--space-5)}
  .page-head .mono{margin-bottom:var(--space-3)}
  .page-head h1{max-width:none}
  .page-head p:not(.mono){font-size:1rem;margin-top:var(--space-3)}

  .split{gap:var(--space-4)}
  /* the drawing's 11px labels scale down with the column (534-unit viewBox
     into a ~342px phone column, ~0.64x) to under 8px actual -- bumped so the
     rendered size stays legible (keelson-design never-again #16). */
  .section-drawing .lbl{font-size:19px}
  .drawing-caption{margin-top:var(--space-2);font-size:.7rem}

  /* the services ledger and papers are where that page's phone length is:
     rows and tiles step down the same way the homepage's tiles did (review
     round 1, S1 -- measured 8.9 screens at 390 before this block) */
  .ledger{margin-top:var(--space-4)}
  .ledger-row{grid-template-columns:1fr;gap:var(--space-1);padding-block:var(--space-3)}
  .ledger-row p{font-size:.9rem;line-height:1.5}
  .ledger-basis{margin-top:var(--space-2);font-size:.72rem}
  .ledger-basis em{font-size:.86rem}

  .checklist{gap:var(--space-1) var(--space-4)}
  .checklist li{font-size:.9rem}

  .papers{grid-template-columns:1fr;gap:var(--space-2);margin-top:var(--space-4)}
  .paper{padding:var(--space-3) var(--space-4);display:grid;
    grid-template-columns:minmax(auto,var(--space-9)) minmax(0,1fr);column-gap:var(--space-3);
    align-items:baseline}
  .paper-label{line-height:1.3}
  .paper-label{grid-column:1}
  .paper-value{grid-column:2;font-size:1.08rem}
  .paper-note{grid-column:2;font-size:.88rem;line-height:1.45;margin-top:var(--space-1)}

  .faq{margin-top:var(--space-4)}
  .faq summary{font-size:1.05rem;padding-block:var(--space-3)}
  .faq .answer{font-size:.95rem;padding-bottom:var(--space-3)}

  .orders{margin-top:var(--space-4)}
  .orders p + p{margin-top:var(--space-3)}

  .contact-grid{gap:var(--space-5)}
  .contact-grid > div > *{margin-top:var(--space-3)}
  .contact-grid h3{margin-top:var(--space-5)}
  .dl{gap:var(--space-1) var(--space-4)}
  .dl dd{margin-bottom:var(--space-3)}

  .course{grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-4)}

  .prose{padding-block:var(--space-6)}
  .prose h2{font-size:1.3rem;margin-top:var(--space-6);padding-top:var(--space-4)}
  .prose h3{font-size:1.05rem}
  .prose .toc{columns:1;font-size:.8rem}
}
/* very narrow phones: the masthead lockup and the booking CTA have to share 320px.
   Carried forward from d.html — this block MUST sit after the 720px block or it
   loses the cascade (2026-09-02 fix; 320px overflowed to 356px). */
@media (max-width:392px){
  .wrap{padding-inline:var(--space-4)}
  .masthead-in{gap:var(--space-2)}
  .lockup-h .word{width:100px}
  .masthead .cta{padding:var(--space-2) var(--space-3);font-size:.62rem;letter-spacing:.06em}
  .menu-nav{padding-inline:var(--space-4)}
  .btn-jump{font-size:.62rem;letter-spacing:.05em;padding:0 var(--space-2)}
}
/* the narrowest phones: the wordmark gives way so the symbol, the menu and
   the CTA can share 320px without the bar overflowing */
@media (max-width:344px){
  .lockup-h .word,.lockup-h .sep{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero .lockup-full{transform:none}
}
/* ---------- print ----------
   Browsers drop backgrounds by default, so anything set in white or a white
   derivative on the navy bands would print invisible. The derivative tokens
   flip to their ink-safe counterparts here (every rule consumes them through
   var(), so one redefinition covers the page), the navy grounds and cards go
   white with navy ink, and the chrome that only makes sense on a screen is
   hidden. The white footer lockup would print as a blank shape; the entity
   line beside it carries the name. Restored after the dark system's print
   block was retired with it (review round 1, S5). */
@media print{
  :root{--ink-2:var(--navy);--light:var(--slate);--hair-d:var(--hair);--amber:var(--amber-ink);
    --amber-hi:var(--amber-ink)}
  .band-navy,.band-tint,.tier--lead,.tier,.foot,.paper,.item,.shot-img{background:var(--white);
    color:var(--navy)}
  .band-navy .sec-head p,.door p,.contact .body,.tier--lead li,.tier--lead .tier-for,
  .tier-top h3,.mailto,.btn-line,.btn-amber,.btn-navy,.btn-inverse,.foot .legal,.foot a,
  .foot .legal strong,.course h3,.course p,.band-navy .orders p{color:var(--navy)}
  .btn,.btn-amber,.btn-navy,.btn-line,.btn-inverse{background:var(--white);border-color:var(--navy)}
  .masthead .cta,.menu,.skip,.jump-band,.swipe-hint,.hero-beams,.foot .lockup-full{display:none}
  .masthead{position:static}
  .shots{overflow:visible;flex-wrap:wrap}
}