/* ─────────────────────────────────────────
   DESIGN TOKENS — LIGHT (default)
   All WCAG 2.0 AA verified:
   - Body text #212121 on #F5F5F5 → 16:1  ✓
   - Muted text #595959 on #F5F5F5 → 7:1  ✓
   - Coral #C0392B on dark bg only — never on light bg
   - Dark bg text uses #F5F5F5 → passes AA
───────────────────────────────────────── */
:root,
[data-theme="light"] {
  --bg:          #F5F5F5;
  --bg-alt:      #FFFFFF;
  --bg-raised:   #EBEBEB;
  --ink:         #212121;   /* 16:1 on --bg */
  --ink-2:       #3D3D3D;   /* 10.5:1 on --bg */
  --ink-3:       #595959;   /* 7.0:1 on --bg — AA large text ✓ */
  --ink-4:       #767676;   /* 4.54:1 on --bg — AA normal text ✓ */
  --border:      rgba(33,33,33,0.10);
  --border-mid:  rgba(33,33,33,0.16);

  /* Coral ONLY used on dark backgrounds in light mode */
  /* On the dark persona strip: coral #F88379 on #212121 → 4.57:1 ✓ AA */
  --coral:       #;F88379
  --coral-on-dark: #F88379;  /* Use only on dark bg */

  /* Glass */
  --glass-bg:    rgba(255,255,255,0.70);
  --glass-border:rgba(255,255,255,0.65);
  --glass-shadow:0 8px 40px rgba(33,33,33,0.09), inset 0 1px 0 rgba(255,255,255,0.85);

  /* Dark strip (persona band) */
  --dark-band:   #212121;
  --dark-band-text: #F5F5F5;

  /* Card dark themes */
  --card-navy:   #1a2744;
  --card-forest: #1e3320;
  --card-smoke:  #2a2a2a;
  --card-clay:   #3d2520;

  --nav-blur-bg: rgba(255,255,255,0.95);
  --nav-border:  rgba(33,33,33,0.08);
}

[data-theme="dark"] {
  --bg:          #161616;
  --bg-alt:      #1f1f1f;
  --bg-raised:   #2a2a2a;
  --ink:         #F0F0F0;   /* 14.2:1 on #161616 ✓ */
  --ink-2:       #D4D4D4;   /* 9.7:1  ✓ */
  --ink-3:       #A8A8A8;   /* 5.4:1  ✓ */
  --ink-4:       #828282;   /* 4.58:1 ✓ — AA */
  --border:      rgba(255,255,255,0.10);
  --border-mid:  rgba(255,255,255,0.18);

  /* Coral on dark bg: #F88379 on #161616 → 5.6:1 ✓ AA */
  --coral:       #F88379;
  --coral-on-dark: #F88379;

  --glass-bg:    rgba(40,40,40,0.75);
  --glass-border:rgba(255,255,255,0.10);
  --glass-shadow:0 8px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);

  --dark-band:   #0d0d0d;
  --dark-band-text: #F0F0F0;

  --card-navy:   #1a2744;
  --card-forest: #1e3320;
  --card-smoke:  #2a2a2a;
  --card-clay:   #3d2520;

  --nav-blur-bg: rgba(22,22,22,0.92);
  --nav-border:  rgba(255,255,255,0.08);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --heading: 'Plus Jakarta Sans', sans-serif;
  --body:    'Lato', sans-serif;
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --max: 1200px;
  --g: clamp(1.5rem, 5vw, 4rem);
  --nav-h: 72px;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
  transition: background 0.3s, color 0.3s;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ─── CURSOR ─── */
/* ─── CURSOR — always visible on all backgrounds ─── */
/* Coral dot + white outline = readable on light AND dark */
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: #F88379;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 3px rgba(0,0,0,0.15);
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .3s var(--ease-snap), height .3s var(--ease-snap);
}
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(248,131,121,0.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .4s var(--ease-snap), height .4s var(--ease-snap);
}
.cursor-dot.grow { width: 44px; height: 44px; opacity: .18; box-shadow: none; }
.cursor-ring.grow { width: 58px; height: 58px; }

/* ─── SKIP NAV ─── */
.skip {
  position: absolute; top: -100%; left: 1rem;
  background: var(--ink); color: var(--bg);
  padding: .75rem 1.5rem; font-family: var(--heading); font-size: .85rem;
  border-radius: 0 0 8px 8px; z-index: 10000; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 0; }

/* ─────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--nav-h);
  background: #FFFFFF;
  border-bottom: 1px solid rgba(33,33,33,0.08);
  transition: box-shadow .3s;
}
nav.scrolled { box-shadow: 0 2px 16px rgba(33,33,33,0.07); }
[data-theme="dark"] nav {
  background: #1f1f1f;
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] nav.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,0.3); }

/* Inner wrapper — constrain to page max-width, aligned with content */
.nav-inner {
  max-width: var(--max); margin: 0 auto; width: 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  /* Same padding logic as all sections: clamp-based up to --max, then auto */
  padding: 0 var(--g);
  box-sizing: border-box;
}
/* At viewports wider than max+padding, nav content must stay inside --max */
@media (min-width: calc(1200px + 8rem)) {
  .nav-inner { padding: 0; }
}

.nav-logo {
  font-family: var(--heading); font-size: 1rem; font-weight: 800;
  color: var(--ink); cursor: none; letter-spacing: -.02em;
  display: flex; align-items: center; gap: .625rem;
}
.nav-logo-mark {
  width: 32px; height: 32px; border-radius: 50%;
  background: #F88379;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--heading); font-size: .6rem; font-weight: 800;
  letter-spacing: .04em; color: #FFFFFF;
  flex-shrink: 0;
  /* #FFFFFF on #F88379 → 3.4:1 — passes for bold at this size (decorative mark) */
}

.nav-right { display: flex; align-items: center; gap: 2rem; }
.nav-links { display: flex; align-items: center; gap: .5rem; list-style: none; }
.nav-links a {
  font-family: var(--heading); font-size: .875rem; font-weight: 500;
  color: var(--ink-3); cursor: none; letter-spacing: .005em;
  transition: color .2s, background .2s; position: relative;
  padding: .375rem .75rem; border-radius: 8px;
}
.nav-links a:hover { background: #F88379; color: var(--ink);}
.nav-links a.on { color: var(--ink); background: transparent; font-weight: 700;}
.nav-links a.on::after {
  content: ''; position: absolute; bottom: -2px; left: .75rem; right: .75rem;
  height: 2px; background: #F88379; border-radius: 2px;
}
.nav-cta {
  background: var(--ink) !important; color: var(--bg) !important;
  padding: .5625rem 1.375rem !important; border-radius: 100px !important;
  font-family: var(--heading) !important;
  font-weight: 700 !important; font-size: .8125rem !important;
  transition: opacity .2s !important; cursor: none;
}
.nav-cta:hover { opacity: .8 !important; }
.nav-cta.on::after { display: none !important; }

/* ─── THEME TOGGLE ─── */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--bg-raised); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: none; transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--bg-alt); border-color: var(--border-mid); }
.theme-toggle svg { width: 18px; height: 18px; transition: color .2s; color: var(--ink); }
[data-theme="dark"] .theme-toggle svg { color: #FFFFFF; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav-ham { display: none; background: none; border: none; cursor: none; flex-direction: column; gap: 5px; padding: 4px; width:32px; height:32px; align-items:center; justify-content:center; }
.nav-ham span { display: block; width: 22px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease-snap), opacity .2s; }
.nav-open .nav-ham span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open .nav-ham span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-open .nav-ham span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─────────────────────────────────────────
   PAGES
───────────────────────────────────────── */
.page { display: none; padding-top: var(--nav-h); }
.page.on { display: block; }

/* ─── REVEAL ANIMATIONS ─── */
/* Base fade-up (default) */
.rv {
  opacity: 0; transform: translateY(28px);
  transition: opacity .75s var(--ease-snap), transform .75s var(--ease-snap);
}
.rv.in { opacity: 1; transform: none; }

/* Slide from left */
.rv-left {
  opacity: 0; transform: translateX(-36px);
  transition: opacity .75s var(--ease-snap), transform .75s var(--ease-snap);
}
.rv-left.in { opacity: 1; transform: none; }

/* Slide from right */
.rv-right {
  opacity: 0; transform: translateX(36px);
  transition: opacity .75s var(--ease-snap), transform .75s var(--ease-snap);
}
.rv-right.in { opacity: 1; transform: none; }

/* Scale up */
.rv-scale {
  opacity: 0; transform: scale(0.94);
  transition: opacity .75s var(--ease-snap), transform .75s var(--ease-snap);
}
.rv-scale.in { opacity: 1; transform: scale(1); }

/* Delays — shared by all rv variants */
.d1{transition-delay:.07s} .d2{transition-delay:.14s}
.d3{transition-delay:.21s} .d4{transition-delay:.28s} .d5{transition-delay:.35s}
.d6{transition-delay:.42s}

/* ─────────────────────────────────────────
   SHARED SECTION
───────────────────────────────────────── */
.section { padding: clamp(4rem,8vw,8rem) var(--g); }
.section-inner { max-width: var(--max); margin: 0 auto; }

.section-eyebrow {
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: var(--heading); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 1rem;
}
.section-eyebrow::before { content:''; display:block; width:1.5rem; height:2px; background:var(--ink-3); border-radius:2px; }

.section-h {
  font-family: var(--heading);
  font-size: clamp(2.75rem, 5.5vw, 5rem);
  font-weight: 800; line-height: 1.05;
  letter-spacing: -.035em; color: var(--ink);
  margin-bottom: 1.25rem;
}
.section-sub {
  font-size: 1.1875rem; color: var(--ink-2); line-height: 1.8;
  max-width: 54ch; font-weight: 400;
}

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero {
  min-height: calc(100vh - var(--nav-h));
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  padding: 4rem var(--g);
}

.hero-mesh {
  position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 70% 30%, rgba(248,131,121,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 18% 70%, rgba(248,131,121,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 80% 40% at 50% 50%, rgba(33,33,33,0.02) 0%, transparent 70%);
  animation: mesh-drift 14s ease-in-out infinite alternate;
}
[data-theme="dark"] .hero-mesh {
  background:
    radial-gradient(ellipse 60% 50% at 70% 30%, rgba(248,131,121,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 18% 70%, rgba(248,131,121,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 80% 40% at 50% 50%, rgba(255,255,255,0.015) 0%, transparent 70%);
}
@keyframes mesh-drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-1.5%,2%) scale(1.015); }
  100% { transform: translate(1%,-1.5%) scale(0.99); }
}

