/* ============================================================
   CŌ Studio · sitewide stylesheet
   Rebrand build — editorial, minimal, two studios one architecture.
   Design tokens per Build Handover §1. Visual language per the
   Concept mockup + Visual Style Guide.
   ============================================================ */

/* Jost sets the macron beside the letter instead of above it, so "Studio Cō"
   comes out as "Studio Co¯". Borrow U+014C/U+014D from a geometric sans the
   platform already has. unicode-range keeps the swap to those two glyphs, so
   every other character on the site is still Jost. */
@font-face {
  font-family: 'MacronFix';
  src: local('Avenir Next'), local('Futura'), local('Segoe UI'), local('Roboto'),
       local('Helvetica Neue'), local('Arial'), local('Nimbus Sans');
  unicode-range: U+014C-014D;
  font-display: swap;
}

:root {
  /* Base — every page */
  --peach-cream: #efe7da;   /* PRIMARY background */
  --chalk-beige: #e1daca;   /* secondary — cards, subtle lifts */
  --beige:       #cebeac;   /* warmer surface — accents only */
  --cream:       #f8f6f4;   /* palest tone — card fills, forms */
  --paper:       #faf5ec;   /* pale companion — alt card surface */

  /* Text tones — warm browns */
  --espresso:    #20160d;
  --ink:         #311507;
  --walnut:      #492a1b;
  --taupe:       #90765b;
  --taupe-light: #af977b;
  --clay:        rgba(175,151,123,0.35);

  /* Studio Wellbeing add-layer — olive */
  --wellbeing-sage:  #b2ad8f;
  --wellbeing-olive: #666148;
  --wellbeing-moss:  #2c2714;
  --wellbeing-wash:  rgba(102,97,72,0.05);

  /* Studio Concept add-layer — oxblood burgundy */
  --burgundy:       #4c0c12;
  --burgundy-deep:  #390709;
  --burgundy-mist:  rgba(76,12,18,0.15);
  --concept-wash:   rgba(76,12,18,0.04);

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'MacronFix', 'Jost', system-ui, sans-serif;

  --w-title:  300;
  --ls-title: 0.02em;

  --fs-hero:    clamp(52px, 6.5vw, 84px);
  --fs-h2:      clamp(38px, 4.4vw, 60px);
  --fs-h3:      clamp(24px, 2.4vw, 32px);
  --fs-body:    16px;
  --fs-body-lg: 18px;
  --fs-eyebrow: 11px;

  --lh-title: 1.15;
  --lh-body:  1.7;

  --maxw:          1200px;
  --pad-section-d: 120px;
  --pad-section-m: 60px;
  --gap-col:       48px;
  --radius-soft:   6px;
  --radius-image:  8px;
  --hairline:      1px solid var(--clay);

  --ease-slow: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.23, 1, 0.32, 1);

  /* Cursor mesh orb palette (ported from the live site) */
  --mesh-a: #e6d5bc;
  --mesh-b: #d4bea1;

  /* Surface accents — overridden per page */
  --accent:      var(--espresso);  /* italic emphasis, dots, bars */
  --accent-eyebrow: var(--taupe);  /* eyebrow color */
  --wash:        transparent;      /* whisper wash */
}

/* Surface accent overrides */
body.page-wellbeing {
  --accent: var(--wellbeing-olive);
  --wash: var(--wellbeing-wash);
}
body.page-concept {
  --accent: var(--burgundy);
  --accent-eyebrow: var(--burgundy);
  --wash: var(--concept-wash);
}

/* ─── Reset & base ─── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--peach-cream);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-serif);
  font-weight: var(--w-title);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
  color: var(--espresso);
}
h1 em, h2 em, h3 em, .h1 em, .h2 em, .h3 em {
  font-style: italic;
  font-weight: var(--w-title);
  color: var(--accent);
}
.h1 { font-size: var(--fs-hero); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }

::selection { background: var(--chalk-beige); color: var(--espresso); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--espresso);
  color: var(--cream);
  padding: 10px 18px;
  z-index: 999;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 1px dashed var(--accent);
  outline-offset: 2px;
}

/* ─── Layout helpers ─── */
section.block {
  padding: var(--pad-section-d) 60px;
  position: relative;
}
.inner { max-width: var(--maxw); margin: 0 auto; position: relative; }
.inner-narrow { max-width: 760px; margin: 0 auto; position: relative; }
.center { text-align: center; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-eyebrow);
  display: block;
  margin-bottom: 24px;
}

.body-large { font-size: var(--fs-body-lg); line-height: 1.75; color: var(--ink); }
.body-large em { font-style: italic; color: var(--accent); }
.stanza { margin-top: 20px; }

.caption {
  font-size: 13px;
  font-style: italic;
  color: var(--taupe);
}

/* Whisper wash on studio surfaces */
.washed { position: relative; }
.washed::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wash);
  pointer-events: none;
}
.washed > * { position: relative; z-index: 1; }

.cream-surface { background: var(--cream); }

hr.hairline { border: none; border-top: var(--hairline); }

/* ─── Reveal on scroll ─── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease, transform 800ms ease;
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 22px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  transition: background 400ms ease, box-shadow 400ms ease, padding 400ms ease;
  background: transparent;
}
.nav.is-scrolled {
  background: rgba(239,231,218,0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--clay);
  padding: 16px 60px;
}
.nav-brand {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: var(--ls-title);
  color: var(--espresso);
  text-decoration: none;
}
.nav-brand em { font-style: italic; }
.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--taupe);
  text-decoration: none;
  transition: color 300ms ease;
  cursor: pointer;
  position: relative;
  padding: 8px 0;
}
/* Underline sweep — ported from the live site header */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 480ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover::after { transform: scaleX(1); }
}
.nav-links a.is-active::after { transform: scaleX(1); }
.nav-links a:hover, .nav-links a.is-active { color: var(--accent); }
body:not(.page-wellbeing):not(.page-concept) .nav-links a:hover,
body:not(.page-wellbeing):not(.page-concept) .nav-links a.is-active { color: var(--espresso); }

/* On-image nav (over page heroes) before scroll */
body.nav-on-image .nav:not(.is-scrolled) .nav-brand { color: #fff7e8; }
body.nav-on-image .nav:not(.is-scrolled) .nav-links a { color: rgba(255,247,232,0.85); }
body.nav-on-image .nav:not(.is-scrolled) .nav-links a:hover,
body.nav-on-image .nav:not(.is-scrolled) .nav-links a.is-active { color: #ffffff; }
body.nav-on-image .nav:not(.is-scrolled) .nav-toggle span,
body.nav-on-image .nav:not(.is-scrolled) .nav-toggle span::before,
body.nav-on-image .nav:not(.is-scrolled) .nav-toggle span::after { background: #fff7e8; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  position: relative;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  position: absolute;
  width: 22px;
  height: 1px;
  background: var(--espresso);
  left: 9px;
  transition: transform 300ms ease, opacity 300ms ease;
}
.nav-toggle span { top: 20px; }
.nav-toggle span::before { content: ''; top: -7px; left: 0; }
.nav-toggle span::after { content: ''; top: 7px; left: 0; }
.nav.is-open .nav-toggle span { background: transparent; }
.nav.is-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); background: var(--espresso); }
.nav.is-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); background: var(--espresso); }

.nav-mobile {
  position: fixed;
  inset: 0;
  background: var(--peach-cream);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.nav-mobile.is-open { opacity: 1; pointer-events: auto; }
.nav-mobile ul {
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.nav-mobile a {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 34px;
  letter-spacing: var(--ls-title);
  color: var(--espresso);
  text-decoration: none;
}
.nav-mobile a.is-active { font-style: italic; color: var(--accent); }
.nav-mobile .sub a { font-size: 22px; color: var(--taupe); }

/* ============================================================
   BUTTONS — LOCKED (§1.5)
   One primary CTA sitewide. Cream fill at rest, surface-accent
   fill on hover. No borders. No arrows. No shadows.
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 18px 40px;
  background: var(--cream);
  color: var(--espresso);
  text-decoration: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition:
    background 500ms var(--ease-slow),
    color 500ms var(--ease-slow),
    letter-spacing 500ms var(--ease-slow),
    box-shadow 500ms var(--ease-slow);
}
/* On a cream surface the cream fill would vanish, so the button takes
   the primary background tone instead — same flat block, no borders,
   no rings, matching every other button (§1.5) */
.cream-surface .btn { background: var(--peach-cream); }
/* Glass-card CTAs inside cream sections sit on photography — keep cream.
   :where() keeps specificity at par so .btn:hover still wins. */
.cream-surface :where(.studio-card) .btn { background: var(--cream); }
.btn:hover {
  /* warm dark brown, not the near-black espresso (Couro's call, feedback round 2) */
  background: #311507;
  color: var(--cream);
  letter-spacing: 0.32em;
}
body.page-wellbeing .btn:hover {
  background: var(--wellbeing-olive);
  color: var(--cream);
}
body.page-concept .btn:hover {
  background: var(--burgundy);
  color: var(--cream);
}
/* On full-bleed burgundy sections (Foresight Report) */
.burgundy-bg .btn {
  background: var(--cream);
  color: var(--burgundy);
}
.burgundy-bg .btn:hover {
  background: var(--burgundy);
  color: var(--cream);
  box-shadow: 0 0 0 1px var(--cream);
  letter-spacing: 0.32em;
}

/* Tertiary CTA — the serif whisper */
.link-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: var(--ls-title);
  color: var(--accent);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: all 400ms ease;
  display: inline-block;
  cursor: pointer;
}
.link-serif:hover {
  border-bottom-color: var(--accent);
  letter-spacing: 0.04em;
}
body:not(.page-wellbeing):not(.page-concept) .link-serif { color: var(--espresso); }
body:not(.page-wellbeing):not(.page-concept) .link-serif:hover { border-bottom-color: var(--espresso); }

/* Small-caps quiet link (journal CTAs) */
.link-caps {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-eyebrow);
  text-decoration: none;
  transition: color 300ms ease;
  cursor: pointer;
}
.link-caps:hover { color: var(--accent); }

/* ─── Chips (§1.6) ─── */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-row + .chip-row { margin-top: 12px; }
.chip {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--taupe);
  background: var(--cream);
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-block;
}

