/* ===========================================================
   ESCAPE STUDIOS — Design System v2
   Brand DNA audited from live esca.pe (May 30 2026):
   - Cream/bone background (#f1f0ea)
   - Near-black text (#1a1b1f)
   - Anderson Grotesk (primary type)
   - Swiss 721 Outline (display / big outline headings)
   - Restraint; photography does the color work
   - Kristina's drawings as editorial accents
   ===========================================================
   Design Team panel applied:
   - Vignelli: maximum 2 typefaces, restrained palette, grid discipline
   - Scher: typographic personality without over-decoration
   - Frere-Jones: precise type at all sizes
   - Bierut: institutional gravity through whitespace
   - Mills: protect Kristina's hand-drawn imperfection
   - Chimero: honest to the medium, generous whitespace
   - Sagmeister: one surprising moment per page (the outline headings)
   =========================================================== */

:root {
  /* ============ TYPE SCALE (fluid) ============ */
  --text-xs:    clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:    clamp(0.875rem, 0.82rem + 0.3vw, 1rem);
  --text-base:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-lg:    clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --text-xl:    clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  --text-2xl:   clamp(2rem, 1.4rem + 3vw, 4rem);
  --text-3xl:   clamp(2.5rem, 1.4rem + 5vw, 6rem);
  --text-hero:  clamp(3rem, 1rem + 8vw, 10rem);
  --text-outline: clamp(3.5rem, 2rem + 10vw, 14rem);

  /* ============ SPACING (4px base) ============ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* ============ CONTENT WIDTHS ============ */
  --content-narrow:  640px;
  --content-default: 1000px;
  --content-wide:    1320px;
  --content-bleed:   100%;

  /* ============ FONTS — ANCHORED TO BRAND ============ */
  /* Anderson Grotesk primary — Manrope is the closest free substitute */
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  /* Display headlines — Anton condensed (matches PRESS / CLIENTS / STUDIOS outline lockups) */
  --font-display: 'Anton', 'Bebas Neue', system-ui, -apple-system, sans-serif;
  /* Outline display headings — Swiss 721 outline equivalent for big PRESS/CLIENTS/etc */
  --font-outline: 'Anton', 'Bebas Neue', 'Anderson Grotesk', sans-serif;
  /* Editorial italic accent for testimonials/lede */
  --font-quote: 'Cormorant Garamond', 'Lora', Georgia, serif;

  /* ============ COLOR — REAL ESCAPE PALETTE ============ */
  --color-bg:           #f1f0ea;  /* warm bone — the ESCAPE background */
  --color-bg-2:         #ebe9e0;  /* slightly deeper for sections */
  --color-bg-3:         #e3e0d4;  /* deeper still for cards */
  --color-surface:      #ffffff;  /* pure white, sparing use */
  --color-divider:      #c9c4b5;  /* warm beige line */
  --color-border:       #b8b2a2;
  --color-overlay:      rgba(26, 27, 31, 0.04);

  --color-text:         #1a1b1f;  /* near-black — the ESCAPE ink */
  --color-text-strong:  #0a0a0c;
  --color-text-muted:   #5a5b5f;
  --color-text-faint:   #8c8d8f;
  --color-text-inverse: #f1f0ea;

  --color-accent:       #1a1b1f;  /* near-black; brand has no accent color */
  --color-accent-soft:  #5a5b5f;
  --color-ink:          #1a1b1f;  /* alias for clarity */

  /* Single permitted warm accent — used only when something must pop (e.g. live broadcast indicator) */
  --color-warm:         #9a4f24;  /* desert rust, sparing use */

  /* ============ MOTION ============ */
  --ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --duration-quick: 200ms;
  --duration-base:  400ms;
  --duration-slow:  800ms;

  /* ============ SHADOWS (very subtle, cream-toned) ============ */
  --shadow-sm: 0 1px 2px rgba(26, 27, 31, 0.05);
  --shadow-md: 0 8px 24px rgba(26, 27, 31, 0.08);
  --shadow-lg: 0 24px 60px rgba(26, 27, 31, 0.12);

  /* ============ RADIUS (sparing use, mostly zero) ============ */
  --radius-sm: 0;
  --radius-md: 2px;
  --radius-pill: 999px;
}

/* Dark mode (opt-in via toggle for accessibility — brand defaults to light) */
[data-theme='dark'] {
  --color-bg:           #1a1b1f;
  --color-bg-2:         #14151a;
  --color-bg-3:         #0e0f13;
  --color-surface:      #22232a;
  --color-divider:      #2d2e35;
  --color-border:       #3a3b42;
  --color-overlay:      rgba(241, 240, 234, 0.04);
  --color-text:         #f1f0ea;
  --color-text-strong:  #ffffff;
  --color-text-muted:   #a1a09b;
  --color-text-faint:   #6a6963;
  --color-text-inverse: #1a1b1f;
  --color-accent:       #f1f0ea;
  --color-accent-soft:  #c9c4b5;
  --color-ink:          #f1f0ea;
}

/* ============================================================
   TYPOGRAPHY ROLES (one class per role, used everywhere)
   ============================================================ */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.eyebrow--dark { color: var(--color-text); }
.eyebrow--inverse { color: var(--color-text-inverse); }

/* The signature outline display heading — for section titles like PRESS, CLIENTS, TESTIMONIALS */
.outline-heading {
  font-family: var(--font-outline);
  font-size: var(--text-outline);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-text);
  text-stroke: 1.5px var(--color-text);
  display: block;
}

@media (min-width: 1024px) {
  .outline-heading {
    -webkit-text-stroke-width: 2px;
    text-stroke-width: 2px;
  }
}

.hero-title {
  font-family: var(--font-body);
  font-size: var(--text-hero);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--color-text);
}

.section-title {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.page-title {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

.lede {
  font-family: var(--font-quote);
  font-size: var(--text-lg);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--color-text);
  max-width: 60ch;
}

.body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
}

.body--muted { color: var(--color-text-muted); }

.meta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-16));
}
.container--narrow  { max-width: var(--content-narrow); }
.container--default { max-width: var(--content-default); }

.section {
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
}
.section--tight { padding-block: clamp(var(--space-10), 6vw, var(--space-20)); }
.section--bleed { padding-block: 0; }
.section--alt   { background: var(--color-bg-2); }

.divider {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin-block: 0;
}

.stack > * + *       { margin-top: var(--space-6); }
.stack-tight > * + * { margin-top: var(--space-3); }
.stack-loose > * + * { margin-top: var(--space-10); }

.grid       { display: grid; gap: var(--space-8); }
.grid-2     { grid-template-columns: 1fr; }
.grid-3     { grid-template-columns: 1fr; }
.grid-4     { grid-template-columns: 1fr; }

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

/* ============================================================
   HEADER / NAV
   ============================================================ */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) clamp(var(--space-5), 4vw, var(--space-10));
  background: rgba(241, 240, 234, 0.94);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
  transition: background var(--duration-base) var(--ease), padding var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}

.header.is-scrolled {
  background: rgba(241, 240, 234, 0.98);
  border-bottom-color: var(--color-divider);
  padding-block: var(--space-3);
}

.header__logo {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.45em;
  color: var(--color-text);
  text-decoration: none;
  padding-left: 0.45em;
}
.header__logo sup {
  font-size: 0.5em;
  letter-spacing: 0;
  vertical-align: super;
  margin-left: 0.2em;
  color: var(--color-text-muted);
}

.header__nav {
  display: none;
  gap: clamp(var(--space-5), 2.5vw, var(--space-10));
  align-items: center;
}
@media (min-width: 1024px) {
  .header__nav { display: flex; }
}

.header__nav a {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-2) 0;
  position: relative;
  opacity: 0.85;
}
.header__nav a:hover { opacity: 1; }
.header__nav a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--color-text);
}

.header__cta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: var(--space-3) var(--space-6);
  text-decoration: none;
}
.header__cta:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.header__menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
  background: transparent;
  border: 0;
}
@media (min-width: 1024px) { .header__menu-toggle { display: none; } }
.header__menu-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--color-text);
  transition: transform var(--duration-base) var(--ease);
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
  transform: translateY(-100%);
  transition: transform var(--duration-slow) var(--ease);
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu a {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--color-text);
  text-decoration: none;
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--color-text);
  background: var(--color-bg);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none; /* iOS: prevent taps from triggering native video player */
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* iOS: prevent fullscreen player on tap */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom,
      rgba(20, 20, 20, 0.18) 0%,
      rgba(20, 20, 20, 0) 25%,
      rgba(20, 20, 20, 0) 70%,
      rgba(20, 20, 20, 0.28) 100%);
}

.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  /* Text sits in the upper third — leaves the cinematic lower 60% of the video clear */
  padding: clamp(var(--space-16), 14vh, var(--space-24)) clamp(var(--space-5), 5vw, var(--space-16)) clamp(var(--space-6), 3vw, var(--space-10));
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  margin-bottom: var(--space-6);
  opacity: 0.85;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}

.hero__title {
  font-family: var(--font-body);
  font-size: var(--text-hero);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: var(--space-8);
  max-width: 18ch;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}

.hero__subhead {
  font-family: var(--font-quote);
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: 400;
  line-height: 1.42;
  color: #fff;
  max-width: 56ch;
  margin-bottom: var(--space-8);
  text-shadow: 0 1px 16px rgba(0,0,0,0.4);
  opacity: 0.95;
}

.hero__meta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
}

.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  animation: scrollPulse 2.6s ease-in-out infinite;
}
.hero__scroll-cue::after {
  content: '';
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--color-text-muted), transparent);
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, 0); }
  50%      { opacity: 0.9; transform: translate(-50%, 6px); }
}

/* ============================================================
   ARTIST MARQUEE (rolling roster)
   ============================================================ */

