/*
Theme Name:  J6V - V2.4
Theme URI:   https://j6venture.com
Author:      J6 Venture
Version:     2.4
Description: V2.4, verified case-study access now lasts 15 minutes (was 30 days). V2.3 fixes on top of V2.2: gate modal now advances to the OTP step reliably (script deferred to DOM ready), case-study body + modal load IBM Plex Sans correctly (fixed a malformed Google Fonts URL that fell back to Roboto), and all em dashes removed site-wide. V2.2, Case-study access gate: single case pages blur behind a lead-capture modal (First name, Last name, Work email, free/personal domains blocked, and Company), email a 6-digit OTP via Resend, and unlock on verify (30-day cookie). Captured leads are stored in a database table, viewable under wp-admin → Case Leads with CSV export and a Settings page for the Resend API key + from-address. The API key is never stored in the theme (set via wp-config J6V_RESEND_API_KEY or the Settings page). Prior V2.1, Case Studies upgraded for sales/SEO-process/conviction: each case now opens with a named "The problem" (Asset Vantage = flat SEO curve, Alore = volume without lift, Varniya = an uncrackable market) and a dark "Business impact" band of commercial outcomes (pipeline, cost, market position). Asset Vantage refreshed with April/May data (position 43.9→single digits, 1M+ monthly impressions, #1 US "best family office software", DR 30→50, timeline Aug 2025→May 2026); Alore Domain Rating corrected to 10→54. Prior V2.0, Case Studies (listing + deep per-case pages with real Google Search Console charts), home cards linked, Case Studies in menu. Prior V1.9, brand lockup logo (per design), Design Kit as a native page (no iframe). Prior V1.8, shared nav/footer partials (single source), context-aware nav (dark heroes), keyboard-accessible dropdowns, brand social icons + Customizer links, Space Grotesk stat font, Open Graph/Twitter share meta, blog posts under /blogs/. Builds on V1.7 (Citation Mark logo, favicon set, Design Kit page).
Text Domain: j6v
*/

/* ================================================================
   J6V GLOBAL SHARED STYLES, loaded on every page via wp_head()
   Covers: mobile nav panel, hamburger, shared mobile breakpoints.
   Per-page section CSS lives in each template's inline <style>.
   ================================================================ */

/* ── CSS custom properties (shared tokens) ──────────────────────── */
:root {
  --white:       #FFFFFF;
  --black:       #0A0A0A;
  --gray-50:     #F9F9F7;
  --gray-100:    #F0F0EC;
  --gray-200:    #E2E2DC;
  --gray-400:    #A3A39A;
  --gray-600:    #666660;
  --lime:        #C2FF00;
  --lime-dark:   #96CC00;
  --purple:      #7C3AED;
  --sans:        'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  --nav-h:       64px;
}

/* ── Mobile nav panel ───────────────────────────────────────────── */
.nav-mobile {
  position: fixed; top: 0; right: 0;
  width: 88vw; max-width: 340px; height: 100vh;
  z-index: 1001; background: var(--white);
  overflow-y: auto; padding-bottom: 40px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -8px 0 40px rgba(0,0,0,0.14);
}
.nav-mobile.open { transform: translateX(0); }

/* Backdrop */
.nav-mobile-backdrop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000; background: rgba(0,0,0,0.42);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.nav-mobile-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; }

/* Header row inside panel */
.nav-mobile-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: var(--nav-h);
  border-bottom: 1px solid var(--gray-100);
  position: sticky; top: 0; background: var(--white); z-index: 1;
}
.nav-mobile-logo {
  font-family: var(--sans); font-size: 18px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--black); text-decoration: none;
  display: flex; align-items: center; gap: 2px;
}
.nav-mobile-logo span { color: var(--lime); font-size: 22px; }

/* Close button */
.nav-mobile-close {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--gray-100); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--black); line-height: 1;
  transition: background 0.15s;
}
.nav-mobile-close:hover { background: var(--gray-200); }

