/* ============================================
   WHITE PIXIES - Design System
   Warm Handcraft Luxury Aesthetic
   ============================================ */

/* --- Tokens --- */
:root {
  /* Typography */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;

  /* Palette, Brand Tones (Apr 2026) */
  --ink: #000000;
  --ink-light: hsl(30, 6%, 22%);
  --ink-muted: hsl(30, 5%, 45%);
  --sage: #76928f;
  --sage-light: hsl(174, 14%, 93%);
  --gold: #cec0a4;
  --gold-light: hsl(36, 30%, 95%);
  --cream: #faf9f4;
  --cream-dark: hsl(40, 18%, 91%);
  --taupe: #afa288;
  --taupe-light: hsl(36, 22%, 93%);
  --rose: hsl(355, 40%, 58%);
  --rose-light: hsl(355, 50%, 95%);
  --white: #FFFFFF;
  --border: hsl(36, 18%, 87%);

  /* Spacing */
  --section-pad: clamp(56px, 8vw, 96px);
  --section-pad-sm: clamp(32px, 5vw, 56px);
  --container: 1200px;
  --gap: 24px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.3s;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Paint cream BEFORE the body styles attach — otherwise the browser shows
     its own default (often near-black on dark-mode systems) for a frame.
     Was previously perceived as a "black flash" on slow connections. */
  background: var(--cream);
}
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Gentle fade-in so the page doesn't pop in once stylesheets+fonts settle. */
  animation: page-fade-in 0.6s ease-out both;
}
@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; }
input, select, textarea { font: inherit; }

/* Site-wide paper-grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  mix-blend-mode: multiply;
}

/* --- Container --- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* --- Typography --- */
.section-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 24px;
}

.section-title em {
  font-style: italic;
  color: var(--sage);
}

.section-intro {
  font-size: 16px;
  color: var(--ink-light);
  max-width: 600px;
  line-height: 1.8;
  margin-bottom: 48px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  transition: all var(--dur) var(--ease);
  letter-spacing: 0.3px;
  cursor: pointer;
  border: none;
}

.btn--primary {
  background: var(--sage);
  color: var(--cream);
}
.btn--primary:hover {
  background: var(--taupe);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px hsla(36, 22%, 55%, 0.3);
}

.btn--outline {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid hsla(35, 50%, 97%, 0.4);
}
.btn--outline:hover {
  background: hsla(35, 50%, 97%, 0.15);
  border-color: var(--cream);
}

.btn--sm { padding: 10px 24px; font-size: 13px; }
.btn--lg { padding: 16px 40px; font-size: 15px; width: 100%; }

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  /* Near-white glass with just a whisper of warmth (was a deeper cream that
     read tan over the hero). Slightly more opaque so the hero doesn't tint it. */
  background: hsla(40, 16%, 98%, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.04);
  transition: all var(--dur) var(--ease);
}

.nav--scrolled {
  background: hsla(40, 16%, 99%, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 0;
  box-shadow: 0 1px 0 var(--border);
}

.nav--scrolled .nav__logo,
.nav--scrolled .nav__logo-name,
.nav--scrolled .nav__link { color: var(--ink); text-shadow: none; }
.nav--scrolled .nav__cta {
  background: var(--sage);
  color: var(--cream);
  backdrop-filter: none;
}

.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}
.nav__logo-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: lowercase;
}
.nav__logo-tagline {
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0.78;
}

.nav__links {
  display: flex;
  gap: 32px;
  position: absolute;
  left: 50%;
  top: 50%;
  /* Shift slightly toward the logo side so the right cluster
     (sign-in + cart + CTA) has more breathing room. */
  transform: translate(calc(-50% - 40px), -50%);
}
.nav__inner { position: relative; }
.nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-light);
  transition: color var(--dur) var(--ease);
  letter-spacing: 0.3px;
}
.nav__link:hover { color: var(--sage); }

.nav__auth-slot {
  display: inline-flex;
  align-items: center;
}
.nav__auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  /* Readable on the light nav at every scroll position. (Was cream text with a
     drop-shadow, a holdover from the old black nav, invisible on cream.) */
  color: var(--ink);
  background: hsla(0, 0%, 100%, 0.62);
  border: 1px solid var(--border);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  font-family: inherit;
}
.nav__auth-chip:hover {
  background: hsla(0, 0%, 100%, 0.9);
  border-color: var(--sage);
  color: var(--sage);
}
.nav__auth-chip__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsla(0, 0%, 100%, 0.12);
}
.nav__auth-chip__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.nav__auth-chip__label {
  white-space: nowrap;
  max-width: 9ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav__cart {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.nav__cart:hover { color: var(--sage); }
.nav--scrolled .nav__cart { color: var(--ink); }
.nav--scrolled .nav__cart:hover { color: var(--sage); }
.nav__cart svg { filter: none; }
.nav--scrolled .nav__cart svg { filter: none; }
.nav__badge {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--gold);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.nav__cta {
  font-size: 13px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  /* Solid sage pill so the CTA reads clearly and stays on-brand against the
     cream-tinted nav (previously ink/black, which read too harsh up top). */
  background: var(--sage);
  color: var(--cream);
  border: 1px solid var(--sage);
  transition: all var(--dur) var(--ease);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav__cta:hover {
  background: #5e7572;
  border-color: #5e7572;
  color: var(--cream);
}

.nav__burger { display: none; }
.nav__mobile-cta { display: none; }

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Cream (not black) before the video frames decode — prevents the
     "page flashes black on load" the client flagged. */
  background: var(--cream);
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, hsla(0, 0%, 0%, 0.55) 0%, hsla(0, 0%, 0%, 0.3) 35%, hsla(0, 0%, 0%, 0.65) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 20%, hsla(0, 0%, 0%, 0.5) 100%);
}

.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 128px;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 80px 24px 0;
  max-width: 800px;
}

.hero__label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  animation: fadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  text-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.4);
  padding: 8px 24px;
  border-radius: 40px;
  background: hsla(0, 0%, 0%, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid hsla(38, 40%, 54%, 0.2);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 88px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--cream);
  margin-bottom: 32px;
  animation: heroReveal 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
  text-shadow: 0 2px 16px hsla(0, 0%, 0%, 0.5), 0 1px 3px hsla(0, 0%, 0%, 0.3);
}

.hero__title em {
  font-style: italic;
  color: var(--gold);
  display: inline-block;
  animation: emGlow 1.6s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
}

.hero__subtitle {
  font-size: clamp(15px, 2vw, 18px);
  color: hsla(35, 50%, 97%, 0.9);
  max-width: 540px;
  margin: 0 auto 48px;
  line-height: 1.7;
  animation: fadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both;
  text-shadow: 0 1px 8px hsla(0, 0%, 0%, 0.5);
}

.hero__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 1.15s both;
}

.hero__proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 56px;
  animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 1.45s both;
  color: var(--cream);
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 1px 8px hsla(0, 0%, 0%, 0.6);
}

.hero__stars {
  display: flex;
  gap: 4px;
  color: var(--gold);
  filter: drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.4));
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes heroReveal {
  0%   { opacity: 0; transform: translateY(48px) scale(0.97); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes emGlow {
  0%   { filter: brightness(0.8); text-shadow: 0 0 0 hsla(38, 40%, 60%, 0); }
  50%  { filter: brightness(1.15); text-shadow: 0 0 28px hsla(38, 60%, 65%, 0.5), 0 0 12px hsla(38, 60%, 65%, 0.35); }
  100% { filter: brightness(1); text-shadow: 0 2px 16px hsla(0, 0%, 0%, 0.5); }
}

/* ============================================
   OCCASIONS
   ============================================ */
.occasions {
  padding: var(--section-pad-sm) 0;
  background: var(--white);
}

.occasions__eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-muted);
  margin-bottom: 28px;
  text-align: center;
}

.occasions__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.occasion-card {
  text-align: center;
  padding: 24px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
}

.occasion-card:hover {
  border-color: var(--sage);
  background: var(--sage-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px hsla(174, 12%, 52%, 0.1);
}

.occasion-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  border-radius: 10px;
  background: var(--sage-light);
  color: var(--sage);
  transition: all var(--dur) var(--ease);
}

.occasion-card:hover .occasion-card__icon {
  background: var(--sage);
  color: var(--white);
}

