/* ===========================================================
   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: clamp(var(--space-12), 7vw, var(--space-16));
}

/* Smaller list sections (Business Leaders, Film & TV, Writers, Photographers,
   Artists, Fashion, Brands & Magazines). Keep MUSICIANS at full size and
   downscale subsequent roster headings so they don't dwarf single-line content. */
.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: clamp(var(--space-6), 3vw, var(--space-10));
}
@media (min-width: 1024px) {
  .roster:not(:first-of-type) .roster__heading.outline-heading {
    -webkit-text-stroke-width: 1px;
    text-stroke-width: 1px;
  }
}

/* Generous vertical room around the compact list sections so each gets its
   own air — the previous tight padding made them stack like a directory. */
.roster:not(:first-of-type) {
  padding-block: clamp(var(--space-12), 7vw, var(--space-20));
}

/* Roster-line size scales down in the smaller sections so names don't dwarf
   their heading. Wider max-width for sections that carry many names. */
.roster:not(:first-of-type) .roster-line {
  font-size: clamp(1.05rem, 1.35vw, 1.4rem);
  max-width: 78ch;
}

/* BUSINESS LEADERS carries many names + roles — needs significantly more width
   and slightly more leading so the line wraps gracefully. */
.roster[aria-label="BUSINESS LEADERS"] .roster-line {
  max-width: 92ch;
  line-height: 1.85;
}
.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;
}

/* ============================================================
   Bleed — portrait variant
   For tall portrait images (like Paige Bradley's Expansion sculpture)
   where the head/top of frame is the focal point and cover-crop
   from the top is unacceptable. Preserves the full composition.
   ============================================================ */
.bleed--portrait .bleed__figure img {
  max-height: none;
  object-fit: contain;
  background: var(--color-bg, #f1f0ea);
}

/* ============================================================
   Roster spacing — Musicians (first roster section) needs major
   top breathing room. The outline MUSICIANS heading is huge —
   it must have generous airspace between the hero above and
   the tile grid below to read as the editorial anchor.
   ============================================================ */
.roster:first-of-type {
  padding-top: clamp(8rem, 15vw, 14rem) !important;
  padding-bottom: clamp(var(--space-12), 8vw, var(--space-20));
}
.roster:first-of-type .roster__heading {
  margin-bottom: clamp(var(--space-16), 10vw, var(--space-24));
}

/* Subsequent roster sections inherit the standard padding-block
   from the .roster rule — already breathable. No override. */

/* About page — "Team / Vision" section sitting between major
   editorial blocks needs proper visual breathing room above. */
.room[aria-label*="Vision" i],
.room[aria-label*="Team" i] {
  padding-top: clamp(var(--space-12), 6vw, var(--space-18));
}

/* ============================================================
   Client tile — text-only variant (when no real photo is available).
   Dark muted card with the artist name centered; matches the
   register of the rest of the grid without faking a photo.
   ============================================================ */
.client-tile--text-only .client-tile__media--text {
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}
.client-tile--text-only .client-tile__media--text::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.04), transparent 60%);
  pointer-events: none;
}
.client-tile__placeholder-name {
  font-family: var(--font-display, "Anton", "Manrope", sans-serif);
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  font-weight: 400;
  position: relative;
  z-index: 1;
}

/* ============================================================
   MUSIC BUSINESS & BRAND PARTNERS — logo grids on white cards
   Like ProStudioTime's "trusted by" wall. Each tile is a uniform
   white card with the logo centered; mixed dark/colored logos
   sit consistently against the white background.
   ============================================================ */
.music-business,
.brand-partners {
  padding-block: clamp(var(--space-16), 9vw, var(--space-24));
  border-top: 1px solid var(--color-divider);
}
.music-business__heading,
.brand-partners__heading {
  text-align: center;
  margin-bottom: clamp(var(--space-12), 7vw, var(--space-16));
}

/* Subsequent music business headings get the same downscale as
   roster sub-sections (Film & TV, etc.) since they sit below MUSICIANS. */
.music-business .outline-heading,
.brand-partners .outline-heading {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  -webkit-text-stroke-width: 1px;
  text-stroke-width: 1px;
  letter-spacing: 0.04em;
}

/* === MUSIC BUSINESS — unified logo wall, ProStudioTime-grade === */
/* Groups are kept in the DOM for SEO/schema, but visually merged into one wall. */
.music-business__group {
  margin-bottom: clamp(var(--space-4), 2vw, var(--space-6));
}
.music-business__group:last-child {
  margin-bottom: 0;
}
/* Category labels hidden visually, preserved for screen readers + SEO */
.music-business__group-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.music-business__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.5rem, 1.2vw, 1rem);
}
@media (min-width: 540px)  { .music-business__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .music-business__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .music-business__grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1500px) { .music-business__grid { grid-template-columns: repeat(6, 1fr); } }

.music-business__tile {
  background: #ffffff;
  border: none;
  border-radius: 2px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.25rem, 0.5vw, 0.5rem);
  margin: 0;
  position: relative;
  transition: transform 0.3s var(--ease, ease), box-shadow 0.3s var(--ease, ease);
  overflow: hidden;
}
.music-business__tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}
.music-business__tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

/* Captions hidden — logos speak for themselves. Schema name preserved via <meta itemprop>. */
.music-business__tile-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 540px) {
  .music-business__tile { padding: 0.25rem; }
}

/* === BRAND PARTNERS — left as the original directory-style grid === */
.brand-partners__group {
  margin-bottom: clamp(var(--space-10), 6vw, var(--space-14));
}
.brand-partners__group:last-child { margin-bottom: 0; }
.brand-partners__group-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
  text-align: center;
}
.brand-partners__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 540px)  { .brand-partners__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .brand-partners__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .brand-partners__grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1280px) { .brand-partners__grid { grid-template-columns: repeat(6, 1fr); } }
.brand-partners__tile {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  aspect-ratio: 5 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  margin: 0;
  position: relative;
  transition: transform 0.3s var(--ease, ease), box-shadow 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease);
  overflow: hidden;
}
.brand-partners__tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.12);
}
.brand-partners__tile img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.brand-partners__tile-name {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 0.3s var(--ease, ease);
  pointer-events: none;
}
.brand-partners__tile:hover .brand-partners__tile-name { opacity: 0.8; }
@media (max-width: 540px) {
  .brand-partners__tile { padding: 14px; }
}