/* ============================================================================
   505 RESEARCH — one-page site
   Built on Design System v2.0 (claude/design-direction-mockup.html)
   Tokens, type scale and components are lifted verbatim. Nothing re-derived.

   THE SEVEN HARD RULES observed:
   1. ONE accent. Signal Amber.
   2. On light grounds the accent is --amber-ink (#7A5410). Enforced by
      .s-paper / .s-bone rebinding, not by discipline.
   3. No cool accents on the dark base.
   4. Dark = identity. Light = document.
   5. Uppercase for display + micro-labels only.
   6. Low complexity, conventional layout.
   7. No gradients, no glow, no drop-shadow-as-decoration.
   ========================================================================= */


/* ═══ 0. FONTS — self-hosted ══════════════════════════════════════════════
   Google Fonts CDN is unreachable from the build sandbox (403) and
   self-hosting removes a third-party request from the live site anyway.
   Files from @fontsource, latin subset, woff2 only. 140KB total.          */

@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/archivo-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/archivo-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/archivo-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/archivo-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/inter-latin-600-normal.woff2') format('woff2')}


/* ═══ 1. TOKENS ═══════════════════════════════════════════════════════════ */

:root{
  --ink:            #131519;
  --ink-deep:       #0C0E11;
  --ink-raised:     #1B1E23;
  --offwhite:       #F0F0EE;
  /* --offwhite rebinds to dark ink inside .s-paper / .s-bone. This one never
     rebinds, for the few places that need light text on a dark fill sitting
     inside a light section. */
  --offwhite-fixed: #F0F0EE;
  --muted:          #9AA0A6;
  --dim:            #7E858D;

  --paper:          #F6F5F1;
  --paper-ink:      #17181A;
  --paper-muted:    #5A5E63;

  --bone:           #E4E2DA;
  --bone-ink:       #1A1A18;
  --bone-muted:     #55585C;

  --amber:          #F0B429;
  --amber-hi:       #FFC94D;
  --amber-ink:      #7A5410;

  --redact:         #050609;
  --redact-edge:    rgba(240,240,238,.13);
  --hair:           rgba(240,240,238,.13);
  --hair-2:         rgba(240,240,238,.08);
  --hair-lt:        rgba( 23, 24, 26,.14);
  --tint:           rgba(240,180,41,.075);
  --tint-edge:      rgba(240,180,41,.32);

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;  --r-pill: 999px;
  --ease: cubic-bezier(.2,.6,.2,1);
}


/* ═══ 2. BASE ═════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--ink); color:var(--offwhite);
  font-family:var(--body); font-size:16px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.s-ink   { background:var(--ink);       color:var(--offwhite) }
.s-deep  { background:var(--ink-deep);  color:var(--offwhite) }
.s-raised{ background:var(--ink-raised);color:var(--offwhite) }
.s-paper { background:var(--paper);     color:var(--paper-ink) }
.s-bone  { background:var(--bone);      color:var(--bone-ink)  }

/* HARD RULE 2, enforced structurally. */
.s-paper, .s-bone{
  --offwhite:var(--paper-ink);
  --muted:var(--paper-muted);
  --dim:var(--paper-muted);
  --amber:var(--amber-ink);
  --amber-hi:var(--amber-ink);
  --hair:var(--hair-lt);
  --hair-2:var(--hair-lt);
  --tint:rgba(122,84,16,.07);
  --tint-edge:rgba(122,84,16,.28);
}
.s-bone{ --muted:var(--bone-muted); --dim:var(--bone-muted) }


/* ═══ 3. TYPE ═════════════════════════════════════════════════════════════ */

.d1,.d2,.d3{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.014em; line-height:.98; color:var(--offwhite);
}
.d1{ font-size:clamp(34px, 5.6vw, 66px) }
.d2{ font-size:clamp(26px, 3.6vw, 44px); line-height:1.02 }
.d3{ font-size:clamp(19px, 2.2vw, 27px); line-height:1.06 }

.kick{
  font-family:var(--display); font-weight:600; font-size:10px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--amber);
}
.kick--mute{ color:var(--dim) }
.kick--rule{ display:flex; align-items:center; gap:12px }
.kick--rule::before{ content:""; width:26px; height:2px; background:currentColor; flex:none }

.wordmark{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--display); font-weight:600; font-size:9px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--dim);
  white-space:nowrap;
}

p{ max-width:66ch; margin:0 0 22px; color:var(--offwhite); opacity:.92 }
.lead{ font-size:18.5px; line-height:1.62; opacity:1; max-width:58ch }
.sm  { font-size:13.5px; line-height:1.54; color:var(--muted); max-width:74ch }
.xs  { font-size:11.5px; line-height:1.48; color:var(--dim);   max-width:74ch }
strong{ font-weight:600; color:var(--offwhite); opacity:1 }
.acc { color:var(--amber); font-weight:500 }
.num { font-variant-numeric:tabular-nums }

a{ color:var(--amber); text-decoration:none;
   border-bottom:1px solid color-mix(in srgb, var(--amber) 35%, transparent) }
a:hover{ color:var(--amber-hi) }
a.plain{ border-bottom:none }

ul.chev{ list-style:none; max-width:74ch }
ul.chev li{ position:relative; padding-left:20px; margin-bottom:8px }
ul.chev li::before{
  content:""; position:absolute; left:0; top:.52em; width:7px; height:7px;
  border-top:1.6px solid var(--amber); border-right:1.6px solid var(--amber);
  transform:rotate(45deg);
}


/* ═══ 4. MOTIF · the arrow ════════════════════════════════════════════════ */
.arrow{ display:block; color:var(--amber); flex:none }


/* ═══ 5. COMPONENTS ═══════════════════════════════════════════════════════ */

.bone-card{ background:var(--bone); color:var(--bone-ink);
            border-radius:var(--r-lg); padding:24px 26px }
.bstat{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
        padding:12px 0; border-bottom:1px solid var(--hair-lt) }
.bstat:last-child{ border-bottom:none; padding-bottom:0 }
.bstat b{ font-family:var(--display); font-weight:800; font-size:25px; line-height:1 }
.bstat span{ font-family:var(--display); font-weight:600; font-size:9px;
             letter-spacing:.16em; text-transform:uppercase;
             color:var(--bone-muted); text-align:right; max-width:24ch }

.spec-row{ display:grid; grid-template-columns:150px 1fr; gap:16px;
           padding:11px 0; border-bottom:1px solid var(--hair) }
.spec-row:last-child{ border-bottom:none }
.spec-row dt{ font-family:var(--display); font-weight:700; font-size:9.5px;
              letter-spacing:.16em; text-transform:uppercase;
              color:var(--amber); padding-top:3px }
.spec-row dd{ font-size:14px }

.panel{ background:var(--ink-deep); border:1px solid var(--hair);
        border-radius:var(--r-md); padding:20px 22px }
.s-paper .panel, .s-bone .panel{ background:transparent }
.panel--tint{ background:var(--tint); border-color:var(--tint-edge) }
.callout{ background:var(--ink-raised); border-left:3px solid var(--amber);
          padding:22px 26px; border-radius:0 var(--r-md) var(--r-md) 0 }
/* .callout hard-codes a DARK background, but .s-paper/.s-bone rebind the text
   to dark ink. Without this the result is #17181A on #1B1E23 = 1.06:1, which
   is invisible. Same fix .panel already has. Do not remove. */
.s-paper .callout, .s-bone .callout{ background:rgba(23,24,26,.05) }

.btn{ font-family:var(--display); font-weight:700; font-size:10.5px;
      letter-spacing:.16em; text-transform:uppercase; padding:14px 26px;
      border-radius:var(--r-sm); display:inline-block; border:none;
      cursor:pointer; transition:background .18s var(--ease) }
.btn--primary{ background:var(--amber); color:var(--ink-deep) }
.btn--primary:hover{ background:var(--amber-hi) }
.btn--ghost{ background:transparent; color:var(--offwhite);
             border:1px solid color-mix(in srgb, var(--offwhite) 40%, transparent) }
.btn--ghost:hover{ border-color:var(--offwhite) }
a.btn{ border-bottom:none }

/* TWO BUTTON TRAPS, both found by measuring rather than by eye.

   1. `.site-head nav a` sets color:var(--muted) at specificity (0,2,1), which
      beats `.btn--primary` at (0,1,0). The header Contact button was therefore
      muted grey on Amber: 1.42:1. This rule outranks it at (0,3,1).

   2. On Paper and Bone, HARD RULE 2 rebinds --amber to Amber Ink (#7A5410),
      which is a DARK fill. Ink Deep text on it is 2.86:1. Off-White is 5.9:1.
      So the primary button inverts its text on light sections. */
