/* ═══════════════════════════════════════════════════════════════════════════
 * MEDIA SPEARHEAD DESIGN SYSTEM  ·  v1.0  ·  2026-07-29
 *
 * ONE token layer for the whole site. Loaded once from includes/header.php and
 * cached by the browser, so it costs nothing after the first page view.
 *
 * WHY THIS EXISTS
 * An audit on 2026-07-29 found 710 pages each shipping their own <style> block,
 * 69 separate CSS variable namespaces, 20+ font families, 219 distinct heading
 * size scales, and 14 border-radius values. Two sample pages disagreed on H1
 * font, H1 size (88px vs 54px), weight, letter-spacing and alignment. Heading
 * alignment was broken on both (6 of 16 and 4 of 11 left-aligned).
 *
 * THE RULE
 * Layout, type scale, spacing, radii and components are IDENTICAL everywhere.
 * Per-city / per-industry personality comes from overriding a handful of
 * colour + motif variables — never from a new design system.
 *
 *   <main class="ds" data-ds-theme="cape-coral"> … </main>
 *
 * Fonts are already loaded in includes/header.php with preconnect + swap:
 * Sora (display) · Outfit (body) · JetBrains Mono (data labels).
 * NEVER @import fonts inside a page <style> block — it blocks rendering.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
.ds{
  /* type families — three, not twenty */
  --ds-display:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ds-body:'Outfit','DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --ds-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* modular type scale, 1.25 ratio — replaces 219 ad-hoc clamps */
  --ds-fs-display:clamp(2.5rem,5.2vw,4rem);
  --ds-fs-h1:clamp(2.15rem,4.4vw,3.4rem);
  --ds-fs-h2:clamp(1.7rem,3.1vw,2.45rem);
  --ds-fs-h3:clamp(1.2rem,1.9vw,1.5rem);
  --ds-fs-h4:1.0625rem;
  --ds-fs-lede:1.115rem;
  --ds-fs-body:1rem;
  --ds-fs-sm:.9rem;
  --ds-fs-xs:.8rem;
  --ds-fs-micro:.69rem;

  --ds-lh-tight:1.08;
  --ds-lh-snug:1.28;
  --ds-lh-body:1.68;
  --ds-ls-display:-.032em;
  --ds-ls-body:-.005em;

  /* spacing — 4px base */
  --ds-1:4px;   --ds-2:8px;   --ds-3:12px;  --ds-4:16px;  --ds-5:20px;
  --ds-6:24px;  --ds-8:32px;  --ds-10:40px; --ds-12:48px; --ds-16:64px;
  --ds-20:80px; --ds-24:96px;
  --ds-section:clamp(56px,7vw,96px);
  --ds-container:1200px;
  --ds-gutter:clamp(20px,4vw,28px);

  /* radii — four, not fourteen */
  --ds-r-sm:8px; --ds-r-md:12px; --ds-r-lg:18px; --ds-r-pill:999px;

  /* neutrals (light) */
  --ds-ink:#0f172a;
  --ds-ink-2:#334155;
  --ds-muted:#64748b;
  --ds-bg:#ffffff;
  --ds-bg-2:#f6f9fc;
  --ds-card:#ffffff;
  --ds-line:rgba(15,23,42,.11);

  /* themeable accents — THE ONLY THINGS A THEME SHOULD CHANGE */
  --ds-accent:#2563eb;
  --ds-accent-2:#0891b2;
  --ds-accent-ink:#ffffff;
  --ds-accent-soft:rgba(37,99,235,.09);
  --ds-accent-line:rgba(37,99,235,.26);

  /* semantic */
  --ds-good:#059669; --ds-warn:#d97706; --ds-bad:#dc2626;

  --ds-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px rgba(15,23,42,.07);
  --ds-shadow-lg:0 2px 4px rgba(15,23,42,.05),0 24px 60px rgba(15,23,42,.12);

  font-family:var(--ds-body);
  font-size:var(--ds-fs-body);
  line-height:var(--ds-lh-body);
  letter-spacing:var(--ds-ls-body);
  color:var(--ds-ink);
  background:var(--ds-bg);
}
@media (prefers-color-scheme:dark){
  .ds{--ds-ink:#f1f5f9;--ds-ink-2:#cbd5e1;--ds-muted:rgba(255,255,255,.58);
      --ds-bg:#080d16;--ds-bg-2:#0d1420;--ds-card:rgba(255,255,255,.04);
      --ds-line:rgba(255,255,255,.12);
      --ds-shadow:0 10px 30px rgba(0,0,0,.4);--ds-shadow-lg:0 24px 60px rgba(0,0,0,.55)}
}
html[data-theme="dark"] .ds{
  --ds-ink:#f1f5f9;--ds-ink-2:#cbd5e1;--ds-muted:rgba(255,255,255,.58);
  --ds-bg:#080d16;--ds-bg-2:#0d1420;--ds-card:rgba(255,255,255,.04);
  --ds-line:rgba(255,255,255,.12);
  --ds-shadow:0 10px 30px rgba(0,0,0,.4);--ds-shadow-lg:0 24px 60px rgba(0,0,0,.55);
}
html[data-theme="light"] .ds{
  --ds-ink:#0f172a;--ds-ink-2:#334155;--ds-muted:#64748b;
  --ds-bg:#fff;--ds-bg-2:#f6f9fc;--ds-card:#fff;--ds-line:rgba(15,23,42,.11);
}
.ds *,.ds *::before,.ds *::after{box-sizing:border-box}
.ds a{color:inherit;text-decoration:none}