/* ============================================================
   EDITORIAL ATMOSPHERIC PATTERNS (§1.11)
   ============================================================ */

/* Numbered chapter marker */
.section-num {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  margin-bottom: 32px;
}
.section-num .num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0;
}
.section-num .line {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.section-num .label { color: var(--taupe); letter-spacing: 0.35em; }
.page-hero .section-num { color: #fff7e8; margin-bottom: 40px; }
.page-hero .section-num .label { color: rgba(255,247,232,0.8); }

/* Vertical caption */
.vertical-caption {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(255,247,232,0.75);
  white-space: nowrap;
  z-index: 3;
}

/* Atmospheric pause moment */
.pause {
  padding: 180px 60px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #2a1a10 0%, #3d2818 50%, #4a3220 100%);
}
.pause.pause-warm {
  background: linear-gradient(120deg, #33200f 0%, #492a1b 55%, #5a3a22 100%);
}
.pause::before {
  content: '';
  position: absolute;
  top: 15%; right: 10%;
  width: 60%; height: 70%;
  background: radial-gradient(ellipse at center, rgba(255,220,180,0.28) 0%, rgba(255,220,180,0.08) 40%, transparent 75%);
  filter: blur(40px);
}
.pause::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 30%;
  background: linear-gradient(to top, rgba(255,220,180,0.15) 0%, transparent 100%);
}
/* Atmospheric pause · background video */
.pause.has-video::before { z-index: 1; opacity: 0.3; }
.pause-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.pause-video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%) scale(1.04);
  object-fit: cover;
  /* The poster is frame 0 of the clip, so it shows straight away and the
     video paints over it with no visible hand-off. If the clip never loads,
     the still frame stays. */
  opacity: 1;
}
/* Scrim. Three layers, each with one job:
   1. a shallow, near-neutral vignette - depth without a brown film on the flanks
   2. a feathered horizontal band that backs the quote only, so readability is
      bought where the text is instead of across the whole frame
   3. a faint diagonal wash to tie the footage to the section's warmth */
.pause-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(28,17,9,0.34) 0%, rgba(28,17,9,0.42) 45%, rgba(26,20,15,0.48) 100%),
    linear-gradient(to bottom, rgba(26,19,12,0) 0%, rgba(26,19,12,0.30) 30%, rgba(26,19,12,0.30) 70%, rgba(26,19,12,0) 100%),
    linear-gradient(120deg, rgba(30,24,18,0.16) 0%, rgba(30,24,18,0.10) 50%, rgba(30,24,18,0.14) 100%);
}
/* Reduced motion / Data Saver: no clip is fetched, the poster frame stands in. */

.pause-inner {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 60px;
  align-items: start;
  position: relative;
  z-index: 2;
}
.pause-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  color: rgba(255,235,210,0.9);
  display: flex;
  align-items: center;
  gap: 16px;
}
.pause-num::after {
  content: '';
  display: inline-block;
  width: 40px; height: 1px;
  background: rgba(255,235,210,0.6);
}
.pause-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.7;
  color: rgba(255,235,210,0.92);
  letter-spacing: 0.01em;
}
.pause-text em { font-style: normal; color: var(--cream); }

/* Mood board block */
.moodboard {
  padding: 120px 60px 80px;
  position: relative;
}
.moodboard-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.moodboard-image {
  width: 380px;
  max-width: 100%;
  aspect-ratio: 3/4;
  margin: 0 auto 60px;
  border-radius: 2px;
  overflow: hidden;
}
.moodboard-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moodboard-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 40px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--espresso);
}
.moodboard-caption span:last-child { color: var(--accent); }

/* ============================================================
   PAGE HERO — SITEWIDE PATTERN (§1.12)
   ============================================================ */
.page-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 60px; /* balanced top/bottom so the block centers true */
  text-align: center;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  /* soft scrim for legibility — barely there */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(32,22,13,0.32) 0%, rgba(32,22,13,0.18) 45%, rgba(32,22,13,0.38) 100%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
}
/* Hero rhythm — 8px scale, tight-tight-loose (§1.12a).
   The subtitle + supporting line form one .hero-tagline unit (12px inside);
   the title sits 24px above it; the CTA is isolated by the largest
   gap (24px column gap + 24px margin = 48px). Applies to every page
   hero and to the homepage slider. */
.page-hero-inner,
.slide-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.hero-tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.page-hero-inner > .btn,
.slide-inner > .btn,
.page-hero-inner > form.inline-form {
  margin-top: 24px;
}
.page-hero-inner > .form-feedback { margin-top: 0; } /* column gap owns it */
/* Left-column variant keeps its left alignment */
.page-hero.hero-left .page-hero-inner,
.page-hero.hero-left .hero-tagline {
  align-items: flex-start;
}
/* Cursor mesh orb — soft gradient blob trailing the cursor, ported from the live site */
.mesh-orb {
  position: fixed;
  left: 0;
  top: 0;
  width: clamp(260px, 30vw, 440px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  transform: translate3d(-999px, -999px, 0);
  background: radial-gradient(circle at 34% 32%, color-mix(in srgb, var(--mesh-a) 94%, #fff7ec 6%) 0%, color-mix(in srgb, var(--mesh-b) 64%, transparent) 52%, transparent 74%);
  filter: blur(42px) saturate(1.22);
  opacity: 0.58;
  transition: opacity 260ms var(--ease-out);
  will-change: transform, filter;
}
body:hover .mesh-orb { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .mesh-orb { display: none; }
}

/* Word reveal — hero signature animation, ported from the live site */
.word-reveal .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out);
  white-space: nowrap;
}
.word-reveal .word.is-em { transform: translateY(20px); }
.word-reveal.is-active .word {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .word-reveal .word { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Light hero — for pale artwork backgrounds; dark text, no scrim */
.page-hero.hero-on-light::before { background: none; }
.page-hero.hero-on-light .hero-h1 { color: var(--espresso); text-shadow: none; }
.page-hero.hero-on-light .hero-h2 { color: var(--walnut); }
.page-hero.hero-on-light .hero-body { color: var(--ink); text-shadow: none; }
.page-hero.hero-on-light .vertical-caption { color: var(--taupe); }

/* Smoke hero — warm 2:3 studio photograph on a plain ground (Wellbeing incense,
   Concept leaf, Home sand); cream text, no scrim. Applies to page heroes and
   homepage slides. Per element:
   --hero-photo  the photograph (required)
   --hero-crop   vertical position of the wide-screen crop (default 40%;
                 Wellbeing uses 18% so the incense stick stays below the crop) */
.page-hero.hero-smoke, .slide.hero-smoke { background-image: var(--hero-photo); background-position: center 45%; }
.page-hero.hero-smoke::before, .slide.hero-smoke::before { background: none; }
.page-hero.hero-smoke .hero-h1, .slide.hero-smoke .hero-h1 {
  text-shadow: 0 2px 24px rgba(76,55,30,0.25);
  /* 20% below the sitewide hero size */
  font-size: clamp(51px, 6.4vw, 90px);
}
.page-hero.hero-smoke .vertical-caption, .slide.hero-smoke .vertical-caption { color: rgba(255,247,232,0.85); }
.page-hero.hero-smoke .page-hero-inner, .slide.hero-smoke .slide-inner { max-width: 1200px; }
/* Warm veil element for pale photos (Home sand) so the cream text reads */
.hero-smoke .hero-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(88,66,38,0.16);
  pointer-events: none;
}
@media (min-width: 900px) {
  /* keep the studio name on one line on desktop */
  .page-hero.hero-smoke .hero-h1, .slide.hero-smoke .hero-h1 { white-space: nowrap; }
}
/* Wide screens: `cover` would blow the 736px portrait photo up far past its native
   size (soft + over-zoomed). Show the photo at near-native scale in the center and
   let a heavily blurred copy of itself fill the sides. */
@media (min-aspect-ratio: 13/9) {
  .page-hero.hero-smoke, .slide.hero-smoke { background-image: none !important; }
  .page-hero.hero-smoke::before, .slide.hero-smoke::before {
    background: var(--hero-photo) center 30% / cover no-repeat;
    filter: blur(52px);
    transform: scale(1.18);
    z-index: 0;
  }
  .page-hero.hero-smoke::after, .slide.hero-smoke::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--hero-photo) center var(--hero-crop, 40%) / auto 125% no-repeat;
    pointer-events: none;
    /* photo is --hero-halfw × 2 wide (125% of vh × its aspect ratio; the default
       41.7vh fits the 736/1104 photos), centered — dissolve its outer edges into
       the blurred fill so the seam disappears */
    -webkit-mask-image: linear-gradient(to right,
      transparent calc(50vw - var(--hero-halfw, 41.7vh)),
      #000 calc(50vw - 12vh),
      #000 calc(50vw + 12vh),
      transparent calc(50vw + var(--hero-halfw, 41.7vh)));
    mask-image: linear-gradient(to right,
      transparent calc(50vw - var(--hero-halfw, 41.7vh)),
      #000 calc(50vw - 12vh),
      #000 calc(50vw + 12vh),
      transparent calc(50vw + var(--hero-halfw, 41.7vh)));
  }
}
body.hero-light .nav:not(.is-scrolled) .nav-brand { color: var(--espresso); }
body.hero-light .nav:not(.is-scrolled) .nav-links a { color: var(--taupe); }
body.hero-light .nav:not(.is-scrolled) .nav-links a:hover,
body.hero-light .nav:not(.is-scrolled) .nav-links a.is-active { color: var(--accent, var(--espresso)); }
body.hero-light .nav:not(.is-scrolled) .nav-toggle span,
body.hero-light .nav:not(.is-scrolled) .nav-toggle span::before,
body.hero-light .nav:not(.is-scrolled) .nav-toggle span::after { background: var(--espresso); }
.page-hero .hero-h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(64px, 8vw, 112px);
  letter-spacing: 0.02em;
  color: var(--cream);
  line-height: 1.02;
  text-shadow: 0 2px 20px rgba(76,55,30,0.15);
}
.page-hero .hero-h1 em {
  /* italic emphasis carries the surface accent (§1.4) */
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
body:not(.page-wellbeing):not(.page-concept) .page-hero .hero-h1 em { color: inherit; opacity: 0.96; }
.page-hero .hero-h2, .slide .hero-h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(13px, 1.4vw, 16px);
  text-transform: uppercase;
  color: rgba(255,247,232,0.95);
  line-height: 1.7;
  letter-spacing: 0.22em;
}
.page-hero .hero-body, .slide .hero-body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  color: rgba(255,247,232,0.9);
  line-height: 1.75;
  max-width: 520px;
  text-shadow: 0 1px 12px rgba(32,22,13,0.3);
}
.page-hero .hero-quote {
  position: absolute;
  bottom: 40px;
  left: 60px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: rgba(255,247,232,0.8);
  max-width: 260px;
  text-align: left;
  line-height: 1.6;
  z-index: 2;
}