.site-head nav a.btn--primary{ color:var(--ink-deep) }
.site-head nav a.btn--primary:hover{ color:var(--ink-deep); background:var(--amber-hi) }
.s-paper .btn--primary, .s-bone .btn--primary{ color:var(--offwhite-fixed) }
.s-paper .btn--primary:hover, .s-bone .btn--primary:hover{ background:var(--ink);
  color:var(--offwhite-fixed) }


/* ═══ 6. SITE LAYOUT ══════════════════════════════════════════════════════
   RULE 6: break the COLOR norm, keep the LAYOUT prototypical. Nothing
   below is an unfamiliar pattern. Header, hero, bands, footer.           */

.wrap{ max-width:1080px; margin:0 auto; padding:0 40px }
.wrap--narrow{ max-width:880px }

.band{ padding:clamp(84px,7vw,112px) 0 }
.band--tight{ padding:64px 0 }
.band + .band{ border-top:1px solid var(--hair) }

.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:34px }
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px }
.stack-1{ margin-top:14px } .stack-2{ margin-top:24px } .stack-3{ margin-top:38px }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-head{ position:sticky; top:0; z-index:20; background:var(--ink-deep);
            border-bottom:1px solid var(--hair) }
.site-head .inner{ max-width:1080px; margin:0 auto; padding:16px 40px;
                   display:flex; align-items:center; justify-content:space-between; gap:20px }
.brand{ display:flex; align-items:center; gap:11px }
.brand .mark{ width:11px; height:11px; background:var(--amber); flex:none }
.brand .name{ font-family:var(--display); font-weight:700; font-size:11px;
              letter-spacing:.30em; text-transform:uppercase; color:var(--offwhite);
              white-space:nowrap }
.site-head nav{ display:flex; align-items:center; gap:26px }
.site-head nav a{ font-family:var(--display); font-weight:600; font-size:9.5px;
                  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
                  border-bottom:none }
.site-head nav a:hover{ color:var(--offwhite) }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{ padding:104px 0 76px }
.hero .d1{ margin-top:18px }
.hero .lead{ margin-top:26px }
.hero .cta-row{ margin-top:38px; display:flex; gap:12px; flex-wrap:wrap }

/* ── Person block ───────────────────────────────────────────────────────── */
.person{ display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:44px;
         align-items:start }
.portrait{ width:100%; height:auto; aspect-ratio:4/5; border-radius:var(--r-lg);
           background:var(--ink-raised); border:1px solid var(--hair);
           object-fit:cover; object-position:50% 22%; display:block }
/* height:auto is load-bearing. The width/height HTML attributes map to a CSS
   height, which beats aspect-ratio and stretches the box to 900px tall.
   The attributes stay because they prevent layout shift on load. */
.portrait--placeholder{ display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px; font-family:var(--display); font-weight:600;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim) }

/* ── Sample cards ───────────────────────────────────────────────────────── */
.sample{ border:1px solid var(--hair); border-radius:var(--r-md);
         padding:24px 24px 22px; display:flex; flex-direction:column; gap:12px }
.sample .btn{ align-self:flex-start }
.sample h3{ font-family:var(--display); font-weight:700; font-size:15px;
            line-height:1.2; letter-spacing:-.005em; color:var(--offwhite) }
.sample .meta{ font-family:var(--display); font-weight:600; font-size:9px;
               letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
               margin-top:auto; padding-top:6px }

/* ── Form ───────────────────────────────────────────────────────────────── */
.form{ max-width:520px; margin-top:28px }
.field{ margin-bottom:16px }
.field label{ display:block; font-family:var(--display); font-weight:600;
              font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
              color:var(--amber); margin-bottom:7px }
.field input, .field textarea{
  width:100%; background:var(--ink-deep); border:1px solid var(--hair);
  border-radius:var(--r-sm); padding:12px 14px; color:var(--offwhite);
  font-family:var(--body); font-size:14.5px; line-height:1.5 }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--amber) }
.field textarea{ min-height:110px; resize:vertical }
.hp{ position:absolute; left:-9999px }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-foot{ background:var(--ink-deep); border-top:1px solid var(--hair);
            padding:52px 0 44px }
.foot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
            gap:28px; align-items:start }
.foot-grid .lab{ font-family:var(--display); font-weight:600; font-size:9px;
                 letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
                 margin-bottom:9px }
.foot-links{ display:flex; flex-direction:column; gap:7px; align-items:flex-start }
.foot-links a{ font-size:13px; color:var(--muted); border-bottom:none }
.foot-links a:hover{ color:var(--offwhite) }
.foot-base{ margin-top:38px; padding-top:20px; border-top:1px solid var(--hair-2);
            display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap }

/* ── Fixed left-edge wordmark (ruleset §5: left margin reserved) ────────── */
.edge-wordmark{ position:fixed; left:16px; top:50%; transform:translateY(-50%);
                z-index:10; pointer-events:none; opacity:.85 }
@media (max-width:1240px){ .edge-wordmark{ display:none } }

/* ── Legal pages ────────────────────────────────────────────────────────── */
.legal{ padding:64px 0 88px }
.legal h2{ font-family:var(--display); font-weight:700; font-size:15px;
           text-transform:uppercase; letter-spacing:.02em; margin:34px 0 12px;
           color:var(--offwhite) }
.legal p, .legal li{ font-size:14.5px; max-width:74ch }
.legal ul{ margin:0 0 15px 20px }
.legal li{ margin-bottom:7px }


/* ═══ 7. RESPONSIVE ═══════════════════════════════════════════════════════ */

@media (max-width:820px){
  .person{ grid-template-columns:1fr; gap:28px }
  .portrait{ max-width:240px }
  .site-head nav{ gap:16px }
}
@media (max-width:640px){
  .wrap{ padding:0 22px }
  .site-head .inner{ padding:14px 22px }
  .site-head nav > a:not(.btn){ display:none }
  .band{ padding:64px 0 }
  .hero{ padding:72px 0 64px }
  .spec-row{ grid-template-columns:1fr; gap:4px }
}


/* ═══ 8. WHAT NOT TO DO ═══════════════════════════════════════════════════
   x A second brand accent
   x Cool accents on dark (teal/blue/purple) — they measurably fail
   x --amber on any light ground — use --amber-ink
   x Body copy in uppercase
   x Gradients, glow, drop shadows as decoration
   x --dim for body copy (APCA 35.9 — captions and page numbers only)
   x Fabricated client logos, testimonials, or case studies
   ========================================================================= */


/* ═══ 9. STOREFRONT COMPONENTS (added 17 Aug) ════════════════════════════
   Business first, person second. Same tokens, no new colour.            */

/* ── Sector chips — lets a visitor self-identify ────────────────────────── */
.sector-grid{ display:flex; flex-wrap:wrap; gap:10px }
.sector{ font-family:var(--display); font-weight:600; font-size:10.5px;
         letter-spacing:.14em; text-transform:uppercase; padding:11px 18px;
         border-radius:var(--r-pill); border:1px solid var(--hair);
         color:var(--muted) }

/* ── Numbered build blocks — the storefront itself ──────────────────────── */
.build-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:34px }
.build{ border-top:2px solid var(--amber); padding-top:18px }
.build-n{ font-family:var(--display); font-weight:800; font-size:11px;
          letter-spacing:.22em; color:var(--amber); margin-bottom:10px }
.build h3{ font-family:var(--display); font-weight:700; font-size:19px;
           line-height:1.15; letter-spacing:-.005em; color:var(--offwhite);
           margin-bottom:10px }

/* ── Compact "who builds it" strip on the home page ─────────────────────── */
.who-strip{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
            gap:44px; align-items:start }
.who-facts{ padding-top:4px }

@media (max-width:820px){
  .who-strip{ grid-template-columns:1fr; gap:24px }
}


/* ═══ 10. SITE PAGES (promoted 17 Aug) ═══════════════════════════════════ */



.pain-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
            gap:32px 40px }
.pain{ border-left:2px solid var(--amber); padding-left:20px }
.pain h3{ font-family:var(--display); font-weight:700; font-size:17px; line-height:1.22;
          color:var(--offwhite); margin-bottom:10px }

/* The excerpts carry the load that client logos carry on comparable sites. */
.doc{ border:1px solid var(--hair); border-radius:var(--r-md); padding:28px 26px 24px;
      display:flex; flex-direction:column; gap:12px; background:var(--ink-deep) }
.doc .tag{ font-family:var(--display); font-weight:700; font-size:8.5px; letter-spacing:.2em;
           text-transform:uppercase; color:var(--ink-deep); background:var(--amber);
           padding:4px 9px; border-radius:2px; align-self:flex-start }
.doc h3{ font-family:var(--display); font-weight:700; font-size:18px; line-height:1.2;
         color:var(--offwhite) }
