/* ============================================
   Made by Michael — Portfolio preview
   v2 — Tavli-inspired, lighter
   Sibling palette to Tavli (5 warm browns + cream)
   Playfair Display headings, Poppins body
   Translucent module signature pattern
   ============================================ */

:root {
  /* ── Core palette: 5 warm tones, lighter than Tavli ── */
  --background:     #E8D8B8;   /* sandy cream — elevated cards */
  --background-soft:#F1E6CE;   /* lighter sandy — alt card */
  --surface:        #C9A881;   /* warm tan — section bands, page accents */
  --surface-deep:   #A67F5B;   /* mid brown — deep section, hero gradient stop */
  --primary:        #6B4F3A;   /* deep brown — buttons, focus, strong text */
  --primary-deep:   #4F3B2A;   /* darker brown — hover */
  --text:           #1A1A1A;   /* near-black — body text on light cards */
  --text-soft:      #3D332A;   /* warm dark brown — secondary text on cards */
  --light:          #F8F2E6;   /* cream — text on dark, page bg */
  --light-warm:     #F2E9D8;   /* slightly warmer cream — page bg */
  --shadow-tone:    #2B1E13;   /* deep warm — used in shadows/scrims at low alpha */
  --case-text:      #2A241D;   /* near-charcoal warm-neutral — case-page heading override */
  --case-text-soft: #3A332B;   /* warm charcoal — case-page body override */
  --case-text-emph: #1F1A14;   /* near-black for emphasis — case-page strong */

  /* ── State shades (8% / 12% rule) ── */
  --background-hover: #DCCBA8;
  --background-active:#D2C09A;
  --primary-hover:    #7A5E49;
  --primary-active:   #846852;

  /* ── Module (translucent card) — Tavli signature, more present ── */
  --module-fill:        rgba(241, 230, 206, 0.92);  /* near-solid sandy cream — stands out clearly */
  --module-fill-hover:  rgba(248, 242, 230, 0.98);
  --module-border:      rgba(107, 79, 58, 0.32);    /* primary at 32% — visible warm line */
  --module-border-hover:rgba(107, 79, 58, 0.55);
  --module-border-strong:rgba(107, 79, 58, 0.45);   /* for cards that want more weight */

  /* ── Signature arch — used ONLY on the portrait. ── */
  --radius-arch:        100px 100px 16px 16px;

  /* ── Gradients — depth signature ── */
  --gradient-hero:    linear-gradient(180deg, var(--light-warm) 0%, var(--background) 60%, var(--surface) 100%);
  --gradient-page:    linear-gradient(180deg, var(--light-warm) 0%, var(--background-soft) 100%);
  --gradient-band:    linear-gradient(180deg, var(--background) 0%, var(--surface) 100%);
  --gradient-deep:    linear-gradient(180deg, var(--surface) 0%, var(--primary) 100%);

  /* ── Type scale (Minor Second 1.067, Tavli-aligned, fluid) ── */
  --type-display-xl: clamp(2.625rem, 5vw + 1rem, 4.25rem);  /* 42-68px */
  --type-display-l:  clamp(2rem, 3vw + 1rem, 2.875rem);      /* 32-46px */
  --type-display-m:  clamp(1.6875rem, 2vw + 1rem, 2.25rem);  /* 27-36px */
  --type-h1:         1.5rem;     /* 24 */
  --type-h2:         1.3125rem;  /* 21 */
  --type-h3:         1.125rem;   /* 18 */
  --type-body-l:     1.125rem;   /* 18 */
  --type-body:       1rem;       /* 16 */
  --type-caption:    0.875rem;   /* 14 */
  --type-eyebrow:    0.75rem;    /* 12 */

  /* ── Spacing (Tavli scale — 4-base) ── */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;
  --space-3xl: 80px;
  --space-4xl: 120px;

  /* ── Radius (Tavli scale) ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 100px;

  /* ── Shadows (Tavli warm-tinted) ── */
  --shadow-xs:   0 1px 2px rgba(31, 27, 23, 0.10);
  --shadow-sm:   0 4px 12px rgba(79, 59, 42, 0.08);
  --shadow-md:   0 8px 24px rgba(79, 59, 42, 0.12);
  --shadow-lg:   0 16px 48px rgba(79, 59, 42, 0.18);

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snappy: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    100ms;
  --dur-base:    200ms;
  --dur-slow:    300ms;
  --dur-state:   320ms;  /* header, drawer, backdrop transitions */
  --dur-page:    400ms;
  --dur-reveal:  500ms;  /* scroll-reveal entry */
  --dur-reveal-x: 600ms; /* timeline horizontal reveal */

  /* ── Layout ── */
  --max-width: 1280px;
  --gutter-mobile:  20px;
  --gutter-tablet:  40px;
  --gutter-desktop: 64px;
}

/* ============================================
   Reset & base
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--text);
  background: var(--gradient-page);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Paper-grain texture — subtle noise overlay across the whole page ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.31 0 0 0 0 0.23 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Mono helper — third typeface, used on metadata only ── */
.mono {
  font-family: 'JetBrains Mono', 'Söhne Mono', ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0;
  font-feature-settings: 'tnum' 1;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--primary-deep); }
}

a.underline-link {
  background-image: linear-gradient(var(--primary), var(--primary));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a.underline-link:hover { color: var(--primary-deep); }
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--primary);
}

p { margin: 0 0 1em; max-width: 65ch; }

/* ============================================
   Typography helpers
   ============================================ */

.eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: var(--type-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
  margin: 0 0 var(--space-md);
  display: block;
}

.display-xl { font-size: var(--type-display-xl); line-height: 1.05; letter-spacing: -0.02em; }
.display-l  { font-size: var(--type-display-l);  line-height: 1.08; letter-spacing: -0.018em; }
.display-m  { font-size: var(--type-display-m);  line-height: 1.15; letter-spacing: -0.015em; }
.h2         { font-size: var(--type-h2);         line-height: 1.25; }
.h3         { font-size: var(--type-h3);         line-height: 1.35; }

.body-l {
  font-size: var(--type-body-l);
  line-height: 1.6;
  max-width: 38em;
  color: var(--text-soft);
  font-weight: 400;
}
.caption { font-size: var(--type-caption); color: var(--text-soft); font-style: italic; }

/* Greek/bilingual sub-headline (Tavli flourish) */
.bilingual {
  display: inline-block;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.85em;
  color: var(--surface-deep);
  margin-left: var(--space-sm);
  letter-spacing: 0.01em;
}

