/* ============================================
   Lavan — Portfolio
   Vettvangur-inspired: white default · deep navy feature blocks · pale cards on navy · red-orange accent
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
@import url('https://cdn.jsdelivr.net/npm/geist@1/dist/fonts/geist-mono/style.css');

:root {
  /* === The 60/30/10 palette ===
     60% white surfaces · 30% deep navy feature blocks · 10% red-orange accent
     Plus pale #EEF2F6 used ONLY for cards on navy bg. */

  --paper: #FFFFFF;            /* page bg — white default */
  --navy: #0B1423;             /* deep navy — feature block bg + dominant ink color */
  --pale: #EEF2F6;             /* cool pale — cards on navy bg only */
  --rust: #FF3D00;             /* red-orange accent — replaces electric yellow */

  /* === Cards & surfaces ===
     Section pattern alternates: white sections → navy cards · navy sections → pale cards. */

  --cream: #0B1423;            /* card surface on white sections (= navy) */
  --cream-soft: #14202F;       /* subtle hover wash on navy cards */
  --charcoal: #0B1423;         /* dark surfaces (nav, dark CTAs) — same as navy */

  /* === Text colors === */
  --ink: #0B1423;              /* body text on white = navy (no muted variants) */
  --graphite: #0B1423;         /* was secondary muted gray — now navy (rule: no muted text) */
  --stone: #0B1423;            /* was tertiary — now navy */
  --text-primary: #0B1423;     /* primary text default — navy on white */
  --text-on-dark: #FFFFFF;     /* text inside navy cards / nav / dark surfaces */

  /* === Accent helpers === */
  --rust-deep: #D63300;
  --line: rgba(11, 20, 35, 0.10);
  --line-strong: rgba(11, 20, 35, 0.20);
  --mist: #4A5468;
  --gold: #FF3D00;

  /* === Type — DM Sans throughout, Geist Mono for labels === */
  --serif: 'DM Sans', system-ui, sans-serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'Geist Mono', 'DM Mono', ui-monospace, monospace;

  /* === Scale === */
  --container: 1280px;
  --gutter: clamp(1.5rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'kern' 1, 'liga' 1;
  overflow-x: clip;
}

/* Mobile: push the page content down by the nav height so content
   lives BELOW the fixed nav and hides behind it on scroll, instead
   of scrolling up into the iOS status bar zone above the nav.
   Nav height ≈ 60px (1rem padding top + ~16px brand text + 1rem padding
   bottom + 1px border). */
@media (max-width: 720px) {
  body {
    padding-top: 60px;
  }
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ============================================
   Grain overlay — subtle paper texture
   ============================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================
   Custom cursor (fine-pointer devices)
   ============================================ */
@media (pointer: fine) {
  .cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--rust);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s ease, width 0.22s ease, height 0.22s ease, background-color 0.22s ease;
    will-change: transform;
    mix-blend-mode: multiply;
  }
  .cursor-dot.is-ready { opacity: 1; }
  .cursor-dot.is-hidden { opacity: 0; }
  .cursor-dot.is-hover {
    width: 28px;
    height: 28px;
    background: rgba(43, 165, 138, 0.35);
    mix-blend-mode: normal;
  }
}

/* ============================================
   Nav — fixed top, refined
   ============================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(11, 20, 35, 0.08);
}

.nav-brand {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.25s ease;
  white-space: nowrap;
  position: relative;
}

.nav-brand:hover {
  color: var(--rust);
}

.nav-brand.active {
  color: var(--rust);
}

.nav-brand.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rust);
  animation: fadeInDot 0.3s ease;
}

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-links a {
  color: var(--text-primary);
  transition: color 0.3s ease;
  position: relative;
  padding-bottom: 3px;
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--rust);
}

.nav-links a.active {
  color: var(--rust);
  font-weight: 500;
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rust);
  animation: fadeInDot 0.3s ease;
}

@keyframes fadeInDot {
  from { opacity: 0; transform: translateX(-50%) scale(0.4); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

@media (max-width: 640px) {
  .nav-links { gap: 1.25rem; font-size: 10px; }
}

/* ============================================
   Container & layout
   ============================================ */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-wide {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

.container-narrow {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Case study width — match homepage's wide framing (1640px). Scoped to case
   study contexts so the homepage's containers stay 1100px. Prose stretches
   to full frame width (no readability cap). */
.case-hero .container,
.case-impact .container,
.case-section .container,
.case-section .container-narrow,
.case-hero .container-narrow {
  max-width: 1558px;
  margin-left: 0;
  margin-right: 0;
}

.case-section .lead,
.case-tagline,
.approach-prose p,
.impact-context,
.case-figure-caption,
.product-feature-body,
.opp-item p,
.tradeoff-item p,
.ps-block p,
.research-meta {
  max-width: 75ch;
}

section { padding: 4rem 0; scroll-margin-top: 80px; }
#work { padding-top: 2rem; }
@media (max-width: 720px) { section { padding: 4rem 0; } }

/* ============================================
   Typography — disciplined 3-weight system
   - 700 bold for titles (display, h1, h2)
   - 600 semibold for subtitles (h3, eyebrows)
   - 400 regular for body
   ============================================ */
.display {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
}

.display em {
  font-style: normal;
  font-weight: 700;
  color: var(--rust);
}

h1.page-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 1.5rem;
}

h1.page-title em {
  font-style: normal;
  font-weight: 700;
  color: var(--rust);
}

h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 1rem;
}

h2 em {
  font-style: normal;
  font-weight: 700;
  color: var(--rust);
}

h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 0.75rem;
}

h3 em {
  font-style: normal;
  font-weight: 600;
  color: var(--rust);
}

p { margin: 0 0 1.25rem; color: var(--text-primary); font-weight: 400; }
p.lead {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--text-primary);
  font-weight: 400;
  max-width: 56ch;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 1rem;
  display: inline-block;
}

.section-number {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--stone);
}

/* ============================================
   Hero (home)
   ============================================ */
.hero {
  padding: 7rem 0 2rem;
  position: relative;
  overflow: hidden;
}

.site-bg-canvas {
  display: none;     /* killed — doesn't fit the new white-default aesthetic */
}

/* Hero content needs to sit above the canvas */
.hero,
section,
footer {
  position: relative;
  z-index: 1;
}

/* Nav stays fixed regardless — it's a separate concern from canvas layering */
.nav { z-index: 100; }

/* Old hero-only canvas style kept for backwards compat */
.hero-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

.hero > .container,
.hero > .credentials-carousel {
  position: relative;
  z-index: 1;
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--stone);
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rust);
}

.hero-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rust);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Hero role + availability — elegant supporting line above the headline */
.hero-headline-col {
  min-width: 0;
}

.hero-role {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.hero-role-text {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.005em;
  color: var(--text-primary);
}

.hero-role-divider {
  width: 36px;
  height: 1px;
  background: var(--line-strong);
  display: inline-block;
}

.hero-role-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--rust);
}

.hero-role-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 0 3px rgba(43, 165, 138, 0.18);
  animation: pulse 2s ease-in-out infinite;
}

@media (max-width: 520px) {
  .hero-role { gap: 12px; }
  .hero-role-divider { display: none; }
  .hero-role-text { font-size: 18px; }
  .hero-role-status { font-size: 13px; }
}

/* Hero top — portrait left, headline right (aligned baselines) */
.hero-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

@media (min-width: 860px) {
  .hero-top {
    grid-template-columns: 180px 1fr;
    gap: 2rem;
    align-items: center;
  }
}

@media (min-width: 1100px) {
  .hero-top { grid-template-columns: 200px 1fr; gap: 2.5rem; }
}

/* Hero below — full-width, left-aligned content block */
.hero-below {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.hero-headline {
  margin: 0 !important;
}

.hero-portrait-side {
  position: relative;
}

.portrait-rect {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.portrait-round {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
}

.portrait-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-image: url('assets/portrait-avatar.jpg');
  background-size: cover;
  background-position: center;
}

.portrait-placeholder {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--stone);
  text-align: center;
  padding: 0 1rem;
  text-transform: uppercase;
  line-height: 1.4;
}

.portrait-placeholder code {
  font-family: var(--mono);
  background: rgba(43, 165, 138, 0.1);
  color: var(--rust);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 9px;
}

.portrait-frame.is-empty .portrait-placeholder { display: flex; }
.portrait-placeholder { display: none; }

/* ============================================
   Credentials carousel
   ============================================ */
.credentials-carousel {
  margin-top: 3rem;
  padding: 1.5rem 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--charcoal);
}

/* Card dividers and text inside the dark carousel need lighter values */
.credentials-carousel .cred-card {
  border-right-color: rgba(255, 255, 255, 0.1);
  transition: color 0.25s ease;
}
.credentials-carousel .cred-num,
.credentials-carousel .cred-plus,
.credentials-carousel .cred-icon,
.credentials-carousel .cred-ai-sparkle {
  color: #FFFFFF;
  transition: color 0.25s ease;
}
.credentials-carousel .cred-word {
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.25s ease;
}
.credentials-carousel .cred-footnote {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.25s ease;
}

/* Hover — flip numbers + accents to rust/teal accent */
.credentials-carousel .cred-card:hover .cred-num,
.credentials-carousel .cred-card:hover .cred-plus,
.credentials-carousel .cred-card:hover .cred-icon,
.credentials-carousel .cred-card:hover .cred-ai-sparkle {
  color: var(--rust);
}
.credentials-carousel .cred-card:hover .cred-word {
  color: #FFFFFF;
}

/* Scroll-to-work cue */
.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 1.25rem auto 0;
  padding: 0.5rem 0 0.5rem;
  color: var(--text-primary);
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  font-variation-settings: "opsz" 24;
  transition: color 0.3s ease, gap 0.3s ease;
  width: fit-content;
}

.scroll-cue:hover {
  color: var(--rust);
  gap: 18px;
}

.scroll-cue-arrow svg {
  width: 18px;
  height: 24px;
}

.scroll-cue-arrow {
  display: flex;
  color: var(--rust);
  animation: nudge-down 1.8s ease-in-out infinite;
}

@keyframes nudge-down {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(6px); opacity: 1; }
}

.carousel-track {
  display: flex;
  gap: 0;
  animation: marquee 22s linear infinite;
  animation-delay: 1.5s;
  width: max-content;
}

.credentials-carousel:hover .carousel-track {
  animation-play-state: paused;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.cred-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 3rem;
  border-right: 1px solid var(--line);
  min-width: 220px;
  flex-shrink: 0;
  gap: 6px;
}

.cred-card-wide {
  min-width: 340px;
}

.cred-num {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  color: var(--rust);
  letter-spacing: -0.03em;
  display: inline-block;
  font-variation-settings: "opsz" 144;
}

.cred-plus {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--rust);
  opacity: 0.75;
  margin-left: 2px;
  vertical-align: 0.35em;
  font-variation-settings: "opsz" 72;
  line-height: 1;
}

.cred-icon {
  font-size: 2rem;
  line-height: 1;
  color: var(--rust);
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

.cred-icon svg {
  display: block;
  height: 28px;
  width: auto;
}

/* AI card — "AI" text + sparkle icon side by side */
.cred-num--ai {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.cred-ai-label {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144;
}
.cred-ai-sparkle {
  color: var(--rust);
  opacity: 0.85;
  flex-shrink: 0;
}

.cred-word {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--graphite);
  text-transform: none;
  font-weight: 500;
}

.cred-footnote {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--stone);
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  .cred-card { min-width: 170px; padding: 0 2rem; }
  .cred-card-wide { min-width: 280px; }
  .cred-num { font-size: 2.25rem; }
}

.hero-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 720px) {
  .hero-body { grid-template-columns: 1.6fr 1fr; gap: 3rem; }
}

.hero-meta-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--stone);
  text-transform: uppercase;
  font-weight: 500;
  padding-top: 0.5rem;
}

.hero-meta-list .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.hero-meta-list .row span:last-child {
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 2px;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--navy);
  color: #FFFFFF;
}
.btn-primary:hover {
  background: var(--rust);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover {
  border-color: var(--text-primary);
  background: var(--cream-soft);
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--charcoal);
  transition: all 0.25s ease;
}
.btn-arrow:hover {
  color: var(--rust);
  border-color: var(--rust);
  gap: 14px;
}

.btn-cta {
  display: inline-flex;
  gap: 12px;
}

/* ============================================
   Work index — project rows with thumbnails
   ============================================ */
.work-index {
  border-top: 1px solid var(--line-strong);
  margin-top: 0;
}

.work-row {
  display: grid;
  grid-template-columns: 44px 140px 1fr auto;
  gap: 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: padding 0.3s ease;
  position: relative;
}

.work-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--cream-soft) 30%, var(--cream-soft) 70%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.work-row:hover::before { opacity: 0.8; }
.work-row:hover { padding-left: 1.5rem; padding-right: 1.5rem; }

.work-row:hover .work-title { color: var(--rust); }
.work-row:hover .work-arrow { transform: translateX(6px); color: var(--rust); }
.work-row:hover .work-thumb img,
.work-row:hover .work-thumb picture img { transform: scale(1.08); }

.work-number {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.05em;
}

/* Thumbnail frame */
.work-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.work-thumb img,
.work-thumb picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.work-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-soft);
}

.work-thumb-initials {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 38px;
  line-height: 1;
  color: var(--stone);
  letter-spacing: -0.01em;
  opacity: 0.55;
  font-variation-settings: "opsz" 144;
}

.work-content h3.work-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0 0 8px;
  transition: color 0.3s ease;
}

.work-content .work-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--stone);
  text-transform: uppercase;
}

.work-content .work-meta .dot { color: var(--mist); margin: 0 8px; }

.work-arrow {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--graphite);
  transition: all 0.3s ease;
}

@media (max-width: 720px) {
  .work-row { grid-template-columns: 30px 90px 1fr; gap: 1rem; }
  .work-arrow { display: none; }
}

@media (max-width: 480px) {
  .work-row { grid-template-columns: 30px 1fr; }
  .work-thumb { display: none; }
}

/* ============================================
   Case study — hero
   ============================================ */
.case-hero {
  padding: 10rem 0 4rem;
  border-bottom: 1px solid var(--line);
}

/* Mobile: body has padding-top: 60px to clear fixed nav, so case
   heroes don't need the desktop 10rem top padding. */
@media (max-width: 720px) {
  .case-hero {
    padding-top: 4rem;
  }
}

.case-hero-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--stone);
  text-transform: uppercase;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.case-hero-meta .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.case-hero-meta .tag::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--rust);
  border-radius: 50%;
}

.case-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
  .case-summary { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
}

.case-summary-block h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 10px;
  font-weight: 400;
}

.case-summary-block p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* ============================================
   Case study — sections
   ============================================ */
.case-section {
  padding: 5rem 0;
  border-bottom: 1px solid var(--line);
}

.case-section-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 3rem;
  align-items: baseline;
}

@media (min-width: 900px) {
  .case-section-header { grid-template-columns: 160px 1fr; gap: 3rem; }
}

.case-section-header .section-number {
  color: var(--rust);
  padding-top: 10px;
}

.case-section-header h2 {
  margin: 0;
}

.case-section-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 900px) {
  .case-section-body.indent { grid-template-columns: 160px 1fr; gap: 3rem; }
  .case-section-body.indent > :first-child { grid-column: 2; }
}

.case-section-body p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  max-width: 68ch;
}

/* Stat strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  padding: 2.5rem 0;
  margin: 2rem 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-value {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1;
  color: var(--rust);
  letter-spacing: -0.02em;
}

.stat-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}

/* Placeholder image blocks */
.ph-image {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.ph-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 20px,
      rgba(43, 165, 138, 0.04) 20px,
      rgba(43, 165, 138, 0.04) 21px
    );
}

.ph-image span { position: relative; z-index: 1; }

.ph-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (min-width: 720px) {
  .ph-grid.cols-2 { grid-template-columns: 1fr 1fr; }
}

.ph-image.tall { aspect-ratio: 4 / 5; }
.ph-image.wide { aspect-ratio: 21 / 9; }

/* Pull quote */
.pullquote {
  padding: 3rem 0;
  margin: 2rem 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  text-align: center;
}

.pullquote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 auto 1rem;
  max-width: 24ch;
}

.pullquote p em { color: var(--rust); font-style: italic; }

.pullquote cite {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  font-style: normal;
}

/* Process steps */
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 720px) {
  .process-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

.process-card {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 24px -12px rgba(11, 20, 35, 0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.process-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px rgba(11, 20, 35, 0.22);
}
/* Dark mode — softer shadow tuned for navy bg */
[data-theme="dark"] .process-card {
  box-shadow: none;
}
[data-theme="dark"] .process-card:hover {
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
}

.process-card-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--rust);
  letter-spacing: 0.05em;
}

.process-card h4 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.process-card p {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--graphite);
  margin: 0;
}

/* Next project teaser */
.next-project {
  padding: 5rem 0;
  background: var(--cream);
  position: relative;
  margin-top: 0;
}

.next-project-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1rem;
}

.next-project h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--text-primary);
  margin: 0 0 2rem;
  transition: color 0.3s ease;
}

.next-project:hover h2 { color: var(--rust); }
.next-project:hover .btn-arrow { gap: 14px; color: var(--rust); border-color: var(--rust); }

