/* ─── theme tokens ─── */
:root {
  --bone:#F2F3F5; --bone2:#DCDEE2; --paper:#FAFBFC;
  --ink:#141414; --ink2:#2A2825; --ink3:#4A4842; --ink4:#7E7A72;
  --white:#FFFFFF; --red:#CB2828;
  /* Breathing room between text and the edge of any coloured band it sits on.
     The band grows outwards by this much and pads inwards by the same, so the
     text keeps the section's own left edge instead of being indented. */
  --band-pad: clamp(20px, 1.8vw, 26px);
  --rule: rgba(20,20,20,0.18);
  --rule-w: rgba(244,241,234,0.18);
  --grid-line: rgba(20,20,20,0.04);
  --grid-major: rgba(20,20,20,0.075);
  --grid-dot: rgba(203,40,40,0.20);
  --header-bg: rgba(242,243,245,.82);
  --traffic-1:#E94B3C; --traffic-2:#E8B43A; --traffic-3:#3DAA5E;
  --sans:'Inter',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad: clamp(20px,4vw,56px);
  --max: 1440px;
}

[data-theme="dark"] {
  --bone:#23252A; --bone2:#181A1E; --paper:#2E3137;
  --ink:#F2F4F6; --ink2:#D6D8DB; --ink3:#9CA0A6; --ink4:#65686D;
  /* The Nuit red, for dark grounds. #CB2828 is the logo red and it is the red
     on every light surface; this is the same red opened up just enough to be
     legible on near-black. It sits 60% of the way from the old #FF6452 back
     towards the logo, which is close enough that the two read as one colour
     under two lights. The cost is measured and accepted: 4.16:1 on the field
     and 3.46:1 on the panels, which clears the 3.0 bar for large text but not
     the 4.5 one for body copy. Red belongs on markers, headlines and accents
     here, not inside a paragraph. */
  --white:#FFFFFF; --red:#DC3C34;
  --rule: rgba(242,244,246,0.16);
  --rule-w: rgba(242,244,246,0.24);
  --grid-line: rgba(242,244,246,0.04);
  --grid-major: rgba(242,244,246,0.08);
  --grid-dot: rgba(220,60,52,0.30);
  --header-bg: rgba(24,26,30,0.85);
  --traffic-1:#FF5F57; --traffic-2:#FEBC2E; --traffic-3:#28C840;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bone); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .25s ease, color .25s ease;
}
a{color:inherit}
::selection{background:var(--red); color:#fff}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
section{position:relative}

/* legacy dark-section markers - now neutral, inherit theme */


/* ─── type ─── */
.mono{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500}
.display{font-weight:800; letter-spacing:-.045em; line-height:.92; font-size:clamp(44px, 7vw, 116px); margin:0}
/* Section headings sit a clear step below the page headline: at 1440 they were
   80px against the hero's 82px, so the claim had no hierarchy over them and
   read as a subtitle. Now ~61px against ~100px. */
.h2{
  font-weight:800; letter-spacing:-.035em; line-height:.96;
  font-size:clamp(32px, 4.25vw, 68px); margin:0;
  text-wrap:balance;
}
.h3{font-weight:700; letter-spacing:-.025em; line-height:1.05; font-size:clamp(22px, 2.4vw, 36px); margin:0}
.lead{font-size:clamp(18px, 1.5vw, 22px); line-height:1.5; max-width:58ch; color:var(--ink3); margin:0}

.red3{color:var(--red)}

/* ─── marker (section number tag) ─── */
.marker{
  display:flex; align-items:center; gap:14px;
  padding-top:clamp(36px,5vw,64px);
  margin-bottom:clamp(24px,3vw,40px);
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink3);
}

.marker::before{content:""; width:22px; height:1px; background:currentColor; opacity:.5}
.marker .n{color:var(--red); font-weight:600}


/* ─── header ─── */
.header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:72px; display:flex; align-items:center;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:var(--header-bg);
  border-bottom:1px solid var(--rule);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
/* Brand left, nav centred in what is left, actions pinned right. Not
   space-between across five children: that let the CTA drift with the nav's
   width, so it sat in a different place on every page. */
.header-inner{width:100%; display:flex; align-items:center; gap:clamp(16px,3vw,44px)}
.header-inner .nav{margin-inline:auto}
.header-actions{display:flex; align-items:center; gap:10px; flex-shrink:0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; line-height:1}
.brand-mark{display:block; height:30px; width:auto; flex-shrink:0}
.brand-text{display:flex; flex-direction:column; gap:3px}
.brand-word{font-family:var(--sans); font-weight:800; font-size:19px; letter-spacing:-.03em; line-height:1}
.brand-word .brand-three{color:var(--red)}
.brand-tag{
  font-family:var(--mono); font-size:9px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink3); line-height:1;
}
/* Mobile header - keep the Swiss-AI-Builders tag visible, shrink the
   wordmark and the CTA button so everything fits on a phone. */
@media (max-width: 640px){
  .brand-mark{ height:26px }
  .brand-word{ font-size:16px }
  .brand-tag{ font-size:8px; letter-spacing:.16em }
}
/* The header row is brand + CTA + burger + toggle. At 375px that leaves 335px
   of content width, and the CTA on a single line wants 151px against the 110px
   it had - which is why "Book a call" was breaking onto two lines and reading
   as a broken button. Tighten the tag (it is the widest part of the brand
   block, not the wordmark) and the CTA's own tracking/padding to buy the
   difference back, then forbid the wrap. */
@media (max-width: 480px){
  .brand-tag{ font-size:7.5px; letter-spacing:.12em }
  /* The button gives up the room, not the wordmark: squeezing the tag to buy
     space for the CTA meant deforming the brand to fit a button. So the CTA
     goes down a size and drops its arrow, which is the only part of it that
     carries no information. */
  .header .btn{
    padding:7px 9px;
    font-size:9px;
    letter-spacing:.06em;
    gap:0;
    white-space:nowrap;
  }
  .header .btn .ar{ display:none }
}
.nav{display:flex; gap:30px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase}
.nav a{text-decoration:none; opacity:.65; transition:opacity .15s}
.nav a:hover{opacity:1}
.nav .idx{color:var(--red); margin-right:6px}
@media (max-width:820px){ .nav{display:none} }

/* ── services dropdown (desktop only; .nav is hidden ≤820px) ── */
.nav-group{position:relative; display:inline-flex; align-items:center}
.nav-trigger{
  font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit;
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; opacity:.65; transition:opacity .15s;
}
.nav-group:hover .nav-trigger,
.nav-group:focus-within .nav-trigger{opacity:1}
.nav-group.is-current .nav-trigger{opacity:1; color:var(--red)}
.nav-group.is-current .nav-trigger .idx{color:var(--red)}
/* Drawn, not typed. The glyph this used to be (▾) is missing from the mono
   font's subset, so on any machine without a system fallback for it the nav
   read "SERVICES ■" and the language button read "EN ■". */
.nav-trigger .caret{display:inline-flex; transition:transform .2s ease}
.nav-trigger .caret svg{width:9px; height:6px; display:block}
.nav-group:hover .nav-trigger .caret,
.nav-group:focus-within .nav-trigger .caret{transform:rotate(180deg)}
.nav-dropdown{
  position:absolute; top:100%; left:50%; margin-top:12px;
  transform:translateX(-50%) translateY(-6px);
  display:flex; flex-direction:column; min-width:210px;
  background:var(--paper); border:1px solid var(--rule);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:60;
}
.nav-dropdown::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown a{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:none;
  padding:11px 16px; color:var(--ink); opacity:.72; white-space:nowrap;
  transition:opacity .15s, color .15s, background .15s;
}
.nav-dropdown a + a{border-top:1px solid var(--rule)}
.nav-dropdown a:hover{opacity:1; color:var(--red); background:var(--bone)}
.nav-dropdown a.is-current{opacity:1; color:var(--red)}

/* ── mobile nav: burger + full-screen panel (≤820px, where .nav is hidden) ── */
.nav-burger{
  display:none; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; margin-left:10px;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  cursor:pointer; flex-shrink:0;
  transition:background .15s, color .15s, border-color .15s;
}
/* The toggle and the menu read as one pair on the right, so the gap between
   them is tighter than the gap that separates them from the CTA. */
.theme-toggle + .nav-burger{margin-left:6px}
.nav-burger:hover{background:var(--ink); color:var(--bone)}
.nav-burger-lines{position:relative; width:16px; height:12px; display:block}
.nav-burger-lines i{
  position:absolute; left:0; right:0; height:2px; background:currentColor;
  transition:transform .22s ease, opacity .15s ease, top .22s ease;
}
.nav-burger-lines i:nth-child(1){top:0}
.nav-burger-lines i:nth-child(2){top:5px}
.nav-burger-lines i:nth-child(3){top:10px}
html.nav-open .nav-burger-lines i:nth-child(1){top:5px; transform:rotate(45deg)}
html.nav-open .nav-burger-lines i:nth-child(2){opacity:0}
html.nav-open .nav-burger-lines i:nth-child(3){top:5px; transform:rotate(-45deg)}
@media (max-width:820px){ .nav-burger{display:inline-flex} }

.mobile-nav{
  position:fixed; top:72px; left:0; right:0; bottom:0; z-index:49; /* just under .header (50) */
  background:var(--bone);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
html.nav-open .mobile-nav{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}
/* scroll lock only while the panel can actually show */
@media (max-width:820px){ html.nav-open, html.nav-open body{overflow:hidden} }
@media (min-width:821px){ .mobile-nav{display:none} }
@media (prefers-reduced-motion: reduce){
  .mobile-nav{transition:none; transform:none}
  .nav-burger-lines i{transition:none}
}
.mobile-nav-inner{
  max-width:var(--max); margin:0 auto; padding:10px var(--pad) 44px;
  display:flex; flex-direction:column;
  font-family:var(--mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
}
.mobile-nav .idx{color:var(--red); margin-right:10px}
.mnav-item{
  display:flex; align-items:center; min-height:56px; padding:14px 0;
  text-decoration:none; color:var(--ink); opacity:.85; transition:opacity .15s, color .15s;
}
.mnav-item + .mnav-item{border-top:1px solid var(--rule)}
.mnav-item:hover{opacity:1}
.mnav-item.is-current{opacity:1; color:var(--red)}
.mnav-group{display:flex; flex-direction:column; padding:14px 0 10px}
.mnav-group + .mnav-item, .mnav-group ~ .mnav-item + .mnav-item{border-top:1px solid var(--rule)}
.mnav-label{
  display:flex; align-items:center; color:var(--ink3);
  font-size:11px; padding:6px 0 10px;
}
.mnav-group a{
  display:flex; align-items:center; min-height:48px; padding:12px 0 12px 26px;
  text-decoration:none; color:var(--ink); opacity:.72;
  font-size:12px; letter-spacing:.12em;
  border-top:1px solid var(--rule);
  transition:opacity .15s, color .15s;
}
.mnav-group a:hover{opacity:1}
.mnav-group a.is-current{opacity:1; color:var(--red)}
.mnav-group + .mnav-item{border-top:1px solid var(--rule)}
.mnav-langs{margin-top:26px; padding-top:18px; border-top:1px solid var(--rule)}
.mnav-lang-row{display:flex; flex-wrap:wrap; gap:10px; padding-top:4px}
.mnav-lang-row a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:52px; min-height:44px; padding:0 14px;
  border:1px solid var(--rule); text-decoration:none; color:var(--ink);
  font-size:12px; letter-spacing:.14em; opacity:.8;
  transition:opacity .15s, color .15s, border-color .15s;
}
.mnav-lang-row a:hover{opacity:1; border-color:var(--ink)}
.mnav-lang-row a.is-current{opacity:1; color:var(--red); border-color:var(--red)}

/* ─── buttons ─── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 18px; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  text-decoration:none; cursor:pointer; border:1px solid var(--ink);
  background:var(--ink); color:var(--bone);
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover{background:var(--red); border-color:var(--red); color:#fff}
.btn .ar{display:inline-block; transition:transform .2s ease}
.btn:hover .ar{transform:translateX(4px)}
/* One button scheme on phones, everywhere: full width, label left, arrow
   pinned right. Buttons sized by their own label length and flush left read
   as ragged once they stack, which is what made the hero pair look broken.
   The header CTA is the one exception - it shares its row with the burger and
   the theme toggle, so it stays inline. */
@media (max-width: 560px){
  .btn{width:100%; justify-content:space-between}
  .header .btn{width:auto; justify-content:center}
  .hero-actions{flex-direction:column; align-items:stretch; gap:12px}
}
.btn-ghost{background:transparent; color:inherit; border-color:currentColor}
.btn-ghost:hover{background:var(--red); border-color:var(--red); color:#fff}
.btn-light{background:var(--bone); color:var(--ink); border-color:var(--bone)}
.btn-light:hover{background:var(--red); border-color:var(--red); color:#fff}

/* ─── hero ─── */
.hero{padding:128px 0 56px; position:relative; overflow:hidden}
.hero-tag{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:18px 0; border-bottom:1px solid var(--rule);
  margin-bottom:clamp(48px,6vw,84px);
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.hero-tag .pulse{display:inline-flex; align-items:center; gap:8px}
.hero-tag .pulse::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--red); animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.85)}}
/* The hero shares its row with the build reel, so its column tops out around
   660px while the shared .display clamp keeps growing to 116px on wide
   screens, which wrapped "Turn your idea". Cap the size here (homepage hero
   only, the other .display pages have the full width) and keep each line
   unbreakable. */
.hero h1.display{font-size:clamp(46px, 7vw, 100px)}
.hero h1 .line{display:block; white-space:nowrap}
/* The middle line is the longest ("into a real product"), so it is scaled down
   relative to the other two and kept on a single line. */
.hero h1 .quiet{color:var(--ink3); font-weight:400; font-size:.76em; white-space:nowrap}
.hero h1 em{font-style:italic; color:var(--red); font-weight:800}

/* The sizes above are hand-tuned to the English lines. Every other language
   runs longer, and because each .line is nowrap it overflows its column and
   paints over the build reel beside it (FR was the worst, ~224px into the
   reel). Scale the whole headline down per language - .quiet and em are in em
   units, so they follow. Only needed >=901px; below that .hero-grid collapses
   to one column and there is nothing to collide with. */
@media (min-width:901px){
  .hero h1.display:lang(de){font-size:clamp(46px, 5.95vw, 85px)}
  .hero h1.display:lang(fr){font-size:clamp(40px, 4.7vw, 67px)}
  .hero h1.display:lang(it){font-size:clamp(42px, 5.2vw, 74px)}
  .hero h1.display:lang(es){font-size:clamp(46px, 6.45vw, 93px)}
}
/* …but "nothing to collide with" was only true of the reel: the line still has
   to fit the viewport. Below 901px every language falls back to the
   English-tuned size (40px at the clamp floor), and nowrap made the longest
   line run past the screen edge - measured at 375px: FR +85px, IT +43px,
   DE +2px. Let the headline wrap here; it already renders as stacked lines, so
   one more break reads the same. */
@media (max-width:900px){
  .hero h1 .line,
  .hero h1 .quiet{white-space:normal}
}

/* glitch - subtle, intermittent */
/* scramble - per-letter independent roll */
.scram{
  display:inline-block;
  font-variant-ligatures:none;
  white-space:nowrap;
}
.scram > i{
  display:inline-block; font-style:inherit;
  overflow:visible;
}
.scram > i.rolling{ color:var(--red) }

@media (prefers-reduced-motion: reduce){
  .scram > i.rolling{ color:inherit }
}
.hero-grid{
  display:grid;
  /* The headline column carries the page's biggest type, so it gets the wider
     share: at .9fr the nowrap lines capped the h1 at 82px, which is what made
     the claim read no larger than a section heading. */
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, .92fr);
  gap:clamp(32px,5vw,72px);
  align-items:stretch;
}
.hero-main{
  display:flex; flex-direction:column;
  /* Centred rather than pushed to the edges: space-between pinned the title to
     the top and the lead to the bottom, leaving a large hole between them. */
  justify-content:center;
  min-height:62vh;
  gap:clamp(28px,3.5vw,56px);
}
.hero-foot{
  /* No padding of its own: it was clearance for the divider rule that used to
     sit here, and with the rule gone it just stacked on .hero-main's 28px gap
     and doubled the space under the headline. */
  display:flex; flex-direction:column; gap:22px;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}

/* right column - build reel fills the height, swiss meta beneath */
.hero-side{
  display:flex; flex-direction:column;
  gap:18px; align-self:stretch;
  padding-top:8px; min-height:0;
  /* grid items default to min-width:auto, which would let the (very wide)
     shots track blow the column out instead of being clipped by .shots-view */
  min-width:0;
}

/* hero build reel - sliding carousel of shipped work. The track is centred on
   the active shot by JS (see index.html), so neighbours peek in at the edges. */
.hero-shots{width:100%; min-width:0; flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:12px}
.shots-view{overflow:hidden; position:relative; width:100%; flex:none}
.shots-track{display:flex; gap:14px; align-items:flex-start; transition:transform .65s cubic-bezier(.22,.9,.24,1); will-change:transform}
/* Width-driven, not height-driven: our shots are landscape, so the shot takes
   its width from the column and its height from the ratio. Sizing it from the
   hero's height instead would letterbox them into a near-square. The ratio
   matches the source cards (16:10) so nothing of the composition is cropped. */
.shot{
  flex:0 0 auto; width:94%; height:auto; aspect-ratio:16/10; margin:0;
  border:1px solid var(--ink); background:var(--bone2); overflow:hidden;
  opacity:.4; filter:saturate(.4); cursor:pointer;
  transition:opacity .5s ease, filter .5s ease;
}
.shot.active{opacity:1; filter:none}
.shot-link{display:block; width:100%; height:100%; text-decoration:none}
.shot img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.shots-cap{display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink3); padding:0 2px}
.shots-cap b{color:var(--red); font-weight:600}
.shots-cap em{font-style:normal; color:var(--ink2); margin-left:auto; letter-spacing:.2em}
.shots-rail{display:flex; justify-content:center; gap:10px; padding-top:4px; flex-wrap:wrap}
.shots-rail button{
  position:relative; display:block; width:52px; aspect-ratio:16/10;
  padding:0; margin:0; border:1px solid var(--ink); background:none; cursor:pointer;
  opacity:.35; filter:grayscale(1);
  transition:opacity .2s ease, filter .2s ease, transform .2s ease;
}
.shots-rail button:hover{opacity:.75; transform:translateY(-2px)}
.shots-rail button.active{opacity:1; filter:none}
.shots-rail button.active::after{content:""; position:absolute; left:-1px; right:-1px; bottom:-5px; height:2px; background:var(--red)}
.shots-rail button img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}

.hero-term{ width:100%; max-width:none; margin:0 }
.hero-term .term-body{padding:18px 18px 20px}
.hero-term .term-line{margin-bottom:2px}
.term-line .ok{color:var(--red); margin-right:6px; font-weight:600}
.hero-side-meta{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink3);
  padding:0 4px;
}
.hero-side-meta .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--red);
  animation:pulse 1.8s ease-in-out infinite;
}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:48px}
  .hero-main{min-height:0}
  .hero-side{align-self:stretch}
}

