/* ============================================
   KOREDE ADEYEMI — PORTFOLIO DESIGN SYSTEM v2
   Clean, warm, photo-led — Instrument Sans
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  --bg: #FAFAFA;
  --bg-card: #FFFFFF;
  --bg-sunk: #F5F5F5;
  --bg-media: #ECECEC;
  --border: #EAEAEA;
  --border-mid: #DDDDDD;

  --text-primary: #111111;
  --text-secondary: #5C5C5C;
  --text-tertiary: #9A9A9A;

  --accent: #111111; /* no color accent — black does the work */

  --font-body: 'Instrument Sans', -apple-system, sans-serif;

  --container: 1080px;
  --gutter: clamp(24px, 5vw, 64px);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-pill: 100px;

  /* ---- Spacing scale (4px base). Nothing off this scale. ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  /* ---- Vertical rhythm: three levels, applied strictly ---- */
  --gap-section: var(--s9);   /* between major sections */
  --gap-block: var(--s7);     /* between blocks inside a section */
  --gap-tight: var(--s4);     /* element to its caption */

  /* ---- Type scale ---- */
  --t-xs: 0.75rem;    /* 12 — kickers, tags */
  --t-sm: 0.8125rem;  /* 13 — meta */
  --t-base: 0.9375rem;/* 15 — secondary body */
  --t-body: 1rem;     /* 16 — body */
  --t-md: 1.0625rem;  /* 17 — lead paragraphs */
  --t-lg: 1.25rem;    /* 20 — card titles */
  --t-xl: clamp(1.35rem, 2.4vw, 1.6rem);
  --t-2xl: clamp(1.65rem, 3vw, 2.1rem);
  --t-3xl: clamp(2rem, 4.8vw, 3.2rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark theme — follows the OS, overridden by the toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D0D0D;
    --bg-card: #161616;
    --bg-sunk: #1C1C1C;
    --bg-media: #1F1F1F;
    --border: #262626;
    --border-mid: #343434;
    --text-primary: #F2F2F2;
    --text-secondary: #A6A6A6;
    --text-tertiary: #6B6B6B;
    --accent: #F2F2F2;
  }
}
:root[data-theme="dark"] {
  --bg: #0D0D0D;
  --bg-card: #161616;
  --bg-sunk: #1C1C1C;
  --bg-media: #1F1F1F;
  --border: #262626;
  --border-mid: #343434;
  --text-primary: #F2F2F2;
  --text-secondary: #A6A6A6;
  --text-tertiary: #6B6B6B;
  --accent: #F2F2F2;
}

@media (max-width: 760px) {
  :root {
    --gap-section: var(--s8);
    --gap-block: var(--s6);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bg); }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

/* ---------- Nav ---------- */
.nav {
  padding: 32px 0;
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-mark {
  font-size: 1.1rem;
  font-weight: 600;
}
.back-wrap { margin-bottom: var(--s7); }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
  padding-top: 4px;
  padding-bottom: 4px;
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.2s ease;
}
.back-link svg { width: 20px; height: 20px; }
.back-link:hover { color: var(--text-primary); }
.nav-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.nav-toggle svg { width: 18px; height: 18px; }

/* Full-screen menu overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter: blur(10px);
  z-index: 200;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.menu-overlay.open { display: flex; }
.menu-overlay a {
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.menu-close {
  position: absolute;
  top: 28px;
  right: var(--gutter);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------- Pill / status badge ---------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-mid);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2FBE5C;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 16px 24px;
  border-radius: var(--radius-pill);
  transition: all 0.25s ease;
}
.btn-primary {
  background: var(--text-primary);
  color: var(--bg);
}
.btn-primary:hover { opacity: 0.85; }
.btn-ghost {
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
}
.btn-ghost:hover { background: var(--bg-card); border-color: var(--text-tertiary); }

/* ---------- Contact email fallback ---------- */
.contact-email {
  margin-top: 16px;
  font-size: 0.92rem;
  color: var(--text-tertiary);
}
.contact-email a {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-mid);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contact-email a:hover { color: var(--text-primary); border-color: var(--text-primary); }