/* ============================================
   About page
   ============================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-top: 2rem;
}

@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1fr 1.5fr; gap: 5rem; }
}

.about-portrait {
  aspect-ratio: 4 / 5;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: sticky;
  top: 8rem;
}

.about-prose p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 1.5rem;
}

.about-prose p:first-child::first-letter {
  font-family: var(--serif);
  font-size: 4.5rem;
  font-weight: 400;
  float: left;
  line-height: 0.85;
  margin: 6px 12px 0 0;
  color: var(--rust);
}

.credentials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-strong);
}

.cred-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.cred-row:last-child { border-bottom: none; }

.cred-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

.cred-value {
  font-size: 14px;
  color: var(--ink);
}

.cred-value strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--text-primary);
  display: block;
  margin-bottom: 2px;
}

/* ============================================
   Contact page
   ============================================ */
.contact-hero {
  padding: 10rem 0 2rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-top: 3rem;
  margin-top: 3rem;
  border-top: 1px solid var(--line-strong);
}

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}

.contact-block h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 1rem;
  font-weight: 400;
}

.contact-block a {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-primary);
  transition: color 0.25s ease;
  display: inline-block;
  border-bottom: 1px solid transparent;
}

.contact-block a:hover {
  color: var(--rust);
  border-bottom-color: var(--rust);
}

/* ============================================
   Footer
   ============================================ */
footer {
  padding: 1.5rem var(--gutter);
  border-top: 1px solid rgba(11, 20, 35, 0.18);
  background: var(--paper);
  margin-top: 0;
}

[data-theme="dark"] footer {
  border-top-color: rgba(251, 248, 243, 0.18);
}

.footer-inner {
  max-width: 1640px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.footer-inner a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-inner a:hover { color: var(--rust); }

/* ============================================
   Reveal animations
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
.stagger.in > *:nth-child(3) { transition-delay: 0.19s; }
.stagger.in > *:nth-child(4) { transition-delay: 0.26s; }
.stagger.in > *:nth-child(5) { transition-delay: 0.33s; }
.stagger.in > *:nth-child(6) { transition-delay: 0.40s; }
.stagger.in > * { opacity: 0; transform: translateY(14px); }
.stagger.in > * { opacity: 1; transform: translateY(0); }

/* Selection */
::selection {
  background: var(--rust);
  color: var(--cream);
}

/* ============================================
   Section headers (shared across new sections)
   ============================================ */
.section-head {
  max-width: 720px;
  margin-bottom: 4rem;
}

.section-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 1.5rem;
}

.section-head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--rust);
}

.section-head .section-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--graphite);
  max-width: 60ch;
}

/* ============================================
   Services grid
   ============================================ */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

@media (min-width: 720px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
}

.service-card {
  background: var(--cream);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 0.25s ease;
  position: relative;
}

.service-card:hover {
  background: var(--cream-soft);
}

.service-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--rust);
}

.service-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 4px;
  font-variation-settings: "opsz" 72;
}

.service-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--graphite);
  margin: 0 0 10px;
  max-width: 48ch;
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-list li {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--graphite);
  padding-left: 14px;
  position: relative;
}

.service-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 1px;
  background: var(--rust);
}

/* ============================================
   Experience timeline
   ============================================ */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line-strong);
}

.timeline-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 860px) {
  .timeline-row {
    grid-template-columns: 180px 1fr;
    gap: 3rem;
  }
}

.timeline-date {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--stone);
  padding-top: 4px;
}

.timeline-body {
  min-width: 0;
}

.timeline-role {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.timeline-role h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0;
  font-variation-settings: "opsz" 72;
}

.timeline-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--stone);
  text-transform: uppercase;
}

.timeline-body p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  max-width: 68ch;
  margin: 0 0 14px;
}

.timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.timeline-tags span {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--navy);
  padding: 6px 14px;
  border-radius: 100px;
}

/* ============================================
   Contact cards
   ============================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 980px) {
  .contact-grid { grid-template-columns: repeat(4, 1fr); }
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 1.75rem 1.5rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  position: relative;
}

.contact-card:hover {
  background: var(--cream-soft);
  border-color: var(--rust);
  transform: translateY(-2px);
}

.contact-card-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.65;
}

.contact-card-value {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-primary);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.contact-card-arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-family: var(--mono);
  color: var(--rust);
  font-size: 14px;
  transition: transform 0.25s ease;
}

.contact-card:hover .contact-card-arrow {
  transform: translate(3px, -3px);
}

/* ============================================
   Theme toggle button
   ============================================ */
.theme-toggle {
  background: none;
  border: 1px solid var(--line);
  color: var(--graphite);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  margin-left: 8px;
  flex-shrink: 0;
}

.theme-toggle svg {
  width: 14px;
  height: 14px;
}

.theme-toggle:hover {
  color: var(--rust);
  border-color: var(--rust);
}

.theme-toggle .icon-moon { display: none; }
/* ============================================
   Dark mode — exact inversion of the light palette.
   Only 3 colors at play: navy (#0B1423), paper (#FBF8F3 / pure-white #FFFFFF), and red-orange (#FF3D00).
   ============================================ */
[data-theme="dark"] {
  --paper: #0B1423;            /* page bg flips to navy */
  --navy: #FBF8F3;             /* "ink" flips to paper-white (cards on dark sections, primary text) */
  --pale: #14202F;             /* lifted-navy used for cards-on-deeper-navy if any */

  /* Surfaces / cards — all collapse to paper-white in dark mode */
  --cream: #FBF8F3;            /* cards on dark sections become paper-white */
  --cream-soft: #F0EDE7;       /* hover wash on paper cards */
  --charcoal: #FBF8F3;         /* nav/footer/dark CTAs flip to paper */

  /* Text */
  --ink: #FBF8F3;              /* body text on dark bg = paper */
  --graphite: #FBF8F3;
  --stone: #FBF8F3;
  --text-primary: #FBF8F3;     /* primary text default flips to paper */
  --text-on-dark: #0B1423;     /* text on now-paper cards = navy */

  /* Accent stays the same red-orange */
  --rust: #FF3D00;
  --rust-deep: #FF5A1F;        /* slightly brighter on dark for visibility */
  --gold: #FF3D00;

  /* Lines now use paper-tint instead of navy-tint */
  --line: rgba(251, 248, 243, 0.12);
  --line-strong: rgba(251, 248, 243, 0.22);
  --mist: #B8BCC4;
}

/* Toggle icon swap */
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Nav/footer in dark mode: navy bg, paper text, red-orange accent on hover */
[data-theme="dark"] .nav {
  background: rgba(11, 20, 35, 0.92);
  border-bottom-color: rgba(251, 248, 243, 0.08);
}
[data-theme="dark"] .nav-brand,
[data-theme="dark"] .nav-links a {
  color: var(--paper-on-dark, #FBF8F3);
}
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a.active,
[data-theme="dark"] .nav-brand:hover,
[data-theme="dark"] .nav-brand.active {
  color: var(--rust);
}

/* Process card (paper bg + navy border in light) flips to: paper bg + navy text remains, navy border stays since both navy values exist */
[data-theme="dark"] .process-block .process-card {
  background: #FBF8F3;
  border-color: rgba(11, 20, 35, 0.15);
}
[data-theme="dark"] .process-block .process-card-title,
[data-theme="dark"] .process-block .process-card-body,
[data-theme="dark"] .process-block .process-card-num {
  color: #0B1423;
}

/* Work tile cards: white bg with navy border flips to paper card on navy bg */
[data-theme="dark"] .work-tile {
  background: #FBF8F3;
  border-color: rgba(11, 20, 35, 0.15);
}
[data-theme="dark"] .work-tile-title,
[data-theme="dark"] .work-tile-desc,
[data-theme="dark"] .work-tile-tags,
[data-theme="dark"] .work-tile-stats {
  color: #0B1423;
}
[data-theme="dark"] .work-tile-cover {
  background: #EEF2F6;
}

/* Contact cards: navy in light becomes paper in dark, with text flipped */
[data-theme="dark"] .contact-card {
  background: #FBF8F3;
}
[data-theme="dark"] .contact-card,
[data-theme="dark"] .contact-card * {
  --text-primary: #0B1423;
}

/* Hairlines: invert the navy-tint to paper-tint */
[data-theme="dark"] .services-process-separator {
  border-top: 2px dotted rgba(251, 248, 243, 0.32);
}
[data-theme="dark"] .process-divider {
  border-top-color: rgba(251, 248, 243, 0.18);
}

/* Footer mirror */
[data-theme="dark"] .footer-inner {
  background: var(--paper);
  color: var(--text-primary);
  border-top-color: rgba(251, 248, 243, 0.08);
}

/* Subtle noise overlay opacity tweak */
[data-theme="dark"] body::before {
  opacity: 0.03;
}

/* Cursor blend */
[data-theme="dark"] .cursor-dot {
  mix-blend-mode: screen;
}

/* Hero portrait frame in dark = paper card on navy */
[data-theme="dark"] .hero-classic-portrait {
  background-color: #FBF8F3;
}

/* Tags in dark mode — outlined paper-white, transparent fill */
[data-theme="dark"] .timeline-tags span {
  background: transparent;
  color: #FBF8F3;
  border-color: rgba(251, 248, 243, 0.55);
}

/* Dark mode: collapse the light-mode "tinted" alternating sections so
   the entire page reads as one solid deep navy — no more double-bg
   striping. Use var(--paper) to match the page bg exactly. */
[data-theme="dark"] .case-section-tinted {
  background: var(--paper);
}

/* Dark mode subnav: white idle, rust on hover and active */
[data-theme="dark"] a.case-subnav-link {
  color: var(--ink);
}
[data-theme="dark"] a.case-subnav-link:hover,
[data-theme="dark"] a.case-subnav-link.is-active {
  color: var(--rust);
}

/* ============================================
   Case study — refined layout
   ============================================ */

/* Case hero — bigger, more room to breathe */
.case-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
  font-variation-settings: "opsz" 144;
}

.case-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--rust);
}

.case-tagline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 1.5rem;
  max-width: 60ch;
}

/* Case meta — four-column summary */
.case-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 0 1.5rem;
}

@media (min-width: 640px) { .case-meta { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; } }
@media (min-width: 960px) { .case-meta { grid-template-columns: repeat(4, 1fr); } }

.case-meta-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-meta-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

.case-meta-value {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--text-primary);
  font-variation-settings: "opsz" 72;
  line-height: 1.2;
}

.case-meta-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--graphite);
  line-height: 1.35;
}

/* Hero image — full-bleed rectangle with neutral frame */
.case-hero-image {
  margin: 1rem auto 0;
  padding: 0 var(--gutter);
  max-width: 1100px;
}

.case-hero-image img,
.case-hero-image picture,
.case-hero-image picture img {
  width: 100%;
  height: auto;
  display: block;
}

/* GroAlgo hero — branded green border matching the hero art */
.case-hero-image--groalgo img {
  border: 1px solid #003E33;
  border-radius: 8px;
}

/* Impact strip */
.case-impact {
  padding: 2.5rem 0 2rem;
  border-top: 1px solid var(--line);
}

.impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 1rem;
}

@media (min-width: 720px) { .impact-grid { grid-template-columns: repeat(4, 1fr); } }

.impact-card {
  background: var(--paper);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.impact-number {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  color: var(--rust);
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144;
  display: inline-block;
}

.impact-plus {
  font-size: 0.6em;
  vertical-align: 0.3em;
  opacity: 0.75;
  margin-left: 1px;
}

.impact-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--graphite);
}

.impact-context {
  max-width: 75ch;
  margin: 2rem 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--graphite);
}

/* Case sections */
.case-section { padding: 2.5rem 0; }
.case-section-tinted { background: var(--cream); }

.case-section h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.875rem, 3.5vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0.25rem 0 0.75rem;
}

.case-section h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--rust);
}

.case-section .lead {
  max-width: 75ch;
  margin-bottom: 1.25rem;
}

/* Case-study body paragraphs — constrain to a readable measure (~75ch).
   Without this, paragraphs on wide screens can hit 110-120 chars per line,
   which is well past the comfortable reading range. Eyebrows, headings,
   and structural elements (figures, lists) are exempt — only direct prose
   inside the section's container gets the cap. */
.case-section .container-narrow > p,
.case-section .container > p {
  max-width: 75ch;
}

.case-figure-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--line);
}

/* Journey map SVG — transparent bg, thin border matching persona images.
   Constrained to ~80% width so the diagram doesn't dominate the page; centered.
   Uses currentColor for all text and strokes so the diagram adapts to its
   parent section: white on tinted (navy) bands, charcoal on cream bands. */
.journey-svg {
  width: 80%;
  max-width: 880px;
  margin: 0 auto;
  height: auto;
  display: block;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
  color: var(--text-primary);
}
@media (max-width: 768px) {
  .journey-svg { width: 100%; }
}

.case-figure-caption,
figcaption {
  font-family: var(--sans);
  font-size: 13px;
  font-style: italic;
  line-height: 1.6;
  color: var(--graphite);
  margin-top: 1rem;
  max-width: 64ch;
}

/* Users grid */
.users-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2rem;
}

@media (min-width: 860px) { .users-grid { grid-template-columns: repeat(3, 1fr); } }

.user-card {
  background: var(--paper);
  padding: 2rem 1.75rem;
}

.user-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--rust);
  letter-spacing: 0.08em;
}

.user-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 10px 0 12px;
  font-variation-settings: "opsz" 72;
}

.user-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--graphite);
  margin: 0;
}

/* Research blocks */
.research-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}

@media (min-width: 860px) {
  .research-blocks {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.research-block {
  padding: 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.research-block h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.375rem;
  color: var(--text-primary);
  margin: 0 0 0.75rem;
  font-variation-settings: "opsz" 72;
}

.research-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.research-list li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--graphite);
  padding-left: 18px;
  position: relative;
}

.research-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: var(--rust);
}

/* Opportunity list */
.opp-list { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 1.25rem; }

.opp-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.25rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--line);
}

.opp-item:first-child { border-top: 0; padding-top: 0; }

.opp-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--rust);
  letter-spacing: 0.08em;
  padding-top: 6px;
}

.opp-item h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--text-primary);
  margin: 0 0 8px;
  font-variation-settings: "opsz" 72;
}

.opp-item p { font-size: 15px; line-height: 1.65; color: var(--graphite); margin: 0; max-width: 68ch; }

/* Problem / Solution blocks */
.ps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
}

@media (min-width: 720px) {
  .ps-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

.ps-block {
  padding: 1.5rem 1.75rem;
  border: 0;
  background: var(--paper);
  margin-bottom: 0;
}

.ps-block-solution {
  background: var(--paper);
}

.ps-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 10px;
}

.ps-block p { font-size: 15.5px; line-height: 1.7; color: var(--ink); margin: 0; }

.ps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.ps-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-primary);
}
.ps-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--rust);
  font-weight: 600;
}
.ps-list strong {
  font-weight: 600;
}

/* Approach list */
.approach-list {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.approach-list li {
  counter-increment: step;
  padding: 1rem 1.25rem 1rem 3.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--graphite);
  position: relative;
}

.approach-list li strong {
  color: var(--text-primary);
  font-weight: 500;
}

.approach-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 1.25rem;
  top: 1rem;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--rust);
  letter-spacing: 0.05em;
}

/* Product modules */
.product-modules {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.5rem;
}

.product-module {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 960px) {
  .product-module { grid-template-columns: 340px 1fr; gap: 3rem; }
  .product-module:nth-child(even) { grid-template-columns: 1fr 340px; }
  .product-module:nth-child(even) .product-module-meta { order: 2; }
  .product-module:nth-child(even) .product-module-image { order: 1; }
}

.product-module-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--rust);
  letter-spacing: 0.08em;
}

.product-module-meta h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 8px 0 14px;
  font-variation-settings: "opsz" 72;
}

.product-module-meta p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--graphite);
  margin: 0;
  max-width: 42ch;
}

.product-module-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--line);
}

/* Challenge list */
.challenge-list { display: flex; flex-direction: column; gap: 0; margin-top: 1.25rem; }

.challenge-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.25rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

.challenge-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--rust);
  letter-spacing: 0.08em;
  padding-top: 6px;
}

.challenge-item h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--text-primary);
  margin: 0 0 10px;
  font-variation-settings: "opsz" 72;
}

.challenge-item p { font-size: 15px; line-height: 1.65; color: var(--text-primary); margin: 0; max-width: 68ch; }

/* Trade-off list */
.tradeoff-list { display: flex; flex-direction: column; gap: 0; margin-top: 1.25rem; }

.tradeoff-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.25rem;
  padding: 1.75rem 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.tradeoff-item:first-child { border-top: 0; padding-top: 0; }

.tradeoff-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--rust);
  letter-spacing: 0.08em;
  padding-top: 6px;
}

.tradeoff-item h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.375rem;
  color: var(--text-primary);
  margin: 0 0 12px;
  font-variation-settings: "opsz" 72;
}

.tradeoff-item p { font-size: 15px; line-height: 1.7; color: var(--text-primary); margin: 0; max-width: 68ch; }

/* AI/ML cases */
.ai-cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}

@media (min-width: 860px) { .ai-cases { grid-template-columns: repeat(3, 1fr); } }

.ai-case {
  padding: 1.75rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.ai-case h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--text-primary);
  margin: 0 0 10px;
  font-variation-settings: "opsz" 72;
}

.ai-case p { font-size: 14.5px; line-height: 1.65; color: var(--graphite); margin: 0; }

/* Takeaway */
.takeaway-list { display: flex; flex-direction: column; gap: 0; margin-top: 1.25rem; }

.takeaway-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.25rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
}
.takeaway-item:first-child { border-top: 0; padding-top: 0; }

.takeaway-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--rust);
  letter-spacing: 0.08em;
  padding-top: 6px;
}

.takeaway-item h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.375rem;
  color: var(--text-primary);
  margin: 0 0 12px;
  font-variation-settings: "opsz" 72;
}

.takeaway-item p { font-size: 15px; line-height: 1.7; color: var(--text-primary); margin: 0; max-width: 68ch; }