/* Mobile - the right column now carries the build reel (real work, not the
   old decorative terminal), so it stays visible and just gets a fixed height
   instead of stretching to the hero. */
@media (max-width:640px){
  .hero-shots{flex:none}
  .shot{width:82%}
  /* The thumbnail rail wrapped onto two ragged rows on a phone and duplicated
     what swiping already does; the caption broke its label across lines beside
     it. Both go: the reel itself still shows the work. */
  .shots-rail, .shots-cap{display:none}
}

@keyframes blink{50%{opacity:0}}

/* hero terminal - swiss-precise mock work order */
.term-body.invoice{
  font-family:var(--mono); font-size:12.5px; line-height:1.65;
  display:flex; flex-direction:column; gap:1px;
}
.invoice .term-line + .inv-rule{margin-top:6px}
.invoice .inv-rule + .term-comment{margin-top:4px}
.invoice .inv-rule{
  border-top:1px dashed var(--ink);
  opacity:.6;
  margin:2px 0;
}
.invoice .inv-title{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--ink);
  padding:2px 0;
}
.invoice .inv-title .inv-ref{color:var(--red); font-weight:600; letter-spacing:.18em}
.invoice .inv-row{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:12.5px;
}
.invoice .inv-k{color:var(--ink2); font-weight:500}
.invoice .inv-v{color:var(--ink); font-weight:600; white-space:nowrap}
.invoice .term-comment{margin-top:6px}

/* ─── marquee ─── */
.marquee{
  background:var(--ink); color:var(--bone);
  padding:20px 0; overflow:hidden;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.marquee-track{
  display:flex; gap:56px; white-space:nowrap;
  font-family:var(--sans); font-weight:800;
  font-size:clamp(28px,4.2vw,56px); letter-spacing:-.025em;
  animation:scroll 34s linear infinite;
}
.marquee-track > span{display:inline-flex; align-items:center; gap:56px}
.marquee-track .dot{width:14px; height:14px; background:var(--red); border-radius:50%; flex-shrink:0}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ─── 3 things ─── */
.what{padding-bottom:clamp(48px,5vw,80px)}
.what-head{
  display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(32px,4vw,72px);
  align-items:end; margin-bottom:clamp(48px,6vw,80px);
}
@media (max-width:820px){ .what-head{grid-template-columns:1fr} }
/* ── The ascent ────────────────────────────────────────────────────────────
   The three steps used to be boxed columns with a 380px min-height, sized for
   a longer copy deck; once the copy was cut, two thirds of each card was empty
   and it needed one layout for desktop and another for phones. This is a
   single column at every width, with a rule down the left that fills as the
   section is scrolled and one dot per step. It is the only element on the page
   that shows the four-week sequence rather than stating it - and the mark is a
   mountain, so the section climbs.

   Everything is visible and fully coloured without JavaScript. The dimming of
   steps you haven't reached is opt-in: the script adds `.ascent-on` to the
   container, so a reader with no JS (or reduced motion) simply gets the plain
   list. */
.threes{
  position:relative;
  /* No indent on wide screens: the gutter for the rule pushed the step titles
     to 114px while the section heading above and the button below sat at 56px,
     so the block read as indented from the rest of the page. The rule lives in
     the wrap's own margin instead. Narrow screens have no margin to spare, so
     there it keeps a small gutter. */
  /* The rule used to take a 44px lane out of the phone layout, which pushed
     the step text to 64px while the section heading above and the button below
     stayed at 20px, and left the band bleeding off the right edge with a gap on
     the left. The block read as shoved to one side. The rule now runs inside
     the band's own left padding at every width, so the band is symmetric and
     the text lines up with the rest of the section. */
}
/* Top and height are set by the script, from the first dot's centre to the
   last one's: pinned with CSS the rule ran past the final dot and looked like
   it had come loose. */
.ascent-spine{
  position:absolute;
  /* 6px from the page's left edge, so the rule keeps its own gutter without
     taking one out of the text. Expressed against --pad because that is what
     .threes is offset by. */
  left:calc(6px - var(--pad));
  top:0; height:0; width:2px; background:var(--rule);
  /* The bands are later siblings and now run underneath the rule, so without
     this they paint over it and the rule disappears on phones. */
  z-index:1;
}
.ascent-fill{
  position:absolute; inset:0 0 auto 0;
  height:0; background:var(--red);
  box-shadow:0 0 9px rgba(203,40,40,.5);
  /* Short, because the height is already tracking the scroll: a long ease made
     the head lag behind the reader instead of following them. */
  transition:height .12s linear;
}
/* The current is driven by the scroll, not by a timer: the head sits at the
   leading edge of the fill, so it travels down the rule exactly as far as the
   reader has gone. It brightens while the fill is moving and settles when they
   stop. A looping animation was the wrong idea - it ran on its own whether or
   not anyone was scrolling, which made it decoration rather than a readout. */
/* The head of the current: red body running to a white-hot tip. */
.ascent-fill::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:-3px; height:26px;
  background:linear-gradient(to bottom, rgba(203,40,40,0), var(--red) 58%, #FFF3EE 100%);
  border-radius:2px; opacity:.5;
  transform-origin:bottom;
  transition:opacity .3s ease;
}
/* The arc at the tip - only drawn while the current moves. */
.ascent-fill::before{
  content:""; position:absolute; left:50%; bottom:-4px; width:7px; height:7px;
  margin-left:-3.5px; border-radius:50%;
  background:#FFF3EE; box-shadow:0 0 10px 2px var(--red);
  opacity:0; transition:opacity .3s ease;
}
.ascent-fill.is-live::after{
  opacity:1;
  animation:ascent-crackle .22s steps(2,end) infinite;
}
.ascent-fill.is-live::before{
  opacity:1;
  animation:ascent-arc .16s steps(2,end) infinite;
}
.ascent-fill.is-live{box-shadow:0 0 18px rgba(203,40,40,.8)}
@keyframes ascent-crackle{
  0%{opacity:1; transform:scaleY(1)}
  40%{opacity:.55; transform:scaleY(.62)}
  70%{opacity:.95; transform:scaleY(1.24)}
  100%{opacity:1; transform:scaleY(.88)}
}
@keyframes ascent-arc{
  0%{transform:translateX(-1.5px) scale(1)}
  50%{transform:translateX(1.5px) scale(.55)}
  100%{transform:translateX(0) scale(1.15)}
}
.three{
  position:relative;
  padding:clamp(20px,2.6vw,30px) var(--band-pad);
  margin-inline:calc(-1 * var(--band-pad));
  color:var(--ink);
}
/* One mark per phase, drawn with the theme's own tokens rather than baked
   colours, so a single set of art serves both the light and the dark site.
   It sits just past the copy rather than out at the right edge: flung to the
   far side it pulled the eye away from the text and changed how the row read.
   On a phone it goes under the copy, small. */
.three-art{
  display:block; width:clamp(74px,19vw,100px); height:auto;
  margin-top:14px;
}
@media (min-width:1100px){
  .three{
    display:grid; align-items:center;
    /* The text column is capped at its own measure; the mark then sits centred
       in whatever is left, rather than hugging the copy or being flung to the
       far edge. */
    grid-template-columns:minmax(0,62ch) minmax(0,1fr);
    column-gap:clamp(24px,3vw,52px);
  }
  .three-line, .three-body{grid-column:1}
  .three-art{
    grid-column:2; grid-row:1 / span 2;
    width:clamp(100px,8vw,132px); margin-top:0; justify-self:center;
  }
}
.three:last-child{border-bottom:none}
.three-dot{
  position:absolute;
  /* Centred on the rule. The offset is measured from .three, which carries the
     band's negative margin, so it has to account for it: get this wrong and
     the dots walk off the left edge of the page. */
  /* Centred on the rule at x=6: the dot is measured from .three, which carries
     the band's negative margin, so both --pad and --band-pad come into it. */
  left:calc(2px + var(--band-pad) - var(--pad));
  top:calc(clamp(20px,2.6vw,30px) + .1em);
  /* No ring: the dot is wider than the 2px spine and simply covers it, which
     avoids having to match whatever surface the section sits on. */
  width:10px; height:10px; border-radius:50%;
  background:var(--ink4);
  transition:background .3s ease, transform .3s ease;
}
.three-line{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:clamp(14px,2vw,28px); margin-bottom:8px;
  /* Same measure as the body below it: pinned to the container edge the week
     marker floated off on its own, half a screen from the step it labels. */
  max-width:62ch;
}
.three-when{
  flex:none; font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink3);
  white-space:nowrap;
}
/* Reached steps. Only ever applied when the script is running. */
.ascent-on .three{opacity:.38; transition:opacity .5s ease}
.ascent-on .three.is-on{opacity:1}
.ascent-on .three.is-on .three-dot{background:var(--red); transform:scale(1.15)}
.ascent-on .three.is-on .three-when{color:var(--red)}
/* From 760px the rule and its dots move out into the page margin, so the step
   text lines up with everything else in the section. */
/* The rule clears the band's own left edge rather than sitting on it, by the
   band's padding plus 16px. The dot's offset then works out constant, because
   both it and the band move with --band-pad. Only from 1100px, where --pad is
   finally wide enough to hold all of it. */
@media (min-width:1100px){
  .ascent-spine{left:calc(-1 * (var(--band-pad) + 16px))}
  .three-dot{left:-21px; width:12px; height:12px}
}
@media (prefers-reduced-motion:reduce){
  .ascent-fill, .three-dot, .ascent-on .three{transition:none}
  .ascent-fill::before{display:none}
  .ascent-fill::after{animation:none; opacity:.7}
  .ascent-fill{box-shadow:none}
}
/* A card title must sit below the section title that introduces it. At
   clamp(36px,…) its mobile floor was 36px against the section's 32px, so
   "Scope" outranked "We develop with AI." on every phone. */
.three-title{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(26px,3.2vw,44px); letter-spacing:-.04em; line-height:1;
  margin:0;
}
.three-body{font-size:16px; line-height:1.55; margin:0; max-width:62ch}


/* The section's one link out to /jobs/. It sits with the heading rather than
   under the grid: hiring is a footnote to a section about who you get, and a
   panel the width of the crew grid claimed otherwise. */
.team-join{
  justify-self:end; align-self:end;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink3); text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.team-join i{font-style:normal; transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.team-join:hover{color:var(--ink); border-bottom-color:var(--ink)}
.team-join:hover i{transform:translateX(6px)}
.team-join:focus-visible{outline:2px solid var(--red); outline-offset:4px}
@media (max-width:820px){ .team-join{justify-self:start; margin-top:12px} }

/* ── careers ── */
.jobs-hero{padding-top:clamp(104px,11vw,140px); padding-bottom:clamp(56px,7vw,96px)}
/* Headline left, the line and the follow set to its foot on the right - the
   same two-column head the rest of the site uses. Stacked in one column they
   left the whole right half of the band empty and, worse, put the button hard
   against the line with nothing between them. */
.jobs-main{
  display:grid; grid-template-columns:1.5fr 1fr;
  gap:clamp(26px,4vw,64px); align-items:end;
}
.jobs-hero .display{margin:0}
.jobs-intro{display:flex; flex-direction:column; gap:clamp(20px,2.4vw,30px); padding-bottom:.14em}
.jobs-hero .lead{max-width:32ch; margin:0}
@media (max-width:900px){
  .jobs-main{grid-template-columns:1fr; align-items:start; gap:clamp(22px,4vw,30px)}
  .jobs-intro{padding-bottom:0}
  .jobs-hero .lead{max-width:40ch}
}
.jobs-note{max-width:56ch; color:var(--ink3); font-size:15px; line-height:1.6; margin:0}

/* One card per open role, in the same hand as the crew cards: a bordered file
   on the paper surface, mono labels, the title carrying the weight. Two of them
   sit side by side and drop to one column before they get narrower than their
   own copy. */
.jobs-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(44px,5.5vw,80px);
}
@media (max-width:820px){ .jobs-grid{grid-template-columns:minmax(0,1fr)} }
.job{
  display:flex; flex-direction:column;
  border:1px solid var(--ink); background:var(--paper);
  padding:clamp(20px,2.2vw,30px);
}
.job-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:clamp(14px,1.6vw,20px)}
.job-n{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink4)}
.job-open{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red); border:1px solid currentColor; padding:3px 8px;
}
.job-title{
  font-size:clamp(24px,2.6vw,34px); font-weight:800; letter-spacing:-.03em;
  line-height:1.02; margin:0 0 10px;
}
.job-blurb{color:var(--ink3); font-size:15px; line-height:1.6; margin:0; max-width:46ch}
.job-terms{
  list-style:none; margin:clamp(16px,1.8vw,22px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.job-terms li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink3); border:1px solid var(--rule); padding:5px 10px;
}
/* Pushed to the bottom so two cards of different copy lengths still line their
   apply links up with each other. */
.job-apply{
  margin-top:auto; padding-top:clamp(18px,2vw,26px);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
}
.job-apply i{font-style:normal; transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.job:hover .job-apply i, .job-apply:focus-visible i{transform:translateX(7px)}
.job-apply:focus-visible{outline:2px solid var(--red); outline-offset:4px}

.jobs-foot{
  margin-top:clamp(28px,3.2vw,44px); padding-top:clamp(16px,1.8vw,24px);
  border-top:1px solid var(--rule);
}

/* ── stream chrome ─────────────────────────────────────────────────────────
   The blog on its own host. Not the marketing header: a line with the mark,
   where you are, and the way back. Everything else on the page is the post. */
.stream-chrome{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; padding:16px clamp(18px,4vw,56px);
  border-bottom:1px solid var(--rule); background:var(--bone2);
}
.stream-chrome-brand{
  display:inline-flex; align-items:center; gap:11px;
  color:var(--ink); text-decoration:none; font-size:15px; letter-spacing:-.01em;
}
.stream-chrome-brand b{font-weight:800}
.stream-chrome-brand span{color:var(--ink3)}
.stream-chrome-nav{display:flex; gap:clamp(14px,2vw,26px)}
.stream-chrome-nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink3); text-decoration:none;
}
.stream-chrome-nav a:hover{color:var(--red)}
.stream-chrome-foot{
  display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between;
  padding:clamp(26px,3vw,40px) clamp(18px,4vw,56px);
  border-top:1px solid var(--rule); background:var(--bone2);
  font-size:13px; color:var(--ink3);
}
.stream-chrome-foot a{color:var(--ink3)}
.stream-chrome-foot a:hover{color:var(--red)}

/* ─── timeline (HOW) ─── */
.how{padding-bottom:clamp(48px,5vw,80px)}
.how-head{
  display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(32px,4vw,72px);
  align-items:end; margin-bottom:clamp(48px,6vw,80px);
}
@media (max-width:820px){ .how-head{grid-template-columns:1fr} }
.timeline{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);
}
@media (max-width:820px){ .timeline{grid-template-columns:1fr} }
.step{
  padding:32px 24px;
  border-right:1px solid var(--rule);
  display:flex; flex-direction:column; gap:14px;
}
.step:last-child{border-right:none}
@media (max-width:820px){
  .step{border-right:none; border-bottom:1px solid var(--rule)}
  .step:last-child{border-bottom:none}
}
.step-week{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink4)}
.step-week .n{color:var(--red)}
.step-title{font-weight:800; font-size:clamp(24px,2.4vw,34px); letter-spacing:-.025em; line-height:1.1; margin:0}
.step-body{font-size:14px; line-height:1.5; color:var(--ink4); margin:0; max-width:34ch}
.step-art{
  margin-top:12px; height:80px;
  font-family:var(--mono); font-size:11px; color:var(--ink4);
  border:1px solid var(--rule);
  padding:10px 12px; display:flex; flex-direction:column; justify-content:space-between;
  background:transparent;
}

/* ─── guarantee strip ─── */
/* The promise closes section 01, and section 02 sits on exactly the same
   surface, so with nothing behind it the line floated in the middle of a grey
   field and the two sections ran straight into each other. It gets a plate of
   its own, inverted: a policy should read as a stamp pressed onto the page
   rather than as more page. The plate bleeds on the section's own margin, the
   same way the build steps above it do, so it closes the section across its
   full width. */
.guarantee{
  /* No change of surface. Two earlier attempts, an inverted plate and then the
     lightest tone in the section, both separated the promise by making it a
     different colour, and both were louder than a closing line needs to be.
     What marks it instead is the page's own drawing grid, the same 28px
     hairlines and 140px registration marks the summit sections carry, brought
     up behind this one block and dissolved at its edges. Same colour, different
     texture: the eye reads a change without the page changing tone. */
  position:relative;
  padding:clamp(30px,4vw,58px) var(--band-pad);
  margin-inline:calc(-1 * var(--band-pad));
  margin-top:clamp(18px,2.6vw,40px);
}
.guarantee::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle, var(--grid-dot) 1.2px, transparent 2px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 140px 140px, 140px 140px, 140px 140px, 28px 28px, 28px 28px;
  background-position: center;
  /* Densest under the line itself, gone before it reaches any edge, so the
     block has no border and nothing to line up with. */
  -webkit-mask-image: radial-gradient(ellipse 62% 108% at 26% 50%, #000 0%, #000 34%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 108% at 26% 50%, #000 0%, #000 34%, transparent 78%);
}
.guarantee-inner{position:relative; z-index:1}
.guarantee-tag{color:var(--ink4)}
.guarantee-inner{
  /* Nothing around it at all: no box, no rule. The line simply sits on the
     page at the section's own left edge. (A later duplicate of this rule used
     to put a full border back, plus a 3px red top in dark mode; it is gone.) */
  padding:0;
  display:grid; grid-template-columns:1fr; justify-items:start;
  gap:clamp(14px,1.6vw,22px);
}
.guarantee-tag{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase}
.guarantee-headline{
  font-weight:800; font-size:clamp(32px,4.2vw,60px);
  letter-spacing:-.032em; line-height:1.02; margin:0;
}
.guarantee-headline em{font-style:italic; font-weight:800; color:var(--red-plate, var(--red))}
/* ── typing ──────────────────────────────────────────────────────────────
   Every character is already in place and sized; only its ink is revealed, so
   the line never reflows and the caret never jumps. The rise is 0.14em rather
   than a fixed pixel value, so it scales with the clamped headline. */
