/* ============================================================
   chrisdebayle.com — production stylesheet
   Extracted from design/Chris Debayle Paged.dc.html
   Values are authored, not derived. Do not "tidy" the hexes.
   ============================================================ */

/* ---------- Self-hosted brand fonts (WOFF2, latin subset) ----------
   Tomorrow = display only. Inter = body only. No crossover.
   'Inter' sits in the display fallback chain on purpose: Tomorrow has no
   glyph for → ← ✓, so those resolve to a brand font instead of a system one. */

@font-face{font-family:'Tomorrow';src:url('/fonts/Tomorrow-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Tomorrow';src:url('/fonts/Tomorrow-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Tomorrow';src:url('/fonts/Tomorrow-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;

  --font-display:'Tomorrow','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  /* brand palette */
  --primary:#0A66C2;
  --accent:#F97316;
  --accent-700:#C85D12;
  --dark:#1C1F24;
  --ink-soft:#3A3F46;
  --light:#F8FAFC;
  --line:#E4E7EB;
  --paper:#FFFFFF;

  /* dark-ground values authored for this site */
  --ground:#0B0E11;
  --ground-view:#101317;
  --card-dark:#171B20;
  --hair-1:#1B2027;
  --hair-2:#22272D;
  --hair-3:#262B31;
  --hair-4:#2A3037;
  --ink-head:#F4F6F8;
  --ink-body:#E8EBEE;
  --ink-2:#A8B0B9;
  --muted-2:#7E858E;   /* captions on DARK grounds only — 4.64 on #171B20 */
  --muted-3:#737B84;   /* footer counter on #0B0E11 — was #6E757E at 4.16, now 4.51 */

  /* Light-ground counterparts. --muted-2 and --accent-700 both fall short of AA
     at caption sizes on white (3.73 and 4.17), and darkening those tokens
     globally would break their dark-ground uses. These are the light-only pair. */
  --muted-on-light:#70767F;  /* 4.58 on white */
  --accent-800:#B65510;      /* 4.58 on #F3F8FD, the darkest light ground it sits on */

  /* Method stage rail — the spine gradient unrolled across the five stages.
     Interpolated between the lifted brand blue and the accent; 03 and 05 are
     --accent itself. Contrast on #171B20: 6.79 / 5.11 / 6.17 / 4.97 / 6.17. */
  --stage-1:#57A8EE;
  --stage-2:#4C8FD6;
  --stage-4:#D96A24;
  --stage-5:#F97316;
  --link-dark:#57A8EE;
  --ink-on-white-cta:#0A3F7A;

  /* layout */
  --shell-max:1320px;
  --pad-r:44px;
  --pad-l:50px;   /* +6px clears the spine */
}

/* ---------- hover system: five properties, one place ---------- */
body{
  --cd-nav-hover:#FFFFFF;
  --cd-btn-hover-bg:#F97316;
  --cd-btn-hover-ink:#141414;
  --cd-link-hover:#8CC5F4;
  /* Outlined buttons (Contact's Reach Out / LinkedIn, and the 404 CTA) sit
     white at rest and take the accent on hover. Changed from #FFFFFF, which
     made hover invisible since the border was already white. */
  --cd-outline-hover:#F97316;
  --cd-hover-speed:.16s;
}

*{margin:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--ground);
  font-family:var(--font-body);
  color:var(--ink-body);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a{
  color:var(--link-dark);
  text-decoration:none;
  transition:color var(--cd-hover-speed) ease,
             background-color var(--cd-hover-speed) ease,
             border-color var(--cd-hover-speed) ease;
}
a:hover{color:var(--cd-link-hover)}
::selection{background:var(--accent-700);color:#fff}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.cd-scroll:focus-visible{outline:none}
img{max-width:100%}

/* ---------- motion ---------- */
@keyframes cdViewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cdRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cd-view{animation:cdViewIn .38s ease both}
.cd-rise-1{animation:cdRise .5s ease both .06s}
.cd-rise-2{animation:cdRise .5s ease both .13s}

/* Cross-document fade on same-origin navigation (Chromium); harmless elsewhere. */
@view-transition{navigation:auto}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  @view-transition{navigation:none}
}

/* ---------- shell ---------- */
.cd-spine{
  position:fixed;top:0;left:0;width:6px;
  height:100vh;height:100dvh;
  background:linear-gradient(180deg,#0A66C2 0%,#0A66C2 82%,#F97316 100%);
  z-index:80;
}
.cd-shell{
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;overflow:hidden;background:var(--ground);
}
.cd-pad{max-width:var(--shell-max);margin:0 auto;padding:0 var(--pad-r) 0 var(--pad-l)}

/* ---------- header ---------- */
.cd-head{flex:none;position:relative;z-index:60;background:var(--ground);border-bottom:1px solid var(--hair-1)}
.cd-head .cd-pad{height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.cd-wordmark{
  font-family:var(--font-display);font-weight:800;font-size:14.5px;
  letter-spacing:.22em;text-transform:uppercase;color:#fff;flex:none;
}
.cd-wordmark:hover{color:var(--cd-nav-hover)}
.cd-navlinks{display:flex;align-items:center;gap:4px}
.cd-navlinks a{
  position:relative;font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:26px 16px;
}
.cd-navlinks a:hover{color:var(--cd-nav-hover)}
.cd-navlinks a[aria-current="page"]::after{
  content:"";position:absolute;left:16px;right:16px;bottom:20px;height:2px;background:var(--accent);
}
.cd-cta-head{
  font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;background:var(--primary);color:#fff;padding:13px 20px;
  border-radius:4px;white-space:nowrap;flex:none;
}
.cd-cta-head:hover{background:var(--cd-btn-hover-bg);color:var(--cd-btn-hover-ink)}

/* ---------- mobile tab strip ---------- */
.cd-tabs{
  display:none;flex:none;position:relative;z-index:55;background:var(--ground);
  border-bottom:1px solid var(--hair-1);overflow-x:auto;scrollbar-width:none;
}
.cd-tabs::-webkit-scrollbar{display:none}
.cd-tabs .cd-pad{display:flex;align-items:center;gap:22px;min-width:max-content}
.cd-tabs a{
  position:relative;flex:none;font-family:var(--font-display);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:15px 4px;
}
.cd-tabs a:hover{color:var(--cd-nav-hover)}
.cd-tabs a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:9px;height:2px;background:var(--accent);
}

/* ---------- mobile disclosure menu ----------
   Below 660px the six tab labels (580px of content) no longer fit, and Ethos
   and Contact fall off the right edge behind a hidden scrollbar. A permanently
   open vertical list costs 202px of shell height, which pushes the hero CTA
   below the fold, so the list overlays main instead and costs nothing.
   Applied by app.js; without JS the horizontal scroll strip remains. */
.cd-menubar{display:none}

@media (max-width:660px){
  .cd-tabs.is-menu{display:block;overflow:visible;position:relative}
  .cd-tabs.is-menu .cd-menubar{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    max-width:var(--shell-max);margin:0 auto;padding:0 26px;min-height:51px;
  }
  .cd-menu-current{
    font-family:var(--font-display);font-weight:600;font-size:11.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-2);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .cd-menu-toggle{
    display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 2px;
    background:none;border:0;cursor:pointer;color:#fff;flex:none;
    font-family:var(--font-display);font-weight:700;font-size:11.5px;
    letter-spacing:.14em;text-transform:uppercase;
  }
  .cd-menu-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
  .cd-menu-chev{
    width:8px;height:8px;flex:none;margin-top:-4px;
    border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
    transform:rotate(45deg);transition:transform var(--cd-hover-speed) ease;
  }
  .cd-tabs.is-menu.is-open .cd-menu-chev{transform:rotate(-135deg);margin-top:3px}

  /* the existing link row becomes the overlay panel */
  .cd-tabs.is-menu>.cd-pad{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:70;
    flex-direction:column;align-items:stretch;gap:0;min-width:0;
    padding:4px 26px 10px;background:var(--ground);
    border-bottom:1px solid var(--hair-1);box-shadow:0 18px 40px rgba(0,0,0,.45);
    max-height:calc(100dvh - 187px);overflow-y:auto;
  }
  .cd-tabs.is-menu.is-open>.cd-pad{display:flex}
  .cd-tabs.is-menu>.cd-pad a{
    display:flex;align-items:center;min-height:48px;padding:0 0 0 14px;
    border-left:3px solid transparent;border-bottom:1px solid var(--hair-1);
  }
  .cd-tabs.is-menu>.cd-pad a:last-child{border-bottom:0}
  /* The 2px underline reads as a divider in a vertical list, so the active item
     takes a left accent rule instead - the same device as the spine and Callout. */
  .cd-tabs.is-menu>.cd-pad a[aria-current="page"]{border-left-color:var(--accent);color:#fff}
  .cd-tabs.is-menu>.cd-pad a[aria-current="page"]::after{display:none}
}

/* ---------- main / views ---------- */
main.cd-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative}
.cd-scroll::-webkit-scrollbar{width:10px}
.cd-scroll::-webkit-scrollbar-thumb{background:var(--hair-4);border-radius:10px}
.cd-scroll::-webkit-scrollbar-track{background:transparent}

.cd-view{min-height:100%}
.cd-view .cd-pad{padding:64px var(--pad-r) 72px var(--pad-l)}

.cd-dots{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.22) 1.5px,transparent 0);
  background-size:26px 26px;opacity:.5;
}

.cd-eyebrow{
  font-family:var(--font-display);font-weight:700;font-size:11.5px;
  letter-spacing:.24em;text-transform:uppercase;
}
.cd-h2{
  font-family:var(--font-display);font-weight:800;font-size:clamp(30px,4vw,48px);
  line-height:1.05;letter-spacing:-.02em;margin-top:12px;
}

/* ---------- 01 · Home ---------- */
.cd-hero{position:relative;background:var(--primary);overflow:hidden;display:flex;align-items:center}
.cd-figure{position:absolute;right:0;bottom:0;top:0;width:min(46%,720px);pointer-events:none}
.cd-figure img{
  position:absolute;bottom:0;right:0;height:100%;width:auto;
  object-fit:contain;object-position:bottom right;display:block;
}
/* z-index keeps the copy above the figure now that the figure follows it in
   source order; on desktop the figure is absolutely positioned, so without this
   it would paint over the headline if they ever overlapped. */
.cd-hero .cd-herocopy{position:relative;z-index:1;width:100%;padding:56px var(--pad-r) 56px var(--pad-l)}
/* The prototype reserved space for the portrait with an empty .92fr column.
   That capped the headline at 640px, which the two authored hero lines cannot
   fit — see .cd-h1 below. The portrait is absolutely positioned, so the copy
   only needs a max-width that keeps it clear of the figure. */
.cd-hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.cd-hero-grid>div{max-width:860px}

.cd-pill{
  display:inline-flex;align-items:center;gap:10px;padding:8px 15px 8px 12px;
  border:1px solid rgba(255,255,255,.34);border-radius:100px;white-space:nowrap;
}
.cd-pill-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:block;flex:none}
.cd-pill-label{
  font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
}
.cd-h1{
  font-family:var(--font-display);font-weight:800;font-size:clamp(44px,5.6vw,80px);
  line-height:.96;letter-spacing:-.03em;color:#fff;margin-top:24px;text-wrap:balance;
}
/* The hero's single accent. Load-bearing — do not flatten this span. */
.cd-underline{display:inline-block;border-bottom:7px solid var(--accent);padding-bottom:3px}
.cd-hero-body{
  max-width:520px;font-size:18px;line-height:1.62;color:rgba(255,255,255,.86);
  margin-top:26px;text-wrap:pretty;
}
.cd-hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:32px}
.cd-btn-white{
  font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-on-white-cta);background-color:var(--light);
  padding:19px 32px;border-radius:4px;white-space:nowrap;
  box-shadow:0 10px 30px rgba(6,42,80,.28);
}
.cd-btn-white:hover{background:var(--cd-btn-hover-bg);color:var(--cd-btn-hover-ink)}
.cd-secondary{display:inline-flex;align-items:center;gap:12px;color:var(--accent);font-size:15px}
.cd-secondary:hover{color:var(--cd-nav-hover)}
.cd-secondary-glyph{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(249,115,22,.65);
  display:flex;align-items:center;justify-content:center;color:var(--accent);flex:none;
}
.cd-secondary-label{border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;color:var(--light)}