.marquee {
  padding-block: var(--space-12);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-bg);
  overflow: hidden;
}

.marquee__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-8);
}

.marquee__track {
  display: flex;
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  animation: marquee 110s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 1.6vw, 1.7rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  text-transform: uppercase;
}
.marquee__item::after {
  content: '·';
  color: var(--color-text-faint);
  font-size: 1.2em;
  margin-inline: var(--space-3);
}
.marquee__item:last-child::after { display: none; }

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

/* ============================================================
   INTRO BLOCK
   ============================================================ */

.intro__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.intro__lede {
  font-family: var(--font-body);
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--color-text);
  max-width: 26ch;
  margin-bottom: var(--space-8);
}

.intro__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 56ch;
}

/* ============================================================
   "BUILT FOR" — eleven audiences grid
   ============================================================ */

.builtfor {
  margin-top: var(--space-16);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-divider);
  border-block: 1px solid var(--color-divider);
}

@media (min-width: 640px)  { .builtfor { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .builtfor { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .builtfor { grid-template-columns: repeat(4, 1fr); } }

.builtfor__item {
  padding: clamp(var(--space-8), 3.5vw, var(--space-10));
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  transition: background var(--duration-base) var(--ease);
  position: relative;
}
.builtfor__item:hover { background: var(--color-bg-2); }

.builtfor__num {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}

.builtfor__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.builtfor__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.builtfor__arrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  margin-top: auto;
}

/* Optional Kristina drawing slot at the top of each card */
.builtfor__sketch {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
  opacity: 0.85;
}
.builtfor__sketch img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   PLUG-AND-PLAY band — the institutional reassurance
   ============================================================ */

.plug-and-play {
  background: var(--color-bg-2);
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
  text-align: center;
  border-block: 1px solid var(--color-divider);
}

.plug-and-play__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.plug-and-play__statement {
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 auto var(--space-8);
}

.plug-and-play__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-inline: auto;
}

/* ============================================================
   FEATURED SESSION (SURRENDER block)
   ============================================================ */

.featured-session {
  background: var(--color-bg);
  padding: clamp(var(--space-16), 8vw, var(--space-24)) clamp(var(--space-5), 5vw, var(--space-16));
  border-block: 1px solid var(--color-divider);
}

.featured-session__inner {
  max-width: var(--content-default);
  margin-inline: auto;
  display: grid;
  gap: var(--space-12);
}
@media (min-width: 900px) {
  .featured-session__inner { grid-template-columns: 1fr 1.2fr; align-items: center; gap: var(--space-16); }
}

.featured-session__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.featured-session__title {
  font-family: var(--font-body);
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}
.featured-session__artist {
  display: block;
  font-size: 0.55em;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  letter-spacing: 0.04em;
}

.featured-session__meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.featured-session__quote {
  font-family: var(--font-quote);
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text);
  border-left: 1px solid var(--color-text);
  padding-left: var(--space-6);
}
.featured-session__attribution {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--space-6);
  font-style: normal;
}

/* ============================================================
   TESTIMONIAL block (singular, centered)
   ============================================================ */

.testimonial {
  padding: clamp(var(--space-16), 8vw, var(--space-24)) 0;
  text-align: center;
}

.testimonial__quote {
  font-family: var(--font-quote);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
  max-width: 56ch;
  margin-inline: auto;
}

.testimonial__attribution {
  font-family: var(--font-body);
  font-size: var(--text-base);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--space-8);
}

.testimonial__role {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ============================================================
   PRESS STRIP
   ============================================================ */

.press-strip {
  padding-block: clamp(var(--space-12), 7vw, var(--space-20));
  border-top: 1px solid var(--color-divider);
  text-align: center;
  background: var(--color-bg);
}
.press-strip__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}
.press-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--space-5), 3.5vw, var(--space-10));
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
}
.press-strip__item {
  font-family: var(--font-quote);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-text);
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.press-strip__item a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.press-strip__item a:hover {
  opacity: 1;
  border-bottom-color: transparent;
}
.press-strip__pull {
  font-family: var(--font-quote);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-style: italic;
  color: var(--color-text);
  max-width: 38ch;
  margin: var(--space-10) auto var(--space-3);
  line-height: 1.3;
}
.press-strip__pull-attr {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* ============================================================
   CTA section (Enquire)
   ============================================================ */

.cta-section {
  padding-block: clamp(var(--space-20), 12vw, var(--space-32));
  text-align: center;
  background: var(--color-bg);
  border-top: 1px solid var(--color-divider);
}
.cta-section__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.cta-section__title {
  font-family: var(--font-body);
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.022em;
  max-width: 22ch;
  margin: 0 auto var(--space-10);
  color: var(--color-text);
}
.cta-section__button {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: var(--space-4) var(--space-10);
  text-decoration: none;
  margin-top: var(--space-4);
}
.cta-section__button:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

/* ============================================================
   KRISTINA'S DRAWINGS — editorial accents
   ============================================================ */

.kristina {
  display: block;
  max-width: 120px;
  margin-block: var(--space-8);
  opacity: 0.9;
}
.kristina--small  { max-width: 64px; }
.kristina--medium { max-width: 120px; }
.kristina--large  { max-width: 240px; }

.kristina--right { margin-left: auto; }
.kristina--center { margin-inline: auto; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-divider);
  padding: var(--space-20) clamp(var(--space-5), 5vw, var(--space-16)) var(--space-10);
}
.footer__inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
@media (min-width: 760px) {
  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-16); }
}

.footer__brand {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.footer__brand sup {
  font-size: 0.5em;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 0.25em;
  color: var(--color-text-muted);
}
.footer__tag {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 28ch;
  line-height: 1.45;
}

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}
.footer__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer__list a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.footer__list a:hover { color: var(--color-text); }

.footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.footer__socials a {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.footer__socials a:hover {
  color: var(--color-text);
  transform: translateY(-2px);
}
.footer__socials svg { width: 24px; height: 24px; display: block; }

.footer__bottom {
  max-width: var(--content-wide);
  margin: var(--space-16) auto 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
}
@media (min-width: 760px) {
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer__bottom a { color: var(--color-text-muted); text-decoration: none; }
.footer__bottom a:hover { color: var(--color-text); }
.footer__tm { color: var(--color-text-faint); font-style: italic; }

/* ============================================================
   UTILITY
   ============================================================ */

.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.divider-rule {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin-block: var(--space-16);
}

.no-scroll { overflow: hidden; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
}

@media print {
  .header, .footer__socials, .hero__scroll-cue { display: none; }
}

/* ============================================================
   SUB-PAGE COMPONENTS — page hero, rooms, btns, cta band
   ============================================================ */

/* Page hero — full-bleed image with giant outline title */
.page-hero {
  position: relative;
  width: 100%;
  height: 88vh;
  min-height: 560px;
  max-height: 900px;
  overflow: hidden;
  background: #e3e0d4;
}
@media (max-width: 760px) {
  .page-hero { height: 70vh; min-height: 420px; }
}
.page-hero__media,
.page-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
/* Blurred-fill variant: image background scaled + blurred to fill bleed,
   sharp image rendered above in contain mode — used when source image
   aspect doesn't match hero frame (e.g. portrait on a wide hero). */
.page-hero__media--blur-fill {
  background-repeat: no-repeat;
  filter: none;
}
.page-hero__blur-veil {
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center center;
  filter: blur(48px) saturate(1.05) brightness(0.92);
  transform: scale(1.15);
  z-index: 1;
  pointer-events: none;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.28) 100%);
}
.page-hero__outline {
  font-family: var(--font-outline);
  font-weight: 400;
  font-size: clamp(3.6rem, 11vw, 8.5rem);
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
}
.page-hero__overlay { flex-direction: column; text-align: center; padding: 0 var(--space-6); }

/* Top-aligned overlay variant for when faces fill the lower frame */
.page-hero__overlay--top {
  justify-content: flex-start;
  padding-top: clamp(2.5rem, 8vh, 6rem);
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.18) 100%);
}
.page-hero__overlay--top .page-hero__outline { font-size: clamp(3rem, 8vw, 6rem); margin-bottom: var(--space-2); }
.page-hero__overlay--top .page-hero__sub { max-width: 32rem; }

/* Bottom-aligned overlay variant — keeps faces clear of any title text */
.page-hero__overlay--bottom {
  justify-content: flex-end;
  padding-bottom: clamp(2.5rem, 6vh, 5rem);
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.35) 80%,
    rgba(0,0,0,0.62) 100%);
}
.page-hero__overlay--bottom .page-hero__eyebrow { margin-bottom: var(--space-3); }
.page-hero__overlay--bottom .page-hero__sub { max-width: 36rem; margin-top: var(--space-4); }

/* Solid (filled) page-hero title — same Anton family as outline but rendered in solid white
   (used when stroke-outline letters would look weak/illegible over a busy image) */