.guarantee-headline .ch{
  opacity:0; transform:translateY(.14em);
  /* Short, because the scroll is driving: a long ease left the ink trailing
     behind the reader's thumb. */
  transition:opacity .09s ease, transform .09s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.guarantee-headline .ch.is-in{opacity:1; transform:none}
.guarantee-headline .caret{
  display:inline-block; width:.06em; height:.78em;
  margin-left:.06em; vertical-align:-.06em;
  background:var(--red-plate, var(--red)); opacity:0;
}
.guarantee-headline.is-typing .caret{opacity:1; animation:caret-blink 1s steps(1,end) infinite}
@keyframes caret-blink{0%,50%{opacity:1} 51%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .guarantee-headline .ch{opacity:1; transform:none; transition:none}
  .guarantee-headline .caret{display:none}
}

/* ─── built section shell ─── */
.built{padding-bottom:clamp(48px,5vw,80px)}

/* ─── terminal cards (shared: hero · workshop · stream) ─── */
.term-card{
  flex:0 0 clamp(240px, 22vw, 300px);
  scroll-snap-align:start;
  min-width:0;
}
.team.term .term-card *{ min-width:0; }
.team.term .term-host{
  font-size:11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Subtle scrollbar for desktop browsers that show one */
.team.term .term-grid::-webkit-scrollbar{ height:6px }
.team.term .term-grid::-webkit-scrollbar-thumb{ background:var(--ink3); border-radius:3px }
.team.term .term-grid::-webkit-scrollbar-track{ background:transparent }

/* Mobile: shrink the card a touch and let the wrap bleed full-width
   so swiping starts right at the screen edge. */
@media (max-width:640px){
  .team.term .wrap{ padding-left:clamp(16px,4vw,24px); padding-right:0; }
  .team.term .term-card{ flex:0 0 78vw; }
}

.term-card{
  background:var(--paper);
  border:1px solid var(--ink);
  display:flex; flex-direction:column;
  font-family:var(--mono);
  color:var(--ink2);
  overflow:hidden;
}
.term-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  border-bottom:1px solid var(--ink);
  background:var(--bone2);
}
.term-bar .dots{display:flex; gap:6px}
.term-bar .dots i{
  width:10px; height:10px; border-radius:50%;
  background:var(--ink3); display:block;
}
.term-bar .dots i:nth-child(1){background:var(--traffic-1)}
.term-bar .dots i:nth-child(2){background:var(--traffic-2)}
.term-bar .dots i:nth-child(3){background:var(--traffic-3)}
.term-host{font-size:11px; color:var(--ink3); letter-spacing:.04em}

.term-body{padding:16px 16px 18px; font-size:13px; line-height:1.7; flex:1}
.term-line{display:block; white-space:normal}
.term-line .sym{color:var(--red); margin-right:6px; font-weight:700}
.term-line .kw{color:var(--ink); font-weight:500}
.term-name{color:var(--ink); font-weight:600; margin:2px 0 4px}
.term-line .key{color:var(--ink3)}
.term-line .str{color:var(--red); font-weight:500}
.term-line .num{color:var(--ink); font-weight:600}
.term-comment{color:var(--ink3); font-style:italic}
/* The blinking cursor at the end of a terminal line. Scoped to the terminal:
   unscoped it was painting a 7px black block behind every element carrying the
   class, including the two chevrons in the header, which is why the nav read
   "SERVICES ■" rather than showing an arrow. */
.term-line .caret{
  display:inline-block; width:7px; height:1em; background:var(--ink);
  vertical-align:-2px; animation:blink 1s steps(1) infinite;
}

/* ─── CTA / contact ─── */
.cta{padding:clamp(48px,6vw,96px) 0}
.cta-inner{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center}
@media (max-width:820px){ .cta-inner{grid-template-columns:1fr} }
.cta h2 em{font-style:italic; font-weight:800; color:var(--red)}
.cta-headline{font-size:clamp(40px, 4.8vw, 80px); text-wrap:balance}
.cta-side{display:flex; flex-direction:column; gap:24px}
.cta-card{
  border:1px solid var(--ink); padding:24px;
  display:flex; flex-direction:column; gap:14px;
  background:var(--paper);
  position:relative;
}
.cta-card--primary .cta-card-tag{color:var(--red); font-weight:600}
.cta-card--primary h3{font-size:30px; letter-spacing:-.025em}
.cta-card--primary::after{
  content:""; position:absolute; top:-1px; left:-1px; right:-1px;
  height:3px; background:var(--red);
  display:none;
}
[data-theme="dark"] .cta-card--primary::after{display:block}
.cta-card--ghost{background:transparent}
.cta-card-tag{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3)}
.cta-card h3{margin:0; font-weight:800; font-size:24px; letter-spacing:-.02em}
.cta-card p{margin:0; font-size:14px; line-height:1.5; color:var(--ink3)}
.cta-card .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.cta-card--primary{
  background:var(--paper);
  border:1px solid var(--ink);
}
.cta-card--primary h3{color:var(--ink)}
.cta-card--primary p{color:var(--ink2)}
.email-line{font-family:var(--mono); font-size:13px; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px; text-decoration:none}

/* ─── footer ─── */
.footer{background:var(--bone2); color:var(--ink); padding:clamp(48px,6vw,96px) 0 32px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:clamp(24px,3vw,48px)}
.footer-brand{display:flex; flex-direction:column; gap:18px}
.footer-brand .display-sm{font-weight:800; font-size:48px; letter-spacing:-.04em; line-height:1}
.footer-brand .display-sm em{color:var(--red); font-style:normal}
.footer-brand p{margin:0; max-width:34ch; color:var(--ink4); font-size:14px; line-height:1.5}
.footer h5{margin:0 0 14px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink4); font-weight:500}
.footer ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:14px}
.footer ul a{text-decoration:none; opacity:.8; transition:opacity .15s, color .15s}
.footer ul a:hover{opacity:1; color:var(--red)}
.footer-bottom{
  margin-top:clamp(48px,6vw,80px); padding-top:24px;
  border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink4);
}
.footer-bottom .ver{color:var(--red)}

/* ─── footer · tablet ─── */
@media (max-width:820px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px}
}

/* ─── footer · mobile (tighter, smaller, single column) ─── */
@media (max-width:560px){
  .footer{padding:40px 0 24px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:22px 18px}
  .footer-brand{grid-column:1 / -1; gap:10px; margin-bottom:4px}
  .footer-brand > div:first-child{gap:10px !important}
  .footer-brand svg{width:32px !important}
  .footer-brand .display-sm{font-size:28px}
  .footer-brand p{font-size:12px; line-height:1.45; max-width:36ch}
  .footer h5{margin:0 0 8px; font-size:9.5px; letter-spacing:.16em}
  .footer h5::before{width:4px; height:4px; margin-right:6px}
  .footer ul{gap:5px; font-size:12.5px}
  .footer-bottom{
    margin-top:32px; padding-top:16px; gap:6px;
    flex-direction:column; align-items:flex-start;
    font-size:9.5px; letter-spacing:.12em;
  }
}


/* ─── theme toggle ─── */
/* Same object as the theme toggle: a bordered square at the end of the bar,
   not a fifth item in the nav. It was reading as a destination. */
.lang-switch .nav-trigger{
  height:32px; padding:0 9px; gap:5px; opacity:1;
  border:1px solid var(--ink); color:var(--ink);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  transition:background .15s, color .15s;
}
.lang-switch:hover .nav-trigger,
.lang-switch:focus-within .nav-trigger{background:var(--ink); color:var(--bone)}
.lang-switch .nav-trigger .caret svg{width:8px; height:5px}
/* On phones the bar already carries the CTA, the theme toggle and the burger,
   and the mobile menu carries its own language switcher. A fourth control
   there would be the same choice offered twice, ten pixels apart. */
@media (max-width:820px){ .lang-switch{display:none} }
/* Anchored to its right edge rather than centred on it: centred, the panel
   hung off the side of the page. */
.lang-switch .nav-dropdown{left:auto; right:0; min-width:150px; transform:translateY(-6px)}
.lang-switch:hover .nav-dropdown,
.lang-switch:focus-within .nav-dropdown{transform:translateY(0)}

.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  cursor:pointer; font-family:var(--mono); font-size:12px; line-height:1;
  transition:background .15s, color .15s, border-color .15s;
  position:relative; flex-shrink:0;
}
.theme-toggle:hover{background:var(--ink); color:var(--bone)}
.theme-toggle .sun, .theme-toggle .moon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .2s ease, transform .2s ease;
}
.theme-toggle .moon{opacity:0; transform:rotate(-30deg)}
[data-theme="dark"] .theme-toggle .sun{opacity:0; transform:rotate(30deg)}
[data-theme="dark"] .theme-toggle .moon{opacity:1; transform:rotate(0)}
.theme-toggle .sun svg, .theme-toggle .moon svg{width:16px; height:16px; display:block}

/* ─── built - section head ─── */
.built-head{margin-bottom:clamp(28px,3vw,40px)}

/* ─── alternating sections ─── */
section, footer.footer{ background:var(--bone) }
.hero          { background:var(--bone) }
section#what   { background:var(--bone2) }
section#how    { background:var(--bone) }
section#built  { background:var(--bone2) }
section#team   { background:var(--bone) }
section#contact{ background:var(--bone2) }
footer.footer  { background:var(--bone) }

/* Card surfaces should pop against their section */
section#what  .three   { background:var(--bone) }
section#contact .cta-card{ background:var(--bone) }
section#contact .cta-card--ghost{ background:transparent }

/* Hover surfaces - bump one step further */
section#what .three:hover{ background:var(--paper) }


/* ─── more red accents (both modes) ─── */

/* Section marker red bullet */
.marker::before{
  content:""; width:8px; height:8px; background:var(--red);
  transform:rotate(45deg);
  opacity:1; border-radius:0;
}

/* Hero terminal: cursor + prompt in red is good, but bump $ to red bold consistently */

/* Underline 'AI' in hero (h1 first 'AI' word) gets red */
.hero h1 .ai-accent{
  color:var(--red); font-style:italic; font-weight:800;
}

/* Mono "v3.0 / 2026" style elements get red */
.footer-bottom .ver{color:var(--red); font-weight:600}

/* Section index numbers - slightly bolder */
.marker .n{color:var(--red); font-weight:700}

/* Three-cards verb line in red */

/* Step week label - red W## */
.step-week{color:var(--ink3)}
.step-week .n{color:var(--red); font-weight:700; letter-spacing:.18em}

/* Case grid border + cells (let red gridline subtly read) */
.case-tag .live{color:var(--red)}

/* Member tag dot already red - bump pulse */

/* Footer header dot accent */
.footer h5::before{
  content:""; display:inline-block;
  width:5px; height:5px; background:var(--red); margin-right:8px;
  vertical-align:2px;
}

/* CTA recommended top strip already red - good */

/* H2 'em' across page is red (consistency) */
.h2 em, .display em{color:var(--red); font-style:italic}


/* ─── inline red highlights ─── */
em.r{
  font-style:normal;
  color:var(--red);
  font-weight:500;
}
.lead em.r{font-weight:600}


/* ─── BLOG / STREAM ─── */
.nav .is-current{opacity:1; color:var(--red)}
.nav .is-current .idx{color:var(--red)}

.stream-hero{padding:128px 0 56px; position:relative}
.stream-head{
  display:grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .9fr);
  gap:clamp(32px,5vw,72px); align-items:start;
  padding-bottom:clamp(36px,4vw,56px);
  border-bottom:1px solid var(--rule);
}
.stream-head .h2{margin-bottom:28px}
.stream-head .h2 .quiet{color:var(--ink3); font-weight:400; font-style:italic}
.stream-head-main{display:flex; flex-direction:column; gap:6px}
.stream-head-term{width:100%; max-width:none}
.stream-head-term .term-body{padding:16px 18px 18px}
.stream-head-term .term-line{margin-bottom:2px}
.stream-head-term .term-line strong{font-weight:700; color:var(--red)}
@media (max-width:900px){
  .stream-head{grid-template-columns:1fr}
}

.stream-filters{
  margin-top:clamp(28px,3vw,40px);
  display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,56px);
  align-items:center;
}
.filter-group{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.filter-label{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink4); margin-right:6px;
}
.filter-label::before{
  content:""; display:inline-block;
  width:5px; height:5px; background:var(--red);
  margin-right:8px; vertical-align:2px;
}
.chip{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  padding:8px 14px; border:1px solid var(--rule);
  background:transparent; color:var(--ink2);
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.is-active{
  background:var(--ink); color:var(--bone); border-color:var(--ink);
}

/* ── stream list ── */
.stream{padding:0 0 clamp(64px,8vw,112px)}
.stream .wrap{display:flex; flex-direction:column}

/* ─── featured (top dispatch) ─── */
.dispatch--featured{
  display:block; padding:0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  margin-bottom:clamp(48px,5vw,72px);
}
.featured-card{
  display:grid; grid-template-columns: 1fr 1fr; gap:0;
  text-decoration:none; color:inherit;
  align-items:stretch; min-height:480px;
}
@media (max-width:900px){
  .featured-card{grid-template-columns:1fr}
}
.featured-thumb{
  background:var(--red); color:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(24px,3vw,40px); position:relative; overflow:hidden;
}
.featured-thumb::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.06) 0 1px,
      transparent 1px 14px);
  pointer-events:none;
}
.featured-tag{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  opacity:.95; z-index:1;
}
.featured-num{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(140px,18vw,260px); letter-spacing:-.06em;
  line-height:.8; align-self:flex-end;
  color:#fff; opacity:.96; z-index:1;
}
.featured-cap{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  opacity:.9; z-index:1;
}
.featured-body{
  padding:clamp(28px,3vw,48px);
  display:flex; flex-direction:column; gap:18px;
  background:var(--paper);
  border-left:1px solid var(--rule);
}
@media (max-width:900px){
  .featured-body{border-left:none; border-top:1px solid var(--rule)}
}
.featured-meta{
  display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink3);
}
.featured-meta .sep{opacity:.4}
.featured-meta .d-num-inline{color:var(--red); font-weight:700}
.featured-title{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(28px, 3.4vw, 52px);
  letter-spacing:-.035em; line-height:1.02;
  margin:6px 0 4px; color:var(--ink);
  text-wrap:pretty;
}
.featured-title em.r{color:var(--red); font-style:italic; font-weight:800}
.featured-summary{
  margin:0; color:var(--ink3);
  font-size:16px; line-height:1.55; max-width:54ch;
}
.featured-card .dispatch-cta{margin-top:auto; padding-top:14px}
.featured-card:hover .featured-title{color:var(--red)}
.featured-card:hover .featured-num{transform:translate(4px,-4px)}
.featured-num{transition:transform .25s ease}
/* hero image as cover; the number renders only when no image exists */
.featured-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.featured-thumb.has-img{min-height:280px}
.featured-thumb.has-img::after{
  /* readability scrim over the photo instead of the diagonal hatch */
  background:linear-gradient(180deg, rgba(10,10,12,.55), rgba(10,10,12,0) 32%, rgba(10,10,12,0) 62%, rgba(10,10,12,.55));
}
.featured-card:hover .featured-img{transform:scale(1.03)}

/* ─── list head ─── */
.stream-list-head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:18px; border-bottom:1px solid var(--ink);
  margin-bottom:0;
}
.stream-list-head .marker{padding-top:0; margin:0}
.stream-list-count{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink4);
}

/* ─── compact dispatch list (2-col) ─── */
.stream-list{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0;
  border-bottom:1px solid var(--rule);
}
@media (max-width:760px){
  .stream-list{grid-template-columns:1fr}
}

.dispatch{
  display:flex; flex-direction:column;
  gap:12px;
  padding:clamp(20px,2vw,28px) clamp(20px,2vw,28px);
  border-top:1px solid var(--rule);
  border-right:1px solid var(--rule);
  position:relative;
  transition:background .15s ease;
}
.stream-list .dispatch:nth-child(2n){border-right:none}
@media (max-width:760px){
  .stream-list .dispatch{border-right:none}
}
.dispatch:hover{background:var(--paper)}

.dispatch-meta{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink4); padding-bottom:2px;
}
.dispatch-meta .d-date{
  font-size:10px; font-weight:600; color:var(--ink2);
  letter-spacing:.14em;
}
.dispatch-meta .d-time{color:var(--ink4); font-size:10px}
.dispatch-meta .d-num{
  margin-left:auto;
  color:var(--red); font-weight:700; letter-spacing:.2em;
  padding:0; border:none; font-size:10px;
}
.dispatch-meta .d-num br{display:none}
.dispatch-meta .d-read{
  padding:3px 7px; border:1px solid var(--rule);
  color:var(--ink3); font-weight:500;
  font-size:9px; letter-spacing:.16em;
}

.dispatch-card{
  display:grid; grid-template-columns: 84px minmax(0, 1fr);
  gap:16px;
  text-decoration:none; color:inherit;
  align-items:start;
}
.dispatch-card > .dispatch-thumb{grid-row:1 / span 3}
.dispatch-card > .dispatch-tags,
.dispatch-card > .dispatch-title,
.dispatch-card > .dispatch-cta{grid-column:2}

.dispatch-thumb{
  width:84px; height:84px; aspect-ratio:1;
  background:var(--bone2); color:var(--ink);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:8px 9px; position:relative; overflow:hidden;
  border:1px solid var(--rule);
  flex-shrink:0;
}
.thumb-num{
  font-family:var(--sans); font-weight:800;
  font-size:32px; letter-spacing:-.04em;
  line-height:.85; align-self:flex-end;
  color:inherit; opacity:.92;
}
.thumb-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.dispatch-card:hover .thumb-img{transform:scale(1.06)}
.thumb-cap{display:none}

/* thumb tone variants - keep same palette, smaller scale */
.dispatch[data-tone="red"]   .dispatch-thumb{background:var(--red); color:#fff; border-color:var(--red)}
.dispatch[data-tone="ink"]   .dispatch-thumb{background:var(--ink); color:var(--bone); border-color:var(--ink)}
.dispatch[data-tone="ink"]   .thumb-num{color:var(--red); opacity:1}
.dispatch[data-tone="bone"]  .dispatch-thumb{background:var(--bone2); color:var(--ink)}
.dispatch[data-tone="grid"]  .dispatch-thumb{
  background:
    linear-gradient(var(--rule) 1px, transparent 1px) 0 0/14px 14px,
    linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0/14px 14px,
    var(--paper);
  color:var(--ink);
}
.dispatch[data-tone="grid"]  .thumb-num{color:var(--red); opacity:.92}
.dispatch[data-tone="stripe"] .dispatch-thumb{
  background:
    repeating-linear-gradient(135deg,
      var(--ink) 0 1px,
      transparent 1px 7px),
    var(--bone);
  color:var(--ink);
}
.dispatch[data-tone="stripe"] .thumb-num{color:var(--red); opacity:1}

.dispatch-tags{
  display:flex; flex-wrap:wrap; gap:4px; margin:0 0 6px;
}
.dispatch--featured .dispatch-tags{margin-bottom:2px}
.tag{
  font-family:var(--mono); font-size:9px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink3);
  padding:3px 7px; border:1px solid var(--rule);
  background:transparent;
}
.dispatch--featured .tag{font-size:10px; padding:4px 9px; letter-spacing:.18em}

.dispatch-title{
  font-family:var(--sans); font-weight:700;
  font-size:16px; letter-spacing:-.015em; line-height:1.22;
  margin:0 0 6px; color:var(--ink);
  transition:color .15s;
  text-wrap:balance;
}
.dispatch-summary{display:none}
.dispatch-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink3); padding-top:0;
  border-top:none; align-self:flex-start;
}
.dispatch-cta .ar{transition:transform .15s ease}
.dispatch-card:hover .dispatch-title{color:var(--red)}
.dispatch-card:hover .dispatch-cta{color:var(--red)}
.dispatch-card:hover .dispatch-cta .ar{transform:translateX(4px)}
.dispatch-card:hover .dispatch-thumb{transform:translateY(-2px)}
.dispatch-thumb{transition:transform .2s ease}

/* featured keeps its full summary + bigger CTA */
.dispatch--featured .dispatch-cta{
  font-size:11px; color:var(--ink);
  border-top:1px solid var(--ink); padding-top:12px;
}
.dispatch--featured .dispatch-cta:hover,
.featured-card:hover .dispatch-cta{color:var(--red); border-color:var(--red)}