.occasion-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.occasion-card__text {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* ============================================
   WORKSHOPS
   ============================================ */
.workshops {
  padding: var(--section-pad) 0;
  background: var(--cream);
}

.workshops__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

/* Homepage workshops teaser — image-as-background hero cards */
.workshops__teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 48px;
}
.teaser-card {
  position: relative;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  isolation: isolate;
}
.teaser-card::before {
  /* Strong dark band at the bottom 30% (so title + CTA read crisply),
     fading sharply to transparent so the upper photo stays unobscured.
     Magazine-cover approach: clean photo + clean dark title bar. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    hsla(0, 0%, 0%, 0.85) 0%,
    hsla(0, 0%, 0%, 0.55) 18%,
    hsla(0, 0%, 0%, 0.0) 38%);
  transition: background var(--dur) var(--ease);
  z-index: 1;
  pointer-events: none;
}
.teaser-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px hsla(0, 0%, 0%, 0.18);
}
.teaser-card:hover::before {
  background: linear-gradient(to top,
    hsla(0, 0%, 0%, 0.9) 0%,
    hsla(0, 0%, 0%, 0.6) 22%,
    hsla(0, 0%, 0%, 0.0) 42%);
}
.teaser-card__content {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px 26px 24px;
  color: var(--cream);
  z-index: 2;
}
.teaser-card__content h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 8px;
  color: var(--white);
  text-shadow: 0 1px 6px hsla(0, 0%, 0%, 0.55), 0 0 1px hsla(0, 0%, 0%, 0.4);
}
.teaser-card__content p {
  /* Description hidden on homepage teaser cards — kept in DOM for SEO/a11y
     but visually suppressed so the cards stay clean. Full descriptions live
     on /workshops.html. */
  display: none;
}
/* Popular badge — positioned at TOP of the card, not in the content area.
   Solid gold pill with strong drop shadow + crisp white text for high
   contrast on any photo backdrop. */
.teaser-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 6px 14px;
  background: hsl(38, 60%, 48%);
  color: hsl(0, 0%, 100%);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 100px;
  box-shadow: 0 6px 16px hsla(38, 50%, 25%, 0.35), 0 1px 2px hsla(0, 0%, 0%, 0.2);
  text-shadow: 0 1px 1px hsla(38, 60%, 25%, 0.5);
}
/* Meta row (price/duration) — hidden on homepage teaser cards. Full info on /workshops.html */
.teaser-card__meta { display: none; }

/* Photo cropping tweaks — set per-card background-position so subjects
   land in the visible window instead of the default centered crop. */
.teaser-card { background-position: center 38%; }

/* Stretched-link pattern — the inner anchor's ::after pseudo-element fills
   the entire card, so tapping anywhere on the photo navigates to the
   workshop. Cursor on the card signals interactivity. */
.teaser-card { cursor: pointer; }
.teaser-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}
.teaser-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 5px hsla(0, 0%, 0%, 0.6);
  position: relative; /* keep the visible arrow above the stretched ::after */
  z-index: 3;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gold);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.teaser-card:hover .teaser-card__link {
  color: hsl(38, 55%, 72%);
  gap: 8px;
}

@media (max-width: 900px) {
  .workshops__teaser-grid { grid-template-columns: 1fr; }
  .teaser-card { aspect-ratio: 16 / 10; }
}

.workshop-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all var(--dur) var(--ease);
  position: relative;
}

.workshop-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px hsla(0, 0%, 0%, 0.1);
}

.workshop-card[data-tag]::before {
  content: attr(data-tag);
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--gold);
  color: var(--white);
  z-index: 2;
}

.workshop-card__image {
  height: 260px;
  position: relative;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease);
  overflow: hidden;
}

.workshop-card:hover .workshop-card__image {
  transform: scale(1.04);
}

.workshop-card__body {
  padding: 24px;
}

.workshop-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.workshop-card__duration {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
}

.workshop-card__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--sage);
}

.workshop-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
}

.workshop-card__text {
  font-size: 13px;
  color: var(--ink-light);
  margin-bottom: 16px;
  line-height: 1.6;
}

.workshop-card__includes {
  list-style: none;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--cream);
  border-radius: var(--radius-sm);
}

.workshop-card__includes li {
  font-size: 12px;
  color: var(--ink-light);
  padding: 4px 0;
  padding-left: 20px;
  position: relative;
}

.workshop-card__includes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--sage);
  font-weight: 700;
}

.workshops__note {
  text-align: center;
  margin-top: 32px;
  font-size: 13px;
  color: var(--ink-muted);
}

/* ============================================
   LIVE STATIONS
   ============================================ */
.live-stations {
  padding: var(--section-pad) 0;
  background: var(--white);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

/* Subtle grain texture */
.live-stations::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 128px;
  pointer-events: none;
}

.live-stations .section-title em { color: var(--sage); }

.live-stations__intro {
  font-size: 16px;
  color: var(--ink-light);
  max-width: 580px;
  line-height: 1.8;
  margin-bottom: 52px;
}

.live-stations__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 52px;
}

.live-station-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}

.live-station-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--sage), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.live-station-card:hover {
  border-color: var(--sage);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px hsla(0, 0%, 0%, 0.08);
}

.live-station-card:hover::before {
  opacity: 1;
}

.live-station-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--sage-light);
  border: 1px solid hsl(174, 14%, 85%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage);
  flex-shrink: 0;
}

.live-station-card__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.3px;
}

.live-station-card__text {
  font-size: 14px;
  color: var(--ink-light);
  line-height: 1.8;
}

.live-station-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.live-station-card__features li {
  font-size: 13px;
  color: var(--ink-light);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}

.live-station-card__features li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--sage);
  font-size: 8px;
  top: 3px;
}

.live-station-card__btn {
  align-self: flex-start;
  margin-top: 8px;
  color: var(--ink) !important;
  border-color: var(--border) !important;
  font-size: 13px;
  padding: 10px 24px;
}

.live-station-card__btn:hover {
  background: var(--sage) !important;
  border-color: var(--sage) !important;
  color: var(--white) !important;
}

.live-stations__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  gap: 24px;
  flex-wrap: wrap;
}

.live-stations__bottom p {
  font-size: 14px;
  color: var(--ink-muted);
  max-width: 480px;
  line-height: 1.6;
}

.live-stations__bottom .btn--primary {
  background: var(--sage);
  color: var(--white);
  flex-shrink: 0;
}

.live-stations__bottom .btn--primary:hover {
  background: var(--ink);
  transform: translateY(-2px);
}

/* ============================================
   SHOP
   ============================================ */
.shop {
  padding: var(--section-pad) 0;
  background: var(--cream);
}

.shop__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.shop__intro {
  font-size: 15px;
  color: var(--ink-light);
  line-height: 1.8;
  max-width: 540px;
  margin-top: 12px;
}

.shop__view-all {
  flex-shrink: 0;
  font-size: 14px;
  white-space: nowrap;
}

.shop__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.shop__product {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--dur) var(--ease);
}

.shop__product:hover {
  box-shadow: 0 16px 40px hsla(0, 0%, 0%, 0.1);
  transform: translateY(-4px);
}

.shop__product--featured {
  grid-column: span 1;
  border-color: var(--gold);
  box-shadow: 0 8px 24px hsla(38, 40%, 54%, 0.15);
}

.shop__product-img {
  height: 160px;
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 14px;
}

.shop__product-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--sage);
  color: var(--white);
}

.shop__product-tag--new {
  background: var(--sage);
}

.shop__product-tag--premium {
  background: var(--gold);
}

.shop__product-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop__product-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

.shop__product-desc {
  font-size: 13px;
  color: var(--ink-light);
  line-height: 1.65;
  flex: 1;
}

.shop__product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.shop__product-price {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

.shop__product-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.shop__product-btn:hover {
  color: var(--taupe);
}

/* Perks row */
.shop__perks {
  display: flex;
  justify-content: center;
  gap: 48px;
  padding: 24px 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.shop__perk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-light);
  white-space: nowrap;
}

.shop__perk svg { color: var(--gold); flex-shrink: 0; }

/* ============================================
   CORPORATE GIFTING
   ============================================ */
.gifting {
  padding: var(--section-pad) 0;
  background: var(--cream);
}

.gifting__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}

.gifting__intro {
  font-size: 15px;
  color: var(--ink-light);
  line-height: 1.8;
  max-width: 580px;
  margin-top: 16px;
}

.gifting__header-badges {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
}

.gifting__badge {
  text-align: center;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-width: 80px;
}

.gifting__badge-number {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 6px;
}

.gifting__badge-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-muted);
}

/* Product Cards */
.gifting__products {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 48px;
  align-items: start;
}

.gifting__product {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all var(--dur) var(--ease);
  position: relative;
}

.gifting__product:hover {
  box-shadow: 0 12px 32px hsla(0, 0%, 0%, 0.08);
  transform: translateY(-4px);
}

.gifting__product--featured {
  background: var(--white);
  border-color: var(--sage);
  transform: translateY(-8px);
  box-shadow: 0 20px 48px hsla(174, 12%, 52%, 0.12);
}

.gifting__product--featured:hover {
  transform: translateY(-12px);
  box-shadow: 0 28px 56px hsla(174, 12%, 52%, 0.18);
}

.gifting__product--featured .gifting__product-title,
.gifting__product--featured .gifting__product-icon {
  color: var(--ink);
}

.gifting__product--featured .gifting__product-icon {
  background: var(--sage-light);
  border-color: hsl(174, 14%, 85%);
}

.gifting__product--featured .gifting__product-desc {
  color: var(--ink-light);
}

.gifting__product--featured .gifting__product-specs li {
  color: var(--ink-light);
  border-color: var(--border);
}

.gifting__product--featured .gifting__product-specs strong {
  color: var(--ink);
}

.gifting__product--featured .gifting__product-cta {
  color: var(--sage);
}

.gifting__product--featured .gifting__product-cta:hover {
  color: var(--taupe);
}