/* Case next */
.case-next { background: var(--paper); border-top: 1px solid var(--line); }

.case-next-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 640px) { .case-next-links { grid-template-columns: 1fr 1fr; } }

.case-next-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2rem 2rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-primary);
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.case-next-link:hover {
  transform: translateY(-2px);
  border-color: var(--rust);
  background: var(--cream-soft);
}

.case-next-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

.case-next-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--text-primary);
  transition: color 0.25s ease;
  font-variation-settings: "opsz" 72;
}

.case-next-link:hover .case-next-title { color: var(--rust); }

/* ============================================
   Case study — back link
   ============================================ */
.case-back {
  padding: 6.5rem 0 0;
}

.case-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  text-decoration: none;
  padding: 8px 0;
  transition: color 0.25s ease, gap 0.25s ease;
}

.case-back-link svg {
  transition: transform 0.25s ease;
}

.case-back-link:hover {
  color: var(--rust);
  gap: 12px;
}

.case-back-link:hover svg {
  transform: translateX(-3px);
}

/* When the back link is present, the case hero needs less top padding */
.case-back + .case-hero {
  padding-top: 2rem;
}

/* ============================================
   Case study — design approach prose
   ============================================ */
.approach-prose {
  max-width: 75ch;
  margin-top: 1.5rem;
}

.approach-prose p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-primary);
  margin: 0 0 1.25rem;
}

.approach-prose p:last-child { margin-bottom: 0; }

.approach-outcome {
  margin-top: 1.75rem !important;
  padding: 1.5rem 1.75rem;
  background: var(--cream-soft);
  border-left: 2px solid var(--rust);
  border-radius: 2px;
}

.approach-outcome-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 8px;
}

/* ============================================
   Case study — hero metrics line
   ============================================ */
.case-hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 1rem 0 3rem;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--graphite);
}

.case-hero-metrics .metrics-sep {
  color: var(--stone);
  opacity: 0.6;
}

/* ============================================
   Case study — divider between exec summary & deep dive
   ============================================ */
.case-divider {
  padding: 1.5rem 0 0.25rem;
  background: var(--paper);
}

.case-divider-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter, 2rem);
}

.case-divider-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  white-space: nowrap;
}

.case-divider-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ============================================
   Case study — double-diamond figure (full width)
   ============================================ */
.dd-figure {
  margin: 3rem 0 0;
  padding: 0;
}

/* Full-width variant: diagram breaks out of narrow container but stays within page max */
.dd-figure-full {
  max-width: 1100px;
  margin: 3.5rem auto 0;
  padding: 0 var(--gutter, 2rem);
}

/* Inline SVG — currentColor adapts to theme via color property */
.dd-svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  color: var(--text-primary);
}

/* Design Thinking figure (MLS) — same pattern as dd-figure */
.dt-figure {
  margin: 3rem 0 0;
  padding: 0;
}

.dt-figure-full {
  max-width: 1100px;
  margin: 3.5rem auto 0;
  padding: 0 var(--gutter, 2rem);
}

.dt-svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  color: var(--text-primary);
}

/* ============================================================================
   Mobile-only vertical Design Thinking phases.
   Renders below the SVG (which is hidden on mobile) so each phase gets
   full mobile width and readable type.
   ============================================================================ */
.dt-vertical {
  display: none;             /* hidden on desktop — SVG renders instead */
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  counter-reset: dt-phase;
}
.dt-phase {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.25rem 0;
}
/* Connector line down the left rail between phases */
.dt-phase + .dt-phase::before {
  content: '';
  position: absolute;
  top: -1.25rem;
  left: 27px;                /* center of the 56px num column */
  width: 2px;
  height: 1.25rem;
  background: var(--rust);
  opacity: 0.6;
}
.dt-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--text-primary);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  background: transparent;
}
.dt-phase-card {
  padding-top: 0.4rem;
}
.dt-phase-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  margin: 0 0 0.4rem;
  color: var(--text-primary);
  line-height: 1.1;
}
.dt-phase-body {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-primary);
  opacity: 0.85;
  margin: 0;
}
.dt-vertical-footer {
  display: none;             /* mobile-only — show only when .dt-vertical shows */
  justify-content: space-between;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(11, 20, 35, 0.18);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.7;
}
[data-theme="dark"] .dt-vertical-footer {
  border-top-color: rgba(251, 248, 243, 0.22);
}

/* Mobile: hide the SVG, show the vertical version */
@media (max-width: 767px) {
  .dt-figure .dt-svg { display: none; }
  .dt-vertical { display: block; }
  .dt-vertical-footer { display: flex; }
}

/* Legacy hook in case any .dd-image remains */
.dd-image {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* The approach section needs overflow hidden to contain the wider figure */
.case-section-approach {
  overflow: hidden;
}


/* ---------- SYNTHESIS ARTIFACT HEADINGS (mls case study) ---------- */
.synth-heading {
  font-family: var(--serif, Fraunces, Georgia, serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.375rem;
  color: var(--text-primary);
  margin: 2.5rem 0 0.75rem;
  letter-spacing: -0.005em;
}


/* Right-aligned content for the "Next" card in case-next */
.case-next-link-right {
  text-align: right;
}

/* Back link row below the prev/next grid */
.case-next-back {
  margin-top: 2.25rem;
  text-align: center;
}


/* ---------- GROALGO VOICE OF USERS QUOTES ---------- */
.groalgo-quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .groalgo-quotes { grid-template-columns: 1fr 1fr 1fr; }
}
.groalgo-quote {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.5rem 1.75rem;
  background: var(--paper);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.groalgo-quote p {
  font-family: var(--serif, Fraunces, Georgia, serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.groalgo-quote cite {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
  font-style: normal;
}


/* ---------- FIGMA PROTOTYPE CTA (GroAlgo case study) ---------- */
.figma-prototype-cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 1.5rem 1.75rem;
  background: transparent;
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  max-width: 640px;
}
.figma-prototype-cta:hover {
  border-color: var(--rust);
  transform: translateY(-1px);
}
.figma-prototype-cta-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
}
.figma-prototype-cta-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-primary);
}
.figma-prototype-cta-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
  color: var(--rust);
  margin-left: 4px;
}
.figma-prototype-cta:hover .figma-prototype-cta-arrow { transform: translateX(3px); }
.figma-prototype-cta-sub {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-primary);
  opacity: 0.7;
  margin-top: 2px;
}

/* Small inline "Open in Figma" link under each product figure caption */
.figma-inline-link {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.figma-inline-link:hover { color: var(--rust-deep); text-decoration: underline; }

/* Generic inline link style (used in the product section lead) */
.inline-link {
  color: var(--rust);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.inline-link:hover { color: var(--rust-deep); }


/* ---------- RESEARCH CASE STUDY — inline meta line ---------- */
.research-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--stone);
  margin-top: 1.5rem;
  letter-spacing: 0.02em;
}
.research-meta-label {
  color: var(--rust);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  margin-right: 4px;
}
.research-meta-sep {
  margin: 0 10px;
  opacity: 0.5;
}


/* ---------- GROALGO ASYMMETRIC PRODUCT PANELS ---------- */
/* Wider panel wrapper — gives phones more horizontal room than the narrow text columns */
.groalgo-feature-wrap {
  max-width: 1558px;
  margin-left: 0;
  margin-right: 0;
  padding: 0 var(--gutter);
}

.groalgo-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3.5rem;
  align-items: center;
  padding: 2rem;
  margin-top: 2.5rem;
}
.groalgo-feature:first-of-type {
  margin-top: 2rem;
}
@media (max-width: 768px) {
  .groalgo-feature {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1.5rem 1rem;
  }
  /* Always show the phone above the text on mobile, regardless of the
     desktop phones-left / phones-right variant. */
  .groalgo-feature-phones { order: 0; }
  .groalgo-feature-text   { order: 1; }
}

/* Phones-right variant: flip the column order so text sits left, phone right.
   Desktop only — on mobile the single-column stack defined above still wins,
   because we only override the columns when there's enough width. */
@media (min-width: 769px) {
  .groalgo-feature-phones-right {
    grid-template-columns: 1fr 1.4fr;
  }
}

/* Phones column: single/two/three-phone variants.
   Single-phone uses a height cap. Multi-phone variants size by width so
   the row stays within the column and all phones render at identical scale.
   Internal padding keeps all phone variants equally inset from column edges. */
.groalgo-feature-phones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}
.groalgo-feature-phones img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Single phone — height-capped, fills its column. */
.groalgo-feature-phones--one img {
  max-width: 100%;
  max-height: 650px;
}

/* Two phones — share the column width, but cap height so panel doesn't dominate */
.groalgo-feature-phones--two {
  gap: 1rem;
}
.groalgo-feature-phones--two img {
  flex: 1 1 0;
  min-width: 0;
  max-width: calc((100% - 1rem) / 2);
  max-height: 650px;
  height: auto;
}

/* Three phones — rendered as a single-position slideshow with slide-in transitions.
   Each screen slides in from the right, holds, then exits left. */
.groalgo-feature-phones--slideshow {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.groalgo-slideshow {
  position: relative;
  aspect-ratio: 1386 / 2934;
  height: 650px;
  max-height: 650px;
  max-width: 100%;
  overflow: hidden;
}
.groalgo-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateX(110%);
  animation: groalgo-slide-in-out 9s infinite;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
.groalgo-slide--1 { animation-delay: 0s; }
.groalgo-slide--2 { animation-delay: 3s; }
.groalgo-slide--3 { animation-delay: 6s; }

@keyframes groalgo-slide-in-out {
  0%   { transform: translateX(110%); }
  8%   { transform: translateX(0); }
  30%  { transform: translateX(0); }
  37%  { transform: translateX(-110%); }
  100% { transform: translateX(-110%); }
}

/* Pause on hover so viewers can inspect a screen */
.groalgo-feature-phones--slideshow:hover .groalgo-slide {
  animation-play-state: paused;
}

/* Accessibility: hold the first slide for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .groalgo-slide {
    animation: none;
    transform: none;
  }
  .groalgo-slide--1 { transform: translateX(0); }
  .groalgo-slide--2,
  .groalgo-slide--3 { display: none; }
}

@media (max-width: 768px) {
  .groalgo-feature-phones--one img { max-height: 440px; }
}

/* Text column */
.groalgo-feature-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.groalgo-feature-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
}
.groalgo-feature-heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.groalgo-feature-body {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--graphite);
  margin: 0;
}
.groalgo-feature-text .figma-inline-link {
  margin-top: 0.5rem;
  margin-left: 0;
  align-self: flex-start;
  color: var(--rust);
}
.groalgo-feature-text .figma-inline-link:hover { color: var(--rust-deep); }

/* ============================================
   Personas — stacked carousel with arrows
   ============================================ */
.personas-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.personas-carousel {
  position: relative;
  padding: 0 5.5rem;   /* room for arrow buttons + breathing space from the active card */
}

.carousel-viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 580px;
  width: 100%;
  overflow: visible;   /* let cards peek outside */
}

.carousel-card {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 4px 18px rgba(58, 63, 61, 0.06);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease;
  will-change: transform, opacity;
  transform: scale(0.82);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.carousel-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Previous (left peek, behind) */
.carousel-card.is-prev {
  transform: translateX(-52%) scale(0.82);
  opacity: 0.35;
  z-index: 1;
}

/* Active (centered, front, full size) */
.carousel-card.is-active {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
  box-shadow: 0 18px 48px rgba(58, 63, 61, 0.14);
}

/* Next (right peek, behind) */
.carousel-card.is-next {
  transform: translateX(52%) scale(0.82);
  opacity: 0.35;
  z-index: 1;
}

/* Arrow buttons */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(58, 63, 61, 0.08);
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.carousel-arrow:hover {
  background: var(--rust);
  color: #FFFFFF;
  border-color: var(--rust);
}
.carousel-arrow:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}
.carousel-arrow--prev { left: 0; }
.carousel-arrow--next { right: 0; }

/* Dark mode: drop the card's white background so dashboard/persona
   images don't sit inside a white box on the dark surface. */
[data-theme="dark"] .carousel-card {
  background: transparent;
  box-shadow: none;
}
[data-theme="dark"] .carousel-card.is-active {
  box-shadow: none;
}

/* Dark mode: force white background with deep navy icon so the arrows
   stay clearly visible against dark surfaces. */
[data-theme="dark"] .carousel-arrow {
  background: #FFFFFF;
  color: #0B1423;
  border-color: #FFFFFF;
}
[data-theme="dark"] .carousel-arrow:hover {
  background: var(--rust);
  color: #FFFFFF;
  border-color: var(--rust);
}

/* Dots indicator */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stone);
  opacity: 0.35;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.carousel-dot.is-active {
  opacity: 1;
  transform: scale(1.4);
  background: var(--charcoal);
}

/* Mobile */
@media (max-width: 768px) {
  .personas-carousel { padding: 0 3.25rem; }
  .carousel-arrow { width: 36px; height: 36px; }
  .carousel-card.is-prev,
  .carousel-card.is-next {
    transform: translateX(0) scale(0.9);
    opacity: 0;
  }
  /* Bigger active card so content is legible */
  .case-groalgo .personas-wrap {
    max-width: 100%;
    padding: 0 var(--gutter);
  }
  .case-groalgo .carousel-viewport {
    max-height: none;
    aspect-ratio: 1 / 1.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-card { transition: opacity 0.2s ease; }
}

/* ============================================
   Case study — sticky sub-bar (in-page nav only)
   ============================================ */
.case-subbar {
  position: sticky;
  top: 60px;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  margin: 0 0 0.5rem 0;
}

/* Subbar is mobile-only — desktop has the .case-sidenav left rail.
   Hide it from the layout (and from assistive tech) above 768px. */
@media (min-width: 768px) {
  .case-subbar { display: none; }
}

[data-theme="dark"] .case-subbar {
  background: var(--paper);
}

/* Content-gutter-aligned: max-width matches page content; padding matches gutter */
.case-subbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;              /* center everything vertically */
  min-height: 56px;
  /* Prevent flex children's intrinsic content width from stretching the
     subbar (and the whole page) wider than the viewport. The horizontal
     scroll must stay contained inside .case-subnav-inner only. */
  min-width: 0;
  max-width: min(1100px, 100%);
}

/* Case-study name on the left of the subbar — always visible while scrolling,
   so the reader knows which case study they're in. Links to #overview. */
.case-subbar-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 1.25rem;
  margin-right: 1.25rem;
  border-right: 1px solid var(--line-strong);
  align-self: center;
  transition: color 0.2s ease;
}
.case-subbar-label:hover { color: var(--rust); }

.case-subnav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;              /* center nav inside the bar */
  align-self: stretch;              /* but stretch full height for the underline */
  /* Without min-width:0, the flex child won't shrink below its content
     width, which lets the inner scroll container leak its overflow up
     to the body and break the whole page's horizontal scroll. */
  min-width: 0;
}
.case-subnav-inner {
  display: flex;
  align-items: stretch;             /* stretch tabs full strip height for bottom-border underline */
  gap: 2.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: 100%;
}
.case-subnav-inner::-webkit-scrollbar { display: none; }

/* Note: these tabs also carry .case-sidenav-link (which is defined later
   and sets opacity: 0.55). Use a compound selector to keep specificity
   high enough that source-order doesn't override the values below. */
a.case-subnav-link {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
  padding: 0;
  position: relative;
  transition: color 0.2s ease, font-weight 0.2s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
a.case-subnav-link:hover { color: var(--rust); }

a.case-subnav-link.is-active {
  color: var(--rust);
  font-weight: 700;
}
a.case-subnav-link.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 2px;
  background: currentColor;
}

.case-section[id] { scroll-margin-top: 130px; }
header[id] { scroll-margin-top: 80px; }

.case-subbar + * { padding-top: 0; }
/* Tighten the hero's top padding when the subbar is present.
   Floating nav sits between subbar and hero but is position:fixed so it
   doesn't affect flow. We target case-hero globally since every case study
   now has a subbar above it. */
.case-subbar ~ header.case-hero,
.case-subbar + .case-floating-nav + header.case-hero {
  padding-top: 4rem;
}

@media (max-width: 900px) {
  .case-subbar-inner { min-height: 48px; }
  .case-subnav-inner { gap: 1.5rem; }
  .case-subnav-link { font-size: 10px; }
  .case-subbar-label {
    font-size: 10px;
    padding-right: 0.85rem;
    margin-right: 0.85rem;
  }
}

/* ============================================
   Reading progress bar (case studies)
   Thin rust line pinned to viewport top. Tracks
   scroll through the full page so readers always
   see how deep they are in the current case study.
   ============================================ */
.case-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 101;               /* above main nav (100) */
  background: transparent;
  pointer-events: none;
}
.case-progress-bar {
  height: 100%;
  width: 100%;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.08s linear;
  will-change: transform;
}

/* ============================================
   Floating prev/next case study nav
   Fixed on the left and right edges of the viewport,
   mid-height. Hover expands to show label.
   ============================================ */
.case-floating-nav {
  pointer-events: none;
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  justify-content: space-between;
  padding: 0 1.25rem;
}

.case-floating-nav-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(58, 63, 61, 0.08);
  transition: background 0.2s ease, color 0.2s ease, max-width 0.3s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.2s ease;
  overflow: hidden;
  max-width: 48px;                /* collapsed to just the arrow */
}

/* Prev button: arrow first, label after — arrow naturally visible at collapsed width.
   Next button: label first, arrow after — use justify-content to anchor arrow right. */
.case-floating-nav-btn--next {
  justify-content: flex-end;
}