@media (max-width:760px){
  .dispatch-card{grid-template-columns: 64px minmax(0,1fr); gap:12px}
  .dispatch-thumb{width:64px; height:64px}
  .thumb-num{font-size:24px}
}

/* ── load more ── */
.stream-more{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding-top:clamp(40px,5vw,64px);
}
.stream-more-meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink4);
}
.stream-more-meta strong{color:var(--ink); font-weight:700}

/* page-specific section bg alternation for blog */
body[data-page="blog"] .stream-hero{background:var(--bone)}
body[data-page="blog"] .stream{background:var(--bone)}


/* ─── PLAYGROUND PAGE - terminal browser ─── */
body[data-page="playground"]{background:var(--bone2)}

.pg-shell{
  padding:104px 0 clamp(40px,5vw,72px);
  min-height:calc(100vh - 80px);
}

/* outer terminal card */
.pg-term{
  width:100%; max-width:none;
  margin:0;
  border:1px solid var(--ink);
  background:var(--paper);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.pg-term-bar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid var(--ink);
}
.pg-term-bar .term-host{
  text-align:center;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink3);
}
.pg-meta-stamp{
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.18em; color:var(--red);
}

.pg-term-body{
  background:var(--paper);
  color:var(--ink);
  padding:clamp(20px,3vw,36px);
  font-family:var(--mono); font-size:13px; line-height:1.7;
}
[data-theme="dark"] .pg-term-body{background:#101012}
[data-theme="dark"] .pg-term{border-color:#2a2a2e}
[data-theme="dark"] .pg-term-bar{border-bottom-color:#2a2a2e; background:#101012}

/* 2-col split: cli + preview */
.pg-term-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr);
  gap:clamp(20px,3vw,40px);
  align-items:start;
}
@media (max-width:1080px){
  .pg-term-grid{grid-template-columns:1fr}
}

/* ── CLI column ── */
.pg-cli{
  display:flex; flex-direction:column; gap:4px;
}
.pg-line{
  white-space:normal;
  display:block;
}
.pg-boot{color:var(--ink3)}
.pg-boot .ok{
  display:inline-block;
  color:var(--red); font-weight:700;
  margin-right:10px;
}
[data-theme="dark"] .pg-boot .ok{color:#7CFF6E}
.pg-hint{
  color:var(--ink2);
  margin:14px 0 18px;
  font-weight:500;
}
.pg-meta{color:var(--ink4); padding-left:0}

.pg-prompt{
  display:flex; align-items:center; gap:2px; margin:6px 0;
}
.pg-prompt .user{color:var(--ink); font-weight:600}
[data-theme="dark"] .pg-prompt .user{color:#fff}
.pg-prompt .sep{color:var(--ink3); margin:0 1px}
.pg-prompt .path{color:var(--red); font-weight:600; margin-right:6px}
.pg-prompt .dollar{color:var(--red); font-weight:700; margin-right:8px}
.pg-prompt .cmd{color:var(--ink)}
[data-theme="dark"] .pg-prompt .cmd{color:#fff}

.pg-prompt--tail{margin-top:18px}
.pg-prompt--tail .caret{
  display:inline-block; width:8px; height:14px;
  background:var(--red);
  vertical-align:-2px; margin-left:4px;
  animation:blink 1s steps(1) infinite;
}

/* table */
.pg-table{
  display:flex; flex-direction:column;
  margin:14px 0 0;
}
.pg-thead{
  display:grid;
  grid-template-columns: 110px 50px 110px minmax(180px, 1.1fr) minmax(0, 1.6fr);
  gap:18px;
  padding:0 0 8px;
  color:var(--ink4);
  font-size:11px; letter-spacing:.04em;
  border-bottom:1px solid var(--rule);
}

.pg-row{
  display:grid;
  grid-template-columns: 110px 50px 110px minmax(180px, 1.1fr) minmax(0, 1.6fr);
  gap:18px;
  padding:5px 0;
  text-decoration:none;
  border-left:2px solid transparent;
  padding-left:10px; margin-left:-12px;
  transition:background .12s ease, border-color .12s ease;
  cursor:pointer;
}
.pg-row:hover,
.pg-row.is-active,
.pg-row:focus{
  background:var(--bone);
  border-left-color:var(--red);
  outline:none;
}
[data-theme="dark"] .pg-row:hover,
[data-theme="dark"] .pg-row.is-active,
[data-theme="dark"] .pg-row:focus{
  background:rgba(255,255,255,.04);
}

.pg-row .perm,
.pg-row .size,
.pg-row .mod{color:var(--ink4)}
.pg-row .name{
  color:var(--red);
  font-weight:600;
}
.pg-row .name i{
  font-style:normal; color:var(--ink4); font-weight:400;
  margin-left:1px;
}
.pg-row .desc{
  color:var(--ink2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-theme="dark"] .pg-row .desc{color:#D6D8DB}

/* responsive table → stacked rows on small */
@media (max-width:760px){
  .pg-thead{display:none}
  .pg-row{
    grid-template-columns: 1fr;
    gap:2px;
    padding:10px 12px;
  }
  .pg-row .perm,
  .pg-row .size,
  .pg-row .mod{display:none}
  .pg-row .desc{white-space:normal}
}

/* ── PREVIEW column ── */
.pg-preview{
  position:sticky; top:96px;
  display:grid;
  align-items:start;
}
.pg-preview-card{
  grid-area:1 / 1;
  opacity:0; visibility:hidden;
  transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease;
  display:flex; flex-direction:column; gap:12px;
}
.pg-preview-card.is-active{
  opacity:1; visibility:visible;
  transform:translateY(0);
}

.pg-preview-empty{
  border:1px dashed var(--rule);
  padding:48px 20px;
  text-align:center;
  display:flex; flex-direction:column; gap:10px; align-items:center;
  background:var(--bone);
}
[data-theme="dark"] .pg-preview-empty{background:rgba(255,255,255,.02)}
.pg-preview-glyph{
  display:inline-block;
  width:44px; height:44px;
  font-size:24px; line-height:44px;
  color:var(--red);
  border:1px solid var(--rule);
}
.pg-preview-hint{
  margin:0; font-family:var(--mono); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink4);
}

.pg-preview-frame{
  position:relative;
  aspect-ratio: 4 / 3;
  padding:18px;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  background:var(--bone); color:var(--ink);
  border:1px solid var(--rule);
}
.pg-preview-frame[data-tone="red"]    {background:var(--red); color:#fff; border-color:var(--red)}
.pg-preview-frame[data-tone="ink"]    {background:#1a1c20; color:#fff; border-color:#1a1c20}
.pg-preview-frame[data-tone="bone"]   {background:var(--bone); color:var(--ink)}
.pg-preview-frame[data-tone="grid"]{
  background:
    linear-gradient(var(--rule) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0/22px 22px,
    var(--paper);
}
.pg-preview-frame[data-tone="stripe"]{
  background:
    repeating-linear-gradient(135deg,
      var(--ink) 0 1px,
      transparent 1px 10px),
    var(--bone);
}

.pg-preview-num{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.22em; font-weight:700;
  color:inherit; opacity:.85;
}
.pg-preview-name{
  font-family:var(--mono); font-size:13px;
  letter-spacing:.04em; font-weight:600;
  color:inherit; opacity:.95;
  align-self:flex-start; margin-top:-4px;
}

.pg-preview-art{
  position:absolute; inset:50px 18px 18px;
  display:flex; align-items:center; justify-content:center;
}

/* ── per-preview art ── */
.pg-art--trail{
  align-items:center; justify-content:center; gap:6px;
}
.pg-art--trail span{
  width:34px; height:34px;
  background:currentColor; opacity:.18;
  border-radius:50%;
  transform:translateY(0);
}
.pg-art--trail span:nth-child(1){opacity:.5}
.pg-art--trail span:nth-child(2){opacity:.4; transform:translateY(-6px)}
.pg-art--trail span:nth-child(3){opacity:.3; transform:translateY(-14px)}
.pg-art--trail span:nth-child(4){opacity:.2; transform:translateY(-24px)}
.pg-art--trail span:nth-child(5){opacity:.1; transform:translateY(-34px)}

.pg-art--scrub{
  flex-direction:column; align-items:stretch; gap:8px;
}
.pg-art--scrub .track{
  height:6px; background:currentColor; opacity:.2;
  position:relative;
}
.pg-art--scrub .head{
  position:absolute; left:42%; top:-4px;
  width:14px; height:14px; background:var(--red);
}
.pg-art--scrub .frame{
  height:18px; background:currentColor; opacity:.12;
}
.pg-art--scrub .f2{opacity:.22}
.pg-art--scrub .f3{opacity:.32}

.pg-art--logo{flex-direction:column; gap:10px; color:#fff}
.pg-art--logo svg{width:60%; max-width:160px}
.pg-art-cap{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.22em; opacity:.85;
}

.pg-art--invoice{
  flex-direction:column; align-items:stretch; gap:4px;
  font-family:var(--mono); font-size:10px;
  padding:6px; width:100%;
}
.inv-mock-h{
  font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); margin-bottom:4px;
}
.inv-mock-rule{border-top:1px dashed currentColor; margin:2px 0; opacity:.5}
.inv-mock-row{
  display:flex; justify-content:space-between;
  color:var(--ink2); padding:2px 0;
}
.inv-mock-total{
  display:flex; justify-content:space-between;
  font-weight:700; padding-top:4px;
}
.inv-mock-total .r{color:var(--red)}

.pg-art--crm{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:6px; align-items:stretch; width:100%;
  font-family:var(--mono);
}
.crm-col{display:flex; flex-direction:column; gap:4px}
.crm-h{
  font-size:9px; letter-spacing:.2em; font-weight:700;
  color:rgba(255,255,255,.6); padding-bottom:2px;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.crm-card{
  font-size:9px; padding:5px 6px;
  background:rgba(255,255,255,.08); color:#fff;
  border-left:2px solid rgba(255,255,255,.3);
  line-height:1.2;
}
.crm-card--r{border-left-color:var(--red)}
.crm-done{opacity:.5; text-decoration:line-through}

.pg-art--cv{
  flex-direction:column; align-items:flex-start; gap:3px;
  width:100%; padding:4px 6px; font-family:var(--mono); font-size:10px;
}
.cv-name{font-weight:700; font-size:13px; color:var(--ink); letter-spacing:-.01em}
.cv-role{color:var(--ink3); font-size:10px}
.cv-rule{height:1px; background:var(--ink); width:100%; margin:4px 0; opacity:.6}
.cv-row{
  display:flex; gap:10px; color:var(--ink2); font-size:9px;
  width:100%;
}
.cv-row span:first-child{color:var(--red); font-weight:600; min-width:55px}

.pg-art--rag{
  flex-direction:column; align-items:stretch; gap:5px;
  width:100%; font-family:var(--mono); font-size:9.5px;
}
.rag-msg{
  padding:4px 8px;
  background:rgba(0,0,0,.04);
  border-left:2px solid var(--ink3);
  color:var(--ink2); line-height:1.4;
}
.rag-msg--in{border-left-color:var(--red)}
.rag-msg--out{background:rgba(0,0,0,.08); color:var(--ink)}
.rag-msg em{color:var(--red); font-style:normal; font-size:8px}
.rag-loading{color:var(--ink4); letter-spacing:.4em}

/* preview meta list */
.pg-preview-meta{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
  border:1px solid var(--rule);
}
.pg-preview-meta li{
  display:flex; justify-content:space-between;
  padding:7px 12px;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:11px;
}
.pg-preview-meta li:last-child{border-bottom:none}
.pg-preview-meta .k{
  color:var(--ink4); letter-spacing:.18em;
  text-transform:uppercase; font-size:10px;
}
.pg-preview-meta .v{color:var(--ink); font-weight:600}
.pg-preview-meta .v.r{color:var(--red)}

/* below-terminal note */
.pg-foot-note{
  margin:clamp(20px,3vw,32px) 0 0;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink4); text-align:center;
}
.pg-foot-note a{
  color:var(--red); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:1px;
}


/* ─── WORKSHOP PAGE ─── */
body[data-page="workshop"]{background:var(--bone)}

.ws-hero{padding:128px 0 40px; position:relative}
.ws-hero .display{font-size:clamp(40px, 6.5vw, 96px)}
/* Same overflow problem as the home hero (see .hero h1.display above): the
   German lines are long enough ("Sitzungszimmer.") to paint over .hero-side.
   Only DE needs it here - the other languages still clear by 75px+. */
@media (min-width:901px){
  .ws-hero .display:lang(de){font-size:clamp(40px, 5.1vw, 75px)}
  .ws-hero .display:lang(fr){font-size:clamp(36px, 5.2vw, 78px)}
}
.ws-hero .hero-main{min-height:auto; gap:clamp(28px,4vw,48px)}
.ws-hero .hero-foot{padding-top:24px}

.ws-section{
  padding:clamp(40px,5vw,72px) 0;
  border-top:1px solid var(--rule);
}
.ws-section .marker{margin-bottom:clamp(16px,2vw,28px); padding-top:0}

.ws-briefing  { background:var(--bone2) }
.ws-workshop  { background:var(--bone) }
.ws-verticals { background:var(--bone2) }
.ws-cobuild   { background:var(--bone) }
.ws-cobuild .marker::before{background:currentColor; opacity:.5}
.ws-cobuild .h2 em,
.ws-cobuild .lead em.r{color:var(--red)}
.ws-cta{ background:var(--bone2) }

/* head block (h2 + lead) */
.ws-head{
  display:grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap:clamp(28px,4vw,72px); align-items:end;
  margin-bottom:clamp(28px,3vw,48px);
}
.ws-head .h2{margin:0; font-size:clamp(32px,4vw,60px)}
.ws-head em{font-style:italic; font-weight:800; color:var(--red)}
.ws-head .lead{margin:0; padding-bottom:6px; font-size:clamp(16px,1.3vw,19px)}
@media (max-width:820px){ .ws-head{grid-template-columns:1fr} }

/* specs row (briefing) */
.ws-specs{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; border:1px solid var(--rule);
  margin-bottom:clamp(20px,3vw,32px);
}
@media (max-width:820px){ .ws-specs{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .ws-specs{grid-template-columns:1fr} }
.ws-spec{
  padding:16px 18px;
  border-right:1px solid var(--rule);
  display:flex; flex-direction:column; gap:4px;
  background:var(--paper);
}
.ws-spec:last-child{border-right:none}
@media (max-width:820px){
  .ws-spec{border-right:1px solid var(--rule); border-bottom:1px solid var(--rule)}
  .ws-spec:nth-child(2n){border-right:none}
}
.ws-spec-k{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink4);
}
.ws-spec-v{
  font-family:var(--sans); font-weight:700;
  font-size:18px; color:var(--ink);
  letter-spacing:-.01em;
}
.ws-spec-v em.r{color:var(--red); font-style:italic; font-weight:800}
.ws-spec--price{background:var(--red); color:#fff; border-color:var(--red)}
.ws-spec--price .ws-spec-k{color:#fff; opacity:.85}
.ws-spec--price .ws-spec-v{color:#fff}
.ws-spec--price .ws-spec-v em.r{color:#fff; font-weight:800}

.ws-foot{margin-top:clamp(20px,3vw,32px)}

/* coverage list - two-column compact (workshop section) */
.ws-coverage{
  list-style:none; padding:0; margin:0 0 clamp(20px,3vw,32px);
  display:grid; grid-template-columns:1fr; gap:0;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  background:var(--paper);
}
.ws-coverage--two{grid-template-columns:1fr 1fr}
@media (max-width:760px){ .ws-coverage--two{grid-template-columns:1fr} }
.ws-coverage li{
  display:flex; gap:14px; align-items:baseline;
  padding:14px 20px;
  border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
  font-size:15px; line-height:1.35; color:var(--ink2);
}
.ws-coverage--two li:nth-child(2n){border-right:none}
@media (max-width:760px){
  .ws-coverage--two li{border-right:none}
}
.ws-coverage li:last-child,
.ws-coverage--two li:nth-last-child(-n+2){border-bottom:none}
.ws-bullet{
  color:var(--red); font-family:var(--mono); font-weight:700;
  font-size:11px; letter-spacing:.18em;
  flex-shrink:0;
}

/* price strip - tighter, red accent */
.ws-price{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:18px;
  padding:14px 22px; border:1px solid var(--red);
  background:var(--red); color:#fff;
}
.ws-price-k{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:#fff; opacity:.9;
  flex:1; min-width:180px;
}
.ws-price-v{
  font-family:var(--sans); font-size:clamp(24px,2.6vw,34px);
  font-weight:800; letter-spacing:-.025em; color:#fff;
}
.ws-price-v strong{color:#fff; font-weight:800}
.ws-price-note{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:#fff; opacity:.8;
}

/* verticals - compact, no descriptions */
.vert-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; border:1px solid var(--ink);
  background:var(--ink);
  margin-bottom:clamp(20px,3vw,32px);
}
@media (max-width:1080px){ .vert-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){  .vert-grid{grid-template-columns:1fr} }
.vert{
  background:var(--paper); padding:20px 18px 18px;
  display:flex; flex-direction:column; gap:10px;
  border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
  transition:background .15s ease;
  position:relative;
  min-height:140px;
}
.vert:hover{background:var(--bone)}
.vert:hover .vert-name{color:var(--red)}
.vert-grid > .vert:nth-child(4n){border-right:none}
.vert-grid > .vert:nth-last-child(-n+4){border-bottom:none}
@media (max-width:1080px){
  .vert-grid > .vert{border-right:1px solid var(--ink); border-bottom:1px solid var(--ink)}
  .vert-grid > .vert:nth-child(2n){border-right:none}
  .vert-grid > .vert:nth-last-child(-n+2){border-bottom:none}
}
@media (max-width:560px){
  .vert-grid > .vert{border-right:none}
  .vert-grid > .vert:last-child{border-bottom:none}
}
.vert-num{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.22em; color:var(--red);
}
.vert-name{
  font-family:var(--sans); font-weight:800;
  font-size:22px; letter-spacing:-.02em; color:var(--ink);
  line-height:1.05; transition:color .15s;
}
.vert-tags{
  list-style:none; padding:0; margin:auto 0 0;
  display:flex; flex-wrap:wrap; gap:5px;
}
.vert-tags li{
  font-family:var(--mono); font-size:9px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink3);
  padding:3px 7px; border:1px solid var(--rule);
}

/* co-build */
.ws-head--cobuild .h2 em{color:var(--red)}
.cobuild-steps{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
@media (max-width:820px){ .cobuild-steps{grid-template-columns:1fr} }
.cobuild-steps li{
  padding:22px 18px 20px;
  border-right:1px solid var(--rule);
  display:flex; flex-direction:column; gap:10px;
}
.cobuild-steps li:last-child{border-right:none}
@media (max-width:820px){
  .cobuild-steps li{border-right:none; border-bottom:1px solid var(--rule)}
  .cobuild-steps li:last-child{border-bottom:none}
}
.cb-num{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.22em; color:var(--red);
}
.cobuild-steps p{margin:0; font-size:15px; line-height:1.35; color:var(--ink); font-weight:500}
.cobuild-steps em.r{color:var(--red); font-style:italic; font-weight:700}
.ws-cobuild .ws-foot{margin-top:clamp(22px,3vw,32px)}

/* CTA - single row */
.ws-cta{padding:clamp(40px,5vw,72px) 0; border-top:1px solid var(--rule)}
.ws-cta-row{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(20px,3vw,40px);
  padding:clamp(20px,3vw,32px) 0;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
}
.ws-cta-tag{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink3);
  display:inline-block; margin-bottom:8px;
}
.ws-cta .h2{margin:0; font-size:clamp(28px,3.6vw,48px)}
.ws-cta .h2 em{font-style:italic; color:var(--red); font-weight:800}
.ws-cta-row > div{flex:1; min-width:240px}
.ws-cta-mail{
  font-family:var(--mono); font-size:14px;
  color:var(--ink); border-bottom:1px solid var(--ink);
  padding-bottom:2px; text-decoration:none;
}
.ws-cta-mail:hover{color:var(--red); border-color:var(--red)}
/* ═══════ BLOG DETAIL (dispatch page) ═══════ */
.post-crumbs{
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink4);
  margin-bottom:clamp(20px,3vw,32px);
}
.post-crumbs a{
  color:var(--ink4); text-decoration:none;
  transition:color .15s;
}
.post-crumbs a:hover{color:var(--red)}
.post-crumbs .sep{color:var(--ink4); opacity:.6}
.post-crumbs .here{color:var(--red); font-weight:600}


/* ═══════ BLOG POST ═══════ */
body[data-page="post"]{background:var(--bone)}

.post-hero{
  padding:128px 0 clamp(32px,4vw,56px);
  background:var(--bone);
  border-bottom:1px solid var(--rule);
}
.post-hero .wrap{max-width:1100px}

.post-tags{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:clamp(18px,2.5vw,28px);
}
.post-tags .tag{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink3);
  padding:4px 9px; border:1px solid var(--rule);
  background:transparent;
}

.post-title{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(36px, 5.5vw, 76px);
  letter-spacing:-.035em; line-height:1.02;
  margin:0 0 clamp(20px,3vw,32px); color:var(--ink);
  text-wrap:balance;
}
.post-title em{font-style:italic; color:var(--red); font-weight:800}

.post-lead{
  font-family:'Newsreader','Newsreader Display',Georgia,serif;
  font-size:clamp(20px,1.8vw,26px); line-height:1.5;
  color:var(--ink2); max-width:64ch;
  margin:0 0 clamp(28px,4vw,44px);
}

.post-byline{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:18px;
  padding-top:clamp(16px,2vw,24px);
  border-top:1px solid var(--ink);
}
.post-byline-l{display:flex; align-items:center}
.post-author{display:flex; align-items:center; gap:12px}
.post-author-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  background:var(--ink); color:var(--bone);
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.06em;
}
[data-theme="dark"] .post-author-mark{background:var(--red); color:#fff}
.post-author-name{
  font-weight:700; font-size:15px; color:var(--ink);
  letter-spacing:-.01em;
}
.post-byline-r{
  display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,28px);
  align-items:flex-end;
}
.post-byline-stamp{display:flex; flex-direction:column; gap:2px}
.post-byline-stamp .k{
  font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink4);
}
.post-byline-stamp .v{
  font-family:var(--mono); font-size:12px; font-weight:600;
  color:var(--ink);
}
.post-byline-stamp .v.r{color:var(--red); font-weight:700}

/* body */
.post-body{
  padding:clamp(40px,6vw,80px) 0 clamp(40px,6vw,80px);
  background:var(--bone2);
  border-bottom:1px solid var(--rule);
}
.post-grid{
  max-width:1100px;
  display:grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap:clamp(28px,4vw,72px);
  align-items:start;
}
@media (max-width:900px){
  .post-grid{grid-template-columns:1fr; gap:36px}
}

.post-rail{
  position:sticky; top:104px;
  display:flex; flex-direction:column; gap:24px;
}
@media (max-width:900px){
  .post-rail{position:static; order:2; flex-direction:row; flex-wrap:wrap; gap:18px}
  .post-rail .rail-block{flex:1; min-width:200px}
}

.rail-block{
  display:flex; flex-direction:column; gap:10px;
  padding:14px 16px;
  border:1px solid var(--rule);
  background:var(--paper);
}
.rail-k{
  font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink4);
}
.rail-toc{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
  counter-reset: toc;
}
.rail-toc li{counter-increment: toc}
.rail-toc a{
  display:flex; gap:8px; align-items:baseline;
  text-decoration:none;
  font-family:var(--mono); font-size:12px;
  color:var(--ink3); line-height:1.35;
  padding:4px 0;
  border-left:2px solid transparent;
  padding-left:10px; margin-left:-12px;
  transition:color .15s, border-color .15s, background .15s;
}
.rail-toc a::before{
  content:counter(toc, decimal-leading-zero) " ·";
  color:var(--ink4); font-weight:600;
}
.rail-toc a:hover{color:var(--ink); border-left-color:var(--red)}
.rail-toc a.is-active{
  color:var(--red); border-left-color:var(--red);
  background:var(--bone); font-weight:600;
}
.rail-toc a.is-active::before{color:var(--red)}

.rail-share{
  display:flex; flex-direction:column; gap:6px;
}
.rail-share-link{
  font-family:var(--mono); font-size:11px;
  color:var(--ink2); text-decoration:none;
  letter-spacing:.04em;
  transition:color .15s;
}
.rail-share-link:hover{color:var(--red)}

.rail-cta{
  background:var(--ink);
  color:var(--bone);
  border-color:var(--ink);
}
[data-theme="dark"] .rail-cta{background:var(--red); border-color:var(--red); color:#fff}
.rail-cta-k{
  font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--red);
}
[data-theme="dark"] .rail-cta-k{color:#fff; opacity:.85}
.rail-cta p{
  margin:0; font-size:13px; line-height:1.45;
  color:var(--bone);
}
[data-theme="dark"] .rail-cta p{color:#fff}
.rail-cta em.r{color:var(--red); font-style:italic; font-weight:700}
[data-theme="dark"] .rail-cta em.r{color:#fff; text-decoration:underline}
.rail-cta-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:6px;
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone); text-decoration:none;
  padding-top:8px; border-top:1px solid currentColor;
  align-self:flex-start;
}
.rail-cta-link:hover{color:var(--red)}
[data-theme="dark"] .rail-cta-link{color:#fff}
.rail-cta-link .ar{transition:transform .15s}
.rail-cta-link:hover .ar{transform:translateX(3px)}

/* main article column */
.post-main{
  /* The blog is fed automatically, so a long URL or identifier can land in the
     prose any day and there is no editor in between. Nothing overflows today -
     the longest unbreakable run across all 47 published posts is 19 characters
     - so this is a guard rail, not a repair. */
  overflow-wrap:break-word;
  max-width:720px;
  font-family:'Newsreader','Newsreader Display',Georgia,serif;
  font-size:19px; line-height:1.6;
  color:var(--ink2);
}
.post-main > * + *{margin-top:1.1em}
.post-main p{margin:0}
.post-main strong{color:var(--ink); font-weight:700}
.post-main em.r{color:var(--red); font-style:italic; font-weight:500}

.post-drop{
  font-size:21px; line-height:1.55;
}
.post-drop .dropcap{
  float:left;
  font-family:var(--sans);
  font-size:5.4em; line-height:.85;
  font-weight:800;
  color:var(--red);
  padding:6px 12px 0 0;
  margin-right:6px;
}

.post-h2{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(24px,2.4vw,32px);
  letter-spacing:-.025em; line-height:1.1;
  color:var(--ink);
  margin-top:1.6em !important;
  padding-top:8px;
  border-top:1px solid var(--rule);
  scroll-margin-top:96px;
}
.post-h2::before{
  content:""; display:block; width:32px; height:2px;
  background:var(--red); margin-bottom:14px;
}

.post-list{
  margin:0; padding:0 0 0 28px;
  list-style:none;
  display:flex; flex-direction:column; gap:.5em;
}
.post-list li{
  position:relative;
}
.post-list li::before{
  content:"›"; position:absolute; left:-22px; top:0;
  color:var(--red); font-family:var(--mono); font-weight:700;
}
.post-list--num{counter-reset: pl}
.post-list--num li{counter-increment: pl}
.post-list--num li::before{
  content:counter(pl, decimal-leading-zero);
  font-size:12px; font-weight:700; top:.4em; left:-28px;
}

.post-quote{
  margin:1.6em 0;
  padding:18px 24px;
  border-left:3px solid var(--red);
  background:var(--paper);
  font-family:'Newsreader','Newsreader Display',Georgia,serif;
  font-style:italic;
  font-size:22px; line-height:1.45;
  color:var(--ink);
}
.post-quote p{margin:0}
.post-quote cite{
  display:block; margin-top:12px;
  font-style:normal; font-family:var(--mono);
  font-size:11px; letter-spacing:.14em;
  color:var(--ink4); text-transform:uppercase;
}
.post-quote em{color:var(--red); font-weight:500}

.post-figure{
  margin:1.4em 0;
  border:1px solid var(--ink);
  background:var(--paper);
}
.post-figure--callout{
  display:grid; grid-template-columns:auto 1fr; gap:0;
}
.post-figure-k{
  background:var(--red); color:#fff;
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  padding:14px 18px;
  display:flex; align-items:center;
}
.post-figure-v{
  padding:14px 18px;
  font-family:var(--sans);
  display:flex; flex-direction:column; gap:4px;
}
.post-figure-v strong{
  font-size:clamp(22px,2.4vw,30px); font-weight:800;
  letter-spacing:-.02em; color:var(--ink);
}
.post-figure-v span{
  font-size:14px; color:var(--ink3); line-height:1.4;
}

.post-rule{
  border:none; height:1px; background:var(--ink);
  margin:2em 0; opacity:.4;
}

.post-foot{
  margin-top:1em !important;
  font-family:var(--mono); font-size:12px;
  line-height:1.7; color:var(--ink4);
  letter-spacing:.02em;
}
.post-foot a{color:var(--red); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px}

/* pager (prev/next) */
.post-pager{
  padding:clamp(40px,5vw,72px) 0;
  background:var(--bone);
  border-bottom:1px solid var(--rule);
}
.post-pager-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--ink);
  background:var(--paper);
}
@media (max-width:760px){ .post-pager-grid{grid-template-columns:1fr} }
.post-pager-card{
  padding:clamp(22px,3vw,32px);
  text-decoration:none;
  display:flex; flex-direction:column; gap:8px;
  border-right:1px solid var(--ink);
  transition:background .15s;
}
.post-pager-card:last-child{border-right:none}
@media (max-width:760px){
  .post-pager-card{border-right:none; border-bottom:1px solid var(--ink)}
  .post-pager-card:last-child{border-bottom:none}
}
.post-pager-card:hover{background:var(--bone)}
.post-pager-card--next{text-align:right; align-items:flex-end}
.post-pager-k{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--red);
}
.post-pager-v{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(18px,1.8vw,22px); letter-spacing:-.02em;
  color:var(--ink); line-height:1.25;
}
.post-pager-card:hover .post-pager-v{color:var(--red)}
.post-pager-t{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink4);
}


/* ═══════ CV TOOL ═══════ */
body[data-page="cv"]{background:var(--bone2)}


/* ═══════ BLOG DETAIL · DB-content fallbacks ═══════
   The .post-h2 / .post-list / .post-quote / .post-figure / .post-drop classes
   above apply when a dispatch is hand-authored with those classes. Posts
   coming from blog.Post.body_html ship plain <h2>/<ul>/<ol>/<blockquote>/
   <figure>/<hr> tags - these rules apply the same editorial treatment to
   the raw tags inside .post-main so author conventions don't matter. */

/* drop-cap on the first paragraph */
.post-main > p:first-of-type::first-letter{
  float:left;
  font-family:var(--sans);
  font-size:5.4em; line-height:.85;
  font-weight:800; color:var(--red);
  padding:6px 12px 0 0;
  margin-right:6px;
}

/* section headings */
.post-main h2{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(24px,2.4vw,32px);
  letter-spacing:-.025em; line-height:1.1;
  color:var(--ink);
  margin-top:1.6em !important;
  padding-top:8px;
  border-top:1px solid var(--rule);
  scroll-margin-top:96px;
}
.post-main h2::before{
  content:""; display:block; width:32px; height:2px;
  background:var(--red); margin-bottom:14px;
}
.post-main h3{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(20px,1.8vw,24px);
  letter-spacing:-.02em; line-height:1.2;
  color:var(--ink);
  margin-top:1.6em; scroll-margin-top:96px;
}

/* lists */
.post-main ul,
.post-main ol{
  margin:0; padding:0 0 0 28px;
  list-style:none;
  display:flex; flex-direction:column; gap:.5em;
}
.post-main li{position:relative}
.post-main ul li::before{
  content:"›"; position:absolute; left:-22px; top:0;
  color:var(--red); font-family:var(--mono); font-weight:700;
}
.post-main ol{counter-reset: pl-tag}
.post-main ol li{counter-increment: pl-tag}
.post-main ol li::before{
  content:counter(pl-tag, decimal-leading-zero);
  position:absolute; left:-30px; top:.4em;
  color:var(--red); font-family:var(--mono);
  font-size:12px; font-weight:700;
}

/* pull quotes */
.post-main blockquote{
  margin:1.6em 0;
  padding:18px 24px;
  border-left:3px solid var(--red);
  background:var(--paper);
  font-family:'Newsreader','Newsreader Display',Georgia,serif;
  font-style:italic;
  font-size:22px; line-height:1.45;
  color:var(--ink);
}
.post-main blockquote p{margin:0}
.post-main blockquote em{color:var(--red); font-weight:500}

/* inline images and figures */
.post-main figure{
  margin:1.4em 0;
  display:flex; flex-direction:column; gap:10px;
}
.post-main figure img{
  width:100%; height:auto; display:block;
  border:1px solid var(--rule);
}
.post-main figure figcaption{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; color:var(--ink4);
  text-align:center;
}
.post-main img{max-width:100%; height:auto; display:block}
.post-main img.article-inline-img{
  margin:1.4em 0; border:1px solid var(--rule);
}

/* rule + body links */
.post-main hr{
  border:none; height:1px; background:var(--ink);
  margin:2em 0; opacity:.4;
}
.post-main a{
  color:var(--red); text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
  transition:opacity .15s;
}
.post-main a:hover{opacity:.7}

/* ═══════ UTILITY PAGE HEADER (assets, CV, ...) ═══════ */
.cv-bar{
  padding:104px 0 clamp(20px,3vw,32px);
  background:var(--bone);
  border-bottom:1px solid var(--rule);
}
.cv-bar-row{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:18px;
}
.cv-bar-title{
  margin:0; font-family:var(--sans); font-weight:800;
  font-size:clamp(28px,3.2vw,42px); letter-spacing:-.03em;
  color:var(--ink); line-height:1.05;
  display:flex; flex-direction:column; gap:4px;
}
.cv-bar-sub{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink3);
}
.cv-bar-actions{display:flex; gap:10px; flex-wrap:wrap}


/* ═══════ LOGO EXPORT (the /assets page) ═══════ */
.lx-shell{
  padding:clamp(28px,4vw,48px) 0;
  background:var(--bone);
}
.lx-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .8fr);
  gap:clamp(24px,3vw,40px);
  align-items:start;
}
@media (max-width:900px){ .lx-grid{grid-template-columns:1fr} }

/* stage */
.lx-stage{
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--rule);
  position:sticky; top:104px;
  overflow:hidden;
}
@media (max-width:900px){ .lx-stage{position:static} }