.gifting__product-badge {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 100px;
  white-space: nowrap;
  /* Sits on top of the product photo — lift it with a shadow so it reads
     clearly regardless of the photo behind it. */
  z-index: 3;
  box-shadow: 0 4px 14px hsla(0, 0%, 0%, 0.25), 0 1px 2px hsla(0, 0%, 0%, 0.15);
}

.gifting__product-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--taupe-light);
  border: 1px solid hsl(36, 18%, 87%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.gifting__product-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
}

.gifting__product-desc {
  font-size: 13px;
  color: var(--ink-light);
  line-height: 1.7;
}

.gifting__product-specs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.gifting__product-specs li {
  font-size: 12.5px;
  color: var(--ink-light);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
}

.gifting__product-specs li:last-child { border-bottom: none; }

.gifting__product-specs strong {
  color: var(--ink);
  font-weight: 600;
}

.gifting__product-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
  align-self: flex-start;
}

.gifting__product-cta:hover {
  color: var(--taupe);
}

/* Occasions */
.gifting__occasions {
  margin-bottom: 48px;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.gifting__occasions-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

.gifting__occasion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gifting__occasion-chips span {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--gold-light);
  border: 1px solid var(--border);
  color: var(--ink-light);
  transition: all var(--dur) var(--ease);
  cursor: default;
}

.gifting__occasion-chips span:hover {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
  transform: translateY(-1px);
}

.gifting__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.gifting__cta p {
  font-size: 14px;
  color: var(--ink-muted);
  max-width: 480px;
  line-height: 1.6;
}

/* ============================================
   CORPORATE WORKSHOPS
   ============================================ */
.corporate {
  padding: var(--section-pad) 0;
  background: var(--white);
}

.corporate__layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.corporate__left {
  position: sticky;
  top: 120px;
}

.corporate__intro {
  font-size: 15px;
  color: var(--ink-light);
  line-height: 1.8;
  margin-bottom: 32px;
}

.corporate__themes {
  margin-bottom: 36px;
}

.corporate__themes-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}

.corporate__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.corporate__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--sage-light);
  color: var(--sage);
  border: 1px solid hsl(174, 14%, 85%);
  transition: all var(--dur) var(--ease);
  cursor: default;
}

.corporate__chip:hover {
  background: var(--sage);
  color: var(--white);
  border-color: var(--sage);
  transform: translateY(-1px);
}

.corporate__customise-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.corporate__items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.corporate__item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}

.corporate__item:last-child { border-bottom: none; }

.corporate__item-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--sage-light);
  color: var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--dur) var(--ease);
}

.corporate__item:hover .corporate__item-icon {
  background: var(--sage);
  color: var(--white);
}

.corporate__item h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.corporate__item p {
  font-size: 13px;
  color: var(--ink-light);
  line-height: 1.7;
}

/* ============================================
   ABOUT
   ============================================ */
.about {
  padding: var(--section-pad) 0;
  background: var(--white);
}

.about__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.about__paragraph {
  font-size: 15px;
  color: var(--ink-light);
  line-height: 1.8;
  margin-bottom: 20px;
}

.about__stats {
  display: flex;
  gap: 40px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.about__stat { text-align: center; }

.about__stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--sage);
}

.about__stat-label {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 500;
}

.about__image-placeholder {
  width: 100%;
  height: 500px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #cec0a4, #afa288);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__image-placeholder::after {
  content: 'Studio photo coming soon';
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 40px;
  background: hsla(0, 0%, 100%, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: hsla(30, 20%, 30%, 0.45);
  letter-spacing: 0.4px;
  pointer-events: none;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials {
  padding: var(--section-pad) 0;
  background: var(--cream);
  color: var(--ink);
}

.testimonials .section-label { color: var(--sage); }
.testimonials .section-title { color: var(--ink); }

.testimonials__rating {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 48px;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--white);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.testimonials__rating:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}
.testimonials .container { text-align: center; }
.testimonials__rating-stars {
  display: inline-flex;
  gap: 2px;
}
.testimonials__rating-text {
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--ink-light);
}
.testimonials__rating-text strong {
  color: var(--ink);
  font-weight: 600;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.testimonial-card {
  padding: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--white);
}

.testimonial-card__stars {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-bottom: 16px;
}

.testimonial-card__stars svg {
  flex-shrink: 0;
}

.testimonial-card__text {
  font-size: 14px;
  color: var(--ink-light);
  line-height: 1.7;
  margin-bottom: 20px;
  font-style: italic;
}

.testimonial-card__author {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* ============================================
   CLIENTS
   ============================================ */
.clients {
  padding: var(--section-pad) 0 var(--section-pad-sm);
  background: var(--cream);
  overflow: hidden;
}

.clients .container { text-align: center; }

.clients .section-label { color: var(--sage); }

.clients__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 16px;
}

.clients__title em { font-style: italic; color: var(--sage); }

.clients__subtitle {
  font-size: 15px;
  color: var(--ink-light);
  text-align: center;
  max-width: 620px;
  margin: 0 auto 56px;
  line-height: 1.8;
}

.clients__marquee-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: var(--section-pad);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.clients__track {
  /* overflow-x clips the marquee horizontally; overflow-y visible lets the
     hover-lift transform on .client-logo escape without the top border
     getting clipped. */
  overflow-x: clip;
  overflow-y: visible;
  width: 100%;
}

.clients__rail {
  display: flex;
  gap: 16px;
  width: max-content;
}

.clients__track--row1 .clients__rail {
  animation: marquee-left 35s linear infinite;
}

.clients__track--row2 .clients__rail {
  animation: marquee-right 40s linear infinite;
}

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

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

/* Pause on hover */
.clients__track:hover .clients__rail {
  animation-play-state: paused;
}

.client-logo {
  flex-shrink: 0;
  width: 240px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 28px;
  transition: all var(--dur) var(--ease);
}

.client-logo:hover {
  border-color: var(--sage);
  box-shadow: 0 8px 24px hsla(174, 12%, 52%, 0.1);
  transform: translateY(-3px);
}

.client-logo img {
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.7);
  transition: filter var(--dur) var(--ease);
  display: block;
}

.client-logo:hover img {
  filter: grayscale(0%) opacity(1);
}

/* Text-only placeholder for logos we can't load */
.client-logo--text {
  background: var(--cream-dark);
}

.client-logo--text span {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.3px;
  text-align: center;
  transition: color var(--dur) var(--ease);
}

.client-logo--text:hover span {
  color: var(--sage);
}

/* ============================================
   GALLERY
   ============================================ */
.gallery {
  padding: var(--section-pad-sm) 0;
  background: var(--cream);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
}

.gallery__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.5s var(--ease);
  cursor: pointer;
  position: relative;
  background-color: var(--cream-dark);
}

.gallery__item:hover {
  box-shadow: 0 18px 40px hsla(0, 0%, 0%, 0.18);
}
.gallery__item--wide { grid-column: span 2; }
.gallery__item--tall { grid-row: span 2; }

/* ============================================
   VISIT
   ============================================ */
.visit {
  padding: var(--section-pad) 0;
  background: var(--white);
}

.visit__layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}

.visit__detail {
  margin-bottom: 28px;
}

.visit__detail h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.visit__detail p {
  font-size: 14px;
  color: var(--ink-light);
  line-height: 1.7;
}

/* ============================================
   BOOKING
   ============================================ */
.booking {
  padding: var(--section-pad) 0;
  background: var(--cream);
}

.booking__layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  align-items: start;
}

.booking__info {
  position: sticky;
  top: 120px;
}

.booking__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
  margin-bottom: 16px;
  line-height: 1.15;
}

.booking__text {
  font-size: 15px;
  color: var(--ink-light);
  margin-bottom: 32px;
  line-height: 1.7;
  max-width: 400px;
}

.booking__features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.booking__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-light);
}

.booking__card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px hsla(30, 10%, 9%, 0.06);
}

.booking__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Step Progress Bar */
.steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 8px;
}

.steps-bar__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.steps-bar__step span {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.3px;
  transition: color var(--dur) var(--ease);
}

.steps-bar__step--active span,
.steps-bar__step--done span {
  color: var(--sage);
}

.steps-bar__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--border);
  color: var(--ink-muted);
  background: var(--white);
  transition: all var(--dur) var(--ease);
}

.steps-bar__step--active .steps-bar__dot {
  border-color: var(--sage);
  background: var(--sage);
  color: var(--white);
}

.steps-bar__step--done .steps-bar__dot {
  border-color: var(--sage);
  background: var(--sage-light);
  color: var(--sage);
}

.steps-bar__line {
  width: 48px;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
  margin-bottom: 22px;
  transition: background var(--dur) var(--ease);
}

/* Form Steps */
.form-step {
  display: none;
  flex-direction: column;
  gap: 20px;
  animation: stepFadeIn 0.3s ease;
}

.form-step--active {
  display: flex;
}

@keyframes stepFadeIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Step Navigation */
.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Workshop Radio Selector */
.workshop-select {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workshop-option {
  cursor: pointer;
  display: flex;
  align-items: stretch;
  gap: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--dur) var(--ease);
  overflow: hidden;
}

.workshop-option input { display: none; }