/* ── Link list, CRITICAL: reset global nav{} bleed ────────────── */
/*    Every page has nav { display:flex; position:fixed; height:64px }
      which would otherwise turn <nav.nav-mobile-links> into a
      horizontal 64px bar. These overrides restore correct layout.  */
.nav-mobile-links {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  padding: 8px 0 24px !important;
}

/* Group container */
.nav-mobile-group {
  display: block !important;
  border-bottom: 1px solid var(--gray-100);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

/* Group label (e.g. "Services", "Resources") */
.nav-mobile-group-label,
.nav-mobile-group-title {
  display: block;
  padding: 12px 20px 4px;
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gray-400);
}

/* Divider between groups */
.nav-mobile-divider { height: 1px; background: var(--gray-100); margin: 8px 0; }

/* ── Individual links, default / hover / active ────────────────── */
.nav-mobile-link {
  display: block !important;
  padding: 11px 20px;
  font-family: var(--sans);
  font-size: 15px; font-weight: 500;
  color: var(--black);                    /* DEFAULT: black text */
  text-decoration: none;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
}
.nav-mobile-link:hover {
  background: var(--gray-50);             /* HOVER: light gray bg */
  color: var(--black);
}
.nav-mobile-link.active {
  color: var(--purple);                   /* ACTIVE/CURRENT: purple */
  font-weight: 600;
}

/* Indented group links (sub-items under Services / Resources) */
.nav-mobile-group .nav-mobile-link {
  padding-left: 32px;
  font-size: 14px; font-weight: 400;
  color: var(--gray-600);                 /* DEFAULT: muted gray */
}
.nav-mobile-group .nav-mobile-link:hover {
  background: var(--gray-50);
  color: var(--black);                    /* HOVER: full black */
}
.nav-mobile-group .nav-mobile-link.active {
  color: var(--purple);                   /* ACTIVE: purple */
  font-weight: 600;
}

/* Separator before standalone top-level links (About, Contact) */
.nav-mobile-links > .nav-mobile-link:first-of-type {
  margin-top: 4px;
  border-top: 1px solid var(--gray-100);
  padding-top: 14px;
}

/* ── CTA button ─────────────────────────────────────────────────── */
.nav-mobile-cta {
  padding: 16px 16px 20px;
  border-top: 1px solid var(--gray-100);
}
.nav-mobile-cta a {
  display: block; width: 100%; text-align: center;
  background: var(--lime);               /* DEFAULT: lime */
  color: var(--black);
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  padding: 13px 24px; border-radius: 100px;
  text-decoration: none; transition: background 0.2s;
}
.nav-mobile-cta a:hover { background: var(--lime-dark); }  /* HOVER: darker lime */

/* ── V1.7 · Brand mark (Citation Mark) in nav + footer logos ───────────────── */
.nav-logo .j6-mark,
.footer-logo .j6-mark {
  flex: none;
  height: 22px;
  width: auto;
  margin-right: 6px;
  display: block;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
}
/* the mark's J / 6 glyphs render in the display serif */
.j6-mark text {
  font-family: 'Libre Baskerville', 'Times New Roman', serif;
}
@media (max-width: 640px) {
  .nav-logo .j6-mark,
  .footer-logo .j6-mark { height: 20px; }
}

/* ════════════════════════════════════════════════════════════════════
   V1.8 · Shared chrome (nav + footer partials), context-aware nav,
   dropdown a11y, social icons, grotesk stat font.
   These rules use higher specificity (.site-nav / .site-footer) so they
   win over each template's inline base styles, which load before style.css.
   ════════════════════════════════════════════════════════════════════ */

/* Stats/UI grotesk, replaces the never-loaded Neue Haas Grotesk */
:root { --haas: 'Space Grotesk', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; }

/* ── Context-aware navigation ─────────────────────────────────────── */
.site-nav { transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }

