/* ============================================================================
   svc-cohort.css — the SHARED chassis of the SVC cohort (Sample Kit + Design Help)
   ----------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   www/sample-request.php (SVC-01) and www/design-help.php (SVC-02) are ported from two
   Henry locks that share 8 of 11 style blocks. Before this file, those blocks were
   duplicated byte-for-byte across sample-kit-cool.css and design-help-cool.css, so a fix
   to one page silently left the other behind. Extracted 2026-08-11 by /build-central
   (central is the only writer of shared CSS).

   WHAT IS IN HERE
   Exactly the 83 rules that were BYTE-IDENTICAL in both sheets, in their original relative
   order (already identical in both files). Nothing was reconciled, merged by hand, or
   "improved" on the way in. Only rule TEXT moved — every comment stayed in its source file.

   WHAT IS DELIBERATELY NOT IN HERE
   .review-grid and the four media blocks. Those carry the same selector in both sheets with
   DIFFERENT bodies — genuine per-page divergence, not drift — so they stay per page. Do not
   fold them in without first deciding which page is wrong.

   LOAD ORDER — this file is the CHASSIS, so it loads BEFORE the page's own sheet.
   Both consumers now use the SAME order (corrected 2026-08-11 at the SVC-01 collect; the first
   version of this header recorded sample-request without henry_fc, which was true for about
   three hours):
     design-help.php    : henry_common -> henry_fc -> svc-cohort -> design-help-cool  -> henry_coolgray
     sample-request.php : henry_common -> henry_fc -> svc-cohort -> sample-kit-cool   -> henry_coolgray -> henry_sample-request_photos
                          (typeahead.css + star-rating.css also sit between henry_fc and this
                           sheet — component sheets, not chassis, and they claim nothing here)
   henry_fc.css is $page_css on BOTH pages because both heroes are the shared fw-hero component,
   whose CSS lives there, and it must precede the page sheet. Loading THIS file after a page
   sheet inverts the cascade and restyles both pages.

   VERIFIED AT EXTRACTION (real served pages, before vs after):
     design-help    778 elements compared, 0 differing (1280 and 375)
     sample-request 75 of 76 cohort selectors byte-identical; the 76th is the element COUNT,
                    +1, which is this stylesheet's own link tag. 0 property differences.

   ADDING A PAGE
   A third page joins by loading this file immediately before its own scoped sheet, and
   putting ONLY page-unique CSS in that sheet.

   NOTE: never put a slash-asterisk glob inside this header — it closes the CSS comment and
   drops the first rule with it (GOTCHAS 93).

   ASSUMES: the only consumers are sample-request.php and design-help.php. If that stops being
   true, re-check the load order above before editing anything here.
   ============================================================================ */

:root {
    --blue:#00C2FF; --blue-dark:#008DBC; --blue-soft:#E9F9FE;
    --gold:#C9A96E; --gold-light:#E8C99A; --gold-soft:#EFF2F5;
    --obsidian:#14181D; --black:#14181D; --charcoal:#1E242C; --charcoal-2:#262D36;
    --ink:#14181D; --body:#424B55; --muted:#7A8590;
    --line:#E2E7EC; --soft:#EDF1F4; --cream:#F4F6F8; --white:#FFFFFF;   /* --line unified 2026-08-14 (was #DBE0E6) */
    --max:1240px;
    --radius-xl:44px; --radius-lg:30px; --radius-md:22px; --radius-sm:14px;
    --shadow-soft:0 18px 54px rgba(0,0,0,.08);
    --shadow-deep:0 46px 120px rgba(0,0,0,.46);
    --font:Manrope, Helvetica, Arial, sans-serif;
    --serif:Georgia, 'Times New Roman', serif;
  }