/* Small thumbnail of the workshop output sits to the left of the content */
.workshop-option__thumb {
  flex-shrink: 0;
  width: 64px;
  align-self: stretch;
  background-size: cover;
  background-position: center;
  background-color: var(--cream-dark);
}

.workshop-option__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  flex: 1;
  min-width: 0;
}

/* Checked state: highlight the whole option (thumb + content) */
.workshop-option input:checked ~ .workshop-option__content,
.workshop-option:has(input:checked) {
  border-color: var(--sage);
  background: var(--sage-light);
}
.workshop-option:has(input:checked) .workshop-option__thumb {
  filter: saturate(1.1);
}

.workshop-option:hover {
  border-color: var(--sage);
}

.workshop-option__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workshop-option__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.workshop-option__duration {
  font-size: 11px;
  color: var(--ink-muted);
}

.workshop-option__price {
  font-size: 16px;
  font-weight: 700;
  color: var(--sage);
}

.workshop-option__price small {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
}

/* Time Slot Picker */
.time-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.time-slot {
  cursor: pointer;
}

.time-slot input { display: none; }

.time-slot span {
  display: block;
  text-align: center;
  padding: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--dur) var(--ease);
  color: var(--ink-light);
}

.time-slot:hover span {
  border-color: var(--sage);
}

.time-slot input:checked + span {
  border-color: var(--sage);
  background: var(--sage);
  color: var(--white);
}

/* Participant Counter */
.participant-counter {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: fit-content;
}

.counter-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--ink);
  transition: background var(--dur) var(--ease);
  border: none;
  cursor: pointer;
}

.counter-btn:hover {
  background: var(--sage-light);
}

.counter-value {
  width: 56px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--ink);
  -moz-appearance: textfield;
  appearance: textfield;
  cursor: text;
  transition: background var(--dur) var(--ease);
}
.counter-value:hover { background: var(--cream); }
.counter-value:focus { outline: none; background: var(--cream); box-shadow: inset 0 -2px 0 var(--gold); }

.counter-value::-webkit-inner-spin-button,
.counter-value::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 14px;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease);
  outline: none;
}

.form-input:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px hsla(174, 12%, 52%, 0.1);
}

/* Price Summary */
.booking__summary {
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.booking__summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-light);
  padding: 6px 0;
}

.booking__summary-total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.booking__disclaimer {
  font-size: 11px;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.5;
}

/* Booking CTA (homepage) */
.booking-cta {
  padding: var(--section-pad-sm) 0;
  background: var(--cream);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  padding: 64px 0 32px;
  background: var(--taupe-light);
  color: var(--ink-muted);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}

.footer__logo {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 8px;
}

.footer__tagline {
  font-size: 13px;
  color: var(--ink-muted);
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.footer__col h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
}

.footer__col a {
  display: block;
  font-size: 13px;
  padding: 4px 0;
  transition: color var(--dur) var(--ease);
}

.footer__col a:hover { color: var(--sage); }

.footer__bottom {
  padding-top: 24px;
  text-align: center;
  font-size: 12px;
}

/* ============================================
   FLOATING WHATSAPP CTA
   ============================================ */
/* ============================================
   ACTIVATION TEASER — used for Corporate, Live Stations, Gifting
   on the slim homepage. Each is a horizontal card (photo left, content right)
   linking to the full dedicated page.
   ============================================ */
.activation-teaser {
  padding: 64px 0;
  background: var(--cream);
}
.activation-teaser + .activation-teaser {
  padding-top: 0;
}
.activation-teaser__card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px hsla(0, 0%, 0%, 0.04);
}
.activation-teaser--reverse .activation-teaser__card {
  grid-template-columns: 1fr 1.1fr;
}
.activation-teaser--reverse .activation-teaser__media {
  order: 2;
}
.activation-teaser__media {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  margin: 0;
  min-height: 320px;
}
.activation-teaser__body {
  padding: 40px 48px 40px 0;
}
.activation-teaser--reverse .activation-teaser__body {
  padding: 40px 0 40px 48px;
}
.activation-teaser__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 500;
  line-height: 1.15;
  margin: 8px 0 16px;
  color: var(--ink);
}
.activation-teaser__title em {
  color: var(--gold);
  font-style: italic;
}
.activation-teaser__desc {
  font-size: 15px;
  color: var(--ink-light);
  line-height: 1.7;
  margin-bottom: 24px;
}
.activation-teaser__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Mobile: card stacks photo on top, body below */
@media (max-width: 768px) {
  .activation-teaser { padding: 32px 0; }
  .activation-teaser__card,
  .activation-teaser--reverse .activation-teaser__card {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .activation-teaser__media,
  .activation-teaser--reverse .activation-teaser__media {
    aspect-ratio: 16 / 10;
    min-height: auto;
    order: 0;
  }
  .activation-teaser__body,
  .activation-teaser--reverse .activation-teaser__body {
    padding: 24px;
  }
  /* Mobile activation buttons: equal-width 2-col grid so the primary +
     secondary sit cleanly side-by-side. Stacks below 420px viewports. */
  .activation-teaser__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }
  .activation-teaser__actions .btn {
    width: 100%;
    justify-content: center;
    padding: 12px 10px;
    font-size: 13px;
    white-space: nowrap;
    min-width: 0;
  }
}
@media (max-width: 420px) {
  .activation-teaser__actions {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   VISIT + BOOK COMBINED — the homepage's final conversion section.
   Address + map alongside the primary booking CTA.
   ============================================ */
.visit-book {
  padding: 80px 0 96px;
  background: var(--cream);
}
.visit-book__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.visit-book__info { padding-top: 8px; }
.visit-book__lede {
  font-size: 16px;
  color: var(--ink-light);
  line-height: 1.7;
  margin: 16px 0 28px;
  max-width: 460px;
}
.visit-book__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.visit-book__address {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.visit-book__address h4 {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.visit-book__address p {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
}
.visit-book__address-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-muted);
}
@media (max-width: 768px) {
  .visit-book { padding: 48px 0 64px; }
  .visit-book__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .visit-book__actions {
    /* Right-aligned per the mobile thumb-reach convention */
    justify-content: flex-end;
  }
  .visit-book__address {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 24px;
  }
}

/* ============================================
   FLOATING CLUSTER — bottom-anchored on mobile,
   bottom-right on desktop. Holds the menu button
   + WhatsApp FAB + section-navigation chip.

   On desktop:
     cluster is invisible (transparent background); only the WhatsApp FAB
     shows at bottom-right.
   On mobile:
     cluster is a SINGLE rounded glass pill containing all three buttons
     so they read as one cohesive element.
   ============================================ */
.floating-cluster {
  position: fixed;
  /* Lifted to clear the promo bar at the very bottom (~36px tall).
     Original 20px from screen edge + 44px buffer for the promo bar. */
  bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 44px);
  right: max(28px, env(safe-area-inset-right, 0px));
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 0;
  pointer-events: none; /* let children re-enable; gap area is click-through */
}
.floating-cluster > * { pointer-events: auto; }
/* Menu button is hidden on desktop — only WhatsApp shows at bottom-right */
.cluster-btn--menu { display: none; }

.whatsapp-fab {
  /* No longer position: fixed — the cluster handles positioning. */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: hsl(142, 70%, 41%);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px hsla(142, 70%, 30%, 0.4);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  /* Layer hint so iOS keeps it as its own compositing layer */
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.whatsapp-fab:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 8px 24px hsla(142, 70%, 30%, 0.5);
}

.whatsapp-fab svg {
  width: 28px;
  height: 28px;
}

/* ============================================
   WHY CHOOSE US
   ============================================ */
.why {
  padding: var(--section-pad) 0 calc(var(--section-pad) + 40px);
  background: var(--white);
}

.why__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}

.why__header .section-label { color: var(--sage); }
.why__header .section-intro { margin: 0 auto; }

.why__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: start;
}

.why__card {
  padding: 36px 28px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  grid-column: span 3;
  position: relative;
}

/* Gentle alternating offset — break the grid without breaking readability */
.why__card:nth-child(1) { grid-column: 1 / span 3; transform: translateY(0); }
.why__card:nth-child(2) { grid-column: 4 / span 3; transform: translateY(32px); }
.why__card:nth-child(3) { grid-column: 7 / span 3; transform: translateY(0); }
.why__card:nth-child(4) { grid-column: 10 / span 3; transform: translateY(32px); }

.why__card:nth-child(1) { background: var(--sage-light); border-color: hsla(174, 14%, 70%, 0.3); }
.why__card:nth-child(4) { background: var(--gold-light); border-color: hsla(36, 30%, 75%, 0.4); }
/* On the tinted cards, the default sage-light icon disc disappears into the
   matching card background. Give those two cards a white icon disc with a
   subtle ring so the icon stays legible. */
.why__card:nth-child(1) .why__icon,
.why__card:nth-child(4) .why__icon {
  background: var(--white);
  box-shadow: inset 0 0 0 1px hsla(174, 14%, 70%, 0.35);
}
.why__card:nth-child(4) .why__icon {
  box-shadow: inset 0 0 0 1px hsla(36, 30%, 70%, 0.45);
  color: hsl(36, 35%, 42%);
}

