/* ==========================================================================
   THALASSA — Alex Stephens
   Yoga · Tarot · Breathwork · Meditation · Hawaii
   Design system: Cinematic x Editorial
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand:        #0B3B38;  /* Deep Sea Green */
  --brand-light:  #14615C;  /* Kelp */
  --brand-dark:   #061F1D;  /* Abyss */

  /* Dark plane — three depth levels */
  --bg-base:      #061F1D;
  --bg-elevated:  #0B3B38;
  --bg-floating:  #14615C;

  /* Light plane — three depth levels */
  --bg-light-base:     #F4F1EA;  /* Pentelic Marble */
  --bg-light-elevated: #E6DFD1;  /* Sand */
  --bg-light-floating: #FFFDF8;

  /* Text — on dark */
  --text-primary: #F4F1EA;
  --text-body:    #CFDAD7;
  --text-muted:   #93A8A4;

  /* Text — on light */
  --ink:          #0F1F1E;
  --ink-body:     #354744;
  --ink-muted:    #5A6E6B;

  /* Accents */
  --accent:        #3FBFAE;  /* Thalassa Aqua */
  --accent-hover:  #5FD6C6;
  --gold:          #C8A24B;  /* Attic Gold */
  --gold-hover:    #DDB962;

  /* Borders */
  --border:        rgba(63, 191, 174, 0.14);
  --border-strong: rgba(63, 191, 174, 0.30);
  --border-light:  rgba(15, 31, 30, 0.12);

  /* Color-tinted shadows — never flat gray */
  --shadow-sm: 0 2px 8px rgba(6, 31, 29, 0.18);
  --shadow-md: 0 8px 32px rgba(6, 31, 29, 0.24),
               0 2px 8px  rgba(6, 31, 29, 0.14);
  --shadow-lg: 0 24px 64px rgba(6, 31, 29, 0.32),
               0 8px 24px  rgba(6, 31, 29, 0.18);
  --shadow-gold: 0 8px 28px rgba(200, 162, 75, 0.30),
                 0 2px 8px  rgba(200, 162, 75, 0.18);
  --shadow-aqua: 0 8px 28px rgba(63, 191, 174, 0.24);

  /* Type */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale — intentional tokens, not arbitrary steps */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 7rem;
  --s-8: 10rem;

  /* Layout */
  --max-w: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* Motion — spring-style easing */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--accent); text-decoration: none; }

/* Visible focus for every interactive element */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--s-2) var(--s-3);
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
}
.skip-link:focus { left: var(--s-2); top: var(--s-2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. TYPE SCALE
   -------------------------------------------------------------------------- */
.t-hero {
  font-size: clamp(2.75rem, 7vw, 6.5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.96;
}

.t-h2 {
  font-size: clamp(2.1rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.03;
}

.t-h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.t-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.65;
  color: var(--text-body);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--gold);
  flex: none;
}

/* --------------------------------------------------------------------------
   4. SECTION RHYTHM — dark / light alternation
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding: clamp(4.5rem, 11vw, 10rem) 0;
}

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Light plane */
.section--light {
  background: var(--bg-light-base);
  color: var(--ink-body);
}
.section--light h1, .section--light h2,
.section--light h3, .section--light h4 { color: var(--ink); }
.section--light .t-lead { color: var(--ink-body); }
.section--light .eyebrow { color: var(--brand-light); }

/* Dark plane with layered radial gradients */
.section--dark {
  background:
    radial-gradient(ellipse at 18% 20%, rgba(63, 191, 174, 0.09) 0%, transparent 58%),
    radial-gradient(ellipse at 82% 78%, rgba(200, 162, 75, 0.07) 0%, transparent 52%),
    var(--bg-base);
}

.section--deep {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(63, 191, 174, 0.10) 0%, transparent 55%),
    var(--bg-elevated);
}

/* Greek meander divider — drawn on scroll */
.meander {
  display: block;
  width: min(280px, 60%);
  height: 22px;
  margin: 0 auto var(--s-5);
  overflow: visible;
}
.meander path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
}

/* --------------------------------------------------------------------------
   5. GRAIN — tactile depth
   -------------------------------------------------------------------------- */