/* Left-column hero variant (Wellbeing pillar pages: Move, Nutrition, Mind).
   The photo is a real img spanning the full hero so object-fit and
   object-position can frame the subject middle-right, clear of the text
   stack in the left column. When the photo's aspect ratio leaves no
   horizontal overflow to pan, --hero-pan widens the img box to the right;
   the subject shifts right by half the pan value. Fine-tune per page. */
.page-hero.hero-left {
  justify-content: flex-start;
  text-align: left;
  padding: 0;
}
.page-hero.hero-left::before { z-index: 1; }
.hero-left .hero-media {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + var(--hero-pan, 0%));
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  z-index: 0;
}
.page-hero.hero-left .page-hero-inner {
  width: 45%;
  max-width: none;
  padding: 120px 60px 120px 100px; /* balanced top/bottom */
}
/* Title matches the homepage hero scale and carries the same warm cream
   as the subtitle (.hero-h2) so the stack reads as one tone */
.page-hero.hero-left .hero-h1 {
  font-size: clamp(51px, 6.4vw, 90px);
  color: rgba(255,247,232,0.95);
}
@media (max-width: 900px) {
  .page-hero.hero-left { align-items: flex-end; padding: 0; }
  .page-hero.hero-left .page-hero-inner { width: 100%; padding: 140px 24px 80px; }
  .hero-left .hero-media { width: 100%; }
}

/* ─── Module center-header (§1.13) ─── */
.module-header { text-align: center; margin-bottom: 64px; }
.module-header .eyebrow { margin-bottom: 20px; }
.module-header .subtitle {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  color: var(--taupe);
}
.module-header .subtitle-serif {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  line-height: 2;
}

/* ============================================================
   FOOTER (§1.8)
   ============================================================ */
.footer {
  background: var(--peach-cream);
  padding: 80px 60px 40px;
  border-top: var(--hairline);
}
.footer-grid {
  max-width: var(--maxw);
  margin: 0 auto 64px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 56px;
}
.footer-note {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.7;
  color: var(--taupe);
  max-width: 42ch;
}
.footer-signup .footer-note { margin-bottom: 18px; }
.footer-signup .inline-form {
  flex-direction: column;
  align-items: stretch;
  max-width: 360px;
}
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--espresso);
  font-weight: 500;
  margin-bottom: 20px;
}
.footer-col h4 a { text-decoration: none; color: inherit; transition: color 300ms ease; }
.footer-col h4 a:hover { color: var(--taupe); }
.footer-col a.f-link {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  color: var(--taupe);
  text-decoration: none;
  margin-bottom: 8px;
  transition: color 300ms ease;
}
.footer-col a.f-link:hover { color: var(--espresso); }
.footer-close {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 24px;
  border-top: var(--hairline);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--taupe);
  letter-spacing: 0.15em;
}

/* ============================================================
   FORMS
   ============================================================ */
.input {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--clay);
  border-radius: 3px;
  padding: 15px 18px;
  width: 100%;
  transition: border-color 300ms ease;
}
.input::placeholder { color: var(--taupe-light); }
.input:focus { outline: none; border-color: var(--taupe); }
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 8px;
}
.field.is-error .input { border-color: var(--burgundy); }
textarea.input { min-height: 140px; resize: vertical; }

.inline-form {
  display: flex;
  gap: 12px;
  max-width: 520px;
}
.inline-form .input { flex: 1; }
.inline-form.centered { margin: 0 auto; }
.form-feedback {
  margin-top: 14px;
  font-size: 14px;
  font-style: italic;
  color: var(--taupe);
  opacity: 0;
  transition: opacity 300ms ease;
}
.form-feedback.is-visible { opacity: 1; }
.form-feedback.is-error { color: var(--burgundy); }
.form-success {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--accent);
}
.form-success-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.form-success-link:hover { opacity: 0.7; }

/* Contact form states: loading, success, error (sitewide easing) */
.form-stage,
.contact-success {
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.form-stage.is-leaving { opacity: 0; }
.contact-success { opacity: 0; }
.contact-success.is-visible { opacity: 1; }
#contact-form .input,
#contact-form .field label {
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
#contact-form.is-sending .input,
#contact-form.is-sending .field label { opacity: 0.6; }
.form-error {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: #8B3A2F;
  margin: 0 0 18px;
  max-width: 46ch;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.form-error:empty { margin: 0; }
.form-error.is-visible { opacity: 1; }
.contact-success .eyebrow { display: block; margin-bottom: 20px; }
.contact-success-headline { margin-bottom: 24px; font-size: clamp(30px, 3.4vw, 44px); }
.contact-success-body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.75;
  margin-bottom: 28px;
}
.contact-success-again {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: var(--taupe);
  text-decoration: none;
  transition: color 500ms var(--ease-slow);
}
.contact-success-again:hover { color: var(--espresso); }
.micro {
  margin-top: 14px;
  font-size: 13px;
  font-style: italic;
  color: var(--taupe);
}

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* Hero slider */
.slider {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 60px; /* balanced top/bottom so the block centers true */
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
.slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(32,22,13,0.32) 0%, rgba(32,22,13,0.18) 45%, rgba(32,22,13,0.38) 100%);
}
.slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
/* Light slide — pale imagery gets dark text and no scrim (mirrors hero-on-light) */
.slide.slide-on-light::before { background: none; }
.slide.slide-on-light .hero-h1 { color: var(--espresso); text-shadow: none; }
.slide.slide-on-light .hero-sub { color: var(--walnut); }
.slide.slide-on-light .btn { box-shadow: 0 0 0 1px var(--clay); }
.slide.slide-on-light .btn:hover { box-shadow: none; }
.slide-inner { position: relative; z-index: 2; max-width: 820px; }
.slide .hero-h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(64px, 8vw, 112px);
  letter-spacing: 0.02em;
  color: #fff7e8;
  line-height: 1.02;
  text-shadow: 0 2px 20px rgba(76,55,30,0.2);
}
.slide .hero-h1 em { font-style: italic; font-weight: 300; }
.slide .hero-sub {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(12px, 1.3vw, 15px);
  text-transform: uppercase;
  color: rgba(255,247,232,0.95);
  line-height: 1.8;
  letter-spacing: 0.22em;
  margin-bottom: 40px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.slider-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 5;
}
.slider-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,247,232,0.45);
  cursor: pointer;
  padding: 0;
  transition: background 400ms ease, transform 400ms ease;
}
.slider-dots button.is-active {
  background: #fff7e8;
  transform: scale(1.3);
}

/* Intent module */
.intent { position: relative; }
.intent .eyebrow { text-align: left; }
.intent-title {
  font-size: var(--fs-h2);
  max-width: 900px;
  margin-bottom: 40px;
}
.intent-title .intent-word {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 900ms ease, transform 900ms ease;
  display: inline-block;
}
.intent.is-in .intent-word { opacity: 1; transform: none; }
.intent-body {
  max-width: 640px;
  margin-bottom: 48px;
  font-size: var(--fs-body-lg);
}
@media (prefers-reduced-motion: reduce) {
  .intent-title .intent-word { opacity: 1; transform: none; transition: none; }
}

/* Two studios */
.two-studios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.studio-card {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.studio-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(32,22,13,0.45) 0%, rgba(32,22,13,0.08) 55%, transparent 100%);
  transition: background 500ms ease;
}
.studio-card .glass {
  position: relative;
  z-index: 2;
  margin: 32px;
  padding: 36px 32px;
  width: calc(100% - 64px);
  background: rgba(248,246,244,0.16);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(248,246,244,0.25);
  transition: background 500ms ease;
  display: flex;
  flex-direction: column;
  min-height: 250px;
}
.studio-card:hover .glass {
  background: rgba(248,246,244,0.30);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.studio-card .glass .eyebrow { color: rgba(255,247,232,0.85); margin-bottom: 14px; }
.studio-card .glass h3 {
  color: #fff7e8;
  font-size: 32px;
  margin-bottom: 12px;
}
.studio-card .glass p {
  color: rgba(255,247,232,0.9);
  font-size: 14px;
  margin-bottom: 22px;
}
.studio-card .glass .card-cta { margin-top: auto; }
.studio-card .glass .card-cta .btn { padding: 14px 30px; }

/* Meet Couro */
/* As seen in — quiet editorial press bar (§3b). Linked names look
   identical to unlinked ones at rest; taupe underline on hover only. */
.as-seen-in {
  background: var(--peach-cream);
  padding: 100px 60px;
  text-align: center;
}

.as-seen-in .eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 400;
  margin-bottom: 40px;
}

.as-seen-in .publications {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--espresso);
  font-weight: 400;
  line-height: 2.2;
  max-width: 1100px;
  margin: 0 auto 48px;
}

.as-seen-in .publications a {
  color: var(--espresso);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 300ms ease, color 300ms ease;
  padding-bottom: 2px;
}

.as-seen-in .publications a:hover {
  border-bottom-color: var(--taupe);
  color: var(--walnut);
  cursor: pointer;
}

.as-seen-in .publications .dot {
  color: var(--taupe-light);
  margin: 0 4px;
}

.as-seen-in .pull-quote {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 24px;
  color: var(--espresso);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.4;
  border: none;
  padding: 0;
}

.as-seen-in .pull-quote em {
  font-style: italic;
}

.as-seen-in .pull-quote cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--taupe);
  font-style: normal;
  font-weight: 400;
}

@media (max-width: 900px) {
  .as-seen-in {
    padding: 60px 24px;
  }
  .as-seen-in .publications {
    font-size: 11px;
    letter-spacing: 0.2em;
    line-height: 2.4;
  }
  .as-seen-in .pull-quote {
    font-size: 20px;
  }
}