/* ---------- Rounded image container ---------- */
.photo-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-media);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Sections ---------- */
section { position: relative; }
.section-pad { padding-top: 96px; padding-bottom: 96px; }
@media (max-width: 760px) {
  .section-pad { padding-top: 64px; padding-bottom: 64px; }
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Work cards ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 10px;
}
@media (max-width: 860px) {
  .work-grid {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
}
/* one unified card: image flush on top, text flush below, single radius */
.work-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.work-card .photo-frame { aspect-ratio: 16/11; margin-bottom: 0; border-radius: 0; }
.work-card .card-body { padding: 18px 20px 20px; }
.work-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.work-card p { font-size: 0.9rem; color: var(--text-secondary); }
.work-card .tag-row { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Case-study cards "drop" into the grid as the section scrolls into view —
   each falls from above, slightly rotated (echoing the hero fan), and settles.
   Staggered so the four cards assemble the section. Motion-safe only; under
   reduced-motion they use the plain .reveal fade above. */
@media (prefers-reduced-motion: no-preference) {
  .work-card.reveal { opacity: 0; transform: none; }
  .work-card.reveal.in { animation: cardDrop 0.72s var(--ease) both; }
  .work-card.reveal.in > * { animation: none; }   /* the card drops as one unit */
  .work-card:nth-child(1).reveal.in { animation-delay: 0.00s; --drop-rot: -4deg; }
  .work-card:nth-child(2).reveal.in { animation-delay: 0.09s; --drop-rot:  4deg; }
  .work-card:nth-child(3).reveal.in { animation-delay: 0.18s; --drop-rot: -3deg; }
  .work-card:nth-child(4).reveal.in { animation-delay: 0.27s; --drop-rot:  3deg; }
  @keyframes cardDrop {
    from { opacity: 0; transform: translateY(-56px) rotate(var(--drop-rot, -3deg)) scale(0.94); }
    55%  { opacity: 1; }
    to   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  }
}

.tag {
  font-size: 0.72rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-mid);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

/* ---------- Case study (shared across all case pages) ---------- */
.case-hero { padding-top: 0; padding-bottom: 12px; }
.case-hero .eyebrow-row { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.case-hero h1 { font-size: clamp(2rem, 4.8vw, 3.4rem); margin-bottom: 24px; max-width: 16ch; }
.case-hero .dek { font-size: 1.1rem; color: var(--text-secondary); max-width: 60ch; margin-bottom: 48px; line-height: 1.6; }

.meta-row {
  display: flex; gap: 48px; flex-wrap: wrap;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 48px;
}
.meta-item h6 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: 8px; font-weight: 500; }
.meta-item p { font-size: 0.95rem; font-weight: 500; max-width: 24ch; }

.case-figure { margin: 0 auto 64px; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-media); }
.case-figure img { width: 100%; height: auto; display: block; }

/* two screenshots side by side (modals, variants) */
.figure-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: var(--container); margin: 0 auto 64px; }
.figure-duo .case-figure { margin: 0; }
@media (max-width: 720px) { .figure-duo { grid-template-columns: 1fr; } }
.case-figure .placeholder-label {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16/9; color: var(--text-tertiary); font-size: 0.85rem;
  padding: 16px; text-align: center;
}

.text-block { max-width: 68ch; margin: 0 auto 48px; }
.text-block h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 24px; }
.text-block p { font-size: 1.02rem; color: var(--text-secondary); line-height: 1.75; margin-bottom: 16px; }
.text-block p:last-child { margin-bottom: 0; }

.bullets { list-style: none; max-width: 68ch; margin: 0 auto 48px; }
.bullets li { font-size: 1.02rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 12px; padding-left: 24px; position: relative; }
.bullets li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); }
.bullets li strong { color: var(--text-primary); font-weight: 600; }

/* Two-up panels */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: var(--container); margin: 0 auto 64px; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }
.duo .panel, .reflect-grid .panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 32px 32px;
}
.duo .panel h3, .reflect-grid .panel h3 { font-size: 1.1rem; margin-bottom: 16px; }
.duo .panel .role-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); font-weight: 600; margin: -12px 0 16px; }
.duo .panel h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); font-weight: 600; margin: 16px 0 12px; }
.duo .panel ul, .reflect-grid .panel ul { list-style: none; }
.duo .panel li, .reflect-grid .panel li {
  font-size: 0.95rem; color: var(--text-secondary); line-height: 1.55;
  margin-bottom: 12px; padding-left: 16px; position: relative;
}
.duo .panel li::before, .reflect-grid .panel li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary);
}

.reflect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: var(--container); margin: 0 auto 64px; }
@media (max-width: 760px) { .reflect-grid { grid-template-columns: 1fr; } }

/* Section titles */
.section-title { max-width: 68ch; margin: 96px auto 48px; }
.section-title .kicker { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); font-weight: 600; margin-bottom: 12px; }
.section-title h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.section-title p { font-size: 1.02rem; color: var(--text-secondary); margin-top: 12px; line-height: 1.6; }
/* Tighten the gap when a section title follows a full-width image */