.doc .meta{ margin-top:auto; padding-top:10px; font-family:var(--display); font-weight:600;
            font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim) }



.lobby{ padding:84px 0 30px }
.lobby-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:58px; align-items:start }
/* The home page has no hero headline. The lockup in the header already says the
   name and the kicker already says what and where, so a headline on top of both
   is a landing-page convention doing no work. The h1 IS the statement, set at
   display size: no slogan to write, and nothing to out-claim. Retired 18 Aug:
   the .name-mark treatment below, which set "505 RESEARCH" at 68px. */
/* was .lobby .statement: the 21 Aug home rebuild dropped the .lobby wrapper */
.statement{ font-family:var(--display); font-weight:700;
  font-size:clamp(24px,2.5vw,32px); letter-spacing:-.010em; line-height:1.22;
  color:var(--offwhite); max-width:27ch }
.lobby .name-mark{ font-family:var(--display); font-weight:800; font-size:clamp(38px,5.4vw,68px);
  letter-spacing:-.018em; text-transform:uppercase; line-height:.96; color:var(--offwhite) }
.lobby .rule{ width:62px; height:3px; background:var(--amber); margin:24px 0 24px }
.lobby-facts{ padding-top:10px }
.lobby-facts .spec-row{ grid-template-columns:118px 1fr; gap:14px; padding:10px 0 }
.lobby-facts .spec-row dd{ font-size:13.5px }
/* RETIRED 18 Aug. The sector pills and the numbered index both read as landing
   page devices: a chip row of industries argues against its own caption, and a
   numbered list of your own nav with a description under each row is a "choose
   your path" block, which the header already does. Rules kept, unused, so the
   treatment is recoverable without redrawing it. */
.sector-band{ border-top:1px solid var(--hair); margin-top:44px; padding-top:26px }
.index-list{ border-top:1px solid var(--hair) }

/* Home body, the prose that replaced them. */
.home-body{ border-top:1px solid var(--hair); margin-top:46px; padding-top:32px; max-width:76ch }
.home-body p{ font-size:16.5px; line-height:1.72; margin-bottom:17px }
.home-body p:last-child{ margin-bottom:0 }
.index-row{ display:grid; grid-template-columns:34px minmax(0,196px) minmax(0,1fr);
  gap:22px; padding:22px 0; border-bottom:1px solid var(--hair); align-items:baseline }
.index-row .n{ font-family:var(--display); font-weight:700; font-size:10px;
  letter-spacing:.16em; color:var(--amber) }
.index-row a.t{ font-family:var(--display); font-weight:700; font-size:15px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--offwhite); border-bottom:none }
.index-row a.t:hover{ color:var(--amber) }
.index-row p{ margin:0; font-size:14px; color:var(--muted) }
@media (max-width:900px){ .lobby-grid{ grid-template-columns:1fr; gap:34px } }
@media (max-width:700px){ .index-row{ grid-template-columns:1fr; gap:5px } .index-row .n{ display:none } }



/* ═══ 11. THE BENCHMARK MARK (applied 18 Aug 2026) ════════════════════════
   design-ruleset.md §5A. The exported SVGs are canonical: the numerals are
   outlines, so they render without Archivo. Never redraw, never re-typeset,
   never rotate, crop or occlude.

   ⚠️ height/width HTML attributes map to a CSS height and would beat any
   aspect-ratio. Every rule below sets one axis explicitly and the other to
   auto. The `height:auto` / `width:auto` here is load-bearing. Same trap as
   the portrait rule in §6. Do not "clean it up."                          */

/* ── L2 horizontal · site header ────────────────────────────────────────── */
.brand-lockup{
  height:40px;          /* → 110px wide. 96px is legible but tight. */
  width:auto;
  display:block;
}

/* ── L3 mark alone · footer punch ───────────────────────────────────────── */
/* NOTE: §5A's "Amber Ink on Paper" footer punch is the DOCUMENT footer in §6.
   The site footer is Ink Deep, so the colour table gives Off-White + Signal
   Amber here. Amber Ink on Ink Deep would be ~1.3:1 and invisible.        */
.foot-mark{
  width:60px;
  height:auto;
  display:block;
  margin-bottom:16px;
}

/* ── L1 primary · /about ────────────────────────────────────────────────── */
.primary-lockup{
  width:min(260px, 60%);   /* never below the 96px minimum at any breakpoint */
  height:auto;
  display:block;
}

/* ── Clear space = the datum bar height on all four sides.
   The values below are far more generous than the 2.2% minimum, which is
   the safe direction. Nothing may enter these margins.                    */
.brand{ padding:6px 0 }
.site-head .inner{ gap:28px }

@media (max-width:640px){
  .brand-lockup{ height:32px }   /* → 88px wide, wordmark still legible */
  .foot-mark{ width:52px }
}


/* ═══ 12. PRACTICE PAGES (added 18 Aug) ═══════════════════════════════════ */

.sec{ margin-top:64px }
.sec:first-of-type{ margin-top:38px }
.sec h2{ font-family:var(--display); font-weight:700; font-size:clamp(18px,2vw,23px);
  line-height:1.16; color:var(--offwhite); margin-bottom:20px;
  padding-top:32px; border-top:1px solid var(--hair) }
.sec p{ font-size:16.5px; line-height:1.76; max-width:62ch; margin-bottom:24px }

/* engagement shapes · a reference block, repeated by design across the
   practice pages the way a footer is. Terms live on engagements.html only. */
.shape{ display:grid; grid-template-columns:minmax(0,180px) minmax(0,1fr); gap:28px;
  padding:30px 0; border-bottom:1px solid var(--hair); align-items:start }
.shape:last-child{ border-bottom:none }
.shape h3{ font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--amber) }
.shape p{ margin:0 0 14px; font-size:15.5px; line-height:1.72 }
.shape p:last-child{ margin-bottom:0 }
.shape .terms{ margin-top:9px; font-size:12.5px; color:var(--muted) }
@media (max-width:700px){ .shape{ grid-template-columns:1fr; gap:8px } }

/* practice index rows */
.area{ display:grid; grid-template-columns:minmax(0,230px) minmax(0,1fr); gap:28px;
  padding:26px 0; border-bottom:1px solid var(--hair); align-items:baseline }
.area:last-child{ border-bottom:none }
.area a.t{ font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:.01em;
  text-transform:uppercase; color:var(--offwhite); border-bottom:none }
.area a.t:hover{ color:var(--amber) }
.area p{ margin:0; font-size:15px; line-height:1.62; color:var(--muted) }
@media (max-width:700px){ .area{ grid-template-columns:1fr; gap:7px } }


/* ═══ 13. THE PRACTICE FLOW (home) ═══════════════════════════════════════
   A tree, not a funnel of buttons. One spine, three tick lengths. Sales and
   forecasting produces the figure; the two channels hang beneath it and are
   measured against it. The spine runs Amber down to the figure and hairline
   after it, so the accent marks the governed path rather than decorating.

   Live text on rules: readable, selectable, responsive, nothing to regenerate.
   NO ARROWHEADS. The mark sits in this page's header and §5A forbids combining
   it with the arrow motif in the same layout, so the flow is drawn with rules
   alone. A single border cannot change colour mid-element, which is why the
   colour break lands on the datum's own tick. */

.flow{ margin-top:34px; max-width:72ch }
.flow h2{ font-family:var(--display); font-weight:700; font-size:12.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--offwhite); line-height:1.2 }
.flow h2 a{ color:inherit; border-bottom:none }
.flow h2 a:hover{ color:var(--amber) }
.flow p{ margin-top:8px; font-size:15px; line-height:1.64; color:var(--muted); max-width:58ch }

.flow-node{ position:relative; padding-left:30px; padding-bottom:24px }
.flow-node::before{ content:""; position:absolute; left:0; top:0; bottom:0;
  border-left:1px solid var(--hair) }
.flow-node::after{ content:""; position:absolute; left:0; top:8px; width:21px;
  border-top:1px solid var(--hair) }
.flow-node:first-child::before{ top:8px }
.flow-node:last-child{ padding-bottom:0 }
.flow-node:last-child::before{ bottom:auto; height:8px }

/* the amber run: the root block, ending on the figure's own tick */
.flow-node--root::before, .flow-node--root::after,
.flow-node--datum::after{ border-color:var(--amber) }

.flow-node--datum b{ display:block; font-family:var(--display); font-weight:700;
  font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--amber); line-height:1.2 }
.flow-node--datum span{ display:block; margin-top:8px; font-size:14px; color:var(--muted) }

/* the two channels sit one step deeper on the same spine */
.flow-node--sub{ padding-left:62px }
.flow-node--sub::after{ width:53px }