.grain::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   6. BUTTONS — hover, focus-visible, active on every one
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.9em;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  cursor: pointer;
  will-change: transform;
  transition: transform 0.4s var(--ease-spring),
              box-shadow 0.4s var(--ease-spring),
              background-color 0.3s var(--ease-out),
              border-color 0.3s var(--ease-out),
              color 0.3s var(--ease-out);
}
.btn__arrow {
  display: inline-block;
  will-change: transform;
  transition: transform 0.4s var(--ease-spring);
}
.btn:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* Ghost variant */
.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  background: rgba(63, 191, 174, 0.10);
  border-color: var(--accent);
  color: var(--accent-hover);
  box-shadow: var(--shadow-aqua);
}
.section--light .btn--ghost { color: var(--ink); border-color: var(--border-light); }
.section--light .btn--ghost:hover { color: var(--brand); border-color: var(--brand-light); }

/* Text link with animated rule */
.link-underline {
  position: relative;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 4px;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  transition: transform 0.5s var(--ease-spring);
}
.link-underline:hover::after,
.link-underline:focus-visible::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   7. NAV
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--gutter);
  will-change: transform, background-color;
  transition: background-color 0.5s var(--ease-out),
              padding 0.5s var(--ease-out),
              box-shadow 0.5s var(--ease-out);
}
.nav--scrolled {
  background: rgba(6, 31, 29, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding-block: var(--s-2);
  box-shadow: var(--shadow-md);
}

.nav__logo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}
.nav__logo span { color: var(--accent); }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.nav__link {
  position: relative;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-body);
  padding: 0.4em 0;
  transition: color 0.3s var(--ease-out);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  transition: transform 0.45s var(--ease-spring);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--text-primary); }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); }

.nav__cta { padding: 0.7em 1.4em; font-size: 0.74rem; }

/* Mobile toggle */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out);
}
.nav__toggle:hover { background: rgba(63, 191, 174, 0.12); }
.nav__toggle span {
  position: relative;
  width: 18px; height: 1.5px;
  background: var(--text-primary);
  transition: background-color 0.2s var(--ease-out);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: '';
  position: absolute; left: 0;
  width: 18px; height: 1.5px;
  background: var(--text-primary);
  will-change: transform;
  transition: transform 0.4s var(--ease-spring);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Mobile overlay */
.nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  background: var(--bg-base);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out);
}
.nav__overlay.is-open { opacity: 1; pointer-events: auto; }
.nav__overlay a {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.6s var(--ease-spring), opacity 0.6s var(--ease-out), color 0.3s;
}
.nav__overlay a:hover { color: var(--accent); }
.nav__overlay.is-open a { opacity: 1; transform: translateY(0); }
.nav__overlay.is-open a:nth-child(1) { transition-delay: 0.08s; }
.nav__overlay.is-open a:nth-child(2) { transition-delay: 0.14s; }
.nav__overlay.is-open a:nth-child(3) { transition-delay: 0.20s; }
.nav__overlay.is-open a:nth-child(4) { transition-delay: 0.26s; }
.nav__overlay.is-open a:nth-child(5) { transition-delay: 0.32s; }

/* --- Nav over the light hero -------------------------------------------------
   The hero ground is marble, so the nav's default (unscrolled) state has to be
   ink. Once scrolled it sits on dark glass and flips back to marble. ------- */
.nav__logo { color: var(--ink); }
.nav__logo span { color: var(--brand-light); }
.nav__link { color: var(--ink-body); }
.nav__link:hover,
.nav__link:focus-visible { color: var(--ink); }
.nav__link::after { background: var(--brand-light); }
.nav__toggle { border-color: var(--border-light); }
.nav__toggle:hover { background: rgba(15, 31, 30, 0.06); }
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after { background: var(--ink); }

.nav--scrolled .nav__logo { color: var(--text-primary); }
.nav--scrolled .nav__logo span { color: var(--accent); }
.nav--scrolled .nav__link { color: var(--text-body); }
.nav--scrolled .nav__link:hover,
.nav--scrolled .nav__link:focus-visible { color: var(--text-primary); }
.nav--scrolled .nav__link::after { background: var(--accent); }
.nav--scrolled .nav__toggle { border-color: var(--border-strong); }
.nav--scrolled .nav__toggle:hover { background: rgba(63, 191, 174, 0.12); }
.nav--scrolled .nav__toggle span,
.nav--scrolled .nav__toggle span::before,
.nav--scrolled .nav__toggle span::after { background: var(--text-primary); }

/* The overlay is always dark, so its toggle must stay light while open */
.nav__toggle[aria-expanded="true"] { border-color: var(--border-strong); }
.nav__toggle[aria-expanded="true"] span::before,
.nav__toggle[aria-expanded="true"] span::after { background: var(--text-primary); }