.page-hero__title-solid {
  font-family: var(--font-outline);
  font-weight: 400;
  font-size: clamp(3.2rem, 9vw, 7rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
}
.page-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin: 0 0 var(--space-4);
}
.page-hero__sub {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
  max-width: 46ch;
  margin: var(--space-5) auto 0;
  line-height: 1.5;
}
.page-hero__scroll {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* Welcome / lede on sub-pages */
.welcome__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.welcome {
  text-align: center;
  /* Generous breathing room above and below the lede block on every sub-page */
  padding-block: clamp(var(--space-14), 8vw, var(--space-24));
}
.welcome > .container,
.welcome > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.welcome a,
.welcome .btn { align-self: center; }
.welcome p { text-align: center; }
.welcome p:has(.btn) { width: 100%; display: flex; justify-content: center; }

/* CTA band — force centering for any nested wrapper */
.cta-band { text-align: center; }
.cta-band > .container,
.cta-band > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta-band p { text-align: center; }
.cta-band p:has(.btn) { width: 100%; display: flex; justify-content: center; }
.welcome__sub {
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}
.welcome__sub a {
  color: var(--color-text);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-7);
  text-decoration: none;
  border: 1px solid var(--color-text);
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.btn--ghost {
  color: var(--color-text);
  background: transparent;
}
.btn--ghost:hover {
  background: var(--color-text);
  color: var(--color-bg);
}
.btn--primary {
  color: var(--color-bg);
  background: var(--color-text);
}
.btn--primary:hover {
  background: var(--color-text-muted);
  color: var(--color-bg);
}

/* Room — full-width alternating image + text */
.room {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  margin-block: 0;
  background: var(--color-bg);
}
@media (min-width: 880px) {
  .room {
    grid-template-columns: 1.65fr 1fr;
    min-height: 70vh;
  }
  /* Product/flatlay rows do not need a forced 70vh — the image dictates height */
  .room:has(.room__media--product) {
    min-height: 0;
    align-items: center;
  }
  .room--reverse .room__media { order: 2; }
  .room--reverse .room__text { order: 1; }
}
.room__media {
  position: relative;
  overflow: hidden;
  background: var(--color-text);
}
.room__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 420px;
  display: block;
}
/* Product/flatlay variant — size the container to the image's natural aspect ratio,
   no cropping, no vertical stretching. */
.room__media--product {
  background: #f1f0ea;
  align-self: center;
}
.room__media--product img {
  object-fit: contain;
  min-height: 0;
  height: auto;
  max-height: 80vh;
  width: 100%;
  padding: clamp(var(--space-6), 4vw, var(--space-10));
}
.room__text {
  /* More breathing room around text adjacent to images — Round 8.5 fix */
  padding: clamp(var(--space-10), 6vw, var(--space-20));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
}
.room__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.room__title {
  font-family: var(--font-display, "Anton", "Manrope", sans-serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
  margin: 0;
  line-height: 1;
}
.room__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}
.room__meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-5);
  margin: 0;
}

/* Testimonials block */
.testimonials {
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
}
.testimonial {
  margin: var(--space-10) auto 0;
  text-align: center;
}
.testimonial blockquote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.5rem, 2.7vw, 2.3rem);
  line-height: 1.35;
  color: var(--color-text);
  max-width: 44ch;
  margin: 0 auto;
  quotes: "\201C" "\201D";
}
.testimonial blockquote::before { content: open-quote; }
.testimonial blockquote::after { content: close-quote; }
.testimonial figcaption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-5);
}
.testimonial--primary blockquote {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
}
.testimonial--primary figcaption {
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.22em;
}

/* CTA band */
.cta-band {
  padding-block: clamp(var(--space-12), 10vw, var(--space-20));
  text-align: center;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.cta-band > .container,
.cta-band > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta-band a,
.cta-band .btn { align-self: center; }
.cta-band__eyebrow {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.cta-band__title {
  font-family: var(--font-display, "Anton", "Manrope", sans-serif);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
  margin: 0;
  line-height: 1;
}
.cta-band__sub {
  margin: var(--space-5) auto var(--space-7);
  max-width: 38ch;
  font-family: var(--font-body);
  color: var(--color-text-muted);
}

/* Header current-page indicator */
.header__nav a[aria-current="page"] {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ============================================================
   SUB-PAGE ADDITIONS — Contact form, Rate card, Press list,
   About K-drawing pairing. New classes only; design system intact.
   ============================================================ */

/* --- Enquiry form (contact.html) --- */
.enquiry {
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
}
.enquiry__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-10), 5vw, var(--space-20));
}
@media (min-width: 880px) {
  .enquiry__grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
}
.enquiry__detail-block + .enquiry__detail-block { margin-top: var(--space-6); }
.enquiry__detail-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.enquiry__detail-value {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text);
}
.enquiry__detail-value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.form-field { margin-bottom: var(--space-6); }
.form-field label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: transparent;
  border: 1px solid rgba(26,27,31,0.28);
  padding: var(--space-4);
  border-radius: 0;
  transition: border-color 0.2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-text);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}
.form-note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(26,27,31,0.16);
  line-height: 1.6;
}

/* --- Rate card (rates.html) --- */
.rate-group {
  padding-block: clamp(var(--space-12), 7vw, var(--space-20));
  border-bottom: 1px solid rgba(26,27,31,0.16);
}
.rate-group:last-of-type { border-bottom: none; }
.rate-group__title {
  font-family: var(--font-display, "Anton", sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: var(--space-8);
}
.rate-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: baseline;
  padding-block: var(--space-5);
  border-top: 1px solid rgba(26,27,31,0.12);
}
.rate-row:first-of-type { border-top: none; }
.rate-row__name {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}
.rate-row__note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  line-height: 1.55;
  max-width: 52ch;
}
.rate-row__price {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}
.rate-foot {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-10);
  line-height: 1.6;
}

/* --- Press list (press.html) --- */
.press-list {
  padding-block: clamp(var(--space-12), 7vw, var(--space-20));
}
.press-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding-block: var(--space-8);
  border-top: 1px solid rgba(26,27,31,0.16);
  text-decoration: none;
  color: inherit;
}
.press-item:last-child { border-bottom: 1px solid rgba(26,27,31,0.16); }
.press-item__pub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.press-item__headline {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.25;
  color: var(--color-text);
  transition: opacity 0.2s ease;
}
.press-item:hover .press-item__headline { opacity: 0.6; }

/* --- About: K drawing paired with Dallas Austin quote --- */
.k-quote {
  padding-block: clamp(var(--space-20), 12vw, var(--space-32));
}
.k-quote__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-10), 7vw, var(--space-20));
  align-items: center;
}
.k-quote__grid > figure { margin: 0; }
@media (min-width: 820px) {
  .k-quote__grid { grid-template-columns: 0.9fr 1.1fr; gap: clamp(var(--space-12), 8vw, var(--space-24)); }
}
.k-quote__art img {
  width: 100%;
  height: auto;
  display: block;
}
.k-quote__caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}
.k-quote blockquote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.45;
  color: var(--color-text);
  margin: 0 0 var(--space-8);
  quotes: none;
  max-width: 38ch;
}
.k-quote blockquote::before,
.k-quote blockquote::after { content: none; }
.k-quote figcaption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: var(--space-6);
  display: inline-block;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

/* ============================================================
   EDITORIAL LAYOUT VOCABULARY
   Six patterns that mix freely on any page so nothing repeats.
   Brand stays tight — same palette, same type, same restraint.
   Aman / Soho House discipline.
   ============================================================ */

/* ---------- 1. CHAPTER MARK — numbered editorial divider ---------- */
.chapter-mark {
  display: block;
  text-align: center;
  padding-block: clamp(var(--space-10), 6vw, var(--space-16));
  border-top: 1px solid var(--color-divider);
  margin-block: 0;
}
.chapter-mark__numeral {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-3);
  line-height: 1;
}
.chapter-mark__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
}

/* ---------- 2. FULL-BLEED EDITORIAL — hero image with text overlay positioned bottom-left ---------- */
.editorial-bleed {
  position: relative;
  width: 100%;
  min-height: 78vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--color-text);
}
.editorial-bleed__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.editorial-bleed__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.editorial-bleed__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.editorial-bleed__text {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: clamp(var(--space-8), 6vw, var(--space-16));
  max-width: 44rem;
}
.editorial-bleed__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 var(--space-4);
}
.editorial-bleed__title {
  font-family: var(--font-outline);
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 0.95;
  color: #fff;
  margin: 0 0 var(--space-5);
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.editorial-bleed__body {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  margin: 0;
  max-width: 32rem;
}
.editorial-bleed--right { justify-content: flex-end; }
.editorial-bleed--center { align-items: center; justify-content: center; text-align: center; }
.editorial-bleed--center .editorial-bleed__text { text-align: center; }

/* ---------- 3. ASYMMETRIC SPREAD — magazine 8/12 + 4/12 split ---------- */
.spread {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  padding: clamp(var(--space-12), 8vw, var(--space-20)) clamp(var(--space-5), 5vw, var(--space-12));
  align-items: end;
}
@media (min-width: 880px) {
  .spread { grid-template-columns: 7fr 5fr; }
  .spread--reverse { grid-template-columns: 5fr 7fr; }
  .spread--reverse .spread__media { order: 2; }
  .spread--reverse .spread__text { order: 1; }
}
.spread__media img {
  width: 100%;
  height: auto;
  display: block;
}
.spread__media figcaption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
.spread__text {
  padding-bottom: clamp(var(--space-2), 2vw, var(--space-6));
}
.spread__chapter {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.spread__title {
  font-family: var(--font-outline);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.98;
  margin: 0 0 var(--space-5);
  color: var(--color-text);
}
.spread__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  max-width: 38ch;
}
.spread__body:has(+ .spread__body),
.spread__body + .spread__body { margin-top: var(--space-3); }
.spread__meta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-6);
}

/* ---------- 4. PULL QUOTE — oversized italic Cormorant, alone on page ---------- */
.pullquote {
  padding-block: clamp(var(--space-16), 11vw, var(--space-28));
  padding-inline: clamp(var(--space-5), 8vw, var(--space-16));
  text-align: center;
  /* Anchored hairline rules so it reads as its own block, not a caption of the image above */
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-bg);
  margin-block: 0;
}
.pullquote + section,
.pullquote + figure,
.pullquote + div { margin-top: 0; }
.pullquote__mark {
  /* Decorative quote glyph removed — the italic Cormorant treatment already reads as a quote */
  display: none;
}
.pullquote__body {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.8vw, 3.2rem);
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 auto var(--space-8);
  max-width: 28ch;
  letter-spacing: -0.01em;
}
.pullquote__attr {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  margin: 0;
}