* { box-sizing:border-box; }
body {
    margin:0; font-family:var(--font); color:var(--ink); background:var(--white);
    line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
a { color:inherit; text-decoration:none; }
a.inline-link { color:var(--blue-dark); border-bottom:1px solid rgba(0,141,188,.28); transition:border-color .2s ease, color .2s ease; }
a.inline-link:hover { color:var(--ink); border-bottom-color:var(--gold); }
p { margin:0; color:var(--body); }
h1,h2,h3,h4 { margin:0; letter-spacing:-.055em; line-height:1.02; }
h1 { font-size:clamp(46px,7.1vw,104px); max-width:1040px; }
h2 { font-size:clamp(34px,4.6vw,68px); max-width:900px; }
h3 { font-size:clamp(22px,2.1vw,30px); letter-spacing:-.04em; }
h4 { font-size:17px; letter-spacing:-.025em; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:15px 24px; border-radius:999px; border:1px solid transparent; font-size:14px; font-weight:900; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; cursor:pointer; white-space:nowrap; }
.btn-primary { background:var(--blue); color:var(--obsidian); box-shadow:0 16px 34px rgba(0,194,255,.24); }
.btn:hover { transform:translateY(-3px); }
.btn-dark { background:var(--obsidian); color:var(--white); }
.btn-light { background:var(--white); color:var(--ink); border-color:rgba(0,0,0,.08); }
.btn-outline-dark { background:transparent; border-color:rgba(0,0,0,.16); color:var(--ink); }
.btn-glass { background:rgba(255,255,255,.06); color:var(--white); border-color:rgba(255,255,255,.18); }
.btn-cyan { background:var(--blue); color:var(--obsidian); }
.section { max-width:var(--max); margin:0 auto; padding:104px 24px; position:relative; }
.section-tight { padding-top:76px; padding-bottom:76px; }
.eyebrow { color:var(--gold); font-size:12px; font-weight:900; letter-spacing:.23em; text-transform:uppercase; margin-bottom:16px; }
.eyebrow.blue { color:var(--blue-dark); }
.lead { color:#353535; font-size:clamp(17px,1.65vw,22px); line-height:1.62; max-width:780px; margin-top:24px; }
.center { text-align:center; }
.center h2, .center .lead { margin-left:auto; margin-right:auto; }
.btn-row { display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; align-items:center; }
.why-band { background:var(--obsidian); color:var(--white); position:relative; overflow:hidden; }
.why-band::before { content:""; position:absolute; right:-10%; top:-20%; width:540px; height:540px; border-radius:50%; background:radial-gradient(circle,rgba(201,169,110,.16),transparent 65%); pointer-events:none; }
.why-band h2 { color:var(--white); }
.why-band .lead { color:rgba(255,255,255,.74); }
.governing-anchor { max-width:880px; margin:0 auto; text-align:center; }
.governing-line { font-family:var(--serif); font-style:italic; font-size:clamp(26px,3.4vw,44px); color:var(--gold-light); line-height:1.22; letter-spacing:-.02em; margin-bottom:26px; }
.governing-support { max-width:680px; margin:0 auto; color:rgba(255,255,255,.78); font-size:17px; line-height:1.74; }
.subtract-row { margin-top:48px; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.subtract-chip { padding:20px 16px; border-radius:var(--radius-md); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); text-align:center; }
.subtract-chip .sc-word { color:var(--gold-light); font-size:14px; font-weight:900; letter-spacing:-.01em; margin-bottom:6px; }
.subtract-chip p { color:rgba(255,255,255,.62); font-size:12px; line-height:1.5; }
.kit { background:var(--soft); }
.kit-photo { margin-top:44px; border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-soft); }
.kit-photo .kp-img { aspect-ratio:16/7; background:radial-gradient(circle at 26% 22%,rgba(0,194,255,.1),transparent 26%), radial-gradient(circle at 76% 78%,rgba(232,201,154,.3),transparent 28%), linear-gradient(145deg,#14181D,#262D36 65%,#14181D); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:24px; }
.kit-photo .kp-img img { width:100%; height:100%; object-fit:cover; display:block; }
.kit-photo figcaption { padding:18px 24px; background:var(--white); color:#3D3D3D; font-family:var(--serif); font-style:italic; font-size:15px; text-align:center; }
.kit-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:48px; }
.kit-card { padding:26px 22px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--line); box-shadow:0 12px 34px rgba(0,0,0,.04); min-height:220px; display:flex; flex-direction:column; }
.kit-card .kit-icon { width:66px; height:66px; margin:0 auto 18px; color:var(--gold); }
.kit-card .kit-icon svg { width:100%; height:100%; display:block; }
.kit-card h3 { text-align:center; color:var(--ink); margin-bottom:12px; font-size:19px; }
.kit-card p { font-size:13px; line-height:1.6; text-align:center; }
.understand { background:var(--white); }
.understand-grid { margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.understand-card { padding:30px; border-radius:var(--radius-lg); background:var(--soft); border:1px solid var(--line); }
.understand-card .num { color:var(--gold); font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; }
.understand-card h3 { color:var(--ink); font-size:20px; margin-bottom:12px; }
.understand-card p { font-size:14px; line-height:1.7; }
.review-card { padding:24px; border-radius:var(--radius-md); background:var(--white); border:1px solid var(--line); display:flex; flex-direction:column; }
.review-card .stars { color:var(--gold); font-size:13px; letter-spacing:4px; margin-bottom:14px; }
.review-card p { color:var(--ink); font-size:14px; line-height:1.6; flex-grow:1; }
.review-card .meta { margin-top:14px; font-size:12px; font-weight:800; color:var(--muted); }
.reviews-context { margin-top:18px; padding:22px; border-radius:var(--radius-md); background:var(--white); border:1px solid var(--line); text-align:center; color:var(--muted); font-size:13px; font-weight:700; }
.reviews-context strong { color:var(--ink); font-size:16px; }
.geo-answer { background:var(--soft); }
.geo-card { max-width:880px; margin:0 auto; padding:44px; border-radius:var(--radius-xl); background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-soft); }
.geo-card h2 { font-size:clamp(24px,2.6vw,34px); margin-bottom:18px; }
.geo-card p { font-size:16px; line-height:1.74; color:#3D3D3D; }
.geo-card p + p { margin-top:14px; }
.final-cta { background:linear-gradient(135deg,var(--cream),#FFFFFF); border-top:1px solid var(--line); }
.final-cta-inner { max-width:840px; margin:0 auto; text-align:center; }
.final-cta h2 { color:var(--ink); }
.final-cta .close-lines { margin-top:30px; font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.3vw,30px); color:var(--ink); line-height:1.55; letter-spacing:-.02em; }
.worth-knowing { background:var(--cream); border-top:1px solid var(--line); }
.wk-intro { max-width:760px; margin:0 auto; text-align:center; }
.wk-grid { margin-top:50px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.wk-card { padding:30px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-soft); display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.wk-card:hover { transform:translateY(-3px); border-color:rgba(201,169,110,.4); box-shadow:0 22px 50px rgba(0,0,0,.08); }
.wk-card .wk-kicker { color:var(--gold); font-size:10px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px; }
.wk-card h3 { color:var(--ink); font-size:19px; line-height:1.22; margin-bottom:14px; letter-spacing:-.02em; }
.wk-card .wk-frame { font-family:var(--serif); font-style:italic; font-size:15px; line-height:1.55; color:#3D3D3D; flex-grow:1; }
.wk-link { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); color:var(--blue-dark); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; transition:color .2s ease; }
.wk-link:hover { color:var(--ink); }
.wk-link span { display:inline-block; margin-left:6px; transition:transform .2s ease; }
.wk-link:hover span { transform:translateX(3px); }