/* Geometric rings */
.hero-geo { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero-geo::before {
  content:''; position:absolute; right:-80px; top:-80px;
  width:580px; height:580px; border-radius:50%;
  border: 1px solid rgba(248,131,121,0.14); animation: geo-spin 50s linear infinite;
}
.hero-geo::after {
  content:''; position:absolute; right:-30px; top:-30px;
  width:380px; height:380px; border-radius:50%;
  border: 1px solid rgba(248,131,121,0.08); animation: geo-spin 32s linear infinite reverse;
}
[data-theme="dark"] .hero-geo::before { border-color: rgba(248,131,121,0.10); }
[data-theme="dark"] .hero-geo::after  { border-color: rgba(248,131,121,0.06); }
@keyframes geo-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.hero-inner {
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto; width:100%;
  display:grid; grid-template-columns: 1fr 400px;
  gap:4rem; align-items:center;
}

.hero-h1 {
  font-family: var(--heading);
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 800; line-height: 1.05;
  letter-spacing: -.04em; color: var(--ink);
  margin-bottom: 2rem;
  animation: fade-up .7s var(--ease-snap) .05s both;
}

.hero-sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--ink-2); line-height: 1.8;
  max-width: 50ch; margin-bottom: 2.5rem; font-weight: 400;
  animation: fade-up .7s var(--ease-snap) .15s both;
}

.hero-actions {
  display:flex; gap:1rem; flex-wrap:wrap;
  animation: fade-up .7s var(--ease-snap) .25s both;
}

@keyframes fade-up { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--heading); font-weight:700; font-size:.875rem;
  letter-spacing:.01em; cursor:none; border:none;
  padding:.875rem 2rem; border-radius:100px;
  transition: all .25s var(--ease-snap);
}
.btn svg { transition: transform .2s; }
.btn:hover svg { transform:translateX(4px); }

/* Primary: ink bg / bg text — always passes */
.btn-primary { background:var(--ink); color:var(--bg); }
.btn-primary:hover { opacity:.85; transform:translateY(-2px); }

/* Ghost: transparent, ink border, ink text */
.btn-ghost { background:transparent; color:var(--ink); border:1.5px solid var(--border-mid); }
.btn-ghost:hover { border-color:var(--ink); transform:translateY(-2px); }

/* ─── GLASS CARD ─── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  box-shadow: var(--glass-shadow);
  padding: 2.25rem;
  position:relative; overflow:hidden;
  animation: fade-up .8s var(--ease-snap) .3s both;
}

.glass-card-label {
  font-family:var(--heading); font-size:.65rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:1.5rem;
}
.glass-card-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}
.glass-card-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: transparent;
}
.glass-card-name { font-family:var(--heading); font-size:1.1rem; font-weight:800; color:var(--ink); margin-bottom:.2rem; letter-spacing:-.02em; }
.glass-card-title { font-size:.875rem; color:var(--ink-3); margin-bottom:1.5rem; font-weight:300; }
.glass-divider { height:1px; background:var(--border); margin-bottom:1.5rem; }

.glass-stats { display:flex; gap:1.5rem; margin-bottom:1.5rem; }
.glass-stat { display:flex; flex-direction:column; }
.glass-stat-n { font-family:var(--heading); font-size:1.5rem; font-weight:700; color:var(--ink); line-height:1.15; letter-spacing:-.02em; }
.glass-stat-l { font-size:.8125rem; color:var(--ink-3); margin-top:.25rem; font-weight:400; }

.glass-tags { display:flex; flex-wrap:wrap; gap:.375rem; }
.glass-tag {
  font-family:var(--heading); font-size:.62rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); background:var(--bg-raised);
  padding:.275rem .7rem; border-radius:100px; border:1px solid var(--border);
}

/* scroll cue removed */

/* ─────────────────────────────────────────
   MARQUEE — no background, hero-echo borders
───────────────────────────────────────── */
.marquee-band {
  border-top: 1px solid rgba(248,131,121,0.15);
  border-bottom: 1px solid rgba(248,131,121,0.15);
  padding: .9rem 0; overflow: hidden;
  background: transparent;
  display: flex; align-items: center;
}
[data-theme="dark"] .marquee-band {
  border-color: rgba(248,131,121,0.15);
  background: transparent;
}
.marquee-track { display:flex; align-items:center; gap:2.5rem; white-space:nowrap; animation:marquee 24s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
.marquee-item { font-family:var(--heading); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); flex-shrink:0; line-height:1; }
.marquee-dot { color:rgba(248,131,121,0.6); line-height:1; }
[data-theme="dark"] .marquee-item { color:var(--ink-3); }
[data-theme="dark"] .marquee-dot  { color:rgba(248,131,121,0.5); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ─────────────────────────────────────────
   CAPABILITIES
───────────────────────────────────────── */
.caps-section { background:var(--bg-alt); }
.caps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.125rem; margin-top:3rem; }
.cap-card {
  background:var(--bg); border-radius:20px; padding:2rem 1.75rem;
  border:1px solid var(--border);
  position:relative; overflow:hidden;
}
.cap-icon {
  width:44px; height:44px; border-radius:12px;
  background:var(--bg-raised); display:flex; align-items:center; justify-content:center;
  margin-bottom:1.25rem; font-size:1.2rem;
}
.cap-n { font-family:var(--heading); font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); margin-bottom:.5rem; }
.cap-title { font-family:var(--heading); font-size:1.0625rem; font-weight:800; color:var(--ink); margin-bottom:.625rem; letter-spacing:-.02em; }
.cap-body { font-size:.9375rem; color:var(--ink-2); line-height:1.75; font-weight:400; }

/* ─────────────────────────────────────────
   WORK SECTION — VERTICAL STACK
───────────────────────────────────────── */
.work-section { background:var(--bg); }
.work-stack { display:flex; flex-direction:column; gap:2.5rem; margin-top:3rem; }

.wcard {
  border-radius:24px; overflow:hidden;
  background:var(--bg-alt); cursor:none;
  transition: transform .4s var(--ease-snap), box-shadow .4s;
  border:1px solid var(--border); position:relative;
  display: grid;
  grid-template-columns: auto 1fr;
}
.wcard:hover { transform: translateY(-4px); box-shadow: 0 20px 56px rgba(33,33,33,0.10); }
[data-theme="dark"] .wcard:hover { box-shadow: 0 20px 56px rgba(0,0,0,0.4); }
.wcard:focus-within { outline:3px solid var(--ink-2); outline-offset:4px; }

/* Alternate: every even card flips image to the right */
.wcard:nth-child(even) { grid-template-columns: 1fr auto; }
.wcard:nth-child(even) .wcard-thumb { order: 2; }
.wcard:nth-child(even) .wcard-body  { order: 1; }

.wcard-thumb {
  position: relative; overflow: hidden;
  width: 460px;
  aspect-ratio: 1 / 1;
}
.wcard-thumb-bg {
  position: absolute; inset: 0;
  transition: transform .6s var(--ease-snap);
}
.wcard:hover .wcard-thumb-bg { transform: scale(1.04); }

/* Image placeholder — shows "Drop your image here" hint */
.wcard-img-placeholder {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 2rem;
}
.wcard-img-placeholder-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(255,255,255,0.12);
  border: 1.5px dashed rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
}
.wcard-img-placeholder-icon svg { opacity: .5; }
.wcard-img-placeholder-label {
  font-family: var(--heading); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.wcard-img-placeholder-num {
  font-family: var(--heading); font-style: italic; font-weight: 300;
  font-size: clamp(3.5rem,5vw,7rem);
  color: rgba(255,255,255,0.07);
  line-height: 1; letter-spacing: -.03em;
  position: absolute; bottom: 1.5rem; right: 2rem;
  user-select: none;
}

/* Card overlay on image hover */
.wcard-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(10,10,10,0.6) 0%, transparent 50%);
  opacity: 0; transition: opacity .3s;
  display: flex; align-items: flex-end; padding: 1.5rem;
}
.wcard:hover .wcard-overlay { opacity: 1; }
.wcard-cta {
  font-family: var(--heading); font-size: .775rem; font-weight: 700; color: #F0F0F0;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2); padding: .5rem 1.125rem;
  border-radius: 100px; letter-spacing: .02em;
}