/* ---------- 5. TRIPLET — three-column atmospheric grid ---------- */
.triplet {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: clamp(var(--space-10), 6vw, var(--space-16)) 0;
}
@media (min-width: 720px) {
  .triplet { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
}
.triplet__item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-text);
}
.triplet__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-base) var(--ease);
}
.triplet__item:hover img { transform: scale(1.03); }
.triplet__cap {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  margin: 0;
}
.triplet--tall .triplet__item { aspect-ratio: 3 / 4; }
.triplet--wide .triplet__item { aspect-ratio: 1 / 1; }

/* Icon-based triplet variant — stewardship blocks (Fire, Security, Water) */
.triplet--icons {
  padding: clamp(var(--space-10), 6vw, var(--space-16)) clamp(var(--space-6), 5vw, var(--space-12));
}
.triplet--icons .triplet__item,
.triplet:not(.triplet--tall):not(.triplet--wide) .triplet__item:has(.triplet__icon) {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  aspect-ratio: auto;
  background: transparent;
  padding: var(--space-6) var(--space-4);
  gap: var(--space-4);
}
.triplet__item:has(.triplet__icon) .triplet__cap {
  position: static;
  color: var(--color-text);
  text-shadow: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.55;
  max-width: 38ch;
}

/* ---------- 6. LEDGER — typographic listing (no images) ---------- */
.ledger {
  padding: clamp(var(--space-12), 7vw, var(--space-20)) clamp(var(--space-5), 6vw, var(--space-12));
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.ledger__head {
  text-align: center;
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-12));
}
.ledger__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.ledger__title {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.01em;
}
.ledger__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 56rem;
}
.ledger__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-divider);
}
.ledger__row:last-child { border-bottom: 0; }
.ledger__num {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  letter-spacing: 0;
}
.ledger__name {
  font-family: var(--font-outline);
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.ledger__detail {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: right;
}

/* ---------- Scroll-reveal: subtle fade-up for editorial blocks ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Plain text body block for prose sections (about) */
.prose-block { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); }
.prose-block p {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-text);
  max-width: 60ch;
}
.prose-block p + p { margin-top: var(--space-6); }

/* ============================================================
   ROUND 2 — Social, Video network, Clients roster, Legal prose
   ============================================================ */

/* ---- Footer social ---- */
.footer__social {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-divider);
  border-radius: 50%;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.footer__social-link:hover {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

/* ---- Clients roster ---- */
.roster {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
  border-top: 1px solid var(--color-divider);
}
.roster:first-of-type { border-top: 0; }
.roster__heading {
  text-align: center;
  margin-bottom: var(--space-10);
}

/* Roster headings for the smaller list sections (everything after MUSICIANS —
   Film & TV, Writers, Photographers, Artists, Fashion, Brands, Business Leaders).
   These sections often hold a single line of names, so the giant outline
   heading reads as overscaled relative to the content. We keep the first
   roster heading (MUSICIANS) at full size and downscale all subsequent ones. */
.roster:not(:first-of-type) .roster__heading.outline-heading {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  -webkit-text-stroke-width: 1px;
  text-stroke-width: 1px;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-5);
}
@media (min-width: 1024px) {
  .roster:not(:first-of-type) .roster__heading.outline-heading {
    -webkit-text-stroke-width: 1px;
    text-stroke-width: 1px;
  }
}

/* The smaller sections also need a tighter section padding — a single-line
   roster surrounded by 8vw padding-block reads as empty space. */
.roster:not(:first-of-type) {
  padding-block: clamp(var(--space-8), 5vw, var(--space-14));
}

/* Roster-line size scales down a touch in the smaller sections too,
   so the names don't dwarf their heading. */
.roster:not(:first-of-type) .roster-line {
  font-size: clamp(1.05rem, 1.35vw, 1.4rem);
  max-width: 72ch;
}
.roster__lead {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: var(--text-lg);
  text-align: center;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin: 0 auto var(--space-6);
}
.roster-line {
  font-family: var(--font-quote);
  font-size: clamp(1.25rem, 1.6vw, 1.7rem);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  color: var(--color-text);
  max-width: 60ch;
  margin: 0 auto;
}
.roster-line--more {
  margin-top: var(--space-10);
  font-size: clamp(1.05rem, 1.3vw, 1.35rem);
  color: var(--color-text-muted);
  max-width: 54ch;
}
.roster-line__role {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: 0.82em;
}

.client-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-4);
}
@media (min-width: 640px) { .client-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
@media (min-width: 960px) { .client-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .client-grid { grid-template-columns: repeat(5, 1fr); } }

.client-tile {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.client-tile__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--color-bg-3);
}
.client-tile__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.02);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.client-tile:hover .client-tile__media img {
  filter: grayscale(0%);
  transform: scale(1.04);
}
.client-tile__cap {
  margin-top: var(--space-3);
}
.client-tile__name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin: 0;
  line-height: 1.25;
}
.client-tile__role {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 2px 0 0;
}

/* ---- Legal pages (privacy / terms) ---- */
.legal-hero {
  padding-top: clamp(var(--space-24), 16vw, var(--space-32));
  padding-bottom: var(--space-8);
  text-align: center;
}
.legal-hero .outline-heading { display: inline-block; }
.legal {
  padding-bottom: clamp(var(--space-16), 10vw, var(--space-24));
}
.legal__lede {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 60ch;
  margin: 0 auto var(--space-12);
  text-align: center;
}
.legal__section { margin-top: var(--space-10); }
.legal__section h2 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.legal__section p,
.legal__section li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}
.legal__section p + p { margin-top: var(--space-4); }
.legal__section ul {
  list-style: none;
  padding: 0;
  margin-top: var(--space-3);
}
.legal__section li {
  padding-left: var(--space-5);
  position: relative;
  margin-top: var(--space-2);
}
.legal__section li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}
.legal__section a {
  color: var(--color-text);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}
.legal__updated {
  margin-top: var(--space-12);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ============================================================
   VIDEO NETWORK
   ============================================================ */
.video-masthead {
  text-align: center;
  padding-top: clamp(var(--space-24), 16vw, var(--space-32));
  padding-bottom: clamp(var(--space-8), 5vw, var(--space-12));
}
.video-masthead .page-hero__outline,
.video-masthead .outline-heading { display: inline-block; }
.video-masthead__lede {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 54ch;
  margin: var(--space-6) auto var(--space-5);
}
.video-masthead__cta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.video-masthead__cta a {
  color: var(--color-text);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

.video-feature {
  width: 100%;
  margin: 0 auto var(--space-12);
  background: var(--color-text);
}
.video-feature__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}
.video-feature__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-feature__caption {
  padding: var(--space-5) var(--space-7);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  background: var(--color-text);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.video-feature__caption h2 {
  font-family: var(--font-display, "Anton", "Manrope", sans-serif);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
}

.video-series {
  padding-block: clamp(var(--space-10), 6vw, var(--space-16));
  border-top: 1px solid var(--color-divider);
}
.video-series__heading {
  text-align: center;
  margin-bottom: var(--space-4);
}
.video-series__note {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}
.video-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }
.video-grid--five {
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) { .video-grid--five { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .video-grid--five { grid-template-columns: repeat(3, 1fr); } }

.video-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.video-card__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--color-text);
  overflow: hidden;
}
.video-card__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-card__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}
.video-card__sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.video-card__nsfw {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: 0.7em;
  letter-spacing: 0.12em;
  padding: 1px 6px;
  border: 1px solid var(--color-divider);
  border-radius: 3px;
  color: var(--color-text-muted);
  vertical-align: middle;
}

.subscribe-band {
  text-align: center;
  padding-block: clamp(var(--space-10), 6vw, var(--space-14));
  border-top: 1px solid var(--color-divider);
}
.subscribe-band .btn { margin-top: var(--space-4); }

/* ========================================================================
   ROUND 3 — Footer illustration (migrated from home.css so it works
   on EVERY page that links style.css, not just the homepage), Q&A,
   and the ESCAPE BROADCASTS network masthead.
   ======================================================================== */

/* ---------- FOOTER landscape illustration (K's signature) ---------- */
/* Migrated from home.css → style.css for cross-page support. */
.footer--illustrated {
  position: relative;
  padding-bottom: 0;
}
.footer--illustrated .footer__illustration {
  margin-top: clamp(var(--space-16), 8vw, var(--space-24));
  width: 100%;
  line-height: 0;
}
.footer--illustrated .footer__illustration img {
  display: block;
  width: 100%;
  height: auto;
}
.footer__logo-mark {
  height: 52px;
  width: auto;
  max-width: 100%;
  display: block;
  margin-bottom: var(--space-4);
  object-fit: contain;
}
.footer__brand {
  letter-spacing: normal;
  line-height: 0;
  margin: 0 0 var(--space-2);
}

/* ---------- Q&A (retreats ceremonies disambiguation) ---------- */
.qa { padding-block: clamp(var(--space-12), 8vw, var(--space-20)); }
.qa__item {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-6);
}
.qa__item:last-child { border-bottom: 1px solid var(--color-divider); }
.qa__q {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  letter-spacing: 0;
  text-transform: none;
}
.qa__a {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------- ESCAPE BROADCASTS — dark "network" masthead (the zap) ---------- */
.broadcasts {
  border-top: 1px solid var(--color-divider);
}
.broadcasts-masthead {
  background: var(--color-text);
  color: var(--color-bg);
  text-align: center;
  padding-block: clamp(var(--space-16), 10vw, var(--space-24));
  padding-inline: var(--space-6);
}
.broadcasts-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.7;
  margin: 0 0 var(--space-5);
}
/* Outline heading rendered in cream/white stroke instead of black */
.broadcasts-masthead .outline-heading,
.broadcasts-masthead .page-hero__outline {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-bg);
  text-stroke: 1.5px var(--color-bg);
  margin: 0;
  line-height: 0.95;
}
.broadcasts-tagline {
  font-family: var(--font-quote, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-bg);
  opacity: 0.85;
  max-width: 44ch;
  margin: var(--space-6) auto 0;
  line-height: 1.5;
}
.broadcasts-masthead .broadcasts-watch {
  display: inline-block;
  margin-top: var(--space-8);
  padding: 0.85em 2.2em;
  border: 1px solid var(--color-bg);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-bg);
  text-decoration: none;
  transition: background var(--duration-base, 0.25s) var(--ease, ease),
              color var(--duration-base, 0.25s) var(--ease, ease);
}
.broadcasts-masthead .broadcasts-watch:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Atmospheric full-bleed photo break */
.bleed {
  width: 100%;
  background: var(--color-text);
}
.bleed__figure {
  position: relative;
  margin: 0;
}
.bleed__figure img {
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: cover;
  display: block;
}
.bleed__caption {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.95);
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.01em;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  padding: 0 var(--space-5);
}