/* Ghost button on the light hero ground */
.deckhero .btn--ghost {
  color: var(--ink);
  border-color: rgba(15, 31, 30, 0.22);
}
.deckhero .btn--ghost:hover {
  background: rgba(20, 97, 92, 0.08);
  border-color: var(--brand-light);
  color: var(--brand-light);
  box-shadow: 0 8px 28px rgba(20, 97, 92, 0.18);
}

/* --------------------------------------------------------------------------
   8. HERO — scroll-scrubbed deck deconstruction
   -------------------------------------------------------------------------- */
.deckhero {
  position: relative;
  /* Tall scroll runway. The sticky child pins for this whole distance, and
     scroll progress across it drives the frame index. */
  height: 340vh;
  background: var(--bg-light-base);
}

.deckhero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(63, 191, 174, 0.07) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(200, 162, 75, 0.08) 0%, transparent 58%),
    var(--bg-light-base);
}

/* The frame sequence. The source clip is on pure white; multiply over the
   marble ground collapses that white to the ground colour exactly. */
.deckhero__canvas,
.deckhero__static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Keeps the copy legible once cards bloom across the full frame. Reads as
   depth-of-field rather than as an overlay. */
.deckhero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      var(--bg-light-base) 0%,
      rgba(244, 241, 234, 0.92) 26%,
      rgba(244, 241, 234, 0.55) 42%,
      transparent 60%),
    linear-gradient(to top,
      rgba(244, 241, 234, 0.75) 0%,
      transparent 32%);
}

.deckhero__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.deckhero__copy {
  max-width: 34rem;
  will-change: transform, opacity;
}

.hero__aloha {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-style: italic;
  color: var(--brand-light);
  margin-bottom: var(--s-2);
}

.deckhero__copy .hero__title { color: var(--ink); margin-bottom: var(--s-3); }
.deckhero__copy .hero__title em { font-style: italic; color: var(--brand-light); }

.hero__lead {
  max-width: 42ch;
  margin-bottom: var(--s-4);
  color: var(--ink-body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.hero__modalities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.hero__modalities li { display: flex; align-items: center; gap: var(--s-3); }
.hero__modalities li:not(:last-child)::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.deckhero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--s-4);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  will-change: opacity;
}
.deckhero__cue i {
  display: block;
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--gold), transparent);
}

/* Frame preload progress */
.deckhero__loader {
  position: absolute;
  left: 50%;
  bottom: var(--s-2);
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 0.6s var(--ease-out);
}
.deckhero__loader[hidden] { display: block; opacity: 0; pointer-events: none; }
.deckhero__loaderbar {
  display: block;
  width: 120px; height: 2px;
  background: rgba(15, 31, 30, 0.12);
  overflow: hidden;
}
.deckhero__loaderbar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gold);
  transform-origin: left;
  transition: width 0.3s var(--ease-out);
}

/* Reduced motion / no-JS: collapse the runway, show one composed frame */
.deckhero--static { height: auto; min-height: 100svh; }
.deckhero--static .deckhero__sticky { position: relative; height: auto; min-height: 100svh; }
.deckhero--static .deckhero__inner { padding-block: var(--s-7); }
.deckhero--static .deckhero__cue,
.deckhero--static .deckhero__loader { display: none; }

/* --------------------------------------------------------------------------
   9. INTRO
   -------------------------------------------------------------------------- */
.intro__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.intro__body p + p { margin-top: var(--s-3); }
.intro__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg-light-elevated);
  will-change: transform;
}
.intro__portrait img { width: 100%; height: 100%; object-fit: cover; }
/* Image treatment — gradient overlay + blend layer, never a bare image */
.intro__portrait::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 31, 29, 0.60) 0%, transparent 58%);
}
.intro__portrait::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  background: var(--brand);
  opacity: 0.16;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   10. FOUR ELEMENTS
   -------------------------------------------------------------------------- */
.elements__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.element {
  position: relative;
  padding: var(--s-4) var(--s-3) var(--s-5);
  border: 1px solid var(--border);
  border-radius: 2px;
  background: linear-gradient(165deg, rgba(20, 97, 92, 0.30), rgba(6, 31, 29, 0.10));
  overflow: hidden;
  will-change: transform;
  transition: transform 0.5s var(--ease-spring),
              border-color 0.4s var(--ease-out),
              box-shadow 0.5s var(--ease-spring);
}
.element:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.element__glyph {
  width: 40px; height: 40px;
  margin-bottom: var(--s-3);
  stroke: var(--gold);
  stroke-width: 1.25;
  fill: none;
}
.element__name {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-1);
}
.element__title { margin-bottom: var(--s-2); }
.element__copy { font-size: 0.94rem; color: var(--text-body); }