.lx-canvas{
  position:relative;
  aspect-ratio: 4 / 3;
  display:flex;
  align-items:center; justify-content:center;
  padding:48px 32px;
  background:#F2F3F5; /* default bone */
  transition:background .2s;
}
/* the lockup itself - layout (row/column) and the clear-space preview live
   here so the canvas just centers one box */
.lx-frame{
  display:flex; flex-direction:column;
  align-items:center; gap:calc(var(--markh) * .22);
  transition:transform .25s ease;
}
/* clear-space preview - shrink the lockup inside the fixed canvas by the
   same proportion the export pads (fraction of the mark height) */
.lx-stage[data-margin="0.3"] .lx-frame{transform:scale(.78)}
.lx-stage[data-margin="0.6"]  .lx-frame{transform:scale(.62)}
.lx-stage[data-margin="1.2"]  .lx-frame{transform:scale(.46)}
/* canvas backgrounds */
.lx-stage[data-bg="bone"] .lx-canvas{background:#F2F3F5}
.lx-stage[data-bg="paper"] .lx-canvas{background:#FFFFFF}
.lx-stage[data-bg="ink"] .lx-canvas{background:#141414}
.lx-stage[data-bg="red"] .lx-canvas{background:#CB2828}
.lx-stage[data-bg="transparent"] .lx-canvas{
  background:
    repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 50% / 24px 24px;
}

/* logo svg - zoom + variant */
/* Lockup proportions per the Brand Bible: the horizontal lockup pairs a
   59px mark with a 26pt wordmark (mark height = 1.7x the word size, gap
   0.37x mark height); stacked is 1.88x / 0.22x. Zoom sets the mark height
   and the type follows via calc, so the pairing can't drift again. */
.lx-stage{--markh:104px}
.lx-stage[data-zoom="s"]{--markh:64px}
.lx-stage[data-zoom="m"]{--markh:104px}
.lx-stage[data-zoom="l"]{--markh:152px}
.lx-logo{
  height:var(--markh); width:auto;
  transition:height .2s;
}

/* variant fills */
.lx-stage[data-variant="red"]   .lx-logo .t1{fill:#CB2828}
.lx-stage[data-variant="red"]   .lx-logo .t2{fill:#141414}
.lx-stage[data-variant="red"]   .lx-logo .t3{fill:#7E7A72}

.lx-stage[data-variant="ink"]   .lx-logo .t1{fill:#141414}
.lx-stage[data-variant="ink"]   .lx-logo .t2{fill:#4A4842}
.lx-stage[data-variant="ink"]   .lx-logo .t3{fill:#7E7A72}

.lx-stage[data-variant="mono"]  .lx-logo .t1,
.lx-stage[data-variant="mono"]  .lx-logo .t2,
.lx-stage[data-variant="mono"]  .lx-logo .t3{fill:#141414}

.lx-stage[data-variant="white"] .lx-logo .t1,
.lx-stage[data-variant="white"] .lx-logo .t2,
.lx-stage[data-variant="white"] .lx-logo .t3{fill:#FFFFFF}

.lx-stage[data-variant="nuit"]  .lx-logo .t1{fill:#DC3C34}
.lx-stage[data-variant="nuit"]  .lx-logo .t2{fill:#FFFFFF}
.lx-stage[data-variant="nuit"]  .lx-logo .t3{fill:#9CA0A6}

/* wordmark on canvas */
.lx-mark-text{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  text-align:left;
}
/* Show-text ON, beside → horizontal lockup matching the exported SVG:
   peaks on the left, mont3 + Swiss AI Builders stacked on the right.
   Peaks shrink so the text has room. */
.lx-stage[data-show-text="yes"] .lx-frame{
  flex-direction:row;
  gap:calc(var(--markh) * .37);   /* bible: 22px gap on a 59px mark */
}
/* Show-text ON, below → stacked lockup like the loading screen: peaks on
   top, text centered underneath. */
.lx-stage[data-show-text="yes"][data-layout="below"] .lx-frame{
  flex-direction:column;
  gap:calc(var(--markh) * .22);
}
.lx-stage[data-show-text="yes"][data-layout="below"] .lx-mark-text{
  align-items:center; text-align:center;
}
/* Show-text OFF → peaks centered alone (default lx-frame column
   layout already centers; we just hide the wordmark and treat the
   logo size with the existing data-zoom rules). */
.lx-stage[data-show-text="no"] .lx-mark-text{ display:none }
.lx-word{
  font-family:var(--sans); font-weight:800;
  font-size:calc(var(--markh) / 1.7);
  letter-spacing:-.045em; line-height:1;
  color:#141414;
}
.lx-word em{color:#CB2828; font-style:normal}
.lx-sub{
  font-family:var(--mono);
  font-size:calc(var(--markh) / 7);
  letter-spacing:.3em; text-transform:uppercase;
  color:#7E7A72; margin-top:calc(var(--markh) * .06);
}
/* wordmark color adapts to variant + background */
.lx-stage[data-bg="ink"] .lx-word,
.lx-stage[data-bg="red"] .lx-word{color:#fff}
.lx-stage[data-bg="ink"] .lx-word em{color:#CB2828}
.lx-stage[data-bg="red"] .lx-word em{color:#fff; text-decoration:underline; text-underline-offset:3px}
.lx-stage[data-bg="ink"] .lx-sub,
.lx-stage[data-bg="red"] .lx-sub{color:rgba(255,255,255,.7)}
.lx-stage[data-variant="white"] .lx-word{color:#fff}
.lx-stage[data-variant="white"] .lx-word em{color:#fff}
.lx-stage[data-variant="white"] .lx-sub{color:rgba(255,255,255,.7)}
.lx-stage[data-variant="mono"] .lx-word em{color:#141414}

.lx-stage[data-variant="nuit"] .lx-word{color:#fff}
.lx-stage[data-variant="nuit"] .lx-word em{color:#CB2828}
.lx-stage[data-variant="nuit"] .lx-sub{color:#9D9890}

.lx-stage-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px;
  border-top:1px solid var(--rule);
  background:var(--paper);
}
.lx-stage-k{
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.22em; color:var(--red);
}
.lx-stage-zooms{display:flex; gap:4px}
.lx-zoom{
  width:28px; height:24px;
  font-family:var(--mono); font-size:11px; font-weight:700;
  background:transparent; color:var(--ink3);
  border:1px solid var(--rule); cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.lx-zoom:hover{color:var(--ink); border-color:var(--ink)}
.lx-zoom.is-active{
  background:var(--ink); color:var(--bone); border-color:var(--ink);
}

/* segmented option rows (wordmark position, clear space) */
.lx-seg{display:flex; gap:6px}
.lx-seg-btn{
  min-width:28px; height:24px; padding:0 10px;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.04em;
  background:transparent; color:var(--ink3);
  border:1px solid var(--rule); cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.lx-seg-btn:hover{color:var(--ink); border-color:var(--ink)}
.lx-seg-btn.is-active{
  background:var(--ink); color:var(--bone); border-color:var(--ink);
}
/* position row goes dormant while the wordmark is hidden */
.lx-seg.is-off{opacity:.35; pointer-events:none}

/* controls */
.lx-controls{
  display:flex; flex-direction:column; gap:0;
  border:1px solid var(--rule);
  background:var(--paper);
}
.lx-group{
  padding:18px 20px;
  border-bottom:1px solid var(--rule);
  display:flex; flex-direction:column; gap:12px;
}
.lx-group:last-child{border-bottom:none}
.lx-group-k{
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink4);
}

.lx-swatches{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
  gap:8px;
}
.lx-swatches--small{
  grid-template-columns:repeat(5, 1fr);
  gap:6px;
}
.lx-sw{
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  background:var(--bone); color:var(--ink);
  border:1px solid var(--rule); cursor:pointer;
  padding:0; overflow:hidden;
  transition:border-color .12s;
}
.lx-sw:hover{border-color:var(--ink)}
.lx-sw.is-active{border-color:var(--red); border-width:2px}
.lx-sw-preview{
  display:block; aspect-ratio: 3 / 2;
}
.lx-sw-name{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  padding:8px 10px; text-align:left;
  border-top:1px solid var(--rule);
  color:var(--ink);
}

.lx-pal--red{
  background:
    linear-gradient(135deg,
      #CB2828 0% 33%, #141414 33% 66%, #7E7A72 66% 100%);
}
.lx-pal--ink{
  background:
    linear-gradient(135deg,
      #141414 0% 33%, #4A4842 33% 66%, #7E7A72 66% 100%);
}
.lx-pal--mono{background:#141414}
.lx-pal--white{
  background:#141414;
  background-image:
    linear-gradient(135deg, #fff 0%, #fff 100%);
  background-color:#141414;
  position:relative;
}
.lx-pal--white::after{
  content:""; position:absolute; inset:0;
  background:#fff;
}
.lx-pal--nuit{
  background:#141414;
  background-image:
    linear-gradient(135deg,
      #CB2828 0% 33%, #FFFFFF 33% 66%, #9D9890 66% 100%);
}

.lx-bg{
  aspect-ratio: 1 / 1;
  border:1px solid var(--rule); cursor:pointer;
  transition:border-color .12s, transform .12s;
  padding:0;
}
.lx-bg:hover{transform:scale(1.08)}
.lx-bg.is-active{border-color:var(--red); border-width:2px}

/* toggle */
.lx-toggle{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--mono); font-size:12px;
  color:var(--ink2);
}
.lx-toggle input{display:none}
.lx-toggle-mark{
  width:34px; height:18px; flex-shrink:0;
  background:var(--bone2); border:1px solid var(--rule);
  position:relative; transition:background .15s;
}
.lx-toggle-mark::after{
  content:""; position:absolute; top:1px; left:1px;
  width:14px; height:14px; background:var(--ink);
  transition:left .15s, background .15s;
}
.lx-toggle input:checked + .lx-toggle-mark{
  background:var(--red); border-color:var(--red);
}
.lx-toggle input:checked + .lx-toggle-mark::after{
  left:17px; background:#fff;
}
.lx-toggle-lbl{user-select:none}

/* download grid */
.lx-dl-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
}
.lx-dl{
  background:var(--bone); color:var(--ink);
  border:1px solid var(--rule); cursor:pointer;
  padding:10px 12px;
  display:flex; flex-direction:column; gap:2px;
  text-align:left;
  transition:background .12s, border-color .12s, color .12s;
}
.lx-dl:hover{background:var(--ink); color:var(--bone); border-color:var(--ink)}
.lx-dl-fmt{
  font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.04em;
}
.lx-dl-meta{
  font-family:var(--mono); font-size:9px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink4);
}
.lx-dl:hover .lx-dl-meta{color:var(--bone); opacity:.75}

.lx-dl-note{
  margin:0; padding:8px 0 0;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink4);
  transition:color .2s;
}
.lx-dl-note.is-flash{color:var(--red); font-weight:700}

.lx-rules{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
}
.lx-rules li{
  display:flex; gap:8px; align-items:baseline;
  font-size:13px; line-height:1.4; color:var(--ink2);
}
.lx-rule-y{color:var(--red); font-weight:700; flex-shrink:0}
.lx-rule-n{color:var(--ink4); font-weight:700; flex-shrink:0}

/* ready-made banners */
.lx-banners{
  margin-top:34px; padding-bottom:64px;
  display:flex; flex-direction:column; gap:14px;
}
.lx-banner-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
}
@media (max-width:900px){ .lx-banner-grid{grid-template-columns:1fr} }
.lx-banner{
  margin:0; border:1px solid var(--rule); background:#fff;
}
.lx-banner > a{display:block; line-height:0}
.lx-banner img{display:block; width:100%; height:auto}
.lx-banner figcaption{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-top:1px solid var(--rule);
}
.lx-banner-k{
  font-family:var(--mono); font-size:9px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink4);
}
.lx-banner-dl{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.06em; color:var(--ink); text-decoration:none;
  border:1px solid var(--rule); padding:6px 10px; background:var(--bone);
  transition:background .12s, border-color .12s, color .12s;
}
.lx-banner-dl:hover{background:var(--ink); color:var(--bone); border-color:var(--ink)}

/* ═══════ 404 PAGE ═══════ */
body[data-page="404"]{background:var(--bone)}

.nf-shell{
  padding:120px 0 clamp(40px,5vw,72px);
  min-height:calc(100vh - 80px);
  display:flex; flex-direction:column; justify-content:center;
}

.nf-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap:clamp(28px,4vw,72px);
  align-items:center;
}
@media (max-width:900px){
  .nf-grid{grid-template-columns:1fr; gap:32px}
}

.nf-glyph{display:flex; flex-direction:column; gap:14px}
.nf-code{
  font-family:var(--sans); font-weight:900;
  font-size:clamp(120px, 22vw, 260px);
  letter-spacing:-.06em; line-height:.85;
  color:var(--red);
  display:block;
}
.nf-code .scram{display:inline-flex}
.nf-code .scram > i{
  display:inline-block; overflow:visible;
  font-style:inherit;
}
.nf-code .scram > i.rolling{color:var(--ink)}

.nf-tag{
  font-family:var(--mono); font-size:13px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink3);
  padding-top:12px;
  border-top:1px solid var(--ink);
  align-self:flex-start;
}

.nf-term{
  width:100%; max-width:none;
  font-family:var(--mono);
}
.nf-term .term-body{padding:18px 20px 22px}
.nf-term .term-line{margin-bottom:3px; font-size:13px}
.nf-path,
.nf-path-2{
  color:var(--red); font-weight:600;
  word-break:break-all;
}
.nf-link{
  color:var(--ink); text-decoration:none; font-weight:600;
  border-bottom:1px dotted var(--ink4);
  padding-bottom:1px; transition:color .12s, border-color .12s;
}
.nf-link:hover{color:var(--red); border-color:var(--red)}
.nf-dim{color:var(--ink4); margin-left:6px}

.nf-mailto{
  margin:clamp(28px,4vw,44px) 0 0;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; color:var(--ink4);
  text-align:center;
  padding-top:18px;
  border-top:1px solid var(--rule);
}
.nf-mailto a{
  color:var(--red); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:1px;
}

/* ═══════ CV VIEWER (/playground/cv/) ═══════ */
.cv-viewer{
  padding:clamp(28px,4vw,52px) 0 clamp(48px,6vw,80px);
  background:var(--bone2);
}
.cv-pdf-frame{
  position:relative;
  width:100%;
  max-width:880px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--rule);
  box-shadow:0 18px 60px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.04);
  overflow:hidden;
}
.cv-pdf-frame iframe{
  display:block;
  width:100%;
  height: clamp(640px, 92vh, 1244px);   /* A4 ~= 880 × 1244 */
  border:0;
  background:#fff;
}
[data-theme="dark"] .cv-pdf-frame{
  box-shadow:0 18px 60px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.3);
}

.cv-viewer-note{
  max-width:880px;
  margin:18px auto 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--ink4);
  text-align:center;
  line-height:1.6;
}
.cv-viewer-note a{
  color:var(--ink);
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
}
.cv-viewer-note a:hover{color:var(--red)}

@media (max-width:720px){
  .cv-pdf-frame iframe{ height:80vh }
}

/* ═══════ WEBSITE DEVELOPMENT PAGE ═══════ */
body[data-page="webdev"]{background:var(--bone)}
.wd-tiers   { background:var(--bone2) }
.wd-included{ background:var(--bone) }
.wd-process { background:var(--bone2) }
.wd-addons  { background:var(--bone) }

/* ── tier grid (3 plans) ── */
.tier-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; border:1px solid var(--ink);
  margin-bottom:clamp(20px,3vw,32px);
}
@media (max-width:900px){ .tier-grid{grid-template-columns:1fr} }
.tier{
  background:var(--paper); color:var(--ink);
  padding:30px 26px 26px;
  border-right:1px solid var(--ink);
  display:flex; flex-direction:column;
  position:relative;
  transition:background .2s ease;
}
.tier:last-child{border-right:none}
@media (max-width:900px){
  .tier{border-right:none; border-bottom:1px solid var(--ink)}
  .tier:last-child{border-bottom:none}
}

/* featured = inverted ink card */
.tier--featured{background:var(--ink); color:var(--bone)}
.tier--featured::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:4px; background:var(--red);
}

.tier-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:22px;
}
.tier-tag{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink4);
}
.tier--featured .tier-tag{color:rgba(255,255,255,.55)}
.tier-flag{
  font-family:var(--mono); font-size:9px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:#fff; background:var(--red);
  padding:4px 8px;
}
.tier-name{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(30px,3vw,40px); letter-spacing:-.035em;
  line-height:1; margin:0 0 6px; color:inherit;
}
.tier-name-sub{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink4); margin:0 0 22px;
}
.tier--featured .tier-name-sub{color:rgba(255,255,255,.5)}

.tier-price{
  display:flex; align-items:baseline; gap:6px;
  padding-bottom:20px; margin-bottom:20px;
  border-bottom:1px solid var(--rule);
}
.tier--featured .tier-price{border-bottom-color:rgba(255,255,255,.2)}
.tier-price .num{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(34px,3.6vw,48px); letter-spacing:-.04em;
  line-height:1; color:inherit;
}
.tier-price .cur{
  font-family:var(--mono); font-size:13px; font-weight:600;
  letter-spacing:.12em; color:var(--red);
}
.tier--featured .tier-price .cur{color:var(--red)}
.tier-price .talk{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(28px,3vw,40px); letter-spacing:-.03em;
  line-height:1; color:inherit;
}
.tier-price .from{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink4); margin-left:2px;
}
.tier--featured .tier-price .from{color:rgba(255,255,255,.5)}

.tier-feat{
  list-style:none; padding:0; margin:0 0 24px;
  display:flex; flex-direction:column; gap:11px;
}
.tier-feat li{
  display:flex; gap:11px; align-items:baseline;
  font-size:14px; line-height:1.4; color:var(--ink2);
}
.tier--featured .tier-feat li{color:rgba(255,255,255,.82)}
.tier-feat li::before{
  content:"+"; flex-shrink:0;
  font-family:var(--mono); font-weight:700; font-size:13px;
  color:var(--red);
}
/* Excluded from this tier. Signalled three independent ways (marker glyph,
   strikethrough, colour) so the meaning survives greyscale printing and
   colourblindness: a grey "-" alone reads as a bullet, not an exclusion, and
   a buyer who thinks an item is included at this price is a dispute. */
.tier-feat li.muted{color:var(--ink4)}
.tier--featured .tier-feat li.muted{color:rgba(255,255,255,.45)}
.tier-feat li.muted::before{content:"\00D7"; color:var(--ink4)}
.tier--featured .tier-feat li.muted::before{color:rgba(255,255,255,.45)}
/* struck on the label only: text-decoration on the li would strike the marker
   too, and it cannot be cancelled on a child */
.tier-feat li.muted .x-out{text-decoration:line-through; text-decoration-thickness:1px}
.tier-feat .inherit{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.06em; color:var(--ink); padding-bottom:2px;
}
.tier--featured .tier-feat .inherit{color:#fff}

.tier-foot{margin-top:auto}
.tier-foot .btn{width:100%; justify-content:space-between}
.tier--featured .tier-foot .btn{
  background:var(--bone); color:var(--ink); border-color:var(--bone);
}
.tier--featured .tier-foot .btn:hover{
  background:var(--red); color:#fff; border-color:var(--red);
}
/* In dark mode var(--ink) flips light, which would make the featured card a
   light slab with white text (unreadable). Keep it a dark slab in both themes. */
[data-theme="dark"] .tier--featured{ background:#15171c; color:#F2F4F6; }
[data-theme="dark"] .tier--featured .tier-foot .btn{
  background:var(--red); color:#fff; border-color:var(--red);
}

/* note strip under tiers */
.wd-note{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink4);
}
.wd-note strong{color:var(--red); font-weight:700}

/* included — 2×2 feature table */
.wd-incl-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:0; border:1px solid var(--ink);
  margin-bottom:clamp(20px,3vw,32px);
}
@media (max-width:620px){ .wd-incl-grid{grid-template-columns:1fr} }
.wd-incl{
  position:relative; overflow:hidden;
  padding:clamp(26px,3.2vw,42px) clamp(24px,2.8vw,40px);
  display:flex; flex-direction:column; gap:11px;
  background:var(--paper);
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  transition:background .2s ease;
}
.wd-incl:nth-child(2n){border-right:none}        /* no divider on right column */
.wd-incl:nth-last-child(-n+2){border-bottom:none} /* no divider under bottom row */
@media (max-width:620px){
  .wd-incl{border-right:none}
  .wd-incl:last-child{border-bottom:none}
}
/* large faint index in the corner */
.wd-incl-k{
  position:absolute; top:10px; right:18px;
  font-family:var(--sans); font-weight:800;
  font-size:clamp(56px,7vw,92px); line-height:1; letter-spacing:-.05em;
  color:var(--ink); opacity:.05; pointer-events:none;
  transition:opacity .2s ease, color .2s ease;
}
.wd-incl-h{
  position:relative; z-index:1;
  font-family:var(--sans); font-weight:800; font-size:clamp(21px,2.1vw,26px);
  letter-spacing:-.025em; color:var(--ink); line-height:1.08;
}
.wd-incl-p{
  position:relative; z-index:1; max-width:38ch;
  font-family:var(--sans); font-size:14px; line-height:1.5;
  color:var(--ink3); margin:0;
}
/* red accent bar grows on hover */
.wd-incl::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--red); transform:scaleY(0); transform-origin:top;
  transition:transform .25s ease;
}
.wd-incl:hover{background:var(--bone)}
.wd-incl:hover::before{transform:scaleY(1)}
.wd-incl:hover .wd-incl-k{opacity:.13; color:var(--red)}
.wd-incl:hover .wd-incl-h{color:var(--red)}

/* process — "how it ships" timeline stepper */
.wd-flow{
  list-style:none; margin:0; padding:0; counter-reset:step;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
@media (max-width:820px){ .wd-flow{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .wd-flow{grid-template-columns:1fr} }
.wd-flow li{
  counter-increment:step; position:relative;
  border-top:1px solid var(--ink);
  padding:34px 30px 30px 0;
  display:flex; flex-direction:column; gap:12px;
}
/* diamond node sitting on the progress line */
.wd-flow li::after{
  content:""; position:absolute; top:-6px; left:0;
  width:11px; height:11px; background:var(--bone2);
  border:1px solid var(--ink); transform:rotate(45deg);
  transition:background .2s ease, border-color .2s ease;
}
.wd-flow li:last-child::after{background:var(--red); border-color:var(--red)}
/* big faint step number (auto via counter) */
.wd-flow li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--sans); font-weight:800; font-size:clamp(38px,3.6vw,56px);
  line-height:1; letter-spacing:-.045em; color:var(--ink); opacity:.13;
  transition:opacity .2s ease, color .2s ease;
}
.wd-flow-tag{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red);
}
.wd-flow li p{
  font-family:var(--sans); font-size:14px; line-height:1.5;
  color:var(--ink3); margin:0; max-width:30ch;
}
.wd-flow li:hover::before{opacity:.3; color:var(--red)}
.wd-flow li:hover::after{background:var(--red); border-color:var(--red)}

/* contact — inverted closing band (the page climax).
   bg=var(--ink)/text=var(--bone) are always-opposite tokens, so the band flips
   correctly in both themes (dark slab in light mode, light slab in dark) and
   stays readable. Accents use var(--red); no hardcoded white. */
.wd-cta{
  background:var(--ink); color:var(--bone);
  padding:clamp(60px,8vw,124px) 0;
}
.wd-cta-inner{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(18px,2.6vw,28px);
}
.wd-cta-tag{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--red);
}
.wd-cta-h{
  margin:0; color:inherit; text-wrap:balance;
  font-family:var(--sans); font-weight:800;
  font-size:clamp(52px,9vw,128px); line-height:.9; letter-spacing:-.045em;
}
.wd-cta-h em{font-style:normal; color:var(--red)}
.wd-cta-actions{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(18px,3vw,34px); margin-top:clamp(10px,1.6vw,18px);
}
.wd-cta-mail{
  font-family:var(--mono); font-size:clamp(14px,1.5vw,17px); color:inherit;
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:3px;
  opacity:.9; transition:color .15s ease, opacity .15s ease;
}
.wd-cta-mail:hover{color:var(--red); opacity:1}
.wd-cta .btn{background:var(--bone); color:var(--ink); border-color:var(--bone)}
.wd-cta .btn:hover{background:var(--red); color:#fff; border-color:var(--red)}

/* add-ons reuse .vert grid but show a price chip */
.addon-price{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.1em; color:var(--red);
  margin-top:auto;
}


/* ═══════════════════════════════════════════
   LOCAL AI PAGE  (la-* / cmp / model cards)
   ═══════════════════════════════════════════ */
.la-compare { background:var(--bone2) }
.la-models  { background:var(--bone) }
.la-pricing { background:var(--bone2) }
.la-cta     { background:var(--bone) }

/* ── comparison table (attribute | local | cloud) ── */
.cmp{
  border:1px solid var(--ink);
  margin-bottom:clamp(20px,3vw,32px);
  background:var(--paper);
}
.cmp-row{
  display:grid;
  grid-template-columns:1.1fr 1.4fr 1.4fr;
}
.cmp-row + .cmp-row{ border-top:1px solid var(--rule) }
.cmp-row > div{ padding:18px 22px; border-right:1px solid var(--rule) }
.cmp-row > div:last-child{ border-right:none }

/* head row */
.cmp-head > div{
  padding:16px 22px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  border-bottom:1px solid var(--ink);
}
.cmp-head .cmp-axis{ color:var(--ink4) }
.cmp-head .cmp-local{ background:var(--ink); color:#fff }
.cmp-head .cmp-local .dot{ background:var(--red) }
.cmp-head .cmp-cloud{ color:var(--ink3) }
.cmp-head .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--ink4); flex-shrink:0;
}

/* body cells */
.cmp-k{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink4);
  align-self:center;
}
.cmp-local-cell{ background:var(--ink); color:var(--bone) }
.cmp-v{
  font-family:var(--sans); font-size:15px; line-height:1.4;
  color:var(--ink2);
}
.cmp-local-cell .cmp-v{ color:#fff; font-weight:600 }
.cmp-local-cell .cmp-v b{ color:#fff }
.cmp-sub{
  display:block; margin-top:3px;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink4);
}
.cmp-local-cell .cmp-sub{ color:rgba(255,255,255,.5) }
.cmp-mark{
  font-family:var(--mono); font-weight:700; font-size:12px;
  color:var(--red); margin-right:7px;
}
.cmp-local-cell .cmp-mark{ color:var(--red) }

/* In dark mode var(--ink) flips light, which would put this column's
   hardcoded white text on a light slab (unreadable). Keep it a dark slab
   in both themes - same treatment as .tier--featured. */
[data-theme="dark"] .cmp-head .cmp-local,
[data-theme="dark"] .cmp-local-cell{ background:#15171c }

@media (max-width:760px){
  .cmp-row{ grid-template-columns:1fr 1fr }
  .cmp-head .cmp-axis, .cmp-row .cmp-k{ display:none }
  .cmp-row > div{ border-right:1px solid var(--rule) }
}

/* ── model cards (Qwen / Gemma) ── */
/* ── model hero: the recommended go-to ── */
.model-hero{
  border:1px solid var(--ink); border-bottom:none;
  background:var(--ink); color:var(--bone);
  padding:34px 30px 30px; position:relative;
  display:grid; grid-template-columns:1.6fr 1fr; gap:34px; align-items:center;
}
.model-hero::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:4px; background:var(--red);
}
@media (max-width:760px){ .model-hero{ grid-template-columns:1fr; gap:22px } }
.mh-tag{
  display:inline-block;
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:#fff; background:var(--red); padding:5px 10px; margin-bottom:16px;
}
.mh-top{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.mh-name{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(34px,4vw,52px); letter-spacing:-.04em; line-height:1;
}
.mh-by{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.mh-lic{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.1em; color:var(--red); margin-bottom:16px;
}
.mh-lic::before{ content:"◆ "; }
.mh-desc{
  font-family:var(--sans); font-size:15px; line-height:1.55;
  color:rgba(255,255,255,.82); margin:0; max-width:46ch;
}
.mh-specs{
  display:flex; flex-direction:column; gap:0;
  border:1px solid rgba(255,255,255,.2);
}
.mh-spec{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:14px 16px;
}
.mh-spec + .mh-spec{ border-top:1px solid rgba(255,255,255,.18) }
.mh-spec .s-size{
  font-family:var(--sans); font-weight:800; font-size:16px;
  letter-spacing:-.02em; color:#fff;
}
.mh-spec .s-hw{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6);
}
.mh-spec .s-hw b{ color:var(--red); font-weight:700 }
/* Dark slab in both themes - same reasoning as .tier--featured. */
[data-theme="dark"] .model-hero{ background:#15171c; color:#F2F4F6 }

/* scale label on the smaller/bigger cards */
.model-scale{
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--red);
  margin-bottom:12px; display:block;
}

.model-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; border:1px solid var(--ink);
  margin-bottom:clamp(20px,3vw,32px);
}
@media (max-width:900px){ .model-grid{grid-template-columns:1fr} }
/* 2-up variant used under the hero */
.model-grid.two{ grid-template-columns:repeat(2,1fr) }
@media (max-width:760px){ .model-grid.two{grid-template-columns:1fr} }
.model{
  background:var(--paper); padding:28px 26px 24px;
  border-right:1px solid var(--ink);
  display:flex; flex-direction:column;
}
.model:last-child{ border-right:none }
@media (max-width:900px){
  .model{ border-right:none; border-bottom:1px solid var(--ink) }
  .model:last-child{ border-bottom:none }
}
/* leaderboard rank pill on a model card */
.model-rank{
  display:inline-block; margin-right:8px;
  font-family:var(--mono); font-size:9px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:#fff; background:var(--red); padding:3px 7px;
  vertical-align:middle;
}
.model-top{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:4px;
}
.model-name{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(26px,2.6vw,34px); letter-spacing:-.03em;
  color:var(--ink); line-height:1;
}
.model-by{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink4);
}
.model-lic{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.1em; color:var(--red);
  margin:14px 0 18px;
}
.model-lic::before{ content:"◆ "; }
.model-desc{
  font-family:var(--sans); font-size:14px; line-height:1.5;
  color:var(--ink3); margin:0 0 20px;
}
.model-picks{
  list-style:none; padding:0; margin:0 0 4px;
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--rule);
}
.model-picks li{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:12px; align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--rule);
}
.mp-size{
  font-family:var(--sans); font-weight:800; font-size:15px;
  letter-spacing:-.02em; color:var(--ink); white-space:nowrap;
}
.mp-use{
  font-family:var(--sans); font-size:13px; line-height:1.35;
  color:var(--ink3);
}
.mp-hw{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink4);
  white-space:nowrap; text-align:right;
}
.mp-hw b{ color:var(--red); font-weight:700 }

/* ── pricing: reuse .tier-grid, add a setup meta line ── */
.tier-feat .pre{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.06em; color:var(--ink);
}
.tier--featured .tier-feat .pre{ color:#fff }


/* ─── summit background - carried over from the loading screen ───
   Radial "elevation" + engineering grid: 28px minor hairlines,
   140px major lines, red registration dots at major cell centres.
   Light: paper centre → bone → bone2 edges. Dark: same token stack.
   Apply sparingly - bookends and rhythm, flat sections in between stay calm:
   home (hero, how, ventures, contact) + subpage heroes and closing CTAs.
   Selectors stay compound (.x.bg-summit / #x.bg-summit) so they outrank the
   id-based alternating-section background rules above. */
.hero.bg-summit,
.ws-hero.bg-summit,
.pg-strip.bg-summit,
section#how.bg-summit,
section#ventures.bg-summit,
section#contact.bg-summit{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle, var(--grid-dot) 1.2px, transparent 2px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(ellipse 90% 70% at 50% 45%, var(--paper) 0%, var(--bone) 45%, var(--bone2) 100%);
  background-size: 140px 140px, 140px 140px, 140px 140px, 28px 28px, 28px 28px, 100% 100%;
  background-position: center;
}
.bg-summit > .wrap{position:relative; z-index:1}

/* elevation contours - the trinity peak echoed as topographic outlines */
.summit-contours{
  position:absolute; z-index:0; bottom:0; right:-4%;
  width:min(54vw, 720px); height:auto;
  color:var(--ink);
  pointer-events:none;
}
.summit-contours polygon{opacity:.06}
.summit-contours polygon.is-red{stroke:var(--red); opacity:.20}
[data-theme="dark"] .summit-contours polygon{opacity:.09}
[data-theme="dark"] .summit-contours polygon.is-red{opacity:.26}
section#contact .summit-contours{right:auto; left:-5%; width:min(46vw, 600px)}
@media (max-width:900px){
  .summit-contours{width:78vw; right:-18%}
  section#contact .summit-contours{left:-22%}
}


/* ─── 04 · incubated startups - filmstrip list ─── */
.ventures{padding-bottom:clamp(48px,5vw,80px)}

.strip-list{
  /* The list is a panel laid on the engineering grid, not printed into it.
     Left transparent, the section's 28px hairlines and red registration dots
     ran straight through the rows and crossed their own separators, so two
     rulings competed in the same space and the names sat in the middle of the
     mess. The grid keeps doing its job as the field around and behind the
     panel; the rows get a clean surface to sit on. */
  background:var(--paper);
  padding-inline:var(--band-pad);
  margin-inline:calc(-1 * var(--band-pad));
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  display:grid;
  grid-template-columns: minmax(200px,1.05fr) minmax(0,1.5fr) auto auto 28px;
  column-gap:clamp(16px,3vw,44px);
}
.strip-row{
  display:grid;
  grid-template-columns: subgrid;     /* share the list's tracks so columns line up across rows */
  grid-column: 1 / -1;
  align-items:baseline;
  padding:clamp(22px,2.6vw,34px) 4px;
  border-bottom:1px solid var(--rule);
  text-decoration:none; color:inherit;
}
.strip-list .strip-row:last-child{border-bottom:none}
/* On phones the panel stops bleeding to the screen edges. Its border is a hard
   1px black rule top and bottom, and run edge to edge it read as a slab the
   layout had failed to inset rather than a panel: nothing else in the section
   touches the glass. It sits in the wrap instead, so its own edges line up with
   the marker and the heading above it, and the rows drop their 4px so the
   product names start on the same line as everything else. */
@media (max-width:760px){
  /* Aligned with the wrap on the outside, padded on the inside: the rules top
     and bottom end where the section's margin ends, and the rows sit in from
     them the way the contents of a box should. */
  .strip-list{padding-inline:clamp(14px,4vw,20px); margin-inline:0}
}

/* Names read at full ink like the client list above; hover paints the same
   red swipe. --strip-red-deep mirrors --pf-red-deep (deep red in dark mode
   so the white text stays readable). */
section#ventures.ventures{--strip-red-deep:var(--red)}
[data-theme="dark"] section#ventures.ventures{--strip-red-deep:#CB2828}
.strip-name{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(26px,3.2vw,46px); letter-spacing:-.035em; line-height:1;
  color:var(--ink);
  background-image:linear-gradient(var(--strip-red-deep,var(--red)),var(--strip-red-deep,var(--red)));
  background-repeat:no-repeat; background-size:0% 88%; background-position:0 56%;
  padding:0 .08em; margin-left:-.08em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transform:translateX(0);
  transition:transform .25s cubic-bezier(.16,1,.3,1), color .25s ease, background-size .38s cubic-bezier(.16,1,.3,1);
}
.strip-row:hover .strip-name,
.strip-row:focus-visible .strip-name{
  color:#fff; background-size:100% 88%; transform:translateX(14px);
  transition:transform .35s cubic-bezier(.16,1,.3,1), color .2s ease, background-size .38s cubic-bezier(.16,1,.3,1);
}
.strip-desc{
  font-size:15px; line-height:1.4; color:var(--ink4);
  text-align:left;
  transition:color .25s ease;
}
.strip-row:hover .strip-desc,
.strip-row:focus-visible .strip-desc{color:var(--ink3)}
.strip-tag, .strip-live{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink3); white-space:nowrap;
}
.strip-live{color:var(--red); display:inline-flex; align-items:center; gap:6px}
.strip-live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--red)}
.strip-ar{
  justify-self:end;
  font-size:20px; line-height:1; color:var(--red);
  opacity:0; transform:translateX(-8px);
  transition:opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.strip-row:hover .strip-ar,
.strip-row:focus-visible .strip-ar{
  opacity:1; transform:translateX(0);
  transition:opacity .3s ease .03s, transform .3s cubic-bezier(.16,1,.3,1) .03s;
}
@media (max-width:760px){
  .strip-row{
    grid-template-columns: 1fr auto;
    /* Stacked, the desktop padding (up to 34px top and bottom) put a name and
       one line of description inside ~120px of row, so five ventures ran for
       most of a screen with almost nothing in it. Matched to the process rows
       above, which carry more text in less height. */
    /* No side padding: the panel is inside the wrap on phones, so the row's
       own edges are already the section's margin and the 4px only pushed the
       names out of line with the heading. */
    padding:clamp(16px,2.2vw,26px) 0;
    gap:4px 16px; align-items:center;
  }
  .strip-desc{grid-column:1 / -1}
  .strip-tag, .strip-live{display:none}
}

/* the hover card - window onto the filmstrip */
.strip-card{
  position:fixed; left:0; top:0;
  width:672px; height:378px;   /* 16:9 - 30% smaller than 960x540 so the card doesn't cover the section behind it (JS W/H in index.html match) */
  z-index:40; pointer-events:none;
  will-change:transform;
}
.strip-card-inner{
  position:absolute; inset:0;
  border:1px solid var(--ink);
  background:var(--paper);
  overflow:hidden;
  opacity:0; transform:scale(.65);
  transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .35s cubic-bezier(.16,1,.3,1);
}
.strip-card.is-on .strip-card-inner{opacity:1; transform:scale(1)}
.strip-card.is-off .strip-card-inner{
  transform:scale(.85);
  transition:transform .22s cubic-bezier(.55,0,.8,.4), opacity .22s ease-in;
}
.strip-track{display:flex; height:100%; will-change:transform}
.strip-slide{flex:0 0 100%; margin:0; position:relative; overflow:hidden}
.strip-media{
  position:absolute; inset:0;
  will-change:transform;
}
.strip-media.tone-ink{background:var(--ink); color:var(--bone)}
.strip-media.tone-red{background:var(--red); color:#fff}
.strip-media.tone-stripe{
  background:
    repeating-linear-gradient(135deg, var(--rule) 0 1px, transparent 1px 10px),
    var(--bone);
  color:var(--ink);
}
.strip-idx{
  position:absolute; top:14px; left:16px;
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.22em;
}
.strip-media.tone-ink .strip-idx{color:var(--red)}
.strip-slide-name{
  position:absolute; bottom:14px; left:16px;
  font-family:var(--sans); font-weight:800;
  font-size:24px; letter-spacing:-.03em; line-height:1;
}
.strip-drop{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; opacity:.55; white-space:nowrap;
}

/* real product shot inside a slide - fills the frame; scrim keeps the
   idx + name overlays legible on any screenshot */
.strip-media img,
.strip-media video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top; display:block;
}
/* landscape demo clips: scale the whole frame to fit inside the card (no crop).
   applies to the <video> and its poster; the tone-* background fills the
   letterbox above/below since the clips are 16:9 and the card is portrait. */
.strip-media video{ object-fit:contain; object-position:center; }
.strip-media.has-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 28%,
    rgba(0,0,0,0) 58%, rgba(0,0,0,.52) 100%);
}
.strip-media.has-img .strip-idx,
.strip-media.has-img .strip-slide-name{color:#fff; z-index:1}


/* ─── 03 · client work - dark portfolio (hover-list + sticky preview panel) ───
   Mirrors the published mont3.ch section: numbered rows left, preview right.
   Section keeps its own palette per theme via --pf-* tokens. */
section#built.built{
  /* light variant - same layout, light palette */
  --pf-bg:var(--bone2); --pf-fg:var(--ink);
  --pf-mut:rgba(20,20,20,.52);
  --pf-rule:rgba(20,20,20,.16);
  --pf-red:var(--red); --pf-red-deep:var(--red);
  --pf-soft:rgba(20,20,20,.74);
  --pf-panel:rgba(20,20,20,.03);
  --pf-shot:#CFD2D8;
  background:var(--pf-bg); color:var(--pf-fg);
  padding-top:clamp(48px,5vw,72px);
  padding-bottom:clamp(48px,5vw,80px);
}
[data-theme="dark"] section#built.built{
  /* deployed dark palette */
  --pf-bg:#131316; --pf-fg:#F2F3F5;
  --pf-mut:rgba(242,243,245,.5);
  --pf-rule:rgba(242,243,245,.14);
  --pf-red:#DC3C34; --pf-red-deep:#CB2828;
  --pf-soft:rgba(242,243,245,.78);
  --pf-panel:rgba(242,243,245,.03);
  --pf-shot:#0C0C0E;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.built .h2{color:var(--pf-fg)}