/* Hero credo eyebrow — the philosophical anchor above the H1 */
.hero__credo-eyebrow {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-3);
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* The ESCAPE Principle — dedicated credo section */
.credo {
  padding-block: clamp(var(--space-16), 10vw, var(--space-24));
  text-align: center;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.credo__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.credo__heading {
  font-family: var(--font-display, "Anton", "Manrope", sans-serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 clamp(var(--space-10), 6vw, var(--space-14));
  line-height: 1;
}
.credo__block {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.55;
  color: var(--color-text);
  max-width: 56ch;
  margin: 0 auto;
  padding: 0;
  border: 0;
  quotes: none;
}
.credo__block p {
  margin: 0 0 clamp(var(--space-8), 4.5vw, var(--space-12));
}
.credo__block p:last-child { margin-bottom: 0; }
.credo__block strong {
  font-style: normal;
  font-family: var(--font-display, "Anton", "Manrope", sans-serif);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  display: block;
  margin: 0 auto var(--space-5);
  color: var(--color-text);
  line-height: 1.15;
  max-width: 24ch;
}

/* ROUND 6 — quiet credo pull-quote seeded on interior pages */
.credo-pull {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: var(--space-6) 0 0;
  padding: 0;
  border: 0;
}

/* ROUND 8 — Hutch attribution: tracked-out small caps, slightly more muted */
.credo-pull__attr {
  display: inline-block;
  margin-left: 0.5em;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.7em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 0.75;
  vertical-align: baseline;
}

/* ============================================================
   ROUND 4 (deferred) — Certified Human Manifesto + Real Place
   ============================================================ */
.manifesto {
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
  text-align: center;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.manifesto > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.manifesto__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
  text-align: center;
}
.manifesto__body {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.55;
  max-width: 42ch;
  margin: var(--space-7) auto 0;
  text-align: center;
}
.manifesto__body p { margin: var(--space-4) 0; text-align: center; }
.manifesto__pledge {
  font-family: var(--font-display, "Anton", "Manrope", sans-serif);
  font-style: normal;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: var(--space-6) !important;
}
.manifesto a.btn {
  margin-top: var(--space-6);
}
.manifesto__learn {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-top: var(--space-7) !important;
}
.manifesto__learn a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.manifesto__learn a:hover { color: var(--color-text); }

.realplace {
  padding-block: 0;
  background: var(--color-text);
  color: var(--color-bg);
}
.realplace__head {
  text-align: center;
  max-width: 48ch;
  margin: 0 auto var(--space-10);
  padding-inline: var(--space-5);
}
.realplace__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin: 0 0 var(--space-4);
}
.realplace__title {
  font-family: var(--font-display, "Anton", "Manrope", sans-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255,255,255,0.85);
  margin: 0;
  line-height: 1;
}
.realplace__sub {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(255,255,255,0.75);
  margin-top: var(--space-5);
}
/* Editorial mosaic — full-bleed, no internal chrome */
.realplace__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}
@media (min-width: 480px) {
  .realplace__grid { grid-template-columns: repeat(2, 1fr); }
  .realplace__tile { aspect-ratio: 1/1; }
}
@media (min-width: 760px) {
  .realplace__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .realplace__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
  .realplace__grid { grid-template-columns: repeat(5, 1fr); }
}
.realplace__tile {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-text);
}
.realplace__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform 0.6s var(--ease, ease);
}
.realplace__tile:hover img { transform: scale(1.04); }

/* ============================================================
   WELL-KNOWN VISITORS — small credentialing grid
   ============================================================ */
.visitors {
  padding-block: clamp(var(--space-10), 6vw, var(--space-14));
  text-align: center;
}
.visitors__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 var(--space-2);
}
.visitors__sub {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  opacity: 0.75;
  margin: 0 0 var(--space-7);
}
.visitors__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 480px;
  margin: 0 auto;
}
.visitors__tile {
  margin: 0;
  text-align: center;
}
.visitors__tile img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm, 2px);
}
.visitors__tile figcaption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: var(--space-3);
  opacity: 0.85;
}
@media (max-width: 768px) {
  .visitors__grid { gap: var(--space-2); max-width: 360px; }
  .visitors__tile figcaption { letter-spacing: 0.08em; }
}

/* ============================================================
   ABOUT — Founding story section
   ============================================================ */
.founding {
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
  text-align: center;
  border-bottom: 1px solid var(--color-divider);
}
.founding__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.founding__story {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 52ch;
  margin: 0 auto;
}

/* ============================================================
   PHOTO STRIP — cinematic editorial artist/candid strips
   Round 7: surfaced across the site (index, studios, live,
   retreats, shoots). Restrained. Horizontal scroll on mobile,
   grid on desktop.
   ============================================================ */
.photo-strip {
  padding-block: clamp(var(--space-12), 7vw, var(--space-20));
  border-bottom: 1px solid var(--color-divider);
}
.photo-strip__head {
  max-width: var(--content-default);
  margin: 0 auto var(--space-8);
  padding-inline: clamp(var(--space-5), 5vw, var(--space-16));
}
.photo-strip__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.photo-strip__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
}
/* Track: horizontal scroll on mobile */
.photo-strip__track {
  display: flex;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-16));
  padding-bottom: var(--space-4);
  scrollbar-width: none;
}
.photo-strip__track::-webkit-scrollbar { display: none; }

.photo-strip__item {
  flex: 0 0 auto;
  width: 70vw;
  max-width: 320px;
  scroll-snap-align: start;
  margin: 0;
}
.photo-strip__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg-3);
}
.photo-strip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease, ease);
}
.photo-strip__item:hover .photo-strip__media img { transform: scale(1.04); }

.photo-strip__cap {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Variant: wider landscape frames for candid contextual photos */
.photo-strip--candid .photo-strip__item { max-width: 420px; width: 80vw; }
.photo-strip--candid .photo-strip__media { aspect-ratio: 3 / 2; }

/* Desktop: grid, no horizontal scroll */
@media (min-width: 760px) {
  .photo-strip__track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    overflow: visible;
    max-width: calc(var(--content-default) + 6vw);
    margin-inline: auto;
  }
  .photo-strip__item { width: auto; max-width: none; }
  /* candid strip: fewer, larger frames */
  .photo-strip--candid .photo-strip__track {
    grid-template-columns: repeat(4, 1fr);
  }
  .photo-strip--candid .photo-strip__item { width: auto; max-width: none; }
}

/* ============================================================
   RECORDING LOCATION — natural-language Q&A copy (clients.html)
   ============================================================ */
.where-record {
  padding-block: clamp(var(--space-12), 7vw, var(--space-20));
  border-top: 1px solid var(--color-divider);
  text-align: center;
  overflow: hidden;
}
.where-record__heading {
  display: block;
  text-align: center;
  margin: 0 auto var(--space-10);
  /* Allow the outline display type to scale but never bleed off-canvas */
  max-width: min(100%, 18ch);
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 0.95;
}
.where-record__prose {
  max-width: 62ch;
  margin: 0 auto;
  text-align: left;
}
.where-record__prose p {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}
.where-record__prose p:last-child { margin-bottom: 0; }
.where-record__list {
  max-width: 60ch;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}
.where-record__list li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-overlay);
}
.where-record__list li:last-child { border-bottom: 0; }

/* ====================== SHOOTS — VIDEO SHOWCASE (Round 9) ====================== */
.video-showcase {
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
  border-top: 1px solid var(--color-divider);
}
.video-showcase__head {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto clamp(var(--space-8), 5vw, var(--space-12));
  padding-inline: var(--space-5);
}
.video-showcase__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.video-showcase__title {
  font-family: var(--font-display, "Anton", sans-serif);
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
.shoot-vgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-7), 4vw, var(--space-10));
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--space-5);
}
@media (min-width: 780px) {
  .shoot-vgrid { grid-template-columns: 1fr 1fr; }
  .shoot-vcard--wide { grid-column: 1 / -1; }
}
.shoot-vcard { margin: 0; }
.shoot-vcard__cap {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  line-height: 1.5;
}