.cd-trust{
  display:flex;flex-wrap:wrap;gap:26px;margin-top:38px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.22);
}
.cd-trust-fig{font-family:var(--font-display);font-weight:800;font-size:26px;color:#fff;line-height:1}
.cd-trust-cap{
  font-family:var(--font-display);font-weight:600;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:6px;
}
.cd-trust-rule{width:1px;background:rgba(255,255,255,.22)}

/* ---------- 02 · Work With Me ---------- */
/* Work takes the softer --light ground; Proof keeps pure --paper. The two are
   the site's only light views and read as one surface otherwise. Work is the
   offer, Proof is the record, so the record gets the crisper white. */
.cd-work{background:var(--light)}
.cd-avail{font-size:16.5px;line-height:1.7;color:var(--ink-soft);margin-top:18px;max-width:660px}
.cd-cardlink{
  font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;margin-top:8px;align-self:flex-start;padding-bottom:4px;
}
.cd-cardlink:hover{color:var(--cd-link-hover)}

/* ---------- the single offer box (Work) ----------
   Replaces the two-card founder/hiring fork. One path, one box, three
   engagement shapes. Dark on the --light ground so it reads as the page's
   one substantive block rather than one of two competing choices. */
.cd-offer{
  margin-top:40px;border:1px solid var(--hair-2);border-radius:6px;
  background:var(--ground-view);padding:38px 36px;max-width:920px;
}
.cd-offer-label{
  font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);
}
.cd-offer-head{
  font-family:var(--font-display);font-weight:700;font-size:clamp(21px,2.3vw,27px);
  line-height:1.12;letter-spacing:-.01em;color:var(--ink-head);margin-top:14px;max-width:680px;
}
.cd-offer-body{font-size:15px;line-height:1.68;color:var(--ink-2);margin-top:16px;max-width:660px}