/* Card dark themes */
.theme-navy  .wcard-thumb-bg { background: linear-gradient(135deg,#1a2744 0%,#0e1a30 100%); }
.theme-forest .wcard-thumb-bg { background: linear-gradient(135deg,#1e3320 0%,#0f1f12 100%); }
.theme-smoke .wcard-thumb-bg { background: linear-gradient(135deg,#2a2a2a 0%,#1a1a1a 100%); }
.theme-clay  .wcard-thumb-bg { background: linear-gradient(135deg,#3d2520 0%,#271510 100%); }

/* Card body — right side */
.wcard-body {
  padding: 3rem 3.5rem;
  display: flex; flex-direction: column; justify-content: center;
}
.wcard-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.125rem; }
/* Lighter chip: very subtle tint, near-transparent */
.wtag {
  font-family: var(--heading); font-size: .65rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(33,33,33,0.04);
  padding: .3rem .8rem; border-radius: 100px;
  border: 1px solid rgba(33,33,33,0.07);
}
[data-theme="dark"] .wtag {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: var(--ink-3);
}
/* Number hidden — removed from DOM; CSS kept defensive */
.wcard-num { display: none; }
.wcard-title {
  font-family: var(--heading);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 800; color: var(--ink); letter-spacing: -.03em;
  margin-bottom: .875rem; line-height: 1.05;
}
.wcard-desc {
  font-size: 1.125rem; color: var(--ink-2); line-height: 1.75;
  font-weight: 400; max-width: 48ch; margin-bottom: 2.25rem;
}
.wcard-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--heading); font-size: .9rem; font-weight: 700;
  color: var(--ink); letter-spacing: .01em;
  background: none; border: none; cursor: none; padding: 0;
  transition: gap .2s var(--ease-snap);
}
.wcard-link:hover { gap: .875rem; }
.wcard-link svg { transition: transform .2s; }
.wcard-link:hover svg { transform: translateX(4px); }

/* Responsive: collapse to vertical on smaller screens */
@media (max-width: 960px) {
  .wcard, .wcard:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .wcard:nth-child(even) .wcard-thumb { order: unset; }
  .wcard:nth-child(even) .wcard-body  { order: unset; }
  .wcard-thumb { width: 100%; aspect-ratio: 1 / 1; }
  .wcard-body  { padding: 1.75rem 2rem; }
}

/* ─────────────────────────────────────────
   PERSONA STRIP — dark band, coral is accessible here
───────────────────────────────────────── */
.persona-strip {
  background:var(--dark-band); padding:clamp(4rem,7vw,7rem) var(--g);
  position:relative; overflow:hidden;
}
.persona-strip::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle,rgba(248,131,121,0.06) 0%,transparent 70%);
  pointer-events:none;
}
.persona-inner { max-width:var(--max); margin:0 auto; }
.persona-tagline {
  font-family:var(--heading);
  font-size:clamp(1.75rem,3.5vw,3.25rem);
  font-weight:800; line-height:1.1; letter-spacing:-.03em;
  color:var(--dark-band-text); margin-bottom:2rem;
}
/* Coral used ONLY here — dark background, passes AA */
.persona-tagline .accent-on-dark { color: var(--coral-on-dark); }
.persona-tagline .dim { color:rgba(240,240,240,0.3); font-weight:300; font-style:italic; }
.persona-traits { display:flex; gap:.5rem; flex-wrap:wrap; }
.trait {
  font-family:var(--heading); font-size:.8rem; font-weight:500;
  color:rgba(240,240,240,0.55);
  border:1px solid rgba(255,255,255,0.12);
  padding:.5rem 1.125rem; border-radius:100px;
  transition:all .2s; cursor:default;
}
.trait:hover { color:var(--dark-band-text); border-color:rgba(255,255,255,0.3); }

/* ─────────────────────────────────────────
   TESTIMONIALS
───────────────────────────────────────── */
.testi-section { background:var(--bg-alt); }
.testi-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:3rem; }
.testi-card {
  border-radius:20px; padding:2rem;
  border:1px solid var(--border); background:var(--bg);
  position:relative; overflow:hidden;
  transition: transform .35s var(--ease-snap), box-shadow .35s, border-color .25s;
  cursor: none;
  display: block;
  text-decoration: none;
  color: inherit;
}
.testi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(33,33,33,0.10);
  border-color: rgba(248,131,121,0.35);
}
[data-theme="dark"] .testi-card:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,0.35);
  border-color: rgba(248,131,121,0.25);
}
.testi-qmark {
  font-family:Georgia,serif; font-size:5rem; line-height:1;
  color:#F88379; position:absolute; top:.25rem; left:1.25rem;
  user-select:none; pointer-events:none; opacity:.7;
}
.testi-body { font-size:1rem; color:var(--ink-2); line-height:1.8; font-style:italic; font-weight:400; margin-bottom:1.5rem; position:relative; z-index:1; padding-top:1rem; }
.testi-footer { display:flex; align-items:center; gap:.875rem; }
.testi-avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--bg-raised); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-weight:800; font-size:.875rem; color:var(--ink);
}
.testi-name { font-family:var(--heading); font-size:.9375rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.testi-role { font-size:.8125rem; color:var(--ink-4); font-weight:300; }
.testi-linkedin { display:inline-flex; align-items:center; gap:.3rem; font-family:var(--heading); font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); margin-top:.2rem; text-decoration:none; transition:color .2s; }
.testi-linkedin:hover { color:var(--ink-2); }