.why__card:hover {
  border-color: var(--sage);
  box-shadow: 0 16px 40px hsla(174, 12%, 52%, 0.15);
}
.why__card:nth-child(1):hover { transform: translateY(-6px); }
.why__card:nth-child(2):hover { transform: translateY(26px); }
.why__card:nth-child(3):hover { transform: translateY(-6px); }
.why__card:nth-child(4):hover { transform: translateY(26px); }

.why__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sage-light);
  color: var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.why__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.25;
}

.why__text {
  font-size: 14px;
  color: var(--ink-light);
  line-height: 1.75;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .occasions__grid { grid-template-columns: repeat(3, 1fr); }
  .workshops__grid { grid-template-columns: repeat(2, 1fr); }
  .booking__layout { grid-template-columns: 1fr; gap: 48px; }
  .booking__info { position: static; }
}

@media (max-width: 768px) {
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 16px 24px 24px;
    background: hsla(0, 0%, 0%, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid hsla(35, 50%, 97%, 0.1);
  }

  .nav__links--open {
    display: flex;
  }

  .nav__links--open .nav__link {
    padding: 14px 0;
    font-size: 16px;
    color: hsla(35, 50%, 97%, 0.85);
    border-bottom: 1px solid hsla(35, 50%, 97%, 0.08);
    text-shadow: none;
  }
  .nav__links--open .nav__link:last-child { border-bottom: none; }
  .nav__links--open .nav__link:hover { color: var(--gold); }

  /* Show CTA inside mobile menu */
  .nav__cta {
    display: none;
  }
  .nav__links--open + .nav__cta,
  .nav__links--open ~ .nav__cta {
    display: none;
  }
  /* Desktop auth chip hides on mobile — the nav-sheet handles sign-in there. */
  .nav__auth-slot { display: none; }
  /* Desktop cart icon hides on mobile — the floating cluster's cluster-btn--cart
     handles the cart count there. main.js will still toggle the desktop one,
     but this media-query override wins. */
  .nav__cart { display: none !important; }
  /* Whole desktop actions group collapses on mobile — burger + cluster take over. */
  .nav__actions { display: none; }

  /* Mobile CTA inside menu */
  .nav__mobile-cta {
    display: block;
    margin-top: 12px;
    padding: 14px 24px;
    background: var(--sage);
    color: var(--cream) !important;
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-shadow: none;
  }

  .nav--scrolled .nav__mobile-cta {
    background: var(--ink);
  }

  .nav__burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
    z-index: 10;
  }
  .nav__burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--cream);
    transition: all var(--dur) var(--ease);
    transform-origin: center;
  }

  .nav--scrolled .nav__burger span { background: var(--ink); }

  /* Burger → X animation */
  .nav__burger--open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav__burger--open span:nth-child(2) {
    opacity: 0;
  }
  .nav__burger--open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Scrolled state: dark background for open menu */
  .nav--scrolled .nav__links--open {
    background: hsla(35, 50%, 97%, 0.97);
    border-bottom: 1px solid var(--border);
  }
  .nav--scrolled .nav__links--open .nav__link {
    color: var(--ink);
    border-bottom-color: var(--border);
  }
  .nav--scrolled .nav__links--open .nav__link:hover {
    color: var(--sage);
  }
  .nav--scrolled .nav__links--open::after {
    background: var(--ink);
  }
  .nav--scrolled .nav__mobile-cta {
    background: var(--ink);
  }

  /* MOBILE THUMB-REACH: secondary CTA groups align to the RIGHT for thumb reach.
     The HERO is the exception — its actions stay centered because the hero is
     the visual focal point, where centered CTAs feel intentional and command
     attention rather than feeling pushed to an edge. */
  .hero__actions { flex-direction: column; align-items: center; }
  .occasions__grid { grid-template-columns: repeat(2, 1fr); }
  .workshops__grid { grid-template-columns: 1fr; }
  .live-stations__grid { grid-template-columns: 1fr; }
  .live-stations__bottom { flex-direction: column; align-items: flex-end; text-align: right; }
  .corporate__layout { grid-template-columns: 1fr; gap: 48px; }
  .corporate__left { position: static; }
  .shop__grid { grid-template-columns: 1fr 1fr; }
  .shop__header { flex-direction: column; align-items: flex-start; }
  .shop__perks { gap: 20px; justify-content: flex-start; }
  .gifting__products { grid-template-columns: 1fr; }
  .gifting__product--featured { transform: none; }
  .gifting__header { flex-direction: column; align-items: flex-start; }
  .gifting__header-badges { width: 100%; justify-content: space-between; }
  .gifting__cta { flex-direction: column; align-items: flex-end; text-align: right; }
  /* Gifting product CTA link pushed right within the card */
  .gifting__product-cta { align-self: flex-end; text-align: right; }
  /* Workshop CTAs (workshops.html, live-stations.html share .workshop-detail__actions) */
  .workshop-detail__actions { justify-content: flex-end; }
  /* Live-station card "Enquire" buttons */
  .live-station-card__btn { align-self: flex-end; margin-left: auto; }
  /* Booking-CTA section stays centered on mobile so the title, label, and
     the two CTA buttons read as a balanced call-to-action (matches the
     inline justify-content:center on the button row). */
  .booking-cta .container { text-align: center; }
  .booking-cta .container > div { justify-content: center; }
  /* Teaser cards on the homepage workshops row: arrow link sits at bottom-right */
  .teaser-card__content { text-align: right; }
  .teaser-card__link { margin-left: auto; }
  .about__layout { grid-template-columns: 1fr; }
  .about__image-placeholder { height: 300px; }
  .testimonials__grid { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__item--tall { grid-row: span 1; }
  .visit__layout { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .time-slots { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .footer__links { grid-template-columns: repeat(3, 1fr); }
}

/* The bottom floating cluster (menu button) switches on at 900px — the SAME
   breakpoint where the top nav collapses to a centered logo. These rules used
   to live in the 768px block, which left the menu button missing and the
   desktop nav links overlapping the centered logo across the 769–900px range
   (most visibly the Galaxy Z Fold's unfolded ~880px width). */
@media (max-width: 900px) {
  /* Reserve space at the bottom of the footer so the fixed, bottom-centred
     menu button sits over the footer rather than covering its links. Tied to
     the 900px breakpoint at which the menu button appears. (.blog-foot — the
     Journal footer — gets the same clearance in blog.css, which loads after
     this file and would otherwise win.) */
  .footer { padding-bottom: 100px; }

  /* MOBILE — entire cluster becomes ONE rounded glass pill containing
     [Menu] [WhatsApp] [Section chip]. Centered horizontally at the bottom.
     The buttons share the pill background so they read as one cohesive UI. */
  .floating-cluster {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    gap: 0;
    padding: 6px;
    background: hsla(35, 50%, 99%, 0.9);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid hsla(0, 0%, 0%, 0.06);
    border-radius: 100px;
    box-shadow: 0 8px 28px hsla(0, 0%, 0%, 0.1), 0 1px 3px hsla(0, 0%, 0%, 0.05);
    max-width: calc(100vw - 32px);
  }
  /* Book button removed from cluster — it now lives inside the nav-sheet as
     a big primary CTA. The cluster on mobile only contains the Menu trigger,
     keeping the persistent UI extremely minimal. */

  /* Menu button — bigger tap target (52px) so it's reliably hit even with
     a casual thumb. Stays the SAME size when open (no shrinking) so closing
     is as easy as opening. Icon-swap (hamburger ↔ X) handles the state cue. */
  .cluster-btn--menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.15s var(--ease);
    flex-shrink: 0;
    order: 3;
  }
  .cluster-btn--menu:active {
    background: var(--sage-light);
  }
  /* Open state — keep size constant, only dim the background to signal
     "I'm a close button now". Icon swap from hamburger to X provides the
     primary affordance. */
  .cluster-btn--menu[aria-expanded="true"] {
    background: hsla(0, 0%, 0%, 0.06);
  }
  .cluster-btn--menu__icon-bars { display: block; }
  .cluster-btn--menu__icon-close { display: none; }
  .cluster-btn--menu[aria-expanded="true"] .cluster-btn--menu__icon-bars { display: none; }
  .cluster-btn--menu[aria-expanded="true"] .cluster-btn--menu__icon-close { display: block; }

  /* Cart button INSIDE the mobile floating cluster (sits beside the menu
     button). Hidden by default; main.js shows it when the cart has items.
     Matches the styling of the shop page's inline cluster cart. */
  .cluster-btn--cart {
    order: 2;
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s var(--ease);
  }
  .cluster-btn--cart:active { background: var(--sage-light, hsl(125, 18%, 88%)); }
  .cluster-btn--cart svg { width: 20px; height: 20px; }
  .cluster-cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--gold);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  /* When the cluster contains ONLY the menu button (marketing pages, no Cart),
     make the cluster invisible — the menu button itself IS the floating pill.
     Eliminates the dead-zone ring around the button that caused mis-taps. */
  .floating-cluster:not(:has(.cluster-btn--cart)) {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .floating-cluster:not(:has(.cluster-btn--cart)) .cluster-btn--menu {
    background: hsla(35, 50%, 99%, 0.92);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid hsla(0, 0%, 0%, 0.06);
    box-shadow: 0 8px 28px hsla(0, 0%, 0%, 0.12), 0 1px 3px hsla(0, 0%, 0%, 0.06);
  }
  .floating-cluster:not(:has(.cluster-btn--cart)) .cluster-btn--menu[aria-expanded="true"] {
    background: hsla(0, 0%, 0%, 0.85);
    color: hsl(35, 50%, 97%);
    border-color: hsla(0, 0%, 100%, 0.1);
  }
  /* WhatsApp FAB inside the cluster — HIDDEN on mobile (it's now a big CTA
     button inside the nav-sheet). On desktop the FAB stays visible at
     bottom-right as a one-click contact action (desktop has no sheet). */
  .whatsapp-fab {
    display: none;
  }
}

@media (max-width: 768px) {
  .client-logo { width: 180px; height: 92px; padding: 16px 20px; }
  .client-logo img { max-height: 56px; }
  .why__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .why__card,
  .why__card:nth-child(1),
  .why__card:nth-child(2),
  .why__card:nth-child(3),
  .why__card:nth-child(4) { grid-column: auto; transform: none; }
  .why__card:hover,
  .why__card:nth-child(1):hover,
  .why__card:nth-child(2):hover,
  .why__card:nth-child(3):hover,
  .why__card:nth-child(4):hover { transform: translateY(-4px); }
}

@media (max-width: 640px) {
  /* HERO — on mobile, the landscape video gets aggressively side-cropped to
     fill a 100vh portrait viewport, hiding the people in frame. Two fixes:
     1) drop hero from 100vh to 80vh so the aspect mismatch is less extreme,
     2) shift the focal point upward (object-position) so faces/hands land in
        the visible window rather than getting cropped off the top. */
  .hero { min-height: 80vh; }
  .hero__video {
    object-position: 50% 28%;
  }

  /* On narrow phones, swap the Why cards to a HORIZONTAL layout — photo on
     the left, content on the right. We use absolute positioning on the photo
     (top: 0; bottom: 0) so it ALWAYS fills the card height regardless of
     how long the right-side text wraps. CSS grid's `align-self: stretch`
     was unreliable when the text caused the card to grow taller than the
     intrinsic photo aspect. */
  .why__grid { grid-template-columns: 1fr; gap: 12px; }
  .why__card {
    display: block;
    position: relative;
    padding: 18px 18px 18px 138px; /* 120px photo + 18px gap = 138px left */
    min-height: 160px;
  }
  .why__media {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 120px;
    height: auto;
    aspect-ratio: auto;
    margin: 0;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
  }
  .why__icon {
    margin: 0 0 10px 0;
    width: 36px; height: 36px;
  }
  .why__icon svg { width: 18px; height: 18px; }
  .why__title {
    margin: 0 0 6px 0;
    font-size: 17px;
  }
  .why__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
  }

  /* Same treatment for the Occasion / Gifting cards on narrow mobile */
  .occasion-card__media { margin: -20px -12px 14px; }
  /* Shrink the occasion-card icon — at 40px it was eating ~55px of vertical
     space per card. The photo is the primary visual now; the icon is a small
     accessory. */
  .occasion-card__icon {
    width: 28px;
    height: 28px;
    margin: 0 auto 6px;
    border-radius: 8px;
  }
  .occasion-card__icon svg { width: 14px; height: 14px; }
  .occasion-card__title { font-size: 15px; margin-bottom: 4px; }
  .gifting__product { padding: 24px; }
  .gifting__product-media { margin: -24px -24px 16px; }

  /* Corporate-strip captions now sit below the photo — slightly larger font
     on mobile for legibility at thumb distance. */
  .corporate-strip__item figcaption {
    font-size: 12.5px;
    padding: 10px 4px 0;
  }

  /* Teaser cards on mobile — gradient just enough to keep the title +
     CTA legible at the bottom. Photo is the hero. */
  .teaser-card::before {
    background: linear-gradient(to top,
      hsla(0, 0%, 0%, 0.65) 0%,
      hsla(0, 0%, 0%, 0.22) 28%,
      transparent 55%);
  }
  .teaser-card__content {
    padding: 18px 20px 18px;
  }
  .teaser-card__content h3 {
    font-size: 22px;
    text-shadow: 0 1px 6px hsla(0, 0%, 0%, 0.5);
  }
  .teaser-card__link {
    color: hsl(38, 70%, 75%);
    font-size: 12.5px;
    text-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.55);
  }
}