/* Three shapes as stacked rows on a hairline grid, so they read as one offer
   with three containers rather than three separate choices. Rows rather than
   columns because the descriptions carry a concrete example each: in three
   columns the measure fell to 29ch, well under the 45ch comfortable minimum. */
.cd-shapes{
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair-3);
  border:1px solid var(--hair-3);border-radius:6px;overflow:hidden;margin-top:28px;
}
.cd-shape{
  background:var(--card-dark);padding:20px 22px;
  display:grid;grid-template-columns:170px minmax(0,1fr);gap:22px;align-items:start;
}
.cd-shape-name{
  font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.15;
  color:var(--ink-head);
}
.cd-shape-line{font-size:13.5px;line-height:1.58;color:var(--ink-2);max-width:560px}

.cd-offer-who{
  font-size:14px;line-height:1.68;color:var(--muted-2);margin-top:22px;max-width:680px;
}
.cd-offer-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:26px}

.cd-sold{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.cd-sold-label{
  font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-800);
}
.cd-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.cd-chip{
  display:inline-flex;align-items:center;gap:9px;padding:9px 14px;
  border:1px solid var(--line);border-radius:4px;background:var(--paper);
}
.cd-chip svg{display:block;flex:none}
.cd-chip span{font-size:13.5px;color:var(--ink-soft);white-space:nowrap}

