@charset "utf-8";
/* ==========================================================================
   ORGANIZATIONAL INTELLIGENCE — design system
   Built from OI Brand & Social Style Guide v1.0 (2026)
   Six rules to ship by:
     1. Black on paper. One loud accent — no more.
     2. Display headlines in sentence case, big and tight.
     3. Exactly one highlighter mark and/or one underline.
     4. People are B&W cut-outs, anchored to an edge.
     5. Square corners, hard offset shadows — never soft & round.
     6. No gradients, no emoji, no stock smiles.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root{
  /* Core */
  --ink:        #111111;
  --paper:      #F4F2EF;
  --paper-card: #F9F8F6;
  --cobalt:     #004AFF;
  --cobalt-press:#0035C4;

  /* Expressive accents — flat, never gradient · one per composition.
     Cobalt / coral / lime / violet are the logo cluster colours: cobalt
     doubles as the interactive primary, the other three stay on the mark. */
  --coral:  #FF5A4D;
  --red:    #FC442E;
  --lime:   #9FEF04;
  --yellow: #FCC304;
  --cyan:   #18C8F0;
  --violet: #7A1FCC;

  /* Per-section accent. Sections override --accent; nothing else does. */
  --accent: var(--cobalt);
  --accent-ink: #FFFFFF; /* legible text colour on --accent */

  /* ===================================================== TYPE SYSTEM =====
     THREE FONTS, THREE JOBS. No font does another's work.

       ANTON    — DISPLAY.  Things that are said, not read. Headlines and
                  payoff lines: taken in at a glance, never a paragraph.
       ARCHIVO  — READING.  Every paragraph, list, card body, button, form
                  field and nav item. If it is meant to be read, it is Archivo.
       COURIER  — ACCENT.   The voice, in small doses. Labels, kickers,
                  eyebrows, pull-out questions, captions, sources. Never a
                  paragraph — monospace is slower to read, which is charming
                  for a line and a tax over a block.

     ELEVEN SIZES, and no others. If something needs a size that isn't here,
     the answer is a different tier, not a new number. */
  --display: 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --ui:      'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:    'Courier Prime', 'Courier New', Courier, monospace;

  /* DISPLAY — Anton. Five steps. Sentence case, tight leading. */
  --d1: clamp(2.75rem, 9vw, 7rem);        /* 44→112  the one big moment per page */
  --d2: clamp(2.375rem, 6.8vw, 5rem);     /* 38→80   page h1, section payoff     */
  --d3: clamp(1.875rem, 4.8vw, 3.25rem);  /* 30→52   section h2                  */
  --d4: clamp(1.375rem, 2.8vw, 1.875rem); /* 22→30   h3, emphasis, pull-outs     */
  --d5: clamp(1.125rem, 1.8vw, 1.375rem); /* 18→22   step names, faq, card h3    */

  /* READING — Archivo. Three steps. */
  --r1: clamp(1.0625rem, 1.6vw, 1.3125rem); /* 17→21  standfirst / lead          */
  --r2: clamp(1rem, 1.15vw, 1.0625rem);     /* 16→17  body copy                  */
  --r3: 0.9375rem;                          /* 15     card body, UI, secondary   */

  /* ACCENT — Courier Prime. Three steps. */
  --a1: clamp(0.9375rem, 1.1vw, 1.0625rem); /* 15→17  eyebrows, pull-out lines   */
  --a2: 0.8125rem;                          /* 13     the label tier, always 700 */
  --a3: 0.75rem;                            /* 12     legal, fine print          */

  /* Legacy aliases — kept so nothing breaks mid-refactor. Prefer the names
     above; these map onto the same values. */
  --t-mega: var(--d1);
  --t-h1:   var(--d2);
  --t-h2:   var(--d3);
  --t-h3:   var(--d4);
  --t-lead: var(--r1);
  --t-body: var(--r2);
  --t-label:var(--a2);

  /* Space */
  --gut: clamp(1.25rem, 5vw, 5.5rem);
  --sec: clamp(3.25rem, 7.5vw, 6.5rem);
  --max: 1360px;

  /* Structure — square corners, hard offset shadows */
  --rule: 2px solid var(--ink);
  --rule-hair: 1px solid rgba(17,17,17,.18);
  --shadow: 8px 8px 0 var(--ink);
  --shadow-sm: 5px 5px 0 var(--ink);
  --header-h: 74px;
}

@media (max-width:800px){ :root{ --shadow:6px 6px 0 var(--ink); --header-h:64px; } }

/* This brand is a single committed look: warm paper, black ink.
   It does not invert — the palette is the identity. */

/* ---------------------------------------------------------- 2. FOUNDATION */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);          /* READING — every paragraph is Archivo */
  font-size:var(--r2);
  line-height:1.62;
  /* Scanned-paper tooth — optional per the guide, kept very faint */
  background-image:
    radial-gradient(rgba(17,17,17,.028) 1px, transparent 1px),
    radial-gradient(rgba(17,17,17,.018) 1px, transparent 1px);
  background-size:3px 3px, 7px 7px;
  background-position:0 0, 2px 3px;
}

img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }

::selection{ background:var(--yellow); color:var(--ink); }

/* Focus — visible, square, never a soft glow */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--cobalt);
  outline-offset:3px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:.85rem 1.25rem;
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
}
.skip-link:focus{ left:0; }

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

/* ---------------------------------------------------------- 3. TYPOGRAPHY */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.005em;
  text-transform:none;   /* sentence case — rule 2 */
  margin:0;
  text-wrap:balance;
}
h1{ font-size:var(--t-h1); }
/* Anton carries .9 at 68px; at 52px it starts to look cramped across lines. */
h2{ font-size:var(--t-h2); line-height:.94; }
h3{ font-size:var(--t-h3); line-height:.98; }
h4{ font-size:var(--d5); line-height:1.05; }

p{ margin:0 0 1.15em; max-width:62ch; }
p:last-child{ margin-bottom:0; }

/* ---- The micro-label tier -------------------------------------------------
   Eyebrows, card indices, chips, meta, form labels, footer column heads.
   One rule sets the whole tier so it can never drift apart: Courier Prime
   700 at 13px with .14em tracking. Bold mono needs the tracking — without it
   the letterforms close up and muddy. */
.kicker,.card__index,.callout__label,.idea__type,.dims li,.bar__name,
.meta,.motif-caption,.field > span,.footer-col h3,#check-progress-text{
  font-family:var(--mono);
  font-size:var(--t-label);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.kicker{
  color:var(--ink);
  margin:0 0 1.5rem;
  display:flex; align-items:center; gap:.7rem;
}
.kicker::before{
  content:""; width:14px; height:14px; flex:none;
  background:var(--accent);
}
.kicker--plain::before{ display:none; }