/* ============================================
   Layout
   ============================================ */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
}
@media (min-width: 768px) {
  .container { padding-left: var(--gutter-tablet); padding-right: var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .container { padding-left: var(--gutter-desktop); padding-right: var(--gutter-desktop); }
}

section { padding: var(--space-xxl) 0; }   /* 48px mobile */
@media (min-width: 1024px) { section { padding: var(--space-3xl) 0; } }   /* 80px desktop — was 120px */

.section-band       { background: var(--gradient-band); color: var(--primary); position: relative; }
.section-band h2    { color: var(--primary); }
.section-band .body-l { color: var(--text-soft); }

/* Auto curve dividers above and below every .section-band — no HTML needed */
.section-band::before,
.section-band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 1;
}
/* Top curve: band's top colour bleeds upward into the page */
.section-band::before {
  top: -47px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'><path d='M0,48 C360,0 1080,0 1440,48 L1440,48 L0,48 Z' fill='%23E8D8B8'/></svg>");
}
/* Bottom curve: band's bottom colour bleeds downward into the page */
.section-band::after {
  bottom: -47px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'><path d='M0,0 C360,48 1080,48 1440,0 L1440,0 L0,0 Z' fill='%23C9A881'/></svg>");
}

.section-deep       { background: var(--gradient-deep); color: var(--light); position: relative; }
.section-deep h2    { color: var(--light); }
.section-deep .body-l, .section-deep p { color: var(--light); }
.section-deep .eyebrow { color: var(--background); }

/* Same auto-curve treatment for deep sections — fills with the deep gradient stops */
.section-deep::before,
.section-deep::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 1;
}
.section-deep::before {
  top: -47px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'><path d='M0,48 C360,0 1080,0 1440,48 L1440,48 L0,48 Z' fill='%23C9A881'/></svg>");
}
.section-deep::after {
  bottom: -47px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'><path d='M0,0 C360,48 1080,48 1440,0 L1440,0 L0,0 Z' fill='%236B4F3A'/></svg>");
}

/* Standalone divider element (still used on the homepage between hero and band) */
.curve-divider {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: -1px;
  margin-bottom: -1px;
}
.curve-divider svg { display: block; width: 100%; height: 100%; }

/* ============================================
   Header
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: none;
  padding: 14px var(--gutter-mobile);
}
@media (min-width: 768px) {
  .site-header { padding-left: var(--gutter-tablet); padding-right: var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .site-header { padding-left: var(--gutter-desktop); padding-right: var(--gutter-desktop); }
}

/* The inner row is the floating pill: logo on the left, nav links + CTA on the right */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: 64px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--light) 92%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--module-border);
  border-radius: var(--radius-full);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 4%, transparent);
}

/* Logo: serif word + subtle dot mark */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--primary);
  text-decoration: none;
  line-height: 1;
}
.logo__mark {
  width: 44px;
  height: 44px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 50%;
  display: block;
  flex: 0 0 auto;
}
.logo:hover { color: var(--primary-deep); }

/* Nav: links sit flat inside the outer header pill, with breathable spacing.
   The last child becomes a filled-pill CTA (mirroring the "Try for free" pattern). */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: transparent;
  border: none;
  padding: 0;
}
.nav a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: var(--type-body);
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
  }
}
.nav a.active {
  color: var(--light);
  background: var(--primary);
}
.nav a.active:hover { background: var(--primary-deep); color: var(--light); }

/* CTA pill — last nav link styled like Prompt GPT's "Try for free".
   Uses `> a:last-of-type` (not :last-child) so the rule survives JS that
   appends non-anchor siblings to .nav on mobile (eyebrows + footer block). */
.nav > a:last-of-type {
  background: var(--module-fill-hover);
  color: var(--primary);
  border: 1px solid var(--module-border);
  margin-left: var(--space-xs);
}
.nav > a:last-of-type:hover {
  background: var(--primary);
  color: var(--light);
  border-color: var(--primary);
}
.nav > a:last-of-type.active {
  background: var(--primary);
  color: var(--light);
  border-color: var(--primary);
}

/* ── Hamburger toggle (injected via script.js). Desktop: hidden. ── */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  border-radius: var(--radius-full);
  margin-left: var(--space-xs);
  flex-shrink: 0;
}
.nav-toggle:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.nav-toggle span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: top var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }

/* ── Section eyebrows + footer block (injected by JS on every page).
   Hidden on desktop; revealed inside the mobile overlay media query. ── */
.nav__eyebrow { display: none; }
.nav__footer { display: none; }

/* ── Mobile: full-screen takeover overlay ──
   Solid background, no backdrop-filter, no transform. The previous slide-in
   drawer suffered two iOS Safari bugs: (1) a backdrop-filter halo leaking past
   the translated-off-screen drawer (visible sliver on the right in the closed
   state), and (2) backdrop-filter silently failing on transformed fixed
   elements, leaving the drawer effectively see-through when open. Both fixed
   by switching to a solid opacity-fade overlay. */
@media (max-width: 768px) {
  .site-header { padding: 10px var(--gutter-mobile); }
  .site-header__inner {
    height: auto;
    min-height: 56px;
    padding: 6px 6px;
    gap: 8px;
  }
  .logo { font-size: 1.0625rem; }

  .nav-toggle { display: inline-block; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 96px 24px 32px;
    background: var(--light);
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-state) var(--ease-out),
                visibility 0s linear var(--dur-state);
    z-index: 90;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.nav-open .nav {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-state) var(--ease-out),
                visibility 0s linear 0s;
  }
  body.nav-open { overflow: hidden; }

  /* Section eyebrows — Playfair italic, uppercase tracking, thin rule. */
  .nav__eyebrow {
    display: block;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin: 0 0 12px;
    padding: 0;
  }
  .nav__eyebrow::after {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    background: var(--module-border);
    margin-top: 8px;
  }
  /* Second-and-later eyebrows get breathing room above */
  .nav a + .nav__eyebrow { margin-top: 32px; }

  /* Primary nav links: heavy Poppins, brown, generous rhythm. */
  .nav a {
    position: relative;
    width: 100%;
    padding: 12px 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--primary);
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  @media (min-width: 380px) {
    .nav a { font-size: 1.75rem; }
  }
  /* Override desktop CTA-pill on the last anchor so every primary link in the
     overlay shares one treatment. Matches specificity (0,2,0). */
  .nav > a:last-of-type {
    background: transparent;
    border: none;
    margin-left: 0;
  }
  .nav > a:last-of-type:hover {
    background: transparent;
    color: var(--primary);
    border-color: transparent;
  }
  /* Current-page indicator — small filled dot to the left of the active link. */
  .nav a.active {
    background: transparent;
    color: var(--primary);
  }
  .nav a.active::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    transform: translateY(-50%);
  }

  /* Footer block — email + LinkedIn, anchored to the bottom of the overlay. */
  .nav__footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--module-border);
  }
  .nav__footer a {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 6px 0;
    min-height: 0;
    color: var(--text-soft);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
  }
  .nav__footer a:first-child {
    color: var(--primary);
    font-size: 1rem;
  }

  /* Animate hamburger into an X when overlay is open */
  body.nav-open .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

  @media (prefers-reduced-motion: reduce) {
    .nav { transition: opacity 0s, visibility 0s; }
  }
}