.meet-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 72px;
  align-items: stretch; /* portrait column matches text column height */
}
.meet-portrait {
  /* portrait is clipped to the height of the text column (feedback round 5) */
  overflow: hidden;
  position: relative;
}
.meet-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.meet-stanzas p { margin-bottom: 20px; }
.meet-stanzas .serif-line {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  color: var(--espresso);
  letter-spacing: var(--ls-title);
}
.meet-closing {
  margin-top: 56px;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.4;
  color: var(--espresso);
  letter-spacing: var(--ls-title);
}
.meet-closing em { font-style: italic; color: var(--accent); }

/* Past collaborations — slow infinite marquee, pauses on hover */
.logo-marquee {
  width: 100%;
  overflow: hidden;
  padding: 24px 0;
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-scroll 55s linear infinite;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-track img {
  max-height: 44px;
  max-width: 150px;
  width: auto;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 400ms ease;
  flex-shrink: 0;
  /* spacing lives on the item (not flex gap) so the -50% loop point is exact */
  margin-right: 96px;
}
.logo-track img:hover { opacity: 1; }
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* half, because the set is duplicated */
}
@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none;
    width: auto;
    justify-content: center;
    flex-wrap: wrap;
  }
  .logo-track img { margin-right: 48px; }
  .logo-track img[aria-hidden="true"] { display: none; }
}
.logo-caption {
  margin-top: 32px;
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--taupe);
}

/* Compose Your Plate */
.compose-card {
  background: var(--cream);
  border-radius: var(--radius-soft);
  box-shadow: 0 8px 32px rgba(73,42,27,0.06);
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
}
.compose-card .compose-img {
  /* the guide cover is a portrait poster; show it whole on a matching backdrop
     instead of cropping it to the column */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  min-height: 420px;
  background: #cfc6b6;
}
.compose-card .compose-img img {
  width: min(300px, 100%);
  height: auto;
  border-radius: 2px;
  box-shadow: 0 24px 48px rgba(73,42,27,0.22);
}
.compose-card .compose-body {
  padding: 64px 56px;
  background: var(--paper);
}
.compose-card h3 { font-size: var(--fs-h3); margin-bottom: 20px; }
.compose-card p.desc { margin-bottom: 32px; color: var(--ink); }

/* Journal cards */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.journal-grid.two-up { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.journal-card {
  text-decoration: none;
  display: block;
  transition: transform 400ms ease, box-shadow 400ms ease;
  border-radius: 4px;
  overflow: hidden;
  background: var(--cream);
  cursor: pointer;
}
.journal-card:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 32px rgba(73,42,27,0.08);
}
.journal-card .cover {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
}
.journal-card .card-meta { padding: 24px 24px 28px; }
.journal-card .tag {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--taupe);
  display: block;
  margin-bottom: 12px;
}
.journal-card h3 {
  font-size: 22px;
  line-height: 1.25;
}
.journal-cta-row {
  margin-top: 48px;
  text-align: center;
}

/* Trinity connect */
.connect { text-align: center; }
.connect .h2 { margin-bottom: 28px; }
.connect p.connect-body {
  max-width: 560px;
  margin: 0 auto 40px;
}

/* ============================================================
   STUDIO CONCEPT
   ============================================================ */
.who-grid, .edge-grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 80px;
  align-items: start;
}
.edge-grid { align-items: center; }
.portrait-img {
  /* match the text column's height exactly — the image ends on the same
     line as the CTA instead of running past it. The img is absolutely
     positioned so its intrinsic size can't stretch the grid row. */
  position: relative;
  align-self: stretch;
  height: calc(100% + 48px); /* run slightly past the CTA line */
  box-shadow: 0 4px 24px rgba(76,12,18,0.08);
  overflow: hidden;
}
.portrait-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0; /* crop from the bottom only — top of the photo stays */
}

/* Process orbs */
.process { text-align: center; }
.process .subhead {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--taupe);
}
/* Process — burgundy orbs growing left to right on a shared baseline, each above
   an always-visible text block. Hover scale + sibling-dim kept from the orb version. */
.process-grid {
  /* Even geometric growth, each step x1.35. The old 130/210/300 stepped
     unevenly (x1.62 then x1.43) and left orb 03 filling 82% of its column. */
  --orb-1: 145px;
  --orb-2: 196px;
  --orb-3: 264px;
  --orb-max: var(--orb-3);
  --orb-gap: 48px;
  --rail: rgba(144,118,91,0.3);
  position: relative;
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* shared row tracks: orb, label, verbs, keywords, body — so the three
     text blocks stay aligned however the titles happen to wrap */
  grid-template-rows: auto auto auto auto auto;
  column-gap: var(--orb-gap);
  row-gap: 0;
  text-align: left;
}
.process-col {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
}

/* One line per title, only where the column is wide enough to take it:
   full-width desktop, and the stacked single-column layout. In between,
   three columns are too narrow and the title wraps rather than overflows. */
@media (min-width: 1200px) {
  .process-verbs { white-space: nowrap; }
}

/* Vertical guide lines: outer edges + the centre of each gap. Each line is
   as tall as the orb it introduces, so they climb with the orbs; they share
   the orbs' baseline and overshoot it by 20px. */
.process-rails {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--orb-max);
  pointer-events: none;
}
.process-rails i {
  position: absolute;
  bottom: -20px;            /* 20px past the shared baseline */
  width: 1px;
  background: var(--rail);
}
.process-rails i:nth-child(1) { left: 0; height: calc(var(--orb-1) + 44px); }
.process-rails i:nth-child(2) { left: calc(33.3333% - var(--orb-gap) / 6); height: calc(var(--orb-2) + 44px); }
.process-rails i:nth-child(3) { left: calc(66.6667% + var(--orb-gap) / 6); height: calc((var(--orb-2) + var(--orb-3)) / 2 + 44px); }
.process-rails i:nth-child(4) { right: 0; height: calc(var(--orb-3) + 44px); }

/* Orbs sit on one baseline; the larger ones grow upward */
.process-orb-area {
  height: var(--orb-max);
  margin-bottom: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.process-orb {
  position: relative;
  /* never wider than its column, so the three stay equal at any width */
  width: min(var(--orb-size), 100%);
  height: auto;
  aspect-ratio: 1;
  transform-origin: 50% 100%;
  transition: transform 500ms var(--ease-slow), opacity 500ms var(--ease-slow);
}
.process-orb-1 { --orb-size: var(--orb-1); }
.process-orb-2 { --orb-size: var(--orb-2); }
.process-orb-3 { --orb-size: var(--orb-3); }

/* The original sphere artwork carries the form and its own soft shading */
.process-orb-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 32px rgba(76,12,18,0.10));
  pointer-events: none;
}

/* Scout standing squarely on the crown of orb 01, telescope trained right
   across the later phases. She stands above the orb, so the peach-cream page
   is what sits behind her: deep burgundy is the readable silhouette here
   (14.1:1), where peach cream would vanish. Masked rather than tinted, so the
   colour holds whatever colour the source artwork happens to be. */
.process-scout {
  position: absolute;
  left: 50%;
  /* seated 1px into the crown so no sliver of background can show through */
  bottom: calc(100% - 1px);
  /* artwork is trimmed to the sole, and `auto 100%` makes the mask fill the
     height exactly — `contain` could letterbox it and float her again */
  width: 21px;
  height: 42px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  background-color: var(--burgundy-deep);
  -webkit-mask: url("images/concept/poppetje.png") no-repeat center bottom / auto 100%;
  mask: url("images/concept/poppetje.png") no-repeat center bottom / auto 100%;
  pointer-events: none;
}

.process-col:hover .process-orb { transform: scale(1.08); }
.process-grid:hover .process-col:not(:hover) .process-orb { opacity: 0.6; }

.process-text {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  width: 100%;
  margin-inline: auto;      /* centred on the orb's own axis */
  padding-top: 24px;        /* spacing kept; the separator rule is gone */
}
.process-label {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: normal;
  /* Cormorant defaults to old-style figures, which sit below cap height;
     lining figures match the height of the letters beside them */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--burgundy);
  margin-bottom: 12px;
}
.process-verbs {
  /* same face and treatment as the hero's "The art of creating" */
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  /* fluid, so the longest title ("Translate. Deliver. Embed") keeps one
     line as the columns narrow; ~5% headroom at every width */
  font-size: clamp(14px, 1.05vw + 5px, 20px);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.35;
  color: var(--walnut);     /* #492a1b */
  margin-bottom: 12px;
}
.process-keywords {
  font-family: var(--font-sans);
  font-size: 11px;
  /* 0.16em rather than 0.18em: with whole terms and trailing separators,
     this is what keeps all three lists to two lines */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  line-height: 1.9;
  margin-bottom: 16px;
}
.process-body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.75;
}
@media (prefers-reduced-motion: reduce) {
  .process-orb { transition: none; }
  .process-col:hover .process-orb { transform: none; }
  .process-grid:hover .process-col:not(:hover) .process-orb { opacity: 1; }
}

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 64px;
}
.service {
  border-top: var(--hairline);
  padding-top: 32px;
}
.service .num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 48px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 20px;
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: border-color 400ms ease;
}
.service:hover .num { border-bottom-color: var(--accent); }
.service .title {
  /* same face and treatment as the process phase titles */
  font-family: var(--font-sans);
  font-weight: 500;
  /* Uppercase sans, sized to sit under the 48px numeral without competing
     with it, and still a step above the 20px process titles */
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);     /* burgundy, same source as the numeral above */
  margin-bottom: 20px;
}
.service .service-body {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.75;
}

/* Cases */
.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.case {
  background: var(--peach-cream); /* #efe7da — lifts the cards off the cream section */
  padding: 48px 32px;
  border-radius: 4px;
  transition: transform 400ms ease, box-shadow 400ms ease;
}
.case:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(76,12,18,0.08);
}
.case-logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 32px;
}
.case-logo img {
  max-height: 52px;
  max-width: 180px;
  object-fit: contain;
}
.case-category {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--burgundy);
  text-align: center;
  margin-bottom: 20px;
}
.case-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--espresso);
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.6;
}
/* In the three-card row, keep category and title on one line so the
   rows align across cards */