.lead{ font-family:var(--ui); font-size:var(--r1); line-height:1.55; max-width:56ch; }

/* Long-form functional copy switches to the supporting grotesque so dense
   blocks stay readable; narrative voice stays typewriter. */
/* Archivo is the default now, so these only carry rhythm. Kept because a
   lot of markup references them. */
.ui-text{ line-height:1.65; }

/* The same rule, applied to a whole block rather than one paragraph. Goes on
   the dense argument sections — the cost, the AI case, the territory bodies —
   where a wall of typewriter is a tax on the reader. Headlines, kickers,
   pull-quotes and short narrative beats stay mono, so the voice survives. */
.prose p{ max-width:60ch; }

.emphasis{
  font-family:var(--display);
  font-size:var(--t-h3);
  line-height:1;
  max-width:22ch;
  margin:1.75rem 0 0;
}

.display-line{
  font-family:var(--display);
  font-size:var(--t-h2);
  line-height:.92;
  margin:0;
}
/* One sentence across two sizes, not a label plus a headline — so it stays a
   single element and a screen reader announces it as one sentence. Sentence
   case on purpose: uppercasing turns it back into a label. */
.lead-in{
  display:block;
  font-family:var(--mono); font-weight:400;
  font-size:var(--a1);
  letter-spacing:.02em; line-height:1.3;
  margin-bottom:.55rem;
}

/* Exactly one highlighter mark and/or one underline — rule 3 */
/* Painted as a sized gradient, not a full-height inline background: at
   line-height .9 a full line box would climb into the line above. */
.mark{
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-repeat:no-repeat;
  background-size:100% .82em;
  background-position:0 92%;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding-inline:.12em; margin-inline:-.12em;
}
/* One underline, not one per wrapped line — so it stays a single mark. */
.underline{
  display:inline-block;
  border-bottom:.14em solid var(--accent);
  padding-bottom:.06em;
}

a{ color:var(--ink); text-underline-offset:.22em; text-decoration-thickness:1.5px; }
a:hover{ color:var(--cobalt); }

/* ------------------------------------------------------------- 4. LAYOUT */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sec); position:relative; overflow:hidden; }
.section--tight{ padding-block:clamp(3rem,7vw,6rem); }
/* Butts up against the section above. Two full --sec paddings back to back
   read as a hole when there is no rule or ground change between them to
   justify the air. */
.section--butt{ padding-top:clamp(1.5rem,3vw,2.5rem); }
.section--ink{ background:var(--ink); color:var(--paper); }
.section--ink h1,.section--ink h2,.section--ink h3{ color:var(--paper); }
.section--ink a{ color:var(--paper); }
.section--ink .kicker{ color:var(--paper); }
.section--rule{ border-top:var(--rule); }
/* Where a section owns an accent that its own cards don't override, the top
   rule carries it — otherwise the accent has nothing to paint and the section
   reads as unaccented. */
.section--rule.accent-violet{ border-top-color:var(--violet); }

/* The turn from cost to possibility. Dark → red → bright: the page's biggest
   emotional shift should not happen on the same ground as the section before
   it. Ink on lime is 13.33:1, so it is safe at any size. */
.section--bright{ background:var(--lime); color:var(--ink); }
.section--bright .kicker{ color:var(--ink); }

/* Six promises as discrete objects rather than one wall of display type.
   The copy is set in the grotesque on purpose: at sentence length, condensed
   display type compacts into a brick. */
.possibles{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);
}
.possibles li{
  background:var(--paper); border:var(--rule); box-shadow:var(--shadow-sm);
  padding:clamp(1.1rem,2.2vw,1.6rem);
  font-family:var(--ui); font-size:var(--r3); line-height:1.5;
  display:flex; gap:.75rem; align-items:flex-start;
}
.possibles li::before{
  content:""; flex:none; margin-top:.28em;
  width:.62em; height:.62em;
  border-left:.16em solid var(--ink);
  border-bottom:.16em solid var(--ink);
  transform:rotate(-45deg);
}
@media (max-width:980px){ .possibles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .possibles{ grid-template-columns:minmax(0,1fr); } }

.grid{ display:grid; gap:clamp(1.5rem,3.5vw,3rem); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid--split{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:start; }
@media (max-width:980px){
  .grid--3,.grid--4,.grid--split{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4,.grid--split{ grid-template-columns:minmax(0,1fr); }
}

.stack > * + *{ margin-top:1.15rem; }
.section-head{ max-width:44rem; margin-bottom:clamp(2.25rem,5vw,3.75rem); }

/* -------------------------------------------------------------- 5. HEADER */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:var(--rule);
  height:var(--header-h);
  display:flex; align-items:center;
}
.site-header .wrap{ display:flex; align-items:center; gap:1.5rem; }

.logo{ display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:none; margin-right:auto; }
.logo__word{
  font-family:var(--display);
  font-size:clamp(.94rem,1.5vw,1.06rem);
  line-height:.86;
  letter-spacing:.002em;
  color:var(--ink);
  white-space:nowrap;
}
.logo__cluster{ width:22px; height:22px; flex:none; }
.logo--stack .logo__word{ font-size:clamp(1.6rem,3vw,2.1rem); }
.logo--stack .logo__cluster{ width:38px; height:38px; }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2vw,1.9rem); }
.nav a{
  font-family:var(--ui);
  font-size:var(--r3);
  font-weight:600;
  text-decoration:none;
  color:var(--ink);
  white-space:nowrap;
  padding-block:.4rem;
  border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{ border-bottom-color:var(--cobalt); color:var(--ink); }
@media (max-width:1180px){ .nav--desktop{ display:none; } }

.nav-toggle{
  display:none; flex:none;
  background:var(--paper); border:var(--rule); color:var(--ink);
  font-family:var(--mono); font-size:var(--a3); letter-spacing:.14em; text-transform:uppercase;
  padding:.85rem 1rem; min-height:44px; cursor:pointer;   /* comfortable tap target */
}
/* Two header buttons now: the assessment in yellow, the consultation in
   cobalt. They read as a pair, but each carries a hard offset shadow, so the
   gap between them can never close below that shadow or they collide. */
.site-header .header-cta + .header-cta{ margin-left:.35rem; }

@media (max-width:1180px){
  .nav-toggle{ display:block; }
  .site-header .header-cta{ display:none; }  /* beats .btn's display:inline-flex */
}
/* Two buttons plus four nav items is a lot of header. Below 1360 the nav
   tightens first, so the button pair keeps its breathing room. */
@media (max-width:1360px) and (min-width:1181px){
  .site-header .wrap{ gap:1rem; }
  .nav--desktop{ gap:1.1rem; }
}

.nav-drawer{
  position:fixed; inset:var(--header-h) 0 auto 0; z-index:99;
  background:var(--paper); border-bottom:var(--rule);
  padding:1.5rem var(--gut) 2rem;
  display:none;
}
.nav-drawer[data-open="true"]{ display:block; }
.nav-drawer a{
  display:block; font-family:var(--display); font-size:var(--d5); line-height:1;
  text-decoration:none; padding:.7rem 0; border-bottom:var(--rule-hair);
}
.nav-drawer .btn{ margin-top:1.5rem; width:100%; }

/* ------------------------------------------------------------ 6. BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--ui); font-weight:700; font-size:var(--r3); line-height:1;
  padding:1.05rem 1.6rem;
  border:var(--rule);
  border-radius:0;                     /* square corners — rule 5 */
  text-decoration:none; cursor:pointer;
  background:var(--paper); color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); color:var(--ink); }