.built .lead{color:var(--pf-soft)}
.built .lead .r, .built .r{color:var(--pf-red)}
.built .marker{color:var(--pf-mut)}
.built .marker .n{color:var(--pf-red)}

.pf-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
@media (max-width:960px){
  .pf-grid{grid-template-columns:1fr}
  .pf-panel{display:none}
}

/* rows */
.pf-list{border-top:1px solid var(--pf-rule)}
.pf-row{
  display:grid; grid-template-columns:48px 1fr 28px; gap:0 14px;
  align-items:start;
  padding:clamp(18px,2vw,26px) 4px;
  border-bottom:1px solid var(--pf-rule);
  text-decoration:none; color:inherit;
}
.pf-num{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--pf-mut); padding-top:9px;
}
.pf-main{display:block; min-width:0}
.pf-name{
  display:inline;
  font-family:var(--sans); font-weight:800;
  font-size:clamp(24px,2.3vw,34px); letter-spacing:-.03em; line-height:1.15;
  color:var(--pf-fg);
  background-image:linear-gradient(var(--pf-red-deep),var(--pf-red-deep));
  background-repeat:no-repeat; background-size:0% 88%; background-position:0 56%;
  padding:0 .08em; margin-left:-.08em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background-size .38s cubic-bezier(.16,1,.3,1);
}
.pf-row.is-active .pf-name{background-size:100% 88%; color:#fff}
.pf-sub{
  display:block; margin-top:8px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--pf-mut);
}
.pf-ar{
  justify-self:end; padding-top:6px;
  font-size:19px; line-height:1; color:var(--pf-red);
  opacity:0; transform:translateX(-6px);
  transition:opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.pf-row.is-active .pf-ar{opacity:1; transform:none}

/* panel */
.pf-panel{
  position:sticky; top:96px;
  border:1px solid var(--pf-rule);
  background:var(--pf-panel);
}
.pf-panel-top{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 16px;
  border-bottom:1px solid var(--pf-rule);
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--pf-mut); white-space:nowrap;
}
.pf-views{display:grid}
.pf-view{
  grid-area:1/1; min-width:0;
  opacity:0; transform:translateY(10px);
  transition:opacity .3s ease, transform .45s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.pf-view.is-on{opacity:1; transform:none; pointer-events:auto}
@media (prefers-reduced-motion: reduce){
  .pf-view{transition:none; transform:none}
  .pf-name{transition:none}
}
.pf-shot{
  aspect-ratio:16/10; overflow:hidden;
  background:var(--pf-shot);
  border-bottom:1px solid var(--pf-rule);
}
.pf-shot img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
/* wip teaser - no screenshot yet, just the redacted mark */
.pf-shot-wip{
  display:flex; width:100%; height:100%;
  align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--pf-mut);
}
.pf-body{padding:18px 16px 16px}
.pf-desc{margin:0; font-size:14px; line-height:1.55; color:var(--pf-soft)}
.pf-stackrow{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--pf-rule);
}
.pf-k{
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.2em; color:var(--pf-mut); margin-right:4px;
}
.pf-chip{
  font-family:var(--mono); font-size:11px;
  padding:4px 8px; border:1px solid var(--pf-rule);
  color:var(--pf-soft); white-space:nowrap;
}