/* ---------- 03 · Method ---------- */
.cd-method{background:var(--ground-view)}
.cd-rail{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hair-3);
  border:1px solid var(--hair-3);border-radius:6px;overflow:hidden;margin-top:32px;
}
.cd-stage{background:var(--card-dark);padding:22px 18px}
/* The spine, unrolled. The spine device runs #0A66C2 -> #F97316 top to bottom;
   the rail runs the same journey left to right, cold start to closed. Brand
   hues only - no third hue is introduced, which keeps the palette the
   complementary pair it already is (blue 210deg, orange 25deg, 175deg apart).
   Blue is lifted to #57A8EE because #0A66C2 manages only 3.04 on #171B20.
   All five stops clear AA on the card: 6.79 / 5.11 / 6.17 / 4.97 / 6.17.
   Stage 03 keeps a 3px rule against the others' 2px so VALID, the IP, stays
   the marked stage. */
.cd-rail .cd-stage:nth-child(1){box-shadow:inset 0 2px 0 var(--stage-1)}
.cd-rail .cd-stage:nth-child(2){box-shadow:inset 0 2px 0 var(--stage-2)}
.cd-rail .cd-stage:nth-child(4){box-shadow:inset 0 2px 0 var(--stage-4)}
.cd-rail .cd-stage:nth-child(5){box-shadow:inset 0 2px 0 var(--stage-5)}
.cd-rail .cd-stage:nth-child(1) .cd-stage-eyebrow{color:var(--stage-1)}
.cd-rail .cd-stage:nth-child(2) .cd-stage-eyebrow{color:var(--stage-2)}
.cd-rail .cd-stage:nth-child(4) .cd-stage-eyebrow{color:var(--stage-4)}
.cd-rail .cd-stage:nth-child(5) .cd-stage-eyebrow{color:var(--stage-5)}
.cd-stage-03{box-shadow:inset 0 3px 0 var(--accent)}
/* min-height reserves two lines so all five stage titles share a baseline */
.cd-stage-eyebrow{
  font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted-2);min-height:26px;
}
.cd-stage-03 .cd-stage-eyebrow{color:var(--accent)}
.cd-stage-name{
  font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.15;
  color:var(--ink-head);margin-top:10px;
}
.cd-stage-line{font-size:13.5px;line-height:1.58;color:var(--ink-2);margin-top:8px}
/* Compound selector on purpose: .cd-callout sets margin-top:4px and is declared
   later in this file, so a bare .cd-rail-cap loses the cascade and the caption
   ends up 4px under the rail. Padding is also more generous than the base
   callout because this one is a wide block of display type, not a short quote. */