/* ============================================
   Hero (home)
   ============================================ */

.hero-home {
  background: var(--gradient-hero);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-4xl);
  position: relative;
  overflow: hidden;
}

.hero-home::before {
  /* Soft halo behind the chair on desktop, top-center fallback on mobile */
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 600px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--light) 60%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.hero-home > .container { position: relative; z-index: 1; }

/* Two-column grid on desktop: copy left, chair right.
   Mobile stacks (single column) — chair becomes a feature row below. */
.hero-home__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.hero-home__copy { min-width: 0; }

.hero-home__ctas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Mobile: pull copy up, drop CTAs (chair becomes the visual anchor instead).
   Crop transparent top of the image so the chair sits above the fold. */
@media (max-width: 767px) {
  .hero-home { padding-top: var(--space-md); padding-bottom: 0; }
  .hero-home__ctas { display: none; }
  .hero-home__chair { width: 100%; }
  .hero-home__chair img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    max-width: none;
    object-fit: cover;
    object-position: center bottom;
  }
}

.hero-home__chair {
  display: flex;
  justify-content: center;
}
.hero-home__chair img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 560px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .hero-home__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xxl);
    align-items: center;
    position: relative;
  }
  /* Re-target the halo so it sits behind the chair, not above the H1 */
  .hero-home::before {
    top: 50%; left: auto; right: -8%;
    transform: translateY(-50%);
    width: 60vw; height: 60vw;
    max-width: 900px; max-height: 900px;
  }
  .hero-home__copy { max-width: 44ch; }
  .hero-home__chair {
    position: absolute;
    right: -8%;
    top: 0;
    bottom: 0;
    width: 72%;
    pointer-events: none;
  }
  .hero-home__chair img {
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
  }
}

/* Large desktop: hero fills the viewport, chair bleeds to the viewport edge
   anchored to the full-width section instead of the constrained grid column. */
@media (min-width: 1024px) {
  .hero-home { min-height: 100vh; }
  .hero-home__grid {
    position: static;
    min-height: calc(100vh - var(--space-3xl) - var(--space-4xl));
    align-content: center;
  }
  .hero-home__chair {
    right: 0;
    width: 60vw;
  }
  .hero-home__chair img {
    object-position: right center;
  }
}

/* Chair-specific reveal: fade + drift up from its bottom edge */
.hero-home__chair.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease-out) 120ms,
              transform var(--dur-reveal) var(--ease-out) 120ms;
}
.hero-home__chair.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .hero-home__chair.reveal { opacity: 1; transform: none; }
}

.hero-home h1 {
  font-size: var(--type-display-l);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin-bottom: var(--space-lg);
  color: var(--primary);
}
/* Editorial mixed weights inside hero H1 */
.hero-home h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--surface-deep);
}
.hero-home h1 strong {
  font-weight: 700;
  font-style: normal;
}

/* Decorative arch behind hero eyebrow — recurring brand motif */
.eyebrow-arch {
  position: relative;
  display: inline-block;
}
.eyebrow-arch::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B4F3A' stroke-width='1.5'><path d='M3 21 V12 A9 9 0 0 1 21 12 V21'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.4;
}

.hero-home .body-l {
  margin-bottom: var(--space-xxl);
  color: var(--text-soft);
}

/* ============================================
   Buttons
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--type-body-l);
  font-weight: 500;
  border-radius: var(--radius-full);          /* pill — interactive family */
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-snappy),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  text-decoration: none;
  letter-spacing: -0.005em;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
}
.btn:active { transform: scale(0.98); }
/* Defensive: ensure tap target meets WCAG 44px even if padding/font tokens change */
.btn { min-height: 44px; }

/* Refined arrow icon — replaces unicode → */
.icon-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .icon-arrow,
.underline-link:hover .icon-arrow,
.next-project a:hover .icon-arrow {
  transform: translateX(4px);
}
.icon-arrow--lg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}

.btn-primary {
  background: var(--primary);
  color: var(--light);
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover { background: var(--primary-deep); color: var(--light); }

.btn-secondary {
  background: var(--background);
  color: var(--primary);
  border-color: var(--primary);
}
.btn-secondary:hover { background: var(--background-hover); border-color: var(--primary-deep); color: var(--primary-deep); }

/* On dark sections */
.section-deep .btn-primary { background: var(--background); color: var(--primary); }
.section-deep .btn-primary:hover { background: var(--light); color: var(--primary-deep); }
.section-deep .btn-secondary { background: transparent; color: var(--light); border-color: var(--light); }
.section-deep .btn-secondary:hover { background: rgba(248,242,230,0.10); color: var(--light); border-color: var(--background); }

/* ============================================
   Modules — Tavli-inspired cards, more present
   ============================================ */

.module {
  background: var(--module-fill);
  border: 1.5px solid var(--module-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .module:hover {
    background: var(--module-fill-hover);
    border-color: var(--module-border-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}

/* ============================================
   Featured projects
   ============================================ */

.featured-project {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-xl) 0;
}
.featured-project:first-of-type { padding-top: 0; }
.featured-project + .featured-project { padding-top: var(--space-xxl); }

@media (min-width: 768px) {
  .featured-project { grid-template-columns: 1.15fr 1fr; gap: var(--space-3xl); }
  .featured-project.reverse { grid-template-columns: 1fr 1.15fr; }
  .featured-project.reverse .featured-project__media { order: 2; }
  .featured-project.reverse .featured-project__copy { order: 1; }
}

/* ─────────────────────────────────────────────────────────
   Universal: any clickable element wrapping an image gets
   the offset-shadow hover. Set `--card-accent: #hex;` inline
   on each card to match its imagery's signature colour.
   Falls back to warm tan if no accent set.
   ───────────────────────────────────────────────────────── */
.media-link,
a:has(> img),
a:has(> picture),
a.featured-project__media {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--module-fill);
  border: 1.5px solid var(--module-border);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.media-link > img,
.media-link > picture > img,
a:has(> img) > img,
a:has(> picture) > picture > img,
a.featured-project__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .media-link:hover,
  a:has(> img):hover,
  a:has(> picture):hover,
  a.featured-project__media:hover {
    box-shadow:
      var(--shadow-md),
      12px 12px 0 -1.5px var(--card-accent, var(--surface));   /* peek of card's signature colour */
    border-color: var(--module-border-hover);
    transform: translate(-4px, -4px);
  }
  a.featured-project__media:hover { background: var(--light); }
  .media-link:hover > img,
  .media-link:hover > picture > img,
  a:has(> img):hover > img,
  a:has(> picture):hover > picture > img,
  a.featured-project__media:hover > img {
    transform: scale(1.04);
  }
}

/* Opt-out for nav/header/footer image links if any get added later */
.site-header a:has(> img),
.site-footer a:has(> img),
.preview-banner a:has(> img) {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  transform: none !important;
}
.site-header a:has(> img):hover,
.site-footer a:has(> img):hover,
.preview-banner a:has(> img):hover {
  box-shadow: none;
  transform: none;
}

/* Featured-project specific framing — overrides where it differs */
.featured-project__media {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-project__copy h3 {
  font-size: var(--type-display-m);
  line-height: 1.12;
  margin: var(--space-xs) 0 var(--space-lg);
  letter-spacing: -0.018em;
  color: var(--primary);
}
.featured-project__copy p {
  color: var(--text-soft);
  font-size: var(--type-body-l);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-md) 0 var(--space-lg);
}
/* Tags read as metadata, not interactive — square-ish corners, mono, no border */
.tag {
  display: inline-block;
  padding: 5px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;                          /* 12px */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(107, 79, 58, 0.08);         /* faint primary tint, no border */
  color: var(--primary);
  border: none;
  border-radius: var(--radius-xs);             /* 4px — clearly NOT a pill */
  font-weight: 500;
  line-height: 1.3;
  /* No hover — they're not clickable */
}
.tag.solid {
  background: var(--primary);
  color: var(--light);
}
.tag.solid {
  background: var(--primary);
  color: var(--light);
  border-color: var(--primary);
}

/* ============================================
   Disciplines — editorial horizontal rows.
   Same DNA as `.case-row` in case studies, but tuned for the
   homepage. Three practices, alternating direction. Each media
   block is a clickable link wrapping its image, so the universal
   `a:has(> img)` hover (offset shadow with --card-accent)
   activates automatically.
   ============================================ */

.discipline-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  margin-top: var(--space-3xl);
}

.discipline-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 768px) {
  .discipline-row {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-3xl);
  }
  .discipline-row.reverse {
    grid-template-columns: 1fr 1.1fr;
  }
  .discipline-row.reverse .discipline-row__media { order: 2; }
  .discipline-row.reverse .discipline-row__copy { order: 1; }
}