/* Feature blocks */
.feature { max-width: var(--container); margin: 0 auto 64px; }
.feature-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.feature-num { font-size: 0.8rem; color: var(--text-tertiary); font-weight: 600; letter-spacing: 0.04em; }
.feature-head h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.feature-head .soft { font-weight: 400; color: var(--text-tertiary); font-size: 0.7em; }
.feature-list { columns: 2; column-gap: 48px; max-width: 78ch; margin-bottom: 32px; list-style: none; }
@media (max-width: 700px) { .feature-list { columns: 1; } }
.feature-list li { break-inside: avoid; font-size: 0.97rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 12px; padding-left: 16px; position: relative; }
.feature-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary); }
.feature-list li strong { color: var(--text-primary); font-weight: 600; }
.feature .feature-sub { font-size: 1.02rem; font-weight: 600; color: var(--text-primary); margin: 8px 0 12px; }
.feature > p { max-width: 72ch; color: var(--text-secondary); font-size: 0.97rem; line-height: 1.65; margin-bottom: 24px; }
.feature > p code, .text-block code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; background: var(--bg-media); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; white-space: nowrap; }

.next-project { margin-top: 96px; padding-top: 64px; padding-bottom: 64px; border-top: 1px solid var(--border); text-align: center; }
.next-project .label { font-size: 0.85rem; color: var(--text-tertiary); margin-bottom: 12px; }
.next-project h3 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-top: 48px;
  padding-bottom: 48px;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.footer-links a:hover { color: var(--text-primary); }
.footer-meta { font-size: 0.8rem; color: var(--text-tertiary); }

/* ---------- Premium case-study components ---------- */

/* Full-bleed hero banner (sits outside .wrap) */
.case-banner {
  width: 100%;
  background: var(--bg-media);
  overflow: hidden;
  margin-bottom: 48px;
}
.case-banner img { width: 100%; height: auto; display: block; }
.case-banner .placeholder-label {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 21/9; color: var(--text-tertiary); font-size: 0.85rem;
  padding: 16px; text-align: center;
}
@media (max-width: 760px) {
  .case-banner .placeholder-label { aspect-ratio: 4/3; }
}

/* Metadata as cards */
.meta-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  max-width: var(--container);
  margin: 0 auto 64px;
}
.meta-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 24px 24px;
}
.meta-card h6 {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-tertiary); font-weight: 600; margin-bottom: 12px;
}
.meta-card p { font-size: 0.95rem; font-weight: 500; line-height: 1.5; }
.meta-card ul { list-style: none; }
.meta-card li {
  font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5;
  margin-bottom: 8px; padding-left: 16px; position: relative;
}
.meta-card li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--text-tertiary);
}
.meta-card li strong { color: var(--text-primary); font-weight: 600; }
.meta-card a { text-decoration: underline; }

/* Problem -> Solution cards */
.ps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: var(--container); margin: 0 auto 64px;
}
@media (max-width: 900px) { .ps-grid { grid-template-columns: 1fr; } }
.ps-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
  display: flex; flex-direction: column;
}
.ps-card .ps-problem { padding: 24px 24px 24px; }
.ps-card .ps-num {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-tertiary); margin-bottom: 12px;
}
.ps-card h3 { font-size: 1.08rem; margin-bottom: 12px; line-height: 1.35; }
.ps-card p { font-size: 0.93rem; color: var(--text-secondary); line-height: 1.6; }
.ps-card .ps-solution {
  margin-top: auto; padding: 24px 24px 24px;
  border-top: 1px solid var(--border); background: var(--bg-sunk);
}
.ps-card .ps-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-tertiary); font-weight: 700; margin-bottom: 8px;
}
.ps-card .ps-solution p { color: var(--text-primary); font-weight: 500; }

/* Before / After comparison */
.ba {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: var(--container); margin: 0 auto 24px;
}
@media (max-width: 820px) { .ba { grid-template-columns: 1fr; } }
.ba-side {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); overflow: hidden;
}
.ba-side.is-before { background: var(--bg-sunk); }
.ba-tag {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  padding: 4px 12px; border-radius: var(--radius-pill);
  margin: 24px 0 0 24px;
}
.ba-side.is-before .ba-tag { background: var(--border-mid); color: var(--text-secondary); }
.ba-side.is-after  .ba-tag { background: var(--text-primary); color: var(--bg); }
.ba-body { padding: 16px 24px 24px; }
.ba-body ul { list-style: none; }
.ba-body li {
  font-size: 0.93rem; color: var(--text-secondary); line-height: 1.55;
  margin-bottom: 12px; padding-left: 16px; position: relative;
}
.ba-body li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary);
}
.ba-body li strong { color: var(--text-primary); font-weight: 600; }
.ba-body .ba-quote {
  font-size: 0.92rem; line-height: 1.6; color: var(--text-secondary);
  font-style: italic; margin-bottom: 12px;
}
.ba-figure { background: var(--bg-media); }
.ba-figure img { width: 100%; height: auto; display: block; }
.ba-figure .placeholder-label {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4/3; color: var(--text-tertiary); font-size: 0.82rem;
  padding: 16px; text-align: center;
}