.case-floating-nav-btn:hover,
.case-floating-nav-btn:focus-visible {
  background: var(--charcoal);
  color: var(--paper);
  border-color: var(--text-primary);
  max-width: 260px;
  box-shadow: 0 10px 24px rgba(58, 63, 61, 0.18);
}

.case-floating-nav-btn:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

.case-floating-nav-arrow {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.case-floating-nav-label {
  opacity: 0;
  transition: opacity 0.25s ease 0.05s;
  white-space: nowrap;
  flex-shrink: 0;
}
.case-floating-nav-btn:hover .case-floating-nav-label,
.case-floating-nav-btn:focus-visible .case-floating-nav-label {
  opacity: 1;
}

[data-theme="dark"] .case-floating-nav-btn {
  background: #FFFFFF;
  color: #0B1423;
  border-color: #FFFFFF;
}
[data-theme="dark"] .case-floating-nav-btn:hover,
[data-theme="dark"] .case-floating-nav-btn:focus-visible {
  background: var(--rust);
  color: #FFFFFF;
  border-color: var(--rust);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Light mode + button hovering over a dark section: switch the pill to
   pure white with a navy arrow so the control reads cleanly against the
   dark background. JS sets data-on-dark on .case-floating-nav based on
   the underlying section's background luminance. */
.case-floating-nav[data-on-dark="true"] .case-floating-nav-btn {
  background: #FFFFFF;
  color: #0B1423;
  border-color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.case-floating-nav[data-on-dark="true"] .case-floating-nav-btn:hover,
.case-floating-nav[data-on-dark="true"] .case-floating-nav-btn:focus-visible {
  background: var(--rust);
  color: #FFFFFF;
  border-color: var(--rust);
}

@media (max-width: 760px) {
  .case-floating-nav { padding: 0 0.75rem; }
  .case-floating-nav-btn { padding: 0.6rem 0.75rem; max-width: 40px; }
  .case-floating-nav-btn:hover,
  .case-floating-nav-btn:focus-visible { max-width: 200px; }
  .case-floating-nav-label { font-size: 10px; }
}

/* ============================================
   Prev/Next project navigation (top compact + bottom full)
   ============================================ */
.case-prevnext {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.case-prevnext a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  text-decoration: none;
  transition: color 0.2s ease;
}
.case-prevnext a:hover { color: var(--text-primary); }
.case-prevnext a .label-detail {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-primary);
  margin-left: 0.5rem;
}
.case-prevnext .prev { justify-self: start; }
.case-prevnext .next { justify-self: end; margin-left: auto; }

/* Top compact — just shows labels (← Prev  |  Next →) */
.case-prevnext--top {
  border-bottom: 1px solid var(--line);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.case-prevnext--top a .label-detail { display: none; }

/* Bottom full — shows project titles */
.case-prevnext--bottom {
  padding: 3rem var(--gutter);
  border-top: 1px solid var(--line);
  margin-top: 3rem;
}
.case-prevnext--bottom a {
  font-size: 11px;
}
.case-prevnext--bottom a .label-detail {
  font-size: 20px;
  display: inline-block;
  margin-top: 0.25rem;
  margin-left: 0;
}
.case-prevnext--bottom a {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.case-prevnext--bottom a.next { align-items: flex-end; }

@media (max-width: 560px) {
  .case-prevnext--bottom a .label-detail { font-size: 16px; }
}

/* ============================================
   GroAlgo diagrams — centered
   ============================================ */
.groalgo-hooked-figure {
  margin: 0 auto;
  max-width: 900px;
  text-align: center;
}
.groalgo-journey-figure {
  margin: 0 auto;
  max-width: 1280px;
  text-align: center;
}
.groalgo-hooked-diagram,
.groalgo-journey-diagram {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  color: var(--text-primary);
}

/* Aptviz feasibility/possibility study — inline SVGs.
   Text and borders use currentColor so they adapt to theme.
   Brand logos (feasibility study) and icons are embedded patterns
   and stay fixed, which is correct. */
.aptviz-study-figure {
  margin: 0 auto;
  max-width: 100%;
}
.aptviz-study-svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--text-primary);
}

/* Framework / Insight diagram — inherit section text color so currentColor
   strokes/fills are visible on both light bands (navy text on white) and
   tinted bands (white text on navy). Same approach as the study SVGs.
   Left-aligned to the section gutter (matches the design-approach diagram
   above it). Sized smaller so it doesn't dominate the section. */
.aptviz-framework {
  display: block;
  width: 100%;
  max-width: 850px;
  margin: 0;
  height: auto;
  color: var(--text-primary);
}
@media (max-width: 768px) {
  .aptviz-framework { width: 100%; }
}

/* Design approach diagram — sized larger (≈+30%) so the three-phase rhythm
   reads strongly as the section's anchor visual. */
.aptviz-approach-sketch {
  display: block;
  width: 100%;
  max-width: 1196px;
  margin: 0;
  height: auto;
  color: var(--text-primary);
}

/* Default: show the desktop version, hide the mobile version */
.aptviz-approach-sketch-mobile { display: none; }
.aptviz-approach-sketch-desktop { display: block; }

/* ============================================
   Responsive navigation (mobile)
   ============================================ */

/* Short/full brand variants — default to full */
.nav-brand-short { display: none; }
.nav-brand-full { display: inline; }

/* Hamburger — hidden on desktop */
.nav-hamburger {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.nav-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--charcoal);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 760px) {
  /* Swap brand text */
  .nav-brand-full { display: none; }
  .nav-brand-short { display: inline; font-weight: 600; letter-spacing: 0.02em; }

  /* Show hamburger */
  .nav-hamburger { display: inline-flex; }

  /* Convert nav-links into a slide-down menu that's hidden by default */
  .nav-links {
    position: fixed;
    top: 60px;
    left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(58, 63, 61, 0.08);
    flex-direction: column;
    align-items: stretch;
    padding: 0 var(--gutter);
    gap: 0.25rem;
    font-size: 14px;
    letter-spacing: 0.06em;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, visibility 0s linear 0.3s;
  }
  .nav-links.is-open {
    max-height: 400px;
    padding-top: 1rem;
    padding-bottom: 1.25rem;
    visibility: visible;
    transition: max-height 0.3s ease, padding 0.3s ease, visibility 0s;
  }
  .nav-links a {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line-soft, rgba(58, 63, 61, 0.08));
  }
  .nav-links a:last-of-type {
    border-bottom: none;
  }
  .nav-links a.active {
    color: var(--rust);
    padding-left: 0.75rem;
    border-left: 2px solid var(--rust);
  }
  .nav-links a.active::after {
    display: none;
  }

  /* Theme toggle inside the menu — keep it at the end */
  .theme-toggle {
    align-self: flex-start;
    margin: 0.5rem 0 0 0;
  }

  /* Dark-mode slide-down menu bg — scoped to mobile so it doesn't
     paint a patch around the desktop nav-links on case studies */
  [data-theme="dark"] .nav-links {
    background: var(--paper);
  }
}

[data-theme="dark"] .nav-hamburger span { background: var(--charcoal); }

/* ============================================
   Subbar overflow on mobile — edge fade + horizontal scroll
   ============================================ */
@media (max-width: 760px) {
  .case-subbar {
    /* Add a soft fade on the right edge to hint there's more content */
    position: sticky;
    top: 60px;
  }
  .case-subbar::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
  }
  [data-theme="dark"] .case-subbar::after {
    background: linear-gradient(to right, rgba(11, 20, 35, 0), #0B1423);
  }
  .case-subbar-inner {
    min-height: 44px;
    padding-right: 2rem;          /* extra room so last tab isn't under the fade */
  }
  /* Hide the case-study name on the left of the subbar on mobile —
     the page title in the hero already establishes which case study
     this is, and removing it gives the tabs more room. */
  .case-subbar-label { display: none; }
  .case-subnav-inner { gap: 1.25rem; }
  /* Specificity has to beat .case-sidenav-link (13.5px) which is also on
     these elements and is defined later in the stylesheet. */
  a.case-subnav-link.case-sidenav-link {
    font-size: 9.5px;
    letter-spacing: 0.1em;
    line-height: 1;
  }
}

/* ============================================
   Image lightbox (case studies)
   Click any product image to open a fullscreen
   overlay. Close by clicking outside, pressing
   Esc, or clicking the close button.
   ============================================ */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.image-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.image-lightbox-img {
  max-width: min(1400px, 95%);
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}
.image-lightbox-caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  max-width: 720px;
  margin: 1.25rem 0 0;
  padding: 0 1rem;
  line-height: 1.5;
}
.image-lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.image-lightbox-close:hover,
.image-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
  outline: none;
}

/* Zoomable image affordance — cursor hint on hover */
.is-zoomable { cursor: zoom-in; }

@media (max-width: 720px) {
  .image-lightbox { padding: 2rem 1rem; }
  .image-lightbox-close {
    top: 0.75rem;
    right: 0.75rem;
    width: 40px;
    height: 40px;
  }
  .image-lightbox-caption { font-size: 10px; }
}

/* ============================================
   MLS Final Product features
   Mirrors the groalgo-feature alternating-layout pattern
   but tuned for landscape desktop screenshots rather than
   portrait phone shots.
   ============================================ */
.product-feature-wrap {
  max-width: 1558px;
  margin-left: 0;
  margin-right: 0;
  padding: 0 var(--gutter);
}
.product-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3.5rem;
  align-items: center;
  padding: 2rem;
  background: transparent;
  border: 1px solid #0B1423;
  margin-top: 2.5rem;
}
.product-feature:first-of-type {
  margin-top: 2rem;
}
/* Credentials carousel — lifted shade in dark mode so it reads as a distinct
   strip against the near-black page bg (vs. dark-on-dark disappearing). */
[data-theme="dark"] .credentials-carousel {
  background: #2A302E;
}
[data-theme="dark"] .credentials-carousel .cred-card {
  border-right-color: rgba(255, 255, 255, 0.08);
}

/* Dark mode: navy border becomes paper-white so it shows on dark bg */
[data-theme="dark"] .product-feature {
  border-color: var(--paper-on-dark, #FBF8F3);
}

/* Image-left: wider column on the left (default).
   Image-right: flip column widths so image stays in the wider track. */
.product-feature-image-right {
  grid-template-columns: 1fr 1.4fr;
}

@media (max-width: 768px) {
  .product-feature,
  .product-feature-image-right {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
  }
  /* On mobile the alternating layout always stacks image-on-top,
     text-below — keeps the rhythm consistent and eliminates the broken
     narrow-text-column case. */
  .product-feature-image-right .product-feature-image {
    order: -1;
  }
}

/* Image column — landscape screenshots, fill the column */
.product-feature-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  overflow: hidden;
}
.product-feature-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text column */
.product-feature-text {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.product-feature-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
}
.product-feature-heading {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0;
}
.product-feature-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--graphite);
  margin: 0;
  max-width: 50ch;
}
@media (max-width: 768px) {
  .product-feature-heading { font-size: 24px; }
}

/* ============================================
   Role rotator — swaps the hero role text
   Letters fade-up on swap, reduced-motion safe.
   ============================================ */
.hero-role-text[data-rotator] {
  display: inline-flex;
  position: relative;
}
.hero-role-text[data-rotator] .hero-role-word {
  display: inline-block;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hero-role-text[data-rotator].is-out .hero-role-word {
  opacity: 0;
  transform: translateY(-6px);
}
.hero-role-text[data-rotator].is-in .hero-role-word {
  animation: roleIn 0.4s ease both;
}
@keyframes roleIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-role-text[data-rotator] .hero-role-word { transition: none; animation: none; }
}

/* ============================================
   Hero headline — word-by-word reveal on load
   ============================================ */
.hero-headline .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  animation: wordRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes wordRise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-headline .word { opacity: 1; transform: none; animation: none; }
}

/* ============================================
   Magnetic CTA button — handled in JS via transform
   This rule just ensures smooth return when JS sets transform: ''
   ============================================ */
[data-magnetic] {
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  [data-magnetic] { transition: none; }
}

/* ============================================================================
   STAGE 2 — New centered hero
   ============================================================================ */

.hero-centered {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 0;
}

.hero-centered .container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-centered-stack {
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
  padding: 4rem 0 3rem;
}

.hero-portrait-mini {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.4);
}

.hero-portrait-mini .portrait-frame {
  width: 100%;
  height: 100%;
  background-image: url('assets/portrait-avatar.jpg');
  background-size: cover;
  background-position: center top;
  border-radius: 50%;
}

.hero-intro-line {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--graphite);
  margin: 0 0 2rem;
  line-height: 1.4;
}

.hero-intro-line .hero-role-text {
  color: var(--rust);
  font-weight: 700;
}

.hero-intro-line .hero-intro-sep {
  color: var(--stone);
  margin: 0 0.5rem;
  opacity: 0.6;
  font-weight: 400;
}

.hero-intro-line .hero-intro-name,
.hero-intro-line .hero-intro-loc {
  color: var(--text-primary);
}

.hero-headline-centered {
  text-align: center;
  margin: 0 0 1.5rem;
}

.hero-subline {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--graphite);
  max-width: 60ch;
  margin: 0 auto 2.5rem;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.hero-cta-status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-cta-status .hero-role-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 12px var(--rust);
  animation: dot-pulse 2.4s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

@media (max-width: 720px) {
  .hero-centered-stack { padding: 3rem 0 2rem; }
  .hero-intro-line {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 16px;
  }
  .hero-intro-sep { display: none; }
  .hero-cta-row { flex-direction: column; gap: 1.5rem; }
}

/* ============================================================================
   STAGE 3 — Pill-strip carousel (replaces marquee)
   ============================================================================ */

.cred-strip {
  margin-top: 0;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  overflow: hidden;
  position: relative;
  /* Soft fade-in/out at the edges so marquee text doesn't slam against the
     viewport edge when entering or leaving view. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
}

.cred-strip-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: cred-marquee 35s linear infinite;
  animation-delay: 1.5s;
  will-change: transform;
}

.cred-strip:hover .cred-strip-track {
  animation-play-state: paused;
}

@keyframes cred-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.cred-strip .cred-strip-plus {
  color: var(--rust);
  font-size: 16px;
  flex: 0 0 auto;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transform: translateY(2px);  /* drop asterisk down to align with item caps */
}

.cred-strip .cred-strip-item {
  flex: 0 0 auto;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.cred-strip .cred-strip-item:hover {
  color: var(--rust);
}

@media (prefers-reduced-motion: reduce) {
  .cred-strip-track {
    animation: none;
    transform: translateX(0);
  }
}

@media (max-width: 720px) {
  .cred-strip { padding: 0.875rem 0; }
  .cred-strip-track { gap: 1rem; animation-duration: 36s; }
}

/* ============================================================================
   STAGE 4 — Selected Works (stacking cards, full-viewport pin, no inner anims)
   ============================================================================ */

.work-stack-section {
  padding: 1.5rem 0 0;
  position: relative;
}

.work-stack-header {
  background: var(--paper);
  padding: 0.5rem 0 0.25rem;
  margin-bottom: 0.5rem;
}

.work-stack-header > .container {
  max-width: 1100px;
}

.work-stack-header .eyebrow {
  margin-bottom: 0.5rem;
}

/* The stack itself — children are sticky, each takes ~100vh of scroll */
.work-stack {
  position: relative;
  /* Bottom padding so the last card has a stop after pinning */
  padding-bottom: 8rem;
}

.work-item {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  /* No bg — wrapper is just a sticky positioning container; the card inside is what's visible */
}

/* Stagger each successive card lower so previous cards peek out at top */
.work-item:nth-child(1) { top: 0; z-index: 1; }
.work-item:nth-child(2) { top: 16px; z-index: 2; }
.work-item:nth-child(3) { top: 32px; z-index: 3; }
.work-item:nth-child(4) { top: 48px; z-index: 4; }
.work-item:nth-child(5) { top: 64px; z-index: 5; }

.work-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
  width: min(95vw, 1480px);
  margin: 0 auto;
  padding: 3rem 2.75rem;
  text-decoration: none;
  color: inherit;
  /* Navy card on white section — solid white-tint border + subtle shadow defines edges as cards stack */
  background: var(--cream);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  box-shadow: 0 12px 32px -12px rgba(11, 20, 35, 0.25);
}

.work-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  background: var(--cream-soft);
  border: 1px solid var(--line);
}

.work-cover .work-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* No transforms, no scale, no hover — static */
}

.work-info {
  padding: 0 0.5rem;
}

.work-num-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}

.work-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--rust);
  text-transform: uppercase;
}

.work-arrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--graphite);
  text-transform: uppercase;
}

.work-title {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text-on-dark);
  margin: 0 0 1.5rem;
}

.work-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.work-tags li {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  white-space: nowrap;
}

/* Sticky project counter — kept, updates as each card pins */
.work-sticky-counter {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--rust);
  background: rgba(11, 20, 35, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.75rem 1.25rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  z-index: 100;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.work-sticky-counter.work-counter-visible {
  opacity: 1;
  transform: translateY(0);
}

.work-sticky-num {
  font-size: 16px;
  font-weight: 500;
  color: var(--rust);
  min-width: 24px;
  text-align: right;
}

.work-sticky-sep {
  color: #FFFFFF;
  opacity: 0.6;
}

.work-sticky-total {
  color: #FFFFFF;
  font-size: 13px;
}

/* Mobile: disable stacking — cards become a normal vertical list */
@media (max-width: 900px) {
  .work-item {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 2rem 0;
    background: transparent;
  }

  .work-card {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 12px;
  }

  .work-stack { padding-bottom: 4rem; }

  .work-title {
    font-size: clamp(1.75rem, 5.5vw, 2.5rem);
  }

  .work-sticky-counter {
    bottom: 1rem;
    right: 1rem;
    font-size: 12px;
    padding: 0.6rem 1rem;
  }
  .work-sticky-num { font-size: 14px; }
}

/* ============================================================================
   Section dividers — subtle white hairlines between Selected Works/Services/Experience/Contact
   ============================================================================ */
#experience::before {
  content: '';
  display: block;
  width: 100%;
  max-width: 1280px;
  height: 0;
  margin: 0 auto;
  background: transparent;
  position: relative;
  top: -3rem;
}