.discipline-row__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--module-fill);
  box-shadow: var(--shadow-xs);
  /* No hover — image is presentational. The "See <discipline> work →"
     underline link below is the affordance. Reserves the offset-shadow
     hover as a signature moment for the featured-project cards only. */
}
.discipline-row__media > img {
  display: block;
  width: 100%;
  height: auto;
}

.discipline-row__copy {
  max-width: 52ch;
}
.discipline-row__index {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-weight: 500;
}
.discipline-row__index::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--primary);
  display: inline-block;
}
.discipline-row__copy h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-display-m);
  margin: 0 0 var(--space-md);
  color: var(--primary);
  line-height: 1.1;
  letter-spacing: -0.018em;
  font-weight: 600;
}
.discipline-row__copy p {
  color: var(--text-soft);
  font-size: var(--type-body-l);
  line-height: 1.6;
  margin: 0 0 var(--space-lg);
}

/* ============================================
   Belief bar — modules, same family as cards
   ============================================ */

.belief-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xxl);
}
@media (min-width: 768px) { .belief-bar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .belief-bar { grid-template-columns: repeat(4, 1fr); } }

.belief {
  background: var(--module-fill);
  border: 1.5px solid var(--module-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .belief:hover {
    background: var(--module-fill-hover);
    border-color: var(--module-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
}
.belief::before {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  margin-bottom: var(--space-md);
}
.belief h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-h3);
  font-weight: 600;
  margin: 0 0 var(--space-xs);
  color: var(--primary);
}
.belief p {
  color: var(--text-soft);
  font-size: var(--type-body);
  margin: 0;
  line-height: 1.55;
}

/* ============================================
   About teaser
   ============================================ */

.about-teaser {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 768px) {
  .about-teaser { grid-template-columns: 400px 1fr; gap: var(--space-3xl); }
}
.about-teaser__portrait {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-arch);          /* signature arch — used only here */
  overflow: hidden;
  background: var(--background);
  border: 1.5px solid var(--module-border);
}
.about-teaser__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.about-bio { max-width: none; }
.about-bio > p + p { margin-top: var(--space-l); }

/* ============================================
   CTA block — deep section variant
   ============================================ */

.cta-block {
  background: var(--gradient-deep);
  color: var(--light);
  border-radius: var(--radius-xl);          /* 24px — slightly larger than cards, feels distinct */
  padding: var(--space-3xl) var(--space-xl);
  margin-top: var(--space-xxl);
  text-align: center;
  border: 1.5px solid var(--primary);
}
.cta-block h2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-display-l);
  color: var(--light);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.018em;
}
.cta-block p {
  color: var(--background);
  font-size: var(--type-body-l);
  margin: 0 auto var(--space-xl);
  max-width: 50ch;
  line-height: 1.6;
}
.cta-block .btn-primary {
  background: var(--background);
  color: var(--primary);
}
.cta-block .btn-primary:hover {
  background: var(--light);
  color: var(--primary-deep);
}

/* ============================================
   Footer sign-off — editorial moment
   ============================================ */

.footer-signoff {
  background: var(--background-soft);
  padding: var(--space-4xl) 0 var(--space-3xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Decorative arch motif behind sign-off */
.footer-signoff::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -100px;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%236B4F3A' stroke-width='1'><path d='M10 200 V100 A90 90 0 0 1 190 100 V200'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.15;
  pointer-events: none;
}
.footer-signoff__text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  font-weight: 500;
  font-style: italic;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  position: relative;
  z-index: 1;
}
.footer-signoff__bilingual {
  display: block;
  font-size: 0.55em;
  font-style: normal;
  font-weight: 400;
  color: var(--surface-deep);
  margin-top: var(--space-md);
  letter-spacing: -0.01em;
}

/* ============================================
   Footer
   ============================================ */

.site-footer {
  border-top: 1px solid var(--module-border);
  margin-top: 0;
  padding: var(--space-xxl) 0 var(--space-xl);
  background: var(--background-soft);
}
.site-footer .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 768px) { .site-footer .container { grid-template-columns: 2fr 1fr; gap: var(--space-3xl); } }

.site-footer h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-h2);
  margin: 0 0 var(--space-md);
  color: var(--primary);
}
.site-footer__links { display: flex; flex-direction: column; gap: var(--space-xs); }
.site-footer__links a {
  color: var(--text-soft);
  font-size: var(--type-body);
}
.site-footer__links a:hover { color: var(--primary); }
.site-footer__credit {
  border-top: 1px solid var(--module-border);
  padding-top: var(--space-md);
  margin-top: var(--space-xxl);
  font-size: var(--type-caption);
  color: var(--text-soft);
}