@media (min-width: 900px) {
  .case-category {
    white-space: nowrap;
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .case-title {
    white-space: nowrap;
    font-size: 12px;
    letter-spacing: 0.18em;
  }
}
.case-body { font-size: 13px; color: var(--ink); line-height: 1.75; }
.case-body p + p { margin-top: 12px; }
/* Body copy reveals on hover — logo, category, and title carry the rest state */
@media (hover: hover) and (pointer: fine) {
  .case { cursor: pointer; }
  .case .case-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 1100ms var(--ease-slow), opacity 900ms 100ms var(--ease-slow);
  }
  .case:hover .case-body {
    max-height: 560px;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .case .case-body { max-height: none !important; opacity: 1 !important; transition: none !important; }
}

/* The Reading */
.vocab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 64px;
}
.vocab-tile .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-bottom: 12px;
}
.vocab-tile .label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 26px;
  color: var(--accent);
  margin-bottom: 8px;
}
.vocab-tile .desc { font-size: 13px; color: var(--ink); line-height: 1.6; }
.followers-line {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--espresso);
  margin-bottom: 80px;
}
.horizons-lead {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--taupe);
  margin-bottom: 8px;
}
.horizons-note {
  text-align: center;
  font-size: 13px;
  color: var(--taupe);
  margin-bottom: 60px;
}
.horizons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: center;
  margin-bottom: 60px;
}
.horizon .circle {
  width: 140px; height: 140px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--burgundy) 0%, var(--burgundy-mist) 70%, transparent 100%);
  filter: drop-shadow(0 4px 16px rgba(76,12,18,0.1));
}
.horizon .time {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 22px;
  color: var(--espresso);
  margin-bottom: 8px;
}
.horizon .sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--accent);
  margin-bottom: 16px;
}
.horizon .horizon-body {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.7;
  max-width: 260px;
  margin: 0 auto;
}
.reading-close {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--accent);
}

/* Sectors */
.sectors {
  padding: 100px 60px;
  text-align: center;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  position: relative;
}
.sectors-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 32px;
}
.sectors-line {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--espresso);
  letter-spacing: var(--ls-title);
}

/* Foresight report */
.foresight {
  background: var(--burgundy-deep);
  color: var(--cream);
  text-align: center;
  padding: 140px 60px;
}
.foresight .inner { max-width: 720px; }
.foresight .eyebrow { color: var(--cream); opacity: 0.85; }
.foresight .h2 { color: var(--cream); font-size: clamp(38px, 4.4vw, 56px); }
.foresight .h2 em { color: var(--cream); font-style: italic; opacity: 0.95; }
.foresight .stanzas { margin-top: 32px; font-size: 16px; line-height: 1.85; }
.foresight .stanzas p + p { margin-top: 20px; }
.foresight .btn-wrap { margin-top: 40px; }
.foresight-note {
  margin-top: 24px;
  font-size: 12px;
  opacity: 0.7;
  letter-spacing: 0.05em;
}

/* Concept closing */
.closing {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 60px;
  position: relative;
}
.closing .closing-h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
  font-size: clamp(56px, 6.8vw, 96px);
  line-height: 1.05;
  margin-bottom: 40px;
  letter-spacing: var(--ls-title);
}
.closing .closing-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 48px;
}

/* Modal (Foresight Report email capture) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(32,22,13,0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--cream);
  border-radius: 8px;
  padding: 56px 48px;
  max-width: 480px;
  width: 100%;
  position: relative;
  transform: translateY(16px);
  transition: transform 400ms ease;
}
.modal-overlay.is-open .modal { transform: none; }
.modal .modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 24px;
  line-height: 1;
  color: var(--taupe);
  cursor: pointer;
  padding: 8px;
  transition: color 300ms ease;
}
.modal .modal-close:hover { color: var(--espresso); }
.modal .eyebrow { color: var(--burgundy); }
.modal h3 { font-size: 30px; margin-bottom: 28px; }
.modal h3 em { color: var(--burgundy); }
.modal .btn-burgundy {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 16px 36px;
  background: var(--burgundy);
  color: var(--cream);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 500ms var(--ease-slow), letter-spacing 500ms var(--ease-slow);
  width: 100%;
}
.modal .btn-burgundy:hover { background: var(--burgundy-deep); letter-spacing: 0.32em; }

/* ============================================================
   STUDIO WELLBEING
   ============================================================ */

/* Three pillars */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.pillar-card {
  text-decoration: none;
  background: var(--cream);
  overflow: hidden;
  transition: transform 400ms ease, box-shadow 400ms ease;
  display: block;
  cursor: pointer;
}
.pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(73,42,27,0.10);
}
.pillar-card .pillar-img {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
}
.pillar-card .pillar-body { padding: 28px 28px 32px; }
.pillar-card h3 {
  font-size: 26px;
  margin-bottom: 10px;
}
.pillar-card p { font-size: 14px; color: var(--ink); margin-bottom: 18px; }
.pillar-card .begin {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
}
.pillar-card .begin::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 24px;
  height: 1px;
  background: var(--accent);
  transition: width 400ms ease;
}
.pillar-card:hover .begin::after { width: 100%; }

/* Rotating word banner */
.word-banner {
  padding: 64px 60px;
  text-align: center;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  overflow: hidden;
}
.word-banner .rotator { position: relative; height: 130px; }
.word-banner .word-set {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 900ms ease;
}
.word-banner .word-set.is-active { opacity: 1; }
.word-banner .big-word {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(34px, 4vw, 52px);
  color: var(--espresso);
  letter-spacing: var(--ls-title);
  line-height: 1.1;
}
.word-banner .word-sub {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--taupe);
}

/* Work with Couro */
.events-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 72px;
  align-items: center;
}
.events-grid .arch-img {
  border-radius: 200px 200px 6px 6px;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.events-grid .arch-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Square-cornered sibling of arch-img for editorial splits */
.events-grid .flat-img {
  overflow: hidden;
  aspect-ratio: 3/4;
}
.events-grid .flat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Flush split: the image column stretches so its top and bottom line up
   exactly with the text block beside it. The img is absolute so its
   intrinsic height cannot make the row taller than the text. */
.events-grid.split-flush { align-items: stretch; }
.events-grid.split-flush .flat-img {
  aspect-ratio: auto;
  height: auto;
  position: relative;
}
.events-grid.split-flush .flat-img img {
  position: absolute;
  inset: 0;
}

/* Editorial pillar menu (bottom CTA) */
.pillar-menu { max-width: 900px; margin: 64px auto 0; text-align: left; }
.pillar-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 36px 24px;
  border-top: var(--hairline);
  text-decoration: none;
  position: relative;
  transition: background 400ms ease;
  cursor: pointer;
}
.pillar-row:last-child { border-bottom: var(--hairline); }
.pillar-row .p-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe-light);
}
.pillar-row .p-word-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
}
.pillar-row .p-word {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(28px, 3.2vw, 40px);
  color: var(--espresso);
  letter-spacing: var(--ls-title);
  transition: transform 400ms ease;
}
.pillar-row .p-thumb {
  width: 64px;
  height: 84px;
  border-radius: 32px 32px 3px 3px;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 400ms ease, transform 400ms ease;
}
.pillar-row .p-arrow {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 22px;
  color: var(--taupe);
  transition: transform 400ms ease, color 400ms ease;
}
.pillar-row:hover { background: rgba(248,246,244,0.65); }
.pillar-row:hover .p-word { transform: translateX(8px); }
.pillar-row:hover .p-thumb { opacity: 1; transform: none; }
.pillar-row:hover .p-arrow { transform: translateX(4px); color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .pillar-row .p-thumb { opacity: 1; transform: none; }
}

/* ============================================================
   ABOUT
   ============================================================ */
/* Story intro — short centered lead */
.story-intro {
  max-width: 720px;
  margin: 0 auto;
  color: var(--ink);
}
/* Hand-drawn macron centered above the O — Jost's Ō glyph renders the
   bar offset to the side in some browsers */
.o-macron { position: relative; display: inline-block; line-height: 1; }
.o-macron::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -0.06em;
  width: 0.6em;
  height: 0.055em;
  background: currentColor;
}
/* In letter-spaced settings (hero subtitle) the span's trailing tracking
   widens its box, skewing the 50% centering off the glyph — pull the bar
   back by half the tracking (0.22em / 2) */
.hero-h2 .o-macron::after { left: calc(50% - 0.11em); }

/* Alternating studio splits — image left, text right; §3 and §4 are sisters */
.accent-concept { --accent: var(--burgundy); --accent-eyebrow: var(--burgundy); }
.accent-wellbeing { --accent: var(--wellbeing-olive); }
.studio-split .split-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
}
.studio-split .split-photo {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 10px 28px rgba(73,42,27,0.10);
}
.studio-split .split-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Flipped variant — text left, image right (§4); DOM keeps the photo first
   so the mobile collapse stays image-first like §3 */
.studio-split.split-flip .split-grid { grid-template-columns: 1fr 1.1fr; }
.studio-split.split-flip .split-photo { order: 2; }
/* Founder-portrait split (§3) matches the Concept Who-section treatment:
   top-aligned with the text column, ending 48px past it, cropped from
   the bottom only (the img is absolute so it can't size the grid row) */
#strategist .split-grid { align-items: start; }
#strategist .split-photo {
  position: relative;
  aspect-ratio: auto;
  align-self: stretch;
  height: calc(100% + 48px);
}
#strategist .split-photo img {
  position: absolute;
  inset: 0;
  object-position: 50% 0;
}
.studio-split .split-text .h2 { margin-bottom: 28px; }
.studio-split .split-text p { margin-bottom: 20px; }
.studio-split .split-text p:last-child { margin-bottom: 0; }