/* Conversion flow / funnel */
.flow {
  display: flex; align-items: stretch; gap: 12px;
  max-width: var(--container); margin: 0 auto 64px; flex-wrap: nowrap;
}
.flow-step {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 24px 24px;
}
.flow-step .flow-num {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-tertiary); margin-bottom: 12px;
}
.flow-step h4 { font-size: 1rem; margin-bottom: 8px; }
.flow-step p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.55; }
.flow-arrow {
  align-self: center; color: var(--text-tertiary);
  font-size: 1.1rem; flex: 0 0 auto;
}
@media (max-width: 900px) {
  .flow { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); margin: -2px 0; }
}

/* Design principles */
.principles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  max-width: var(--container); margin: 0 auto 64px;
}
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }
.principle {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 32px 24px;
}
.principle .p-num {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-tertiary); margin-bottom: 12px;
}
.principle h3 { font-size: 1.12rem; margin-bottom: 12px; }
.principle p { font-size: 0.94rem; color: var(--text-secondary); line-height: 1.65; }
.principle .p-applied {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 0.9rem; color: var(--text-primary);
}
.principle .p-applied strong { font-weight: 600; }

/* Audit checklist chips */
.audit-chips {
  display: flex; flex-wrap: wrap; gap: 12px;
  max-width: var(--container); margin: 0 auto 48px;
}
.audit-chips span {
  font-size: 0.88rem; color: var(--text-secondary);
  border: 1px solid var(--border-mid); border-radius: var(--radius-pill);
  padding: 8px 16px; background: var(--bg-card);
}

/* Stat row */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px; max-width: var(--container); margin: 0 auto 64px;
}
.stat {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 24px 24px;
}
.stat .stat-num { font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.stat .stat-label { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.5; }

/* Responsive screen gallery */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: var(--container); margin: 0 auto 32px;
}
@media (max-width: 820px) { .gallery { grid-template-columns: 1fr; } }
.gallery .shot {
  background: var(--bg-media); border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border);
}
.gallery .shot img { width: 100%; height: auto; display: block; }
.gallery .shot .placeholder-label {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3/4; color: var(--text-tertiary); font-size: 0.82rem;
  padding: 16px; text-align: center;
}

/* Figure captions (annotated visuals) */
.figcap {
  max-width: 68ch; margin: 0 auto 64px;
  font-size: 0.9rem; color: var(--text-tertiary); line-height: 1.6;
}
.figcap strong { color: var(--text-secondary); font-weight: 600; }
/* Tighten whatever the caption describes, so the two read as one unit */

/* ============================================
   VERTICAL RHYTHM — single source of truth
   Three gaps only. Every block obeys them, with
   no per-component exceptions. This is what makes
   the spacing read as deliberate rather than ad hoc.
   ============================================ */

/* 1. Between major sections — always identical */
.section-title {
  max-width: 68ch;
  margin-top: var(--gap-section);
  margin-bottom: var(--gap-block);
  margin-left: 0;
  margin-right: 0;
}

/* Every measure-constrained block aligns to the container's left edge,
   so copy lines up with the cards instead of floating centred inside them. */
.text-block,
.bullets,
.figcap,
.section-title,
.resume-section,
.spec-table,
.challenge {
  margin-left: 0;
  margin-right: 0;
}
/* A section title opening a page shouldn't push off the top */
.case-hero > .section-title:first-child { margin-top: 0; }

/* 2. Between blocks inside a section — always identical */
.text-block,
.bullets,
.duo,
.reflect-grid,
.feature,
.case-figure,
.case-banner,
.meta-row,
.meta-cards,
.ps-grid,
.flow,
.principles,
.stat-row,
.audit-chips,
.gallery,
.figcap {
  margin-bottom: var(--gap-block);
}

/* 3. Captions sit on the same rhythm as everything else — no exceptions.
   They stay visually tied to what they describe by being left-aligned to
   the same edge and set in tertiary type, not by a tighter gap. */
.ba { margin-bottom: var(--gap-block); }

/* Last block in a section shouldn't double up with the next section gap */
.feature > .case-figure:last-child,
.feature > .feature-list:last-child { margin-bottom: 0; }
.text-block:last-child, .bullets:last-child { margin-bottom: 0; }

/* ============================================
   THEME TOGGLE
   ============================================ */