/* dark-hero pages: transparent over the hero, white text */
.site-nav[data-surface="dark"]:not(.scrolled) { background: transparent; border-bottom-color: transparent; box-shadow: none; }
.site-nav[data-surface="dark"]:not(.scrolled) .nav-logo,
.site-nav[data-surface="dark"]:not(.scrolled) .nav-links > li > a { color: #fff; }
.site-nav[data-surface="dark"]:not(.scrolled) .nav-chev { color: rgba(255,255,255,0.7); }
.site-nav[data-surface="dark"]:not(.scrolled) .nav-hamburger span { background: #fff; }

/* solidified (any surface once scrolled): frosted light bar, dark text */
.site-nav.scrolled {
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
}
.site-nav.scrolled .nav-logo,
.site-nav.scrolled .nav-links > li > a { color: var(--black); }
.site-nav.scrolled .nav-hamburger span { background: var(--black); }

/* dropdowns: keyboard/tap parity with :hover + visible focus */
.site-nav .has-drop.open > .nav-drop,
.site-nav .has-drop:focus-within > .nav-drop { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.site-nav a:focus-visible,
.site-nav .btn-nav-cta:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }

/* nav CTA, canonical pill spec */
.site-nav .btn-nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--lime); color: var(--black);
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .01em;
  padding: 11px 22px; border-radius: 100px; text-decoration: none;
  transition: background .2s, box-shadow .2s, transform .15s;
}
.site-nav .btn-nav-cta:hover { background: var(--lime-dark); box-shadow: 0 4px 16px rgba(194,255,0,0.25); }
.site-nav .btn-nav-cta:active { transform: scale(0.97); }