/* ─── 05 · team - personnel-file crew cards (handoff integration) ─── */
section#team.team{
  background:var(--bone2);
  padding-bottom:clamp(48px,5vw,80px);
}
.team-head{margin-bottom:clamp(36px,5vw,56px)}

/* five members → 5-up desktop row (handoff was 4-up for 4 cards),
   3-up on laptop, 2-up on tablet, single column on phones */
.crew-grid{
  /* minmax(0,1fr), not 1fr: a plain 1fr track refuses to go below its
     content's minimum width, so one wide card widened the whole page. */
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
}
@media (max-width:1280px){ .crew-grid{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:900px){ .crew-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:560px){ .crew-grid{grid-template-columns:minmax(0,1fr)} }

.crew-card{
  display:flex; flex-direction:column;
  border:1px solid var(--ink);
  background:var(--paper);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.crew-card:hover{
  transform:translateY(-4px);
  box-shadow:6px 6px 0 var(--ink);
}

/* dark file strip - stays dark in BOTH themes (fixed brand element) */

/* ID row: small square photo + name/role */
.crew-id{
  /* Photo with its links attached underneath, name and role beside it. Five of
     these share the row, so a card is about 265px at 1440: nothing else fits on
     the name's line without breaking the surname mid-word. */
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  grid-template-areas:"photo txt" "links txt";
  align-items:start; row-gap:7px; column-gap:14px;
  padding:14px;
  border-bottom:1px solid var(--rule);
}
.crew-photo{grid-area:photo}
.crew-id-txt{grid-area:txt; min-width:0}
.crew-id .pills{grid-area:links}
/* A strip under the portrait, same width, splitting it evenly however many
   links a person has. Detached rather than fused: sharing the photo's border
   made the links read as the bottom band of the frame, as if they were eating
   into the picture. */
.crew-id .pills{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  width:92px;
}.crew-id-txt{min-width:0}
.crew-id .pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:22px; margin-right:-1px;
  border:1px solid var(--ink);
  font-family:var(--mono); font-size:9px; color:var(--ink);
  text-decoration:none; background:transparent;
  transition:background .15s, color .15s;
}
.crew-id .pill:last-child{margin-right:0}
.crew-id .pill:hover{background:var(--ink); color:var(--bone)}
.crew-photo img{
  display:block; width:92px; height:92px; object-fit:cover;
  border:1px solid var(--ink);
  filter:grayscale(1) contrast(1.06);
  transition:filter .35s ease;
}
.crew-card:hover .crew-photo img{filter:grayscale(0) contrast(1)}
/* no shots yet - apologetic dossier stamp in the photo slot */
.crew-photo-soon{
  width:92px; height:92px;
  display:flex; align-items:center; justify-content:center;
  padding:7px; text-align:center;
  border:1px solid var(--ink);
  background:
    repeating-linear-gradient(135deg, var(--rule) 0 1px, transparent 1px 9px),
    var(--bone);
  font-family:var(--mono); font-size:7.5px; font-weight:600;
  letter-spacing:.05em; line-height:1.5; text-transform:uppercase;
  color:var(--ink3);
}
.crew-name{
  margin:0; font-family:var(--sans); font-weight:800;
  font-size:clamp(16px,1.25vw,20px); letter-spacing:-.02em; line-height:1.1;
}
.crew-role{
  margin:6px 0 0;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--red);
}