@media (max-width: 720px) {
  #experience::before {
    max-width: calc(100% - 3rem);
    top: -2rem;
  }
}

/* ============================================================================
   Dark-surface text scoping
   When a surface uses navy bg (--cream or --charcoal), any text inside that
   would otherwise inherit a navy --text-primary needs to flip to white.
   These rules apply globally to descendants of dark surfaces.
   ============================================================================ */

/* Stacking work cards — navy block on white page */
.work-card,
.work-card * {
  --text-primary: #FFFFFF;
}
.work-card .work-num,
.work-card .work-arrow {
  /* These override their own colors (rust/graphite) so leave them alone */
}

/* Services and Contact cards on homepage — they use --cream (navy) bg in light mode */
.service-card,
.service-card *,
.contact-card,
.contact-card *,
.experience-card,
.experience-card * {
  --text-primary: #FFFFFF;
}

/* Case study tinted sections — same treatment */
.case-section-tinted,
.case-section-tinted * {
  --text-primary: #FFFFFF;
}

/* Dark mode — restore white --text-primary everywhere (already white globally) */
[data-theme="dark"] .work-card,
[data-theme="dark"] .work-card *,
[data-theme="dark"] .service-card,
[data-theme="dark"] .service-card *,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .contact-card *,
[data-theme="dark"] .experience-card,
[data-theme="dark"] .experience-card *,
[data-theme="dark"] .case-section-tinted,
[data-theme="dark"] .case-section-tinted * {
  --text-primary: #FFFFFF;
}

/* ============================================================================
   CASE STUDY LEGIBILITY PATCH
   Fixes navy-on-navy / white-on-white text inside tinted (navy) sections.
   Each tinted section paints white text via the rule above; white "island"
   cards inside need to flip back to navy text, and direct body copy that
   sits on the navy section bg needs to follow text-primary instead of
   hardcoded navy tokens.
   ============================================================================ */

/* 1. White-island cards inside tinted sections: text returns to navy in light. */
.case-section-tinted .ps-block,
.case-section-tinted .ps-block * {
  --text-primary: #0B1423;
}

/* 2. Dark mode: ps-block now sits on navy fill (--paper flips
   to navy in dark) — text returns to white. */
[data-theme="dark"] .case-section-tinted .ps-block,
[data-theme="dark"] .case-section-tinted .ps-block * {
  --text-primary: #FFFFFF;
}

/* 3. Solution block: give it a white card surface like Problem (rust border preserved). */
.ps-block-solution {
  background: var(--paper);
}

/* 4. Body copy that previously used hardcoded --ink / --graphite needs to
   follow --text-primary so it inherits the right color in tinted/dark contexts. */
.ps-block p,
.opp-item p,
.tradeoff-item p,
.product-feature-body {
  color: var(--text-primary);
}


/* ============================================================================
   HERO — John Carter style (massive headline, hairline, two-col bottom)
   ============================================================================ */

.hero-jc-stack {
  width: 100%;
  padding: 0.5rem var(--gutter, 2rem) 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  box-sizing: border-box;
}

.hero-portrait-mini {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.4);
}

.hero-portrait-mini .portrait-frame {
  width: 100%;
  height: 100%;
  background-image: url('assets/portrait-avatar.jpg');
  background-size: cover;
  background-position: center top;
  border-radius: 50%;
}

/* The headline itself — massive, all caps, lighter weight, with breathing room */
.hero-jc-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 8.5vw, 11rem);
  line-height: 1.1;             /* generous space between the 3 lines */
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0;
  text-align: left;
  width: 100%;
}

.hero-jc-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* Rotator wrapper — yellow accent, inherits headline size */
.hero-jc-rotator .hero-role-text[data-rotator],
.hero-jc-rotator .hero-role-text[data-rotator] .hero-role-word {
  color: var(--rust);
  font-weight: 500;
  font-size: inherit;
  font-style: normal;
  letter-spacing: inherit;
  display: inline-flex;
}

/* Hairline divider — sits between headline and bottom row */
.hero-jc-divider {
  width: 100%;
  height: 1px;
  border: none;
  background: var(--line-strong);
  margin: 0;
}

/* Bottom row — two columns, left is location/years, right is tagline */
.hero-jc-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--graphite);
}

.hero-jc-loc {
  margin: 0;
  text-align: left;
  color: #FFFFFF;
}

.hero-jc-tagline {
  margin: 0;
  text-align: right;
  color: #FFFFFF;
}

/* Mobile — stack the bottom row, scale headline */
@media (max-width: 720px) {
  .hero-jc-stack {
    padding: 3rem 0 1.5rem;
    gap: 2rem;
  }

  .hero-portrait-mini {
    width: 64px;
    height: 64px;
  }

  .hero-jc-headline {
    font-size: clamp(2.25rem, 11vw, 4rem);
    line-height: 0.98;
  }

  .hero-jc-bottom {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .hero-jc-tagline {
    text-align: left;
  }
}

/* Hero JC layout — top-aligned, content sits right below nav */
.hero-jc {
  position: relative;
  padding-top: 7rem;       /* LOCKED — nav-to-hero breathing room. Do not change. */
  padding-bottom: 4rem;
  background: var(--navy);
  color: var(--text-on-dark);
}

.hero-jc * {
  --text-primary: #FFFFFF;
}


/* Carousel as standalone row inside hero-jc — give it breathing space */
.hero-jc-stack > .cred-strip {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* ============================================================================
   Hero — Available for work status (inline next to location)
   ============================================================================ */
.hero-jc-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 1rem;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  white-space: nowrap;
  vertical-align: middle;
}

.hero-jc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rust);
  position: relative;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 var(--rust);
  animation: hero-jc-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-jc-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 61, 0, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 61, 0, 0);
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-jc-status-dot {
    animation: none;
  }
}

@media (max-width: 720px) {
  .hero-jc-status {
    margin-left: 0;
    margin-top: 0.5rem;
    display: inline-flex;
  }
}


/* ============================================================================
   Services — process section (sticky left intro + stacking right cards) + capabilities
   ============================================================================ */
.services-process-section {
  padding: 6rem 0 5rem;
  position: relative;
  z-index: 10;
  background: var(--navy);
  color: var(--text-on-dark);
}

.services-process-section * {
  --text-primary: #FFFFFF;
}

.services-process-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.services-process-intro {
  position: sticky;
  top: 9rem;
  align-self: start;
}

.services-process-intro-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.services-process-intro h2 {
  margin: 0;
}

.services-process-intro .lead {
  margin: 0;
  color: #FFFFFF;
  max-width: 480px;
}

.services-process-cta {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* Right column — stack of process cards */
.services-process-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.svc-process-item {
  position: sticky;
  height: auto;
  min-height: auto;
}

/* Stagger each successive card lower so previous cards peek out at top */
.svc-process-item:nth-child(1) { top: 9rem; z-index: 1; }
.svc-process-item:nth-child(2) { top: calc(9rem + 14px); z-index: 2; }
.svc-process-item:nth-child(3) { top: calc(9rem + 28px); z-index: 3; }
.svc-process-item:nth-child(4) { top: calc(9rem + 42px); z-index: 4; }

.svc-process-card {
  background: var(--pale);
  border: none;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 380px;
  position: relative;
  color: var(--navy);
}

.svc-process-card * {
  --text-primary: #0B1423;
  color: var(--navy);
}

.svc-process-card .svc-process-num {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--rust);
}

.svc-process-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
  margin-top: 4rem;
  line-height: 1.2;
}

.svc-process-body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}

/* My capabilities — pills appear after the process stack scrolls past */
.capabilities-block {
  margin-top: 8rem;
  padding-top: 4rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.5rem;
}

.capabilities-head {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.capabilities-head h2 {
  margin: 0;
}

.capabilities-head .lead {
  margin: 0;
  color: #FFFFFF;
}

.capabilities-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  max-width: 800px;
}

.capability-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  background: transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.capability-pill:hover {
  border-color: var(--rust);
  background: rgba(255, 61, 0, 0.08);
}

/* Mobile — stack column, kill sticky behavior */
@media (max-width: 900px) {
  .services-process-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .services-process-intro {
    position: static;
    top: auto;
  }

  .svc-process-item {
    position: static;
  }

  .svc-process-item:nth-child(n) {
    top: auto;
  }

  .svc-process-card {
    min-height: auto;
    padding: 2rem 1.5rem;
  }

  .svc-process-title {
    margin-top: 2.5rem;
  }

  .capabilities-block {
    margin-top: 4rem;
    padding-top: 2.5rem;
  }
}

/* Work card description — short context line that reads as a tagline of the title */
.work-desc {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: inherit;
  margin: 0;
  margin-top: 0.4rem;       /* tight to title — reads as part of it */
  margin-bottom: 1.75rem;   /* generous gap before tags so they feel separate */
  max-width: 50ch;
}

@media (max-width: 720px) {
  .work-desc {
    font-size: 14px;
  }
}



/* Section bg differentiation: Contact gets pale bg to differentiate from white Experience above */
#contact {
  background: var(--pale);
}

/* In dark mode the whole page is one solid navy — collapse the contact
   section's pale tint so it doesn't read as a separate band. */
[data-theme="dark"] #contact {
  background: var(--paper);
}

/* ============================================================================
   Selected Work — symmetric 2-column tile grid
   All 5 tiles are equal size; project 05 sits alone on row 3 (matches reference)
   ============================================================================ */
.work-grid-section {
  padding: 4rem 0 5rem;
  position: relative;
  background: var(--paper);
}

.work-grid-header {
  margin-bottom: 3rem;
}

.work-grid-header .eyebrow {
  margin-bottom: 0.5rem;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem 1.5rem;
}

/* Row 1 — 2 prominent tiles, each spanning 3 of 6 cols (50% width) */
.work-tile--row1 {
  grid-column: span 3;
}

.work-tile--row1 .work-tile-cover {
  aspect-ratio: 16 / 10;
}

/* Row 2 — 3 secondary tiles, each spanning 2 of 6 cols (33% width) */
.work-tile--row2 {
  grid-column: span 2;
}

.work-tile--row2 .work-tile-cover {
  aspect-ratio: 4 / 3;
  padding: 0.5rem;
}

/* All tiles share these base styles */
.work-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid rgba(11, 20, 35, 0.08);
  border-radius: 20px;
  padding: 1rem 1rem 1.5rem;
  box-shadow: 0 6px 24px -12px rgba(11, 20, 35, 0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.work-tile:hover {
  transform: translateY(-4px);
  border-color: var(--rust);
  box-shadow: 0 18px 40px -16px rgba(11, 20, 35, 0.22);
}

/* Cover = pale frame with image centered inside */
.work-tile-cover {
  position: relative;
  width: 100%;
  background: var(--pale);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  padding: 2.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-tile-img {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.6s ease;
}

.work-tile:hover .work-tile-img {
  transform: scale(1.03);
}

/* Info — vertical column. Top row = title + View Project. Below = desc + tags spanning full width */
.work-tile-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 0.5rem;
}

.work-tile-info-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Mobile — stack title and CTA so the View Project link sits on its
   own line below the title instead of awkwardly hanging at the top
   right of a wrapped 2-line title. */
@media (max-width: 760px) {
  .work-tile-info-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

.work-tile-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
  min-width: 0;
}

.work-tile-desc {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: 300;
  margin: 0;
  /* Try one line, allow wrap to 2 max */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.work-tile-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem 0;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.work-tile-tags li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.55;
  display: inline-flex;
  align-items: center;
}

.work-tile-tags li:not(:last-child)::after {
  content: '·';
  margin: 0 0.875rem;
  opacity: 0.6;
  font-size: 14px;
}

/* Stats strip — surfaces 1-3 anchor metrics from the case study right
   on the tile so a recruiter scanning the home page sees scale and
   credentials before clicking through. Sits between description and
   tags with stronger numerals and dimmed labels. */
.work-tile-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.work-tile-stats li {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-primary);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.work-tile-stats li strong {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.work-tile-stats li:not(:first-child) {
  opacity: 0.85;
}
.work-tile-stats li:not(:last-child)::after {
  content: '·';
  margin: 0 0.875rem;
  opacity: 0.55;
  font-size: 14px;
  align-self: center;
}

.work-tile-cta {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.25s ease;
  padding-top: 0.5rem;
}

.work-tile:hover .work-tile-cta {
  color: var(--rust);
}

/* Mobile — single column stack, all aspect ratios become friendly 4:3 */
@media (max-width: 900px) {
  .work-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .work-tile-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* Row 2 tiles get smaller titles + tighter spacing — they're the secondary projects */
.work-tile--row2 .work-tile-title {
  font-size: clamp(1.1rem, 1.6vw, 1.375rem);
}

.work-tile--row2 .work-tile-desc {
  display: block;
  -webkit-line-clamp: unset;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile — all tiles collapse to single column equal size */
@media (max-width: 900px) {
  .work-tile--row1,
  .work-tile--row2 {
    grid-column: 1 / -1;
  }
  /* Row-2 cards have single-line ellipsis on desktop (3-up grid).
     On mobile they stack full-width, so let the description wrap to 2 lines
     like row-1 cards instead of being cut off. */
  .work-tile--row2 .work-tile-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    text-overflow: clip;
  }
}
  .work-tile--row1 .work-tile-cover,
  .work-tile--row2 .work-tile-cover {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================================================
   Hero — Classic layout v3: tall portrait left, big headline right, mock-exact
   ============================================================================ */
.hero-classic {
  position: relative;
  padding: 7rem 0 0;
  background: var(--paper);
  color: var(--text-primary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Top zone — portrait fills left column at content height, content stacks right */
.hero-classic-grid {
  display: grid;
  grid-template-columns: 224px 1fr;
  align-items: stretch;
  gap: 3rem;
  padding: 1.5rem 0 1.5rem;
}

.hero-classic-portrait {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--pale);
}

.hero-classic-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content column — greeting + headline + status pill stacked */
.hero-classic-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  min-width: 0;
}

/* Greeting row: "Hi, I am Lavan Kumar Baskaran — 'Product Designer'" */
.hero-classic-greeting {
  font-family: var(--sans);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.hero-classic-greeting-text {
  color: var(--text-primary);
}

.hero-classic-rotator-quote {
  color: var(--text-primary);
  font-weight: 700;
}

.hero-classic-rotator {
  color: var(--rust);
  font-weight: 700;
  display: inline-block;
  min-width: 8ch;
}

.hero-classic-rotator .hero-role-text[data-rotator] {
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
  font-weight: inherit;
}

/* Big headline — multi-line bold with selective red-orange spans */
.hero-classic-headline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
}

.hero-classic-headline .rust-em {
  color: var(--rust);
  font-style: normal;       /* not italic — solid red-orange phrases */
  font-weight: 700;
}

/* Available for Work pill — own line below headline */
.hero-classic-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(11, 20, 35, 0.3);
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
  margin-top: 0.5rem;
}

.hero-classic-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2BA58A;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 #2BA58A;
  animation: hero-classic-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-classic-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(43, 165, 138, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(43, 165, 138, 0);
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-classic-status-dot {
    animation: none;
  }
}

/* Lower zone — bio LEFT + meta data RIGHT */
.hero-classic-lower {
  display: block;
  padding: 1rem 0 3.5rem;
}

.hero-classic-bio {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero-classic-bio .lead {
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: 300;
  margin: 0;
  max-width: 100%;
}

/* Meta data list — Based / Focus / Experience rows with hairlines */
.hero-classic-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.hero-classic-meta li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(11, 20, 35, 0.12);
}

.hero-classic-meta li:first-child {
  border-top: 1px solid rgba(11, 20, 35, 0.12);
}

.hero-classic-meta-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.55;
}

.hero-classic-meta-value {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Carousel — navy text on white, hairlines navy 15% */
.hero-classic .cred-strip {
  border-top-color: rgba(11, 20, 35, 0.15);
  border-bottom-color: rgba(11, 20, 35, 0.15);
  color: var(--text-primary);
  margin-top: 0;
}

.hero-classic .cred-strip-plus {
  color: var(--text-primary);
  opacity: 0.4;
}

.hero-classic .cred-strip-item {
  color: var(--text-primary);
}

/* Selected Work scroll cue — centered, red-orange, with arrow below */
.hero-classic-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 1.75rem;
  padding: 0.75rem 0 1rem;
  text-decoration: none;
  color: var(--rust);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero-classic-cue-label {
  position: relative;
}

.hero-classic-cue-label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.hero-classic-cue:hover .hero-classic-cue-label::after {
  transform: scaleX(1);
}

.hero-classic-cue-arrow {
  display: inline-block;
  font-size: 1.25rem;
  animation: hero-cue-bob 2s ease-in-out infinite;
}

@keyframes hero-cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-classic-cue-arrow {
    animation: none;
  }
}

/* Tablet — grid columns shrink, bio stacks above meta */
@media (max-width: 1024px) {
  .hero-classic-grid {
    grid-template-columns: 192px 1fr;
    gap: 2rem;
  }

  .hero-classic-lower {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Mobile — portrait sits beside the greeting/role on row 1, headline
   and status flow below in the content column. */
@media (max-width: 720px) {
  .hero-classic {
    /* Body now has padding-top: 60px to clear the fixed nav, so hero
       only needs a small breathing-room top padding. */
    padding-top: 1rem;
  }

  .hero-classic-grid {
    grid-template-columns: 72px 1fr;
    align-items: start;
    gap: 1rem;
    padding: 1rem 0 2rem;
  }

  .hero-classic-portrait {
    width: 72px;
    height: 72px;
    min-height: 0;
    border-radius: 50%;
    align-self: start;
    /* On mobile, swap the tall hero portrait for the square avatar — it's
       pre-cropped so the head/hair sit correctly inside the circle. */
    background-image: url('assets/portrait-avatar.jpg');
    background-size: cover;
    background-position: center;
  }
  .hero-classic-portrait img {
    /* Hide the tall desktop portrait on mobile so only the avatar shows. */
    display: none;
  }

  .hero-classic-content {
    /* Content sits beside the portrait. Greeting + role sit in row 1
       (vertically aligned with avatar). Headline + status break out
       below using negative margin-left so they reclaim the full
       content width below the avatar. */
    min-width: 0;
  }

  .hero-classic-greeting {
    font-size: 1.125rem;
    margin: 0;
    padding-top: 0.2rem;
  }

  /* On mobile, force the greeting into three explicit lines:
     "Hi, I am" / "Lavan Kumar Baskaran" / rotating role.
     The em dash that connects greeting to role on desktop is hidden
     since the role now sits on its own line below. */
  .hero-classic-greeting-hi,
  .hero-classic-greeting-name {
    display: block;
  }
  .hero-classic-greeting-dash {
    display: none;
  }

  /* Force the rotating role onto its own line on mobile so the greeting
     reads "Hi, I am" / "Lavan Kumar Baskaran —" / role. */
  .hero-classic-rotator-quote {
    display: block;
    margin-top: 0.25rem;
  }

  /* Headline and status break out to full row width by reaching back
     under the portrait column. */
  .hero-classic-headline,
  .hero-classic-status-row,
  .hero-classic-open-to {
    margin-left: calc(-72px - 1rem);
  }

  .hero-classic-headline {
    font-size: clamp(1.875rem, 8vw, 2.75rem);
    margin-top: 1.25rem;
  }

  .hero-classic-cue {
    padding: 1.5rem 0 2rem;
    font-size: 1rem;
  }
}

/* ============================================================================
   Services section v3 — list of 4 services + horizontal-scroll process row
   White bg throughout, navy text, navy outline cards
   ============================================================================ */
.services-section-v3 {
  padding: 6rem 0 0;
  background: var(--paper);
  color: var(--text-primary);
  border-top: 1px solid rgba(11, 20, 35, 0.1);
}

/* PART 1 — Services list */
.services-list-block {
  margin-bottom: 2rem;
}

.services-list-eyebrow {
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  opacity: 0.6;
}

.services-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(11, 20, 35, 0.15);
}

.services-list-row {
  display: block;
  padding: 0;
  border-bottom: 1px solid rgba(11, 20, 35, 0.15);
}

.services-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 2.5rem 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: padding-left 0.35s ease, color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.services-list-header:hover {
  padding-left: 1.5rem;
  color: var(--rust);
}

.services-list-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: inherit;
  flex: 0 0 auto;
}

.services-list-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  color: inherit;
  transition: transform 0.35s ease, background-color 0.25s ease, color 0.25s ease;
}
.services-list-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.services-list-row[data-open="true"] .services-list-toggle {
  transform: rotate(180deg);
}

.services-list-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
.services-list-panel-inner {
  overflow: hidden;
  min-height: 0;
}
.services-list-row[data-open="true"] .services-list-panel {
  grid-template-rows: 1fr;
}

.services-list-desc {
  margin: 0;
  padding: 0 0 2.5rem 0;
  max-width: 640px;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-primary);
  opacity: 0.7;
  text-align: left;
}
.services-list-header:hover ~ .services-list-panel .services-list-desc {
  /* Keep description neutral on hover; only the title shifts to rust. */
  color: var(--text-primary);
  opacity: 0.7;
}
@media (max-width: 768px) {
  .services-list-header {
    gap: 1rem;
    align-items: flex-start;
  }
  .services-list-title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .services-list-toggle {
    width: 2rem;
    height: 2rem;
    margin-top: 0.5rem;
  }
  .services-list-toggle svg {
    width: 1rem;
    height: 1rem;
  }
  .services-list-desc {
    font-size: 0.9375rem;
  }
}