/* lite embed — thumbnail + click-to-load iframe, 16:9 */
.lite-embed {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  border: none;
  padding: 0;
}
.lite-embed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%);
  transition: background 0.3s ease;
}
.lite-embed:hover::before { background: rgba(0,0,0,0.2); }
.lite-embed__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  border-radius: 12px;
  background: rgba(20,20,20,0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.lite-embed:hover .lite-embed__play {
  background: #cc2118;
  transform: translate(-50%, -50%) scale(1.06);
}
.lite-embed__play svg { width: 26px; height: 26px; fill: #fff; }
.lite-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* placeholder (coming soon) variant */
.lite-embed--placeholder { cursor: default; }
.lite-embed--placeholder::after {
  content: attr(data-label);
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  text-align: center;
  width: 80%;
}
.lite-embed--placeholder .lite-embed__play {
  background: rgba(40,40,40,0.55);
  cursor: default;
}
.lite-embed--placeholder:hover .lite-embed__play {
  background: rgba(40,40,40,0.55);
  transform: translate(-50%, -50%);
}
.lite-embed--placeholder:hover::before { background: rgba(0,0,0,0.45); }
/* mature-content editorial badge */
.shoot-vcard__badge {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.4);
  padding: 3px 8px;
  border-radius: 3px;
  pointer-events: none;
}
.shoot-vcard__frame { position: relative; }

/* where-record prose (Round 9 — replaces formulaic list) */
.where-record__prose {
  max-width: 62ch;
  margin: 0 auto;
}
.where-record__prose p {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
}
.where-record__prose p:last-child { margin-bottom: 0; }
.where-record__prose em { font-style: italic; }

/* ====================== TREATS MAGAZINE — editorial credential (shoots.html) ====================== */
.treats {
  position: relative;
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
  border-top: 1px solid var(--color-divider);
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--space-5);
}
.treats__head {
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-10));
}
.treats__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
/* restrained mature-editorial badge, top-right of section */
.treats__mature {
  position: absolute;
  top: clamp(var(--space-12), 8vw, var(--space-20));
  right: var(--space-5);
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  opacity: 0.65;
  pointer-events: none;
}

/* hero video — 16:9 cinematic loop */
.treats__video { margin: 0 0 clamp(var(--space-8), 5vw, var(--space-12)); }
.treats__video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border-radius: var(--radius-md);
}
.treats__video figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* editorial spread grid — cover prominent + three spreads */
.treats__grid { margin: 0; }
.treats__cover img,
.treats__spreads img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-bg-3);
  border-radius: var(--radius-md);
}
.treats__cover {
  position: relative;
  overflow: hidden;
}
.treats__spreads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-3), 2vw, var(--space-5));
}
.treats__spreads img { aspect-ratio: 3 / 2; overflow: hidden; }
.treats__spreads img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.treats__cap {
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* desktop: cover ~50% beside the spreads */
@media (min-width: 780px) {
  .treats__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-5), 3vw, var(--space-8));
    align-items: start;
  }
  .treats__cover { height: 100%; }
  .treats__cover img { aspect-ratio: auto; height: 100%; max-height: 720px; }
  .treats__spreads { align-content: start; }
  .treats__cap { grid-column: 1 / -1; }
}

/* ============================================================
   ROUND 10 — RESTORED OLD HEADER (centered lockup + MENU dropdown)
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--space-5) clamp(var(--space-5), 4vw, var(--space-10));
  background: transparent;
  transition: background var(--duration-base) var(--ease), padding var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}
/* Solid band variant for pages without a hero (contact, privacy, terms) */
.site-header--solid {
  background: rgba(241, 240, 234, 0.98);
  border-bottom: 1px solid var(--color-divider);
}
/* When scrolled, hero pages gain the solid band too */
.site-header.is-scrolled {
  background: rgba(241, 240, 234, 0.98);
  border-bottom: 1px solid var(--color-divider);
  padding-block: var(--space-3);
}

/* MENU button — left */
.site-header__menu {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
  position: relative;
  padding: 6px 4px;
  animation: menuPulse 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: left center;
}
.site-header__menu::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  animation: menuShimmer 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  opacity: 0.7;
}
.site-header__menu:hover { animation-play-state: paused; }
.site-header__menu:hover::after { animation-play-state: paused; transform: scaleX(1); }
.site-header__menu[aria-expanded="true"] { animation: none; }
.site-header__menu[aria-expanded="true"]::after { animation: none; transform: scaleX(0); }
@keyframes menuPulse {
  0%, 70%, 100% { transform: scale(1); }
  82% { transform: scale(1.06); }
}
@keyframes menuShimmer {
  0%, 60% { transform: scaleX(0); transform-origin: left center; }
  78% { transform: scaleX(1); transform-origin: left center; }
  82% { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header__menu { animation: none; }
  .site-header__menu::after { animation: none; }
}
.site-header__menu .site-header__caret { font-size: 0.8em; line-height: 1; transition: transform var(--duration-base) var(--ease); }
.site-header__menu[aria-expanded="true"] .site-header__caret { transform: rotate(180deg); }
/* Match shadow on the language switcher trigger so both header anchors are legible on bright heroes */
.lang-switcher__trigger { text-shadow: 0 1px 10px rgba(0,0,0,0.55); }
/* On solid/scrolled headers, MENU text becomes ink and shadow is dropped */
.site-header--solid .site-header__menu,
.site-header.is-scrolled .site-header__menu,
.site-header--solid .lang-switcher__trigger,
.site-header.is-scrolled .lang-switcher__trigger { color: var(--color-text); text-shadow: none; }

/* Brand lockup — centered */
.site-header__brand { justify-self: center; display: block; line-height: 0; }
.site-header__lockup {
  height: 60px;
  width: auto;
  display: block;
  transition: height var(--duration-base) var(--ease);
}
@media (max-width: 760px) { .site-header__lockup { height: 44px; } }
.site-header.is-scrolled .site-header__lockup { height: 44px; }
@media (max-width: 760px) { .site-header.is-scrolled .site-header__lockup { height: 36px; } }
/* White lockup over hero (default); ink lockup on solid/scrolled */
.site-header__lockup--white { display: block; }
.site-header__lockup--ink { display: none; }
.site-header--solid .site-header__lockup--white,
.site-header.is-scrolled .site-header__lockup--white { display: none; }
.site-header--solid .site-header__lockup--ink,
.site-header.is-scrolled .site-header__lockup--ink { display: block; }

/* Full-screen nav overlay */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(14, 15, 19, 0.97);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-2), 1.2vh, var(--space-4));
  /* Fit fully within viewport — no scrolling */
  overflow: hidden;
  overscroll-behavior: contain;
  padding: clamp(40px, 5vh, 64px) var(--space-5) clamp(28px, 3.5vh, 48px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease), visibility var(--duration-base) var(--ease);
}
.site-nav.is-open { opacity: 1; visibility: visible; }
.site-nav a {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--duration-base) var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { opacity: 1; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; }
.site-nav__close {
  position: absolute;
  top: var(--space-6);
  right: clamp(var(--space-5), 4vw, var(--space-10));
  background: none;
  border: 0;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/* ---- Round 12: submenu navigation ---- */
.primary-nav {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Tight rhythm so 10 items + 3 dividers + submenu fit in viewport without scrolling */
  gap: clamp(1px, 0.4vh, 7px);
  max-width: 90vw;
}
/* No per-item bullets — grouped via .primary-nav__divider hairlines instead */
.primary-nav__item:not(:last-child)::after { content: none; display: none; }

/* Thin horizontal divider between nav groups */
.primary-nav__divider {
  display: block;
  width: clamp(40px, 14vw, 120px);
  height: 1px;
  margin: clamp(4px, 1vh, 12px) auto;
  background: rgba(255, 255, 255, 0.22);
  list-style: none;
  padding: 0;
  pointer-events: none;
}
.primary-nav__item {
  text-align: center;
}
.primary-nav__label,
.primary-nav__item > a {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-outline);
  /* Aggressively tuned: 10 items + 3 dividers + submenu must fit in 100vh without scroll */
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
  padding: clamp(1px, 0.2vh, 3px) 0;
  opacity: 0.85;
  transition: opacity var(--duration-base) var(--ease);
}
.primary-nav__item > a:hover,
.primary-nav__item > a[aria-current="page"] {
  opacity: 1;
}
.primary-nav__item > a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 8px;
}
.primary-nav__label {
  opacity: 0.95;
  cursor: default;
}
.primary-nav__hint {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: var(--space-1);
  opacity: 0.55;
  color: rgba(255, 255, 255, 0.85);
}
.primary-nav__submenu {
  list-style: none;
  padding: clamp(2px, 0.5vh, 6px) 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0px, 0.3vh, 4px);
  opacity: 0.85;
}
.primary-nav__submenu a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-family: var(--font-body);
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 500;
  opacity: 0.62;
  transition: opacity var(--duration-base) var(--ease);
}
.primary-nav__submenu a:hover,
.primary-nav__submenu a[aria-current="page"] {
  opacity: 1;
  border-bottom: 1px solid rgba(255,255,255,0.4);
}

@media (max-width: 768px) {
  .primary-nav {
    gap: clamp(1px, 0.4vh, 5px);
  }
  .primary-nav__label,
  .primary-nav__item > a {
    font-size: 17px;
    letter-spacing: 0.1em;
  }
  .primary-nav__submenu a {
    font-size: 10px;
  }
  .primary-nav__divider {
    width: clamp(32px, 18vw, 80px);
    margin: clamp(3px, 0.8vh, 8px) auto;
  }
}

/* ============================================================
   ROUND 10 — RESTORED K-DRAWN FOOTER
   ============================================================ */
/* ============================================================
   FOOTER (Round 11 COMBO) — K-drawn art + clean three-column content
   The K illustration (rocks + flowers + blue water band) is the
   background; the prior clean three-column layout sits OVER the
   blue water band, with a soft dark gradient on the band so the
   white text reads cleanly without losing the art.
   ============================================================ */