.cd-callout.cd-rail-cap{margin-top:30px;margin-bottom:4px;padding:22px 26px;max-width:820px}
/* Steps below the shared Callout size: this one runs 175 characters against the
   fight panel's 116 at 36px, so at 26px the caption outweighed the statement. */
.cd-callout.cd-rail-cap>p{font-size:clamp(18px,1.9vw,21px)}

/* VALID™ panel — a light surface on the dark Method ground.
   VALID is Chris's own trademark-pending model, so the panel inverts against
   the view to give it prominence rather than sitting as one more dark card.
   The five win letters carry --primary; on this light fill the brand blue is
   used unchanged (it is only lifted to #57A8EE on dark grounds), and accent
   text drops to --accent-700 for AA on light, per the palette rules. */
.cd-valid{
  margin-top:36px;border:1px solid var(--line);border-radius:6px;
  background:var(--paper);padding:34px 32px;
}
.cd-valid-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cd-valid-mark{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:.06em;color:var(--dark)}
.cd-valid-mark sup{font-size:13px;vertical-align:super;letter-spacing:0;color:var(--primary)}
.cd-valid-sub{
  font-family:var(--font-display);font-weight:600;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-on-light);
}
.cd-valid-intro{font-size:15px;line-height:1.68;color:var(--ink-soft);margin-top:14px;max-width:640px}
.cd-vhead,.cd-vrow{display:grid;grid-template-columns:52px 1.15fr 1.35fr}
.cd-vhead{margin-top:24px}
.cd-vhead div{
  font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-on-light);padding-bottom:10px;
}
.cd-vrow{border-top:1px solid var(--line)}
.cd-vletter{
  padding:18px 0 18px 2px;font-family:var(--font-display);font-weight:800;font-size:24px;
  line-height:1;color:var(--primary);
}
.cd-vmid{padding:18px 18px 18px 0}
.cd-vname{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--dark)}
.cd-vmeans{font-size:13.5px;line-height:1.58;color:var(--ink-soft);margin-top:5px}
.cd-vart{padding:18px 0}
.cd-vartifact{font-size:14px;line-height:1.58;color:var(--dark)}
.cd-vowner{
  font-family:var(--font-display);font-weight:600;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-on-light);margin-top:7px;
}