/* The philosophy — unified centered manifesto spread */
section.block.philosophy-close { padding-top: 100px; padding-bottom: 100px; }
.philosophy-close .manifesto { max-width: 900px; margin: 0 auto; position: relative; }
.philosophy-close .eyebrow { font-size: 11px; letter-spacing: 0.25em; color: var(--taupe); }
.philosophy-close .manifesto-stanza {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1.15;
  letter-spacing: var(--ls-title);
  color: var(--espresso);
}
.philosophy-close .manifesto-stanza em { font-style: italic; color: var(--espresso); }
.philosophy-close .manifesto-rhyme {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--taupe);
  margin-top: 40px;
}
.philosophy-close .manifesto-divider {
  width: 80px;
  height: 1px;
  background: rgba(175,151,123,0.3);
  margin: 80px auto;
}
.philosophy-close .belief-row {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--espresso);
  line-height: 1.5;
  max-width: 720px;
  margin: 24px auto 0;
}
/* collapses with the eyebrow's 24px bottom margin to a 36px gap */
.philosophy-close .eyebrow + .belief-row { margin-top: 36px; }
.philosophy-close .belief-num {
  font-size: 18px;
  color: var(--burgundy);
  margin-right: 18px;
}
@media (max-width: 900px) {
  section.block.philosophy-close { padding-top: 60px; padding-bottom: 60px; }
}

.story-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  align-items: start;
}
.story-text p { margin-bottom: 20px; }
.story-text .serif-beat {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 24px;
  color: var(--espresso);
  letter-spacing: var(--ls-title);
  line-height: 1.4;
  margin: 32px 0;
}
.pull-quote {
  margin-top: 48px;
  padding-left: 28px;
  border-left: 3px solid var(--accent);
}
.pull-quote .lead-in {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  color: var(--espresso);
  margin-bottom: 16px;
}
.pull-quote p.belief {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 8px;
}
.mood-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.mood-collage .m-item {
  border-radius: 7px;
  overflow: hidden;
}
.mood-collage .m-item img { width: 100%; height: 100%; object-fit: cover; }
.mood-collage .m-item.tall { aspect-ratio: 3/4; }
.mood-collage .m-item.wide { aspect-ratio: 4/3; grid-column: span 2; }
.mood-collage .m-item.square { aspect-ratio: 1; }
.mood-collage .m-item.tilt-l { transform: rotate(-2deg); box-shadow: 0 10px 28px rgba(73,42,27,0.10); }
.mood-collage .m-item.tilt-r { transform: rotate(1.5deg); box-shadow: 0 10px 28px rgba(73,42,27,0.10); }
.mood-collage .m-item.drop { margin-top: 36px; }

/* Two studios (About variant with subheaders) */
.two-studios .glass .sub-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,247,232,0.75);
  margin-bottom: 10px;
}

/* ============================================================
   MIND · MOVE — practice cards
   ============================================================ */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.practice-card {
  background: var(--cream);
  overflow: hidden;
  transition: transform 400ms ease, box-shadow 400ms ease;
}
.practice-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(73,42,27,0.08);
}
.practice-card .practice-img {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
}
.practice-card .practice-body { padding: 28px 28px 34px; }
.practice-card h3 { font-size: 24px; margin-bottom: 12px; }
.practice-card p { font-size: 14px; color: var(--ink); }

/* Audio practice cards (Mind) */
.audio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}
.audio-card {
  background: var(--cream);
  border-radius: var(--radius-soft);
  padding: 40px 36px;
  border: var(--hairline);
}
.audio-card .audio-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
.audio-card .audio-play {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 400ms ease, color 400ms ease;
}
.audio-card .audio-play svg { width: 20px; height: 20px; }
.audio-card .audio-play:hover { background: var(--accent); color: var(--cream); }
.audio-card h3 {
  font-style: italic;
  font-size: 26px;
}
.audio-card .audio-meta-line {
  font-size: 13px;
  color: var(--taupe);
  margin-top: 4px;
}
.audio-card .audio-progress {
  height: 2px;
  background: var(--clay);
  border-radius: 2px;
  margin-bottom: 20px;
  overflow: hidden;
}
.audio-card .audio-progress .fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 1s linear;
}
.audio-card .audio-desc {
  font-size: 14px;
  font-style: italic;
  color: var(--ink);
}
.newsletter-line {
  margin-top: 48px;
  text-align: center;
  font-size: 14px;
  font-style: italic;
  color: var(--taupe);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Quote module */
.quote-block {
  padding: 84px 60px;
  text-align: center;
}
.quote-block blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 38px);
  color: var(--espresso);
  letter-spacing: var(--ls-title);
  line-height: 1.4;
  max-width: 800px;
  margin: 0 auto 24px;
}
.quote-block cite {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* Library of practice — editorial rows (Move) */
.library-rows { max-width: 900px; margin: 56px auto 0; }
.library-row {
  display: grid;
  grid-template-columns: 60px 80px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 28px 20px;
  border-top: var(--hairline);
  transition: background 400ms ease;
  cursor: pointer;
}
.library-row:last-of-type { border-bottom: var(--hairline); }
.library-row .l-num {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.3em;
  color: var(--taupe-light);
  text-transform: uppercase;
}
.library-row .l-thumb {
  width: 64px;
  height: 84px;
  border-radius: 32px 32px 3px 3px;
  background-size: cover;
  background-position: center;
  transition: transform 400ms ease;
}
.library-row .l-name {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 28px;
  color: var(--espresso);
  letter-spacing: var(--ls-title);
}
.library-row .l-meta {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--taupe-light);
  margin-top: 4px;
}
.library-row .l-arrow {
  font-size: 20px;
  color: var(--taupe);
  transition: transform 400ms ease, color 400ms ease;
}
.library-row:hover { background: rgba(248,246,244,0.7); }
.library-row:hover .l-thumb { transform: scale(1.05); }
.library-row:hover .l-arrow { transform: translateX(4px); color: var(--accent); }
.library-cta {
  margin-top: 48px;
  text-align: center;
}
.library-cta .lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--espresso);
  margin-bottom: 24px;
}

/* Closing banner (Move) */
.closing-banner {
  padding: 72px 60px;
  text-align: center;
  border-top: var(--hairline);
}
.closing-banner p {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 34px);
  color: var(--espresso);
  letter-spacing: var(--ls-title);
  line-height: 1.4;
}

/* ============================================================
   NUTRITION
   ============================================================ */
/* Six pillars marquee: six cream cards drift right to left in a
   continuous loop. The set is duplicated in the DOM so the -50% keyframe
   restarts invisibly; spacing uses margins, not flex gap, so the halfway
   point lands exactly on the set boundary (same trick as the homepage
   logo marquee). Pauses on hover. */
.pillar-marquee {
  overflow: hidden;
  margin: 0 -60px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.pillar-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: pillar-scroll 50s linear infinite;
}
.pillar-marquee:hover .pillar-track { animation-play-state: paused; }
.pillar-slide {
  flex-shrink: 0;
  width: 320px;
  min-height: 200px;
  margin-right: 32px;
  background: var(--cream);
  padding: 32px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pillar-slide h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 26px;
  color: var(--espresso);
  line-height: 1.2;
  margin-bottom: 12px;
}
.pillar-slide p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.7;
}
@keyframes pillar-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  /* Collapse to a static three-column grid; the duplicate set disappears */
  .pillar-marquee {
    -webkit-mask-image: none;
    mask-image: none;
    margin: 0;
    padding: 0 60px;
  }
  .pillar-track {
    animation: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: auto;
    max-width: 1080px;
    margin: 0 auto;
  }
  .pillar-track .pillar-slide { width: auto; margin-right: 0; }
  .pillar-track [aria-hidden="true"] { display: none; }
}

/* Framework — sticky plate + hover-reveal rows */
.framework-cols {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  margin-top: 96px;
}
.framework-plate-col {
  width: 40%;
  position: sticky;
  top: 96px;
}
/* Plate figure: sharp image whose perimeter fades to transparent inside
   a padded, never-clipping wrap so the dissolve has equal room on all
   four sides; the circle mask keeps the fade symmetric on every axis.
   Multiply blend melts the flat cream areas into the page tone. */
.framework-plate-wrap {
  --plate-pad: 60px;
  position: relative;
  width: 150%;
  max-width: 760px;
  aspect-ratio: 1;
  margin: 0 -25%;
  padding: var(--plate-pad);
  overflow: visible;
  box-sizing: border-box;
}
.framework-plate-sharp {
  position: absolute;
  top: var(--plate-pad);
  left: var(--plate-pad);
  right: var(--plate-pad);
  bottom: var(--plate-pad);
  width: calc(100% - 2 * var(--plate-pad));
  height: calc(100% - 2 * var(--plate-pad));
  object-fit: contain;
  mix-blend-mode: multiply;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  /* Sharp interior, smooth fade to transparent at the edges */
  mask-image: radial-gradient(
    circle at center,
    black 0%,
    black 60%,
    transparent 92%
  );
  -webkit-mask-image: radial-gradient(
    circle at center,
    black 0%,
    black 60%,
    transparent 92%
  );
}
.framework-rows-col { width: 60%; }
.fw-row {
  position: relative;
  padding: 32px 0 32px 32px;
  border-top: var(--hairline);
  cursor: pointer;
  transition: background 300ms ease-out;
}
.fw-row:last-child { border-bottom: var(--hairline); }
.fw-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.fw-row .fw-line {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 28px;
  color: var(--espresso);
  letter-spacing: var(--ls-title);
  transition: transform 300ms ease-out;
  transform-origin: left center;
}
.fw-row .fw-line .portion {
  font-style: italic;
  color: var(--taupe-light);
}
.fw-row .fw-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 400ms ease-out, opacity 400ms ease-out, margin-top 400ms ease-out;
  font-size: 15px;
  line-height: 1.7;
  color: var(--taupe);
}
.fw-row:hover, .fw-row.is-open { background: rgba(32,22,13,0.03); }
.fw-row:hover::before, .fw-row.is-open::before, .fw-row:focus-visible::before { opacity: 1; }
.fw-row:hover .fw-line, .fw-row.is-open .fw-line, .fw-row:focus-visible .fw-line { transform: translateX(6px) scale(1.05); }
.fw-row:hover .fw-body, .fw-row.is-open .fw-body, .fw-row:focus-visible .fw-body {
  max-height: 160px;
  opacity: 1;
  margin-top: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .fw-row .fw-body { max-height: none; opacity: 1; margin-top: 16px; }
  .fw-row::before { opacity: 1; }
  .fw-row .fw-line, .fw-row:hover .fw-line { transform: none; transition: none; }
}