/* --------------------------------------------------------------------------
   11. OFFERINGS — buyer-first, three paths
   -------------------------------------------------------------------------- */
.offerings__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.offering {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  border-radius: 2px;
  background: var(--bg-light-floating);
  overflow: hidden;
  will-change: transform;
  transition: transform 0.5s var(--ease-spring),
              box-shadow 0.5s var(--ease-spring),
              border-color 0.4s var(--ease-out);
}
.offering:hover {
  transform: translateY(-6px);
  border-color: rgba(200, 162, 75, 0.55);
  box-shadow: var(--shadow-md);
}
.offering__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-light-elevated);
}
.offering__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
  transition: transform 0.8s var(--ease-spring);
}
.offering:hover .offering__media img { transform: scale(1.05); }
.offering__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 31, 29, 0.55) 0%, transparent 55%);
}
.offering__media::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  background: var(--brand);
  opacity: 0.20;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.offering__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
}
.offering__for {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-light);
}
.offering__copy { font-size: 0.95rem; color: var(--ink-body); flex: 1; }
.offering__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--ink-muted);
}
.offering__list li { display: flex; gap: 0.6rem; }
.offering__list li::before { content: '—'; color: var(--gold); flex: none; }
.offering__cta { margin-top: var(--s-1); align-self: flex-start; }

/* --------------------------------------------------------------------------
   12. CREDENTIALS
   -------------------------------------------------------------------------- */
.creds__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.creds__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.stat__num {
  font-family: var(--font-display);
  white-space: nowrap;
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--gold);
}
.stat__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--s-1);
}

.cred {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.cred::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(var(--wipe-scale, 0));
  transform-origin: left;
  will-change: transform;
}
.cred__name { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.cred__issuer { font-size: 0.86rem; color: var(--text-muted); }
.cred__note { grid-column: 1 / -1; font-size: 0.9rem; color: var(--text-body); margin-top: var(--s-1); }

/* --------------------------------------------------------------------------
   13. TESTIMONIALS
   -------------------------------------------------------------------------- */
.placeholder-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.9em;
  margin-bottom: var(--s-3);
  border: 1px dashed rgba(200, 162, 75, 0.6);
  border-radius: 2px;
  background: rgba(200, 162, 75, 0.09);
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-3);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  background: var(--bg-light-floating);
  will-change: transform;
  transition: transform 0.5s var(--ease-spring), box-shadow 0.5s var(--ease-spring);
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.quote__mark {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--gold);
}
.quote__text {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  flex: 1;
}
.quote__by {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   14. PODCAST
   -------------------------------------------------------------------------- */
.podcast__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.podcast__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: linear-gradient(160deg, rgba(20, 97, 92, 0.36), rgba(6, 31, 29, 0.18));
  overflow: hidden;
  will-change: transform;
}
.podcast__play {
  width: 74px; height: 74px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(200, 162, 75, 0.12);
  color: var(--gold);
  cursor: pointer;
  will-change: transform;
  transition: transform 0.5s var(--ease-spring), background-color 0.4s var(--ease-out);
}
.podcast__play:hover { transform: scale(1.08); background: rgba(200, 162, 75, 0.26); }
.podcast__play:active { transform: scale(1); }

/* --------------------------------------------------------------------------
   15. INQUIRY FORM
   -------------------------------------------------------------------------- */
.inquiry__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.reassure {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.reassure li { display: flex; gap: var(--s-2); font-size: 0.94rem; }
.reassure li::before { content: '✦'; color: var(--gold); flex: none; }

.form { display: grid; gap: var(--s-3); }
.field { display: grid; gap: 0.5rem; }
.field > label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.85em 1em;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--text-primary);
  background: rgba(6, 31, 29, 0.55);
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 118px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: 0.75; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(6, 31, 29, 0.80);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field--row { grid-template-columns: 1fr 1fr; gap: var(--s-2); }

/* Draw-to checkbox group */
.draws {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.draws input { position: absolute; opacity: 0; width: 0; height: 0; }
.draws label {
  display: inline-block;
  padding: 0.55em 1.05em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-body);
  background: rgba(6, 31, 29, 0.5);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  will-change: transform;
  transition: transform 0.35s var(--ease-spring),
              background-color 0.3s var(--ease-out),
              border-color 0.3s var(--ease-out),
              color 0.3s var(--ease-out);
}
.draws label:hover { transform: translateY(-2px); border-color: var(--border-strong); color: var(--text-primary); }
.draws input:checked + label {
  background: rgba(200, 162, 75, 0.20);
  border-color: var(--gold);
  color: var(--gold-hover);
}
.draws input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.form__note { font-size: 0.82rem; color: var(--text-muted); }