/* ── 2. THEMES — six variables each, nothing more ───────────────────────── */
.ds[data-ds-theme="cape-coral"]{      /* Gulf canals */
  --ds-accent:#0e7c86;--ds-accent-2:#14b8a6;
  --ds-accent-soft:rgba(14,124,134,.1);--ds-accent-line:rgba(14,124,134,.26);
  --ds-bg-2:#f0f7f8;
}
.ds[data-ds-theme="port-charlotte"]{  /* working harbor */
  --ds-accent:#1d4a63;--ds-accent-2:#c2571f;
  --ds-accent-soft:rgba(29,74,99,.1);--ds-accent-line:rgba(29,74,99,.26);
  --ds-bg-2:#f5f3ee;
}
.ds[data-ds-theme="charleston"]{      /* Lowcountry */
  --ds-accent:#1a4f8a;--ds-accent-2:#4a8fb0;
  --ds-accent-soft:rgba(26,79,138,.09);--ds-accent-line:rgba(26,79,138,.24);
  --ds-bg-2:#f4f7fa;
}
.ds[data-ds-theme="legal"]{           /* Cinematic Counsel */
  --ds-accent:#a8834a;--ds-accent-2:#d8b478;
  --ds-accent-soft:rgba(168,131,74,.1);--ds-accent-line:rgba(168,131,74,.28);
  --ds-bg-2:#f7f4ef;
}

/* ── 3. LAYOUT ──────────────────────────────────────────────────────────── */
.ds-section{padding:var(--ds-section) 0;position:relative}
.ds-section--alt{background:var(--ds-bg-2)}
.ds-wrap{max-width:var(--ds-container);margin:0 auto;padding:0 var(--ds-gutter)}
.ds-wrap--narrow{max-width:820px}

/* ── 4. TYPOGRAPHY ──────────────────────────────────────────────────────── */
.ds h1,.ds h2,.ds h3,.ds h4,.ds .ds-h1,.ds .ds-h2,.ds .ds-h3{
  font-family:var(--ds-display);letter-spacing:var(--ds-ls-display);
  line-height:var(--ds-lh-tight);margin:0;color:var(--ds-ink);text-wrap:balance;
}
.ds h1,.ds .ds-h1{font-size:var(--ds-fs-h1);font-weight:800}
.ds h2,.ds .ds-h2{font-size:var(--ds-fs-h2);font-weight:800}
.ds h3,.ds .ds-h3{font-size:var(--ds-fs-h3);font-weight:700;line-height:var(--ds-lh-snug)}
.ds h4{font-size:var(--ds-fs-h4);font-weight:700;line-height:var(--ds-lh-snug)}
.ds p{margin:0 0 var(--ds-4)}
.ds p:last-child{margin-bottom:0}
.ds em.ds-hl{font-style:normal;color:var(--ds-accent)}

/* Section heading block. THE alignment fix: heading alignment is a property of
   this component, so it can never depend on whichever div happens to wrap it. */
.ds-head{max-width:760px;margin:0 auto var(--ds-12);text-align:center}
.ds-head *{text-align:inherit}
.ds-head--left{margin-left:0;margin-right:0;text-align:left}
.ds-head .ds-lede{margin-top:var(--ds-4)}
.ds-lede{font-size:var(--ds-fs-lede);line-height:var(--ds-lh-body);color:var(--ds-ink-2)}