/* dossier rows */
.crew-body{padding:0 14px 14px}
.crew-meta{margin:0; padding:0; display:flex; flex-direction:column}
.crew-meta > div{
  display:grid; grid-template-columns:52px 1fr; gap:10px;
  padding:7px 0;
  border-bottom:1px solid var(--rule);
}
.crew-meta dt{
  margin:0; font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.2em; color:var(--ink3); padding-top:2px;
}
.crew-meta dd{margin:0; font-size:13px; line-height:1.45; color:var(--ink2)}

/* footer: stat + socials */


/* ─── brand mark · dark mode = Nuit palette ───
   Pinned to the Brand Bible's Nuit variant (F55A46 / FFFFFF / 9CA0A6) - the
   manual sanctions the coral in dark contexts, and the wordmark's "3"
   follows it. Light-mode fills live on the polygons themselves. */
[data-theme="dark"] .brand-mark polygon:nth-child(1),
[data-theme="dark"] .footer-brand svg polygon:nth-child(1){fill:var(--red)}
[data-theme="dark"] .brand-mark polygon:nth-child(2),
[data-theme="dark"] .footer-brand svg polygon:nth-child(2){fill:#FFFFFF}
[data-theme="dark"] .brand-mark polygon:nth-child(3),
[data-theme="dark"] .footer-brand svg polygon:nth-child(3){fill:#9CA0A6}
[data-theme="dark"] .brand-word .brand-three{color:var(--red)}
[data-theme="dark"] .footer-brand .display-sm em{color:var(--red)}


/* ─── playground - strip list + filmstrip (ventures treatment) ───
   Reuses .ventures/.strip-* from the home section; the filmstrip slides
   host the hand-crafted .pg-preview-frame art instead of screenshots. */
.pg-strip{padding-top:clamp(88px,9vw,120px)}
.pg-strip .marker{padding-top:0}
.pg-strip .what-head .lead a{
  color:var(--red); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:1px;
}
.pg-strip .strip-media .pg-preview-frame{
  position:absolute; inset:0;
  aspect-ratio:auto; border:none;
}


/* ─── mobile inline previews - linkless rows expand the shot in place ───
   The pf sticky panel is hidden ≤960px and the ventures chasing card is
   removed on touch, so rows with no product URL toggle these instead of
   jumping to #contact. Collapsed via grid 0fr → 1fr (padding lives on the
   grandchild so the closed state is truly zero-height). */
.pf-mob, .strip-mob{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.16,1,.3,1);
}
.pf-mob.is-open, .strip-mob.is-open{grid-template-rows:1fr}
.pf-mob-inner, .strip-mob-inner{overflow:hidden; min-width:0}
.pf-mob.is-open{border-bottom:1px solid var(--pf-rule)}

.pf-mob-pad{padding:16px 4px 18px}
.pf-mob-pad img{
  width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top;
  display:block; border:1px solid var(--pf-rule);
}
.pf-mob-pad .pf-shot{border:1px solid var(--pf-rule); border-bottom-width:1px}
.pf-mob-pad .pf-desc{margin-top:12px}
/* open row reads as active: red sweep + arrow turns down */
.pf-row.is-mob-open .pf-name{background-size:100% 88%; color:#fff}
.pf-row.is-mob-open .pf-ar{opacity:1; transform:rotate(90deg)}

.strip-mob.is-open{border-bottom:1px solid var(--rule)}
/* The panel is a child of .strip-list, which is a five-column grid, so without
   this it was laid into the first column only and the preview stopped around
   40% of the width. */
.strip-mob{grid-column:1 / -1}
.strip-mob-pad{padding:4px 4px 22px}
.strip-mob-pad img,
.strip-mob-pad video{
  width:100%; height:auto; display:block; border:1px solid var(--ink);
}
/* No forced 16/9: the demos are not all that shape (Lead AI is 1080x468), and
   boxing them into it letterboxed the wide ones against a dark field. Natural
   ratio, so each fills its own frame edge to edge. */
.strip-mob-pad img{aspect-ratio:auto; object-fit:contain}
.strip-mob-pad video{background:var(--ink)}

/* ── Cookie consent banner ─────────────────────────────────────────────── */
.cookie-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--ink); color:var(--bone);
  border-top:1px solid var(--rule);
  padding:16px 20px;
}
.cookie-consent[hidden]{ display:none; }
.cc-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.cc-text{ margin:0; max-width:72ch; font-family:var(--mono); font-size:13px; line-height:1.55; }
.cc-text a{ color:var(--red); text-decoration:underline; }
.cc-actions{ display:flex; gap:10px; flex-shrink:0; }
.cc-btn{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  padding:11px 20px; border-radius:999px; cursor:pointer;
  border:1px solid var(--bone); background:transparent; color:var(--bone);
  transition:background .2s, color .2s, border-color .2s;
}
.cc-btn--ghost:hover{ background:rgba(255,255,255,.12); }
.cc-btn--solid{ background:var(--bone); color:var(--ink); }
.cc-btn--solid:hover{ background:var(--red); color:#fff; border-color:var(--red); }
@media (max-width:640px){
  .cc-inner{ flex-direction:column; align-items:stretch; gap:14px; }
  .cc-actions{ justify-content:flex-end; }
}

/* ── Footer legal links ────────────────────────────────────────────────── */
.footer-legal a{ text-decoration:underline; }
.footer-legal a:hover{ color:var(--red); }

/* ── Legal / policy pages ──────────────────────────────────────────────── */
.legal{ padding:120px 0 100px; }
.legal-head{ max-width:760px; margin-bottom:40px; }
.legal-meta{ font-family:var(--mono); font-size:12px; opacity:.6; margin-top:10px; }
.legal-body{ max-width:760px; }
.legal-body h3{ font-size:22px; margin:40px 0 12px; letter-spacing:-.01em; }
.legal-body h4{ font-size:16px; margin:24px 0 6px; }
.legal-body p{ line-height:1.7; margin:0 0 14px; opacity:.9; }
.legal-body a{ color:var(--red); text-decoration:underline; }
.legal-body code{ font-family:var(--mono); font-size:.88em; padding:1px 5px; border:1px solid var(--rule); border-radius:4px; }
.legal-tablewrap{ overflow-x:auto; margin:16px 0 8px; }
.legal-table{ width:100%; border-collapse:collapse; font-size:14px; }
.legal-table th, .legal-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top; }
.legal-table th{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.legal-cta{ margin-top:32px; }
.strip-row.is-mob-open .strip-name{color:#fff; background-size:100% 88%; transform:translateX(14px)}
/* The product link lives inside the expanded panel on touch, since the row
   itself now opens the preview rather than navigating. */
.strip-mob-open{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  /* Flush against the video and inverted, so it reads as the action attached
     to what you are looking at rather than another row of the list. The border
     is shared with the frame above it, hence the -1px. */
  margin-top:-1px; padding:12px;
  border:1px solid var(--ink); background:var(--ink); text-decoration:none; color:var(--bone);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
.strip-mob-open .ar{color:var(--red)}
.strip-mob-open:hover{background:var(--red); border-color:var(--red); color:#fff}
.strip-mob-open:hover .ar{color:#fff}
.strip-row.is-mob-open .strip-ar{opacity:1; transform:rotate(90deg)}

@media (prefers-reduced-motion: reduce){
  .pf-mob, .strip-mob{transition:none}
}

/* Named model versions (Qwen 3.6, Kimi K2.5, DeepSeek V3.2) age in months.
   Dating the section is honest and stops the page becoming evidence we are
   out of date. Re-check quarterly. */
.marker .marker-rev{
  margin-left:auto; font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink4);
}
@media (max-width:560px){ .marker .marker-rev{display:none} }

/* link out of the merged what-section to /ai-development/ */
.what-more{margin:26px 0 34px; display:flex}

/* ─── FAQ (homepage 05) - native details/summary, no JS ─── */
.faq{padding:clamp(56px,7vw,96px) 0}
.faq-list{max-width:820px; border-top:1px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:18px 2px; cursor:pointer; list-style:none;
  font-weight:700; font-size:clamp(16px,1.6vw,19px); color:var(--ink);
}
.faq-q::-webkit-details-marker{display:none}
.faq-tog{font-family:var(--mono); color:var(--red); font-weight:700; flex-shrink:0}
.faq-item[open] .faq-tog{transform:rotate(45deg)}
.faq-tog{transition:transform .18s ease}
.faq-a{
  margin:0; padding:0 2px 20px; max-width:64ch;
  color:var(--ink3); font-size:15px; line-height:1.6;
}
/* ── the drawer ──────────────────────────────────────────────────────────
   <details> cannot animate on its own: it snaps. The script wraps the answer
   in a slot it can measure and drive, and the answer slides out of that slot
   as it opens - the panel deepens while the text comes forward, which is what
   makes it read as a drawer being pulled rather than a block appearing. */
.faq-slot{overflow:hidden; will-change:height}
/* The curve matters more here than anywhere else on the page, because the
   distance varies so much: the shortest answer moves 68px and the longest 260.
   The old curve spent 46% of its time on the last 10% of the travel, which on
   a short answer is four pixels nobody sees and on a long one is twenty-six
   arriving at 2px a frame - the drawer looked like it had finished, then
   finished again. This one holds an almost even speed and lands, so the last
   stretch still reads as movement. The duration is set per open from the
   distance (see index.html); these are the fallback values. */
.js-faq .faq-slot{transition:height .34s cubic-bezier(0,0,.8,1)}
/* The answer does not animate on its own: the drawer growing is what reveals
   it, the way a real drawer does. Sliding and fading the text separately meant
   the box finished opening while the words were still arriving, which reads as
   two movements instead of one. Only the height moves. */
/* Closing is faster than opening and eases the other way. Opening eases out,
   which is right - it settles. Reversed, that same curve crawls to the finish,
   and a panel that lingers on its way shut reads as lag. */
.js-faq .faq-item.is-closing .faq-slot{transition-duration:.2s; transition-timing-function:cubic-bezier(.4,0,1,1)}

/* ── the answer deploys into a panel ────────────────────────────────────
   From 1000px the questions keep the left 60% and the answer travels out of
   the one you clicked into a panel on the right 40%, which is anchored to the
   head of the section rather than to whichever question sent it - so the panel
   always appears in the same place and the eye learns where to look.

   The move has three beats, and they are deliberate: the panel travels, then
   it opens, then the words arrive. Doing all three at once reads as a box
   appearing; staged, it reads as something being brought out and unfolded.

   Below 1000px none of this exists and it stays the drawer. */
.faq-split{display:block}
.faq-stage{display:none}
@media (min-width:1000px){
  .faq-split{
    display:grid; align-items:start;
    grid-template-columns:60% 40%;
    column-gap:clamp(28px,3.2vw,60px);
  }
  .faq-list{max-width:none}
  .js-faq .faq-list .faq-slot{display:none}

  .faq-stage{display:block; position:relative; min-height:100%}
  .faq-panel{
    position:sticky; top:104px;
    background:var(--paper); border:1px solid var(--ink);
    padding:0; overflow:hidden;
    opacity:0; visibility:hidden;
    transform:translate(var(--fx,0), var(--fy,0)) scale(.86);
    transform-origin:left top;
    /* The height curve is the one the phone drawer uses, and for the same
       reason: an ease-out with a long tail spends nearly half its time on the
       last tenth of the travel, which on a 280px panel is thirty pixels
       arriving at two a frame. This one holds an even speed and lands. The
       duration is set per open from the distance (see index.html); .34s is
       the fallback. */
    transition:transform .42s cubic-bezier(.22,.61,.36,1),
               opacity .26s ease,
               height .34s cubic-bezier(0,0,.8,1),
               visibility 0s linear .42s;
  }
  /* 1 - it has travelled and is standing in place, still shut */
  .faq-panel.is-here{opacity:1; visibility:visible; transform:none; transition-delay:0s,0s,0s,0s}
  /* 2 - it opens to its own height (set inline, measured) */
  /* 3 - the words arrive */
  .faq-panel-in{
    padding:clamp(18px,1.8vw,26px);
    opacity:0; transform:translateY(10px);
    transition:opacity .3s ease, transform .34s cubic-bezier(.22,.61,.36,1);
  }
  .faq-panel.is-filled .faq-panel-in{opacity:1; transform:none}

  .faq-panel-top{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-bottom:14px;
    font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink4);
  }
  .faq-panel-n{color:var(--red)}
  .faq-panel-q{
    margin:0 0 12px; font-weight:800; letter-spacing:-.02em; line-height:1.15;
    font-size:clamp(17px,1.5vw,21px); color:var(--ink);
  }
  .faq-panel-rule{height:1px; background:var(--rule); margin:0 0 14px}
  .faq-panel-body{margin:0; font-size:16px; line-height:1.65; color:var(--ink3)}

  /* Leaving is the journey run backwards: it shrinks and travels home to the
     question that sent it, and only then does the next one come out. At 180ms
     and a 6px nudge the exit was over before the eye caught it, so the panel
     looked like it simply swapped contents. */
  .faq-panel.is-going{
    opacity:0;
    transform:translate(var(--fx,0), var(--fy,0)) scale(.86);
    transition:transform .34s cubic-bezier(.4,0,1,1),
               opacity .26s ease .04s,
               visibility 0s linear .34s;
  }
}
@media (prefers-reduced-motion:reduce){
  .js-faq .faq-slot{transition:none}
  .faq-panel, .faq-panel-in{transition:none !important}
}

/* visually hidden, present for screen readers and crawlers */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* case-study outcome - the sentence a build has to earn, before the stack */
.pf-outcome{
  margin:12px 0 2px; padding-left:14px; max-width:56ch;
  border-left:3px solid var(--red);
  font-weight:600; font-size:14.5px; line-height:1.5; color:var(--ink);
}