.nav-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--border-mid); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { width: 18px; height: 18px; }
/* Show sun in dark mode, moon in light mode */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* Colour transitions on theme change — but never on page load */
html.theme-ready,
html.theme-ready body,
html.theme-ready .nav-toggle,
html.theme-ready .theme-toggle,
html.theme-ready .meta-card,
html.theme-ready .ps-card,
html.theme-ready .principle,
html.theme-ready .stat,
html.theme-ready .ba-side,
html.theme-ready .panel,
html.theme-ready .photo-frame,
html.theme-ready .case-figure,
html.theme-ready .audit-chips span {
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}

/* ============================================
   MOTION — restrained, and it earns its place
   ============================================ */

/* Entrance */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
/* Stagger children of a grid so they arrive in sequence, not as a block */
.reveal.in > * { animation: rise 0.6s var(--ease) backwards; }
.reveal.in > *:nth-child(1) { animation-delay: 0.00s; }
.reveal.in > *:nth-child(2) { animation-delay: 0.06s; }
.reveal.in > *:nth-child(3) { animation-delay: 0.12s; }
.reveal.in > *:nth-child(4) { animation-delay: 0.18s; }
.reveal.in > *:nth-child(5) { animation-delay: 0.24s; }
.reveal.in > *:nth-child(6) { animation-delay: 0.30s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Text blocks shouldn't stagger their own paragraphs */
.text-block.reveal.in > *,
.bullets.reveal.in > *,
.section-title.reveal.in > * { animation: none; }

/* Work cards — lift and reveal the image */
.work-card .photo-frame { overflow: hidden; }
.work-card .photo-frame img {
  transition: transform 0.6s var(--ease);
}
.work-card:hover .photo-frame img { transform: scale(1.02); }
.work-card h3 { transition: opacity 0.2s var(--ease); }
.work-card:hover h3 { opacity: 0.7; }

/* Cards lift subtly */
.meta-card, .ps-card, .principle, .stat, .shot {
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ps-card:hover, .principle:hover, .stat:hover {
  transform: translateY(-2px);
  border-color: var(--border-mid);
}

/* Nav + links */
.nav-mark { transition: opacity 0.2s var(--ease); }
.nav-mark:hover { opacity: 0.65; }
.nav-toggle { transition: transform 0.2s var(--ease), border-color 0.2s var(--ease); }
.nav-toggle:hover { border-color: var(--border-mid); }
.nav-toggle:active { transform: scale(0.94); }
.footer-links a { transition: opacity 0.2s var(--ease); }
.footer-links a:hover { opacity: 0.6; }

/* Next-project arrow drift */
.next-project a h3 { transition: transform 0.3s var(--ease); display: inline-block; }
.next-project a:hover h3 { transform: translateX(6px); }

/* Back link arrow */
.back-link svg { transition: transform 0.25s var(--ease); }
.back-link:hover svg { transform: translateX(-3px); }

/* Buttons */
.btn { transition: transform 0.2s var(--ease), opacity 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease); }
.btn:active { transform: scale(0.97); }

/* Honour the user's motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================
   DESIGN SHOTS
   ============================================ */
.page-head { margin-bottom: var(--gap-section); }
.page-head h1 { font-size: var(--t-3xl); margin-bottom: var(--s4); }
.page-head p { font-size: var(--t-md); color: var(--text-secondary); max-width: 56ch; line-height: 1.6; }

.shots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--s6);
  row-gap: var(--s8);
  margin-bottom: var(--gap-section);
}
@media (max-width: 820px) {
  .shots-grid { grid-template-columns: 1fr; row-gap: var(--s7); }
}
/* A shot can claim the full row when it deserves to */
.shot-item.is-wide { grid-column: 1 / -1; }

/* one unified card: media flush on top, text flush below, single radius */
.shot-item {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.shot-media {
  background: var(--bg-media);
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 0;
}
.shot-media img { width: 100%; height: auto; display: block; transition: transform 0.6s var(--ease); }
.shot-item:hover .shot-media img { transform: scale(1.02); }
.shot-body { padding: 16px 18px 18px; }
.shot-media .placeholder-label {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4/3; color: var(--text-tertiary); font-size: var(--t-base);
  padding: var(--s4); text-align: center;
}
.shot-item.is-wide .shot-media .placeholder-label { aspect-ratio: 16/9; }
.shot-title { font-size: var(--t-body); font-weight: 600; margin-bottom: var(--s1); }
.shot-meta { font-size: var(--t-sm); color: var(--text-tertiary); }

/* Full-bleed figure inside a case study — for images that need the room */
.case-figure.is-full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}

/* ============================================
   RESUME
   ============================================ */