.form__status {
  padding: var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background: rgba(63, 191, 174, 0.10);
  color: var(--text-primary);
  font-size: 0.95rem;
}
.form__status[hidden] { display: none; }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  padding: var(--s-6) 0 var(--s-4);
  background: var(--bg-base);
  border-top: 1px solid var(--border);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.footer__logo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}
.footer__logo span { color: var(--accent); }
.footer h3 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}
.footer__list { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__list a, .footer__list span { font-size: 0.92rem; color: var(--text-body); transition: color 0.3s var(--ease-out); }
.footer__list a:hover, .footer__list a:focus-visible { color: var(--accent); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Build credit — present but deferential; it should never outrank the client */
.footer__credit a {
  color: var(--text-body);
  position: relative;
  padding-bottom: 2px;
  transition: color 0.3s var(--ease-out);
}
.footer__credit a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  transition: transform 0.45s var(--ease-spring);
}
.footer__credit a:hover,
.footer__credit a:focus-visible { color: var(--gold); }
.footer__credit a:hover::after,
.footer__credit a:focus-visible::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   17. 404
   -------------------------------------------------------------------------- */
.error-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-6) var(--gutter);
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(63, 191, 174, 0.14) 0%, transparent 62%),
    var(--bg-base);
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 12rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   18. SCROLL-REVEAL BASE STATE
   Only applied when JS is active and motion is allowed (set via .js-anim on <html>)
   -------------------------------------------------------------------------- */
.js-anim .reveal { opacity: 0; transform: translateY(32px); will-change: transform, opacity; }
/* The reveal mask. Display headings run a tight line-height (0.96–1.03), which
   makes the line box shorter than Cormorant's ascenders and descenders — so a
   bare `overflow: hidden` clips the tails of g, y, j and the tops of tall
   letters. Pad the mask box out at both ends and pull it back with equal
   negative margins, so glyphs have room while the baseline stays put. */
.js-anim .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* The mask clips on BOTH axes. Vertically the tight line-height (0.96-1.03)
     cuts Cormorant's descenders; horizontally its `g` ear and the italic
     overhang extend past the glyph's advance width and get sliced off the
     right edge. Pad all four sides and cancel each with an equal negative
     margin, so the glyphs get room while the layout advance is unchanged. */
  padding: 0.14em 0.18em 0.26em;
  margin: -0.14em -0.18em -0.26em;
}
.js-anim .word > span { display: inline-block; will-change: transform; transform: translateY(140%); }

/* --------------------------------------------------------------------------
   19. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .elements__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  /* The overlay menu carries this action; keeping it here wraps to two lines
     and pushes the toggle off the right edge. */
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__overlay { display: flex; }

  /* Narrow screens: the deck occupies the top band and the copy reads off a
     bottom-weighted scrim. The canvas height and the copy height are budgeted
     against each other so the deck never lands on the headline. */
  .deckhero { height: 300vh; }
  .deckhero__canvas,
  .deckhero__static { height: 36%; top: 1%; bottom: auto; }
  .deckhero__scrim {
    background: linear-gradient(to top,
      var(--bg-light-base) 0%,
      var(--bg-light-base) 42%,
      rgba(244, 241, 234, 0.9) 56%,
      transparent 72%);
  }
  .deckhero__inner { align-items: flex-end; padding-bottom: var(--s-5); }
  .deckhero__copy { max-width: none; }
  .deckhero__copy .hero__title { font-size: clamp(2rem, 9vw, 2.7rem); }
  .deckhero__cue { display: none; }
  /* Duplicated by the Four Practices section below; drop it to buy the
     headline the vertical room it needs. */
  .deckhero .hero__modalities { display: none; }

  .intro__grid,
  .creds__grid,
  .podcast__grid,
  .inquiry__grid { grid-template-columns: 1fr; }
  .intro__portrait { max-width: 420px; }

  .offerings__grid,
  .quotes__grid { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .elements__grid { grid-template-columns: 1fr; }
  .creds__stats { gap: var(--s-4); }
  .field--row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .nav__cta { width: auto; }
}

/* --------------------------------------------------------------------------
   20. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js-anim .reveal { opacity: 1 !important; transform: none !important; }
  .js-anim .word > span { transform: none !important; }
  .meander path { stroke-dashoffset: 0 !important; }
}