/* ─────────────────────────────────────────
   CORAL ACCENT SECTIONS
   #F88379 as bg. #212121 on coral → 4.6:1 ✓ AA
───────────────────────────────────────── */
.coral-section {
  background: #F88379;
  padding: clamp(4rem,8vw,7rem) var(--g);
  position: relative; overflow: hidden;
}
.coral-section::before {
  content: ''; position: absolute; inset: -30%;
  background:
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(255,255,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(0,0,0,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.coral-inner { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; }
.coral-eyebrow {
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: var(--heading); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(33,33,33,0.65); margin-bottom: 1rem;
}
.coral-eyebrow::before { content:''; display:block; width:1.5rem; height:2px; background:rgba(33,33,33,0.45); border-radius:2px; }
.coral-h {
  font-family: var(--heading); font-size: clamp(2.25rem,4.5vw,4rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.035em;
  color: #1a1a1a; margin-bottom: 1.25rem;
}
.coral-sub { font-size: 1.125rem; color: #2e2e2e; line-height: 1.8; max-width: 54ch; font-weight: 400; }
.coral-card {
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 20px; padding: 2rem 1.75rem;
  transition: background .3s, transform .35s var(--ease-snap);
}
.coral-card:hover { background: rgba(255,255,255,0.42); transform: translateY(-4px); }
.coral-card-n { font-family:var(--heading); font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(33,33,33,0.5); margin-bottom:.5rem; }
.coral-card-title { font-family:var(--heading); font-size:1.0625rem; font-weight:800; color:#1a1a1a; margin-bottom:.625rem; letter-spacing:-.02em; }
.coral-card-body { font-size:.9375rem; color:#2e2e2e; line-height:1.75; font-weight:400; }
[data-theme="dark"] .coral-section { background: #c45448; }
[data-theme="dark"] .coral-section::before {
  background:
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(255,255,255,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(0,0,0,0.15) 0%, transparent 50%);
}

/* ─────────────────────────────────────────
   CTA SECTION
───────────────────────────────────────── */
.cta-section {
  background: var(--bg); padding: clamp(5rem,10vw,10rem) var(--g); text-align: center;
  position: relative;
}
.cta-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, transparent 0%, #F88379 25%, #F88379 75%, transparent 100%);
  opacity: .55;
}
.cta-inner { max-width:600px; margin:0 auto; }
.cta-h { font-family:var(--heading); font-size:clamp(2.5rem,5vw,5rem); font-weight:800; letter-spacing:-.04em; color:var(--ink); margin-bottom:1rem; line-height:1.05; }
.cta-sub { font-size:1.125rem; color:var(--ink-2); margin-bottom:3rem; font-weight:400; line-height:1.8; }
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ─────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────── */
.about-split {
  display:grid; grid-template-columns:4fr 6fr;
  gap:4rem; align-items:top;
  max-width:var(--max); margin:0 auto;
  padding:clamp(4rem,8vw,7rem) var(--g);
  border-bottom:1px solid var(--border);
}
.about-portrait {
  margin-top: 3rem;
  position:relative;
}

.about-h { font-family:var(--heading); font-size:clamp(2rem,3.5vw,3.5rem); font-weight:800; letter-spacing:-.035em; color:var(--ink); margin-bottom:1.75rem; line-height:1.05; }
.about-p { font-size:1.125rem; color:var(--ink-2); line-height:1.85; margin-bottom:1.25rem; font-weight:400; }
.about-p strong { color:var(--ink); font-weight:700; }
.about-btns { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.5rem; }

/* Values */
.values-section { background:var(--bg-alt); padding:clamp(4rem,7vw,7rem) var(--g); }
.values-inner { max-width:var(--max); margin:0 auto; }
.values-h { font-family:var(--heading); font-size:clamp(2rem,4vw,4rem); font-weight:800; letter-spacing:-.04em; color:var(--ink); margin-bottom:3rem; line-height:1.05; }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.125rem; }
.val-card { border-radius:20px; padding:2rem; border:1px solid var(--border); background:var(--bg); transition:border-color .3s,transform .3s; }
.val-card:hover { border-color:var(--border-mid); transform:translateY(-3px); }
.val-num { font-family:var(--heading); font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); margin-bottom:.75rem; }
.val-title { font-family:var(--heading); font-size:1.0625rem; font-weight:800; color:var(--ink); margin-bottom:.5rem; letter-spacing:-.02em; }
.val-body { font-size:.9375rem; color:var(--ink-2); line-height:1.75; font-weight:400; }

/* Timeline */
.timeline-section { max-width:var(--max); margin:0 auto; padding:clamp(3rem,6vw,6rem) var(--g) clamp(4rem,8vw,8rem); }
.tl-h { font-family:var(--heading); font-size:clamp(2rem,4vw,4rem); font-weight:800; letter-spacing:-.04em; color:var(--ink); margin-bottom:3rem; line-height:1.05; }
.tl-item { display:grid; grid-template-columns:180px 1fr; padding:2.25rem 0; border-bottom:1px solid var(--border); position:relative; }
.tl-vline { width:1px; background:var(--border); position:absolute; left:160px; top:3rem; bottom:0; }
.tl-date { font-family:var(--heading); font-size:.78rem; font-weight:600; color:var(--ink-4); padding-top:.1rem; text-align:right; letter-spacing:.01em; margin-right:2.5rem;}
.tl-body { padding-left:2.5rem; position:relative; }
.tl-dot { position:absolute; left:-7px; top:.35rem; width:8px; height:8px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 3px var(--bg); transform:translateX(-50%); }
.tl-org { font-family:var(--heading); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:.3rem; }
.tl-role { font-family:var(--heading); font-size:1.125rem; font-weight:800; color:var(--ink); margin-bottom:.5rem; letter-spacing:-.02em; }
.tl-desc { font-size:.9375rem; color:var(--ink-2); line-height:1.75; font-weight:400; max-width:60ch; }

/* ─────────────────────────────────────────
   PROCESS PAGE
───────────────────────────────────────── */
.process-hero-wrap { max-width:var(--max); margin:0 auto; padding:clamp(4rem,8vw,7rem) var(--g) clamp(3rem,5vw,5rem); border-bottom:1px solid var(--border); }
.p-steps-wrap { max-width:var(--max); margin:0 auto; padding:clamp(3rem,6vw,5rem) var(--g) clamp(4rem,8vw,8rem); }
.p-step { display:grid; grid-template-columns:72px 1fr; gap:2rem; padding:2.5rem 0; border-bottom:1px solid var(--border); }
.p-step:first-child { border-top:1px solid var(--border); }
.p-step-n { font-family:var(--heading); font-size:2.5rem; font-weight:800; color:var(--border); line-height:1; letter-spacing:-.04em; }
.p-step-title { font-family:var(--heading); font-size:clamp(1.5rem,2.5vw,2.25rem); font-weight:800; color:var(--ink); letter-spacing:-.03em; margin-bottom:.875rem; line-height:1.05; }
.p-step-body { font-size:1.125rem; color:var(--ink-2); line-height:1.8; font-weight:400; max-width:58ch; }
.p-step-body strong { color:var(--ink); font-weight:700; }

.process-quote-block {
  max-width:var(--max); margin:0 auto; padding:0 var(--g) clamp(4rem,7vw,7rem);
}
.pq-glass {
  background:var(--glass-bg); backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid var(--glass-border); border-radius:24px;
  padding:3rem; box-shadow:var(--glass-shadow); position:relative; overflow:hidden;
}
.pq-text { font-family:var(--heading); font-size:clamp(1.25rem,2.2vw,1.875rem); font-weight:800; color:var(--ink); line-height:1.4; letter-spacing:-.025em; margin-bottom:1.25rem; position:relative; z-index:1; }
.pq-attr { font-size:.8125rem; color:var(--ink-4); font-weight:300; font-style:italic; }

/* ── PROCESS ARTIFACTS ── */
.p-artifacts-wrap {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(3rem,6vw,5rem) var(--g) clamp(5rem,9vw,8rem);
}

.p-phase-grid { display: flex; flex-direction: column; gap: 3.5rem; }

.p-phase-title-row {
  margin-bottom: 1.5rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.p-phase-title {
  font-family: var(--heading); font-size: clamp(1.375rem,2.2vw,1.75rem);
  font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1;
  margin-bottom: .5rem;
}
.p-phase-body {
  font-size: 1.0625rem; color: var(--ink-2); line-height: 1.8;
  font-weight: 400; max-width: 62ch; margin-bottom: 1.75rem;
}
.p-phase-body strong { color: var(--ink); font-weight: 700; }

/* Artifact chips */
.p-artifacts-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.p-artifact-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--heading); font-size: .8rem; font-weight: 600;
  color: var(--ink-2);
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 10px; padding: .5625rem 1rem;
  cursor: none;
  transition: border-color .2s, background .2s, transform .2s var(--ease-snap), box-shadow .2s;
  user-select: none;
}
.p-artifact-chip:hover {
  border-color: var(--border-mid); background: var(--bg-raised);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(33,33,33,0.07);
}
[data-theme="dark"] .p-artifact-chip:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}
.p-artifact-chip svg { flex-shrink: 0; color: var(--ink-4); transition: color .2s; }
.p-artifact-chip:hover svg { color: var(--ink-2); }

/* AI variant */
.p-artifact-chip.ai {
  border-color: rgba(248,131,121,0.28);
  background: rgba(248,131,121,0.04);
}
.p-artifact-chip.ai:hover {
  border-color: rgba(248,131,121,0.5);
  background: rgba(248,131,121,0.09);
}
[data-theme="dark"] .p-artifact-chip.ai {
  border-color: rgba(248,131,121,0.20);
  background: rgba(248,131,121,0.06);
}
.p-artifact-chip.ai svg { color: #C0392B; }
[data-theme="dark"] .p-artifact-chip.ai svg { color: #F88379; }
.ai-badge {
  font-family: var(--heading); font-size: .55rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: #C0392B; background: rgba(248,131,121,0.12);
  border: 1px solid rgba(248,131,121,0.22);
  border-radius: 4px; padding: .1rem .35rem; white-space: nowrap;
}
[data-theme="dark"] .ai-badge { color: #F88379; }

/* AI callout */
.p-ai-note {
  margin-top: 3rem; padding: 1.25rem 1.5rem;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 16px; display: flex; align-items: flex-start; gap: 1rem;
}
.p-ai-note-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: rgba(248,131,121,0.1); border: 1px solid rgba(248,131,121,0.18);
  display: flex; align-items: center; justify-content: center;
}
.p-ai-note-icon svg { color: #C0392B; }
[data-theme="dark"] .p-ai-note-icon svg { color: #F88379; }
.p-ai-note-text {
  font-size: .9375rem; color: var(--ink-2); line-height: 1.7; font-weight: 400;
}
.p-ai-note-text strong { color: var(--ink); font-weight: 600; }

/* ── ARTIFACT MODAL ── */
.art-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity .28s var(--ease-snap);
}
.art-modal-overlay.open {
  opacity: 1; pointer-events: all;
}
.art-modal {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 24px; width: 100%; max-width: 780px;
  max-height: 88vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,0.28);
  transform: translateY(18px) scale(0.97);
  transition: transform .32s var(--ease-snap);
}
.art-modal-overlay.open .art-modal {
  transform: none;
}
.art-modal-header {
  padding: 1.5rem 2rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  flex-shrink: 0;
}
.art-modal-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.art-modal-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--bg-raised); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.art-modal-icon svg { color: var(--ink-3); }
.art-modal-eyebrow {
  font-family: var(--heading); font-size: .6rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
  margin-bottom: .2rem;
}
.art-modal-title {
  font-family: var(--heading); font-size: 1.0625rem; font-weight: 800;
  color: var(--ink); letter-spacing: -.02em;
}
.art-modal-sub {
  font-size: .8125rem; color: var(--ink-3); font-weight: 400; margin-top: .1rem;
}
.art-modal-close {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--bg-raised); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: none; transition: background .2s, border-color .2s;
}
.art-modal-close:hover { background: var(--bg); border-color: var(--border-mid); }
.art-modal-close svg { color: var(--ink-3); }
.art-modal-body {
  padding: 2rem; overflow-y: auto; flex: 1;
  font-family: var(--body); font-size: 1rem; color: var(--ink-2);
  line-height: 1.75;
}
.art-modal-example-banner {
  font-family: var(--body); font-size: .8125rem; font-weight: 400;
  color: var(--ink-4); margin-bottom: 1.5rem; line-height: 1.5;
}
.art-modal-note-label {
  font-family: var(--heading); font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em; font-size: .75rem;
}
/* Content styles inside modal */
.art-modal-body h3 {
  font-family: var(--heading); font-size: 1rem; font-weight: 800;
  color: var(--ink); margin: 1.5rem 0 .5rem; letter-spacing: -.01em;
}
.art-modal-body h3:first-child { margin-top: 0; }
.art-modal-body p { margin-bottom: 1rem; }
.art-modal-body p:last-child { margin-bottom: 0; }
.art-modal-body ul { margin: 0 0 1rem 1.25rem; }
.art-modal-body li { margin-bottom: .3rem; }
.art-modal-body strong { color: var(--ink); font-weight: 700; }
.art-modal-body em { font-style: italic; }
/* Mock doc/table styles */
.mock-doc {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.5rem;
  font-size: .9375rem;
}
.mock-doc + .mock-doc { margin-top: 1rem; }
.mock-label {
  font-family: var(--heading); font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4);
  margin-bottom: .625rem;
}
.mock-row {
  display: flex; gap: 1rem; padding: .625rem 0;
  border-bottom: 1px solid var(--border); align-items: baseline;
}
.mock-row:last-child { border-bottom: none; padding-bottom: 0; }
.mock-row-k {
  font-family: var(--heading); font-size: .8125rem; font-weight: 700;
  color: var(--ink-3); min-width: 120px; flex-shrink: 0;
}
.mock-row-v { font-size: .9375rem; color: var(--ink-2); line-height: 1.55; }
.mock-chip {
  display: inline-block; font-family: var(--heading); font-size: .65rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 6px; margin: .15rem .15rem 0 0;
}
.mock-chip-gray { background: var(--bg-raised); color: var(--ink-3); border: 1px solid var(--border); }
.mock-chip-coral { background: rgba(248,131,121,0.12); color: #C0392B; border: 1px solid rgba(248,131,121,0.25); }
[data-theme="dark"] .mock-chip-coral { color: #F88379; }
.mock-journey {
  display: flex; gap: 0; margin: .5rem 0;
}
.mock-journey-step {
  flex: 1; padding: .875rem .75rem;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-right: none; position: relative; font-size: .8125rem;
}
.mock-journey-step:first-child { border-radius: 10px 0 0 10px; }
.mock-journey-step:last-child { border-radius: 0 10px 10px 0; border-right: 1px solid var(--border); }
.mock-journey-step-label {
  font-family: var(--heading); font-size: .6rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: .25rem;
}
.mock-journey-step-text { color: var(--ink-2); line-height: 1.45; }
.mock-journey-step.highlight { background: rgba(248,131,121,0.07); border-color: rgba(248,131,121,0.25); }
.mock-journey-step.highlight .mock-journey-step-label { color: #C0392B; }
[data-theme="dark"] .mock-journey-step.highlight .mock-journey-step-label { color: #F88379; }
.mock-stat-row { display: flex; gap: 1rem; margin: .75rem 0; }
.mock-stat { flex: 1; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; padding: .875rem 1rem; text-align: center; }
.mock-stat-n { font-family: var(--heading); font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -.03em; }
.mock-stat-l { font-size: .75rem; color: var(--ink-4); margin-top: .25rem; }
.mock-hmw { background: var(--bg-raised); border-left: 3px solid var(--border-mid); border-radius: 0 10px 10px 0; padding: .75rem 1rem; margin: .5rem 0; font-size: .9375rem; color: var(--ink-2); font-style: italic; }
.mock-hmw:first-child { margin-top: .75rem; }
.mock-persona { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; margin-bottom: .75rem; }
.mock-persona-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--heading); font-weight: 800; font-size: .875rem; color: var(--ink-3); flex-shrink: 0; }
.mock-persona-name { font-family: var(--heading); font-size: .9375rem; font-weight: 800; color: var(--ink); margin-bottom: .2rem; }
.mock-persona-role { font-size: .8125rem; color: var(--ink-3); margin-bottom: .5rem; }
.mock-persona-need { font-size: .875rem; color: var(--ink-2); line-height: 1.5; }
.mock-comp-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .625rem; margin: .75rem 0; }
.mock-comp-cell { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: .625rem .75rem; }
.mock-comp-cell-head { font-family: var(--heading); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); margin-bottom: .25rem; }
.mock-comp-cell-body { font-size: .8125rem; color: var(--ink-2); line-height: 1.45; }
.mock-wireframe-bar { height: 10px; background: var(--bg-raised); border-radius: 5px; margin: .4rem 0; border: 1px solid var(--border); }
.mock-wireframe-box { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: .75rem; margin: .5rem 0; }
.mock-wireframe-box-head { height: 8px; background: var(--border); border-radius: 3px; width: 40%; margin-bottom: .5rem; }
.mock-wireframe-box-body { height: 6px; background: var(--border); border-radius: 3px; width: 75%; margin-bottom: .3rem; }
.mock-wireframe-box-body.short { width: 55%; }
.mock-checklist-item { display: flex; align-items: flex-start; gap: .625rem; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .9375rem; color: var(--ink-2); }
.mock-checklist-item:last-child { border-bottom: none; }
.mock-check { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.mock-check.pass { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3); }
.mock-check.fail { background: rgba(248,131,121,0.15); border: 1px solid rgba(248,131,121,0.3); }
.mock-check svg { width: 10px; height: 10px; }
.mock-check.pass svg { color: #16a34a; }
.mock-check.fail svg { color: #C0392B; }
[data-theme="dark"] .mock-check.pass svg { color: #4ade80; }
[data-theme="dark"] .mock-check.fail svg { color: #F88379; }

@media (max-width: 700px) {
  .art-modal { border-radius: 16px; }
  .art-modal-header { padding: 1.25rem 1.25rem 1rem; }
  .art-modal-body { padding: 1.25rem; }
  .mock-comp-row { grid-template-columns: 1fr; }
  .mock-journey { flex-direction: column; }
  .mock-journey-step { border-right: 1px solid var(--border); border-bottom: none; }
  .mock-journey-step:first-child { border-radius: 10px 10px 0 0; }
  .mock-journey-step:last-child { border-radius: 0 0 10px 10px; border-bottom: 1px solid var(--border); }
}
/* ─────────────────────────────────────────
   CASE STUDIES
───────────────────────────────────────── */
.case-back-wrap {
  max-width:var(--max); margin:0 auto;
  padding:clamp(4rem,8vw,6rem) var(--g) 0;
}
.case-back-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--heading); font-size:.8rem; font-weight:600;
  color:var(--ink-3); cursor:none; background:none; border:none;
  padding:.375rem 0; transition:color .2s; letter-spacing:.01em;
}
.case-back-btn:hover { color:var(--ink); }
.case-back-btn svg { transition:transform .2s; }
.case-back-btn:hover svg { transform:translateX(-3px); }

.case-hdr {
  max-width:var(--max); margin:0 auto;
  padding:2rem var(--g) 4rem;
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:center;
  border-bottom:1px solid var(--border);
}
.case-cat { font-family:var(--heading); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1rem; }
.case-h { font-family:var(--heading); font-size:clamp(2rem,4.5vw,4.5rem); font-weight:800; letter-spacing:-.04em; line-height:1.0; color:var(--ink); margin-bottom:1.5rem; }
.case-lead { font-size:1.125rem; color:var(--ink-3); line-height:1.75; font-weight:300; margin-bottom:2.5rem; font-family:var(--body); }
.case-meta { display:flex; gap:2.5rem; flex-wrap:wrap; padding:2rem 0 ; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.case-meta-lbl { font-family:var(--heading); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:.3rem; }
.case-meta-val { font-family:var(--heading); font-size:.9375rem; font-weight:700; color:var(--ink); }
.case-vis {
  border-radius:24px; overflow:hidden; aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-style:italic; font-weight:300;
  font-size:7rem; color:rgba(255,255,255,0.08);
}

.case-body { max-width:var(--max); margin:0 auto; padding:clamp(3rem,6vw,5rem) var(--g) clamp(4rem,8vw,6rem); padding-top:0;}
.case-body h2 { font-family:var(--heading); font-size:clamp(1.75rem,3vw,2.75rem); font-weight:800; letter-spacing:-.035em; color:var(--ink); margin:3.5rem 0 1.25rem; line-height:1.05; }
.case-body h3 { font-family:var(--heading); font-size:1.75rem; font-weight:700; color:var(--ink); margin:2rem 0 .75rem; letter-spacing:-.01em; }
.case-body p { font-size:1.125rem; color:var(--ink-2); line-height:1.85; margin-bottom:1.25rem; font-weight:400; }
.case-body p strong { color:var(--ink); font-weight:700; }
.case-body p em { color:var(--ink-2); font-style:italic; font-family:var(--body); }
.case-body ul { margin:0 0 1.5rem 1.5rem; }
.case-body li { font-size:1.125rem; color:var(--ink-2); line-height:1.8; margin-bottom:.4rem; font-weight:400; }

/* Glass pull quote — uses ink, not coral */
.case-pull {
  background:var(--glass-bg); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  border-left:3px solid var(--ink-2);
  border-radius:0 16px 16px 0;
  padding:1.5rem 2rem; margin:2.5rem 0;
  box-shadow:var(--glass-shadow);
}
.case-pull p { font-family:var(--heading); font-size:1.25rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.45; margin:0; }

.case-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1.125rem; margin:3rem 0; }
.cstat {
  background:var(--glass-bg); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border); border-radius:20px;
  padding:2rem; text-align:center; box-shadow:var(--glass-shadow);
}
.cstat-n { font-family:var(--heading); font-size:3rem; font-weight:800; color:var(--ink); line-height:1; margin-bottom:.4rem; letter-spacing:-.04em; }
.cstat-l { font-size:.8125rem; color:var(--ink-4); line-height:1.45; font-weight:300; }

.case-img-band { background:var(--bg-raised); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:clamp(2rem,4vw,4rem) var(--g); }
.case-img-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.125rem; max-width:var(--max); margin:0 auto; }
.case-img-block { border-radius:18px; overflow:hidden; aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; font-family:var(--heading); font-style:italic; font-weight:300; font-size:2.5rem; color:rgba(255,255,255,0.07); }

.case-nav-bar {
  max-width:var(--max); margin:0 auto; padding:3rem var(--g);
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.cnav-lbl { font-family:var(--heading); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:.4rem; }
.cnav-title { font-family:var(--heading); font-size:1.125rem; font-weight:800; color:var(--ink-3); cursor:none; background:none; border:none; transition:color .2s; letter-spacing:-.02em; }
.cnav-title:hover { color:var(--ink); }
.cnav-right { text-align:right; }

/* ─────────────────────────────────────────
   CANDID BRAND — EXTENDED CASE STUDY STYLES
───────────────────────────────────────── */

/* Hero visual placeholder — full bleed within max-width */
.hero-visuals { max-width:var(--max); margin:0 auto; padding:0 var(--g); }
.vis-block {
  border-radius:20px; overflow:hidden; position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.375rem; min-height:400px;
  border:1.5px dashed var(--border-mid); background:var(--bg-alt);
  transition:border-color .25s, background .25s;
}
.vis-block:hover { border-color:rgba(33,33,33,0.28); background:var(--bg-raised); }
[data-theme="dark"] .vis-block:hover { border-color:rgba(255,255,255,0.22); }

/* Upload hint centered */
.vis-upload-hint {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.625rem; pointer-events:none;
}
.vis-upload-icon {
  width:44px; height:44px; border-radius:12px;
  border:1.5px dashed var(--border-mid);
  display:flex; align-items:center; justify-content:center;
}
.vis-upload-icon svg { color:var(--ink-4); }
.vis-upload-text { font-family:var(--heading); font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); }

/* Suggestion chip */
.vis-suggest {
  position:absolute; top:1.125rem; left:1.125rem;
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:.45rem .875rem;
  font-family:var(--heading); font-size:.65rem; font-weight:600; color:var(--ink-3);
  display:flex; align-items:flex-start; gap:.4rem;
  max-width:calc(100% - 2.25rem); line-height:1.45;
}
.vis-suggest svg { color:#F88379; flex-shrink:0; margin-top:.05rem; }

/* Bottom label */
.vis-label { position:relative; z-index:1; display:flex; align-items:flex-start; gap:.625rem; }
.vis-label-num {
  font-family:var(--heading); font-size:.58rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4);
  border:1px solid var(--border); border-radius:4px; padding:.15rem .4rem;
  flex-shrink:0; margin-top:.1rem;
}
.vis-label-title { font-family:var(--heading); font-size:.875rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; margin-bottom:.1rem; }
.vis-label-desc { font-size:.75rem; color:var(--ink-3); line-height:1.45; font-weight:400; }

/* Spotlight block */
.spotlight-block {
  background:var(--bg-alt); border:1px solid var(--border-mid); border-radius:24px;
  padding:2.5rem; margin:3rem 0; position:relative; overflow:hidden;
}
.spotlight-eyebrow {
  font-family:var(--heading); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#F88379;
  margin-bottom:.875rem; display:flex; align-items:center; gap:.5rem;
}
.spotlight-eyebrow::before { content:''; display:block; width:1.25rem; height:2px; background:#F88379; border-radius:2px; }
.spotlight-h {
  font-family:var(--heading); font-size:clamp(1.4rem,2.5vw,2rem);
  font-weight:800; letter-spacing:-.03em; color:var(--ink);
  margin-bottom:1rem; line-height:1.1;
}
.spotlight-p { font-size:1rem; color:var(--ink-2); line-height:1.8; font-weight:400; margin-bottom:1.25rem; }
.spotlight-p strong { color:var(--ink); font-weight:700; }
.spotlight-p:last-of-type { margin-bottom:0; }
.spotlight-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem; }
.spotlight-pill {
  font-family:var(--heading); font-size:.7rem; font-weight:600;
  color:var(--ink-3); border:1px solid var(--border-mid);
  padding:.35rem 1rem; border-radius:100px;
}

/* Role two-col layout */
.role-with-img { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; margin-bottom:2rem; }
.role-text p { font-size:1.0625rem; color:var(--ink-2); line-height:1.85; margin-bottom:1.25rem; font-weight:400; }
.role-img-placeholder { position:sticky; top:calc(var(--nav-h) + 1.5rem); }
.inline-ph {
  border-radius:16px; overflow:hidden; position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.25rem; min-height:340px;
  border:1.5px dashed var(--border-mid); background:var(--bg-alt);
  transition:border-color .25s, background .25s;
}
.inline-ph:hover { border-color:rgba(33,33,33,0.28); background:var(--bg-raised); }
[data-theme="dark"] .inline-ph:hover { border-color:rgba(255,255,255,0.22); }

/* Section image placeholders */
.section-img-placeholder {
  border-radius:16px; overflow:hidden; position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.25rem; min-height:320px;
  border:1.5px dashed var(--border-mid); background:var(--bg-alt);
  margin:2rem 0 3rem;
  transition:border-color .25s, background .25s;
}
.section-img-placeholder:hover { border-color:rgba(33,33,33,0.28); background:var(--bg-raised); }
[data-theme="dark"] .section-img-placeholder:hover { border-color:rgba(255,255,255,0.22); }

/* Stats 4-col override for Candid Brand */
.case-stats-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:3rem 0; }

/* Responsive tweaks */
@media (max-width:900px) {
  .role-with-img { grid-template-columns:1fr; }
  .role-img-placeholder { position:static; }
  .case-stats-4 { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .case-stats-4 { grid-template-columns:1fr 1fr; gap:.75rem; }
  .spotlight-block { padding:1.75rem; }
}

/* ─────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────── */
.contact-layout {
  display:grid; grid-template-columns:1fr 1fr;
  gap:6rem; max-width:var(--max); margin:0 auto;
  padding:clamp(3rem,6vw,5rem) var(--g) clamp(5rem,10vw,10rem);
  border-bottom:1px solid var(--border);
}
.contact-h { font-family:var(--heading); font-size:clamp(2.25rem,4.5vw,4.5rem); font-weight:800; letter-spacing:-.04em; color:var(--ink); margin-bottom:1.25rem; line-height:1.05; }
.contact-p { font-size:1.125rem; color:var(--ink-2); line-height:1.8; font-weight:400; margin-bottom:2.5rem; }
.clinks { display:flex; flex-direction:column; gap:.75rem; }
.clink {
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.25rem; border-radius:16px;
  border:1.5px solid var(--border); cursor:none;
  text-decoration:none; transition:all .2s;
}
.clink:hover { border-color:var(--border-mid); background:var(--bg-raised); transform:translateX(4px); }
.clink-icon { width:38px; height:38px; border-radius:10px; background:var(--bg-raised); display:flex; align-items:center; justify-content:center; font-size:.875rem; color:var(--ink-3); flex-shrink:0; font-family:var(--heading); font-weight:800; }
.clink-lbl { font-family:var(--heading); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:.15rem; }
.clink-val { font-family:var(--heading); font-size:.9375rem; font-weight:700; color:var(--ink); }

/* Form */
.form { display:flex; flex-direction:column; gap:1.25rem; }
.fg { display:flex; flex-direction:column; gap:.5rem; }
.fg label { font-family:var(--heading); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.fg input, .fg textarea, .fg select {
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--bg-alt); border:1.5px solid var(--border);
  border-radius:12px; padding:.875rem 1.125rem; outline:none; width:100%;
  transition:border-color .2s, box-shadow .2s; cursor:text;
}
.fg input:focus, .fg textarea:focus, .fg select:focus {
  border-color:var(--ink-2); box-shadow:0 0 0 3px rgba(33,33,33,0.08);
}
[data-theme="dark"] .fg input:focus,
[data-theme="dark"] .fg textarea:focus,
[data-theme="dark"] .fg select:focus {
  box-shadow:0 0 0 3px rgba(240,240,240,0.08);
}
.fg textarea { resize:vertical; min-height:130px; }
.fg-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
#form-ok { display:none; padding:1.5rem 2rem; background:var(--bg-raised); border:1.5px solid var(--border); border-radius:16px; }
#form-ok-title { font-family:var(--heading); font-weight:800; color:var(--ink); margin-bottom:.3rem; letter-spacing:-.01em; }
#form-ok-sub { font-size:.875rem; color:var(--ink-3); font-weight:300; }

/* ─────────────────────────────────────────
   FOOTER
   Background: #212121
   WCAG AA requires 4.5:1 for normal text, 3:1 for large/bold
   #F0F0F0 on #212121 → 14.2:1 ✓
   #B0B0B0 on #212121 → 5.9:1 ✓ (nav links, tag, tagline)
   #999999 on #212121 → 4.6:1 ✓ (small labels, nav heads)
   #888888 on #212121 → 3.9:1 — only passes for large/bold ≥18px or bold ≥14px
───────────────────────────────────────── */
footer { background:var(--dark-band); padding:4rem var(--g) 2.5rem; }
.footer-top {
  max-width:var(--max); margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:3rem;
  padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,0.12);
  margin-bottom:2rem;
}
.footer-brand-name { font-family:var(--heading); font-size:1.25rem; font-weight:800; color:#F0F0F0; letter-spacing:-.02em; margin-bottom:.3rem; }
/* Was 0.4 opacity (~#a0a0a0, 4.3:1 ✗) → now #ADADAD = 5.4:1 ✓ */
.footer-brand-tag { font-size:.8125rem; color:#ADADAD; font-weight:400; max-width:28ch; line-height:1.55; }
/* Was 0.3 opacity (~#888, 3.1:1 ✗) → now #999 is 4.6:1 ✓ at bold 700 large text (0.62rem = ~10px × 700 weight qualifies as bold) */
.footer-nav-head { font-family:var(--heading); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#A0A0A0; margin-bottom:1rem; }
.footer-nav-list { list-style:none; display:flex; flex-direction:column; gap:.625rem; }
/* Was 0.5 opacity (~#B8B8B8, 5.4:1 ✓) — keeping, just making it a solid value */
.footer-nav-list a { font-size:.9rem; color:#B8B8B8; transition:color .2s; cursor:none; }
.footer-nav-list a:hover { color:#F0F0F0; }
.footer-bottom { max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
/* Was 0.25 opacity (~#737373, 3.3:1 ✗) → now #A0A0A0 = 4.6:1 ✓ */
.footer-copy { font-size:.8125rem; color:#A0A0A0; font-weight:400; }
.footer-li-link {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--heading); font-size:.8125rem; font-weight:600;
  color:#C0C0C0; text-decoration:none;
  border:1px solid rgba(255,255,255,0.20); padding:.5rem 1rem; border-radius:100px;
  transition:color .2s, border-color .2s; cursor:none;
}
.footer-li-link:hover { color:#F0F0F0; border-color:rgba(255,255,255,0.45); }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width:1000px) {
  .hero-inner { grid-template-columns:1fr; }
  .glass-card { display:none; }
}
@media (max-width:900px) {
  .caps-grid,.testi-grid,.values-grid { grid-template-columns:1fr 1fr; }
  .about-split { grid-template-columns:1fr; gap:2.5rem; }
  .about-portrait { display:none; }
  .case-hdr,.contact-layout { grid-template-columns:1fr; gap:2.5rem; }
  .case-vis { display:none; }
  .case-stats { grid-template-columns:1fr; }
  .case-img-grid { grid-template-columns:1fr; }
  .nav-links { display:none !important; }
  .nav-ham { display:flex; }
  .tl-item { grid-template-columns:1fr; }
  .tl-date,.tl-vline { display:none; }
  .tl-body { padding-left:1.25rem; }
}
@media (max-width:600px) {
  .caps-grid,.testi-grid,.values-grid { grid-template-columns:1fr; }
  .fg-row { grid-template-columns:1fr; }
  body { cursor:auto; }
  .cursor-dot,.cursor-ring { display:none; }
  .hero-h1 { font-size: clamp(2rem,8vw,3rem); }
  .section-h { font-size: clamp(2rem,7vw,3rem); }
  .wcard-body { padding: 1.5rem; }
  .wcard-title { font-size: clamp(1.5rem,5vw,2rem); }
  .p-artifacts-chips { gap: .4rem; }
  .p-artifact-chip { font-size: .75rem; padding: .45rem .75rem; }
  .case-hdr { padding: 1.5rem var(--g) 3rem; }
  .case-body { padding: 2rem var(--g) 3rem; }
  .case-stats { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .cstat-n { font-size: 2rem; }
  .footer-top { flex-direction: column; gap: 2rem; }
  .contact-layout { padding: 2rem var(--g) 4rem; }
  .testi-grid { grid-template-columns: 1fr; }
  .art-modal { border-radius: 12px; max-height: 92vh; }
  .nav-logo span:last-child { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .marquee-track { animation:none; }
}
:focus-visible { outline:2px solid var(--ink-2); outline-offset:3px; border-radius:4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Mobile nav open */
.mobile-nav-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 850;
  background: var(--bg);
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
}
.nav-open .mobile-nav-overlay { display: flex; }
.mobile-nav-link {
  font-family: var(--heading); font-size: 1.75rem; font-weight: 800;
  color: var(--ink); letter-spacing: -.03em; cursor: none;
  padding: 1rem 2rem; text-align: center; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--border);
  transition: background .15s;
  display: block; text-decoration: none;
}
.mobile-nav-link:first-child { border-top: 1px solid var(--border); }
.mobile-nav-link:hover { background: var(--bg-raised); }
.mobile-nav-cta {
  margin-top: 2rem;
  font-family: var(--heading); font-size: 1rem; font-weight: 700;
  background: var(--ink); color: var(--bg) !important;
  padding: .875rem 2.5rem; border-radius: 100px;
  cursor: none; border: none; text-decoration: none;
  display: inline-block;
}

/* ═══════════════════════════════════════
   PULSE IQ CASE STUDY — component styles
   Variables inherit from v18 tokens
═══════════════════════════════════════ */

/* Shared accent-light alias (v18 uses --coral, case study uses --accent-light) */
:root, [data-theme="light"] { --accent-light: #FEF0EE; }
[data-theme="dark"]          { --accent-light: #2D1F1E; }

/* Hero tag */
.cs-hero-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent-light); color: var(--ink-3);
  font-family: var(--heading); font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .375rem .875rem; border-radius: 100px;
  margin-bottom: 1.5rem; border: 1px solid rgba(248,131,121,0.25);
}
.cs-hero-tag svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Hero title / subtitle */
.cs-hero-title {
  font-family: var(--heading); font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -.03em;
  color: var(--ink); max-width: 18ch; margin-bottom: 1.25rem;
}
.cs-hero-title em { font-style: normal; color: var(--ink); }
.cs-hero-sub {
  font-family: var(--body); font-size: clamp(1rem, 2vw, 1.175rem);
  line-height: 1.65; color: var(--ink-3);
  max-width: 62ch; margin-bottom: 3rem;
}

/* Hero image block */
.cs-hero-image {
  margin-top: 3.5rem; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-alt);
}

/* Meta row */
.cs-meta-row {
  display: flex; flex-wrap: wrap; gap: 2rem 3.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: 3rem;
}
.cs-meta-label {
  font-family: var(--heading); font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4);
  margin-bottom: .375rem;
}
.cs-meta-value {
  font-family: var(--heading); font-size: .9375rem; font-weight: 600;
  color: var(--ink-2);
}

/* Image placeholders */
.img-placeholder {
  width: 100%;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--bg-raised) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; color: var(--ink-4);
  font-family: var(--heading); font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: inherit; position: relative; overflow: hidden;
}
.img-placeholder::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(248,131,121,0.04) 20px, rgba(248,131,121,0.04) 40px);
}
.img-placeholder svg  { opacity: .35; position: relative; z-index: 1; }
.img-placeholder span { position: relative; z-index: 1; }
.img-placeholder-label {
  font-size: .7rem; color: var(--ink-4); opacity: .7;
  font-family: var(--heading); font-weight: 500;
  letter-spacing: .02em; text-transform: none; position: relative; z-index: 1;
}
.ph-tall  { min-height: 480px; }
.ph-mid   { min-height: 360px; }
.ph-short { min-height: 240px; }
.ph-sq    { min-height: 300px; }

/* Sections */
.cs-section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  border-bottom: 1px solid var(--border);
}
.cs-section:last-of-type { border-bottom: none; }
.cs-section-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); }