/* ============================================
   Case study layout
   ============================================ */

.case-hero {
  background: var(--gradient-hero);
  padding: var(--space-xxl) 0 var(--space-3xl);
}
.case-hero h1 {
  font-size: var(--type-display-xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: var(--space-md) 0 var(--space-lg);
  color: var(--primary);
}
.case-hero__sub {
  font-size: var(--type-body-l);
  color: var(--text-soft);
  max-width: 50ch;
  margin: 0 0 var(--space-xxl);
  line-height: 1.55;
}
.case-hero__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);          /* 16px — calm */
  overflow: hidden;
  background: var(--background);
  margin-top: var(--space-xxl);
  border: 1.5px solid var(--module-border);
  box-shadow: var(--shadow-md);
}
.case-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}

.at-a-glance {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  border-top: 1px solid var(--module-border);
  border-bottom: 1px solid var(--module-border);
  padding: var(--space-xl) 0;
  margin: var(--space-xxl) 0;
}
@media (min-width: 768px) { .at-a-glance { grid-template-columns: repeat(4, 1fr); } }
.at-a-glance__item .label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;     /* mono = signal of precision */
  font-size: var(--type-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
}
.at-a-glance__item .value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;     /* mono on value too — disciplined fact display */
  font-size: var(--type-body);
  color: var(--primary);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Stacked, left-aligned — heading above body, both within a readable column */
.case-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  max-width: 920px;
}
/* Full-bleed variant — heading and body both span the container width.
   Used on the About page where the journey + beliefs sections sit
   alongside hero text that has no width cap. */
.case-section--full { max-width: none; }
.case-section--full .case-section__body p,
.case-section--full .case-section__body ul { max-width: none; }
.case-section__heading {
  position: static;
}
.case-section__heading h2 {
  font-size: var(--type-display-m);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--primary);
  text-align: left;
}
.case-section__heading h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--primary);
  margin-top: var(--space-sm);
}
.case-section__body {
  font-size: 16px;
  color: var(--text);
  text-align: left;
}
.case-section__body .body-l { font-size: 16px; }
.case-section__body p, .case-section__body ul { max-width: 80ch; line-height: 1.65; }
.case-section__body p { color: var(--text-soft); }
.case-section__body strong { color: var(--text); }
.case-section__body ul {
  padding-left: 0;
  list-style: none;
  margin: 0 0 var(--space-md);
}
.case-section__body ul li {
  position: relative;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-xs);
  color: var(--text-soft);
}
.case-section__body ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 12px; height: 1.5px;
  background: var(--primary);
}
.case-section__body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-h2);
  color: var(--primary);
  margin: var(--space-xl) 0 var(--space-sm);
}

/* === Image figure with mat treatment ===
   White-bg content sits inside a sandy mat, like a museum mount. */
.image-figure {
  margin: var(--space-xl) auto;             /* 32px — tighter than was */
  background: var(--background-soft);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--module-border);
  padding: var(--space-md);                 /* 16px — tighter mat */
  max-width: 720px;
  box-shadow: var(--shadow-xs);
}
.image-figure > img,
.image-figure > picture > img,
.image-figure > video {
  display: block;
  width: 100%;
  height: auto;
  background: white;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(31, 27, 23, 0.08);
}
/* Caption — museum-label style. Mono small caps, left-aligned, no italic. */
.image-figure__caption {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;                     /* 11px */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  padding: 0 var(--space-xxs);
}
.image-figure__caption::before {
  content: '';
  width: 12px;
  height: 1.5px;
  background: var(--primary);
  flex-shrink: 0;
}

/* Wider variant — for landscape composites and long screenshots */
.image-figure--wide { max-width: 960px; }

/* Narrow variant — for portrait/phone shots */
.image-figure--narrow { max-width: 480px; }

/* Full-bleed editorial variant — image dominates, no mat */
.image-figure--bleed {
  max-width: none;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--module-border);
  border-bottom: 1px solid var(--module-border);
  padding: 0;
  box-shadow: none;
}
.image-figure--bleed > img,
.image-figure--bleed > video {
  border-radius: 0;
  box-shadow: none;
  max-height: 700px;
  object-fit: contain;
  background: white;
}
.image-figure--bleed .image-figure__caption {
  max-width: 65ch;
  margin: var(--space-md) auto 0;
  padding: 0 var(--gutter-mobile);
}

/* No-mat variant — for content already framed (e.g. images with own brand background) */
.image-figure--no-mat {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.image-figure--no-mat > img {
  background: transparent;
  box-shadow: none;
}

/* === Image rows — share one mat across the trio === */
.image-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);                       /* tighter gap */
  margin: var(--space-xl) auto;               /* 32px */
  background: var(--background-soft);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--module-border);
  padding: var(--space-md);                   /* 16px mat */
  max-width: 960px;
  box-shadow: var(--shadow-xs);
}
.image-row .image-figure {
  margin: 0;
  padding: 0;
  background: white;
  border: none;
  box-shadow: 0 1px 4px rgba(31, 27, 23, 0.08);
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-width: none;
  display: flex;                       /* flex column so caption can pin to bottom */
  flex-direction: column;
}
.image-row .image-figure > img {
  background: white;
  border-radius: 0;
  box-shadow: none;
  flex: 0 0 auto;                      /* image keeps natural height */
}
/* Row captions pinned to the bottom of every cell — consistent baseline across the row */
.image-row .image-figure__caption {
  padding: var(--space-xs) var(--space-sm);
  margin-top: auto;                    /* push caption down to bottom */
  background: white;
  border-top: 1px solid var(--module-border);
}
@media (min-width: 768px) {
  .image-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .image-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .image-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* === Bento gallery — art page ===
   Single mat wrapper holds four rows. Each row uses an anchor cell
   (first <figure>) to set the row height; siblings stretch with
   object-fit: cover so no white gaps remain below shorter cells.
   Mobile-first: rows collapse to single column at natural ratios. */
.bento-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-xl) auto;
  background: var(--background-soft);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--module-border);
  padding: var(--space-md);
  max-width: 1280px;
  box-shadow: var(--shadow-xs);
}
.bento-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
.bento-row > figure {
  margin: 0;
  width: 100%;
  height: auto;
}
.bento-row .image-figure {
  margin: 0;
  padding: 0;
  background: white;
  border: none;
  box-shadow: 0 1px 4px rgba(31, 27, 23, 0.08);
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-width: none;
  display: flex;
  flex-direction: column;
}
.bento-row .image-figure > img {
  display: block;
  width: 100%;
  height: auto;
  background: white;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
@media (min-width: 768px) {
  .bento-row > figure { height: 100%; }
  .bento-row .image-figure > img {
    height: 100%;
    object-fit: cover;
  }
  .bento-row.row-trio { grid-template-columns: repeat(3, 1fr); }
  .bento-row.row-trio > figure:first-child { aspect-ratio: 4 / 5; }
  .bento-row.row-land { grid-template-columns: 2fr 1fr; }
  .bento-row.row-land > figure:first-child { aspect-ratio: 3 / 2; }
  .bento-row.row-hero { grid-template-columns: 1fr; }
  .bento-row.row-hero > figure { aspect-ratio: 2 / 1; }
}

/* Subtle hover tier on case-study imagery — gives the cursor feedback
   without overriding the offset-shadow signature reserved for cards.
   Tasteful: 1px lift + soft shadow + caption colour deepen. */
.image-figure,
.image-row .image-figure {
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.image-figure__caption {
  transition: color var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .case-page .image-figure:hover,
  .case-page .image-row .image-figure:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
  .case-page .image-figure:hover .image-figure__caption {
    color: var(--primary);
  }
}

.stat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin: var(--space-xxl) 0;
}
@media (min-width: 768px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat {
  border-top: 2px solid var(--primary);
  padding-top: var(--space-md);
}
.section-deep .stat { border-top-color: var(--background); }
.stat__number {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 5vw + 1rem, 5rem);   /* 48 → 80px — typographic event */
  color: var(--primary);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-sm);
  font-weight: 600;
}
.section-deep .stat__number { color: var(--background); }
.stat__label {
  font-size: var(--type-body);
  color: var(--text-soft);
  font-weight: 400;
  line-height: 1.4;
}
.section-deep .stat__label { color: var(--light); }