/* Documentation strip lives inside the now-light VALID panel, so its hairlines
   and inks follow the light palette and "Documented" takes --accent-700. */
.cd-doc{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line);
}
.cd-doc-chip{
  font-family:var(--font-display);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:8px 13px;border-radius:4px;
  border:1px solid var(--line);color:var(--muted-on-light);
}
.cd-doc-chip.is-documented{border-color:var(--accent-800);color:var(--accent-800)}
.cd-doc-arrow{color:var(--muted-on-light)}
.cd-doc-note{font-size:13.5px;color:var(--ink-soft);margin-left:6px}

.cd-fight{margin-top:34px;padding-top:26px;border-top:1px solid rgba(249,115,22,.35)}
.cd-fight p{
  font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.2vw,36px);
  line-height:1.18;color:var(--ink-head);margin-top:14px;max-width:900px;letter-spacing:-.015em;
}

/* ---------- 04 · Proof ---------- */
.cd-proof{background:var(--paper)}
.cd-grid4{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:36px;
}
.cd-cell{background:var(--paper);padding:34px 30px}
.cd-fig{
  font-family:var(--font-display);font-weight:800;font-size:clamp(40px,4.4vw,54px);
  line-height:1;color:var(--primary);letter-spacing:-.03em;
}
.cd-fig-label{
  font-family:var(--font-display);font-weight:600;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dark);margin-top:14px;
}
.cd-fig-attr{font-size:12px;color:var(--muted-on-light);margin-top:7px}
.cd-cell p{font-size:14.5px;line-height:1.62;color:var(--ink-soft);margin-top:12px}
.cd-proof-note{font-size:13px;color:var(--muted-on-light);margin-top:16px}
/* must not inherit the dark-ground link hover — near-invisible on white */
.cd-proof-note a{color:var(--primary);border-bottom:1px solid rgba(10,102,194,.4)}
.cd-proof-note a:hover{color:var(--accent-700)}

/* ---------- 05 · Ethos ---------- */
/* Dark ground, matching Method. The handoff had Ethos on --light as one of the
   three "evidence" views; Chris asked for dark. Inks follow the dark palette:
   the eyebrow lifts to #57A8EE (brand blue fails contrast on near-black) and
   the H2 takes --accent rather than --accent-700. */
.cd-ethos{background:var(--ground-view)}
.cd-ethos-col{max-width:600px;margin-top:30px;display:flex;flex-direction:column;gap:22px}
/* All three paragraphs share one treatment. The handoff set the first as a
   19px near-black lead over two 17px grey paragraphs; Chris asked for uniform. */
.cd-ethos-col p.cd-ethos-body{font-size:17px;line-height:1.68;color:var(--ink-body);text-wrap:pretty}
/* Rebuilt from the design-system Callout (quote variant) as plain markup.
   The base is STRUCTURE ONLY — every instance must also carry a ground variant.
   The fill and ink used to live here, which meant the component had a default
   state that nothing ever rendered; they are now in .cd-callout-light. */