/* Phase heading */
.cs-phase-title {
  font-family: var(--heading); font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800; letter-spacing: -.025em; color: var(--ink); line-height: 1.1;
}

/* Two / three col */
.cs-two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
.cs-three-col { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,3vw,2rem); }
@media (max-width: 800px) {
  .cs-two-col, .cs-three-col { grid-template-columns: 1fr; }
}

/* Body text */
.cs-body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.75; color: var(--ink-3); margin-bottom: 1.5rem; }
.cs-body:last-child { margin-bottom: 0; }
.cs-body strong { color: var(--ink-2); font-weight: 700; }

/* Sub-heading */
.cs-h3 {
  font-family: var(--heading); font-size: 1.125rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--ink); margin-bottom: .75rem; margin-top: 2rem;
}
.cs-h3:first-child { margin-top: 0; }

/* Callout */
.cs-callout { background: var(--bg-alt); border-left: 3px solid #F88379; border-radius: 0 12px 12px 0; padding: 1.25rem 1.5rem; margin: 2rem 0; }
.cs-callout-text { font-family: var(--heading); font-size: 1rem; font-weight: 600; color: var(--ink-2); line-height: 1.5; font-style: italic; }

/* Cards */
.cs-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; padding: clamp(1.25rem,3vw,2rem); }
.cs-card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-light); color: var(--ink-2); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; flex-shrink: 0; }
.cs-card-icon svg { width: 18px; height: 18px; }
.cs-card-title { font-family: var(--heading); font-size: .9375rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; letter-spacing: -.01em; }
.cs-card-body  { font-family: var(--body); font-size: .9rem; line-height: 1.65; color: var(--ink-3); }