.ds-eyebrow{display:inline-flex;align-items:center;gap:var(--ds-2);
  padding:6px 13px;border-radius:var(--ds-r-pill);
  background:var(--ds-accent-soft);border:1px solid var(--ds-accent-line);
  color:var(--ds-accent);font-family:var(--ds-mono);font-size:var(--ds-fs-micro);
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  margin-bottom:var(--ds-4);line-height:1}
.ds-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ds-accent-2);flex:0 0 auto}

/* ── 5. BUTTONS — audit found the primary CTA at 12.48px/8px padding. Fixed. */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-2);
  font-family:var(--ds-body);font-size:1rem;font-weight:700;line-height:1;
  padding:16px 26px;min-height:52px;border-radius:var(--ds-r-md);
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.ds-btn--primary{background:linear-gradient(135deg,var(--ds-accent),var(--ds-accent-2));
  color:var(--ds-accent-ink);box-shadow:0 8px 24px var(--ds-accent-soft)}
.ds-btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--ds-accent-line);color:var(--ds-accent-ink)}
.ds-btn--ghost{background:var(--ds-card);border-color:var(--ds-line);color:var(--ds-ink)}
.ds-btn--ghost:hover{transform:translateY(-2px);border-color:var(--ds-accent)}
.ds-btn--lg{font-size:1.06rem;padding:18px 32px;min-height:58px}
.ds-btns{display:flex;flex-wrap:wrap;gap:var(--ds-3)}
.ds-btns--center{justify-content:center}
.ds-btn:focus-visible,.ds a:focus-visible{outline:3px solid var(--ds-accent);outline-offset:3px}

/* ── 6. CARDS + GRIDS ───────────────────────────────────────────────────── */
.ds-grid{display:grid;gap:var(--ds-5)}
.ds-grid--2{grid-template-columns:repeat(2,1fr)}
.ds-grid--3{grid-template-columns:repeat(3,1fr)}
.ds-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.ds-grid--3,.ds-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.ds-grid--2,.ds-grid--3,.ds-grid--4{grid-template-columns:1fr}}

.ds-card{background:var(--ds-card);border:1px solid var(--ds-line);
  border-radius:var(--ds-r-lg);padding:var(--ds-6);box-shadow:var(--ds-shadow);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.ds-card--hover:hover{transform:translateY(-5px);box-shadow:var(--ds-shadow-lg);border-color:var(--ds-accent-line)}
.ds-card--feature{border:2px solid var(--ds-accent)}

/* ── 7. DATA ────────────────────────────────────────────────────────────── */
.ds-tablewrap{border:1px solid var(--ds-line);border-radius:var(--ds-r-lg);overflow:hidden;background:var(--ds-card)}
.ds-scroll{overflow-x:auto}
.ds-table{width:100%;border-collapse:collapse;min-width:640px}
.ds-table th{background:var(--ds-bg-2);padding:14px 17px;text-align:left;
  font-family:var(--ds-mono);font-size:var(--ds-fs-micro);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ds-muted);
  border-bottom:1px solid var(--ds-line);white-space:nowrap}
.ds-table td{padding:14px 17px;border-bottom:1px solid var(--ds-line);font-size:var(--ds-fs-sm)}
.ds-table tr:last-child td{border-bottom:none}
.ds-num{font-family:var(--ds-mono);font-weight:600;color:var(--ds-accent);font-variant-numeric:tabular-nums}
.ds-stat .n{font-family:var(--ds-display);font-size:clamp(1.7rem,3vw,2.2rem);
  font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ds-accent)}
.ds-stat .l{font-size:var(--ds-fs-xs);color:var(--ds-muted);margin-top:6px;line-height:1.45}
.ds-note{font-size:var(--ds-fs-xs);color:var(--ds-muted);line-height:1.6}

/* ── 8. FAQ — native details, no JS ─────────────────────────────────────── */
.ds-faq{max-width:860px;margin:0 auto}
.ds-q{background:var(--ds-card);border:1px solid var(--ds-line);
  border-radius:var(--ds-r-md);margin-bottom:var(--ds-3);overflow:hidden}
.ds-q[open]{border-color:var(--ds-accent-line)}
.ds-q summary{padding:18px 21px;cursor:pointer;font-family:var(--ds-display);
  font-weight:700;font-size:1rem;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:var(--ds-4)}
.ds-q summary::-webkit-details-marker{display:none}
.ds-q summary:hover{color:var(--ds-accent)}
.ds-q summary::after{content:"+";font-family:var(--ds-mono);font-size:1.3rem;
  color:var(--ds-accent);flex:0 0 auto;transition:transform .22s}