.services-list-arrow {
  font-family: var(--sans);
  font-size: clamp(1.25rem, 2vw, 1.875rem);
  font-weight: 400;
  color: inherit;
  transition: transform 0.3s ease;
}

.services-list-row:hover .services-list-arrow {
  transform: translateY(4px);
}

/* PART 2 — How I Work / Process */
/* PART 2 — How I Work / Process (scroll-jacked horizontal) */
.process-block {
  position: relative;
}

/* Outer wrapper provides vertical scroll runway. JS reads its position to drive the horizontal animation. */
.process-pin-wrap {
  position: relative;
  height: 220vh;
}

/* Inner element sticks to top while user scrolls through the runway */
.process-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  padding: 9rem 0 2rem;
  box-sizing: border-box;
}

.process-head {
  margin: 0 0 1.5rem;
  flex-shrink: 0;
}

.process-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--rust);
  margin-bottom: 1rem;
}

.process-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rust);
  display: inline-block;
}

.process-headline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
  text-transform: uppercase;
}

.process-scroller {
  width: 100%;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  min-height: 0;
}

.process-track {
  display: flex;
  gap: 1.25rem;
  padding: 0.5rem 0 1rem;
  will-change: transform;
}

/* Each card — white bg, faint navy outline, navy text, big number at bottom */
.process-block .process-card {
  flex: 0 0 600px;
  width: 600px;
  min-height: 560px;
  background: var(--paper);
  border: 1px solid rgba(11, 20, 35, 0.08);
  border-radius: 18px;
  padding: 2rem 1.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  color: var(--navy);
}

.process-block .process-card-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
  text-transform: uppercase;
}

.process-block .process-card-body {
  font-family: var(--sans);
  font-size: clamp(1.25rem, 1.4vw, 1.3125rem);
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.75;
  font-weight: 400;
  margin: 0;
  flex: 1;
}

.process-block .process-card-num {
  font-family: var(--serif);
  font-size: clamp(4.5rem, 8vw, 7.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--navy);
  letter-spacing: -0.02em;
  align-self: flex-start;
  margin: auto 0 0;
}

/* Tablet — narrower viewport, scale cards down */
@media (max-width: 1024px) {
  .services-section-v3 {
    padding: 4rem 0 5rem;
  }
  .services-list-block {
    margin-bottom: 1.5rem;
  }
  .process-block .process-card {
    flex: 0 0 480px;
    width: 480px;
    min-height: 380px;
  }
}

/* Mobile (and reduced motion) — fall back to native horizontal scroll, no scroll-jack */
@media (max-width: 900px) {
  .process-pin-wrap {
    height: auto;
  }
  .process-pin {
    position: static;
    height: auto;
    padding: 2rem 0;
  }
  .process-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .process-scroller::-webkit-scrollbar {
    display: none;
  }
  .process-track {
    transform: none !important;
  }
  .process-block .process-card {
    flex: 0 0 88vw;
    width: 88vw;
    min-height: 380px;
    padding: 1.5rem 1.25rem;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-pin-wrap {
    height: auto;
  }
  .process-pin {
    position: static;
    height: auto;
  }
  .process-scroller {
    overflow-x: auto;
  }
  .process-track {
    transform: none !important;
  }
}

/* === Unified section eyebrow style: red-orange text + red-orange dot === */
.eyebrow-dotted {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--rust);
  opacity: 1;
}

.eyebrow-dotted .eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rust);
  display: inline-block;
  flex-shrink: 0;
}

/* Override services list eyebrow color (was opacity 0.6 navy) */
.eyebrow-dotted.services-list-eyebrow {
  opacity: 1;
  color: var(--rust);
}

/* Hairline divider INSIDE the pin (visible while pinned, sits below cards) */
.process-divider {
  border: 0;
  border-top: 1px solid rgba(11, 20, 35, 0.15);
  margin: 0;
  width: 100%;
}

/* Short viewports — scale cards down so headline + cards + hairline all fit in 100vh */
@media (max-height: 800px) and (min-width: 901px) {
  .process-block .process-card {
    min-height: 320px;
  }
  .process-block .process-card-num {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
  }
  .process-pin {
    padding: 5rem 0 1.5rem;
  }
  .process-head {
    margin-bottom: 1rem;
  }
  .process-headline {
    font-size: clamp(2rem, 4vw, 3rem);
  }
}

@media (max-height: 700px) and (min-width: 901px) {
  .process-block .process-card {
    min-height: 280px;
  }
  .process-block .process-card-body {
    font-size: 15px;
    line-height: 1.5;
  }
  .process-pin {
    padding: 4.5rem 0 1rem;
  }
}

/* 60% width centered hairline between services list and process block */
.services-process-separator {
  border: 0;
  border-top: 2px dotted rgba(11, 20, 35, 0.28);
  width: 85%;
  margin: 9rem auto 0;
}

/* Index page section heads: heading no longer wraps awkwardly, lead is wider (80%) */
.section-head {
  max-width: 100%;
}

.section-head h2 {
  text-wrap: balance;
}

.section-head .section-lead {
  max-width: 80%;
  font-size: 1.125rem;
}

/* ===== GLOBAL: Remove italic from all <em> tags + all heading-related elements site-wide ===== */
em,
h1, h2, h3, h4, h5, h6,
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.pullquote p,
.pullquote p em,
.section-head h2 em,
.case-title em,
.case-section h2 em,
.research-block h3,
.tradeoff-item h3,
.takeaway-item h3 {
  font-style: normal;
}

/* Generic rust-em — red-orange accent inside any heading/text, no italic */
.rust-em {
  color: var(--rust);
  font-style: normal;
}

/* ============================================================================
   DARK MODE — additional treatments
   - Separator hairlines flip to paper-white tint
   - Carousel `|` pipes: red-orange + taller
   - Cards (process / contact / work tiles): transparent fill, white border, red-orange glow on hover
   ============================================================================ */

/* Carousel pipes — red-orange and taller (always; light + dark) */
.cred-strip .cred-strip-plus {
  color: var(--rust);
  font-size: 24px;
  opacity: 1;
  font-weight: 300;
}

/* Carousel top + bottom hairlines — white in dark mode */
[data-theme="dark"] .cred-strip {
  border-top-color: rgba(251, 248, 243, 0.25);
  border-bottom-color: rgba(251, 248, 243, 0.25);
}

/* Process cards in dark mode — transparent fill + white border + red-orange glow on hover */
[data-theme="dark"] .process-block .process-card {
  background: transparent;
  border-color: rgba(251, 248, 243, 0.55);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
[data-theme="dark"] .process-block .process-card:hover {
  border-color: var(--rust);
  box-shadow: 0 0 16px rgba(255, 61, 0, 0.18);
  transform: translateY(-2px);
}
[data-theme="dark"] .process-block .process-card-title,
[data-theme="dark"] .process-block .process-card-body,
[data-theme="dark"] .process-block .process-card-num {
  color: #FBF8F3;
}

/* Contact cards in dark mode — deep navy fill + white border + red-orange glow */
[data-theme="dark"] .contact-card {
  background: #0B1423;
  border-color: rgba(251, 248, 243, 0.55);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
[data-theme="dark"] .contact-card:hover {
  background: #0B1423;
  border-color: var(--rust);
  box-shadow: 0 0 14px rgba(255, 61, 0, 0.16);
  transform: translateY(-2px);
}
[data-theme="dark"] .contact-card,
[data-theme="dark"] .contact-card * {
  --text-primary: #FBF8F3;
  color: #FBF8F3;
}
[data-theme="dark"] .contact-card .contact-card-arrow {
  color: var(--rust);
}

/* Project tiles in dark mode — transparent + white border + red-orange glow + white text */
[data-theme="dark"] .work-tile {
  background: transparent;
  border-color: rgba(251, 248, 243, 0.45);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
[data-theme="dark"] .work-tile:hover {
  border-color: var(--rust);
  box-shadow: 0 0 16px rgba(255, 61, 0, 0.16);
  transform: translateY(-4px);
}
[data-theme="dark"] .work-tile-title,
[data-theme="dark"] .work-tile-desc,
[data-theme="dark"] .work-tile-tags,
[data-theme="dark"] .work-tile-cta {
  color: #FBF8F3 !important;
}
[data-theme="dark"] .work-tile-cover {
  background: rgba(251, 248, 243, 0.06);
}

/* All separator/divider hairlines in dark mode — white tint */
[data-theme="dark"] .services-process-separator,
[data-theme="dark"] .process-block .process-divider,
[data-theme="dark"] hr {
  border-top-color: rgba(251, 248, 243, 0.25);
}

/* Dark mode: meta block + services list separator hairlines flip to white */
[data-theme="dark"] .hero-classic-meta li,
[data-theme="dark"] .hero-classic-meta li:first-child {
  border-color: rgba(251, 248, 243, 0.18);
}

[data-theme="dark"] .services-list,
[data-theme="dark"] .services-list-row {
  border-color: rgba(251, 248, 243, 0.18);
}

/* ============================================
   Hero status row — AVAILABLE pill + Denver location + Resume link inline
   ============================================ */
.hero-classic-status-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Denver location — soft sentence case, more human than mono uppercase */
.hero-classic-meta-inline {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-primary);
  opacity: 0.7;
  letter-spacing: 0;
  text-transform: none;
}

/* "Open to" role line — sits under the availability/location row.
   Factual signal for recruiters; muted but readable. */
.hero-classic-open-to {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-primary);
  opacity: 0.7;
  margin-top: 0.6rem;
  margin-bottom: 0;
  letter-spacing: 0;
}

/* Resume CTA button in hero — rounded rectangle, white fill, orange border + text */
.hero-classic-resume-link {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--rust);
  background: #FFFFFF;
  border: 1.5px solid var(--rust);
  border-radius: 8px;
  padding: 0.625rem 1.25rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  transition: background 0.2s ease, color 0.2s ease, gap 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.hero-classic-resume-link:hover {
  background: var(--rust);
  color: #FFFFFF;
  gap: 10px;
}
.hero-classic-resume-link span {
  font-size: 1em;
  display: inline-block;
  transition: transform 0.2s ease;
}
.hero-classic-resume-link:hover span {
  transform: translate(2px, -2px);
}

/* Mobile — stack the row vertically */
@media (max-width: 600px) {
  .hero-classic-status-row {
    gap: 0.75rem;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Resume CTA in dark mode — always filled orange, slight scale on hover */
[data-theme="dark"] .hero-classic-resume-link {
  background: var(--rust);
  color: #FFFFFF;
  border-color: var(--rust);
}

[data-theme="dark"] .hero-classic-resume-link:hover {
  background: var(--rust);
  color: #FFFFFF;
  transform: scale(1.05);
}

[data-theme="dark"] .hero-classic-resume-link:active {
  transform: scale(0.98);
}

/* Dark mode: View Project CTA flips to orange when card is hovered */
[data-theme="dark"] .work-tile:hover .work-tile-cta {
  color: var(--rust) !important;
}

/* Available pill border visible in dark mode */
[data-theme="dark"] .hero-classic-status {
  border-color: rgba(251, 248, 243, 0.4);
}

/* Dark mode: all section/element top-borders that were navy-tint in light flip to paper-tint */
[data-theme="dark"] .services-section-v3 {
  border-top-color: rgba(251, 248, 243, 0.18);
}

/* ============================================================================
   CASE STUDY SIDENAV
   Replaces the top sticky subbar with a left-edge fixed sidebar (desktop+tablet)
   and a bottom-right floating hamburger + full-screen overlay (mobile).
   Section labels only — active state = bold + rust color.
   ============================================================================ */

/* Hide the legacy marker — kept in DOM for lightbox/detection scripts. */
.case-subbar[hidden] { display: none !important; }

/* ---- Desktop & tablet: fixed left sidebar (≥768px) ---- */
.case-sidenav {
  position: fixed;
  top: 80px;                          /* sit just below the global top nav */
  left: 0;
  bottom: 0;
  width: 160px;
  z-index: 30;
  display: none;                      /* hidden on mobile */
  background: transparent;
  pointer-events: none;               /* let inner element catch clicks; outer is just a frame */
}
.case-sidenav-inner {
  position: sticky;
  top: 80px;
  pointer-events: auto;
  padding: 1.7rem 0.75rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.case-sidenav-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
}
.case-sidenav-label:hover { color: var(--navy); opacity: 0.7; }
.case-sidenav-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.case-sidenav-link {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text-primary);
  opacity: 0.55;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: opacity 160ms ease, color 160ms ease;
}
.case-sidenav-link:hover { opacity: 1; }
.case-sidenav-link.is-active {
  opacity: 1;
  color: var(--rust);
  font-weight: 700;
}

/* Show sidebar at desktop + tablet */
@media (min-width: 768px) {
  .case-sidenav { display: block; }
  /* Push case study content away from the sidebar so it doesn't overlap */
  .case-hero,
  .case-section,
  .case-impact {
    padding-left: 140px;
  }
}
@media (min-width: 1280px) {
  .case-sidenav { width: 160px; }
  .case-hero, .case-section, .case-impact {
    padding-left: 150px;
  }
}

/* Floating prev/next nav arrows — keep clear of sidebar on the left */
@media (min-width: 768px) {
  .case-floating-nav-btn--prev {
    left: 220px !important;
  }
}
@media (min-width: 1280px) {
  .case-floating-nav-btn--prev {
    left: 240px !important;
  }
}

/* ---- Mobile: hamburger trigger + overlay (<768px) ---- */
.case-sidenav-trigger {
  display: flex;
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--text-primary);
  color: var(--paper);
  border: 0;
  z-index: 70;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(11, 20, 35, 0.18);
  transition: transform 180ms ease;
}
.case-sidenav-trigger:hover { transform: scale(1.05); }
.case-sidenav-trigger:active { transform: scale(0.95); }
.case-sidenav-trigger-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}
.case-sidenav-trigger-bars span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}