/* Personas */
.cs-persona { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.cs-persona-header { display: flex; align-items: center; gap: 1rem; }
.cs-persona-avatar { width: 48px; height: 48px; border-radius: 50%; color: #fff; font-family: var(--heading); font-size: .85rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .02em; }
.cs-persona-name { font-family: var(--heading); font-size: 1.0625rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.cs-persona-role { font-family: var(--body); font-size: .825rem; color: var(--ink-4); margin-top: .15rem; }
.cs-persona-body { font-family: var(--body); font-size: .9rem; line-height: 1.65; color: var(--ink-3); padding-top: .75rem; border-top: 1px solid var(--border); }
.cs-persona-tag { display: inline-block; background: var(--bg-raised); border: 1px solid var(--border); font-family: var(--heading); font-size: .7rem; font-weight: 600; letter-spacing: .03em; padding: .2rem .625rem; border-radius: 6px; color: var(--ink-4); margin-top: .5rem; margin-right: .25rem; }

/* Stat row */
.cs-stat-row { display: flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--bg-alt); margin: 2.5rem 0; }
.cs-stat { flex: 1; min-width: 140px; padding: 1.75rem 2rem; border-right: 1px solid var(--border); }
.cs-stat:last-child { border-right: none; }
.cs-stat-n { font-family: var(--heading); font-size: 2.25rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1; margin-bottom: .375rem; }
.cs-stat-l  { font-family: var(--body); font-size: .85rem; color: var(--ink-4); line-height: 1.4; }

/* Brand voice */
.cs-brand-voice { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; margin: 2rem 0; }
.cs-brand-voice-title { font-family: var(--heading); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 1.25rem; }
.cs-brand-trait { display: flex; align-items: flex-start; gap: .875rem; padding: .875rem 0; border-bottom: 1px solid var(--border); }
.cs-brand-trait:last-child { border-bottom: none; padding-bottom: 0; }
.cs-brand-trait-text { font-family: var(--body); font-size: .9375rem; line-height: 1.6; color: var(--ink-3); }
.cs-brand-trait-text strong { color: var(--ink-2); font-weight: 700; }

/* Gap table */
.cs-gap-table { width: 100%; border-collapse: collapse; font-family: var(--body); font-size: .875rem; margin: 1.5rem 0; }
.cs-gap-table th { font-family: var(--heading); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); text-align: left; padding: .75rem 1rem; border-bottom: 2px solid var(--border-mid); background: var(--bg-raised); }
.cs-gap-table th:first-child { border-radius: 8px 0 0 0; }
.cs-gap-table th:last-child  { border-radius: 0 8px 0 0; }
.cs-gap-table td { padding: .875rem 1rem; border-bottom: 1px solid var(--border); color: var(--ink-3); vertical-align: top; line-height: 1.55; }
.cs-gap-table tr:last-child td { border-bottom: none; }
.cs-gap-table .gap-feature { font-weight: 600; color: var(--ink-2); }
.cs-gap-badge { display: inline-block; font-family: var(--heading); font-size: .65rem; font-weight: 700; letter-spacing: .04em; padding: .2rem .5rem; border-radius: 6px; text-transform: uppercase; }
.cs-gap-badge.gap     { background: rgba(220,38,38,0.1);  color: #B91C1C; }
.cs-gap-badge.partial { background: rgba(217,119,6,0.1);  color: #B45309; }
.cs-gap-badge.strong  { background: var(--accent-light);  color: var(--ink-2); }

/* Flow diagram */
.cs-flow { display: flex; flex-wrap: wrap; align-items: stretch; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin: 2rem 0; }
.cs-flow-step { flex: 1; min-width: 120px; padding: 1.5rem 1.25rem; border-right: 1px solid var(--border); position: relative; display: flex; flex-direction: column; gap: .5rem; }
.cs-flow-step:last-child { border-right: none; }
.cs-flow-step::after { content: '→'; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); font-size: 1rem; color: var(--ink-4); z-index: 2; background: var(--bg-alt); padding: 0 2px; }
.cs-flow-step:last-child::after { display: none; }
.cs-flow-num   { font-family: var(--heading); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.cs-flow-label { font-family: var(--heading); font-size: .9rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.cs-flow-desc  { font-family: var(--body); font-size: .8rem; color: var(--ink-4); line-height: 1.5; }

/* Prototype CTA */
.cs-proto-cta { background: var(--ink); border-radius: 16px; padding: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin: 2rem 0; }
.cs-proto-cta-text { font-family: var(--heading); font-size: 1.125rem; font-weight: 700; color: var(--bg); line-height: 1.4; }
.cs-proto-cta-sub  { font-family: var(--body); font-size: .9rem; color: rgba(255,255,255,0.55); margin-top: .375rem; }
.cs-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--bg); color: var(--ink); font-family: var(--heading); font-size: .875rem; font-weight: 700; padding: .75rem 1.5rem; border-radius: 100px; transition: opacity .2s; cursor: none; white-space: nowrap; border: none; letter-spacing: .01em; text-decoration: none; }
.cs-btn:hover { opacity: .82; }

/* Screen grid */
.cs-screen-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: .75rem; }
.cs-screen-ph   { aspect-ratio: 9/16; min-height: 0; }
@media (max-width: 900px) { .cs-screen-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 540px) { .cs-screen-grid { grid-template-columns: repeat(2,1fr); } }

/* Image blocks */
.cs-img-block   { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-raised); }
.cs-img-caption { font-family: var(--heading); font-size: .75rem; font-weight: 500; color: var(--ink-4); padding: .75rem 1rem; border-top: 1px solid var(--border); background: var(--bg-alt); letter-spacing: .01em; }
.cs-img-wide    { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-raised); margin: 2rem 0; }