/* ── Unified footer (self-sufficient; renders identically on every page) ── */
.site-footer { background: var(--black); color: #fff; padding: 64px 0 40px; }
.site-footer .container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.site-footer .footer-top { display: grid; grid-template-columns: 1.4fr 2.6fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.site-footer .footer-logo { display: inline-flex; align-items: center; color: #fff; font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.site-footer .footer-logo span { color: var(--lime); font-size: 22px; }
.site-footer .footer-tagline { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.6; margin: 16px 0 0; max-width: 34ch; }
.site-footer .footer-social { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.site-footer .social-link { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,0.06); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.72); transition: background .15s, color .15s; }
.site-footer .social-link:hover { background: var(--lime); color: var(--black); }
.site-footer .social-link svg { display: block; }
.site-footer .footer-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.site-footer .footer-col-title { font-family: var(--mono, 'IBM Plex Mono', monospace); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 14px; }
.site-footer .footer-col ul { list-style: none; margin: 0; padding: 0; }
.site-footer .footer-col li { margin-bottom: 9px; }
.site-footer .footer-col a { color: rgba(255,255,255,0.6); font-size: 14px; text-decoration: none; }
.site-footer .footer-col a:hover { color: #fff; }
.site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; flex-wrap: wrap; gap: 12px; }
.site-footer .footer-copy { color: rgba(255,255,255,0.4); font-size: 12px; }
.site-footer .footer-bottom-links { display: flex; gap: 20px; }
.site-footer .footer-bottom-links a { color: rgba(255,255,255,0.4); font-size: 12px; text-decoration: none; }
.site-footer .footer-bottom-links a:hover { color: #fff; }
@media (max-width: 900px) {
  .site-footer .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .site-footer .footer-links { grid-template-columns: 1fr 1fr; }
  .site-footer .container { padding: 0 20px; }
}

/* ── Floating CTA bar (global, so every page carries it) ──────────── */
.float-bar { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 99; display: flex; align-items: center; gap: 2px; background: var(--black); border-radius: 100px; padding: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.24), 0 0 0 1px rgba(255,255,255,0.05); }
.float-pill { font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 10px 24px; border-radius: 100px; cursor: pointer; text-decoration: none; transition: all 0.2s; }
.float-primary { background: var(--lime); color: var(--black); }
.float-primary:hover { background: var(--lime-dark); }
.float-secondary { color: rgba(255,255,255,0.6); }
.float-secondary:hover { color: var(--white); }
@media (max-width: 640px) { .float-bar { bottom: 16px; } }

/* ── V1.9 · Brand LOCKUP (canonical website logo) sizing ───────────────────── */
.nav-logo .j6-lockup,
.footer-logo .j6-lockup,
.nav-mobile-logo .j6-lockup,
.site-footer .footer-logo .j6-lockup { height: 30px; width: auto; display: block; }
.j6-lockup text { font-family: 'Libre Baskerville', 'Times New Roman', serif; }
/* the lockup already contains the wordmark, so hide any stray text nodes */
.nav-logo > span, .footer-logo > span, .nav-mobile-logo > span { display: none; }
@media (max-width: 640px) {
  .nav-logo .j6-lockup,
  .footer-logo .j6-lockup,
  .nav-mobile-logo .j6-lockup,
  .site-footer .footer-logo .j6-lockup { height: 26px; }
}

/* ════════════════════════════════════════════════════════════════════
   V2.0 · Case Studies, Google Search Console style chart panels
   ════════════════════════════════════════════════════════════════════ */
.gsc-panel{border:1px solid #E2E2DC;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.05)}
.gsc-tiles{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #EEEDE9}
.gsc-tile{padding:15px 18px;border-right:1px solid #EEEDE9;position:relative;min-width:0}
.gsc-tile:last-child{border-right:none}
.gsc-tl{display:block;font-size:12px;color:#5f6368;margin-bottom:6px;white-space:nowrap;font-family:var(--sans)}
.gsc-tv{display:block;font-family:var(--haas,'Space Grotesk',sans-serif);font-weight:700;font-size:25px;color:#202124;line-height:1;letter-spacing:-.01em}
.gsc-prev{display:block;font-size:11px;color:#9aa0a6;margin-top:5px;font-family:var(--sans)}
.gsc-tile.sel{background:#faf5ff}
.gsc-tile.sel::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--purple)}
.gsc-tile.sel .gsc-tv{color:var(--purple)}
.gsc-chart{position:relative;padding:8px 0 2px}
.gsc-svg{width:100%;height:auto;display:block}
.gsc-grid{stroke:#F0F0EC;stroke-width:1}
.gsc-yl{fill:#9aa0a6;font-size:11px;font-family:var(--sans);text-anchor:end}
.gsc-xl{fill:#9aa0a6;font-size:10px;font-family:var(--sans)}
.gsc-mark{stroke:#CFCFC9;stroke-width:1;stroke-dasharray:3 3}
.gsc-ax{position:absolute;left:48px;top:10px;font-size:10px;color:#9aa0a6;font-family:var(--sans)}
@media(max-width:620px){ .gsc-tv{font-size:20px} .gsc-tl{font-size:10px} .gsc-tile{padding:12px 12px} }

/* ── Case study pages (listing + single) ─────────────────────────── */
.cs-wrap{max-width:1160px;margin:0 auto;padding:0 40px}
.cs-serif{font-family:'Libre Baskerville',Georgia,serif;font-weight:700;letter-spacing:-.02em;line-height:1.12}
.cs-eyebrow{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--purple);display:inline-flex;align-items:center;gap:9px}
.cs-eyebrow::before{content:"";width:16px;height:2px;background:var(--lime);border-radius:2px;flex:none}
.cs-tag{display:inline-flex;align-items:center;font-family:var(--mono,monospace);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-600);border:1px solid var(--gray-200);border-radius:999px;padding:5px 11px}
.cs-tag.lime{border-color:var(--lime);color:#5a7a00;background:rgba(194,255,0,.08)}
.cs-tag.purple{border-color:var(--purple);color:var(--purple);background:rgba(124,58,237,.06)}

/* single hero */
.cs-hero{background:var(--gray-50);border-bottom:1px solid var(--gray-200);padding:calc(var(--nav-h) + 56px) 0 56px}
.cs-hero .cs-tags{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.cs-hero h1{font-size:clamp(34px,5vw,58px);color:var(--black);margin:8px 0 0}
.cs-hero h1 .it{font-style:italic;font-weight:400;color:var(--purple)}
.cs-hero .sub{color:var(--gray-600);font-size:18px;max-width:64ch;margin:18px 0 0;line-height:1.6}
.cs-hero .big{display:flex;align-items:baseline;gap:16px;margin-top:28px;flex-wrap:wrap}
.cs-hero .big .n{font-family:var(--haas);font-weight:700;font-size:clamp(42px,7vw,72px);color:var(--black);line-height:.9;letter-spacing:-.02em}
.cs-hero .big .n .lime{color:var(--lime-dark)}
.cs-hero .big .l{font-size:14px;color:var(--gray-600);max-width:26ch}
/* the problem (hero band) */
.cs-problem{margin:22px 0 4px;padding:16px 20px;background:#fff;border:1px solid var(--gray-200);border-left:3px solid var(--purple);border-radius:12px;max-width:72ch;display:flex;flex-direction:column;gap:6px}
.cs-problem-tag{font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400)}
.cs-problem-headline{font-family:'Libre Baskerville',Georgia,serif;font-weight:700;font-style:italic;font-size:clamp(20px,2.6vw,26px);color:var(--black);letter-spacing:-.01em}
.cs-problem-line{font-size:15px;color:var(--gray-600);line-height:1.55}
.cs-problem-line b{color:var(--black)}

/* business impact (dark outcome band) */
.cs-sec.cs-biz-sec{background:var(--black);border-bottom:1px solid var(--black)}
.cs-sec.cs-biz-sec .cs-eyebrow{color:var(--lime)}
.cs-sec.cs-biz-sec h2{color:#fff}
.cs-sec.cs-biz-sec h2 .it{color:var(--lime)}
.cs-sec.cs-biz-sec .cs-lead{color:var(--gray-400)}
.cs-biz{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.cs-biz-item{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:14px}
.cs-biz-mark{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--lime);color:var(--black);font-weight:700;font-size:14px;line-height:1}
.cs-biz-text{color:#E8E8E4;font-size:15.5px;line-height:1.55}
.cs-biz-text b{color:#fff;font-weight:700}
@media(max-width:820px){.cs-biz{grid-template-columns:1fr}}

/* section rhythm */
.cs-sec{padding:64px 0;border-bottom:1px solid var(--gray-100)}
.cs-sec h2{font-family:'Libre Baskerville',Georgia,serif;font-weight:700;font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em;color:var(--black);margin:10px 0 8px}
.cs-sec h2 .it{font-style:italic;font-weight:400;color:var(--purple)}
.cs-lead{color:var(--gray-600);font-size:16px;max-width:70ch;line-height:1.65}
.cs-proof-cap{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.06em;color:var(--gray-400);margin-top:12px}

/* metric row */
.cs-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gray-200);border:1px solid var(--gray-200);border-radius:14px;overflow:hidden;margin-top:26px}
.cs-metrics .m{background:#fff;padding:22px 20px}
.cs-metrics .m .v{font-family:var(--haas);font-weight:700;font-size:30px;color:var(--black);letter-spacing:-.01em;line-height:1}
.cs-metrics .m .l{font-size:12.5px;color:var(--gray-600);margin-top:8px;line-height:1.45}
@media(max-width:820px){.cs-metrics{grid-template-columns:1fr 1fr}}

/* lists / cards */
.cs-ul{list-style:none;margin:16px 0 0;padding:0;max-width:74ch}
.cs-ul li{position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--gray-100);color:var(--gray-600);font-size:15.5px;line-height:1.55}
.cs-ul li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--lime)}
.cs-ul li b{color:var(--black)}
.cs-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
@media(max-width:820px){.cs-cards{grid-template-columns:1fr}}
.cs-card{border:1px solid var(--gray-200);border-radius:14px;padding:24px;background:#fff}
.cs-card .t{font-family:'Libre Baskerville',serif;font-weight:700;font-size:18px;color:var(--black);margin-bottom:8px}
.cs-card .d{font-size:14.5px;color:var(--gray-600);line-height:1.6}

/* timeline */
.cs-time{margin-top:22px;border-left:2px solid var(--gray-200);max-width:760px}
.cs-time .row{position:relative;padding:0 0 22px 26px}
.cs-time .row::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--lime);border:3px solid #fff;box-shadow:0 0 0 1px var(--gray-200)}
.cs-time .k{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple)}
.cs-time .v{color:var(--black);font-size:15.5px;margin-top:3px}

/* DR authority bar */
.cs-dr{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:20px;border:1px solid var(--gray-200);border-radius:14px;padding:24px;background:#fff}
.cs-dr .chip{text-align:center}
.cs-dr .chip .n{font-family:var(--haas);font-weight:700;font-size:40px;color:var(--black);line-height:1}
.cs-dr .chip .n.up{color:var(--purple)}
.cs-dr .chip .c{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);margin-top:6px}
.cs-dr .arrow{font-size:26px;color:var(--lime-dark)}
.cs-dr .meta{flex:1;min-width:200px;font-size:14px;color:var(--gray-600);line-height:1.55}
.cs-dr .meta .kv{font-family:var(--mono,monospace);font-size:11px;color:var(--gray-400);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}

/* quote */
.cs-quote{background:var(--purple);color:#fff;border-radius:18px;padding:40px 44px;margin-top:8px}
.cs-quote p{font-family:'Libre Baskerville',serif;font-style:italic;font-size:clamp(20px,2.6vw,28px);line-height:1.4;margin:0}
.cs-quote .a{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:18px}

/* cta */
.cs-cta{background:var(--black);color:#fff;text-align:center;padding:72px 24px}
.cs-cta h2{font-family:'Libre Baskerville',serif;font-weight:700;font-size:clamp(28px,4vw,44px);color:#fff}
.cs-cta h2 .it{font-style:italic;font-weight:400;color:#b18cff}
.cs-cta p{color:rgba(255,255,255,.6);max-width:52ch;margin:14px auto 26px}
.cs-btn{display:inline-flex;align-items:center;gap:8px;background:var(--lime);color:#0A0A0A;font-weight:700;font-size:15px;padding:15px 30px;border-radius:100px;text-decoration:none}
.cs-btn:hover{background:var(--lime-dark)}
.cs-btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);margin-left:10px}

/* listing grid */
.cs-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
@media(max-width:860px){.cs-list{grid-template-columns:1fr}}
.cs-item{display:block;border:1px solid var(--gray-200);border-radius:18px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease;position:relative}
.cs-item:hover{transform:translateY(-4px);box-shadow:0 18px 46px rgba(0,0,0,.09)}
.cs-item::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;z-index:2}
.cs-item:hover::before{transform:scaleX(1)}
.cs-item .pad{padding:26px 26px 8px}
.cs-item .tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.cs-item .client{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-400)}
.cs-item .stat{font-family:var(--haas);font-weight:700;font-size:44px;color:var(--black);line-height:1;margin:6px 0 6px;letter-spacing:-.02em}
.cs-item .stat.pur{color:var(--purple)} .cs-item .stat.lim{color:#4e6a00}
.cs-item .desc{font-size:14px;color:var(--gray-600);line-height:1.55;min-height:44px}
.cs-item .arrow{position:absolute;top:22px;right:22px;width:40px;height:40px;border-radius:50%;border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;color:var(--black);transition:.2s}
.cs-item:hover .arrow{background:var(--lime);border-color:var(--lime)}
.cs-item .chart-mini{border-top:1px solid var(--gray-100)}
.cs-item.soon{opacity:.6;pointer-events:none}
.cs-item.soon .arrow{border-style:dashed}

/* home case cards are now links */
a.case-card{text-decoration:none;color:inherit;display:block}

/* ================================================================
   CASE STUDY ACCESS GATE, lead-capture + OTP modal
   ================================================================ */
/* Blur + lock the page while gated */
html.j6v-gated, body.j6v-gated{overflow:hidden!important}
body.j6v-gated .site-nav,
body.j6v-gated header,
body.j6v-gated main,
body.j6v-gated section,
body.j6v-gated .site-footer,
body.j6v-gated .float-bar{filter:blur(9px);-webkit-filter:blur(9px);pointer-events:none;user-select:none}
.j6v-gate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;opacity:1;transition:opacity .4s ease}
.j6v-gate.j6v-gate-hide{opacity:0;pointer-events:none}
.j6v-gate-backdrop{position:absolute;inset:0;background:rgba(10,10,10,.55);backdrop-filter:saturate(120%) blur(2px);-webkit-backdrop-filter:saturate(120%) blur(2px)}
.j6v-gate-card{position:relative;width:100%;max-width:460px;background:#fff;border:1px solid var(--gray-200,#E2E2DC);border-radius:20px;box-shadow:0 30px 80px rgba(10,10,10,.35);padding:34px 32px 28px;font-family:var(--sans,'IBM Plex Sans',sans-serif);animation:j6vGateIn .45s cubic-bezier(.16,1,.3,1)}
@keyframes j6vGateIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.j6v-gate-eyebrow{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-400,#A3A39A)}
.j6v-gate-h{font-family:'Libre Baskerville',Georgia,serif;font-weight:700;font-size:26px;line-height:1.15;letter-spacing:-.01em;color:var(--black,#0A0A0A);margin:10px 0 8px}
.j6v-gate-h .it{font-style:italic;font-weight:400;color:var(--purple,#7C3AED)}
.j6v-gate-sub{font-size:14.5px;line-height:1.55;color:var(--gray-600,#666660);margin:0 0 20px}
.j6v-gate-sub strong{color:var(--black,#0A0A0A)}
.j6v-gate-form{display:flex;flex-direction:column;gap:12px}
.j6v-gate-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.j6v-gate-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.j6v-gate-field span{font-size:12px;font-weight:600;color:var(--gray-600,#666660)}
.j6v-gate-field input{width:100%;font-family:inherit;font-size:15px;color:var(--black,#0A0A0A);background:var(--gray-50,#F9F9F7);border:1px solid var(--gray-200,#E2E2DC);border-radius:11px;padding:12px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
.j6v-gate-field input:focus{border-color:var(--purple,#7C3AED);box-shadow:0 0 0 3px rgba(124,58,237,.14);background:#fff}
.j6v-gate-btn{margin-top:6px;font-family:inherit;font-size:15px;font-weight:600;color:var(--black,#0A0A0A);background:var(--lime,#C2FF00);border:none;border-radius:100px;padding:14px 22px;cursor:pointer;transition:transform .12s,filter .15s}
.j6v-gate-btn:hover{filter:brightness(1.04)}
.j6v-gate-btn:active{transform:translateY(1px)}
.j6v-gate-btn:disabled{opacity:.6;cursor:default}
.j6v-gate-fine{font-size:11.5px;line-height:1.5;color:var(--gray-400,#A3A39A);margin:12px 0 0;text-align:center}
.j6v-gate-err{font-size:13px;color:#b3261e;background:#fdecea;border:1px solid #f7c9c4;border-radius:10px;padding:9px 12px}
.j6v-gate-back{align-self:flex-start;background:none;border:none;color:var(--gray-600,#666660);font-family:var(--mono,monospace);font-size:12px;letter-spacing:.04em;cursor:pointer;padding:0 0 10px}
.j6v-gate-back:hover{color:var(--black,#0A0A0A)}
.j6v-gate-link{background:none;border:none;color:var(--purple,#7C3AED);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline}
.j6v-gate-otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:4px 0 2px}
.j6v-gate-otp input{width:100%;aspect-ratio:1/1.15;text-align:center;font-family:var(--haas,'Space Grotesk',sans-serif);font-weight:600;font-size:24px;color:var(--black,#0A0A0A);background:var(--gray-50,#F9F9F7);border:1px solid var(--gray-200,#E2E2DC);border-radius:11px;outline:none;transition:border-color .15s,box-shadow .15s}
.j6v-gate-otp input:focus{border-color:var(--purple,#7C3AED);box-shadow:0 0 0 3px rgba(124,58,237,.14);background:#fff}
.j6v-gate-check{width:54px;height:54px;margin:4px 0 4px;display:grid;place-items:center;border-radius:50%;background:var(--lime,#C2FF00);color:var(--black,#0A0A0A);font-size:26px;font-weight:700}
@media(max-width:520px){.j6v-gate-card{padding:26px 20px 22px}.j6v-gate-otp{gap:6px}.j6v-gate-otp input{font-size:20px}}