@media (max-width:640px){
  .flow-node{ padding-left:22px }
  .flow-node::after{ width:15px }
  .flow-node--sub{ padding-left:44px }
  .flow-node--sub::after{ width:37px }
}


/* ═══ 14. THE PRACTICE MENU ═══════════════════════════════════════════════
   Three separate ribbon items read as three separate businesses. Grouped under
   one label they read as one practice with three parts, which is the point.

   The trigger is a <button>, not a link: there is deliberately no hub page
   behind it, because a page whose entire content is three choices forces a
   reader to categorise himself before he has read anything.

   CSS only, no JavaScript. Opens on :hover for a mouse and on :focus-within
   for a keyboard, so tabbing into it reveals the links.

   NO CARET GLYPH. This sits inches from the mark in the header, and §5A forbids
   combining the mark with the arrow motif in one layout. The affordance is a
   short rule instead, which is the same motif as .kick--rule. */

.menu{ position:relative; display:flex; align-items:center }
.menu-trigger{ font-family:var(--display); font-weight:600; font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  background:none; border:none; padding:0; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; gap:9px; transition:color .18s var(--ease) }
.menu-trigger::after{ content:""; width:10px; border-top:1px solid currentColor; opacity:.65 }
.menu:hover .menu-trigger, .menu:focus-within .menu-trigger{ color:var(--offwhite) }

/* the panel's padding-top is the bridge: a margin would leave dead space that
   closes the menu as the pointer travels down into it */
.menu-panel{ position:absolute; top:100%; left:-16px; padding-top:15px; z-index:30;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s }
.menu:hover .menu-panel, .menu:focus-within .menu-panel{ opacity:1; visibility:visible; transform:none }

/* --ink-raised, not --ink-deep: the system shows elevation with a lighter
   surface because rule 7 bans drop shadow as decoration. A panel darker than
   the page it floats over reads as a hole, not a layer. */
.menu-box{ min-width:296px; background:var(--ink-raised); border:1px solid var(--hair);
  border-radius:var(--r-sm); padding:7px }
.menu-box a{ display:block; padding:11px 13px; border-bottom:none; border-radius:var(--r-sm);
  transition:background .16s var(--ease) }
.menu-box a:hover{ background:rgba(240,180,41,.10) }
.menu-box a strong{ display:block; font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--offwhite); line-height:1.2;
  transition:color .16s var(--ease) }
.menu-box a:hover strong{ color:var(--amber) }
.menu-box a span{ display:block; margin-top:5px; font-size:12.5px; line-height:1.4;
  color:var(--muted); letter-spacing:0; text-transform:none }

@media (max-width:640px){ .site-head nav .menu{ display:none } }


/* ═══ 15. MOBILE NAVIGATION ═══════════════════════════════════════════════
   Under 640px the horizontal nav is hidden, because small caps at .18em wrap
   to three lines and eat the header. Until 18 Aug that left a phone with no
   navigation at all except Contact, which was survivable at six pages and is
   not now that the three practice areas are the main content and cold email
   clicks arrive on phones.

   <details> and <summary>, so it opens with no JavaScript and is keyboard
   operable for free. The trigger is three hairlines that rotate into a cross.
   Not a caret, not a chevron: §5A's arrow prohibition still applies here. */

.mnav{ display:none }
.mnav summary{ display:block; list-style:none; cursor:pointer; padding:10px 0 10px 14px }
.mnav summary::-webkit-details-marker{ display:none }
.mnav summary::marker{ content:"" }

.mnav-bars{ position:relative; display:block; width:21px; height:1px;
  background:var(--offwhite) }
.mnav-bars::before, .mnav-bars::after{ content:""; position:absolute; left:0; width:21px;
  height:1px; background:var(--offwhite); transition:transform .18s var(--ease), opacity .12s }
.mnav-bars::before{ top:-6px }
.mnav-bars::after{ top:6px }
.mnav[open] .mnav-bars{ background:transparent }
.mnav[open] .mnav-bars::before{ transform:translateY(6px) rotate(45deg) }
.mnav[open] .mnav-bars::after{ transform:translateY(-6px) rotate(-45deg) }

/* the panel escapes the header's inner grid and spans the viewport. .site-head
   is position:sticky, which makes it the containing block for this. */
.mnav-panel{ position:absolute; left:0; right:0; top:100%; background:var(--ink-raised);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:6px 22px 16px }
.mnav-lab{ font-family:var(--display); font-weight:700; font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber); margin:18px 0 2px }
/* .site-head prefix is load-bearing. `.site-head nav a` is (0,1,2) and beats a
   bare `.mnav-panel a` at (0,1,1), so without it these links inherit the
   ribbon's muted colour and its border-bottom:none. Third time this specificity
   trap has bitten in this stylesheet: see also the header Contact button. */
.site-head .mnav-panel a{ display:block; padding:13px 0;
  border-bottom:1px solid var(--hair);
  font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--offwhite) }
.site-head .mnav-panel a:last-child{ border-bottom:none }
.site-head .mnav-panel a:active{ color:var(--amber) }

@media (max-width:640px){ .mnav{ display:block } }


/* Skip link. Off screen until focused, so a keyboard user can jump the header
   instead of tabbing through the whole ribbon on every page. */
.skip{ position:absolute; left:-9999px; top:0; z-index:60; border-bottom:none }
.skip:focus{ left:0; top:0; padding:12px 18px; background:var(--amber);
  color:var(--ink-deep); font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase }


/* ═══ 16. MOCKUP COMPONENTS (ported 21 Aug) ══════════════════════════════
   Ported from claude/content/five-page-mockups.html for /faq and
   /outsourced-the-business. Adapted to the live token set rather than copied:
   the mockup carried its own :root block, and the live sheet rebinds --amber
   to Amber Ink inside .s-paper, so anything using --amber here demotes on a
   light section automatically.

   Bullets are the SQUARE TICK, not ul.chev. Four assets already follow that
   precedent, and the rotated chevron is the one still sitting in BLOCKED
   against §5A's arrow prohibition. */

ul.tick{ list-style:none; max-width:70ch }
ul.tick li{ position:relative; padding-left:20px; margin-bottom:9px }
ul.tick li::before{ content:""; position:absolute; left:0; top:.56em;
  width:7px; height:7px; background:var(--amber) }

/* question and answer rows */
.qa{ border-top:1px solid var(--hair) }
.qa .item{ padding:26px 0; border-bottom:1px solid var(--hair) }
.qa .q{ font-family:var(--display); font-weight:700; font-size:15.5px;
  letter-spacing:.005em; line-height:1.3; color:var(--offwhite); margin-bottom:11px }
.qa .a{ font-size:15px; line-height:1.62; color:var(--offwhite); opacity:.92;
  max-width:70ch; margin:0 }
.qa .a + .a{ margin-top:11px }

/* numbered argument list */
.causes{ border-top:1px solid var(--hair) }
.cause{ display:flex; gap:22px; padding:24px 0; border-bottom:1px solid var(--hair) }
.cause .cn{ font-family:var(--display); font-weight:800; font-size:13px; color:var(--amber);
  flex:none; width:34px; padding-top:3px; font-variant-numeric:tabular-nums }
.cause .cb{ min-width:0 }
.cause .ch{ font-family:var(--display); font-weight:700; font-size:15.5px; line-height:1.28;
  color:var(--offwhite); margin-bottom:8px }
.cause p{ margin:0; font-size:14.5px; max-width:64ch }
.cause p + p{ margin-top:11px }

/* two column claim and answer rows */
.defl{ border-top:1px solid var(--hair) }
.defl .d{ display:grid; grid-template-columns:minmax(190px,.82fr) 1.18fr; gap:26px;
  padding:19px 0; border-bottom:1px solid var(--hair) }
.defl .q2{ font-family:var(--display); font-weight:700; font-size:14.5px; line-height:1.34;
  color:var(--offwhite) }
.defl .a2{ font-size:14.5px; line-height:1.58; color:var(--offwhite); opacity:.92; margin:0 }

/* contents rows */
.toc{ border-top:1px solid var(--hair) }
.toc .r{ display:flex; gap:18px; align-items:baseline; padding:14px 0;
  border-bottom:1px solid var(--hair) }
.toc .r .tn{ font-family:var(--display); font-weight:700; font-size:11.5px; color:var(--amber);
  flex:none; width:28px; font-variant-numeric:tabular-nums }
.toc .r .tt{ font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--offwhite) }

/* redaction bars: live text on rules, no image, same motif as the excerpts */
.rd-lines{ display:flex; flex-direction:column; gap:7px }
.rd-lines i{ display:block; height:13px; border-radius:1px; background:var(--redact);
  box-shadow:0 0 0 1px var(--redact-edge) }