@media (max-width: 480px) {
  .occasions__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .occasion-card { padding: 20px 12px; }
  .footer__links { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ============================================
   NAVIGATION HOVER DROPDOWN MENU
   ============================================ */
.nav__item--dropdown {
  position: relative;
  display: inline-block;
}

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: hsla(30, 10%, 10%, 0.96);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid hsla(35, 50%, 97%, 0.1);
  border-radius: var(--radius-sm);
  padding: 12px 0;
  width: 240px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  box-shadow: var(--shadow-lg);
  z-index: 1010;
}

.nav__item--dropdown:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav__dropdown-link {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: hsla(35, 50%, 97%, 0.85);
  text-shadow: none;
  transition: all var(--dur) var(--ease);
  text-align: left;
}

.nav__dropdown-link:hover {
  background: hsla(35, 50%, 97%, 0.08);
  color: var(--cream);
  padding-left: 24px;
}

/* Nav Scrolled State override */
.nav--scrolled .nav__dropdown {
  background: hsla(35, 50%, 97%, 0.98);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px hsla(0, 0%, 0%, 0.08);
}

.nav--scrolled .nav__dropdown-link {
  color: var(--ink-light);
}

.nav--scrolled .nav__dropdown-link:hover {
  background: hsla(173, 11%, 50%, 0.08); /* sage color with alpha */
  color: var(--sage);
}

/* Mobile Dropdown styles (stacked indented) */
@media (max-width: 768px) {
  .nav__item--dropdown {
    display: block;
    width: 100%;
  }
  
  .nav__dropdown {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 0 16px;
    margin-top: 4px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  
  .nav__dropdown-link {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    color: hsla(35, 50%, 97%, 0.7);
    border-bottom: none !important;
  }
  
  .nav__dropdown-link:hover {
    color: var(--gold);
    padding-left: 4px;
  }
  
  .nav--scrolled .nav__dropdown-link {
    color: hsla(173, 20%, 20%, 0.7);
  }
  
  .nav--scrolled .nav__dropdown-link:hover {
    color: var(--sage);
  }
}

/* ============================================
   WORKSHOPS PAGE HERO & EDITORIAL BLOCKS
   ============================================ */
.workshops-hero {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;
  padding: 160px 0 100px;
  background-color: hsl(173, 20%, 12%);
  color: var(--cream);
  overflow: hidden;
  text-align: center;
}

.workshops-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('/images/workshops/candle-making.png');
  background-size: cover;
  background-position: center 30%;
  filter: brightness(0.48) contrast(1.05) saturate(0.85);
  z-index: 1;
}

.workshops-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, hsla(173, 20%, 10%, 0.35) 0%, hsla(30, 10%, 12%, 0.65) 100%);
  z-index: 2;
}

.workshops-hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 3;
  pointer-events: none;
}

.workshops-hero__content {
  position: relative;
  z-index: 4;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.workshops-hero__title {
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 500;
  line-height: 1.1;
  margin: 16px 0 24px;
  text-shadow: 0 2px 20px hsla(0, 0%, 0%, 0.6);
}

.workshops-hero__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

.workshops-hero__subtitle {
  font-size: clamp(15px, 2vw, 18px);
  color: hsla(35, 50%, 97%, 0.75);
  line-height: 1.6;
  max-width: 640px;
}

/* ============================================
   CORPORATE — hero photo above the programmes block
   ============================================ */
.corporate__hero-media {
  display: block;
  margin: 0 0 28px;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.5s var(--ease);
}
.corporate__hero-media:hover { transform: scale(1.02); }

/* ============================================
   ICON-CARD MEDIA — photo accents above icon cards
   ============================================ */
.why__media,
.occasion-card__media,
.live-station-card__media,
.gifting__product-media {
  display: block;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-md);
  transition: transform 0.5s var(--ease);
}
.why__media {
  aspect-ratio: 4 / 3;
  /* Bleed photo edge-to-edge inside the card by negating the card's 36px/28px padding,
     then re-apply the card's top corner radius. The card has overflow:hidden so the
     image cleanly fills the top half of the card. */
  margin: -36px -28px 22px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
/* Mobile re-override: must come AFTER the desktop .why__media rule above so the
   horizontal thumbnail layout's no-bleed + left-corner-radius actually wins. The
   earlier mobile rule (inside the main @media block) was being overridden by the
   default rule's negative margins, leaking the image outside the card. */
@media (max-width: 640px) {
  .why__media {
    aspect-ratio: auto;
    margin: 0;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
  }
}
.occasion-card__media {
  aspect-ratio: 4 / 3;
  margin: -24px -12px 16px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.live-station-card__media {
  aspect-ratio: 16 / 9;
  margin-bottom: 0;
  border-radius: 0;
}
.gifting__product-media {
  aspect-ratio: 4 / 3;
  margin: -32px -32px 18px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* ============================================
   PROMO BAR — sticky single-line marquee at the BOTTOM of the viewport,
   with rotating promotional snippets. White background with subtle top
   border so it sits cleanly above content. The floating menu button
   shifts up to sit above this bar.
   ============================================ */
.promo-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  /* Solid white so the band is unambiguous against the page below. */
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid hsla(30, 15%, 80%, 0.5);
  box-shadow: 0 -8px 24px hsla(0, 0%, 0%, 0.04);
  /* iOS safe area on bottom (home indicator) */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Body bottom padding so the promo bar never covers the page footer
   (~46px on every viewport). On mobile the floating cluster sits over the
   footer's own bottom padding — see .footer { padding-bottom } in the
   max-width:768px block above. */
body { padding-bottom: 46px; }
.promo-bar__track {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  padding: 9px 0;
  animation: promo-scroll 45s linear infinite;
  white-space: nowrap;
}
.promo-bar:hover .promo-bar__track { animation-play-state: paused; }
.promo-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--ink-light);
}
.promo-bar__item::before {
  content: '✦';
  color: var(--gold);
  font-size: 10px;
  opacity: 1;
}
@keyframes promo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .promo-bar__track { animation: none; }
}
@media (max-width: 900px) {
  .promo-bar { font-size: 11.5px; }
  .promo-bar__track { gap: 28px; padding: 8px 0; }
}