/* Floating mobile sections hamburger — replaced by the horizontally
   scrollable subbar at the top of each case study, so this stays hidden
   across all viewports. Kept in the DOM in case we want to bring it back. */
.case-sidenav-trigger { display: none; }

.case-sidenav-overlay {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.case-sidenav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.case-sidenav-overlay-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;       /* push everything to the bottom (Fitt's Law) */
  align-items: flex-end;            /* right-align (where the trigger lives) */
  text-align: right;
  padding: 5rem 2rem 6.5rem;        /* extra bottom space so trigger doesn't overlap content */
  position: relative;
}
.case-sidenav-overlay-close {
  display: none;
}
.case-sidenav-overlay-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 1.5rem;
  font-weight: 600;
}
.case-sidenav-overlay-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.case-sidenav-overlay-list .case-sidenav-link {
  font-size: 1.5rem;
  line-height: 1.2;
  font-family: var(--serif);
  font-weight: 400;
}

/* Dark mode adjustments */
[data-theme="dark"] .case-sidenav-trigger {
  background: var(--paper);
  color: var(--text-primary);
}
[data-theme="dark"] .case-sidenav-overlay {
  background: var(--paper);
}

/* When sidebar is present, sections no longer need 130px scroll-margin
   (top subbar gone). Keep some buffer for fixed top nav. */
@media (min-width: 768px) {
  .case-section[id],
  header[id] { scroll-margin-top: 80px; }
}

/* Sidenav contrast flip — when a navy section is behind the labels.
   Affects label color in light mode; dark-mode sidebar labels are already
   light-on-dark so no flip is needed there. */
.case-sidenav.is-on-dark .case-sidenav-link {
  color: #FFFFFF;
  opacity: 1;
}
.case-sidenav.is-on-dark .case-sidenav-link.is-active {
  color: var(--rust);                /* keep the active accent visible */
  opacity: 1;
}
.case-sidenav.is-on-dark .case-sidenav-label {
  color: var(--rust);                /* eyebrow stays rust either way */
}
/* Dark mode — labels go full white at full opacity (page bg is navy). */
[data-theme="dark"] .case-sidenav-link {
  color: #FFFFFF;
  opacity: 1;
}
[data-theme="dark"] .case-sidenav-link.is-active {
  color: var(--rust);
  opacity: 1;
}
/* Smooth the transition so the flip feels intentional, not jarring */
.case-sidenav-link {
  transition: color 220ms ease, opacity 220ms ease;
}

/* ============================================================================
   TMG-only overrides (kept for future scoping if needed)
   ============================================================================ */

/* ============================================================================
   FINAL PRODUCT — work-card-style hover treatment
   Idle: faint navy border + soft shadow.
   Hover: rust border + lift + bigger shadow.
   ============================================================================ */
.product-feature {
  border: 1px solid rgba(11, 20, 35, 0.08);
  box-shadow: 0 6px 24px -12px rgba(11, 20, 35, 0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.product-feature:hover {
  transform: translateY(-4px);
  border-color: var(--rust);
  box-shadow: 0 18px 40px -16px rgba(11, 20, 35, 0.22);
}
/* Dark mode: idle is faint white border, hover same rust */
[data-theme="dark"] .product-feature {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
[data-theme="dark"] .product-feature:hover {
  border-color: var(--rust);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   IN-SECTION HAIRLINE VISIBILITY
   Inside tinted (navy) sections, --line resolves to ~10% navy which is
   invisible. Override to white at a higher alpha so item-to-item hairlines
   (Synthesis 01-04, Challenges, Trade-offs, Takeaway) read on navy.
   Dark mode already uses paper-alpha so no change needed there.
   ============================================================================ */
.case-section-tinted {
  --line: rgba(255, 255, 255, 0.18);
}

/* ============================================================================
   SECTION-TO-SECTION DOTTED DIVIDERS (within the same nav group)
   3px dashes, 4px gaps. 1px thick. 80% wide, centered.
   30% alpha — navy on white bands, white on navy bands.
   Visible in both light and dark modes.
   ============================================================================ */

/* Token: divider color picks correct alpha per band/mode */
:root {
  --section-divider: rgba(11, 20, 35, 0.30);
}
.case-section-tinted {
  --section-divider: rgba(255, 255, 255, 0.30);
}
[data-theme="dark"] {
  --section-divider: rgba(255, 255, 255, 0.30);
}

/* Mark sections that should show a dashed divider above them.
   These are sections that are NOT the first section in a nav group.
   The divider sits inside the section's top padding so the section's
   bg color (navy or white) extends through the divider. We use a
   sibling-selector-style ::before pinned to the top, then push it down
   half the padding so it visually centers in the gap. */
.case-section[data-divider-above="true"],
.case-impact[data-divider-above="true"] {
  position: relative;
  padding-top: 5rem;                  /* doubled padding gives room for divider */
}
.case-section[data-divider-above="true"]::before,
.case-impact[data-divider-above="true"]::before {
  content: "";
  position: absolute;
  top: 2.5rem;                         /* half of padding-top — centers divider */
  /* Align divider's left edge with content's left edge.
     Section already has padding-left (sidebar offset); add gutter to match container-narrow. */
  left: calc(150px + var(--gutter));
  right: 10%;
  height: 1px;
  background-image: linear-gradient(
    to right,
    var(--section-divider) 0,
    var(--section-divider) 3px,
    transparent 3px,
    transparent 7px
  );
  background-size: 7px 1px;
  background-repeat: repeat-x;
  pointer-events: none;
}

/* Mobile: divider starts at gutter (no sidebar offset) */
@media (max-width: 767px) {
  .case-section[data-divider-above="true"]::before,
  .case-impact[data-divider-above="true"]::before {
    left: var(--gutter);
    right: var(--gutter);
  }
}

/* Tablet: divider starts at section's padding-left value */
@media (min-width: 768px) and (max-width: 1279px) {
  .case-section[data-divider-above="true"]::before,
  .case-impact[data-divider-above="true"]::before {
    left: calc(140px + var(--gutter));
  }
}

/* ============================================================================
   Mobile only: separate the major subnav-target sections (Overview /
   Design Approach / Final Product / Reflection) with a SOLID line, since
   on mobile we use a single dark navy bg instead of alternating section
   colors. Sub-sections inside one subnav tab keep their dotted divider.

   Subnav targets are the .case-section / .case-impact elements that have
   an id matching the subnav links. Section[id] lets us scope this without
   touching unrelated sub-sections.
   ============================================================================ */
@media (max-width: 767px) {
  /* Solid divider for sections that are direct subnav targets.
     If the section already had a data-divider-above dashed line, replace
     the gradient with a solid color and remove the dash size. If it
     didn't, draw the divider anyway so the boundary is visible. */
  .case-section[id]::before,
  .case-impact[id]::before {
    content: "";
    position: absolute;
    top: 2.5rem;
    left: var(--gutter);
    right: var(--gutter);
    height: 1px;
    background-image: none;
    background: var(--section-divider);
    pointer-events: none;
  }
  /* Subnav-target sections that didn't already have data-divider-above
     need the same top padding so the divider has room. */
  .case-section[id],
  .case-impact[id] {
    position: relative;
    padding-top: 5rem;
  }
}

/* ============================================================================
   TMG-only — strip non-list solid divider lines.
   Keeps in-list hairlines (Synthesis 01-04, Challenges, Trade-offs, Takeaway).
   Removes ONLY the full-width section bottom hairlines.
   Scoped to .case-tmg so other case studies & homepage are untouched.
   ============================================================================ */

/* Full-width section bottom hairlines — kill them all on TMG */
.case-tmg .case-hero,
.case-tmg .case-section,
.case-tmg .case-impact {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* User-frustration cards (research-blocks) on TMG —
   transparent fill so they sit on the navy bg, with white borders
   and white text. Replaces the previous white-island treatment. */
.case-tmg .research-block {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
}
.case-tmg .research-block h3 {
  color: #FFFFFF;
}
.case-tmg .research-list li {
  color: #FFFFFF;
}

/* Double-diamond diagram on TMG — left-align with content gutter.
   The SVG viewBox is also tightened to remove leading whitespace so the
   leftmost capsule lines up with the section heading. */
.case-tmg .dd-figure-full {
  margin-left: 0;
  margin-right: auto;
}

/* In-list hairlines — shrink to 60% width, left-anchored.
   Replace border-top/bottom with a ::before/::after pseudo-element.
   Color follows --line so it stays visible on both white and navy bands.

   - opp-item, tradeoff-item, takeaway-item used border-top → ::before { top: 0 }
   - challenge-item used border-bottom → ::after { bottom: 0 } */
.case-tmg .opp-item,
.case-tmg .challenge-item,
.case-tmg .tradeoff-item,
.case-tmg .takeaway-item {
  position: relative;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.case-tmg .opp-item::before,
.case-tmg .tradeoff-item::before,
.case-tmg .takeaway-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}
.case-tmg .challenge-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60%;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}
/* First-of-each-list — no top hairline (heading provides the visual open) */
.case-tmg .opp-item:first-child::before,
.case-tmg .tradeoff-item:first-child::before,
.case-tmg .takeaway-item:first-child::before {
  display: none;
}
/* Last item in each list — no closing bottom hairline (lists end open) */
.case-tmg .challenge-item:last-child::after {
  display: none;
}

/* TMG hero — bump top padding so the case-study content sits visibly below
   the top nav (overrides legacy subbar-tight rule). */
.case-tmg .case-hero {
  padding-top: 6rem !important;
}

/* TMG: slightly larger description text across list-style sections.
   15px → 16.5px. Headings/titles untouched. */
.case-tmg .challenge-item p,
.case-tmg .tradeoff-item p,
.case-tmg .takeaway-item p,
.case-tmg .opp-item p,
.case-tmg .product-feature-body,
.case-tmg .research-list li {
  font-size: 16.5px;
}

/* ============================================
   Full-page contact section (homepage)
   ============================================ */
section#contact.contact-section-full {
  background: var(--navy);
  color: var(--text-on-dark);
  min-height: 100vh;
  padding: clamp(3rem, 6vh, 5rem) 0 clamp(2.5rem, 5vh, 4rem);
  display: flex;
  align-items: center;
  position: relative;
}

.contact-full-inner {
  width: 100%;
}

/* Headline block */
.contact-full-head {
  margin-bottom: clamp(2rem, 5vh, 3rem);
  max-width: 1100px;
}

.contact-full-eyebrow {
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 1rem;
}

.contact-full-eyebrow .eyebrow-dot {
  background: var(--rust) !important;
}

.contact-full-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-on-dark);
  margin: 0;
  max-width: 32ch;
}

.contact-full-title em {
  font-style: normal;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  display: block;
  margin-top: 0.1em;
}

/* Two-column grid */
.contact-full-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 880px) {
  .contact-full-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 6rem);
  }
}

/* ===== Form ===== */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  padding: 2.5rem 0;
  position: relative;
}

/* Hairlines as pseudo-elements so they can be narrower than the field */
.contact-field::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.22);
}

.contact-field:first-of-type::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.22);
}

/* On desktop: pull hairlines back to the end of the input column,
   stopping before the Send button on the last row */
@media (min-width: 640px) {
  .contact-field::after,
  .contact-field:first-of-type::before {
    width: auto;
    right: 200px;
  }
}

@media (min-width: 640px) {
  .contact-field {
    grid-template-columns: 60px 1fr;
    column-gap: 2rem;
    align-items: baseline;
  }
}

.contact-field label {
  display: contents;
  cursor: text;
}

.contact-field-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
  padding-top: 4px;
}

.contact-field-label {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text-on-dark);
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

.contact-field input,
.contact-field textarea {
  grid-column: 1 / -1;
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--text-on-dark);
  padding: 0;
  resize: none;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}

@media (min-width: 640px) {
  .contact-field input,
  .contact-field textarea {
    grid-column: 2;
  }
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
}

.contact-field input:focus::placeholder,
.contact-field textarea:focus::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.contact-field textarea {
  min-height: 28px;
  height: 28px;
}

/* Submit */
.contact-form-actions {
  margin-top: 2rem;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--rust);
  color: #FFFFFF;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.contact-submit:hover {
  background: var(--rust-deep);
  transform: translateY(-1px);
}

.contact-submit-arrow {
  font-family: var(--mono);
  transition: transform 0.25s ease;
}

.contact-submit:hover .contact-submit-arrow {
  transform: translateX(4px);
}

/* ===== Right column: details ===== */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 880px) {
  .contact-details {
    padding-top: 1.5rem; /* aligns with first field's top padding */
  }
}

.contact-details-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-details-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 0.5rem;
  font-weight: 400;
}

.contact-details-item {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--text-on-dark);
  line-height: 1.5;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  width: fit-content;
  transition: color 0.2s ease;
  margin: 0;
}

a.contact-details-item {
  position: relative;
}

a.contact-details-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--rust);
  transition: width 0.3s ease;
}

a.contact-details-item:hover {
  color: var(--rust);
}

a.contact-details-item:hover::after {
  width: 100%;
}

.contact-details-static {
  cursor: default;
}

.contact-details-arrow {
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease, transform 0.2s ease;
}

a.contact-details-item:hover .contact-details-arrow {
  color: var(--rust);
  transform: translate(2px, -2px);
}

/* Button variant — used by the "Book a slot with me" Calendly CTA.
   Mirrors the anchor styling so it sits seamlessly alongside the
   social links and email/phone items. */
button.contact-details-item {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--text-on-dark);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
button.contact-details-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--rust);
  transition: width 0.3s ease;
}
button.contact-details-item:hover {
  color: var(--rust);
}
button.contact-details-item:hover::after {
  width: 100%;
}
button.contact-details-item:hover .contact-details-arrow {
  color: var(--rust);
  transform: translate(2px, -2px);
}

/* ===== Dark theme — keep contact section navy (matches light mode) ===== */
[data-theme="dark"] section#contact.contact-section-full {
  background: #0B1423;
  color: #FFFFFF;
}

[data-theme="dark"] .contact-full-title,
[data-theme="dark"] .contact-field-label,
[data-theme="dark"] .contact-field input,
[data-theme="dark"] .contact-details-item {
  color: #FFFFFF;
}