.s-paper .rd-lines i{ background:#2B2C30; box-shadow:0 0 0 1px rgba(23,24,26,.2) }

.getgrid{ display:grid; grid-template-columns:330px minmax(0,1fr); gap:34px; align-items:start }
.grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px }
.spread{ background:var(--paper); border-radius:var(--r-sm); padding:20px 18px; aspect-ratio:4/3;
  display:flex; flex-direction:column; gap:12px; overflow:hidden }
.spread .sh{ font-family:var(--display); font-weight:800; font-size:13px; text-transform:uppercase;
  color:var(--paper-ink); letter-spacing:-.005em }
.spread .rd-lines i{ background:#2B2C30; box-shadow:0 0 0 1px rgba(23,24,26,.18) }

@media (max-width:860px){ .getgrid{ grid-template-columns:1fr; gap:30px } }
@media (max-width:700px){
  .defl .d{ grid-template-columns:1fr; gap:9px; padding:16px 0 }
  .cause{ gap:14px }
  .cause .cn{ width:26px }
}

/* labeled bio rows on /about, from the background workup */
/* NOT .d3: that name is already taken by the display scale at line ~121, and
   redefining it here would have shrunk every display-3 heading on the site. */
.bio-h{ font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.01em; line-height:1.14; font-size:15px; color:var(--offwhite) }
.bio-rows{ border-top:1px solid var(--hair) }
.bio-row{ padding:24px 0; border-bottom:1px solid var(--hair) }
.bio-row p{ margin:10px 0 0; font-size:15px; max-width:62ch }
.bio-row p + p{ margin-top:11px }


/* ═══ 17. HOME BANNERS (21 Aug) ══════════════════════════════════════════
   Three full-bleed bands, one per practice area, alternating Paper and Ink so
   the page reads as a sequence rather than a stack. Heading left, significance
   right. No arrow glyphs in the links: the mark is in the header and §5A
   forbids pairing it with the arrow motif. */
.banner{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:52px;
  align-items:start }
.banner p{ font-size:16px; line-height:1.66; max-width:56ch }
@media (max-width:820px){ .banner{ grid-template-columns:1fr; gap:26px } }


/* ═══ 18. HERO BACKDROPS v2 (21 Aug) ═════════════════════════════════════
   Neo-noir liminal set, one shared Midjourney template, graded as a warm
   ink duotone. v2: the image runs at full strength and only the TEXT ZONE is
   protected, by a feathered ink plate that dies out by ~72% of the width.
   The flat full-width overlay from v1 is gone: it was why the images read as
   faint. Marco asked for "a black box behind the text"; the feather IS that
   box, minus the visible edges.

   THE PLATE IS THE CONTRAST GUARANTEE. contrast.js cannot see background
   images, so the .90 ink over the text zone, plus the text-shadow below, is
   what holds Off-White at spec. Do not thin the left stops without
   re-measuring by eye. Asset filenames are versioned (-2) because /assets/*
   ships immutable: a changed image must change name. */
.hero-bg{ background-color:var(--ink);
  background-image:
    linear-gradient(97deg, rgba(12,14,17,.94) 0%, rgba(12,14,17,.88) 36%,
      rgba(12,14,17,.52) 56%, rgba(12,14,17,.10) 72%, rgba(12,14,17,0) 86%),
    var(--hero);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  padding-top:112px; padding-bottom:112px }
.hero-bg h1, .hero-bg .lead, .hero-bg p, .hero-bg .kick{
  text-shadow:0 1px 26px rgba(7,8,10,.6) }
.hero-content{ --hero:url('assets/heroes/content-2.webp') }
.hero-paid{ --hero:url('assets/heroes/paid-2.webp') }
.hero-sales{ --hero:url('assets/heroes/sales-2.webp') }
.hero-home{ --hero:url('assets/heroes/home-highway-2.webp') }
@media (max-width:700px){
  .hero-bg{ padding-top:78px; padding-bottom:78px;
    background-image:linear-gradient(rgba(12,14,17,.76), rgba(12,14,17,.84)), var(--hero);
    background-position:center right }
}


/* ═══ 19. RHYTHM COMPONENTS ═══════════════════════════════════════════════
   Adopted 22 Aug 2026 with the paid-acquisition rewrite (mock v9 approved).
   Evidence basis: claude/research/visual-rhythm-evidence.md — isolation
   devices + band alternation + numbered progress. Rules kept: no drop
   shadows (7), no arrow motifs (5A), amber becomes amber-ink on paper.   */
.secnum{font-family:var(--disp,'Archivo',system-ui,sans-serif);font-weight:800;font-size:15px;letter-spacing:.08em;color:#7A5410;margin-right:12px}
.band.s-ink .secnum{color:#F0B429}
.statcard{background:#E4E2DA;color:#1A1A18;border-radius:12px;padding:22px 24px;margin-top:26px;max-width:62ch}
.statcard .clab{font-family:var(--disp,'Archivo',system-ui,sans-serif);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#7A5410;margin-bottom:6px}
.strow{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid rgba(23,24,26,.12)}
.strow:last-child{border-bottom:0;padding-bottom:2px}
.strow b{font-family:var(--disp,'Archivo',system-ui,sans-serif);font-weight:800;font-size:22px;line-height:1.05;min-width:104px;color:#1A1A18;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.strow span{font-size:13.5px;line-height:1.45;color:#55585C}
.bignum{font-family:var(--disp,'Archivo',system-ui,sans-serif);font-weight:800;font-size:clamp(56px,9vw,96px);line-height:1;color:#F0F0EE;letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin-top:26px}
.bignum-rule{width:64px;height:5px;background:#F0B429;margin:14px 0 12px}
.bignum-lab{font-size:14.5px;line-height:1.55;color:#9AA0A6;max-width:44ch}
.pullq{border-left:3px solid #F0B429;background:rgba(240,180,41,.07);padding:16px 18px;margin-top:26px;max-width:62ch}
.pullq p{font-size:17.5px;line-height:1.5;font-style:italic;color:#F0F0EE;max-width:none}
.diagbox{background:#EDEBE4;border:1px solid rgba(23,24,26,.14);border-radius:14px;padding:28px 30px;margin-top:26px;max-width:66ch}
.diagbox .clab{font-family:var(--disp,'Archivo',system-ui,sans-serif);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#7A5410;margin-bottom:10px}
.diagbox p{color:#1A1A18}
@media (max-width:700px){
  .strow{gap:12px}
  .strow b{font-size:19px;min-width:88px}
  .diagbox{padding:20px 18px}
}

/* ═══ 20. GATECARD — Build Order opt-in on pillar pages ═══════════════════
   Added 23 Aug 2026 (lead-magnet swap). One asset, page-matched pitch:
   claude/research/lead-magnet-evidence.md. Bone card family (§19), amber
   only via .btn--primary; no shadows, no new accents.                     */
.gatecard{background:#E4E2DA;border-radius:12px;padding:22px 24px;margin-top:14px;max-width:66ch}
.gatecard .clab{font-family:var(--disp,'Archivo',system-ui,sans-serif);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#7A5410;margin-bottom:8px}
.gatecard p{color:#1A1A18;font-size:15px;line-height:1.6;max-width:none}
.gatecard .gateform{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;border-bottom:0;padding:14px 0 2px;margin:0}
.gatecard .gateform input[type=email]{flex:1;min-width:220px;background:#F6F5F1;border:1px solid rgba(23,24,26,.28);border-radius:8px;padding:12px 14px;font-family:var(--body,'Inter',system-ui,sans-serif);font-size:15px;color:#1A1A18}
.gatecard .gateform input[type=email]::placeholder{color:#6B7076}
.gatecard .gateform input[type=email]:focus-visible{outline:2px solid #7A5410;outline-offset:2px}
.gatecard .gateform button{border:0;cursor:pointer}
.gatecard .gxs{font-size:12.5px;color:#55585C;margin-top:10px}
@media (max-width:700px){
  .gatecard{padding:18px 16px}
  .gatecard .gateform button{width:100%}
}

/* ═══ 21. HOME CLOSER PANELS (25 Aug) ═════════════════════════════════════
   The closing section's three inline links promoted to raised cards after
   the paragraph version read as improvised. The whole card is the anchor.
   No arrow glyphs (§5A): the affordance is the amber read-line and the
   hover ring. Each kick label reuses its destination page's own kick. */
.hpanels{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
.hpanel{ display:flex; flex-direction:column; gap:10px;
  background:var(--ink-raised); border:1px solid rgba(240,240,238,.13); border-radius:12px;
  padding:26px 24px; text-decoration:none; color:var(--offwhite) }
.hpanel:hover{ border-color:rgba(240,180,41,.55) }
.hpanel:focus-visible{ outline:2px solid var(--amber); outline-offset:2px }
.hpanel .hp-kick{ font-family:var(--disp); font-weight:600; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--amber) }
.hpanel .hp-title{ font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:20px; letter-spacing:-.01em }
.hpanel .hp-line{ font-size:14.5px; line-height:1.5; color:var(--muted) }
.hpanel .hp-read{ margin-top:auto; padding-top:8px; font-family:var(--disp); font-weight:600;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber) }
@media (max-width:820px){ .hpanels{ grid-template-columns:1fr } }

/* 2026-09-09: practice pages run as one paper band; rebind dark-band elements */
.s-paper .pullq p{color:var(--paper-ink)}
.s-paper .bignum{color:var(--paper-ink)}
.s-paper .bignum-lab{color:#55575C}


/* ═══ 22. HOME (10 Sept 2026) ═════════════════════════════════════════════
   The home page is a doorway, not a pitch: no cards, no fills, hairline rules
   and wide gutters, and every block is a destination. Centred hero, off-white
   headline with amber kept as the accent, and the three practice areas sitting
   in the foot of the hero rather than in a band of their own. */

/* 22.1 Hero — centred, photograph held well back, practice row at the foot */
.home-hero{ padding:clamp(60px,7vw,120px) 0 clamp(52px,6vw,106px); text-align:center;
  background-color:var(--ink);
  background-image:
    radial-gradient(ellipse 58% 52% at 50% 42%,
      rgba(12,14,17,.30) 0%, rgba(12,14,17,0) 100%),
    linear-gradient(180deg, rgba(12,14,17,.26) 0%, rgba(12,14,17,.16) 50%,
      rgba(12,14,17,.58) 100%),
    url('assets/heroes/mj-library.webp');
  background-size:cover; background-position:center; background-repeat:no-repeat }
/* A landscape frame crops to the empty aisle on a phone and loses the drawers
   entirely, so narrow screens get a portrait render of the same room. */
@media (max-width:760px){
  .home-hero{ padding:clamp(48px,12vw,84px) 0 clamp(44px,11vw,76px);
    background-image:
    radial-gradient(ellipse 92% 54% at 50% 34%,
      rgba(12,14,17,.36) 0%, rgba(12,14,17,0) 100%),
    linear-gradient(180deg, rgba(12,14,17,.32) 0%, rgba(12,14,17,.22) 50%,
      rgba(12,14,17,.64) 100%),
    url('assets/heroes/mj-library-tall.webp') }
}
.home-hero .kick--rule{ justify-content:center }
.home-hero .statement{ font-size:clamp(32px,4.9vw,70px); line-height:.99;
  letter-spacing:-.024em; text-transform:uppercase; color:var(--offwhite-fixed);
  max-width:17ch; margin:0 auto }
.home-hero .lead{ font-size:clamp(17px,1.4vw,20px); line-height:1.5; max-width:52ch;
  color:var(--muted) }
/* the global p rule sets max-width:74ch with no auto margins, so a centred
   paragraph's box is pinned left and anything inside it centres in the wrong
   box. Centre every block in the hero, not just the text inside them. */
.home-hero p{ margin-left:auto; margin-right:auto }
@media (max-width:700px){ .home-hero{ padding-top:38px } }

/* the three practice areas, as the foot of the hero */
.prow{ margin-top:clamp(42px,4.6vw,68px); border-top:1px solid var(--hair);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); text-align:left }
.prow a{ display:block; border-bottom:none; text-decoration:none; color:inherit;
  padding:clamp(20px,2vw,26px) clamp(20px,2.4vw,34px) clamp(26px,3vw,34px);
  border-right:1px solid var(--hair-2) }
.prow a:first-child{ padding-left:0 }
.prow a:last-child{ border-right:none; padding-right:0 }
.prow .p-n{ display:block; font-family:var(--display); font-weight:800; font-size:11px;
  letter-spacing:.16em; color:var(--amber) }
.prow .p-t{ display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(14px,1.15vw,16px); letter-spacing:.02em; text-transform:uppercase;
  color:var(--offwhite-fixed); margin-top:10px }
.prow .p-l{ display:block; font-size:clamp(13.5px,1.05vw,15px); line-height:1.5;
  color:var(--muted); margin-top:6px }
.prow a:hover .p-t{ color:var(--amber) }
.prow a:focus-visible{ outline:2px solid var(--amber); outline-offset:-3px }
@media (max-width:820px){
  .prow{ grid-template-columns:1fr; text-align:center }
  .prow a{ border-right:none; border-bottom:1px solid var(--hair-2); padding:20px 0 }
  .prow a:last-child{ border-bottom:none }
}

/* 22.2 The wider measure the home page runs at */
.wrap--wide{ max-width:1320px }

/* 22.3 The field document — one quiet row, no card and no cover art */
.docrow{ max-width:74ch }
.docrow .dr-title{ font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(23px,3vw,42px); line-height:1.04; letter-spacing:-.016em;
  max-width:22ch; margin-top:16px }
.docrow .dr-line{ font-size:clamp(15.5px,1.2vw,17px); line-height:1.62;
  color:var(--muted); max-width:62ch; margin-top:16px }

/* 22.4 Everything else worth opening — ruled rows, nothing boxed */
.doors{ border-top:1px solid var(--hair-lt) }
.door{ display:grid; grid-template-columns:minmax(0,17rem) minmax(0,1fr) auto;
  gap:40px; align-items:baseline; padding:clamp(22px,2vw,28px) 0; color:inherit;
  text-decoration:none; border-bottom:1px solid var(--hair-lt) }
.door .dr-k{ font-family:var(--display); font-weight:600; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--amber-ink) }
.door .dr-t{ font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(17px,1.4vw,21px); letter-spacing:-.008em }
.door .dr-l{ font-size:clamp(15px,1.16vw,16.5px); line-height:1.58;
  color:var(--paper-muted); display:inline-block; margin-top:5px }
.door .dr-go{ font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--amber-ink); white-space:nowrap }
.door:hover .dr-t{ color:var(--amber-ink) }
.door:focus-visible{ outline:2px solid var(--amber-ink); outline-offset:4px }
.tlink{ display:inline-block; font-family:var(--display); font-weight:700; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--amber-ink);
  border-bottom:2px solid var(--amber-ink); padding-bottom:4px; text-decoration:none }
.tlink:hover{ color:var(--paper-ink); border-bottom-color:var(--paper-ink) }
@media (max-width:820px){
  .door{ grid-template-columns:1fr; gap:7px; padding:20px 0 }
  .door .dr-go{ margin-top:4px }
}

/* 22.5 PARKED — the publication band. Marco, 10 Sept: "we're not gonna deploy a
   cadence asset yet." The markup is out of index.html; these rules stay because
   the band comes back as a two-option signup (the weekly and the quarterly) once
   the weekly is running. See claude/weekly-publication-plan.md. */
.qtr{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(32px,4vw,64px); align-items:end }
.qtr .q-date{ font-family:var(--display); font-weight:600; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--amber-ink) }
.qtr .q-title{ font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(20px,2.2vw,30px); line-height:1.06; letter-spacing:-.012em;
  margin-top:12px; max-width:20ch }
.qtr .q-line{ font-size:clamp(15px,1.16vw,16.5px); line-height:1.6;
  color:var(--bone-muted); margin-top:12px; max-width:52ch }
.qform{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap }
.qform label{ display:block; font-family:var(--display); font-weight:600; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--bone-muted); margin-bottom:10px }
.qform input[type=email]{ flex:1; min-width:230px; font-family:var(--body); font-size:16px;
  color:var(--bone-ink); background:transparent; border:0;
  border-bottom:2px solid var(--bone-ink); padding:6px 2px 9px }
.qform input[type=email]::placeholder{ color:var(--bone-muted) }
.qform input[type=email]:focus{ outline:none; border-bottom-color:var(--amber-ink) }
.qtr .q-small{ font-size:13px; color:var(--bone-muted); margin-top:14px; max-width:46ch }
@media (max-width:820px){ .qtr{ grid-template-columns:1fr; align-items:start } }

/* 22.6 Scope of work — a banner, not a section.
   Marco, 10 Sept: "I just want it to be the size of a banner and be focused more on
   the scope of work that I can do… link all of the details to the engagements page."
   Then: "cut out the contractor analogy" and "let's not try to sell people on the
   home page. Let's just describe." So: a plain label, the list, and a link out. */
.capban{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(36px,5vw,88px); align-items:start }
.capban-h{ font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(26px,2.5vw,38px); line-height:1.02; letter-spacing:-.018em;
  margin-top:14px; max-width:14ch; color:var(--paper-ink) }
.capban-l p{ margin-top:18px; font-size:clamp(15px,1.15vw,16.5px); line-height:1.7;
  color:var(--paper-muted); max-width:44ch }
.capban-r{ border-top:2px solid currentColor }
.capran{ display:grid; grid-template-columns:minmax(0,32%) minmax(0,1fr);
  gap:clamp(14px,2vw,28px); align-items:baseline;
  padding:clamp(18px,2vw,26px) 0; border-bottom:1px solid var(--hair-lt) }
.capran:last-child{ border-bottom:none }
.capran span{ font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(12.5px,1vw,14px); letter-spacing:.02em; color:var(--amber-ink) }
.capran span a{ color:inherit; border-bottom:1px solid transparent }
.capran span a:hover{ border-bottom-color:currentColor }
.capran p{ margin:0; max-width:none; font-size:clamp(14.5px,1.1vw,16px);
  line-height:1.75; word-spacing:.04em; color:var(--paper-ink) }

.capfoot{ margin-top:clamp(26px,2.8vw,40px); padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid var(--hair-lt);
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:16px clamp(24px,3vw,48px); align-items:baseline }
.capfoot > p{ margin:0; max-width:54ch; font-size:clamp(13.5px,1.02vw,15px);
  line-height:1.55; color:var(--paper-muted) }
.capfoot-l{ display:flex; flex-wrap:wrap; gap:10px clamp(18px,1.9vw,26px);
  align-items:baseline }
.capfoot-l a{ font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:10.5px; letter-spacing:.15em; white-space:nowrap }

@media (max-width:900px){
  .capban{ grid-template-columns:1fr; gap:26px }
  .capban-h{ max-width:20ch }
  .capban-l p{ max-width:60ch }
}
@media (max-width:860px){ .capfoot{ grid-template-columns:1fr } }
@media (max-width:560px){
  .capran{ grid-template-columns:1fr; gap:4px }
  .capfoot{ display:block }
  .capfoot-l{ margin-top:18px }
}

/* 22.7 Gated-document opt-in, below the two banners.
   Marco, 10 Sept: "add in the opt in banner for the gated asset… below these two
   banners." Same buyer-gate form as /how-your-buyer-decides, email only; the
   Netlify function treats the second field as optional. Hidden `source` field
   marks where the opt-in came from. */
.optin{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(28px,4vw,72px); align-items:center }
.optin-h{ font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(22px,2.1vw,32px); line-height:1.06; letter-spacing:-.016em;
  margin-top:14px; max-width:22ch; color:var(--offwhite) }
.optin-l p{ margin-top:14px; font-size:clamp(14.5px,1.1vw,16px); line-height:1.6;
  color:var(--muted); max-width:56ch }
.optin-lab{ display:block; font-family:var(--display); font-weight:700;
  text-transform:uppercase; font-size:10.5px; letter-spacing:.2em;
  color:var(--amber); margin-bottom:9px }
.optin-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch }
.optin-row input[type=email]{ flex:1 1 240px; min-width:0;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.22);
  border-radius:8px; padding:13px 14px; font-family:var(--body);
  font-size:15px; color:var(--offwhite) }
.optin-row input[type=email]::placeholder{ color:#7E858D }
.optin-row input[type=email]:focus-visible{ outline:2px solid var(--amber);
  outline-offset:2px; border-color:transparent }
.optin-row button{ border:0; cursor:pointer; flex:0 0 auto }
.optin-fine{ margin-top:12px; font-size:12.5px; line-height:1.55; color:#7E858D;
  max-width:46ch }
@media (max-width:900px){
  .optin{ grid-template-columns:1fr; gap:26px; align-items:start }
  .optin-h{ max-width:24ch }
}
@media (max-width:520px){ .optin-row button{ width:100% } }

/* ═══ 23. ASK THIS INSTEAD ════════════════════════════════════════════════
   The device carried over from the syndicator packet into the pillar essay:
   a claim the reader will actually hear, why it works, and the one question
   that settles it. Marco, 11 Sept: "that little character in it." */
.ask{ border-top:1px solid var(--hair-lt); padding:clamp(16px,1.8vw,22px) 0 }
.ask:first-of-type{ border-top:2px solid currentColor }
.ask .ask-q{ font-family:var(--display); font-weight:700; font-size:clamp(15px,1.25vw,17.5px);
  line-height:1.4; letter-spacing:-.004em; margin:0 }
.ask p{ margin-top:9px; max-width:66ch }
.ask .ask-lab{ display:block; font-family:var(--display); font-weight:700; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--amber); margin:14px 0 5px }
.ask .ask-a{ margin:0; font-size:clamp(15px,1.2vw,17px); line-height:1.5;
  color:var(--offwhite); font-weight:500; max-width:64ch }
.s-paper .ask .ask-lab{ color:var(--amber-ink) }
.s-paper .ask .ask-a{ color:var(--paper-ink) }

/* ---- 24. Deck figures ---------------------------------------------------
   Line drawings lifted from the 505 syndicator deck. Every stroke rides on
   --ink / --ink-deep / --amber, so the .s-ink override below simply
   repaints the custom properties and the same markup works on a dark band. */
.dfig{ margin:36px 0 32px; padding:0; max-width:62ch }
.dfig svg{ display:block; width:100%; height:auto; max-width:420px;
  margin:0 auto; overflow:visible }
.dfig-cap{ margin:16px auto 0; max-width:44ch; text-align:center;
  font-family:var(--body); font-size:12.5px; line-height:1.54;
  color:var(--paper-muted) }
.s-ink .dfig svg{ --ink:var(--offwhite); --ink-deep:var(--offwhite) }
.s-ink .dfig-cap{ color:var(--muted) }
.s-bone .dfig-cap{ color:var(--paper-muted) }
@media (max-width:560px){
  .dfig{ margin:28px 0 24px }
  .dfig svg{ max-width:300px }
  .dfig-cap{ font-size:12px }
}

/* ---- 25. The three businesses ------------------------------------------
   Replaces what used to be eleven consecutive body paragraphs describing
   the same three companies twice. Definition / economics / consequence,
   one row each, so the parallel is visible instead of asserted.        */
.biz{ margin:28px 0 4px; max-width:64ch }
.bizrow{ padding:24px 0; border-top:1px solid var(--hair-lt) }
.bizrow:first-child{ border-top:2px solid currentColor }
.bizrow-h{ font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.085em; font-size:clamp(12px,1.1vw,13.5px); margin:0 0 14px;
  color:var(--amber) }
.s-paper .bizrow-h, .s-bone .bizrow-h{ color:var(--amber-ink) }
.bizrow dl{ margin:0; display:grid; grid-template-columns:92px 1fr; gap:4px 18px;
  align-items:baseline }
.bizrow dt{ font-family:var(--display); font-weight:700; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
  padding-top:4px }
.s-paper .bizrow dt, .s-bone .bizrow dt{ color:var(--paper-muted) }
.bizrow dd{ margin:0 0 10px; font-size:16px; line-height:1.66;
  color:var(--offwhite); opacity:.92 }
.s-paper .bizrow dd, .s-bone .bizrow dd{ color:var(--paper-ink); opacity:1 }
.bizrow dd:last-of-type{ margin-bottom:0 }
@media (max-width:620px){
  .bizrow dl{ grid-template-columns:1fr; gap:0 }
  .bizrow dt{ padding-top:0; margin-top:12px }
  .bizrow dt:first-of-type{ margin-top:0 }
  .bizrow dd{ margin-bottom:0 }
}

/* ---- 26. The stage walk -------------------------------------------------
   100 buyers in, 26 out. Was a prose sentence naming seven numbers, which
   is the one shape a reader cannot hold in their head.                 */
.stages{ margin:30px 0 4px; max-width:56ch }
.stage{ display:grid; grid-template-columns:54px 122px minmax(0,1fr);
  gap:0 14px; align-items:center; padding:8px 0 }
.stage + .stage{ border-top:1px solid rgba(240,240,238,.09) }
.s-paper .stage + .stage, .s-bone .stage + .stage{ border-top-color:var(--hair-lt) }
.stage-n{ font-family:var(--display); font-weight:800;
  font-size:clamp(19px,2vw,23px); line-height:1; color:var(--offwhite);
  font-variant-numeric:tabular-nums; text-align:right }
.stage-l{ font-size:13.5px; line-height:1.3; color:var(--muted) }
.stage-b{ position:relative; height:11px }
.stage-b::before{ content:""; position:absolute; inset:0 auto 0 0;
  width:var(--w,100%); background:var(--amber); opacity:.28; border-radius:1px }
.stage--out .stage-n{ color:var(--amber) }
.stage--out .stage-l{ color:var(--offwhite) }
.stage--out .stage-b::before{ opacity:.95 }
.s-paper .stage-n, .s-bone .stage-n{ color:var(--paper-ink) }
.s-paper .stage-l, .s-bone .stage-l{ color:var(--paper-muted) }
@media (max-width:560px){
  .stages{ max-width:none }
  .stage{ grid-template-columns:44px 1fr; gap:2px 12px; padding:9px 0 }
  .stage-b{ grid-column:2; height:9px }
  .stage-l{ font-size:12.5px }
}

/* ---- 27. Pullquote on a light band -------------------------------------- */
.s-paper .pullq, .s-bone .pullq{ background:rgba(122,84,16,.06);
  border-left-color:var(--amber-ink) }
.s-paper .pullq p, .s-bone .pullq p{ color:var(--paper-ink) }

/* ---- 28. The advice list ------------------------------------------------
   Eight pieces of advice that used to run together as one paragraph of
   imperatives. Setting each against who sells it makes the argument
   visible in a glance instead of asserted in the sentence after.      */
.advice{ margin:26px 0 6px; max-width:60ch;
  border-top:2px solid currentColor }
.adv{ display:grid; grid-template-columns:1fr auto; gap:4px 20px;
  align-items:baseline; padding:11px 0;
  border-bottom:1px solid var(--hair-lt) }
.adv-t{ font-size:16px; line-height:1.45; color:var(--paper-ink) }
.adv-w{ font-family:var(--display); font-weight:700; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--paper-muted);
  white-space:nowrap; text-align:right }
.s-ink .adv-t{ color:var(--offwhite) }
.s-ink .adv-w{ color:var(--muted) }
.s-ink .adv{ border-bottom-color:rgba(240,240,238,.10) }
@media (max-width:560px){
  .adv{ grid-template-columns:1fr; gap:3px; padding:10px 0 }
  .adv-w{ text-align:left }
  .adv-t{ font-size:15.5px }
}


/* ═══ 30. LONGFORM ARTICLE (pillar) ═══════════════════════════════════════
   The marketing industrial complex, rewritten to the copy system. The
   article runs as a sequence of bands rather than one document column, so
   the body type, the display beat and the two figures all need scoping
   here rather than inheriting .sec.                                     */

.longread p{ font-size:16.5px; line-height:1.76; max-width:62ch; margin:0 0 22px }
.longread p:last-child{ margin-bottom:0 }
.longread .lead{ font-size:clamp(17px,2.5vw,19px); line-height:1.6; max-width:58ch }
.longread sup{ font-size:.62em; vertical-align:super; line-height:0; color:var(--amber) }

/* The beat. A display-weight line that carries a turn in the argument. */
.beat{ font-family:var(--display); font-weight:700;
  font-size:clamp(17px,2.4vw,20px); line-height:1.32;
  margin:30px 0 22px; max-width:52ch }
.longread .beat:first-child{ margin-top:0 }

/* Labelled runs. Named things, each with its definition on the same line. */
.arch{ margin:24px 0; max-width:62ch }
.arch p{ margin:0 0 14px }
.arch p:last-child{ margin-bottom:0 }
.arch b{ font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.07em; font-size:13px; color:var(--amber) }

/* The six-step chain, both columns. */
.chain{ margin:26px 0 8px; max-width:54ch }
.chain-hd{ display:grid; grid-template-columns:118px 1fr 1fr; gap:0 14px;
  padding-bottom:9px; border-bottom:1px solid var(--hair) }
.chain-hd span{ font-family:var(--display); font-weight:700; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.11em; color:var(--muted) }
.chain-hd span:nth-child(3){ color:var(--amber) }
.crow{ display:grid; grid-template-columns:118px 1fr 1fr; gap:0 14px;
  align-items:center; padding:9px 0 }
.crow + .crow{ border-top:1px solid var(--hair) }
.crow-l{ font-size:13px; color:var(--muted) }
.cell{ display:flex; align-items:center; gap:9px; min-width:0 }
.cell b{ font-family:var(--display); font-weight:800; font-size:17px; line-height:1;
  color:var(--offwhite); font-variant-numeric:tabular-nums;
  width:30px; text-align:right; flex:none }
.cell i{ display:block; height:9px; background:var(--offwhite); opacity:.22;
  border-radius:1px; width:var(--w,100%); min-width:2px }
.cell--hi b{ color:var(--amber) }
.cell--hi i{ background:var(--amber); opacity:.92 }
.crow--end b{ font-size:22px }

/* Sources. */
.src{ margin-top:38px; padding-top:20px; border-top:1px solid var(--hair);
  max-width:62ch }
.src p{ font-size:13px; line-height:1.62; margin:0 0 9px;
  color:var(--paper-muted); max-width:none }
.src .n{ font-family:var(--display); font-weight:700; font-size:9.5px;
  letter-spacing:.1em; color:var(--amber); margin-right:8px }

@media (max-width:560px){
  .chain-hd,.crow{ grid-template-columns:74px 1fr 1fr; gap:0 9px }
  .crow-l{ font-size:12px; line-height:1.3 }
  .cell b{ font-size:15px; width:26px }
  .cell i{ width:calc(var(--w,100%) * .93) }
  .crow--end b{ font-size:19px }
}
.longread .stack-1{ margin-top:14px }
.longread .stack-2{ margin-top:24px }
.longread .pullq{ margin:26px 0 24px }
.longread .bignum-lab{ margin-bottom:26px }
.longread .gatecard{ margin-top:34px }


/* ═══ 31. TYPICAL COST TABLE (engagements) ═══════════════════════════════ */
.pt-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:22px 0 10px }
.pricetable{ width:100%; min-width:560px; border-collapse:collapse; font-size:14.5px; line-height:1.5 }
.pricetable th{ font-family:var(--display); font-weight:700; font-size:9.5px; text-transform:uppercase;
  letter-spacing:.11em; color:var(--muted); text-align:left; padding:0 14px 10px 0;
  border-bottom:2px solid currentColor }
.pricetable td{ vertical-align:top; padding:13px 14px 13px 0; border-bottom:1px solid var(--hair) }
.pricetable td:last-child, .pricetable th:last-child{ padding-right:0 }
.pricetable col.c1{ width:30% } .pricetable col.c2{ width:46% } .pricetable col.c3{ width:24% }
.pricetable td:last-child{ font-family:var(--display); font-weight:700; font-size:14px; color:var(--amber) }
.pricetable td:first-child{ color:var(--muted) }
@media (max-width:560px){
  .pt-scroll{ overflow:visible }
  .pricetable{ min-width:0; font-size:14px }
  .pricetable thead, .pricetable colgroup{ display:none }
  .pricetable tr{ display:flex; flex-direction:column; padding:14px 0; border-bottom:1px solid var(--hair) }
  .pricetable td{ display:block; padding:0; border:0 }
  .pricetable td:last-child{ order:-1; font-size:15px; margin-bottom:6px }
  .pricetable td:first-child{ margin-bottom:6px }
}


/* 22.2 Hero plate — a solid box behind the text cluster, photograph untouched */
.home-hero .hero-plate{ display:inline-block; max-width:min(880px,100%);
  padding:clamp(28px,4vw,44px) clamp(22px,4vw,48px);
  background:rgba(12,14,17,.78); border-radius:8px }
.home-hero .hero-plate .statement{ margin-top:0 }
.home-hero .hero-plate .lead{ color:var(--offwhite-fixed) }
.home-hero .hero-plate .stack-3{ margin-bottom:0 }

/* §32 services band: keyword items, collapsed table on mobile */
.capran .ki{ font:inherit; text-transform:none; letter-spacing:0; color:inherit }
.capx{ display:none }
@media (max-width:700px){
  .capran{ gap:10px; padding:20px 0 }
  .capran .kdot{ display:none }
  .capran .ki{ display:block; font-size:15px; line-height:1.55; padding:3px 0 }
  .capban-r{ display:none }
  .capban.open .capban-r{ display:block }
  .capx{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:0; border:0; background:none; cursor:pointer;
    font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:12.5px; letter-spacing:.06em;
    color:var(--amber-ink); border-bottom:1px solid currentColor; line-height:1.5 }
  .capx-c{ width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .15s }
  .capban.open .capx-c{ transform:rotate(-135deg) translateY(-2px) }
  .capban{ gap:0 }
  .capban.open{ gap:26px }
}

/* §33 practice pages: more air */
.practice .sec{ margin-top:clamp(64px,8vw,96px) }
.practice .sec:first-of-type{ margin-top:48px }
.practice .sec h2{ margin-bottom:22px }
.practice .sec p{ line-height:1.9; margin-bottom:30px }
.practice .pullq{ margin:34px 0 }
.practice .sec p.stack-2{ margin-top:34px }
.practice .gatecard{ margin-top:44px }