.footer-k {
  position: relative;
  width: 100%;
  background-color: #f1f0ea;
  background-image: url('media/footer.png');
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* aspect of art ~ 2560x631 -> ~24.6% height. Reserve room. */
  aspect-ratio: 2560 / 631;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
}
/* soft dark gradient over the blue water band for legible white text */
.footer-k::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(to bottom, rgba(20,60,68,0) 0%, rgba(20,60,68,0.32) 55%, rgba(20,60,68,0.5) 100%);
  pointer-events: none;
}
.footer-k__content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  /* keep content clear of the side rocks via generous horizontal pad */
  padding: 0 clamp(var(--space-6), 9vw, 180px) clamp(var(--space-3), 2.4vw, var(--space-7));
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-k__legal { justify-self: start; display: flex; align-items: center; gap: var(--space-3); }
.footer-k__legal a { color: #fff; text-decoration: none; opacity: 0.94; text-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.footer-k__legal a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.footer-k__sep { opacity: 0.7; }
.footer-k__socials { justify-self: center; display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.footer-k__socials a {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.92);
  border-radius: 50%;
  color: #fff;
  background: rgba(20,60,68,0.18);
  transition: background var(--duration-base) var(--ease), color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.footer-k__socials a:hover { background: #fff; color: #2f7d8a; transform: translateY(-2px); }
.footer-k__socials svg { width: 20px; height: 20px; display: block; }
.footer-k__copyright { justify-self: end; text-align: right; opacity: 0.94; text-shadow: 0 1px 3px rgba(0,0,0,0.25); }

@media (max-width: 900px) {
  .footer-k__content { padding-left: clamp(var(--space-5), 5vw, var(--space-10)); padding-right: clamp(var(--space-5), 5vw, var(--space-10)); }
}
@media (max-width: 760px) {
  .footer-k {
    aspect-ratio: auto;
    min-height: 0;
    background-size: 200% auto;
    background-position: center top;
    padding-top: 30vw;
  }
  .footer-k::after { height: 64%; }
  .footer-k__content {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: 0 var(--space-5) var(--space-6);
  }
  .footer-k__legal, .footer-k__copyright { justify-self: center; text-align: center; }
  .footer-k__socials a { width: 38px; height: 38px; }
}

/* Round 10 — small cross-link note under a room desc */
.prose-block__note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
.prose-block__note a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }


/* ============================================================
   ROUND 10 — REUSABLE ACCORDION-EXPAND CAROUSEL (.stack)
   Shared by Stay (.stay-stack) and Studios (.studios-stack).
   Default band ~190px; expands to ~620px on hover / focus-within /
   aria-expanded. Each band holds a per-property/per-room carousel.
   ============================================================ */
.stack { display: flex; flex-direction: column; width: 100%; }
.stack__item {
  position: relative;
  height: 190px;
  overflow: hidden;
  cursor: pointer;
  background: #e3e0d4;
  transition: height 480ms var(--ease, cubic-bezier(0.4,0,0.2,1));
  border-bottom: 1px solid rgba(255,255,255,0.10);
  outline: none;
}
.stack__item:last-child { border-bottom: 0; }
.stack__item:hover,
.stack__item:focus-within,
.stack__item[aria-expanded="true"] { height: 760px; }
@media (max-width: 720px) {
  .stack__item:hover,
  .stack__item:focus-within,
  .stack__item[aria-expanded="true"] { height: 520px; }
}
.stack__item:focus-visible { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85); }

/* Teaser (collapsed) layer */
.stack__teaser {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 700ms var(--ease, ease);
}
.stack__item:hover .stack__teaser { transform: scale(1.04); }
.stack__teaser::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.62) 100%);
}

/* Expanded carousel layer */
.stack__expand { position: absolute; inset: 0; display: none; }
.stack__item:hover .stack__expand,
.stack__item:focus-within .stack__expand,
.stack__item[aria-expanded="true"] .stack__expand { display: block; }
.stack__expand::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.66) 100%);
}
.stack__slides { position: absolute; inset: 0; }
.stack__slides img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; object-position: center center;
  background: #e3e0d4;
  opacity: 0; transition: opacity 500ms var(--ease, ease);
}
.stack__slides img.is-active { opacity: 1; }
.stack__slides img[hidden] { display: none; }

/* Captions */
.stack__caption {
  position: absolute; bottom: var(--space-5);
  left: clamp(var(--space-5), 4vw, var(--space-10));
  right: clamp(var(--space-5), 4vw, var(--space-10));
  color: #fff; z-index: 2; text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  pointer-events: none;
}
.stack__title {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}
.stack__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: 1.6;
  margin: var(--space-3) 0 0;
  max-width: 52ch;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 400ms var(--ease, ease) 120ms, max-height 480ms var(--ease, ease);
}
.stack__item:hover .stack__desc,
.stack__item:focus-within .stack__desc,
.stack__item[aria-expanded="true"] .stack__desc { opacity: 0.96; max-height: 12em; }
.stack__count {
  display: inline-block; margin-top: var(--space-3);
  font-size: var(--text-xs); letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.72;
}

/* Carousel arrows — appear only when expanded */
.stack__prev, .stack__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff;
  font-size: 46px; line-height: 1; cursor: pointer; z-index: 3;
  padding: var(--space-3);
  text-shadow: 0 0 12px rgba(0,0,0,0.6);
  opacity: 0; transition: opacity 220ms var(--ease, ease);
}
.stack__item:hover .stack__prev,
.stack__item:hover .stack__next,
.stack__item:focus-within .stack__prev,
.stack__item:focus-within .stack__next,
.stack__item[aria-expanded="true"] .stack__prev,
.stack__item[aria-expanded="true"] .stack__next { opacity: 0.9; }
.stack__prev:hover, .stack__next:hover { opacity: 1; }
.stack__prev { left: clamp(var(--space-2), 2vw, var(--space-5)); }
.stack__next { right: clamp(var(--space-2), 2vw, var(--space-5)); }

/* Touch devices: tap toggles aria-expanded; no hover reliance */
@media (hover: none) {
  .stack__item { height: 240px; }
  .stack__item:hover { height: 240px; }
  .stack__item:hover .stack__teaser { transform: none; }
  .stack__item:hover .stack__expand { display: none; }
  .stack__item:hover .stack__desc { opacity: 0; max-height: 0; }
  .stack__item[aria-expanded="true"] { height: 520px; }
  .stack__item[aria-expanded="true"] .stack__expand { display: block; }
  .stack__item[aria-expanded="true"] .stack__desc { opacity: 0.96; max-height: 12em; }
  .stack__item[aria-expanded="true"] .stack__prev,
  .stack__item[aria-expanded="true"] .stack__next { opacity: 0.9; }
}

@media (max-width: 768px) {
  .stack__item { height: 240px; }
  .stack__item:hover,
  .stack__item:focus-within,
  .stack__item[aria-expanded="true"] { height: 500px; }
  .stack__prev, .stack__next { font-size: 38px; }
  .stack__title { letter-spacing: 0.16em; }
}

/* ====================== K MARGINALIA (ambient hand-drawn marks) ====================== */
.k-mark{display:flex;justify-content:center;padding:var(--space-6) 0;opacity:0.85;}
.k-mark img{max-width:120px;height:auto;display:block;}
@media(max-width:768px){.k-mark img{max-width:80px;}}

/* ============================================================
   MIDENGE EDITORIAL — Shoots page, before Treats
   ============================================================ */
.midenge {
  padding: var(--space-12) 0;
  background: var(--color-bg-1);
}
.midenge__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-8);
  padding: 0 var(--space-6);
}
.midenge__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 var(--space-4);
}
.midenge__credit {
  font-family: var(--font-serif, var(--font-body));
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
  margin: 0;
}
.midenge__models {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: 0.78em;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.midenge__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.midenge__frame {
  margin: 0;
  position: relative;
}
.midenge__frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
.midenge__frame figcaption {
  margin-top: var(--space-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  text-align: center;
}
@media (max-width: 720px) {
  .midenge__grid { grid-template-columns: 1fr; }
}

/* ====================== WHERE WE ARE — schematic location map ====================== */
.where {
  padding-block: clamp(var(--space-16), 9vw, var(--space-24));
  border-top: 1px solid var(--color-divider);
}
.where__head {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto clamp(var(--space-14), 7vw, var(--space-20));
}
.where__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.where__title {
  font-family: var(--font-display, "Anton", "Manrope", sans-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
}
.where__lede {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
}
.where__map {
  margin: 0;
  padding: 0;
  background: #efe5d0;
  border: 1px solid rgba(91, 58, 20, 0.18);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 24px rgba(0,0,0,0.08);
}
.where__map svg {
  display: block;
  width: 100%;
  height: auto;
  background: #efe5d0;
}
.where__caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-4);
  background: var(--color-cream, #f5efe6);
  border-top: 1px solid rgba(91, 58, 20, 0.18);
}
.where__notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  margin-top: clamp(var(--space-14), 7vw, var(--space-20));
}
@media (min-width: 820px) {
  .where__notes { grid-template-columns: repeat(3, 1fr); }
}
.where__note { text-align: center; }
.where__note-label {
  font-family: var(--font-display, "Anton", "Manrope", sans-serif);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.where__note-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 36ch;
  margin-inline: auto;
}


/* ====================== FEATURED SESSION LEDE (Typo Review Fix #3) ====================== */
.featured-session__lede {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-text-muted);
  max-width: 46ch;
  margin-top: var(--space-5);
}


/* ====================== ATTRIBUTION WEIGHT (Typo Review Fix #4) ====================== */
/* Spaced uppercase already carries weight; 500 reads with institutional gravity, 700 reads like a warning label. */
.testimonial__attribution,
.testimonial--primary figcaption,
.featured-session__attribution,
.welcome__quote figcaption,
.k-quote figcaption {
  font-weight: 500;
}