/* ============================================
   SCROLL PROGRESS + SECTION CHIP (mobile orientation)
   ----------------------------------------------
   Long pages on mobile feel disorienting; these two
   elements give a "you are here" sense. The progress
   bar is the hairline at the very top tracking scroll
   percentage; the chip is a small sticky pill below
   the nav showing the current section name, tappable
   to open a quick-jump menu.
   ============================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold) 0%, hsl(38, 65%, 65%) 100%);
  z-index: 1000;
  transition: width 0.12s linear;
  pointer-events: none;
  will-change: width;
}
.section-chip,
.section-jump { display: none; }

@media (max-width: 900px) {
  /* Section chip — DISPLAY ONLY. A "you are here" label sitting inside the
     cluster pill. Not interactive (no cursor, no hover, no click — the menu
     button is the single source of opening behaviour). */
  .section-chip {
    display: inline-flex;
    position: static;
    align-items: center;
    padding: 0 14px;
    height: 44px;
    background: transparent;
    border: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0.25px;
    user-select: none;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s var(--ease);
    max-width: calc(100vw - 160px); /* leave space for menu + FAB */
    order: 2;
  }
  .section-chip.is-visible {
    opacity: 1;
  }
  .section-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }

  /* Section-jump and nav-sheet both pop UP above the cluster.  They share
     the same visual treatment so the bottom-up sheet pattern feels unified.
     The bottom offset (cluster height ~56px + 18px breathing room) ensures
     the in-sheet WhatsApp CTA never sits flush against the floating menu
     button below it — reduces accidental mis-taps when reaching for the CTA. */
  .section-jump,
  .nav-sheet {
    display: none;
    position: fixed;
    /* Above the menu button, which is now lifted +44px to clear the promo bar */
    bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 112px);
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    top: auto;
    z-index: 1500;
    flex-direction: column;
    width: calc(100vw - 32px);
    max-width: 340px;
    /* Use dvh on supporting browsers so mobile browser chrome (toolbar)
       doesn't push the Powered-by line out of reach. Also reduce the
       subtractor so the sheet can use more vertical space on small phones. */
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    padding: 6px;
    background: hsla(35, 50%, 99%, 0.98);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid hsla(0, 0%, 0%, 0.06);
    border-radius: var(--radius-md);
    box-shadow: 0 -18px 48px hsla(0, 0%, 0%, 0.16), 0 -4px 12px hsla(0, 0%, 0%, 0.06);
    animation: section-jump-up 0.22s var(--ease);
  }
  /* Section-jump items are ordered most-likely-tapped at the bottom (closest
     to thumb), so reverse the column flow. Nav-sheet keeps natural order. */
  .section-jump { flex-direction: column-reverse; }
  .section-jump.is-visible,
  .nav-sheet.is-visible { display: flex; }

  .section-jump__item,
  .nav-sheet__item {
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
    letter-spacing: 0.2px;
  }
  .section-jump__item:active,
  .nav-sheet__item:active {
    background: var(--sage-light);
  }
  .section-jump__item.is-active {
    background: var(--ink);
    color: var(--white);
  }
  /* CTA item in the nav sheet — primary visual weight */
  .nav-sheet__item--cta {
    margin-top: 6px;
    background: var(--sage);
    color: var(--cream);
    text-align: center;
    font-weight: 600;
  }
  .nav-sheet__item--cta:active {
    background: var(--ink);
    color: var(--cream);
  }

  /* MOBILE NAV — minimal, centered logo only. Hide the burger and inline
     links (they live in the bottom nav-sheet via the menu button).
     Cream-tinted glass (was a black gradient) so the header is never dark — the
     client doesn't want a black bar over the hero. */
  .nav {
    padding: 14px 0;
    background: hsla(40, 16%, 98%, 0.9);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid hsla(0, 0%, 0%, 0.04);
  }
  .nav--scrolled {
    padding: 10px 0;
    background: hsla(40, 16%, 99%, 0.98);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.04);
  }
  .nav__inner {
    justify-content: center;
  }
  .nav__logo-name {
    /* Flex container with justify-content:center handles centering naturally;
       no absolute positioning hack needed. */
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 0.6px;
  }
  .nav__logo-tagline {
    font-size: 7.5px;
    letter-spacing: 2.5px;
    margin-top: 3px;
  }
  /* The centre nav links + right-hand actions cluster belong to the >900
     desktop layout. Below 900 the bottom cluster + nav-sheet own navigation,
     so hide them here too — otherwise they overlap the now-centered logo
     across the 769–900px range (the Galaxy Z Fold unfolded ~880px bug). */
  .nav__links { display: none; }
  .nav__actions { display: none; }
  .nav__burger,
  .nav__cta {
    display: none !important;
  }
}
@keyframes section-jump-up {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Cards with media need overflow hidden so the photo respects the card radius */
.why__card,
.occasion-card,
.live-station-card,
.gifting__product {
  overflow: hidden;
}
.why__card:hover .why__media,
.occasion-card:hover .occasion-card__media,
.live-station-card:hover .live-station-card__media,
.gifting__product:hover .gifting__product-media {
  transform: scale(1.04);
}

/* When a card carries a photo, the small icon disc becomes redundant visual
   noise — the photo + title already communicate the card's identity. Hide
   the icon (and shed its old margin) whenever the card has a media sibling.
   Uses :has() so any future card without a photo keeps its icon. */
.why__card:has(.why__media) .why__icon,
.occasion-card:has(.occasion-card__media) .occasion-card__icon,
.live-station-card:has(.live-station-card__media) .live-station-card__icon,
.gifting__product:has(.gifting__product-media) .gifting__product-icon {
  display: none;
}

/* ============================================
   DRAMATIC ZOOM-HOVER on photo grids
   ----------------------------------------------
   Each item is a fixed cropping frame. The
   background lives in an inner __bg span and is
   the only thing that scales — the figcaption
   stays crisp on top.
   ============================================ */
.corporate-strip__item,
.gallery__item,
.livestations-gallery__item,
.visit__photo,
.workshop-gallery__item {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* keeps z-index local for ::after + figcaption */
}
.corporate-strip__item-bg,
.gallery__item-bg,
.livestations-gallery__item-bg,
.visit__photo-bg,
.workshop-gallery__item-bg {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.7s cubic-bezier(.2, 0, .2, 1);
  transform-origin: center;
  will-change: transform;
  z-index: 0;
}
.corporate-strip__item:hover .corporate-strip__item-bg,
.gallery__item:hover .gallery__item-bg,
.livestations-gallery__item:hover .livestations-gallery__item-bg,
.visit__photo:hover .visit__photo-bg,
.workshop-gallery__item:hover .workshop-gallery__item-bg {
  transform: scale(1.18);
}
/* The ::after gradient + figcaption must sit ABOVE the background span */
.corporate-strip__item::after,
.livestations-gallery__item::after {
  z-index: 1;
}
.corporate-strip__item figcaption,
.livestations-gallery__item figcaption {
  z-index: 2;
}

/* ============================================
   VISIT US — studio interior strip
   ============================================ */
.visit__photos {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 56px;
}
.visit__photo {
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
}
@media (max-width: 800px) {
  .visit__photos { grid-template-columns: 1fr; gap: 10px; }
}

/* ============================================
   CORPORATE STRIP — homepage social-proof grid
   ============================================ */
.corporate-strip {
  padding: 56px 0 80px;
  background: var(--cream);
}
.corporate-strip__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  text-align: center;
  color: var(--ink);
  margin: 0 auto 32px;
  max-width: 720px;
}
.corporate-strip__title em { color: var(--gold); font-style: italic; }
.corporate-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* Corporate-strip: photo is its own frame (with zoom on hover), caption sits
   below as a normal block element so it never covers the image. */
