/* ============================================================
   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.
   ============================================================ */

: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:  '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%);
}
.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 — circle artwork above an always-visible text block (live-site layout),
   with the hover scale + sibling-dim interaction kept from the orb version */
.process-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: left;
}
.process-circle {
  padding: 0 10%;
  margin-bottom: 40px;
}
.process-circle img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 32px rgba(76,12,18,0.10));
  transition: transform 600ms ease, opacity 600ms ease;
}
.process-col:hover .process-circle img { transform: scale(1.08); }
.process-grid:hover .process-col:not(:hover) .process-circle img { opacity: 0.6; }
.process-text {
  border-top: 1px solid var(--clay);
  padding-top: 24px;
}
.process-label {
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.18em;
  color: var(--burgundy);
  margin-bottom: 12px;
}
.process-verbs {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  color: var(--espresso);
  margin-bottom: 12px;
}
.process-keywords {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  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-circle img { transition: none; }
  .process-col:hover .process-circle img { transform: none; }
  .process-grid:hover .process-col:not(:hover) .process-circle img { 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 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: var(--ls-title);
  color: var(--espresso);
  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);
}

/* Essays (Concept journal) */
.essays {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 60px;
}
.essay {
  background: var(--cream);
  padding: 40px 32px;
  border-radius: 4px;
  transition: transform 400ms ease, box-shadow 400ms ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
/* Pin the read time + read link to the same bottom position across cards */
.essay .essay-meta { margin-top: auto; padding-top: 24px; }
.essay:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(76,12,18,0.06);
}
.essay-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  color: var(--accent);
  margin-bottom: 20px;
}
.essay-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: var(--ls-title);
  color: var(--espresso);
  margin-bottom: 16px;
  line-height: 1.25;
}
.essay-dek {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 24px;
  line-height: 1.5;
}
.essay-meta {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 20px;
}
.essay-cta {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.more-journal {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
  text-decoration: none;
  display: block;
  transition: letter-spacing 400ms ease;
}
.more-journal:hover { letter-spacing: 0.04em; }

/* 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
   ============================================================ */
.filter-tabs {
  display: flex;
  gap: 28px;
  justify-content: center;
  margin-bottom: 64px;
}
.filter-tabs button {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--taupe);
  cursor: pointer;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color 300ms ease, border-color 300ms ease;
}
.filter-tabs button.is-active,
.filter-tabs button:hover { color: var(--espresso); border-bottom-color: var(--espresso); }

.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; }
  .process-grid { grid-template-columns: 1fr; gap: 56px; }
  .process-circle { padding: 0 18%; }
  .services-grid { grid-template-columns: 1fr; gap: 32px; }
  .cases, .essays { 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; }
  .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; }
}