/* Recipes carousel */
.carousel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 24px;
}
.carousel-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.carousel-nav .link-caps { color: var(--accent); }
.carousel-arrows { display: flex; gap: 10px; }
.carousel-arrows button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
  transition: background 400ms ease, color 400ms ease;
}
.carousel-arrows button:hover { background: var(--accent); color: var(--cream); }
.carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.recipe-card {
  flex: 0 0 calc((100% - 72px) / 4);
  scroll-snap-align: start;
  text-decoration: none;
  display: block;
  transition: transform 400ms ease;
  cursor: pointer;
}
.recipe-card:hover { transform: translateY(-4px); }
.recipe-card .r-img {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  margin-bottom: 16px;
}
.recipe-card .r-cat {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--taupe);
  display: block;
  height: 18px;
}
.recipe-card .r-title-wrap { min-height: 58px; margin-top: 6px; }
.recipe-card h3 { font-size: 22px; line-height: 1.2; }
.recipe-card .r-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--taupe);
  display: block;
}
.recipe-card .r-meta {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--taupe-light);
}
@media (prefers-reduced-motion: reduce) {
  .carousel { scroll-behavior: auto; }
}

/* ============================================================
   RECIPE DETAIL TEMPLATE
   ============================================================ */
.recipe-hero {
  padding: 140px 60px 0;
  text-align: center;
}
.recipe-hero .hero-img {
  max-width: 900px;
  margin: 0 auto 48px;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-image);
  position: relative;
}
.recipe-hero .badge {
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--espresso);
  background: rgba(248,246,244,0.85);
  padding: 8px 16px;
  border-radius: 999px;
}
.recipe-hero h1 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 12px; }
.recipe-hero .r-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  color: var(--taupe);
  margin-bottom: 20px;
}
.recipe-hero .r-meta-row {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--taupe);
}
.recipe-quote {
  padding: 72px 60px 0;
  text-align: center;
}
.recipe-quote blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--accent);
  max-width: 680px;
  margin: 0 auto 28px;
  line-height: 1.5;
}
.recipe-quote .r-desc {
  max-width: 600px;
  margin: 0 auto;
  color: var(--ink);
}
.recipe-section { padding: 72px 60px 0; }
.recipe-section .inner-recipe { max-width: 720px; margin: 0 auto; }
.recipe-section .eyebrow { color: var(--accent); }
.ing-group { margin-bottom: 36px; }
.ing-group h3 { font-size: 24px; margin-bottom: 6px; }
.ing-group .ing-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--taupe);
  margin-bottom: 12px;
}
.ing-group ul { list-style: none; margin-top: 12px; }
.ing-group li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 8px;
  font-size: 15px;
}
.ing-group li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 28px;
  margin-bottom: 36px;
  align-items: start;
}
.step .s-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 40px;
  color: var(--accent);
  line-height: 1;
}
.step .s-body strong {
  font-weight: 400;
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--espresso);
  display: block;
  margin-bottom: 6px;
  letter-spacing: var(--ls-title);
}
.step .s-body { font-size: 15px; }
.recipe-notes {
  max-width: 700px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.8;
}

/* Keep exploring */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-hero {
  padding: 180px 60px 80px;
}
.contact-hero-grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 72px;
  align-items: stretch; /* portrait spans the full height of the text stack */
  max-width: var(--maxw);
  margin: 0 auto;
}
.contact-hero h1 { font-size: clamp(48px, 5.6vw, 76px); margin-bottom: 28px; }
.contact-meet { margin-top: 48px; }
.contact-meet .eyebrow { display: block; margin-bottom: 20px; }
.chip-group { margin-top: 40px; }
.chip-group-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 24px;
}
.contact-portrait {
  border-radius: var(--radius-soft);
  overflow: hidden;
}
.contact-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.contact-cols {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 72px;
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
}
.direct-lines .d-row {
  padding: 18px 0;
  border-bottom: var(--hairline);
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  align-items: baseline;
  font-size: 14px;
}
.direct-lines .d-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--taupe);
}
.direct-lines a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-underline-offset: 3px;
  transition: text-decoration-color 300ms ease;
}
.direct-lines a:hover { text-decoration-color: var(--espresso); }
.office-hours { margin-top: 56px; }
.office-hours p { font-size: 14px; color: var(--ink); margin-bottom: 8px; }

/* ============================================================
   JOURNAL INDEX + ARTICLES + SHOP
   ============================================================ */
/* Journal category pills. /links deep-links into these with ?category=,
   so the active one has to read unambiguously on arrival. */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}
.filter-tabs button {
  background: var(--cream);
  border: 1px solid var(--chalk-beige);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  cursor: pointer;
  padding: 11px 20px 10px;
  transition:
    color 300ms var(--ease-slow),
    background 300ms var(--ease-slow),
    border-color 300ms var(--ease-slow);
}
.filter-tabs button:hover {
  color: var(--espresso);
  border-color: var(--taupe-light);
}
.filter-tabs button.is-active {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--peach-cream);
}
.filter-tabs button:focus-visible {
  outline: 2px solid var(--espresso);
  outline-offset: 3px;
}
.filter-count {
  margin: 0 0 48px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--taupe);
  min-height: 1em;
}
/* Phones: three pills at desktop tracking spill onto a second row. */
@media (max-width: 479px) {
  .filter-tabs { gap: 8px; }
  .filter-tabs button { padding: 10px 14px 9px; letter-spacing: 0.14em; }
}

@media (prefers-reduced-motion: reduce) {
  .filter-tabs button { transition: none; }
}