.next-project {
  border-top: 1px solid var(--module-border);
  margin-top: var(--space-3xl);
  padding-top: var(--space-xxl);
}
.next-project__eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: var(--type-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--space-md);
  display: block;
  font-weight: 500;
}
.next-project a {
  display: block;
  color: var(--primary);
  text-decoration: none;
}
.next-project h2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-display-m);
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--primary);
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.next-project a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
}
@media (hover: hover) and (pointer: fine) {
  .next-project a:hover h2 { color: var(--primary-deep); }
}

/* ============================================
   Scroll reveal
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Timeline-specific reveal: each entry slides in from the left along the
   spine, and its dot scales in just after the row settles. */
.reveal--timeline {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity var(--dur-reveal-x) var(--ease-out),
              transform var(--dur-reveal-x) var(--ease-out);
}
.reveal--timeline.in {
  opacity: 1;
  transform: translateX(0);
}
.reveal--timeline::before {
  transform: scale(0);
  transition: transform var(--dur-page) var(--ease-out) 220ms;
}
.reveal--timeline.in::before {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .reveal--timeline { opacity: 1; transform: none; }
  .reveal--timeline::before { transform: scale(1); }
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ============================================
   Preview banner
   ============================================ */

.preview-banner {
  background: var(--primary);
  color: var(--light);
  text-align: center;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-family: 'Poppins', sans-serif;
}
.preview-banner a { color: var(--background); text-decoration: underline; }

/* ============================================================
   WORK INDEX PAGE — tile grid of all projects.
   Inherits the same hover language as featured-project cards
   (offset shadow with --card-accent) but in a smaller, gridded
   register suitable for browsing.
   ============================================================ */

.work-hero {
  padding: var(--space-3xl) 0 0;
}
.work-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-display-l);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--primary);
  max-width: 22ch;
  margin: var(--space-md) 0 var(--space-lg);
  font-weight: 600;
}
.work-hero .body-l {
  max-width: 56ch;
  color: var(--text-soft);
  margin: 0;
}

.work-grid-section {
  padding-top: 32px;
  padding-bottom: var(--space-xl);
}
.work-grid-section__head {
  margin-bottom: var(--space-xxl);
  max-width: 56ch;
}
.work-grid-section__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 500;
}
.work-grid-section__head h2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-display-m);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--primary);
  margin: 0 0 var(--space-sm);
  font-weight: 600;
}
.work-grid-section__head p {
  color: var(--text-soft);
  font-size: var(--type-body);
  line-height: 1.55;
  margin: 0;
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 640px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
}
@media (min-width: 1024px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 32px var(--space-xl); }
}

/* ============================================================================
   Bento variant of work-grid — currently used on the Furniture index.
   Locked aspect ratios make row bottoms read flush:
     Éxi & Zee (1:1)  ·  Bea & No.7 (2:1)  ·  Melo (taller closer band).
   Tiles assign themselves via [data-piece="…"] grid-areas.
   ========================================================================= */
.work-grid--bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.work-grid--bento .work-tile { margin: 0; }
.work-grid--bento .work-tile a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.work-grid--bento .work-tile__media,
.work-grid--bento .work-tile__media--square,
.work-grid--bento .work-tile__media--portrait {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
}
.work-grid--bento .work-tile__meta { display: none; }

@media (max-width: 767px) {
  .work-grid--bento .work-tile__media,
  .work-grid--bento .work-tile__media--square {
    aspect-ratio: 16 / 9;
    flex: none;
  }
}

@media (min-width: 768px) {
  .work-grid--bento {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 300px 300px 600px;
    column-gap: 8px;
    row-gap: var(--space-xl);
    grid-template-areas:
      "bea  bea  exi"
      "zee  no7  no7"
      "melo melo melo";
  }
  .work-grid--bento [data-piece="bea"]  { grid-area: bea; }
  .work-grid--bento [data-piece="exi"]  { grid-area: exi; }
  .work-grid--bento [data-piece="zee"]  { grid-area: zee; }
  .work-grid--bento [data-piece="no7"]  { grid-area: no7; }
  .work-grid--bento [data-piece="melo"] { grid-area: melo; }
  /* All media flex-grow to fill their row track. Fixed row heights guarantee bottoms align,
     regardless of column gap, copy length, or source-image intrinsic dimensions. */
}

@media (min-width: 1024px) {
  .work-grid--bento {
    grid-template-rows: 430px 430px 600px;
  }
}

/* Brand groups (e.g. Bed Threads, Lessy) — span full grid width and nest a 2-col internal grid */
.work-group {
  grid-column: 1 / -1;
}
.work-group__head {
  margin-bottom: var(--space-md);
  max-width: 56ch;
}
.work-group__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
}
.work-group__title {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-display-m);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--primary);
  margin: 0;
  font-weight: 600;
}
.work-group__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 640px) {
  .work-group__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
}
@media (min-width: 1024px) {
  .work-group__grid { grid-template-columns: repeat(2, 1fr); gap: 42px var(--space-xl); }
}

.work-tile a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.work-tile__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--module-fill);
  border: 1.5px solid var(--module-border);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.work-tile__media--square { aspect-ratio: 1 / 1; }