.corporate-strip__item {
  margin: 0;
  /* Container no longer has aspect-ratio — the photo frame inside does */
}
.corporate-strip__item-photo {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
}
.corporate-strip__item .corporate-strip__item-bg {
  /* bg keeps absolute-positioned fill INSIDE the photo frame */
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 0.7s cubic-bezier(.2, 0, .2, 1);
}
.corporate-strip__item:hover .corporate-strip__item-bg {
  transform: scale(1.12);
}
.corporate-strip__item::after { display: none; } /* no more gradient overlay */
.corporate-strip__item figcaption {
  display: block;
  position: static;
  padding: 8px 4px 0;
  background: transparent;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-light);
  text-align: center;
  letter-spacing: 0.3px;
  line-height: 1.35;
}
@media (max-width: 900px) {
  .corporate-strip__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   LIVE STATIONS PAGE
   ============================================ */
.livestations-hero {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;
  background-color: hsl(173, 20%, 12%);
  color: var(--cream);
  overflow: hidden;
  text-align: center;
}
.livestations-hero__bg {
  position: absolute; inset: 0;
  background-image: url('/images/live-stations/hero.jpg');
  background-size: cover; background-position: center 35%;
  filter: brightness(0.48) contrast(1.05) saturate(0.85);
  z-index: 1;
}
.livestations-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, hsla(173, 20%, 10%, 0.35) 0%, hsla(30, 10%, 12%, 0.65) 100%);
  z-index: 2;
}
.livestations-hero__grain {
  position: absolute; inset: 0; opacity: 0.04; z-index: 3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px;
}
.livestations-hero__content {
  position: relative; z-index: 4;
  padding: 120px 0 80px;
  max-width: 880px; margin: 0 auto;
}
.livestations-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 400; line-height: 1.05;
  color: var(--cream); margin: 24px 0 20px;
}
.livestations-hero__title em {
  font-style: italic; color: var(--gold);
}
.livestations-hero__subtitle {
  font-size: 16px; line-height: 1.7;
  color: hsla(35, 50%, 97%, 0.78);
  max-width: 640px; margin: 0 auto 32px;
}
.livestations-hero__cta { margin-top: 32px; }

/* Intro strip — four stat cells */
.livestations-intro {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 48px 0;
}
.livestations-intro__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.livestations-intro__cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.livestations-intro__num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500; color: var(--gold);
  letter-spacing: 0.5px;
}
.livestations-intro__cell p {
  font-size: 13px; color: var(--ink-light); margin: 0;
}

/* Main section — reuses .workshop-detail styles */
.livestations-main {
  padding: 120px 0;
  background-color: var(--cream);
}

/* Gallery — 3x2 grid of square photos */
.livestations-gallery {
  padding: 80px 0 120px;
  background: var(--white);
}
.livestations-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.livestations-gallery__item {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
}
.livestations-gallery__item::after {
  /* Subtle bottom shading; the plaque carries the actual contrast. */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    hsla(0, 0%, 0%, 0.45) 0%,
    hsla(0, 0%, 0%, 0.18) 30%,
    transparent 60%);
  pointer-events: none;
}
.livestations-gallery__item figcaption {
  /* Frosted-glass plaque — guarantees legibility regardless of photo content */
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  padding: 9px 14px;
  background: hsla(0, 0%, 0%, 0.62);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  border-radius: 8px;
  color: hsl(0, 0%, 100%);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.35;
  z-index: 2;
}

/* "and many more" tile — fills the last grid cell so the client list reads as
   a sample, not an exhaustive set. No photo: a soft sage card with a centered
   serif plus mark and label, harmonious with the photo tiles beside it. */
.livestations-gallery__item--more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sage-light);
  border: 1px dashed hsla(174, 14%, 52%, 0.55);
}
.livestations-gallery__item--more::after { display: none; }
.livestations-gallery__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 16px;
}
.livestations-gallery__more-plus {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 44px;
  font-weight: 500;
  line-height: 0.8;
  color: var(--sage);
}
.livestations-gallery__more-text {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-light);
}

@media (max-width: 900px) {
  .livestations-intro__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .livestations-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .livestations-intro__grid { grid-template-columns: 1fr; }
  .livestations-gallery__grid { grid-template-columns: 1fr; }
}

/* Sticky section nav for /workshops.html — shows 3 category labels and
   highlights the one currently scrolled into view. Sits below the main nav. */
.workshops-section-nav {
  position: sticky;
  top: 56px;
  z-index: 50;
  background: hsla(35, 50%, 97%, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.workshops-section-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 32px;
  overflow-x: auto;
  scrollbar-width: none;
}
.workshops-section-nav__inner::-webkit-scrollbar { display: none; }
.workshops-section-nav__chip {
  flex-shrink: 0;
  position: relative;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-muted);
  border-radius: 100px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.workshops-section-nav__chip:hover { color: var(--ink); }
.workshops-section-nav__chip.is-active {
  color: var(--white);
  background: var(--ink);
}
@media (max-width: 768px) {
  .workshops-section-nav { top: 52px; }
  .workshops-section-nav__inner { justify-content: flex-start; padding: 10px 16px; }
  .workshops-section-nav__chip { font-size: 12px; padding: 7px 14px; }
}

/* Anchor targets on /workshops.html must clear the fixed main nav + the sticky
   section nav. Without this, a chip click (scrollIntoView block:'start') lands
   the heading at y=0 — behind both bars — so the category content below appears
   with its top cut off. The offset = stuck section-nav bottom (~119px) + buffer. */
.workshops-detail-section [id] { scroll-margin-top: 132px; }
@media (max-width: 768px) {
  .workshops-detail-section [id] { scroll-margin-top: 116px; }
}

/* "What guests have made" gallery strip — appears inside each workshop section */
.workshop-detail__gallery {
  grid-column: 1 / -1;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.workshop-detail__gallery-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 16px;
}
.workshop-gallery__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.workshop-gallery__item {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  margin: 0;
  transition: box-shadow var(--dur) var(--ease);
  cursor: zoom-in;
}
.workshop-gallery__item:hover {
  box-shadow: 0 14px 36px hsla(0, 0%, 0%, 0.14);
}
@media (max-width: 700px) {
  .workshop-gallery__strip { grid-template-columns: repeat(2, 1fr); }
}

/* Editorial Workshops Detail Layout */
.workshops-detail-section {
  padding: 120px 0;
  background-color: var(--cream);
}

.workshop-detail {
  margin-bottom: 140px;
}

.workshop-detail:last-child {
  margin-bottom: 0;
}

.workshop-detail__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 90px;
  align-items: center;
}

.workshop-detail--reverse .workshop-detail__grid {
  grid-template-columns: 0.85fr 1.15fr;
}

.workshop-detail--reverse .workshop-detail__image-wrapper {
  grid-column: 2;
}

.workshop-detail--reverse .workshop-detail__info {
  grid-column: 1;
  grid-row: 1;
}

.workshop-detail__image-wrapper {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}

.workshop-detail__image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease);
}

.workshop-detail__image-wrapper:hover .workshop-detail__image {
  transform: scale(1.04);
}

.workshop-detail__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--gold);
  color: var(--cream);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.15);
  z-index: 5;
}

.workshop-detail__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.workshop-detail__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 12px;
}

.workshop-detail__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 16px;
}

.workshop-detail__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

.workshop-detail__meta {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-light);
}

.meta-item svg {
  color: var(--sage);
  flex-shrink: 0;
}

.workshop-detail__desc {
  font-size: 14.5px;
  color: var(--ink-light);
  line-height: 1.7;
  margin-bottom: 28px;
}

.workshop-detail__subheading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink);
  margin-bottom: 16px;
}

.workshop-detail__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  width: 100%;
}

.workshop-detail__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.workshop-detail__list li svg {
  color: var(--sage);
  flex-shrink: 0;
  margin-top: 2px;
}

.workshop-detail__list li span {
  font-size: 13.5px;
  color: var(--ink-light);
  line-height: 1.5;
}

.workshop-detail__actions {
  display: flex;
  gap: 16px;
  width: 100%;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .workshop-detail__grid,
  .workshop-detail--reverse .workshop-detail__grid {
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .workshops-hero {
    min-height: auto;
    padding: 120px 0 60px;
  }
  .workshops-detail-section {
    padding: 60px 0;
  }
  .workshop-detail {
    margin-bottom: 80px;
  }
  .workshop-detail__grid,
  .workshop-detail--reverse .workshop-detail__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .workshop-detail--reverse .workshop-detail__image-wrapper {
    grid-column: auto;
  }
  .workshop-detail--reverse .workshop-detail__info {
    grid-column: auto;
    grid-row: auto;
  }
  .workshop-detail__image-wrapper {
    aspect-ratio: 16 / 10;
  }
}

/* Category Headers */
.category-header {
  text-align: center;
  margin-bottom: 60px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.category-header:not(:first-child) {
  margin-top: 120px;
}
.category-header__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 12px;
}
.category-header__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}
.category-header__desc {
  font-size: 15px;
  color: var(--ink-light);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}