.cd-callout{border-left:3px solid var(--accent);padding:14px 22px;margin-top:4px}
.cd-callout>span,.cd-callout>p{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,2.4vw,26px);line-height:1.28;letter-spacing:-.01em;
  text-wrap:pretty;
}
/* Light-ground variant — the originally authored treatment. Currently unused:
   Ethos moved to the dark ground, which was its only light-ground instance. */
.cd-callout-light{background:var(--light)}
.cd-callout-light>span,.cd-callout-light>p{color:var(--dark)}
/* Dark-ground variant. Same structure (3px accent rule, 14px 22px), but the
   authored var(--light) fill would be a near-white slab on #101317, so it takes
   the sanctioned "cards on dark" fill and heading ink instead. */
.cd-callout-dark{background:var(--card-dark)}
.cd-callout-dark>span,.cd-callout-dark>p{color:var(--ink-head)}
/* Blue-ground variant. A 10% white wash lifts the panel off #0A66C2 the same
   way --card-dark lifts it off #101317, and keeps the accent rule readable. */
.cd-callout-blue{background:rgba(255,255,255,.10)}
.cd-callout-blue>span,.cd-callout-blue>p{color:#fff}
.cd-btn-blue{
  align-self:flex-start;font-family:var(--font-display);font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;background:var(--primary);color:#fff;
  padding:16px 26px;border-radius:4px;white-space:nowrap;
}
.cd-btn-blue:hover{background:var(--cd-btn-hover-bg);color:var(--cd-btn-hover-ink)}

/* ---------- 06 · Contact ---------- */
.cd-contact{position:relative;background:var(--primary);overflow:hidden}
.cd-contact .cd-dots{opacity:.45;background-image:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.2) 1.5px,transparent 0)}
.cd-contact .cd-pad{position:relative}
.cd-h2-contact{
  font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4.8vw,58px);
  line-height:1.02;letter-spacing:-.025em;color:#fff;margin-top:14px;
}
.cd-contact-body{font-size:18px;line-height:1.65;color:rgba(255,255,255,.88);margin-top:18px;max-width:580px}
.cd-contact-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.cd-btn-solid{
  font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;background:#fff;color:var(--ink-on-white-cta);padding:19px 32px;
  border-radius:4px;white-space:nowrap;box-shadow:0 10px 30px rgba(6,42,80,.28);
}
.cd-btn-solid:hover{background:var(--cd-btn-hover-bg);color:var(--cd-btn-hover-ink)}
.cd-btn-outline{
  font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.55);padding:19px 26px;border-radius:4px;white-space:nowrap;
}
.cd-btn-outline:hover{border-color:var(--cd-outline-hover);color:var(--cd-nav-hover)}
.cd-reassure{margin-top:22px;max-width:680px}

/* ---------- footer bar ---------- */
.cd-footbar{flex:none;position:relative;z-index:60;background:var(--ground);border-top:1px solid var(--hair-1)}
.cd-footbar .cd-pad{height:62px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.cd-step{display:flex;align-items:center;gap:14px;min-width:0}
.cd-step-num{
  font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-3);flex:none;
}
.cd-step-label{
  font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cd-foot-nav{display:flex;align-items:center;gap:8px;flex:none}
.cd-back{
  width:38px;height:38px;border-radius:4px;border:1px solid var(--hair-4);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);
  font-size:14px;font-family:var(--font-body);flex:none;
}
.cd-back:hover{border-color:var(--link-dark);color:var(--cd-nav-hover)}
.cd-next{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--hair-4);border-radius:4px;padding:12px 18px;color:var(--ink-body);
}
.cd-next:hover{border-color:var(--accent);color:var(--cd-nav-hover)}
.cd-next .cd-next-word{color:var(--muted-3)}
.cd-next .cd-next-arrow{color:var(--accent);font-family:var(--font-body)}

/* ============================================================
   Breakpoints
   ============================================================ */