[data-theme="dark"] .contact-full-title em,
[data-theme="dark"] .contact-full-eyebrow,
[data-theme="dark"] .contact-field-num,
[data-theme="dark"] .contact-details-label,
[data-theme="dark"] .contact-details-arrow {
  color: rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .contact-field input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .contact-field::after,
[data-theme="dark"] .contact-field:first-of-type::before {
  background: rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] a.contact-details-item:hover,
[data-theme="dark"] a.contact-details-item:hover .contact-details-arrow {
  color: var(--rust);
}

/* Mobile tweaks */
@media (max-width: 639px) {
  .contact-section-full {
    min-height: auto;
    padding: 4rem 0 3rem;
  }
  .contact-full-title {
    font-size: clamp(1.875rem, 7vw, 2.5rem);
  }
  .contact-field {
    padding: 1.25rem 0;
  }
  .contact-field-num {
    font-size: 11px;
    margin-bottom: 0.25rem;
    display: block;
  }
}

/* ============================================================================
   Aptviz — apply the TMG visual treatment (scoped to .case-aptviz).
   Mirrors the TMG block above; selectors trimmed to sections that exist on Aptviz.
   ============================================================================ */

/* Full-width section bottom hairlines — kill them all on Aptviz */
.case-aptviz .case-hero,
.case-aptviz .case-section,
.case-aptviz .case-impact {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Aptviz: slightly larger description text in the Final Product modules.
   15px → 16.5px. Headings/titles untouched. */
.case-aptviz .product-feature-body {
  font-size: 16.5px;
}

/* Aptviz hero — match TMG: more top padding so content sits visibly below
   the top nav (overrides legacy subbar-tight rule). */
.case-aptviz .case-hero {
  padding-top: 6rem !important;
}

/* Aptviz Impact section has 3 metric cards (TMG has 4) — adjust grid. */
@media (min-width: 720px) {
  .case-aptviz .impact-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================================
   Aptviz — Reflection section: three sub-blocks (Outcome / Takeaway / Roadmap)
   separated by inner dotted dividers. Mirrors the existing
   data-divider-above gradient (3px dash, 4px gap, 80% width centered).
   ============================================================================ */
.reflection-block {
  margin-top: 2rem;
}
.reflection-block:first-of-type {
  margin-top: 2.5rem;
}
.reflection-block .reflection-eyebrow {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 1rem;
  display: inline-block;
}
.reflection-block .lead {
  margin-top: 0;
}
.reflection-divider {
  position: relative;
  height: 1px;
  margin: 3rem 0;
  width: 100%;
  background-image: linear-gradient(
    to right,
    var(--section-divider) 0,
    var(--section-divider) 3px,
    transparent 3px,
    transparent 7px
  );
  background-size: 7px 1px;
  background-repeat: repeat-x;
  pointer-events: none;
}

/* ============================================================================
   Reflection sub-block subheading — sits between the eyebrow and the list
   in case studies that group multiple sub-sections under one Reflection.
   Smaller than h2, larger than body text.
   ============================================================================ */
.reflection-subheading {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 1.75rem;
  color: var(--text-primary);
}

/* ============================================================================
   MLS — apply the technical treatment (scoped to .case-mls).
   Mirrors the TMG block: kill full-width section hairlines, bump body text,
   bump hero padding, in-list hairlines at 60% width left-anchored.
   ============================================================================ */

/* Full-width section bottom hairlines — kill them all on MLS */
.case-mls .case-hero,
.case-mls .case-section,
.case-mls .case-impact {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* MLS hero — bump top padding so content sits below top nav */
.case-mls .case-hero {
  padding-top: 6rem !important;
}

/* MLS: slightly larger description text across list-style sections.
   15px → 16.5px. Headings/titles untouched. */
.case-mls .challenge-item p,
.case-mls .tradeoff-item p,
.case-mls .takeaway-item p,
.case-mls .opp-item p,
.case-mls .product-feature-body {
  font-size: 16.5px;
}

/* In-list hairlines — shrink to 60% width, left-anchored. */
.case-mls .opp-item,
.case-mls .challenge-item,
.case-mls .tradeoff-item,
.case-mls .takeaway-item {
  position: relative;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.case-mls .opp-item::before,
.case-mls .tradeoff-item::before,
.case-mls .takeaway-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}
.case-mls .challenge-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60%;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}
.case-mls .opp-item:first-child::before,
.case-mls .tradeoff-item:first-child::before,
.case-mls .takeaway-item:first-child::before {
  display: none;
}
/* Last item in each list — no closing bottom hairline (lists end open) */
.case-mls .challenge-item:last-child::after {
  display: none;
}

/* MLS — drop italic on synthesis sub-headings (Personas / Empathy map / User journey map) */
.case-mls .synth-heading {
  font-style: normal;
}

/* MLS — left-align Design Approach diagram and cap its width */
.case-mls .case-section-approach .dt-figure-full {
  margin-left: 0;
  margin-right: 0;
  margin-top: 2.5rem;
  padding: 0;
  max-width: 780px;
}

/* MLS — bigger description text under the Design Approach heading */
.case-mls .case-section-approach .approach-prose p {
  font-size: 1.125rem;
  line-height: 1.55;
}

/* ============================================================================
   GroAlgo — apply the technical treatment (scoped to .case-groalgo).
   Mirrors TMG/MLS: kill full-width section hairlines, hero padding 6rem.
   GroAlgo has no list-style sections (challenge/tradeoff/takeaway/opp),
   so the in-list 60% hairline rules don't apply here.
   ============================================================================ */
.case-groalgo .case-hero,
.case-groalgo .case-section,
.case-groalgo .case-impact {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.case-groalgo .case-hero {
  padding-top: 6rem !important;
}

/* ============================================================================
   GroAlgo final product cards — mirror TMG/MLS hover treatment
   (faint border idle, rust border + lift + shadow on hover)
   ============================================================================ */
.groalgo-feature {
  border: 1px solid rgba(11, 20, 35, 0.08);
  border-radius: 4px;
  box-shadow: 0 6px 24px -12px rgba(11, 20, 35, 0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.groalgo-feature:hover {
  transform: translateY(-4px);
  border-color: var(--rust);
  box-shadow: 0 18px 40px -16px rgba(11, 20, 35, 0.22);
}
[data-theme="dark"] .groalgo-feature {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
[data-theme="dark"] .groalgo-feature:hover {
  border-color: var(--rust);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   GroAlgo diagrams — left-aligned (no auto-centering)
   Hooked Model + User Journey both anchor to the heading's left edge.
   ============================================================================ */
.case-groalgo .groalgo-hooked-figure,
.case-groalgo .groalgo-journey-figure {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.case-groalgo .groalgo-hooked-diagram,
.case-groalgo .groalgo-journey-diagram {
  margin-left: 0;
  margin-right: 0;
}

/* Hooked Model — keep at 900px max */
.case-groalgo .groalgo-hooked-figure {
  max-width: 900px;
}

/* User Journey — bumped up so the diagram reads larger */
.case-groalgo .groalgo-journey-figure {
  max-width: 100%;
}

/* GroAlgo persona carousel — shrink ~25% (was 1100px wrapper).
   The persona images have their own visual treatment, so the surrounding
   carousel-card surface is set transparent (no white frame around them). */
.case-groalgo .personas-wrap {
  max-width: 960px;
}
.case-groalgo .carousel-viewport {
  max-height: 510px;
}
.case-groalgo .carousel-card {
  background: transparent;
  box-shadow: none;
}
.case-groalgo .carousel-card.is-active {
  box-shadow: none;
}

/* GroAlgo — vertical breathing room around diagrams + persona carousel.
   User journey is pulled tighter to its lead paragraph since the original
   gap left it floating in the section. */
.case-groalgo .groalgo-hooked-figure {
  margin-top: 3rem;
  margin-bottom: 2rem;
}
.case-groalgo .groalgo-journey-figure {
  margin-top: 0;
  margin-bottom: 2rem;
}
/* Override the larger generic "lead → diagram" rule: bring the lead closer
   to the user-journey diagram specifically. */
.case-groalgo #journey .lead,
.case-groalgo .case-section .lead + .groalgo-journey-figure {
  margin-top: 0.5rem;
}
.case-groalgo .personas-wrap {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

/* GroAlgo — extra breathing room within sections (heading → prose → diagram) */
.case-groalgo #design h2,
.case-groalgo #research h2,
.case-groalgo .case-section h2 {
  margin-bottom: 1.5rem;
}
.case-groalgo #design .lead,
.case-groalgo #research .lead,
.case-groalgo .case-section .lead {
  margin-bottom: 2rem;
}
.case-groalgo .groalgo-hooked-figure,
.case-groalgo .personas-wrap {
  margin-top: 3.5rem;
}
/* Specifically allow the journey figure to sit tighter to its lead. */
.case-groalgo .case-section .lead + .groalgo-journey-figure {
  margin-top: 0.5rem;
}

/* GroAlgo — vertical breathing room around Validation + Reflection lists */
.case-groalgo #validation .takeaway-list,
.case-groalgo #takeaway .takeaway-list {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.case-groalgo #validation .takeaway-item,
.case-groalgo #takeaway .takeaway-item {
  padding: 2.25rem 0;
}

/* Carousel arrow icons — make sure stroke is always visible regardless of inheritance */
.carousel-arrow svg {
  stroke: currentColor;
  fill: none;
  display: block;
  pointer-events: none;
}

/* ============================================================================
   Research case study — technical treatment scoped to .case-research.
   Mirrors GroAlgo: kill full-width section hairlines, hero padding 6rem.
   No list-style sections, so the in-list 60% hairline rules don't apply.
   ============================================================================ */
.case-research .case-hero,
.case-research .case-section,
.case-research .case-impact {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.case-research .case-hero {
  padding-top: 6rem !important;
}

/* When overlay is open, transform the trigger's hamburger bars into an X */
body:has(.case-sidenav-overlay.is-open) .case-sidenav-trigger-bars span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
body:has(.case-sidenav-overlay.is-open) .case-sidenav-trigger-bars span:nth-child(2) {
  opacity: 0;
}
body:has(.case-sidenav-overlay.is-open) .case-sidenav-trigger-bars span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}
.case-sidenav-trigger-bars span {
  transition: transform 220ms ease, opacity 220ms ease;
}

/* On mobile, the floating nav becomes small circular icon buttons sitting at the
   bottom edges. The trigger occupies the bottom-right (52px circle), so we tuck
   the prev arrow at bottom-LEFT and shift the next arrow up to avoid overlapping
   the trigger. */
@media (max-width: 767px) {
  .case-floating-nav {
    top: auto;
    bottom: 1.25rem;
    transform: none;
    padding: 0 1.25rem;
    z-index: 50;
  }
  .case-floating-nav-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--text-primary);
    color: var(--paper);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(11, 20, 35, 0.18);
    max-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .case-floating-nav-btn .case-floating-nav-label {
    display: none;
  }
  /* The bottom-right sidenav trigger has been retired (replaced by the
     top subbar), so the next button no longer needs to clear it. */
  .case-floating-nav-btn--next {
    margin-right: 0;
  }
  .case-floating-nav-btn:hover,
  .case-floating-nav-btn:focus-visible {
    max-width: 44px;
  }
}

/* ============================================================================
   Homepage work grid — mobile responsive
   ============================================================================ */
@media (max-width: 768px) {
  .work-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
  .work-tile--row1,
  .work-tile--row2 {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .work-tile {
    min-width: 0;
    overflow: hidden;
  }
  .work-tile--row1 .work-tile-cover {
    aspect-ratio: 16 / 11;
  }
  .work-tile--row2 .work-tile-cover {
    aspect-ratio: 4 / 3;
  }
}

/* Mobile overlay — switch between case studies (sits below sections) */
.case-sidenav-overlay-cases {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
  width: 100%;
  max-width: 280px;
}
.case-sidenav-overlay-case-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  text-decoration: none;
  color: var(--text-primary);
  font-family: var(--mono);
  text-align: right;
  justify-content: flex-end;
}
.case-sidenav-overlay-case-link--prev {
  flex-direction: row-reverse;
}
.case-sidenav-overlay-case-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 4px;
}
.case-sidenav-overlay-case-name {
  display: block;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text-primary);
}
.case-sidenav-overlay-case-arrow {
  font-size: 18px;
  color: var(--rust);
}

/* Hero rotator — never break mid-word */
.hero-role-text[data-rotator],
.hero-role-text[data-rotator] .hero-role-word {
  white-space: nowrap;
}

/* ============================================================================
   Mobile — in-list hairlines stretch to full width
   60% looks correct on desktop; on narrow screens it leaves an awkward gap.
   ============================================================================ */
@media (max-width: 767px) {
  .case-tmg .opp-item::before,
  .case-tmg .tradeoff-item::before,
  .case-tmg .takeaway-item::before,
  .case-tmg .challenge-item::after,
  .case-mls .opp-item::before,
  .case-mls .tradeoff-item::before,
  .case-mls .takeaway-item::before,
  .case-mls .challenge-item::after {
    width: 100%;
  }
}

/* ============================================================================
   TMG hero carousel — landscape dashboard screenshots
   Different aspect ratio than GroAlgo's portrait persona cards.
   Sized smaller than full-width so the dashboard imagery doesn't dominate;
   peek cards stay visible on either side following the personas pattern.
   ============================================================================ */
.case-tmg-hero-carousel {
  width: 100%;
  max-width: 100%;
}
.case-tmg-hero-carousel .personas-wrap {
  max-width: 850px;
  margin: 0 auto;
}
.case-tmg-hero-carousel .carousel-viewport {
  max-height: none;
  aspect-ratio: 16 / 10;
  width: 100%;
}
.case-tmg-hero-carousel .carousel-card img {
  object-fit: contain;
  background: var(--paper);
}

@media (max-width: 768px) {
  .case-tmg-hero-carousel .personas-wrap { max-width: 100%; }
  .case-tmg-hero-carousel .carousel-viewport {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================
   Aptviz chart library carousel — uses the default
   personas-style stacked carousel layout (peeks visible
   at 82% scale on either side of the active card),
   matching GroAlgo personas exactly. Wrap is constrained
   to a smaller max-width so the chart-grid imagery sits
   compactly rather than dominating the section.
   ============================================ */
.chart-library-wrap {
  max-width: 850px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .chart-library-wrap { max-width: 100%; }
}

/* ============================================
   Sub-block divider — for separating sub-sections
   inside a single .case-section (e.g. Design Approach
   diagram → Feasibility Study sub-block on Aptviz).
   Same dotted style as the major section dividers
   above, just inserted inline as an element rather
   than via ::before on a section.
   ============================================ */
.subblock-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 4rem 0 3rem;
  background-image: linear-gradient(
    to right,
    var(--section-divider) 0,
    var(--section-divider) 3px,
    transparent 3px,
    transparent 7px
  );
  background-size: 7px 1px;
  background-repeat: repeat-x;
  pointer-events: none;
  border: 0;
}

/* ============================================
   TMG IA figure — constrained to ~850px so the
   navigation screenshot doesn't dominate the page.
   Matches the size convention used for the TMG hero
   carousel and Aptviz chart-library carousel.
   ============================================ */
.tmg-ia-figure {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .tmg-ia-figure { max-width: 100%; }
}

/* ============================================
   GroAlgo user journey diagram — desktop/mobile swap.
   Two inline SVGs in the figure: a horizontal version for desktop
   and a vertical portrait version for mobile. CSS shows one and
   hides the other based on viewport width.
   ============================================ */
.case-groalgo .groalgo-journey-diagram-mobile {
  display: none;
}
@media (max-width: 768px) {
  .case-groalgo .groalgo-journey-diagram {
    display: none;
  }
  .case-groalgo .groalgo-journey-diagram-mobile {
    display: block;
    margin: 0 auto;
    width: 78%;
    max-width: 280px;
    height: auto;
    color: var(--text-primary);
    /* Footer caption text in the SVG extends slightly past the viewBox
       width by design; allow it to render rather than clip. */
    overflow: visible;
  }
}

/* ============================================
   GroAlgo Hooked Model diagram — same mobile treatment
   so the four-step loop stays legible on phones.
   ============================================ */
@media (max-width: 768px) {
  .case-groalgo .groalgo-hooked-figure {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .case-groalgo .groalgo-hooked-diagram {
    min-width: 0;
    width: 100%;
  }
}

/* ============================================
   Aptviz framework + design approach diagrams — same approach.
   These wide diagrams compress to illegibility on mobile.
   ============================================ */
@media (max-width: 768px) {
  .aptviz-framework-figure,
  .aptviz-study-figure {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
  /* Approach sketch swaps to a vertical SVG on mobile — no horizontal scroll. */
  .aptviz-approach-sketch-figure {
    overflow: visible;
  }
  .aptviz-approach-sketch-desktop { display: none; }
  .aptviz-approach-sketch-mobile {
    display: block;
    width: 100%;
    max-width: 419px;
    margin: 0 auto;
    height: auto;
    color: var(--text-primary);
  }
  .aptviz-framework {
    min-width: 0;
    width: 100%;
  }
  /* Diagram now fits the viewport — drop the horizontal scroll affordance */
  .aptviz-framework-figure {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ============================================
   Carousel arrows — push them off the active card on mobile so they
   don't sit on top of the persona/dashboard image. Negative margin
   pulls each arrow outside the card's padded area. The carousel container
   itself stays inside the page gutter to avoid horizontal overflow.
   ============================================ */
@media (max-width: 768px) {
  .personas-carousel { padding: 0 3rem; }
  .carousel-arrow {
    width: 32px;
    height: 32px;
  }
  .carousel-arrow--prev { left: -0.25rem; }
  .carousel-arrow--next { right: -0.25rem; }
}

/* ============================================
   Subbar — when the page scrolls into a tinted (dark) section,
   the subbar's cream background looks out of place. Keep it
   consistent on mobile by giving it a subtle backdrop instead.
   ============================================ */
@media (max-width: 768px) {
  .case-subbar {
    background: #FFFFFF;
  }
  [data-theme="dark"] .case-subbar {
    background: #0B1423;
  }
}

/* ============================================
   Process scroller — mobile arrow controls.
   The desktop scroll-jack is a passive scroll experience;
   on mobile users want explicit prev/next + dot indicators
   like the case-study carousels.
   ============================================ */
@media (max-width: 900px) {
  .process-scroller {
    position: relative;
  }
  /* Right-edge fade hint that there's more to scroll */
  .process-pin {
    position: relative;
  }
  .process-pin::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    pointer-events: none;
    background: linear-gradient(to right, transparent 0, var(--paper) 100%);
    z-index: 1;
  }
  /* Card snap — clearer scroll indication */
  .process-block .process-card {
    scroll-margin-left: var(--gutter);
  }
  /* Subtle dot pagination row beneath the cards */
  .process-pin .process-track::after {
    /* (Reserved for future arrow/dot controls if you want them rendered.) */
  }
}

/* ============================================
   Process scroller — mobile carousel controls.
   Hidden on desktop (scroll-jack handles navigation).
   On mobile: explicit prev/next arrows + dot indicators
   below the cards. JS scrolls one card width per click
   and updates the active dot based on scroll position.
   ============================================ */
.process-controls {
  display: none;
}

@media (max-width: 900px) {
  .process-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin: 1.5rem 0 0;
    padding: 0 var(--gutter);
  }
  .process-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #0B1423;
    background: #0B1423;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .process-arrow:hover,
  .process-arrow:focus-visible {
    background: var(--rust);
    color: #FFFFFF;
    border-color: var(--rust);
  }
  .process-arrow:disabled {
    /* Keep the disabled arrow visually identical to the enabled one —
       reader still sees a clear pair of buttons. cursor:not-allowed
       is the only affordance. */
    cursor: not-allowed;
  }
  .process-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .process-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    background: rgba(11, 20, 35, 0.2);
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .process-dot.is-active {
    background: var(--rust);
    transform: scale(1.3);
  }
  [data-theme="dark"] .process-arrow {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #0B1423;
    /* Soft glow ring on dark bg so the white circles read crisply
       and don't blur into the dark surface around them. */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.6);
  }
  [data-theme="dark"] .process-arrow svg {
    /* Make the chevron read heavier inside the small white circle */
    stroke-width: 2.5;
  }
  [data-theme="dark"] .process-arrow:hover,
  [data-theme="dark"] .process-arrow:focus-visible {
    background: var(--rust);
    color: #FFFFFF;
    border-color: var(--rust);
  }
  [data-theme="dark"] .process-dot {
    background: rgba(251, 248, 243, 0.25);
  }
  [data-theme="dark"] .process-dot.is-active {
    background: var(--rust);
  }
}