.ds-q[open] summary::after{transform:rotate(45deg)}
.ds-q .a{padding:0 21px 20px;font-size:var(--ds-fs-sm);line-height:1.72;color:var(--ds-ink-2)}

/* ── 9. CTA BAND ────────────────────────────────────────────────────────── */
.ds-cta{background:linear-gradient(135deg,var(--ds-accent),var(--ds-accent-2));
  border-radius:var(--ds-r-lg);padding:clamp(40px,6vw,64px) var(--ds-8);
  text-align:center;color:#fff;position:relative;overflow:hidden}
.ds-cta h2,.ds-cta p{color:#fff}
.ds-cta p{opacity:.9;max-width:620px;margin:var(--ds-4) auto var(--ds-8)}
.ds-cta .ds-btn--primary{background:#fff;color:var(--ds-accent);box-shadow:0 12px 34px rgba(0,0,0,.22)}
.ds-cta .ds-btn--ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}

/* ── 10. MOTION — one reveal, respected everywhere ──────────────────────── */
.ds-r{opacity:0;transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.ds-r.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .ds-r{opacity:1!important;transform:none!important;transition:none!important}
  .ds-card,.ds-btn{transition:none}
  .ds-card--hover:hover,.ds-btn:hover{transform:none}
}

/* ── 11. LEGACY LOCATION-PAGE RESPONSIVE CORRECTIONS ────────────────────── */
/* THE "H2 IS OFF TO THE LEFT" FIX  ·  added 2026-07-29
 *
 * An audit found 16 two-column grids across 13 city hubs that never collapse:
 * every  *-local-grid  (12 cities) plus atlanta/charleston/west-palm
 * *-nation-grid and wpb-track-grid. On tablet and phone they kept rendering
 * side-by-side with a 56–72px gutter, which squeezed the section heading into a
 * narrow left column while the rest of the page stayed centred. On desktop the
 * two-column layout is intentional and correct, so this only applies ≤1024px.
 *
 * Attribute selectors are deliberate: the 12 bespoke city templates use 12
 * different prefixes (--stp, --npl, --mia, --tpa, --lau, --orl, --chs, --atl,
 * --sar, --sav, --wpb, --asc), so matching on the shared suffix fixes all of
 * them from one place instead of editing 13 files.
 *
 * !important is required because those pages declare their own grid in an
 * inline <style> that loads AFTER this file. Each rule can be dropped as its
 * page migrates to the .ds system.
 *
 * NOTE: these selectors are intentionally NOT scoped under .ds — they exist to
 * repair pages that predate the design system.
 */
@media (max-width:1024px){
  [class*="-local-grid"],
  [class*="-nation-grid"],
  [class*="-track-grid"]{
    grid-template-columns:1fr !important;
    gap:clamp(28px,5vw,44px) !important;
  }
  /* prevent overflow once stacked.
     NOTE: -case-grid is deliberately excluded. js-case-grid appears on 208
     city×industry pages but is an auto-fit STAT grid with no heading in it —
     matching it here would put 208 pages in scope for no benefit. */
  [class*="-local-grid"] > *,
  [class*="-nation-grid"] > *,
  [class*="-track-grid"] > *,
  [class*="-data-grid"] > *{ min-width:0 }

  /* a stacked heading column should read centred, like every other section */
  [class*="-local-grid"] h2,  [class*="-local-grid"] > * > p,
  [class*="-nation-grid"] h2, [class*="-nation-grid"] > * > p,
  [class*="-data-grid"] h2,   [class*="-data-grid"] > * > p,
  [class*="-track-grid"] h2,  [class*="-track-grid"] > * > p{
    text-align:center;
  }
  /* eyebrow/label chips above those headings centre too */
  [class*="-local-grid"] [class*="-label"],
  [class*="-nation-grid"] [class*="-label"],
  [class*="-data-grid"] [class*="-label"],
  [class*="-track-grid"] [class*="-label"]{
    display:block;
    text-align:center;
  }
}

/* ── 12. UTILITIES ──────────────────────────────────────────────────────── */
.ds-center{text-align:center}
.ds-left{text-align:left}
.ds-mt-0{margin-top:0}.ds-mt-4{margin-top:var(--ds-4)}.ds-mt-8{margin-top:var(--ds-8)}
.ds-mb-0{margin-bottom:0}.ds-mb-4{margin-bottom:var(--ds-4)}.ds-mb-8{margin-bottom:var(--ds-8)}
.ds-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}