.btn:active{ transform:translate(5px,5px); box-shadow:0 0 0 var(--ink); }

.btn--primary{ background:var(--cobalt); color:#fff; border-color:var(--ink); }
.btn--primary:hover{ background:var(--cobalt-press); color:#fff; }

.btn--ghost{ background:transparent; box-shadow:none; }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); transform:none; box-shadow:none; }

.btn--sm{ padding:.72rem 1.05rem; font-size:var(--a2); box-shadow:3px 3px 0 var(--ink); }
.btn--lg{ padding:1.25rem 2rem; font-size:var(--r2); box-shadow:var(--shadow); }

.section--ink .btn{ border-color:var(--paper); box-shadow:5px 5px 0 var(--paper); background:transparent; color:var(--paper); }
.section--ink .btn:hover{ box-shadow:2px 2px 0 var(--paper); background:var(--paper); color:var(--ink); }
.section--ink .btn--primary{ background:var(--cobalt); color:#fff; border-color:var(--paper); }
.section--ink .btn--primary:hover{ background:var(--cobalt-press); color:#fff; }

.btn-row{ display:flex; flex-wrap:wrap; gap:1rem 1.15rem; align-items:center; }

/* Text link with arrow */
.link-arrow{
  font-family:var(--ui); font-weight:700; font-size:var(--r3);
  text-decoration:none; display:inline-flex; align-items:center; gap:.45rem;
  border-bottom:2px solid var(--ink); padding-bottom:.15rem;
}
.link-arrow:hover{ border-bottom-color:var(--cobalt); }
.link-arrow span[aria-hidden]{ transition:transform .14s ease; }
.link-arrow:hover span[aria-hidden]{ transform:translateX(4px); }

/* -------------------------------------------------------------- 7. CARDS */
.card{
  background:var(--paper-card);
  border:var(--rule);
  box-shadow:var(--shadow);
  padding:clamp(1.5rem,2.6vw,2.25rem);
  position:relative;
  height:100%;
  display:flex; flex-direction:column;
}
.card--flat{ box-shadow:none; }
/* A brick per card, same corner and scale on every one so the set reads as a
   system rather than six separate decisions. Paper cut-outs — the ink variants
   are cut for a dark ground and look wrong here. */
.card-brick{
  position:absolute; top:.9rem; right:.9rem;
  width:clamp(40px,3.4vw,56px); height:clamp(40px,3.4vw,56px);
  line-height:0; pointer-events:none;
}
/* A fixed square with contain, not a width alone: the source artworks have
   different orientations inside their canvas, so sizing by width lets the
   tall ones spill past the card edge. */
.card-brick img{ width:100%; height:100%; object-fit:contain; object-position:top right; }
.card-brick + h3{ padding-right:clamp(46px,4vw,64px); }
/* Seven cards in a three-column grid would strand the last one beside two
   empty cells. The seventh spans two instead, so the final row reads as a
   deliberate wide card rather than a leftover. */
.card--wide{ grid-column:span 2; }
@media (max-width:980px){ .card--wide{ grid-column:span 1; } }
.card--ink{ background:var(--ink); color:var(--paper); }
.card--ink h3{ color:var(--paper); }

.card__index{
  color:var(--accent);
  margin-bottom:.9rem;
}
.card__prompt{
  font-family:var(--ui);
  font-size:var(--r3);
  margin:.85rem 0 1.15rem;
  padding-left:.9rem;
  border-left:4px solid var(--accent);
}
.card__body{ font-family:var(--ui); font-size:var(--r3); line-height:1.55; }

/* Territory card gets its own loud accent — one per card, not per page,
   because each card is its own composition. */
.card--territory{ padding-top:clamp(1.75rem,3vw,2.5rem); }
.card--territory::before{
  content:""; position:absolute; inset:0 0 auto 0; height:10px; background:var(--accent);
}

/* -------------------------------------------------------- 8. COLLAGE KIT */
/* Assembled, not arranged. Anchor the pinwheel, scatter a dot grid and a
   torn scrap, add a single arrow. Tilt ±2°. Never overcrowd. */

.collage{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.section > .wrap{ position:relative; z-index:1; }

.dot-grid{
  position:absolute;
  background-image:radial-gradient(var(--ink) 42%, transparent 43%);
  background-size:15px 15px;
  opacity:.5;
}
.section--ink .dot-grid{ background-image:radial-gradient(var(--paper) 42%, transparent 43%); opacity:.28; }

.scrap{ position:absolute; }
.tilt-l{ transform:rotate(-2deg); }
.tilt-r{ transform:rotate(2deg); }

.shape{ position:absolute; }
.shape--circle{ border-radius:50%; }
.shape--tri{ width:0; height:0; background:none!important; border-style:solid; }

.arrow{ position:absolute; width:clamp(72px,7vw,124px); }
.arrow path{ stroke:var(--ink); stroke-width:7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.section--ink .arrow path{ stroke:var(--paper); }

/* Collage lives in the margins. It never sits under running copy — the
   guide's "leave the paper breathing" rule, enforced structurally. */
@media (max-width:1180px){ .collage{ display:none; } }

/* The pinwheel — hero motif of the kit. Anchors a composition; one per page. */
.pinwheel{ width:100%; max-width:420px; }
.motif-panel{
  border:var(--rule); background:var(--paper-card);
  box-shadow:var(--shadow);
  padding:clamp(1.5rem,3.5vw,2.75rem);
  display:grid; place-items:center;
}
.motif-panel--ink{ background:var(--ink); border-color:var(--paper); box-shadow:8px 8px 0 var(--paper); }
.motif-caption{ margin-top:1rem; opacity:.7; }

/* Cut-out anchored to the bottom edge of a coloured panel — rule 4. */
.edge-figure{ position:relative; align-self:stretch; min-height:280px; margin:0; }
.edge-figure img{
  position:absolute; bottom:0; left:0; width:min(100%,360px);
  filter:grayscale(1) contrast(1.12);
}
@media (max-width:640px){ .edge-figure{ display:none; } }

/* ----------------------------------------------------------- 9. PORTRAIT */
/* People are B&W cut-outs, anchored to an edge — rule 4. Never in a
   rounded photo box, never full colour. */
.portrait{
  position:relative;
  align-self:end;
}
/* Desaturate the person, never the panel they sit on. */
.portrait img{ width:100%; filter:grayscale(1) contrast(1.06); }
/* Artwork, not a person: the brick colour is the point, so it keeps it. */
.portrait--colour img{ filter:none; }

/* ---- Founder block -------------------------------------------------------
   The two columns used to start together but end 203px apart: the copy ran
   out while the photo carried on. Bio starts level with the NAME rather than
   the kicker, and the last element is pushed to the bottom so the block closes
   flat on both edges. */
/* grid--split aligns to start, so the columns never stretch and margin-top:auto
   has nothing to push against. Stretching this one row is what lets the bio
   close level with the photo. */
#founder .grid--split{ align-items:stretch; }
.founder__bio{ display:flex; flex-direction:column; padding-top:2.6rem; }
.founder__bio > :last-child{ margin-top:auto; }
@media (max-width:980px){
  .founder__bio{ padding-top:0; }
  .founder__bio > :last-child{ margin-top:1.75rem; }
}
/* The role sits under the name in the accent tier, so a three-letter title
   never competes with the name at display size. */
.role{
  font-family:var(--mono); font-size:var(--a2); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  margin:.7rem 0 0; opacity:.72;
}
.portrait--panel{
  background:var(--accent);
  border:var(--rule);
  box-shadow:var(--shadow);
  padding-top:clamp(1.5rem,3vw,2.5rem);
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
}
.portrait--panel img{ margin-bottom:-2px; }

/* ------------------------------------------------------------ 10. HERO */
.hero{ padding-block:clamp(3rem,7vw,6rem) clamp(3.5rem,8vw,7rem); position:relative; overflow:hidden; }
.hero h1{ font-size:var(--t-mega); }
/* Descriptor above the mega headline. Deliberately the lightest thing on the
   page: regular mono, sentence case, no tracking shout — it names the studio
   without competing with the line it introduces. */
.hero-eyebrow{
  font-family:var(--mono); font-weight:400;
  font-size:var(--a1);
  letter-spacing:.02em; line-height:1.3;
  margin:0 0 clamp(.9rem,1.6vw,1.4rem);
}
.hero__inner{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(2rem,4vw,4rem); align-items:end; }
@media (max-width:900px){ .hero__inner{ grid-template-columns:minmax(0,1fr); } }

/* ------------------------------------------------------- 11. PROCESS LIST */
.steps{ list-style:none; margin:0; padding:0; border-top:var(--rule); }
.step{
  display:grid;
  grid-template-columns:clamp(4.5rem,8vw,7.5rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1.5rem,3vw,2.25rem);
  border-bottom:var(--rule-hair);
  align-items:start;
}
.step:last-child{ border-bottom:var(--rule); }
.step__num{
  font-family:var(--display); font-size:var(--d4); line-height:.85;
  color:var(--accent);
}
.step h3{ margin-bottom:.6rem; }
@media (max-width:560px){ .step{ grid-template-columns:minmax(0,1fr); gap:.6rem; } }

/* ---- Steps as parallel columns ------------------------------------------
   Same component, laid out across instead of down. The rules turn vertical so
   they say "these run in parallel" rather than "these are a stack", and the
   numbers shrink: at row scale they were nearly as loud as the section head.
   Set --step-cols per instance (5 on the homepage process, 3 on the LSP page). */
/* Separators are drawn by a 1px grid gap over a tinted background rather than
   per-item borders. Column count changes at three breakpoints and the wrap
   point differs per instance, so nth-child rules would be wrong half the time;
   the gap is always right. */
.steps--cols{
  display:grid;
  grid-template-columns:repeat(var(--step-cols,3),minmax(0,1fr));
  gap:1px;
  background:rgba(17,17,17,.18);
  border-top:var(--rule); border-bottom:var(--rule);
}
.steps--cols .step{
  display:block;
  background:var(--paper);
  padding:clamp(1.25rem,2.2vw,1.75rem) clamp(.9rem,1.6vw,1.4rem);
  border:0;
}
.section--ink .steps--cols{ background:rgba(244,242,239,.22); }
.section--ink .steps--cols .step{ background:var(--ink); }
.steps--cols .step__num{ font-size:var(--d4); display:block; margin-bottom:.5rem; }
.steps--cols .step h3{ font-size:var(--d5); margin-bottom:.5rem; }
.steps--cols .step p{
  font-family:var(--ui); font-size:var(--r3); line-height:1.5; max-width:none;
}
@media (max-width:1180px){ .steps--cols{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px){ .steps--cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .steps--cols{ grid-template-columns:minmax(0,1fr); } }

/* ------------------------------------------------------- 12. DIMENSION ROW */
.dims{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:1.75rem 0; padding:0; }
.dims li{ border:var(--rule); padding:.6rem .95rem; background:var(--paper-card); }
.section--ink .dims li{ background:transparent; border-color:var(--paper); color:var(--paper); }

/* --------------------------------------------------------- 13. STAT / META */
.meta{ opacity:.78; }

/* -------------------------------------------------------------- 14. FOOTER */
.site-footer{ background:var(--ink); color:var(--paper); padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem; }
.site-footer a{ color:var(--paper); text-decoration:none; }
.site-footer a:hover{ color:var(--lime); }
.site-footer .logo__word{ color:var(--paper); }
/* ---- Newsletter band -----------------------------------------------------
   Full width across the top of the footer: there is no room for a fifth
   column without crushing the other four, and the input needs to be wide. */
.signup{
  --accent:var(--yellow);          /* one accent per composition: matches the button */
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem); align-items:center;
  /* Bounded top and bottom so it reads as its own thing. The page above often
     ends on a CTA section, and without the top rule a second button here reads
     as a continuation of it rather than a separate offer. */
  border-top:2px solid var(--paper);
  padding-top:clamp(2.25rem,4vw,3.25rem);
  padding-bottom:clamp(2.25rem,4vw,3.25rem);
  margin-bottom:clamp(2.25rem,4vw,3.25rem);
  border-bottom:1px solid rgba(244,242,239,.22);
}
.site-footer .signup .kicker{ color:var(--paper); margin-bottom:1rem; }
.signup__pitch h3{ font-family:var(--display); font-size:var(--d4); color:var(--paper); margin:0; }
.signup__pitch p{ margin:.7rem 0 0; opacity:.72; max-width:46ch; }
.signup__form{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-start; }
.signup__form .input{ flex:1 1 15rem; }
.signup__form .btn{ flex:none; }
/* The paper field is built for paper grounds; on ink it needs its own skin.
   Element+class so it outranks .input, which is defined later in the file. */
input.input--ink{
  background:transparent; border-color:var(--paper); color:var(--paper);
}
input.input--ink::placeholder{ color:rgba(244,242,239,.45); }
.signup__msg{
  flex:1 1 100%; margin:.35rem 0 0;
  font-family:var(--ui); font-size:var(--r3); line-height:1.45;
}
.signup__msg[data-ok="true"]{ color:var(--lime); }
.signup__msg[data-ok="false"]{ color:var(--yellow); }
@media (max-width:860px){ .signup{ grid-template-columns:minmax(0,1fr); } }

.footer-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:clamp(2rem,4vw,3rem); }
@media (max-width:760px){ .footer-grid{ grid-template-columns:minmax(0,1fr); } }
.footer-col h3{ margin-bottom:1.1rem; opacity:.68; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li + li{ margin-top:.7rem; }
.footer-col li a{ font-family:var(--ui); font-weight:600; font-size:var(--r3); }
.footer-bottom{
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.75rem;
  border-top:1px solid rgba(244,242,239,.24);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-family:var(--mono); font-size:var(--a3); font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.66;
}
.legal{ max-width:70ch; font-family:var(--mono); font-size:var(--a3); line-height:1.7; opacity:.62; margin-top:1.5rem; }

/* --------------------------------------------------------- 15. PAGE HEADER */
.page-head{ padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem); border-bottom:var(--rule); position:relative; overflow:hidden; }
/* Held clear of the brick cluster scattered across the right of this head. */
.page-head h1{ max-width:min(18ch,52%); }
.page-head .lead{ max-width:min(56ch,58%); }
@media (max-width:1180px){
  .page-head h1{ max-width:20ch; }
  .page-head .lead{ max-width:56ch; }
}

/* --------------------------------------------------------- 16. IDEAS CARDS */
.idea{ display:flex; flex-direction:column; height:100%; text-decoration:none; }
.idea__media{ border:var(--rule); background:var(--accent); aspect-ratio:16/10; position:relative; overflow:hidden; }
.idea__media .dot-grid{ inset:auto -10% -20% 10%; height:70%; opacity:.35; }
.idea__type{ position:absolute; top:0; left:0; background:var(--ink); color:var(--paper); font-size:var(--a3); padding:.45rem .7rem; }
.idea__body{ border:var(--rule); border-top:0; background:var(--paper-card); padding:1.35rem; flex:1; display:flex; flex-direction:column; }
.idea h3{ font-size:var(--d5); margin-bottom:.6rem; }
.idea:hover .idea__body{ background:var(--paper); }
.idea__meta{ margin-top:auto; padding-top:1rem; }

/* -------------------------------------------------------------- 17. FAQ */
.faq{ border-top:var(--rule); }
.faq details{ border-bottom:var(--rule-hair); }
.faq summary{
  cursor:pointer; list-style:none; padding-block:1.4rem;
  font-family:var(--display); font-size:var(--d5); line-height:1.05;
  display:flex; gap:1rem; align-items:baseline; justify-content:space-between;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); font-size:var(--d5); color:var(--accent); flex:none; }
.faq details[open] summary::after{ content:"–"; }
.faq details > div{ padding-bottom:1.6rem; max-width:66ch; }

/* -------------------------------------------------------- 18. FORM / CHECK */
.field{ display:block; margin-bottom:1.4rem; }
.field > span{ display:block; margin-bottom:.55rem; }
.input{
  width:100%; font-family:var(--ui); font-size:var(--r2);
  padding:.95rem 1rem; background:var(--paper-card);
  border:var(--rule); border-radius:0; color:var(--ink);
}
.input::placeholder{ color:rgba(17,17,17,.4); }
.req{ color:var(--red); }
textarea.input{ resize:vertical; min-height:7rem; line-height:1.55; }
/* Gives an optional field a reason to exist, which is what stops a phone
   number reading as an intrusion. */
.field__hint{
  display:block; margin-top:.45rem;
  font-family:var(--ui); font-style:normal; font-size:var(--r3);
  opacity:.62; text-transform:none; letter-spacing:0;
}
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-error{
  font-family:var(--ui); font-size:var(--r3); line-height:1.5;
  border-left:4px solid var(--red); padding:.6rem 0 .6rem .8rem;
  margin:1rem 0 0; max-width:44ch;
}

/* ---- In-page episode player ----------------------------------------------
   Custom controls rather than the browser default, which would look foreign
   here. Square everything, hard edges, accent fill: the same language as the
   rest of the kit. */
.player{
  --played:0%;
  display:flex; align-items:center; gap:1rem;
  margin-top:1.5rem; padding-top:1.35rem;
  border-top:1px solid rgba(244,242,239,.22);
}
.player__play{
  flex:none; width:52px; height:52px; padding:0; cursor:pointer;
  background:var(--accent); border:2px solid var(--paper);
  display:grid; place-items:center;
}
.player__play:hover{ background:var(--paper); }
/* Triangle when paused, two bars when playing — drawn, so no icon font. */
.player__icon{
  width:0; height:0; display:block;
  border-left:14px solid var(--ink);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
  margin-left:3px;
}
.player[data-playing="true"] .player__icon{
  width:14px; height:16px; margin-left:0; border:0;
  background:linear-gradient(to right, var(--ink) 0 5px, transparent 5px 9px, var(--ink) 9px 14px);
}
.player__track{ flex:1 1 auto; min-width:0; }
.player__seek{
  -webkit-appearance:none; appearance:none; width:100%; height:14px;
  background:transparent; cursor:pointer; margin:0; display:block;
}
.player__seek::-webkit-slider-runnable-track{
  height:14px; border:2px solid var(--paper); background:transparent;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:var(--played) 100%; background-repeat:no-repeat;
}
.player__seek::-moz-range-track{
  height:14px; border:2px solid var(--paper); background:transparent;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:var(--played) 100%; background-repeat:no-repeat;
}
.player__seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:6px; height:22px; margin-top:-6px; background:var(--paper); border:0;
}
.player__seek::-moz-range-thumb{ width:6px; height:22px; background:var(--paper); border:0; border-radius:0; }
.player__time{
  font-family:var(--mono); font-size:var(--a3); letter-spacing:.08em;
  margin:.6rem 0 0; opacity:.7;
}
.player[data-error="true"]::after{
  content:"Couldn't play here — try the show notes link below.";
  font-family:var(--ui); font-size:var(--r3); opacity:.8;
}
@media (max-width:520px){ .player{ flex-wrap:wrap; } .player__track{ flex:1 1 100%; } }

/* anghami ships as a mark rather than a path, so it is tinted to match the
   inline SVG icons beside it. */
.platform__mark{
  width:24px; height:24px; flex:none;
  background:currentColor;
  -webkit-mask:url(../img/anghami.png) center/contain no-repeat;
  mask:url(../img/anghami.png) center/contain no-repeat;
}

.progress{ height:14px; border:var(--rule); background:var(--paper-card); overflow:hidden; }
.progress__bar{ height:100%; background:var(--cobalt); width:0; transition:width .25s ease; }

.q-card{ border:var(--rule); background:var(--paper-card); box-shadow:var(--shadow); padding:clamp(1.5rem,3vw,2.5rem); }
.q-legend{ font-family:var(--ui); font-weight:700; font-size:var(--r1); line-height:1.4; margin:0 0 1.5rem; padding:0; }

/* R5-1 — the shape of the assessment, stated before anything is asked.
   Separators come from the grid gap over a tinted ground, so a wrapped
   row never leaves a stray border hanging at the start of a line. */
.factbar{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:rgba(17,17,17,.18);
  border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);
}
.factbar li{ background:var(--paper); padding:.9rem 1rem .8rem; }
.factbar b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:var(--d4); line-height:1; letter-spacing:.01em;
}
.factbar span{
  display:block; margin-top:.3rem;
  font-family:var(--mono); font-size:var(--a3);
  text-transform:uppercase; letter-spacing:.14em; opacity:.62;
}
@media (max-width:560px){
  .factbar{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* R5-4 — the booking step on the results screen. Lime so it reads as the
   one thing to do next, not as another block of result. */
.nextstep{ background:var(--lime); border-color:var(--ink); }
.nextstep h2{ font-size:var(--d3); max-width:20ch; }
.nextstep .kicker::before{ background:var(--ink); }

.scale{ display:grid; gap:.6rem; margin:0; padding:0; border:0; }
.scale label{
  display:flex; align-items:center; gap:.85rem;
  border:var(--rule); background:var(--paper);
  padding:.85rem 1.05rem; cursor:pointer;
  font-family:var(--ui); font-weight:600; font-size:var(--r3);
  transition:background-color .1s ease, color .1s ease;
}
.scale label:hover{ background:var(--ink); color:var(--paper); }
.scale input{ accent-color:var(--cobalt); width:18px; height:18px; flex:none; }
.scale label:has(input:checked){ background:var(--cobalt); color:#fff; border-color:var(--ink); box-shadow:var(--shadow-sm); }
.scale label:has(input:focus-visible){ outline:3px solid var(--ink); outline-offset:3px; }

/* Results */
.score-hero{ border:var(--rule); background:var(--ink); color:var(--paper); padding:clamp(1.75rem,4vw,3rem); box-shadow:var(--shadow); }
.score-hero h2{ color:var(--paper); }
.score-num{ font-family:var(--display); font-size:var(--d1); line-height:.82; color:var(--lime); }

.bars{ list-style:none; margin:0; padding:0; }
.bars li{ padding-block:1.15rem; border-bottom:var(--rule-hair); }
.bars li:first-child{ border-top:var(--rule); }
.bar__top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.55rem; }
.bar__name{ /* tier */ }
.bar__val{ font-family:var(--display); font-size:var(--d5); line-height:1; }
.bar__track{ height:18px; border:2px solid var(--ink); background:var(--paper-card); }
.bar__fill{ height:100%; background:var(--cobalt); width:0; transition:width .5s ease; }
.bar__label{ font-family:var(--ui); font-weight:600; font-size:var(--r3); margin-top:.5rem; }

.callout{ border:var(--rule); padding:clamp(1.35rem,2.5vw,1.9rem); background:var(--paper-card); box-shadow:var(--shadow-sm); }
.callout__label{ color:var(--accent); margin-bottom:.6rem; }
.callout h3{ font-size:var(--d5); margin-bottom:.5rem; }

[hidden]{ display:none !important; }

/* ------------------------------------------------------------ 19. UTILITY */
.center{ text-align:center; margin-inline:auto; }
.center p{ margin-inline:auto; }
.mt-0{ margin-top:0; } .mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.accent-red{ --accent:var(--red); }
.accent-yellow{ --accent:var(--yellow); --accent-ink:var(--ink); }
.accent-cyan{ --accent:var(--cyan); --accent-ink:var(--ink); }
.accent-cobalt{ --accent:var(--cobalt); }
.accent-lime{ --accent:var(--lime); --accent-ink:var(--ink); }
.accent-coral{ --accent:var(--coral); --accent-ink:var(--ink); }
.accent-violet{ --accent:var(--violet); }

@media print{
  .site-header,.nav-drawer,.collage,.btn{ display:none !important; }
  body{ background:#fff; }
}

/* ------------------------------------------------------- 20. CHECK PAGE */
/* The check runs in a single narrow column: headings get the full measure
   rather than the 34ch marketing measure. */
#check .section-head{ max-width:none; }
#check h2{ max-width:20ch; }
#check .q-legend{ max-width:none; }
.site-footer .meta{ max-width:78ch; }

/* ==========================================================================
   21. NARRATIVE COMPONENTS
   Added for the cost -> possibility -> territories arc. These carry the
   commercial story, so they get real structure rather than styled paragraphs.
   ========================================================================== */

/* ---- Yellow action ------------------------------------------------------
   The assessment CTA. Ink on yellow is 11.6:1, so it is legible anywhere,
   but it pulls harder than cobalt — reserved for the one secondary action
   we actively want people to take. */
.btn--yellow{ background:var(--yellow); color:var(--ink); border-color:var(--ink); }
.btn--yellow:hover{ background:#E8B203; color:var(--ink); }
.section--ink .btn--yellow{ background:var(--yellow); color:var(--ink); border-color:var(--ink); box-shadow:5px 5px 0 var(--paper); }
.section--ink .btn--yellow:hover{ background:#E8B203; color:var(--ink); box-shadow:2px 2px 0 var(--paper); }
.section--ink .btn--yellow.btn--lg{ box-shadow:8px 8px 0 var(--paper); }

/* ---- Mechanism list -----------------------------------------------------
   The five ways a default turns into drag. Running copy, but each line is
   its own claim, so each gets a rule above it and room to land. */
.mechanisms{ list-style:none; margin:0; padding:0; border-top:var(--rule); }
.mechanisms li{
  padding-block:clamp(1rem,2vw,1.5rem);
  border-bottom:var(--rule-hair);
  font-family:var(--ui);
  font-size:var(--t-lead);
  line-height:1.55;
  max-width:62ch;
}
.mechanisms li:last-child{ border-bottom:var(--rule); }

/* ---- Mechanisms + a data point alongside them --------------------------
   The stat sits beside the list on wide screens and drops in after it on
   narrow ones, where a floating pull-quote would strand the reader. */
.mech-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
@media (max-width:900px){ .mech-grid{ grid-template-columns:minmax(0,1fr); } }

.stat{
  margin:0; border:var(--rule); padding:clamp(1.25rem,2.4vw,1.9rem);
  background:transparent;
}
.section--ink .stat{ border-color:var(--paper); }
.stat__num{
  font-family:var(--display); font-size:var(--d2);
  line-height:.85; color:var(--accent); margin:0 0 .5rem;
}
.stat__body{
  margin:0; font-family:var(--ui); font-size:var(--r3); line-height:1.5;
  max-width:34ch;
}
.stat__src{ margin-top:1.1rem; }
.stat__src a{
  font-family:var(--mono); font-size:var(--a3); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  opacity:.72; text-underline-offset:3px;
}
.stat__src a:hover{ opacity:1; }

/* ---- Symptom / promise stack -------------------------------------------
   Scannable, self-identifying: "which of these is me?". Display type, tight,
   one per line, an accent tick in the margin. The possibility version is the
   same component so the turn from cost to gain reads as a deliberate mirror. */
.stack-list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.stack-list li{
  font-family:var(--display);
  font-size:var(--d4);
  line-height:1.02;
  display:flex; align-items:baseline; gap:.75rem;
}
.stack-list li::before{
  content:""; flex:none;
  width:.42em; height:.42em;
  background:var(--accent);
  transform:translateY(-.12em);
}
/* The symptom pile: quantity is the point, so it runs denser and smaller than
   the possibility list it used to mirror. */
.stack-list--sm li{ font-size:var(--d5); line-height:1.15; }
/* The --tick variant was the possibility mirror of this list. Both places that
   used it (the bridge and the final CTA) now use .possibles and plain copy
   respectively, so the variant has been removed rather than left to rot. */

/* ---- Debt row -----------------------------------------------------------
   Meeting debt. Decision debt. Information debt. Coordination debt.
   The hinge of the argument — four flat plates, no ornament. */
.debt-row{ display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; margin:0; padding:0; }
.debt-row li{
  font-family:var(--display);
  font-size:var(--d5);
  line-height:1;
  padding:.7rem .95rem;
  border:var(--rule);
  background:var(--paper-card);
}
.section--ink .debt-row li{ background:transparent; border-color:var(--paper); color:var(--paper); }

/* ---- Verdict ------------------------------------------------------------
   The single line a section is actually for. Bigger than a heading, alone
   on its own row. Used for "It's organizational drag." and
   "AI amplifies the system it enters." */
.verdict{
  font-family:var(--display);
  font-size:var(--t-h1);
  line-height:.9;
  max-width:16ch;
  margin:clamp(2rem,4vw,3.25rem) 0 0;
}
/* A section's closing line, given the width of the section rather than a
   column — the counterpart to "It's organizational drag." */
.verdict--payoff{
  max-width:none;
  font-size:var(--t-mega);
  margin-top:clamp(2.5rem,5vw,4rem);
}
/* Mega is sized for four words. A full sentence at that scale stops being a
   payoff and becomes wallpaper. */
.verdict--long{ font-size:var(--t-h1); max-width:26ch; line-height:.95; }

/* ---- Territory ----------------------------------------------------------
   Problem -> cost -> what becomes possible -> what OI does.
   Full-width rather than a card grid: at this copy length four cards become
   four walls of text. The final line is set apart, because it is the only
   part that describes the service rather than the reader's situation. */
.territory{
  border-top:var(--rule);
  padding-block:clamp(2.25rem,5vw,4rem);
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
}
.territory:last-of-type{ border-bottom:var(--rule); }
@media (max-width:860px){ .territory{ grid-template-columns:minmax(0,1fr); gap:1.25rem; } }

.territory__head{ position:sticky; top:calc(var(--header-h) + 2rem); }
@media (max-width:860px){ .territory__head{ position:static; } }
.territory__q{
  font-family:var(--mono);        /* ACCENT — a pull-out question */
  font-size:var(--a1);
  margin:.9rem 0 0;
  padding-left:.9rem;
  border-left:4px solid var(--accent);
  max-width:26ch;
}
.territory__body{ font-family:var(--ui); line-height:1.65; }
.territory__body > p{ max-width:60ch; }
.territory__body > p + p{ margin-top:1.05em; }
.territory__cost{
  font-family:var(--display);
  font-size:var(--d4);
  line-height:1.05;
  max-width:26ch;
  margin-block:1.5rem;
}
.territory__do{
  margin-top:1.75rem;
  padding-top:1.35rem;
  border-top:var(--rule);
  font-family:var(--ui);
  line-height:1.6;
  max-width:62ch;
}
/* Inert for the single-paragraph territories; lets 02 run to two without the
   rule and the generated label repeating mid-card. */
.territory__do p{ margin:0 0 1rem; max-width:60ch; }
.territory__do p:last-child{ margin-bottom:0; }
.territory__do::before{
  content:"What we do";
  display:block;
  font-family:var(--mono); font-size:var(--t-label); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.7rem;
}

/* ---- Torn edge ----------------------------------------------------------
   Rips a section out of the page instead of just recolouring it. Used on the
   final CTA, which by then is the third dark band and needs to read as an
   ending rather than more of the same. */
.section--torn{ position:relative; }
/* Paper teeth bite DOWN into the section, so the dark band reads as
   something ripped out of the page rather than a tidy colour change. */
.section--torn::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:34px;
  background:var(--paper);
  clip-path:polygon(0 0,100% 0,100% 42%,96% 70%,91% 46%,85% 76%,79% 50%,73% 80%,67% 52%,61% 84%,55% 60%,49% 90%,43% 56%,37% 86%,31% 54%,25% 82%,19% 48%,14% 78%,9% 42%,4% 66%,0 38%);
}
@media (max-width:640px){ .section--torn::before{ height:22px; } }

/* ---- Hero artwork -------------------------------------------------------
   Replaces the portrait. No panel and no frame: the artwork already carries
   its own paper ground and needs air, and the cut-out rule is about people.
   Now a still collage rather than the earlier loop. The video selector is
   kept alongside so the animated version can be dropped back in later
   without touching this stylesheet. */
.hero-motion{ margin:0; position:relative; }
.hero-motion img,
.hero-motion video{
  width:100%; height:auto; display:block;
  background:var(--paper);
}

/* ---- Real logo lockup ---------------------------------------------------
   Raster artwork, so it is sized by height and never stretched. */
.logo__img{ display:block; width:auto; }
.site-header .logo__img{ height:clamp(30px,3.4vw,38px); }
.logo--stack .logo__img{ height:clamp(48px,5vw,62px); }

/* ---- Footer, four columns ----------------------------------------------- */
.footer-grid--4{ grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); }
@media (max-width:1000px){ .footer-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .footer-grid--4{ grid-template-columns:minmax(0,1fr); } }
.footer-bottom--single{ justify-content:flex-start; }

/* ---- Friction translations (the check section) -------------------------- */
.translations{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.translations li{
  font-family:var(--ui); font-weight:600;
  font-size:var(--r2);
  line-height:1.4;
  padding-left:1.1rem;
  border-left:4px solid var(--accent);
}
.translations b{ font-weight:700; }

/* Rules and hairlines have to flip on ink grounds or they vanish. */
.section--ink{ --rule:2px solid var(--paper); --rule-hair:1px solid rgba(244,242,239,.22); }
.section--ink .card{ border-color:var(--paper); }
.section--ink .q-card,.section--ink .callout{ border-color:var(--paper); }

/* Inline highlight on a dark ground needs real padding, not a baseline
   stripe — the stripe leaves the glyphs half on the ink. */
.mark--solid{
  background:var(--yellow); color:var(--ink);
  padding:.08em .32em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* ==========================================================================
   22. ROUND-2 COMPONENTS
   ========================================================================== */

/* ---- Halftone bricks in the collage layer -------------------------------
   Two variants of the same artwork: a paper-outlined cut for dark and
   coloured grounds, a black-outlined cut for paper. The outline is what
   separates the brick from what is behind it, so the ground decides which
   file gets used — never both.
   Deliberately sparse: LSP has to be prominent without the studio reading as
   a toy company, so bricks stay off the four territories, the process and the
   partnership sections. */
/* Pinned to the outer gutter and allowed to hang off the edge, so a brick
   can never drift into the text column no matter how the copy reflows. */
.brick{ position:absolute; width:clamp(66px,6vw,118px); }
.brick img{ width:100%; }

/* ---- Two-tier headline --------------------------------------------------
   One <h1> for search and screen readers, two sizes for the eye: the
   searchable phrase at full weight, the enumeration beneath it. */
.h-split{ display:block; }
.h-split__lead{ display:block; }
.h-split__rest{
  display:block;
  font-size:var(--d4);
  line-height:1.05;
  margin-top:.55em;
  opacity:.62;
  max-width:24ch;
}

/* ---- Platform tiles -----------------------------------------------------
   Where you can listen. Monochrome ink glyphs in the site's own square,
   bordered, hard-shadowed tile — not the official brand logos, which would
   drag three foreign colour systems and three corner radii onto a page built
   on square corners and a single accent. */

/* Episode artwork in the latest-episode card. Square, hard-edged, sized so it
   reads as a thumbnail beside the title rather than competing with it. */
.ep-art{
  display:block; width:clamp(96px,26%,140px); height:auto;
  border:2px solid var(--paper); margin:.85rem 0 1rem;
}
.player__error{
  font-family:var(--ui); font-size:var(--r3); line-height:1.5;
  margin:.75rem 0 0; color:var(--paper);
}
.player__error a{ color:var(--lime); }
[data-player][data-error="true"] .player__play{ opacity:.45; cursor:not-allowed; }


/* Footer link lists that carry a platform mark. The icon is decorative: the
   label beside it already names the destination. */
.ico-list{ list-style:none; margin:0; padding:0; }
.ico-list li{ margin:0 0 .55rem; }
.ico-link{ display:flex; align-items:center; gap:.6rem; }
.ico-link .ico{
  width:20px; height:20px; flex:none; display:block;
  border-radius:4px;
}
@media (max-width:700px){ .ico-link .ico{ width:22px; height:22px; } }

/* Platform badges. One family: black pill, white outline, the platform's own
   mark in full colour. The outline is what lets them sit straight on the ink
   section, so there is no panel behind them. */
.badges{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-top:1rem; padding:0;
}
.badges a{
  display:block; line-height:0;
  transition:transform .12s ease, opacity .12s ease;
}
.badges a:hover{ transform:translateY(-2px); opacity:.88; }
.badges a:focus-visible{ outline:3px solid var(--lime); outline-offset:4px; }
.badges img{ display:block; width:auto; height:46px; }
@media (max-width:520px){ .badges img{ height:40px; } }

.platforms{ display:flex; flex-wrap:wrap; gap:1rem; list-style:none; margin:0; padding:0; }
.platform{
  display:flex; align-items:center; gap:.7rem;
  border:var(--rule); background:var(--paper-card); color:var(--ink);
  box-shadow:var(--shadow-sm);
  padding:.85rem 1.15rem;
  font-family:var(--ui); font-weight:700; font-size:var(--r3);
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.platform:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); background:var(--paper); color:var(--ink); }
.platform svg{ width:22px; height:22px; flex:none; fill:currentColor; }
.section--ink .platform{
  background:transparent; color:var(--paper); border-color:var(--paper);
  box-shadow:5px 5px 0 var(--paper);
}
.section--ink .platform:hover{ background:var(--paper); color:var(--ink); box-shadow:2px 2px 0 var(--paper); }

/* ---- Podcast hero -------------------------------------------------------
   The opening claim is the whole positioning in two lines, so it gets the
   page's largest type and nothing competes with it. */
.claim{
  font-family:var(--display);
  font-size:var(--t-h1);
  line-height:.95;      /* two stacked claims need more air than a headline */
  /* 19ch squeezed this into a 751px column inside a 1360px container, breaking
     one sentence across four short lines. 28ch lets each claim run to two long
     lines instead. One line is not reachable at this size and should not be
     chased: the sentence needs ~1880px of Anton at 80px. */
  max-width:28ch;
  text-wrap:balance;
}
/* The second claim is the quieter half of the pair — but the word that
   carries the point stays at full strength. */
.claim--quiet{ color:#8A8781; }
.claim em{ font-style:normal; color:var(--accent); }

.core3{ list-style:none; margin:0; padding:0; counter-reset:c; display:grid; gap:1.15rem; }
.core3 li{
  counter-increment:c;
  display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:1rem;
  align-items:baseline;
  font-family:var(--ui); line-height:1.55;
}
.core3 li::before{
  content:counter(c,decimal-leading-zero);
  font-family:var(--display); font-size:var(--d5); line-height:1; color:var(--accent);
}

/* ---- Negations ----------------------------------------------------------
   "No culture posters. No synergy. No transformation decks." Struck through,
   because the list is a refusal, not a feature set. */
.negations{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.negations li{
  font-family:var(--display);
  font-size:var(--d5);
  line-height:1.06;
  text-decoration:line-through;
  text-decoration-thickness:.06em;
  opacity:.85;
}