.article-hero {
  padding: 160px 60px 64px;
  text-align: center;
}
.article-hero .inner-narrow { max-width: 820px; }
.article-hero h1 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 20px; }
.article-body {
  max-width: 900px; /* matches the hero image container so text and image align */
  margin: 0 auto;
  padding: 0 24px 120px;
}
.article-body p { margin-bottom: 24px; font-size: 16px; line-height: 1.85; }
.article-body h2 {
  font-size: 32px;
  margin: 48px 0 20px;
}
.article-body .a-list {
  margin: 0 0 24px 0;
  padding-left: 0;
  list-style: none;
  counter-reset: alist;
}
.article-body .a-list li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.8;
}
.article-body ul.a-list li::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.article-body ol.a-list li::before {
  counter-increment: alist;
  content: counter(alist, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: var(--accent);
}
.article-body .pull {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 26px;
  color: var(--accent);
  text-align: center;
  line-height: 1.5;
  margin: 48px auto;
  max-width: 560px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .framework-cols { flex-direction: column; gap: 40px; margin-top: 64px; }
  .framework-plate-col { width: 100%; position: static; }
  .framework-plate-wrap { --plate-pad: 32px; max-width: 500px; width: 100%; margin: 0 auto; }
  .framework-rows-col { width: 100%; }
  .fw-row .fw-body { max-height: none; opacity: 1; margin-top: 16px; }
  .fw-row::before { opacity: 1; }
  .recipe-card { flex-basis: calc((100% - 24px) / 1.5); }
}

@media (max-width: 900px) {
  section.block { padding: var(--pad-section-m) 24px; }
  .nav { padding: 16px 24px; }
  .nav.is-scrolled { padding: 12px 24px; }
  .nav-links { display: none; }
  .nav-toggle { display: block; z-index: 110; }
  .vertical-caption { display: none; }

  .page-hero { padding: 120px 24px; } /* balanced top/bottom */
  .page-hero .hero-quote { display: none; }
  .slide { padding: 120px 24px; }

  .two-studios { grid-template-columns: 1fr; }
  .studio-card { min-height: 440px; }
  .meet-grid { grid-template-columns: 1fr; gap: 40px; }
  .meet-portrait { position: static; max-width: 440px; }
  /* single column: portrait shows at natural height again */
  .meet-portrait img { position: static; height: auto; object-fit: unset; }
  .compose-card { grid-template-columns: 1fr; }
  .compose-card .compose-img { min-height: 280px; }
  .compose-card .compose-body { padding: 40px 28px; }
  .journal-grid, .journal-grid.two-up { grid-template-columns: 1fr; }
  .logo-track { animation-duration: 40s; }
  .logo-track img { max-height: 32px; margin-right: 56px; }

  .who-grid, .edge-grid { grid-template-columns: 1fr; gap: 40px; }
  /* stacked layout: no text column to match, give the portrait its own height */
  .portrait-img { aspect-ratio: 3/4; align-self: auto; height: auto; }
  /* Orbs at 60% of desktop, growth ratio intact; row is kept while it still fits */
  .process-grid {
    --orb-1: 87px;
    --orb-2: 118px;
    --orb-3: 158px;
    --orb-gap: 24px;
  }
  .process-rails { display: none; }
  .process-scout { width: 13px; height: 25px; }
  .services-grid { grid-template-columns: 1fr; gap: 32px; }
  .cases { grid-template-columns: 1fr; }
  .vocab-grid { grid-template-columns: 1fr 1fr; }
  .horizons-grid { grid-template-columns: 1fr; }
  .sectors { padding: 80px 24px; }
  .pause { padding: 100px 24px; }
  .pause-inner { grid-template-columns: 1fr; gap: 24px; }
  .pause-num::after { display: none; }
  .pause-media::after { background: radial-gradient(ellipse at 50% 50%, rgba(28,17,9,0.34) 0%, rgba(28,17,9,0.42) 45%, rgba(26,20,15,0.50) 100%), linear-gradient(to bottom, rgba(26,19,12,0) 0%, rgba(26,19,12,0.36) 26%, rgba(26,19,12,0.36) 74%, rgba(26,19,12,0) 100%), linear-gradient(120deg, rgba(30,24,18,0.18) 0%, rgba(30,24,18,0.12) 50%, rgba(30,24,18,0.16) 100%); }
  .moodboard { padding: 80px 24px 60px; }
  .moodboard-image { width: 260px; margin-bottom: 40px; }
  .moodboard-caption { padding: 0 8px; font-size: 10px; letter-spacing: 0.3em; }

  .pillar-grid, .practice-grid, .explore-grid { grid-template-columns: 1fr; }
  .pillar-marquee { margin: 0 -24px; }
  .pillar-track { animation-duration: 42s; }
  .pillar-slide { width: 260px; padding: 24px; margin-right: 24px; }
  .pillar-slide h3 { font-size: 22px; }
  .pillar-slide p { font-size: 13px; }
  .events-grid { grid-template-columns: 1fr; gap: 40px; }
  .events-grid .arch-img, .events-grid .flat-img { max-width: 420px; margin: 0 auto; }
  /* Stacked: the flush image needs its own height again */
  .events-grid.split-flush .flat-img { aspect-ratio: 3/4; height: auto; width: 100%; }
  .events-grid.split-flush .flat-img img { position: static; }
  .audio-grid { grid-template-columns: 1fr; }
  .pillar-row { grid-template-columns: 70px 1fr auto; gap: 16px; padding: 28px 12px; }
  .library-row { grid-template-columns: 40px 56px 1fr auto; gap: 16px; padding: 22px 8px; }
  .library-row .l-thumb { width: 52px; height: 68px; }
  .library-row .l-name { font-size: 22px; }
  .word-banner { padding: 40px 24px; }

  .story-grid { grid-template-columns: 1fr; gap: 48px; }
  .mood-collage .m-item.drop { margin-top: 0; }
  .mood-collage { gap: 16px; }
  .studio-split .split-grid,
  .studio-split.split-flip .split-grid { grid-template-columns: 1fr; gap: 40px; }
  .studio-split .split-photo { max-width: 480px; }
  /* stacked layout: no text column to match, restore the photo's own height */
  #strategist .split-photo { aspect-ratio: 4 / 5; align-self: auto; height: auto; }
  .studio-split.split-flip .split-photo { order: 0; }

  .contact-hero { padding: 140px 24px 60px; }
  .contact-hero-grid, .contact-cols { grid-template-columns: 1fr; gap: 40px; }
  /* Stacked: portrait first, then the text stack */
  .contact-hero-grid .contact-portrait { order: -1; max-width: 440px; aspect-ratio: 4/5; }

  .recipe-hero { padding: 120px 24px 0; }
  .recipe-section, .recipe-quote { padding: 48px 24px 0; }
  .step { grid-template-columns: 44px 1fr; gap: 16px; }
  .article-hero { padding: 130px 24px 40px; }
  .article-body { padding: 0 24px 80px; }

  .footer { padding: 60px 24px 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-close { flex-direction: column; gap: 8px; }

  .carousel-head { flex-direction: column; align-items: flex-start; }
  .inline-form { flex-direction: column; }
}

@media (max-width: 540px) {
  .recipe-card { flex-basis: calc((100% - 16px) / 1.35); }
  .vocab-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .page-hero .hero-h1, .slide .hero-h1 { font-size: clamp(44px, 13vw, 64px); }
  .mood-collage { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   LINKS PAGE (/links) — Instagram bio destination.
   Unlisted, standalone: no nav, no footer, no sitewide modules.
   Everything here is scoped to .page-links / .links-* / .link-*
   so it cannot reach any other page.

   Type rule for this page: Cormorant Garamond appears exactly once,
   on the name. Every other line is Jost.
   ============================================================ */
body.page-links {
  background: var(--peach-cream);
  color: var(--ink);
}

.links-page {
  padding: 0 0 72px;
}

/* ─── 1. Hero — full-bleed portrait dissolving into the page ─── */
.links-hero {
  position: relative;
  height: 65vh;
  min-height: 380px;
  max-height: 560px;
  overflow: hidden;
}
.links-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Frames her face in the band: the source is a tall 2:3 portrait and
     only a horizontal slice of it survives the crop. */
  object-position: center 26%;
  /* The lower third dissolves into the peach cream field. This is a mask
     rather than a gradient painted on top: an overlay leaves the photo's
     own pixels underneath, and the last row of them was showing through as
     a hairline along the bottom edge. A mask erases them outright. */
  -webkit-mask-image: linear-gradient(
    to bottom, #000 48%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.12) 84%, transparent 93%);
  mask-image: linear-gradient(
    to bottom, #000 48%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.12) 84%, transparent 93%);
}
/* Fallback for engines without mask-image: paint the fade over the top
   instead. Hidden wherever the mask above does the work. */
.links-hero-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(239, 231, 218, 0) 48%,
    rgba(239, 231, 218, 0.45) 70%,
    rgba(239, 231, 218, 0.88) 84%,
    var(--peach-cream) 92%
  );
}
@supports (mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent)) {
  .links-hero-fade { display: none; }
}

/* ─── Shell ─── */
.links-shell {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ─── Name and intro ─── */
.links-intro {
  text-align: center;
  /* Pulled up into the fade so the name reads as part of the portrait. */
  margin-top: -28px;
  position: relative;
}
.links-name {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: var(--ls-title);
  color: var(--ink);
}
.links-name em {
  font-style: italic;
  font-weight: 300;
  color: var(--burgundy);
}
.links-role {
  margin: 14px 0 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.links-tagline {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--taupe);
}
.links-press {
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* ─── 2. Navigation hint ─── */
.links-hint {
  margin: 34px 0 0;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: italic;
  font-size: 13px;
  color: var(--taupe);
}

/* ─── 3. Sections ─── */
.links-section { margin-top: 30px; }
.links-section-head {
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* ─── Buttons ─── */
.links-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.links-list-solo { margin-top: 32px; }

.link-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  background: var(--cream);
  border: 1px solid var(--chalk-beige);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(49, 21, 7, 0.04);
  transition:
    transform 300ms var(--ease-slow),
    box-shadow 300ms var(--ease-slow),
    border-color 300ms var(--ease-slow);
}
.link-thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}
/* Faces sit high in these two frames, so bias the crop upward. */
.link-btn[href*="work_with_me"] .link-thumb,
.link-btn[href*="keynotes"] .link-thumb { object-position: center 32%; }

.link-copy {
  flex: 1 1 auto;
  min-width: 0;   /* lets the single-line subtitle ellipsis actually engage */
  text-align: left;
}
.link-title {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.link-sub {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  color: var(--taupe);
  /* These wrap. They were one line with an ellipsis while the subtitles were
     four or five words; the current copy runs to a full sentence and every
     one of them would lose its ending on a phone. Nothing is truncated: the
     card grows to fit instead. */
  text-wrap: pretty;
}
.link-chevron {
  flex: 0 0 auto;
  color: var(--burgundy);
  transition: transform 300ms var(--ease-slow);
}

/* ─── Entrance — staggered fade-in ─── */
/* An animation (not a transition) so the per-item delay JS writes inline
   cannot leak into the hover transition once the entrance has finished. */
@keyframes linkFadeIn {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}
/* Pre-fade state for the entrance. Scoped to .js so that a visitor without
   JavaScript is never left staring at a blank page: nothing is hidden unless
   the script that reveals it is running. */
.js .links-intro,
.js .links-hint,
.js .links-section-head,
.js .link-btn { opacity: 0; }
.links-intro.is-in,
.links-hint.is-in,
.links-section-head.is-in,
.link-btn.is-in {
  opacity: 1;
  animation: linkFadeIn 700ms var(--ease-out) backwards;
}

/* Mobile tap — brief settle. Declared after .is-in so it wins at equal
   specificity. */
.link-btn:active {
  transform: translateY(0);
  background: var(--paper);
}

/* Keyboard focus — visible on every button. */
.link-btn:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
}

/* ─── Desktop hover — pointer devices only, never fires on touch ─── */
@media (hover: hover) and (pointer: fine) {
  .link-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(49, 21, 7, 0.10);
    border-color: var(--taupe-light);
  }
  .link-btn:hover .link-chevron { transform: translateX(4px); }
}

/* ─── Reduced motion — everything present, nothing moves ─── */
@media (prefers-reduced-motion: reduce) {
  .links-intro,
  .links-hint,
  .links-section-head,
  .link-btn,
  .links-intro.is-in,
  .links-hint.is-in,
  .links-section-head.is-in,
  .link-btn.is-in {
    opacity: 1;
    translate: none;
    animation: none !important;
  }
  .link-btn {
    transition: box-shadow 300ms var(--ease-slow), border-color 300ms var(--ease-slow);
  }
  .link-btn:hover { transform: none; }
  .link-btn:hover .link-chevron { transform: none; }
  .link-chevron { transition: none; }
}

/* ─── Phones — a little more room for the copy to wrap into ─── */
@media (max-width: 479px) {
  .link-btn { padding: 16px; gap: 12px; }
  .link-chevron { margin-left: -4px; }   /* 8px before the chevron, 12px after the thumb */
}

/* Very narrow phones. "Strategic foresight · Concept development" ran to four
   lines at 320px; easing the tracking and half a point of size brings it back
   to three and keeps the cards from going ragged. */
@media (max-width: 359px) {
  .link-title { font-size: 13px; letter-spacing: 0.03em; }
}

/* ─── Desktop ─── */
@media (min-width: 768px) {
  .links-hero {
    height: 560px;
    min-height: 0;
    max-height: none;
  }
  .links-page { padding-bottom: 96px; }
  .links-shell { padding: 0; }
  .links-name { font-size: 72px; }
  .links-intro { margin-top: -34px; }
  .links-hint { margin-top: 40px; }
  .links-section { margin-top: 36px; }
}

/* ─── Anchors landing from /links — clear the fixed nav ─── */
#compose-your-plate,
#recipes,
#as-seen-in { scroll-margin-top: 100px; }

/* ============================================================
   Article figures — single image, diptych, and captions
   Used by journal essays (see /journal/*.html)
   ============================================================ */
.article-body .a-figure,
.article-body .a-duo { margin: 52px 0; }

.article-body .a-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.article-body .a-duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.article-body .a-duo-grid img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: 8px;
}

/* The cover sits above .article-body, so it needs its own box. Same width and
   radius as the inline figures, so a captioned cover lines up with them. */
.article-cover {
  max-width: 900px;
  margin: 0 auto 64px;
  padding: 0 24px;
}
.article-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.article-body figcaption,
.article-cover figcaption {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--taupe);
  text-align: center;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .article-body .a-duo-grid { grid-template-columns: 1fr; }
  .article-body .a-duo-grid img { min-height: 0; }
}

/* Below this width the three 60% orbs no longer fit in a row, so they stack
   and the growth ratio reads top to bottom instead. */
@media (max-width: 583px) {
  /* stacked: nothing to align across columns, so the shared row tracks
     (and their subgrids) come off and each phase flows normally */
  .process-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 48px;
    column-gap: 0;
  }
  .process-col,
  .process-text { display: block; grid-row: auto; }
  .process-verbs { white-space: nowrap; }
  .process-orb-area { height: auto; margin-bottom: 28px; }
}