.work-tile__media--portrait { aspect-ratio: 5 / 6; }
.work-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .work-tile a:hover .work-tile__media {
    background: var(--light);
    box-shadow:
      var(--shadow-md),
      10px 10px 0 -1.5px var(--card-accent, var(--surface));
    border-color: var(--module-border-hover);
    transform: translate(-3px, -3px);
  }
  .work-tile a:hover .work-tile__media img {
    transform: scale(1.04);
  }
}

.work-tile__copy {
  padding-top: var(--space-md);
}
.work-tile__meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
}
.work-tile__copy h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-h2);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--primary);
  margin: 0 0 var(--space-xs);
  font-weight: 600;
  transition: color var(--dur-base) var(--ease-out);
}
.work-tile__copy p {
  color: var(--text-soft);
  font-size: var(--type-body);
  line-height: 1.5;
  margin: 0;
}
@media (hover: hover) and (pointer: fine) {
  .work-tile a:hover .work-tile__copy h3 {
    color: var(--primary-deep);
  }
}

/* Tag chips beneath a work-tile (used in brand-grouped sub-tiles) */
.work-tile__chips {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.work-tile__chip {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--module-border);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}

/* ============================================
   About page — hero, timeline
   ============================================ */

.about-hero {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-xxl);
}
.about-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-display-l);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--primary);
  margin: var(--space-md) 0 var(--space-lg);
  font-weight: 600;
}
.about-hero .body-l {
  max-width: none;
  color: var(--text-soft);
  margin: 0;
}

/* Timeline — vertical list of roles/years, mono year + serif role */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin: var(--space-xl) 0;
  border-left: 1.5px solid var(--module-border);
  padding-left: var(--space-xl);
}
.timeline__entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
  position: relative;
}
.timeline__entry::before {
  content: '';
  position: absolute;
  left: calc(var(--space-xl) * -1 - 5px);
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
}
@media (min-width: 768px) {
  .timeline__entry { grid-template-columns: 120px 1fr; gap: var(--space-xl); align-items: baseline; }
}
.timeline__year {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--type-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
}
.timeline__body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-h2);
  line-height: 1.2;
  margin: 0 0 var(--space-xs);
  color: var(--primary);
  font-weight: 600;
}
.timeline__body p {
  color: var(--text-soft);
  font-size: var(--type-body);
  line-height: 1.55;
  margin: 0;
  max-width: 65ch;
}

/* ============================================
   Contact page — hero, grid, form
   ============================================ */

.contact-hero {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-xxl);
}
.contact-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-display-l);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--primary);
  max-width: 22ch;
  margin: var(--space-md) 0 var(--space-lg);
  font-weight: 600;
}
.contact-hero .body-l {
  max-width: 56ch;
  color: var(--text-soft);
  margin: 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin: var(--space-xl) 0;
}
@media (min-width: 768px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
.contact-card {
  background: var(--module-fill);
  border: 1px solid var(--module-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.contact-card__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 500;
}
.contact-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-h2);
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
  color: var(--primary);
  font-weight: 600;
  word-break: break-word;
}
.contact-card p {
  color: var(--text-soft);
  font-size: var(--type-body);
  line-height: 1.55;
  margin: 0 0 var(--space-md);
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  max-width: 720px;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .contact-form__row { grid-template-columns: 1fr 1fr; }
}
.contact-form__row--actions {
  align-items: center;
  margin-top: var(--space-md);
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.contact-form__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--type-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: var(--background-soft);
  border: 1.5px solid var(--module-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: var(--type-body);
  color: var(--text);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: white;
}
.contact-form textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
}
.contact-form__note {
  color: var(--text-soft);
  font-size: var(--type-caption);
  line-height: 1.5;
  max-width: 38ch;
  margin: 0;
}

/* "See all 18 projects" pathway from the homepage Featured section */
.see-all {
  text-align: center;
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--module-border);
}
.see-all .underline-link {
  font-family: 'Playfair Display', serif;
  font-size: var(--type-h3);
  font-style: italic;
  font-weight: 500;
}

/* ============================================================
   CASE-PAGE RESTRAINT — let the work be the focal point.
   Homepage stays decorative; case studies quiet down so
   the imagery dominates. Set <body class="case-page"> on
   each case study to opt in.
   ============================================================ */

/* 1. Full-bleed unmatted hero — image sits at the top, edge-to-edge.
   The image element lives OUTSIDE the .container in the markup, so it
   fills the section naturally. The text block sits below in .container. */
.case-page .case-hero {
  padding-top: var(--space-md);   /* small cream breath between nav and image */
  padding-bottom: var(--space-xxl);
  background: var(--gradient-hero);
}
.case-page .case-hero__media {
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--space-xxl);
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: white;
  border-bottom: 1px solid var(--module-border);
  aspect-ratio: auto;
  display: block;
}
.case-page .case-hero__media img {
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: contain;     /* show full composite — never crop hero art */
  background: white;
  display: block;
}
.case-page .case-hero h1 {
  margin-top: var(--space-md);
}

/* 2. Drop the terracotta dash under in-content h2s.
   Hero h1 keeps its weight — only that one moment is ornate. */
.case-page .case-section__heading h2::after {
  display: none;
}

/* 3. Hide curve dividers on case-study pages — clean tonal cuts.
   Also flatten section-band entirely so back-to-back bands don't
   become alternating stripes. Section-deep is preserved for the
   Outcome moment but loses its curves. */
.case-page .section-band::before,
.case-page .section-band::after,
.case-page .section-deep::before,
.case-page .section-deep::after,
.case-page .curve-divider {
  display: none !important;
}
.case-page .section-band {
  background: transparent;
  color: inherit;
}
.case-page .section-band h2 { color: var(--case-text); }
.case-page .section-band .body-l,
.case-page .section-band p { color: var(--case-text-soft); }

/* 4. Imagery wider than the body column — and LEFT-ALIGNED to it
   so the eye doesn't dart between left-margin text and centred images. */
.case-page .image-figure {
  max-width: 1100px;
  margin-left: 0;          /* flush with the body column's left edge */
  margin-right: auto;
}
.case-page .image-figure--wide   { max-width: 1280px; margin-left: 0; }
.case-page .image-figure--narrow { max-width: 540px;  margin-left: 0; }
.case-page .image-row            { max-width: 1100px; margin-left: 0; margin-right: auto; }
.case-page .image-row.cols-2     { max-width: 1100px; }
.case-page .image-row.cols-3     { max-width: 1280px; }
.case-page .image-row.cols-4     { max-width: 1280px; }

/* ────────────────────────────────────────────────────────────
   FIXED TRANSPARENT NAV — case-pages only.
   At top of page: nav floats over the hero image (transparent).
   After scrolling past the hero: nav fills with brown so it stays
   visible against cream content below.
   ──────────────────────────────────────────────────────────── */