.resume-actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }
.resume-section { max-width: 72ch; margin: 0 0 var(--gap-block); }
.resume-section > h2 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-tertiary); font-weight: 600;
  padding-bottom: var(--s3); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--border);
}
.resume-role { margin-bottom: var(--s6); }
.resume-role:last-child { margin-bottom: 0; }
.resume-role-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s1);
}
.resume-role h3 { font-size: var(--t-body); font-weight: 600; }
.resume-role .resume-when { font-size: var(--t-sm); color: var(--text-tertiary); white-space: nowrap; }
.resume-role .resume-where { font-size: var(--t-base); color: var(--text-secondary); margin-bottom: var(--s3); }
.resume-role ul { list-style: none; }
.resume-role li {
  font-size: var(--t-base); color: var(--text-secondary); line-height: 1.65;
  margin-bottom: var(--s2); padding-left: var(--s4); position: relative;
}
.resume-role li::before {
  content: ''; position: absolute; left: 0; top: 0.65em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--text-tertiary);
}
.resume-skills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.resume-skills span {
  font-size: var(--t-sm); color: var(--text-secondary);
  border: 1px solid var(--border-mid); border-radius: var(--radius-pill);
  padding: var(--s2) var(--s3);
}

/* ============================================
   PAGE-SPECIFIC COMPONENTS (was inline)
   ============================================ */
.spec-table { width: 100%; border-collapse: collapse; max-width: 72ch; margin: 0 0 var(--gap-block); font-size: var(--t-base); }
.spec-table td { padding: var(--s3) 0; border-top: 1px solid var(--border); color: var(--text-secondary); line-height: 1.5; vertical-align: top; }
.spec-table tr td:first-child { font-weight: 600; color: var(--text-primary); white-space: nowrap; padding-right: var(--s6); width: 1%; }
.spec-table tr:last-child td { border-bottom: 1px solid var(--border); }

.challenge { max-width: 72ch; margin: 0 0 var(--gap-block); }
.challenge h3 { font-size: var(--t-lg); margin-bottom: var(--s3); }
.challenge p { font-size: var(--t-body); color: var(--text-secondary); line-height: 1.7; }
.challenge p .lead-in { color: var(--text-primary); font-weight: 600; }

/* ============================================
   HOME — section heads
   ============================================ */
.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6);
}
.sec-head h2 { font-size: var(--t-2xl); }
.sec-head p { font-size: var(--t-base); color: var(--text-secondary); margin-top: var(--s2); max-width: 46ch; }
.sec-head .see-all {
  font-size: var(--t-base); color: var(--text-secondary); font-weight: 500;
  display: inline-flex; align-items: center; gap: var(--s2);
  white-space: nowrap; transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.sec-head .see-all:hover { color: var(--text-primary); gap: var(--s3); }
@media (max-width: 620px) {
  .sec-head { flex-wrap: nowrap; align-items: center; gap: var(--s3); }
  .sec-head h2 { font-size: var(--t-xl); }
  .sec-head .btn { padding: var(--s3) var(--s4); font-size: var(--t-sm); white-space: nowrap; }
}

/* ============================================
   SHOTS MARQUEE (home) — scrolls itself
   ============================================ */
.shots-marquee {
  overflow: hidden;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}
.marquee-track {
  display: flex;
  gap: var(--s5);
  width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee-set { display: flex; gap: var(--s5); }
/* Track = set + gap + set. Shifting by one set plus one gap loops seamlessly. */
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - (var(--s5) / 2)), 0, 0); }
}
.shots-marquee:hover .marquee-track,
.shots-marquee:focus-within .marquee-track { animation-play-state: paused; }

.rail-item {
  flex: 0 0 clamp(240px, 26vw, 320px);
  display: block;
}
.rail-media {
  background: var(--bg-media);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  margin-bottom: var(--s3);
}
.rail-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.rail-item:hover .rail-media img { transform: scale(1.04); }
.rail-media .placeholder-label {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--text-tertiary); font-size: var(--t-sm); padding: var(--s4); text-align: center;
}
.rail-title { font-size: var(--t-base); font-weight: 600; margin-bottom: 2px; }
.rail-meta { font-size: var(--t-sm); color: var(--text-tertiary); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .shots-marquee { overflow-x: auto; }
}

/* ============================================
   LIGHTBOX (shots page)
   ============================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  display: none;
  overflow-y: auto;
  padding: var(--s7) var(--gutter);
}
.lightbox.open { display: block; }
.lightbox-close {
  position: sticky; top: 0; margin-left: auto; margin-bottom: var(--s5);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.lightbox-close:hover { color: var(--text-primary); border-color: var(--border-mid); }
.lightbox-close:active { transform: scale(0.94); }
.lightbox-close svg { width: 18px; height: 18px; }
.lightbox-inner { max-width: 1000px; margin: 0 auto; }
.lightbox-media {
  background: var(--bg-media); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--s5);
}
.lightbox-media img { width: 100%; height: auto; display: block; }
.lightbox-media .placeholder-label {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9;
  color: var(--text-tertiary); font-size: var(--t-base); padding: var(--s4); text-align: center;
}
.lightbox-meta { padding-bottom: var(--s8); }
.lightbox-meta h3 { font-size: var(--t-xl); margin-bottom: var(--s2); }
.lightbox-meta .lb-sub { font-size: var(--t-base); color: var(--text-secondary); margin-bottom: var(--s4); }
.lightbox-meta .lb-link {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-base); font-weight: 500; color: var(--text-primary);
  border-bottom: 1px solid var(--border-mid); padding-bottom: 2px;
  transition: gap 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lightbox-meta .lb-link:hover { gap: var(--s3); border-color: var(--text-primary); }
body.lb-open { overflow: hidden; }

/* The back link owns the whole gap beneath it. Nothing that follows
   adds its own top padding, or the gap drifts page to page. */