/* Desktop only. The authored hero could not hold both its authored sizes here:
   "and carry the number." needs 985px at the full 80px, but the authored
   min(46%,720px) portrait left only ~640px, which broke the two hero lines into
   six and pushed the CTA below the fold at 1440px.

   The asset carried 31% dead width and 12.5% dead height in transparent margin,
   which is what made the portrait shrink: under object-fit:contain that empty
   space had to fit the box too. The asset is now trimmed to its alpha bounding
   box (aspect 0.614), so the figure holds him and nothing else.

   At 36% the box is always wider than his height-driven width, so he renders
   full band height, bottom-right, with no gap above his head at any desktop
   size. His on-screen width then scales with viewport HEIGHT while the headline
   scales with viewport WIDTH, so the two are checked independently: 73px is the
   largest headline that clears him at 1600px, the tightest pairing (centred
   content pushes the text right while a 900px-tall band keeps him wide).
   Below 1080px the portrait moves above the copy, so neither rule applies. */
@media (min-width:1081px){
  .cd-figure{width:min(36%,720px)}
  .cd-h1{font-size:clamp(44px,4.9vw,73px)}
  .cd-hero-grid>div{max-width:1000px}
}

@media (max-width:1080px){
  .cd-tabs{display:flex}
  .cd-navlinks{display:none}
  .cd-hero{flex-direction:column;align-items:stretch}
  .cd-hero-grid{grid-template-columns:1fr}
  /* portrait becomes a static block above the copy; sized against dvh so the
     h1 and CTA stay above the fold on short viewports */
  /* The portrait follows the copy in source order, so on mobile it lands below
     the metrics: the visitor reads the headline and CTA first, then scrolls to
     the portrait. Size and centring are unchanged. */
  .cd-figure{position:relative;width:100%;height:min(230px,26dvh);top:auto;bottom:auto;right:auto;flex:none;margin-top:auto}
  .cd-figure img{height:min(230px,26dvh);right:auto;left:50%;transform:translateX(-50%)}
  .cd-hero .cd-herocopy{padding-top:36px;padding-bottom:28px}
  .cd-rail{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:820px){
  /* 44px minimum on controls. Inline prose links (e.g. "LinkedIn" inside the
     Proof caption) are deliberately exempt — padding them to 44px would break
     the line box they sit in. */
  .cd-footbar a{min-height:44px}
  .cd-tabs a{padding-top:18px;padding-bottom:18px}
  .cd-cta-head,.cd-btn-white,.cd-btn-blue,.cd-btn-solid,.cd-btn-outline,.cd-cardlink,.cd-secondary{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  .cd-cardlink{justify-content:flex-start}
  .cd-wordmark{display:inline-flex;align-items:center;min-height:44px}
  .cd-shape{grid-template-columns:1fr;gap:7px}
  .cd-offer{padding:28px 22px}
  .cd-grid4{grid-template-columns:1fr}
  .cd-rail{grid-template-columns:1fr}
  .cd-vrow{grid-template-columns:36px 1fr}
  .cd-vrow>.cd-vart{grid-column:2;padding-top:0}
  .cd-pad{padding-left:26px;padding-right:26px}
  .cd-view .cd-pad{padding-left:26px;padding-right:26px}
  .cd-hero .cd-herocopy{padding-left:26px;padding-right:26px}
}

/* Below ~620px the authored 44px clamp floor exceeds the column: "carry the
   number" no longer fits one line, so the underlined span broke mid-phrase, the
   trailing period orphaned onto a line of its own, and the 7-line headline
   pushed the CTA ~184px below the fold at 390px. This floor keeps the span
   whole and the CTA above the fold; 44px still applies from 620px up. */
@media (max-width:620px){
  .cd-h1{font-size:clamp(28px,7.8vw,44px)}
}

@media (max-width:520px){
  .cd-valid{padding:26px 20px}
  .cd-card{padding:28px 22px}
  .cd-cell{padding:26px 22px}
  .cd-next{padding:12px 14px}
  .cd-step-label{display:none}
}