/* Divider */
.cs-divider { height: 1px; background: var(--border); margin: 2.5rem 0; }

/* Bias tag */
.cs-bias-tag { display: inline-flex; align-items: center; gap: .375rem; background: rgba(234,179,8,0.1); color: #92400E; border: 1px solid rgba(234,179,8,0.3); font-family: var(--heading); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .625rem; border-radius: 6px; }
[data-theme="dark"] .cs-bias-tag { color: #FDE68A; background: rgba(234,179,8,0.12); }

/* Case study page wrapper */
.cs-page-wrap { padding: clamp(3rem,8vw,6rem) 0 clamp(2.5rem,5vw,4rem);  }
.cs-page-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); }

/* Mobile responsive tweaks */
@media (max-width: 640px) {
  .cs-meta-row { gap: 1.25rem 2rem; }
  .cs-stat { min-width: 120px; padding: 1.25rem; }
  .cs-flow { flex-direction: column; }
  .cs-flow-step { border-right: none; border-bottom: 1px solid var(--border); }
  .cs-flow-step:last-child { border-bottom: none; }
  .cs-flow-step::after { content: '↓'; right: auto; left: 50%; top: auto; bottom: -14px; transform: translateX(-50%); }
  .cs-proto-cta { flex-direction: column; align-items: flex-start; }
  .cs-gap-table { font-size: .8rem; }
  .cs-gap-table th, .cs-gap-table td { padding: .625rem .75rem; }
}

/* ─────────────────────────────────────────
   DATA PLATFORMS — EXTENDED CASE STUDY
───────────────────────────────────────── */

/* Page-level intro paragraph */
.dp-page-intro { max-width:var(--max); margin:0 auto; padding:2.5rem var(--g); }
.dp-page-intro p { font-size:1.0625rem; color:var(--ink-2); line-height:1.8; max-width:60ch; }

/* Platforms wrapper */
.dp-platforms-wrap { max-width:var(--max); margin:0 auto; padding:0 var(--g) 6rem; }

/* Each product section */
.dp-product-section { padding:4rem 0 3.5rem; border-bottom:1px solid var(--border); }
.dp-product-section:last-child { border-bottom:none; }

/* Section title row: "01  Foundation Maps" */
.dp-section-title { display:flex; align-items:baseline; gap:1rem; margin-bottom:2.5rem; padding-bottom:1.25rem; border-bottom:2px solid var(--border-mid); }
.dp-product-number { font-family:var(--heading); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#F88379; flex-shrink:0; }
.dp-product-name { font-family:var(--heading); font-size:clamp(1.75rem,3.5vw,2.75rem); font-weight:800; letter-spacing:-.035em; color:var(--ink); line-height:1; }

/* Section description */
.dp-section-desc { font-size:1.0625rem; color:var(--ink-2); line-height:1.8; max-width:72ch; margin-bottom:2rem; }

/* Product subtitle + role row */
.dp-product-h { font-family:var(--heading); font-size:clamp(1rem,2vw,1.25rem); font-weight:600; letter-spacing:-.02em; color:var(--ink-2); margin-bottom:.625rem; line-height:1.3; }
.dp-product-role { font-family:var(--heading); font-size:.8125rem; font-weight:600; color:var(--ink-4); letter-spacing:.04em; margin-bottom:2rem; }

/* Image placeholders */
.dp-img-placeholder { border-radius:16px; background:var(--bg-raised); border:1.5px dashed var(--border-mid); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; color:var(--ink-4); font-family:var(--heading); font-size:.8rem; font-weight:500; letter-spacing:.04em; min-height:220px; width:100%; transition:background .2s; }
.dp-img-placeholder svg { opacity:.45; }
.dp-img-placeholder-label { opacity:.6; }

/* 2-col image band */
.dp-img-band { margin:2rem 0 0; display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:640px) { .dp-img-band { grid-template-columns:1fr; } }
.dp-img-band .dp-img-placeholder { min-height:160px; }

/* Insight cards */
.dp-insights { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:2rem; }
.dp-insight-card { background:var(--bg-alt); border:1px solid var(--border); border-radius:14px; padding:1.375rem 1.5rem; }
.dp-insight-label { font-family:var(--heading); font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); margin-bottom:.5rem; }
.dp-insight-text { font-size:.9375rem; color:var(--ink-2); line-height:1.65; }