.back-wrap + * { padding-top: 0; }

/* The reveal stagger targets .reveal.in > * and would otherwise replace
   the marquee's own animation. This wins on specificity. */
.reveal.in > .marquee-track { animation: marquee 45s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .reveal.in > .marquee-track { animation: none; }
}

/* Resume — additions for the real CV content */
.resume-contact {
  margin-top: var(--s5);
  font-size: var(--t-sm);
  color: var(--text-tertiary);
  line-height: 1.9;
}
.resume-contact a { color: var(--text-secondary); border-bottom: 1px solid var(--border-mid); padding-bottom: 1px; }
.resume-contact a:hover { color: var(--text-primary); border-color: var(--text-primary); }

.resume-summary { font-size: var(--t-base); color: var(--text-secondary); line-height: 1.75; }

.resume-note {
  font-size: var(--t-sm);
  color: var(--text-tertiary);
  line-height: 1.6;
  margin-bottom: var(--s3);
}

.resume-defs { display: grid; grid-template-columns: 200px 1fr; gap: var(--s3) var(--s5); }
@media (max-width: 620px) { .resume-defs { grid-template-columns: 1fr; gap: var(--s1) var(--s3); } }
.resume-defs dt { font-size: var(--t-base); font-weight: 600; }
.resume-defs dd { font-size: var(--t-base); color: var(--text-secondary); line-height: 1.6; }
@media (max-width: 620px) { .resume-defs dd { margin-bottom: var(--s4); } }

/* Print — someone will hit Cmd+P on this page */
@media print {
  .nav, .menu-overlay, .back-wrap, .site-footer, .resume-actions, .theme-toggle { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; }
  .resume-section { break-inside: avoid; }
  .resume-role { break-inside: avoid; }
}

/* Next shot — same language as .next-project, inside the lightbox */
.next-shot {
  margin-top: var(--gap-section);
  padding-top: var(--s8);
  padding-bottom: var(--s8);
  border-top: 1px solid var(--border);
  text-align: center;
  cursor: pointer;
  background: none;
  border-left: none; border-right: none; border-bottom: none;
  width: 100%;
  font-family: inherit;
  color: inherit;
  display: block;
}
.next-shot .label { font-size: var(--t-base); color: var(--text-tertiary); margin-bottom: var(--s3); }
.next-shot h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.next-shot:hover h3 { transform: translateX(6px); }

/* ============================================
   VISIT WEBSITE — live-link affordance under the dek
   ============================================ */
.visit-row {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--gap-block);
}
.visit-link svg {
  width: 15px; height: 15px;
  transition: transform 0.25s var(--ease);
}
.visit-link:hover svg { transform: translate(2px, -2px); }

/* ============================================
   ABOUT — photo marquee
   ============================================ */
/* Edge fade — painted in the page colour so the carousel reads as
   content clipped inside a frame. A pseudo-element beats mask-image,
   which Chrome drops intermittently on compositing layers. */
.shots-marquee::before, .shots-marquee::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: clamp(40px, 7%, 96px);
  z-index: 2;
  pointer-events: none;
}
.shots-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 55%, transparent 100%);
}
.shots-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 55%, transparent 100%);
}

/* The About page reuses the home rail verbatim; it just needs breathing room
   before the bio that follows it (the home instance is followed by a padded
   section, so it carries no bottom margin of its own). */
.about-hero .shots-marquee { margin-bottom: var(--gap-block); }

/* ============================================
   BEFORE / AFTER COMPARE SLIDER
   ============================================ */
.compare {
  position: relative;
  max-width: var(--container);
  margin: 0 auto var(--gap-block);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-media);
  /* horizontal drags belong to the slider; vertical scrolling stays with the page */
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  cursor: ew-resize;
}
.compare img {
  display: block; width: 100%; height: auto;
  -webkit-user-drag: none; user-drag: none; pointer-events: none;
}
/* the "after" layer is clipped from the left by --pos */
.compare .compare-after {
  position: absolute; inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 var(--pos, 50%));
  will-change: clip-path;
}
.compare .compare-after img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }

.compare-handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: var(--bg);
  transform: translateX(-1px);
  pointer-events: none;
  will-change: left;
}
/* the grip stays in view on a very tall comparison */
.compare-grip {
  position: sticky;
  top: 50vh;
  display: block;
  width: 48px; height: 48px;
  margin-left: -23px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-mid);
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
}
.compare-grip::before {
  content: '‹ ›';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px; letter-spacing: 3px;
  color: var(--text-primary); font-weight: 600;
}
.compare:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }

/* chrome overlay — keeps the labels out of the image flow entirely */
.compare-chrome {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 0 var(--s4);
  pointer-events: none;
  z-index: 3;
}
.compare-tag {
  position: sticky; top: var(--s5);
  font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.compare-hint {
  max-width: 68ch; margin: calc(var(--gap-block) * -1 + var(--s4)) 0 var(--gap-block);
  font-size: var(--t-sm); color: var(--text-tertiary);
}

/* ==========================================================================
   Motion layer — signature interactions (site-wide, driven by motion.js)
   Gated behind prefers-reduced-motion; transform/opacity only, no layout change.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* 1 · primary heading reveals word-by-word on load */
  .hero h1 .word, .case-hero h1 .word, .work-hero h1 .word,
  .about-hero h1 .word, .page-head h1 .word {
    display: inline-block; opacity: 0; transform: translateY(0.5em);
    animation: wordUp 0.75s var(--ease) both; animation-delay: var(--d, 0s);
  }
  @keyframes wordUp { to { opacity: 1; transform: none; } }

  /* 2 · live status dot — pulsing ring */
  .status-dot { position: relative; }
  .status-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: #2FBE5C; opacity: .5; animation: dotPulse 2.6s var(--ease) infinite;
  }
  @keyframes dotPulse { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.7); } }

  /* 4 · magnetic — buttons + the menu & appearance icons */
  .btn.magnetic, .theme-toggle.magnetic, .nav-toggle.magnetic {
    transition: transform 0.3s var(--ease), background 0.2s var(--ease),
                border-color 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease);
    will-change: transform;
  }
}

/* ==========================================================================
   Image lightbox — click any case-study figure to view it full-screen
   ========================================================================== */
.case-figure img { cursor: zoom-in; }
.cs-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 4vmin; touch-action: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0.28s var(--ease);
}
.cs-lightbox.open { opacity: 1; visibility: visible; }
.cs-lightbox-backdrop {
  position: absolute; inset: 0; cursor: zoom-out;
  background: rgba(8, 8, 10, 0.92);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity 0.28s var(--ease);
}
.cs-lightbox img {
  position: relative;
  max-width: 92vw; max-height: 92vh; width: auto; height: auto;
  border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  cursor: default; transform: scale(0.97);
  transition: transform 0.28s var(--ease);
}
.cs-lightbox.open img { transform: scale(1); }
/* while a finger is dragging, kill transitions so image + backdrop track 1:1 */
.cs-lightbox.dragging img,
.cs-lightbox.dragging .cs-lightbox-backdrop { transition: none; }
.cs-lightbox-close {
  position: fixed; top: 20px; right: 24px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cs-lightbox-close:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); }
.cs-lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cs-lightbox-nav:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); }
.cs-lightbox-prev { left: 20px; }
.cs-lightbox-next { right: 20px; }
@media (max-width: 640px) { .cs-lightbox-prev { left: 10px; } .cs-lightbox-next { right: 10px; } .cs-lightbox-nav { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) {
  .cs-lightbox, .cs-lightbox img { transition: opacity 0.15s linear; }
  .cs-lightbox img { transform: none; }
  .cs-lightbox.open img { transform: none; }
}

/* ==========================================================================
   Menu overlay — staggered link entrance + animated underline on hover
   ========================================================================== */
.menu-overlay a { position: relative; }
.menu-overlay a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.menu-overlay a:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  /* keyframe carries the from-state (with `both` fill) so links can never get
     stuck hidden if the animation doesn't run — no base opacity:0 needed. */
  .menu-overlay.open a { animation: menuLinkIn 0.5s var(--ease) both; }
  .menu-overlay.open a:nth-of-type(1) { animation-delay: 0.05s; }
  .menu-overlay.open a:nth-of-type(2) { animation-delay: 0.11s; }
  .menu-overlay.open a:nth-of-type(3) { animation-delay: 0.17s; }
  .menu-overlay.open a:nth-of-type(4) { animation-delay: 0.23s; }
  .menu-overlay.open a:nth-of-type(5) { animation-delay: 0.29s; }
  @keyframes menuLinkIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }
}