.case-page .preview-banner {
  display: none;          /* dev artefact — hidden so nav can sit at top:0 */
}
.case-page .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-state) var(--ease-out),
              backdrop-filter var(--dur-state) var(--ease-out),
              border-color var(--dur-state) var(--ease-out),
              color var(--dur-state) var(--ease-out);
}
.case-page .site-header.scrolled {
  backdrop-filter: saturate(160%);
  -webkit-backdrop-filter: saturate(160%);
}
.case-page .site-header .logo,
.case-page .site-header .nav a {
  transition: color var(--dur-state) var(--ease-out);
}
.case-page .site-header.scrolled {
  background: var(--primary);
  border-bottom-color: rgba(0, 0, 0, 0.12);
}
/* Logo sits inside the cream pill in both states, so no colour flip is needed. */

/* Reading-progress bar — case pages only. 2px fixed at viewport top.
   JS sets transform: scaleX(0..1) on scroll. Sits above the header. */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 200;
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress { transition: none; }
}

/* Hero — colour-matched zone. The 44px padding above the image is filled
   with `--hero-accent` (set inline on <body class="case-page">) so the
   image's own background extends seamlessly into the surrounding band,
   making the hero feel interconnected rather than floating on cream.
   The band fades to transparent at both ends so the page cream dissolves
   into the accent (and back out again) instead of butting against it as a
   hard color block — softens the nav→hero seam and the hero→next-section
   exit. Image and text both sit on the solid-accent plateau between the
   two fade zones. Falls back to white if not set. */
.case-page .case-hero {
  padding-top: 44px;
  background: linear-gradient(
    180deg,
    transparent 0,
    var(--hero-accent, #ffffff) 44px,
    var(--hero-accent, #ffffff) calc(100% - 44px),
    transparent 100%
  );
}
.case-page .case-hero__media,
.case-page .case-hero__media img {
  background: var(--hero-accent, #ffffff);
}
.case-page .case-hero__media {
  border-bottom: 1px solid rgba(31, 27, 23, 0.08);
}

/* ────────────────────────────────────────────────────────────
   .case-row — horizontal heading+body | image module.
   Wraps a `.case-section` (text) and a sibling `.image-figure` /
   `.image-row` so they sit side-by-side on desktop. Add `.reverse`
   to put the image on the left.
   Use this to alternate with vertical .case-section blocks and
   create rhythm — magazine-style spreads.
   ──────────────────────────────────────────────────────────── */
.case-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin: var(--space-xxl) 0;
  max-width: 1280px;
  align-items: start;
}
.case-row > .case-section,
.case-row > .image-figure,
.case-row > .image-row {
  margin: 0;
  max-width: none;
}
@media (min-width: 900px) {
  .case-row {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.5fr);
    gap: var(--space-3xl);
  }
  .case-row.reverse {
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  }
  .case-row.reverse > .case-section { order: 2; }
  .case-row.reverse > .image-figure,
  .case-row.reverse > .image-row    { order: 1; }
  /* Sticky text in side-by-side layouts — heading stays put while image
     scrolls past it. Top offset clears the fixed nav (~64px) plus a
     comfortable breath so the heading isn't kissing the nav edge. */
  .case-row > .case-section {
    position: sticky;
    top: 96px;                  /* nav height (64) + breathing room */
    padding-top: var(--space-md);
  }
}

/* 6. Quiet the mat — no visible border, almost no shadow.
   Mat reads as negative space rather than a frame.
   Same treatment for .image-row so multi-image modules feel like
   the same component family as solo figures. */
.case-page .image-figure,
.case-page .image-row {
  border: none;
  box-shadow: 0 1px 2px rgba(31, 27, 23, 0.04);
}
.case-page .image-figure > img,
.case-page .image-figure > picture > img,
.case-page .image-row .image-figure,
.case-page .image-row .image-figure > img {
  box-shadow: none;
}
/* Inner figures inside an image-row already have no border (base rule);
   on case-page they also drop the subtle inner shadow to feel cleaner. */
.case-page .image-row .image-figure {
  border: 1px solid rgba(31, 27, 23, 0.06);    /* hairline divider only */
}

/* 7. Cool the brown saturation. In-content h2s and body sit on
   a more neutral charcoal — the only saturated colour on screen
   becomes the imagery itself. Hero h1 stays warm: that's the
   intentional ornate moment. */
.case-page .case-section__heading h2 {
  color: var(--case-text);
}
.case-page .case-section__body p,
.case-page .case-section__body ul li,
.case-page .case-section__body strong {
  color: var(--case-text-soft);
}
.case-page .case-section__body strong {
  color: var(--case-text-emph);
  font-weight: 600;
}

/* No italic emphasis or decorative serif quotes in body — reserve
   typographic flourish for the hero only. */
.case-page .case-section__body em,
.case-page .case-section__body i {
  font-style: normal;
  font-weight: 600;
}

/* Case-hero h1: drop the italic span styling, keep weight calm */
.case-page .case-hero h1 em,
.case-page .case-hero h1 i {
  font-style: normal;
  font-weight: 600;
}

/* Single eyebrow per page — hide repeated eyebrows inside case sections */
.case-page section .eyebrow:not(:first-of-type) {
  /* allow but don't repeat across body; keep section-deep eyebrow visible */
}

/* Tighter section padding on case studies — less whitespace = more density,
   and removes the "magazine cover spacing" feel */
.case-page section { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.case-page .section-deep { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }

/* Mobile fallback — full-bleed hero still works, just narrower */
@media (max-width: 767px) {
  .case-page .case-hero__media img { max-height: 480px; }
  .case-page .image-figure,
  .case-page .image-figure--wide,
  .case-page .image-row { max-width: 100%; }
}

/* ============================================
   Skip-to-content (accessibility)
   ============================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--space-sm) var(--space-md);
  background: var(--primary);
  color: var(--light);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: var(--type-body);
  box-shadow: var(--shadow-md);
}

/* ============================================
   Small-phone refinements (≤480px)
   ============================================ */
@media (max-width: 480px) {
  .container { padding-inline: 16px; }

  /* Contact card email no longer relies on a hard <br> */
  .contact-card h2 { font-size: 1.125rem; word-break: break-word; }

  /* Tighter case-hero so headline fits without scroll on small phones */
  .case-page .case-hero { padding-top: var(--space-md); }
  .case-page .case-hero__media img { max-height: 380px; }
}

/* ============================================
   Landscape phones — reclaim vertical space
   ============================================ */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-home { padding-top: var(--space-lg); padding-bottom: var(--space-xxl); }
  .case-page .case-hero { padding-top: var(--space-md); }
  .case-page .case-hero__media img { max-height: 320px; }
}
.skip-link:focus {
  left: var(--space-md);
  top: var(--space-md);
  outline: 2px solid var(--light);
  outline-offset: 2px;
}