/* Stats row inside a section */
.dp-stats { display:flex; gap:2.5rem; flex-wrap:wrap; margin-top:2rem; padding-top:2rem; border-top:1px solid var(--border); }
.dp-stat-n { font-family:var(--heading); font-size:1.875rem; font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1; margin-bottom:.25rem; }
.dp-stat-l { font-family:var(--heading); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); }

/* Thin section divider */
.dp-divider { max-width:var(--max); margin:0 auto; padding:0 var(--g); border-top:1px solid var(--border); }

/* ─────────────────────────────────────────
   CANDID SEARCH — EXTENDED CASE STUDY
───────────────────────────────────────── */

/* Hero */
.cs-hero { padding: clamp(3rem,6vw,6rem) var(--g); max-width: var(--max); margin: 0 auto; }
.cs-hero-eyebrow { font-family: var(--heading); font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 1.25rem; display: flex; align-items: center; gap: .75rem; }
.cs-hero-eyebrow::before { content: ''; display: block; width: 1.5rem; height: 2px; background: var(--coral, #F88379); border-radius: 2px; }
.cs-hero-h1 { font-family: var(--heading); font-size: clamp(2.25rem,4.5vw,4.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; color: var(--ink); margin-bottom: 1.5rem; }
.cs-hero-lead { font-size: clamp(1.0625rem,1.5vw,1.25rem); color: var(--ink-2); line-height: 1.8; max-width: 52ch; margin-bottom: 3rem; font-weight: 400; }

/* Meta strip (horizontal, used at hero level) */
.cs-meta { display: flex; flex-wrap: wrap; gap: 2rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 4rem; padding: 1.5rem 0; }
.cs-meta-item { flex: 1; min-width: 140px; }
.cs-meta-lbl { font-family: var(--heading); font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: .375rem; }
.cs-meta-val { font-family: var(--heading); font-size: .9375rem; font-weight: 600; color: var(--ink); }

/* Hero image area */
.cs-hero-img { width: 100%; border-radius: 16px; overflow: hidden; position: relative; margin-bottom: 5rem; }

/* Section (used as page sections with a max-width and padding) */
.cs-search-section { padding: clamp(3.5rem,6vw,6rem) var(--g); max-width: var(--max); margin: 0 auto; }
.cs-section-divider { border: none; border-top: 1px solid var(--border); margin: 0 var(--g); }

/* Eyebrow label */
.cs-eyebrow { font-family: var(--heading); font-size: .65rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 1rem; display: flex; align-items: center; gap: .625rem; }
.cs-eyebrow::before { content: ''; display: block; width: 1.25rem; height: 2px; background: var(--ink-4); border-radius: 2px; }

/* Section headings */
.cs-h2 { font-family: var(--heading); font-size: clamp(1.75rem,3vw,2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--ink); margin-bottom: 1.25rem; }
.cs-h3-search { font-family: var(--heading); font-size: 1.125rem; font-weight: 700; color: var(--ink); margin-bottom: .625rem; letter-spacing: -.015em; }

/* Stats grid (auto-fit) */
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin: 2.5rem 0; }
.cs-stat-cell { background: var(--bg-alt); padding: 2rem 1.5rem; }
.cs-stat-cell-n { font-family: var(--heading); font-size: 2.25rem; font-weight: 800; color: var(--ink); letter-spacing: -.04em; line-height: 1; }
.cs-stat-cell-l { font-family: var(--heading); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-top: .5rem; }

/* Pull quote */
.cs-pull-search { border-left: 3px solid var(--coral, #F88379); padding: 1.25rem 1.75rem; margin: 2.5rem 0; background: var(--bg-alt); border-radius: 0 12px 12px 0; }
.cs-pull-search p { font-family: var(--heading); font-size: 1.125rem; font-weight: 600; color: var(--ink-2); line-height: 1.6; font-style: italic; }

/* 2-col and 3-col layouts */
.cs-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-top: 2.5rem; }
.cs-3col { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-top: 2rem; }
@media (max-width: 768px) { .cs-2col, .cs-3col { grid-template-columns: 1fr; } }

/* Dark band (challenge / context) */
.cs-dark-band { background: var(--dark-band); color: var(--dark-band-text); padding: clamp(4rem,7vw,7rem) var(--g); }
.cs-dark-band-inner { max-width: var(--max); margin: 0 auto; }
.cs-dark-band .cs-eyebrow::before { background: var(--coral, #F88379); }
.cs-dark-band .cs-eyebrow { color: rgba(255,255,255,0.45); }
.cs-dark-band .cs-h2 { color: #F0F0F0; }
.cs-dark-band .cs-body-search { color: rgba(255,255,255,0.7); }

/* Challenge cards (light) */
.challenge-grid-light { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2.5rem; }
@media (max-width: 768px) { .challenge-grid-light { grid-template-columns: 1fr; } }
.challenge-card-light { background: var(--bg-alt); border: 1px solid var(--border); border-top: 3px solid var(--coral, #F88379); border-radius: 14px; padding: 1.75rem; }
.challenge-card-light-num { font-family: var(--heading); font-size: 1.5rem; font-weight: 800; color: var(--border-mid); letter-spacing: -.05em; margin-bottom: .75rem; line-height: 1; }
.challenge-card-light-title { font-family: var(--heading); font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: .625rem; }
.challenge-card-light-body { font-size: .9375rem; color: var(--ink-3); line-height: 1.7; }

/* Persona cards (light) */
.persona-grid-light { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; margin-top: 2.5rem; }
@media (max-width: 768px) { .persona-grid-light { grid-template-columns: 1fr; } }
.persona-card-light { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.persona-card-light-body { padding: 1.75rem; }
.persona-card-light-name { font-family: var(--heading); font-size: 1.125rem; font-weight: 800; color: var(--ink); letter-spacing: -.025em; margin-bottom: .25rem; }
.persona-card-light-sub { font-size: .875rem; color: var(--ink-4); margin-bottom: 1rem; }
.persona-card-light-goal-label { font-family: var(--heading); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: .375rem; }
.persona-card-light-goal { font-size: .9375rem; color: var(--ink-2); line-height: 1.65; margin-bottom: 1rem; }
.persona-needs-light { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .875rem; }
.persona-need-light { font-family: var(--heading); font-size: .6875rem; font-weight: 600; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; padding: .25rem .625rem; color: var(--ink-3); }
.persona-pain-label-light { font-family: var(--heading); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: .375rem; }
.persona-pain-light { font-size: .875rem; color: var(--ink-3); line-height: 1.6; font-style: italic; }

/* Process phases */
.process-phases { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 2.5rem; }
@media (max-width: 900px) { .process-phases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .process-phases { grid-template-columns: 1fr; } }
.process-phase { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; padding: 1.75rem; }
.phase-num { font-family: var(--heading); font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: .875rem; }
.phase-title { font-family: var(--heading); font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin-bottom: .625rem; letter-spacing: -.015em; }
.phase-body { font-size: .875rem; color: var(--ink-3); line-height: 1.7; }
.phase-artifacts { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .375rem; }
.phase-artifact { font-family: var(--heading); font-size: .6rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-4); background: var(--bg-raised); border-radius: 5px; padding: .25rem .5rem; }

/* Decision grid */
.decision-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; margin-top: 2rem; }
@media (max-width: 768px) { .decision-grid { grid-template-columns: 1fr; } }
.decision-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; padding: 1.75rem; }
.decision-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(248,131,121,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.decision-title { font-family: var(--heading); font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; letter-spacing: -.015em; }
.decision-body { font-size: .9375rem; color: var(--ink-3); line-height: 1.7; }

/* Feature list */
.feature-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2rem; }
@media (max-width: 768px) { .feature-list { grid-template-columns: 1fr; } }
.feature-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; }
.feature-badge { display: inline-block; font-family: var(--heading); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--bg-raised); color: var(--ink-3); border: 1px solid var(--border); border-radius: 6px; padding: .25rem .625rem; margin-bottom: .875rem; }
.feature-title { font-family: var(--heading); font-size: .9375rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.feature-body { font-size: .875rem; color: var(--ink-3); line-height: 1.7; }

/* Flow container */
.flow-container { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; margin: 2rem 0; overflow-x: auto; }

/* Image placeholders */
.cs-img-placeholder-search { width: 100%; border-radius: 12px; background: var(--bg-raised); border: 1.5px dashed var(--border-mid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; color: var(--ink-4); }
.cs-img-placeholder-search svg { opacity: .4; }
.cs-img-placeholder-label { font-family: var(--heading); font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.cs-img-full { aspect-ratio: 16/7; }
.cs-img-half { aspect-ratio: 4/3; }

/* Body text for search sections */
.cs-body-search { font-size: 1.0625rem; color: var(--ink-2); line-height: 1.8; max-width: 64ch; }
.cs-body-search + .cs-body-search { margin-top: 1rem; }

/* Spacing helpers */
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 3rem; }

/* Scrolling mockup */
    .scroll-mockup {
      max-width: 1072px;
      width: 100%;
      height: 600px;           /* visible area */
      overflow: hidden;
      position: relative;
      border-radius: 20px 20px 0 0;
      background: #ffffff;
      border: 20px solid #000000;
      border-bottom: 0;
    }

    .scroll-mockup img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      animation: scrollMockup 18s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      animation-play-state: paused; /* paused by default */
    }

    @keyframes scrollMockup {
      0%, 3% {
        transform: translateY(0%);
      }
      85%, 100% {
        transform: translateY(-83%); /* tweak based on image height */
      }
    }

    /* Pause on hover */
    .scroll-mockup:hover img {
      animation-play-state: running;
    }

    /* Scrolling mockup */