/* ====================== THE LAND PAGE — locals grid + triplet icons ====================== */
.locals-grid {
  list-style: none;
  padding: 0;
  margin: clamp(var(--space-8), 6vw, var(--space-12)) 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--space-3), 2vw, var(--space-5));
}
@media (min-width: 720px) {
  .locals-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
  .locals-grid { grid-template-columns: repeat(4, 1fr); }
}
.locals-grid li {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-divider, rgba(0,0,0,0.12));
  background: var(--color-cream, #f5efe6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.locals-grid__name {
  font-family: var(--font-display, "Anton", system-ui, sans-serif);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text, #1a1a1a);
  line-height: 1.1;
}
.locals-grid__note {
  font-family: var(--font-body, "Manrope", system-ui, sans-serif);
  font-size: var(--text-xs, 12px);
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #5a5b5f);
  line-height: 1.4;
}
.triplet__icon {
  color: var(--color-text, #1a1a1a);
  margin-bottom: var(--space-4);
  display: flex;
  justify-content: center;
}
.triplet__icon svg {
  display: block;
  opacity: 0.85;
}

/* ====================== LANGUAGE SWITCHER ====================== */
/* Lang slot — right side of header grid, aligned with MENU button on left */
/* The lang slot is now wrapped inside .site-header__right (which handles
   end-alignment as a grid child). Inside that flex container, the slot
   just needs to be a flex child — no self-positioning. */
.site-header__lang-slot { display: inline-flex; align-items: center; }
.lang-switcher { position: relative; font-family: var(--font-body); }
.lang-switcher__trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  transition: opacity 0.2s ease;
}
.site-header.is-scrolled .lang-switcher__trigger,
.site-header--solid .lang-switcher__trigger {
  color: var(--color-text);
}
.lang-switcher__trigger:hover,
.site-header.is-scrolled .lang-switcher__trigger:hover,
.site-header--solid .lang-switcher__trigger:hover { opacity: 0.7; background: transparent; }
/* Hide the flag in the closed trigger — keep it only in the open menu */
.lang-switcher__trigger .lang-switcher__flag { display: none; }
.lang-switcher__flag { display: inline-flex; align-items: center; }
.lang-switcher__flag svg { display: block; width: 22px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
.lang-switcher__current { font-size: var(--text-xs); letter-spacing: 0.22em; font-weight: 600; }
.lang-switcher__caret { font-size: 0.8em; line-height: 1; opacity: 1; }
.lang-switcher__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px;
  background: #fff; color: #1a1a1a;
  border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 10px 40px rgba(0,0,0,0.18);
  list-style: none; padding: 6px 0; margin: 0;
  max-height: 70vh; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 1000;
}
.lang-switcher[data-open="true"] .lang-switcher__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.lang-switcher__menu li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer;
  font-size: 13px; letter-spacing: 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: background 0.15s ease;
}
.lang-switcher__menu li:last-child { border-bottom: 0; }
.lang-switcher__menu li:hover { background: rgba(0,0,0,0.04); }
.lang-switcher__menu li[aria-selected="true"] { background: rgba(0,0,0,0.06); font-weight: 600; }
.lang-switcher__menu li .lang-switcher__flag svg { width: 24px; height: 16px; }
.lang-switcher__code { font-family: var(--font-display, "Anton", system-ui, sans-serif); font-size: 13px; letter-spacing: 0.1em; min-width: 28px; }
.lang-switcher__sep { color: rgba(0,0,0,0.3); margin: 0 4px; }
.lang-switcher__name { color: var(--color-text, #1a1a1a); }

/* Google Translate fallback hide */
.goog-te-banner-frame.skiptranslate, .goog-logo-link, .goog-te-gadget span { display: none !important; }
.goog-te-gadget { font-size: 0 !important; }
body { top: 0 !important; }

/* ============================================================
   Header right side: weather widget + country selector
   ============================================================ */

/* The right-side container holds both the weather and the lang-switcher,
   stacked horizontally and pushed to the right edge of the header grid.
   Both items align vertically with the MENU button on the left. */
.site-header__right {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  /* Keep clear of the centered logo on narrow viewports */
  padding-left: var(--space-3);
}
@media (max-width: 900px) {
  .site-header__right { gap: 14px; }
}
@media (max-width: 720px) {
  .site-header__right { gap: 10px; padding-left: 0; }
}

/* On very narrow screens the weather widget hides (already in CSS below),
   so the lang switcher slides into its place — still top-right. */

/* Weather widget */
.weather-widget {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body, var(--ff-sans, "Inter", system-ui, sans-serif));
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  /* Pale desert-sky blue — sits well over hero and on solid header */
  color: #b8d4e3;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.6s ease-in, color var(--duration-base) var(--ease);
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}
.weather-widget--loaded { opacity: 0.92; }
.weather-widget:hover { opacity: 1; }

/* On solid/scrolled header (cream background), shift to a deeper sky blue
   for proper contrast — still in the blue family, not black. */
.site-header--solid .weather-widget,
.site-header.is-scrolled .weather-widget {
  color: #5b86a3;
  text-shadow: none;
}

.weather-icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
}
.weather-icon svg {
  width: 100%;
  height: 100%;
}
.weather-temp {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .weather-widget { font-size: 12px; gap: 6px; }
  .weather-icon { width: 15px; height: 15px; }
}

/* On smaller screens, hide weather to keep header uncluttered
   and ensure the logo stays the centerpiece — country selector
   takes priority for navigation. */
@media (max-width: 760px) {
  .weather-widget { display: none; }
}

/* ============================================================
   Universal gallery — horizontal scroller used on Studios, Stay,
   Small Gatherings, etc. Heights capped to prevent verticals
   from blowing up; full composition preserved (no horizontal crop).
   ============================================================ */
.gallery-scroller {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.gallery-track {
  display: flex;
  gap: var(--space-4, 1rem);
  padding-inline: var(--space-6, 2rem);
  padding-block: var(--space-4, 1rem);
}
.gallery-item {
  flex: 0 0 min(85vw, 720px);
  scroll-snap-align: start;
  margin: 0;
}
.gallery-item img {
  width: 100%;
  height: clamp(360px, 56vw, 640px);
  max-height: 640px;
  object-fit: contain;
  background: transparent;
  display: block;
}
.gallery-item figcaption {
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  font-size: var(--text-xs, 0.75rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted, #888);
  margin-top: var(--space-2, 0.5rem);
  padding-inline: var(--space-2, 0.5rem);
}

/* ============================================================
   Enquire CTA — slightly larger menu item to flag it as the
   primary call-to-action in the overlay navigation.
   Uses a higher-specificity selector to override the .primary-nav__item > a
   font-size: clamp() rule that otherwise wins.
   ============================================================ */
.primary-nav__item > a.primary-nav__cta {
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.08em;
  position: relative;
  opacity: 1;
}
.primary-nav__item > a.primary-nav__cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: transform 0.4s var(--ease, ease);
  opacity: 0.5;
}
.primary-nav__item > a.primary-nav__cta:hover::after {
  transform: scaleX(1);
  opacity: 1;
}
@media (max-width: 768px) {
  .primary-nav__item > a.primary-nav__cta {
    font-size: 20px;
    letter-spacing: 0.12em;
  }
}

/* Form field hints — small, muted inline note next to the label */
.form-field__hint {
  font-size: 0.75em;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin-left: 0.4em;
  text-transform: none;
}

/* ============================================================
   Enquire page — unified type scale.
   ============================================================ */

/* Page title — matches other interior page H1s (not the giant hero scale) */
.enquiry__title {
  font-family: var(--font-display, "Anton", "Manrope", sans-serif);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
  padding-top: 0.3em;
}

/* Eyebrow line under the H1 — fine, set with the rest of the page's eyebrows */
.enquiry__eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-4) 0 0;
}

/* Inside the Enquire section only, ratchet the welcome lede down a touch
   so it reads as supporting copy, not a second headline. */
.enquiry .welcome__lede {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  max-width: 52ch;
}
.enquiry .welcome__sub {
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

/* ============================================================
   Enquire page — comprehensive layout pass (June 2026)
   Replaces the prior ad-hoc rules with a single coherent scale.
   Order: editorial header → 2-col grid (form + aside) → CTA.
   ============================================================ */

/* Section frame */
.enquiry {
  padding-block: clamp(var(--space-20), 8vw, var(--space-32));
  background: var(--color-bg, #f1f0ea);
}

/* Editorial header — centered, breathable */
.enquiry__header {
  text-align: left;
  max-width: 64ch;
  margin: 0 0 clamp(var(--space-12), 6vw, var(--space-20));
}
.enquiry__eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.enquiry__title {
  font-family: var(--font-display, "Anton", "Manrope", sans-serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}
.enquiry__lede {
  font-family: var(--font-quote, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
  max-width: 48ch;
}

/* Two-column grid: form (left) + aside (right) */
.enquiry__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
}
@media (min-width: 880px) {
  .enquiry__grid {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}

/* Form — clean, generous, no chrome */
.enquiry__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: 0;
}
.form-field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-field label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.form-field__hint {
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  opacity: 0.7;
  text-transform: uppercase;
  margin-left: 0;
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-3) 0;
  width: 100%;
  border-radius: 0;
  transition: border-color 0.3s var(--ease, ease);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-text);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}
.form-field textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.55;
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 6px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 24px;
  cursor: pointer;
}

/* Two inputs side-by-side */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 600px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* Submit row */
.form-submit-row {
  margin: var(--space-4) 0 0;
}

/* Aside — sits to the right of the form, reads as editorial sidebar */
.enquiry__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: 0;
}
@media (min-width: 880px) {
  .enquiry__aside {
    padding-top: var(--space-3);
    padding-left: clamp(var(--space-4), 3vw, var(--space-10));
    border-left: 1px solid var(--color-divider);
  }
}
.enquiry__detail-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}
.enquiry__detail-block + .enquiry__detail-block {
  margin-top: 0;
}
.enquiry__detail-label {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 500;
}
.enquiry__detail-value {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
}
.enquiry__detail-value a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Footnote — the "not a plant medicine" disclaimer */
.enquiry__footnote {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  font-style: italic;
  margin: var(--space-4) 0 0;
  padding-top: var(--space-5);
  border-top: 1px dashed var(--color-divider);
  opacity: 0.85;
}