/* Inter, self-hosted (was Google Fonts). woff2 pulled from Google, metrics identical. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/inter-900-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/inter-900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

  /* Figtree (variable, 400–700) — self-hosted body face. Headings stay Inter. */
  @font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/figtree-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
  @font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/figtree-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

  :root {
    --coral: #eb6768;
    --coral-deep: #d04f50;
    --coral-soft: #fbe0e0;
    --yellow: #fad732;
    --yellow-deep: #e6b820;
    --purple: #8079b9;
    --purple-deep: #6660a0;
    --mint-bg: #d8ebe2;
    --mint-deeper: #b6dac8;
    --mint-ink: #5ec09e;
    --mint-text: #2c8865;
    --paper: #FFFFFF;
    --ink: #49545a;
    --ink-2: #49545a;
    --ink-soft: #6b7176;
    --muted: #9A988F;
    --line: rgba(14,13,11,0.10);
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-2);
    background: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* clip (not hidden): stops sideways scroll WITHOUT creating a scroll
       container, which would disable position:sticky on every descendant. */
    overflow-x: clip;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; }

  h1, h2, h3, h4 { font-family: var(--sans); margin: 0; }

  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
  @media (max-width: 720px) { .wrap { padding: 0 24px; } }

  /* TOP BAR */
  .topbar {
    position: absolute;
    top: 28px; left: 0; right: 0;
    z-index: 30;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 48px;
  }
  @media (max-width: 720px) { .topbar { padding: 0 24px; top: 22px; } }
  .brand-logo {
    height: 150px; width: auto;
  }
  @media (max-width: 720px) { .brand-logo { height: 80px; } }

  /* STICKY TOP CTA BAR — slides down on scroll past hero */
  .sticky-cta-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: var(--ink);
    color: #fff;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.30);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .sticky-cta-bar.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .sticky-cta-bar .left {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
  }
  .sticky-cta-bar .logo-mini {
    height: 36px;
    width: auto;
    flex-shrink: 0;
  }
  .sticky-cta-bar .msg {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sticky-cta-bar .msg strong {
    color: var(--yellow);
    font-weight: 800;
    letter-spacing: 0.06em;
  }
  .sticky-cta-bar .btn-mini {
    background: var(--coral);
    color: #fff;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(232,82,94,0.34);
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    text-decoration: none;
  }
  .sticky-cta-bar .btn-mini:hover { background: var(--coral-deep); transform: translateY(-1px); }
  .sticky-cta-bar .btn-mini .arrow { font-size: 14px; letter-spacing: 0; transition: transform 0.2s ease; }
  .sticky-cta-bar .btn-mini:hover .arrow { transform: translateX(3px); }

  @media (max-width: 720px) {
    .sticky-cta-bar { padding: 10px 18px; gap: 12px; }
    .sticky-cta-bar .logo-mini { height: 30px; }
    .sticky-cta-bar .msg { display: none; }
    .sticky-cta-bar .btn-mini { padding: 10px 16px; font-size: 11px; letter-spacing: 0.12em; gap: 8px; }
  }

  /* HERO — full-bleed photo with dark overlay, centred text */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
  }
  .hero-bg {
    position: absolute; inset: 0;
    background: url('images/hero.webp') center/cover no-repeat;
    background-attachment: fixed;
    z-index: -2;
    filter: brightness(1.10) saturate(1.10);
  }
  @media (max-width: 720px) {
    .hero-bg { background-attachment: scroll; }
  }
  .hero-overlay {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center,
      transparent 0%, transparent 55%, rgba(14,13,11,0.30) 100%);
    z-index: -1;
  }
  .hero-dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 0.8px, transparent 1px);
    background-size: 16px 16px;
    background-position: 0 0;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
    opacity: 0.5;
  }

  .hero-content {
    position: relative;
    text-align: center;
    max-width: 1080px;
    padding: 130px 32px 90px;
    z-index: 2;
    width: 100%;
  }
  @media (max-width: 720px) { .hero-content { padding: 144px 22px 90px; } }
  .hero-card {
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 44px 52px 48px;
    border-radius: 18px;
    max-width: 880px;
    margin: 0 auto;
    box-shadow: 0 30px 70px rgba(14,13,11,0.28);
  }
  @media (max-width: 720px) {
    .hero-card { padding: 32px 24px 36px; }
  }

  /* Location pill */
  .loc-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--mint-ink);
    color: #fff;
    padding: 9px 18px 9px 14px;
    border-radius: 999px;
    font-weight: 700; font-size: 13px; letter-spacing: 0.06em;
    margin-bottom: 28px;
    text-transform: uppercase;
  }
  .loc-pill svg { flex-shrink: 0; }

  .hero h1 {
    font-size: clamp(56px, 8.4vw, 110px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.92;
    color: var(--ink);
    margin: 0 auto 24px;
    max-width: 14ch;
  }
  @media (max-width: 720px) {
    .hero h1 { font-size: clamp(64px, 14vw, 84px); }
  }
  .hero h1 .accent {
    color: var(--yellow);
    display: block;
    -webkit-text-stroke: 9px var(--coral);
    text-stroke: 9px var(--coral);
    paint-order: stroke fill;
  }

  .hero p.lead {
    font-size: clamp(18px, 1.5vw, 22px);
    color: var(--ink-2);
    max-width: 52ch;
    margin: 0 auto 32px;
    line-height: 1.45;
    font-weight: 500;
  }
  .hero p.lead .price {
    color: var(--coral);
    font-weight: 800;
    white-space: nowrap;
  }

  .hero-cta-row {
    display: flex; align-items: center; justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 32px;
  }

  .btn, .btn-outline {
    display: inline-flex; align-items: center;
    padding: 16px 22px; border-radius: 999px;
    font-weight: 700; font-size: 13px;
    letter-spacing: 0.16em; text-transform: uppercase;
    border: 1.5px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    line-height: 1;
  }
  .btn {
    background: var(--coral); color: #fff;
    gap: 14px;
    padding-left: 26px;
    box-shadow:
      0 12px 32px rgba(232,82,94,0.36),
      inset 0 1px 0 rgba(255,255,255,0.20);
  }
  .btn:hover { background: var(--coral-deep); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(232,82,94,0.44), inset 0 1px 0 rgba(255,255,255,0.20); }
  .btn .price-chip {
    background: var(--yellow);
    color: var(--ink);
    padding: 6px 11px;
    border-radius: 999px;
    font-weight: 800; font-size: 12px;
    letter-spacing: 0.04em; line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  }
  .btn .arrow {
    font-size: 16px;
    letter-spacing: 0;
    margin-left: 2px;
    transition: transform 0.2s ease;
  }
  .btn:hover .arrow { transform: translateX(4px); }

  .btn-outline {
    background: transparent;
    color: var(--ink);
    border-color: rgba(14,13,11,0.30);
    gap: 10px;
    padding: 16px 26px;
  }
  .btn-outline:hover {
    background: rgba(14,13,11,0.06);
    border-color: var(--ink);
  }
  .price-anchor .btn-outline {
    color: #fff;
    border-color: rgba(255,255,255,0.55);
  }
  .price-anchor .btn-outline:hover {
    background: rgba(255,255,255,0.10);
    border-color: #fff;
  }

  /* GOOGLE RATING — light card on dark, positioned bottom-right */
  .google-rating {
    position: absolute;
    bottom: 36px; right: 36px;
    z-index: 4;
    display: inline-flex; align-items: center; gap: 14px;
    background: #fff;
    padding: 12px 20px 12px 14px;
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(0,0,0,0.30);
  }
  @media (max-width: 720px) {
    .google-rating {
      bottom: 24px; right: 50%; transform: translateX(50%);
      padding: 10px 16px 10px 12px;
    }
    .google-rating .gicon { width: 22px; height: 22px; }
  }
  .google-rating .gicon { width: 26px; height: 26px; flex-shrink: 0; }
  .google-rating .body { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
  .google-rating .top {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--ink);
  }
  .google-rating .stars { color: #FBBC04; letter-spacing: 1.5px; font-size: 14px; }
  .google-rating .label {
    font-size: 11px; font-weight: 500; color: var(--ink-soft);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-top: 4px;
  }

  /* Scroll hint */
  .scroll-hint {
    position: absolute;
    bottom: 36px; left: 50%; transform: translateX(-50%);
    z-index: 3;
    color: rgba(255,255,255,0.7);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.24em; text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
  }
  .scroll-hint .line {
    width: 1px; height: 36px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent);
    animation: drop 2s ease-in-out infinite;
  }
  @keyframes drop {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
  }
  @media (max-width: 720px) { .scroll-hint { display: none; } }

  /* TRUST BAR — section 2 */
  .trust-bar {
    background: var(--mint-ink);
    color: #fff;
    padding: 28px 0;
    position: relative;
    z-index: 5;
  }
  .trust-bar .row {
    display: flex; align-items: center; justify-content: center;
    gap: 36px; flex-wrap: wrap;
    text-align: center;
  }
  .trust-item {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans);
    font-size: clamp(15px, 1.5vw, 19px); font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: #fff;
    line-height: 1;
  }
  .trust-item .num {
    color: #fff;
    font-size: clamp(17px, 1.7vw, 22px);
    font-weight: 900;
    letter-spacing: 0.03em;
  }
  .trust-item .stars {
    color: var(--yellow);
    letter-spacing: 1.5px;
    font-size: clamp(16px, 1.6vw, 20px);
  }
  .trust-sep {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    flex-shrink: 0;
  }
  @media (max-width: 720px) {
    .trust-bar { padding: 22px 0; }
    .trust-bar .row { gap: 14px 18px; }
    .trust-item { font-size: 14px; letter-spacing: 0.05em; }
    .trust-sep { display: none; }
  }

  /* REVIEWS CAROUSEL — section 3 */
  .reviews {
    background: #FFFFFF;
    padding: 110px 0 100px;
    position: relative;
    overflow: hidden;
  }

  .carousel {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
  }
  .carousel .counter {
    position: absolute;
    top: -16px; right: 0;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }
  .carousel .counter strong { color: var(--coral); font-weight: 800; }
  .viewport { overflow: hidden; }
  .track {
    display: flex;
    transition: transform 0.65s cubic-bezier(0.5, 0, 0.1, 1);
  }
  .review {
    flex: 0 0 100%;
    padding: 32px;
    text-align: center;
  }
  .review .stars-large {
    color: #FBBC04;
    letter-spacing: 6px;
    font-size: 22px;
    margin-bottom: 32px;
  }
  .review blockquote {
    font-size: clamp(24px, 3.4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.18;
    color: var(--ink);
    margin: 0 auto 36px;
    max-width: 22ch;
  }
  .review blockquote .mark {
    color: var(--coral);
    font-weight: 900;
    margin-right: 4px;
  }
  .review cite {
    font-style: normal;
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .review cite strong { color: var(--ink); font-weight: 800; }
  .review cite .pip {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--mint-ink); opacity: 0.5;
  }

  .controls {
    display: flex; align-items: center; justify-content: center;
    gap: 28px;
    margin-top: 56px;
  }
  .ctrl {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--mint-bg);
    border: none;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  .ctrl:hover { background: var(--coral); color: #fff; transform: scale(1.05); }
  .ctrl svg { width: 18px; height: 18px; }
  .dots {
    display: inline-flex; align-items: center; gap: 10px;
  }
  .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(14,13,11,0.16);
    border: none; cursor: pointer; padding: 0;
    transition: all 0.3s ease;
  }
  .dot.active {
    background: var(--coral);
    width: 32px; border-radius: 999px;
  }
  @media (max-width: 720px) {
    .reviews { padding: 90px 0 80px; }
    .reviews-head { margin-bottom: 56px; }
    .review { padding: 16px; }
    .controls { gap: 16px; margin-top: 40px; }
    .ctrl { width: 44px; height: 44px; }
  }

  /* WELCOME / studio + Vanessa — section 4 */
  .welcome {
    background: var(--purple);
    color: #fff;
    padding: 130px 0;
    position: relative;
    overflow: hidden;
  }
  .welcome .wrap { position: relative; z-index: 2; }
  .welcome-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  @media (max-width: 900px) {
    .welcome { padding: 90px 0; }
    .welcome-grid { grid-template-columns: 1fr; gap: 48px; }
  }
  .welcome-text .eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: 24px;
  }
  .welcome-text h2 {
    font-size: clamp(36px, 5.2vw, 64px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.02;
    color: #fff;
    margin-bottom: 32px;
    max-width: 18ch;
  }
  .welcome-text h2 .accent { color: var(--yellow); }
  .welcome-text p {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255,255,255,0.92);
    margin: 0 0 18px 0;
    max-width: 44ch;
  }
  .welcome-text p strong { color: #fff; font-weight: 700; }
  .welcome-text .signature {
    display: inline-flex; align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.25);
  }
  .welcome-text .signature .name {
    font-size: 13px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: #fff;
  }
  .welcome-text .signature .role {
    font-size: 12px; color: rgba(255,255,255,0.7);
    margin-top: 4px;
  }

  .welcome-photo { position: relative; }
  .welcome-photo .main-photo {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 30px 60px rgba(14,13,11,0.20);
    display: block;
  }
  .welcome-photo .caption {
    background: #fff;
    color: var(--ink);
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(0,0,0,0.16);
    line-height: 1;
    white-space: nowrap;
  }
  .welcome-photo .main-caption {
    position: absolute;
    bottom: 20px; left: 20px;
  }
  .welcome-photo .team-overlay {
    position: absolute;
    bottom: -32px; right: -28px;
    width: 52%;
    max-width: 300px;
    min-width: 180px;
    border-radius: 14px;
    overflow: visible;
    background: #fff;
    padding: 8px;
    box-shadow: 0 22px 48px rgba(14,13,11,0.32);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .welcome-photo .team-overlay:hover { transform: scale(1.02); }
  .welcome-photo .team-overlay img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 9px;
    display: block;
  }
  .welcome-photo .team-caption {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    background: var(--coral);
    color: #fff;
    padding: 7px 12px;
    font-size: 10px;
    box-shadow: 0 6px 14px rgba(232,82,94,0.40);
  }
  @media (max-width: 720px) {
    .welcome-photo .team-overlay {
      bottom: -22px; right: -16px;
      width: 46%;
      min-width: 150px;
      max-width: 220px;
    }
    .welcome-photo .main-caption {
      bottom: 16px; left: 16px;
      font-size: 10px;
      padding: 8px 12px;
    }
    .welcome-photo .team-caption {
      font-size: 9px;
      padding: 6px 10px;
      bottom: 12px;
    }
  }

  /* WHAT'S IN THE PASS — section 5 */
  .pass {
    background: var(--yellow);
    color: var(--ink);
    padding: 130px 0;
    position: relative;
    overflow: hidden;
  }
  .pass::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(94,192,158,0.32) 0.8px, transparent 1px);
    background-size: 16px 16px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
  }
  .pass .wrap { position: relative; z-index: 2; }
  .pass-head {
    background: #fff;
    padding: 52px 56px;
    border-radius: 14px;
    text-align: center;
    max-width: 1080px;
    margin: 0 auto 80px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    position: relative;
    z-index: 3;
  }
  .pass-head .eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 22px;
  }
  .pass-head h2 {
    font-size: clamp(36px, 5.4vw, 68px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 18px;
  }
  .pass-head h2 .accent { color: var(--coral); }
  .pass-head p {
    font-size: 17px;
    color: var(--ink-soft);
    max-width: 48ch;
    margin: 0 auto;
  }
  .pass-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
  }
  @media (max-width: 1100px) { .pass-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; max-width: 720px; } }
  .pass-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(14,13,11,0.08);
    display: flex; flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .pass-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(14,13,11,0.16);
  }
  .pass-card .img {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
  }
  .pass-card .body {
    padding: 36px 28px 32px;
    position: relative;
  }
  .pass-card .num {
    position: absolute;
    top: -26px; left: 28px;
    width: 52px; height: 52px;
    background: var(--mint-ink);
    color: #fff;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 10px 24px rgba(94,192,158,0.45);
  }
  .pass-card h3 {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .pass-card h3 em { font-style: normal; color: var(--coral); }
  .pass-card .desc {
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
  }
  @media (max-width: 900px) {
    .pass-grid { grid-template-columns: 1fr; gap: 56px; max-width: 480px; }
  }
  @media (max-width: 720px) {
    .pass { padding: 90px 0; }
    .pass-head { margin-bottom: 56px; }
  }

  /* CLASS STYLES — section 6 */
  .classes {
    background: #FFFFFF;
    padding: 130px 0;
  }
  .classes-head {
    text-align: center;
    max-width: 1080px;
    margin: 0 auto 72px;
  }
  .classes-head .eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 22px;
  }
  .classes-head h2 {
    font-size: clamp(36px, 5.4vw, 68px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 18px;
  }
  .classes-head h2 .accent { color: var(--coral); }
  .classes-head p {
    font-size: 17px;
    color: var(--ink-soft);
    max-width: 50ch;
    margin: 0 auto;
  }
  .class-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .class-card {
    --accent: var(--coral);
    --accent-text: #fff;
    perspective: 1600px;
    position: relative;
    cursor: pointer;
  }
  .class-card.flow { --accent: var(--coral); --accent-text: #fff; }
  .class-card.sweat { --accent: var(--yellow-deep); --accent-text: var(--ink); }
  .class-card.calm { --accent: var(--mint-ink); --accent-text: #fff; }
  .class-card.found { --accent: var(--purple-deep); --accent-text: #fff; }

  .flip {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.75s cubic-bezier(0.5, 0, 0.1, 1);
  }
  .class-card:hover .flip,
  .class-card:focus-within .flip,
  .class-card.flipped .flip {
    transform: rotateY(180deg);
  }

  .face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(14,13,11,0.06);
    transition: box-shadow 0.3s ease;
  }
  .class-card:hover .face,
  .class-card.flipped .face {
    box-shadow: 0 22px 44px rgba(14,13,11,0.14);
  }

  .face.front {
    background: #fff;
    display: flex; flex-direction: column;
  }
  .face.back {
    position: absolute;
    inset: 0;
    background: var(--accent);
    color: var(--accent-text);
    transform: rotateY(180deg);
    padding: 32px 28px;
    display: flex; flex-direction: column;
    gap: 14px;
  }

  .class-card .img {
    aspect-ratio: 5/3;
    background-size: cover;
    background-position: center;
    position: relative;
  }
  .class-card .img::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(14,13,11,0.10) 100%);
  }
  .face.front .body { padding: 28px 28px 32px; }
  .class-card .cat {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
  }
  .class-card .cat::before {
    content: ''; width: 8px; height: 8px;
    border-radius: 50%; background: var(--accent);
  }
  .class-card h3 {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
    color: var(--ink);
    line-height: 1.1;
  }
  .class-card .hint {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent);
    margin-top: 4px;
  }
  .class-card .hint .arrow { letter-spacing: 0; transition: transform 0.2s ease; }
  .class-card:hover .hint .arrow { transform: translateX(3px); }

  .face.back .cat-back {
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    opacity: 0.7;
  }
  .face.back .count {
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.025em;
  }
  .face.back ul {
    list-style: none; padding: 0; margin: 4px 0 0;
    display: flex; flex-direction: column; gap: 12px;
    flex: 1;
  }
  .face.back li {
    font-size: 13px; line-height: 1.45;
  }
  .face.back li strong {
    display: block;
    font-weight: 800;
    letter-spacing: -0.005em;
    font-size: 14px;
    margin-bottom: 2px;
  }
  .face.back li span {
    opacity: 0.78;
    font-weight: 500;
  }

  @media (max-width: 720px) {
    .classes { padding: 90px 0; }
    .classes-head { margin-bottom: 56px; }
    .class-grid { grid-template-columns: 1fr; gap: 22px; }
    .face.back { padding: 26px 22px; }
  }

  /* PRICE ANCHOR — section 7 */
  .price-anchor {
    position: relative;
    padding: 140px 0;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
  }
  .price-anchor-bg {
    position: absolute; inset: 0;
    background: url('images/f.webp') center/cover no-repeat;
    background-attachment: fixed;
    z-index: -3;
    filter: brightness(1.10) saturate(1.10);
  }
  @media (max-width: 720px) {
    .price-anchor-bg { background-attachment: scroll; }
  }
  .price-anchor-overlay {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at center, transparent 0%, transparent 45%, rgba(14,13,11,0.42) 100%),
      linear-gradient(180deg, rgba(14,13,11,0.55) 0%, rgba(14,13,11,0.42) 50%, rgba(14,13,11,0.65) 100%);
    z-index: -2;
  }
  .price-anchor-dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 0.8px, transparent 1px);
    background-size: 16px 16px;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
    opacity: 0.5;
  }
  .price-anchor .wrap { position: relative; z-index: 2; }

  .anchor-eyebrow {
    text-align: center;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: 22px;
  }
  .anchor-headline {
    text-align: center;
    font-size: clamp(36px, 5.6vw, 72px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.02;
    color: #fff;
    max-width: 22ch;
    margin: 0 auto 80px;
    text-shadow:
      0 4px 24px rgba(0,0,0,0.40),
      0 2px 8px rgba(0,0,0,0.28);
  }
  .anchor-headline .accent { color: var(--yellow); }
  .anchor-grid {
    display: grid;
    grid-template-columns: 0.7fr 1fr;
    gap: 24px;
    max-width: 920px;
    margin: 0 auto 48px;
    align-items: center;
  }
  .anchor-card {
    border-radius: 14px;
    text-align: center;
    display: flex; flex-direction: column; gap: 14px;
    align-items: center;
    position: relative;
  }
  .anchor-card.muted {
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255,255,255,0.65);
    padding: 36px 24px;
    border: 1px solid rgba(255,255,255,0.15);
  }
  .anchor-card.highlight {
    background: var(--yellow);
    color: var(--ink);
    padding: 56px 40px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.40), 0 0 0 1px rgba(250,215,50,0.5);
  }
  .anchor-card.highlight::before {
    content: 'INTRO OFFER';
    position: absolute;
    top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--coral);
    color: #fff;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.18em;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(232,82,94,0.32);
  }
  .anchor-card .label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .anchor-card.muted .label { color: rgba(255,255,255,0.55); }
  .anchor-card.highlight .label { color: rgba(14,13,11,0.65); }
  .anchor-card .price {
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.92;
    color: var(--ink);
  }
  .anchor-card.highlight .price {
    font-size: clamp(80px, 12vw, 156px);
  }
  .anchor-card.muted .price {
    color: rgba(255,255,255,0.55);
    font-size: clamp(48px, 7vw, 88px);
    position: relative;
  }
  .anchor-card.muted .price::after {
    content: '';
    position: absolute;
    left: -8%; right: -8%;
    top: 52%;
    height: 4px;
    background: rgba(255,255,255,0.55);
    transform: rotate(-6deg);
    border-radius: 3px;
  }
  .anchor-card .sub {
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
  }
  .anchor-card.muted .sub { color: rgba(255,255,255,0.55); }
  .anchor-card.highlight .sub { color: rgba(14,13,11,0.7); }

  .anchor-explainer {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
    color: rgba(255,255,255,0.95);
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.5;
    text-shadow: 0 2px 12px rgba(0,0,0,0.40);
  }
  .anchor-explainer strong { color: #fff; font-weight: 700; }

  .anchor-cta-row {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; flex-wrap: wrap;
  }
  @media (max-width: 720px) {
    .price-anchor { padding: 90px 0; }
    .anchor-headline { margin-bottom: 56px; }
    .anchor-grid { grid-template-columns: 1fr; gap: 36px; max-width: 380px; }
    .anchor-card { padding: 44px 28px; }
  }

  /* TIMETABLE — section 8 */
  .timetable {
    background: #FFFFFF;
    padding: 130px 0;
  }
  .tt-head {
    text-align: center;
    max-width: 1080px;
    margin: 0 auto 40px;
  }
  .tt-head .eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 22px;
  }
  .tt-head h1, .tt-head h2 {
    font-size: clamp(36px, 5.4vw, 68px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 18px;
  }
  .tt-head h1 .accent, .tt-head h2 .accent { color: var(--coral); }
  .tt-head p {
    font-size: 17px;
    color: var(--ink-soft);
    max-width: 50ch;
    margin: 0 auto;
  }
  .tt-legend {
    display: flex; align-items: center; justify-content: center;
    gap: 28px; flex-wrap: wrap;
    margin: 0 auto 56px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .tt-legend span {
    display: inline-flex; align-items: center; gap: 8px;
  }
  .tt-legend .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--c);
  }
  .tt-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
    max-width: 1300px;
    margin: 0 auto;
  }
  @media (max-width: 1100px) { .tt-grid { grid-template-columns: repeat(4, 1fr); } }

  /* Mobile: single-day carousel with day pills above */
  .tt-pills { display: none; }
  @media (max-width: 720px) {
    .tt-pills {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 5px;
      padding: 0 0 22px;
      margin: 0;
    }
    .tt-pill {
      padding: 9px 1px;
      border-radius: 999px;
      background: var(--paper-2);
      border: 1px solid rgba(14,13,11,0.10);
      font-size: 10px; font-weight: 800;
      letter-spacing: 0.01em; text-transform: uppercase;
      color: var(--ink-soft);
      cursor: pointer;
      text-align: center;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      line-height: 1;
    }
    .tt-pill.active {
      background: var(--coral);
      color: #fff;
      border-color: var(--coral);
    }
    .tt-grid {
      display: flex;
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x proximity; touch-action: pan-x; overscroll-behavior-x: contain; overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      gap: 16px;
      padding: 0 24px 8px;
      margin: 0 -24px;
      scrollbar-width: none;
    }
    .tt-grid::-webkit-scrollbar { display: none; }
    .day {
      flex: 0 0 calc(100% - 64px);
      scroll-snap-align: center;
      min-width: 240px;
    }
  }

  .day {
    background: var(--paper);
    border: 1px solid rgba(14,13,11,0.06);
    border-radius: 12px;
    padding: 22px 18px 26px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .day:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(14,13,11,0.08);
    border-color: rgba(14,13,11,0.1);
  }
  .day.weekend {
    background: var(--mint-bg);
    border-color: transparent;
  }
  .day-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(14,13,11,0.10);
  }
  .day-head h3 {
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 900;
    letter-spacing: -0.025em;
    color: var(--ink);
    text-transform: uppercase;
  }
  .day-head .count {
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--coral);
  }
  .day-classes {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
  }
  .day-classes li {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 4px 0;
  }
  .day-classes li::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c, var(--ink));
    transform: translateY(2px);
  }
  .day-classes .meta { display: flex; flex-direction: column; gap: 2px; }
  .day-classes .time {
    font-size: 11px;
    color: var(--ink-soft);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
  }
  .day-classes .name {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1.2;
  }

  .cls-flow { --c: var(--coral); }
  .cls-sweat { --c: var(--yellow-deep); }
  .cls-calm { --c: var(--mint-ink); }
  .cls-found { --c: var(--purple-deep); }

  /* HOW IT WORKS — section 9 */
  .how {
    background: var(--yellow);
    padding: 130px 0;
    position: relative;
  }
  .how-head {
    background: #fff;
    padding: 48px 56px;
    border-radius: 14px;
    text-align: center;
    max-width: 1080px;
    margin: 0 auto 80px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    position: relative;
    z-index: 3;
  }
  .how-head h2 { max-width: none; }
  .how-head .eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 22px;
  }
  .how-head h2 {
    font-size: clamp(36px, 5.4vw, 68px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.02;
    color: var(--ink);
    margin: 0 auto;
    max-width: 18ch;
  }
  .how-head h2 .accent { color: var(--coral); }
  .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .step {
    position: relative;
  }
  .step .num {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 78px; height: 78px;
    background: var(--coral);
    color: #fff;
    border-radius: 16px;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 0.01em;
    margin-bottom: 28px;
    box-shadow: 0 12px 28px rgba(232,82,94,0.32);
  }
  .step h3 {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 12px;
    color: var(--ink);
    line-height: 1.15;
  }
  .step p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
    max-width: 26ch;
  }
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 30px;
    right: -27px;
    width: 18px; height: 18px;
    border-top: 2.5px solid rgba(14,13,11,0.40);
    border-right: 2.5px solid rgba(14,13,11,0.40);
    transform: rotate(45deg);
  }
  @media (max-width: 900px) {
    .how { padding: 90px 0; }
    .how-head { margin-bottom: 64px; }
    .steps { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
    .step:not(:last-child)::after { display: none; }
  }
  @media (max-width: 480px) {
    .steps { gap: 36px 20px; }
    .step .num { width: 60px; height: 60px; font-size: 24px; margin-bottom: 18px; border-radius: 14px; }
    .step h3 { font-size: 17px; margin-bottom: 8px; }
    .step p { font-size: 13px; }
  }

  /* FAQ — section 10 */
  .faq {
    background: #FFFFFF;
    padding: 130px 0;
  }
  .faq-head {
    text-align: center;
    max-width: 1080px;
    margin: 0 auto 72px;
  }
  .faq-head .eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 22px;
  }
  .faq-head h1, .faq-head h2 {
    font-size: clamp(36px, 5.4vw, 68px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ink);
  }
  .faq-head h1 .accent, .faq-head h2 .accent { color: var(--coral); }

  .faq-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    max-width: 1280px;
    margin: 0 auto;
  }
  @media (max-width: 1100px) { .faq-grid { grid-template-columns: repeat(2, 1fr); } }

  .faq-card {
    --accent: var(--coral);
    --accent-text: #fff;
    perspective: 1600px;
    cursor: pointer;
  }
  .faq-card.coral { --accent: var(--coral); --accent-text: #fff; }
  .faq-card.yellow { --accent: var(--yellow); --accent-text: var(--ink); }
  .faq-card.mint { --accent: var(--mint-ink); --accent-text: #fff; }
  .faq-card.purple { --accent: var(--purple-deep); --accent-text: #fff; }

  .faq-card .flip {
    position: relative;
    aspect-ratio: 4/5;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.5, 0, 0.1, 1);
  }
  .faq-card:hover .flip,
  .faq-card:focus-within .flip,
  .faq-card.flipped .flip {
    transform: rotateY(180deg);
  }
  .faq-card .face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(14,13,11,0.08);
    transition: box-shadow 0.3s ease;
  }
  .faq-card:hover .face,
  .faq-card.flipped .face {
    box-shadow: 0 22px 44px rgba(14,13,11,0.16);
  }

  .faq-card .face.front {
    background-size: cover;
    background-position: center;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .faq-card .face.front::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,13,11,0.10) 30%, rgba(14,13,11,0.78) 100%);
  }
  .faq-card .face.front .content {
    position: relative; z-index: 2;
    padding: 24px 22px 26px;
    color: #fff;
  }
  .faq-card .face.front .num {
    display: inline-block;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    margin-bottom: 14px;
    color: rgba(255,255,255,0.78);
  }
  .faq-card .face.front h3 {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.22;
    color: #fff;
    margin: 0;
  }
  .faq-card .face.front .hint {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent);
  }
  .faq-card.yellow .face.front .hint { color: var(--yellow); }
  .faq-card .face.front .hint .arrow { letter-spacing: 0; }

  .faq-card .face.back {
    background: var(--accent);
    color: var(--accent-text);
    transform: rotateY(180deg);
    padding: 28px 24px;
    display: flex; flex-direction: column;
    gap: 14px;
  }
  .faq-card .face.back .num-back {
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    opacity: 0.7;
  }
  .faq-card .face.back h4 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 0;
  }
  .faq-card .face.back p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
  }

  /* Mobile: compact horizontal accordion cards (placed AFTER desktop rules so it overrides) */
  @media (max-width: 720px) {
    .faq-grid {
      grid-template-columns: 1fr;
      gap: 10px;
      max-width: 560px;
    }
    .faq-card { perspective: none; }
    .faq-card .flip {
      aspect-ratio: auto !important;
      transform: none !important;
      transform-style: flat !important;
      transition: none !important;
      position: relative;
    }
    .faq-card:hover .flip,
  .faq-card:focus-within .flip,
    .faq-card.flipped .flip { transform: none !important; }
    .faq-card .face {
      position: static !important;
      inset: auto !important;
      border-radius: 12px !important;
      box-shadow: none !important;
      backface-visibility: visible !important;
      -webkit-backface-visibility: visible !important;
      overflow: visible !important;
      transition: none !important;
    }
    .faq-card:hover .face,
    .faq-card.flipped .face { box-shadow: none !important; }
    .faq-card .face.front {
      background-image: none !important;
      background: #fff !important;
      border: 1px solid rgba(14,13,11,0.10);
      padding: 14px 16px !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 14px;
      min-height: 64px;
    }
    .faq-card .face.front::before { display: none !important; }
    .faq-card .face.front .content {
      position: relative !important;
      z-index: 1 !important;
      padding: 0 !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 14px;
      flex: 1 1 auto;
      color: var(--ink);
    }
    .faq-card .face.front .num {
      display: inline-flex !important;
      flex: 0 0 32px;
      width: 32px; height: 32px;
      background: var(--accent);
      color: var(--accent-text);
      border-radius: 50% !important;
      align-items: center; justify-content: center;
      font-size: 10px;
      letter-spacing: 0.04em;
      margin: 0 !important;
      line-height: 1;
    }
    .faq-card.yellow .face.front .num { color: var(--ink); }
    .faq-card .face.front h3 {
      font-size: 14px !important;
      color: var(--ink) !important;
      margin: 0 !important;
      flex: 1 1 auto;
      font-weight: 700;
      letter-spacing: -0.015em;
      line-height: 1.3;
      text-shadow: none;
    }
    .faq-card .face.front .hint { display: none !important; }
    .faq-card .face.front::after {
      content: '+';
      flex: 0 0 auto;
      width: 24px;
      text-align: center;
      font-size: 24px;
      color: var(--ink-soft);
      font-weight: 300;
      line-height: 1;
      transition: transform 0.2s ease;
      align-self: center;
    }
    .faq-card.flipped .face.front::after { transform: rotate(45deg); }
    .faq-card .face.back {
      transform: none !important;
      background: transparent !important;
      color: var(--ink-soft) !important;
      padding: 0 16px 14px 62px !important;
      display: none !important;
      flex-direction: column;
      gap: 0;
    }
    .faq-card.flipped .face.back { display: block !important; }
    .faq-card .face.back .num-back { display: none !important; }
    .faq-card .face.back p {
      font-size: 14px;
      line-height: 1.5;
      color: var(--ink-soft) !important;
      margin: 0;
    }
  }

  .view-more {
    text-align: center;
    margin-top: 40px;
  }
  .view-more a {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--coral);
    border-bottom: 1.5px solid var(--coral);
    padding-bottom: 4px;
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .view-more a:hover { color: var(--coral-deep); border-color: var(--coral-deep); }
  .view-more a .arrow { letter-spacing: 0; }

  /* SOCIAL PROOF — bottom-of-page reinforcement */
  .proof {
    background: var(--coral);
    padding: 130px 0 110px;
    color: #fff;
    overflow: hidden;
    position: relative;
  }
  .proof-head {
    background: #fff;
    padding: 44px 56px;
    border-radius: 14px;
    text-align: center;
    max-width: 1080px;
    margin: 0 auto 64px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    position: relative;
    z-index: 3;
  }
  .proof-head h2 { max-width: none; }
  .proof-head .eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 20px;
  }
  .proof-head h2 {
    font-size: clamp(36px, 5.4vw, 60px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ink);
    margin: 0 auto;
    max-width: 18ch;
  }
  .proof-head h2 .accent { color: var(--coral); }

  .proof-track-wrap {
    position: relative;
    overflow: hidden;
    padding: 4px 0;
  }
  .proof-grid {
    display: flex;
    gap: 18px;
    transition: transform 0.55s cubic-bezier(0.5, 0, 0.1, 1);
  }
  .proof-card {
    flex: 0 0 calc((100% - 36px) / 3);
  }
  @media (max-width: 900px) {
    .proof-card { flex: 0 0 calc((100% - 18px) / 2); }
  }
  @media (max-width: 600px) {
    .proof-card { flex: 0 0 100%; }
  }
  .proof-controls {
    display: flex; align-items: center; justify-content: center;
    gap: 28px;
    margin-top: 56px;
  }
  .proof-card {
    background: #fff;
    border-radius: 14px;
    padding: 32px 28px 28px;
    display: flex; flex-direction: column; gap: 18px;
    box-shadow: 0 6px 20px rgba(14,13,11,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .proof-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(14,13,11,0.10);
  }
  .proof-card .stars {
    color: #FBBC04;
    letter-spacing: 3px;
    font-size: 16px;
  }
  .proof-card blockquote {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
  }
  .proof-card cite {
    font-style: normal;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: auto;
  }
  .proof-card cite strong { color: var(--ink); font-weight: 800; }
  .proof-card cite .pip {
    display: inline-block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--mint-ink);
    margin: 0 8px;
    vertical-align: middle;
  }

  /* FINAL CTA — section 11 */
  .final-cta {
    background: var(--ink);
    color: #fff;
    padding: 160px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .final-bg {
    position: absolute; inset: 0;
    background: url('images/4.webp') center/cover no-repeat;
    background-attachment: fixed;
    z-index: -3;
    filter: brightness(1.10) saturate(1.10);
  }
  @media (max-width: 720px) {
    .final-bg { background-attachment: scroll; }
  }
  .final-overlay {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at center, transparent 0%, transparent 45%, rgba(14,13,11,0.42) 100%),
      linear-gradient(180deg, rgba(14,13,11,0.40) 0%, rgba(14,13,11,0.30) 40%, rgba(14,13,11,0.55) 100%);
    z-index: -2;
  }
  .final-dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 0.8px, transparent 1px);
    background-size: 16px 16px;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
    opacity: 0.5;
  }
  .final-cta .wrap { position: relative; z-index: 2; }
  .final-cta .eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    margin-bottom: 28px;
  }
  .final-cta h2 {
    font-size: clamp(48px, 8vw, 124px);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.92;
    color: #fff;
    margin: 0 auto 32px;
    max-width: 14ch;
    text-shadow:
      0 4px 28px rgba(0,0,0,0.45),
      0 2px 10px rgba(0,0,0,0.30),
      0 1px 2px rgba(0,0,0,0.20);
  }
  .final-cta h2 .accent { color: var(--yellow); }
  .final-cta .sub {
    font-size: clamp(17px, 1.5vw, 21px);
    color: rgba(255,255,255,0.95);
    max-width: 50ch;
    margin: 0 auto 48px;
    line-height: 1.5;
    font-weight: 500;
    text-shadow: 0 2px 12px rgba(0,0,0,0.40);
  }
  .btn-final {
    background: var(--yellow);
    color: var(--ink);
    padding: 22px 38px;
    font-size: 14px;
    letter-spacing: 0.18em;
    box-shadow:
      0 16px 40px rgba(0,0,0,0.20),
      inset 0 1px 0 rgba(255,255,255,0.30);
  }
  .btn-final:hover {
    background: var(--yellow-deep);
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.30);
  }
  .final-google {
    position: relative !important;
    bottom: auto !important; right: auto !important; transform: none !important;
    margin: 0 auto 32px;
  }

  @media (max-width: 720px) {
    .final-cta { padding: 100px 0; }
    .final-cta h2 { margin-bottom: 24px; }
    .final-cta .sub { margin-bottom: 36px; }
    .final-google { margin-bottom: 24px; }
  }

  /* FOOTER */
  .site-footer {
    background: #fff;
    color: var(--ink-soft);
    padding: 80px 0 32px;
    font-size: 14px;
    border-top: 1px solid var(--line);
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
    margin-bottom: 56px;
    align-items: stretch;
  }
  .footer-info {
    display: flex; flex-direction: column; gap: 40px;
  }
  .footer-brand img {
    height: 124px; width: auto;
    margin-bottom: 18px;
    filter: brightness(0);
  }
  .footer-brand p {
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.55;
    max-width: 32ch;
    margin: 0;
  }
  .footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer-col h5 {
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 16px;
  }
  .footer-col ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
  }
  .footer-col li {
    font-size: 14px;
    color: var(--ink-2);
  }
  .footer-col a {
    color: var(--ink-2);
    transition: color 0.2s ease;
  }
  .footer-col a:hover { color: var(--coral); }

  .brand-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .brand-row p { margin: 0; }
  @media (max-width: 720px) {
    .brand-row { grid-template-columns: 1fr; gap: 20px; }
  }
  .footer-social {
    display: flex; gap: 10px;
  }
  .footer-social a {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .footer-social a:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.30);
  }
  .footer-social svg { width: 18px; height: 18px; }
  .footer-social .ig {
    background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
  }
  .footer-social .fb {
    background: #1877F2;
  }
  .footer-social .tt {
    background: #010101;
  }

  .footer-map {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 320px;
    background: var(--paper-2);
    box-shadow: 0 12px 32px rgba(14,13,11,0.12);
  }
  .footer-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .footer-map .marker-pill {
    position: absolute;
    bottom: 18px; right: 18px;
    background: var(--coral);
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 8px 20px rgba(232,82,94,0.40);
    z-index: 2;
  }
  .footer-map .marker-pill svg { width: 12px; height: 12px; }

  @media (max-width: 820px) {
    .footer-top { grid-template-columns: 1fr; gap: 40px; }
    .site-footer { padding: 60px 0 28px; }
  }
  @media (max-width: 480px) {
    .footer-cols { grid-template-columns: 1fr; gap: 32px; }
    .footer-map { min-height: 240px; }
  }

  .footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: 24px;
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    font-size: 12px;
    color: var(--muted);
  }
  .footer-bottom a { color: var(--ink-soft); }
  .footer-bottom a:hover { color: var(--coral); }

  /* Subtle diagonal hairline texture for solid colour backdrops */
  .welcome::before,
  .how::before,
  .proof::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 22px,
      var(--tex) 22px,
      var(--tex) 23px
    );
    pointer-events: none;
    z-index: 1;
  }
  .welcome, .proof { --tex: rgba(255,255,255,0.045); }
  .how { --tex: rgba(14,13,11,0.035); }
  .welcome .wrap, .pass .wrap, .how .wrap, .proof .wrap { position: relative; z-index: 2; }


  /* ============================================================
     MULTI-PAGE ADDITIONS — site nav, pricing, events, stubs
     ============================================================ */

  /* ---- Site nav (fixed, white-on-dark, solid on scroll) ---- */
  .site-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border-bottom: 1px solid transparent;
  }
  .site-nav .nav-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 20px 48px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    transition: padding 0.3s ease;
  }
  .site-nav { overflow: visible; }
  .site-nav .nav-logo { position: relative; z-index: 5; line-height: 0; }
  .site-nav .nav-logo img { height: 52px; width: auto; transition: height 0.3s ease; }
  .site-nav.scrolled, body.nav-solid .site-nav {
    background: rgba(14,13,11,0.94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.28);
    border-bottom-color: rgba(255,255,255,0.08);
  }
  .site-nav.scrolled .nav-inner, body.nav-solid .site-nav .nav-inner { padding-top: 12px; padding-bottom: 12px; }
  .site-nav.scrolled .nav-logo img, body.nav-solid .site-nav .nav-logo img { height: 44px; }
  /* Home: hide small nav logo at top (big logo shown in hero); show once scrolled */
  body.home .site-nav:not(.scrolled) .nav-logo { opacity: 0; pointer-events: none; }

  .nav-links { display: flex; align-items: center; gap: 34px; }
  .nav-links a {
    color: #fff; font-size: 13px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    transition: color 0.2s ease; text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  }
  .nav-links a:hover { color: var(--yellow); }
  .nav-links a.nav-cta {
    background: var(--coral); color: #fff;
    padding: 12px 20px; border-radius: 999px;
    letter-spacing: 0.08em; text-shadow: none;
    box-shadow: 0 8px 20px rgba(232,82,94,0.4);
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .nav-links a.nav-cta:hover { background: var(--coral-deep); color: #fff; transform: translateY(-1px); }
  .nav-links a[aria-current="page"] { color: var(--yellow); }

  .nav-toggle {
    display: none;
    background: none; border: 0; padding: 8px;
    flex-direction: column; gap: 5px; cursor: pointer; z-index: 95;
  }
  .nav-toggle span { width: 26px; height: 2.5px; background: #fff; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .nav-backdrop {
    position: fixed; inset: 0; z-index: 88;
    background: rgba(14,13,11,0.5);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  @media (max-width: 1024px) {
    .site-nav .nav-inner { padding: 12px 24px; }
    .site-nav .nav-logo img,
    .site-nav.scrolled .nav-logo img,
    body.nav-solid .site-nav .nav-logo img { height: 40px; margin-bottom: 0; }
    .nav-toggle { display: inline-flex; }
    .nav-links {
      position: fixed; top: 0; right: 0;
      height: 100vh; height: 100dvh;
      width: min(82vw, 360px);
      background: var(--ink);
      flex-direction: column; align-items: flex-start; justify-content: flex-start;
      gap: 4px; padding: 96px 40px 40px;
      overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
      box-shadow: none;
      z-index: 92;
    }
    /* shadow only when open, so it doesn't bleed onto the right edge when closed */
    body.nav-open .nav-links { transform: translateX(0); box-shadow: -20px 0 60px rgba(0,0,0,0.45); }
    .nav-links a {
      width: 100%; padding: 16px 0; font-size: 17px;
      letter-spacing: 0.04em; text-shadow: none;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .nav-links a.nav-cta {
      margin-top: 22px; border-bottom: 0;
      justify-content: center; text-align: center; padding: 15px 18px;
      font-size: 14px; letter-spacing: 0.04em;
    }
    body.nav-open { overflow: hidden; }
  }

  /* ---- Ways to practise / pricing preview ---- */
  .ways { background: #fff; padding: 130px 0; }
  .ways-head { text-align: center; max-width: 1080px; margin: 0 auto 72px; }
  .ways-head .eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--coral); margin-bottom: 22px;
  }
  .ways-head h1, .ways-head h2 {
    font-size: clamp(36px, 5.4vw, 64px); font-weight: 900;
    letter-spacing: -0.04em; line-height: 1.0; color: var(--ink); margin-bottom: 18px;
  }
  .ways-head h1 .accent, .ways-head h2 .accent { color: var(--coral); }
  .ways-head p { font-size: 17px; color: var(--ink-soft); max-width: 50ch; margin: 0 auto; }
  .ways-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    max-width: 1280px; margin: 0 auto; align-items: stretch;
  }
  @media (max-width: 1040px) { .ways-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 720px; } }
  @media (max-width: 560px) { .ways-grid { grid-template-columns: 1fr; max-width: 420px; } }
  .way-card {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
    padding: 34px 28px 30px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .way-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(14,13,11,0.14); }
  .way-card.featured { border-color: var(--coral); box-shadow: 0 18px 44px rgba(232,82,94,0.18); }
  .way-card .ribbon {
    position: absolute; top: -13px; left: 28px;
    background: var(--coral); color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 7px 14px; border-radius: 999px; box-shadow: 0 8px 18px rgba(232,82,94,0.4);
  }
  .way-card h3 {
    font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 6px;
  }
  .way-card .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint-text); margin-bottom: 18px; }
  .way-card .price { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
  .way-card .price .per { font-size: 14px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
  .way-card ul { list-style: none; padding: 0; margin: 22px 0 26px; display: flex; flex-direction: column; gap: 11px; }
  .way-card li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
  .way-card li::before {
    content: ''; position: absolute; left: 0; top: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--mint-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c8865' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
  }
  .way-card .way-cta {
    margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--coral); transition: gap 0.2s ease;
  }
  .way-card .way-cta:hover { gap: 12px; color: var(--coral-deep); }
  .way-card.featured .way-cta { color: var(--coral); }
  .ways-foot { text-align: center; margin-top: 56px; }
  @media (max-width: 720px) { .ways { padding: 90px 0; } .ways-head { margin-bottom: 56px; } }

  /* ---- Events / retreats teaser band ---- */
  .events-teaser {
    position: relative; overflow: hidden;
    background: var(--ink); color: #fff; padding: 130px 0;
  }
  .events-teaser .et-bg {
    position: absolute; inset: 0; z-index: 0;
    background: url('images/13.webp') center/cover no-repeat;
    opacity: 0.34;
  }
  .events-teaser::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(14,13,11,0.92) 0%, rgba(14,13,11,0.55) 100%);
  }
  .events-teaser .wrap { position: relative; z-index: 2; }
  .events-teaser .et-inner { max-width: 620px; }
  .events-teaser .eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--yellow); margin-bottom: 22px;
  }
  .events-teaser h2 {
    font-size: clamp(36px, 5.2vw, 60px); font-weight: 900;
    letter-spacing: -0.04em; line-height: 1.02; margin-bottom: 22px; color: #fff;
  }
  .events-teaser h2 .accent { color: var(--yellow); }
  .events-teaser p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.9); margin: 0 0 34px; max-width: 50ch; }
  @media (max-width: 720px) { .events-teaser { padding: 90px 0; } }

  /* ---- Stub / inner page hero ---- */
  .page-hero {
    position: relative; overflow: hidden;
    background: var(--purple); color: #fff;
    padding: 180px 0 96px; text-align: center;
  }
  .page-hero.alt { background: var(--ink); }
  .page-hero::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.10) 0.8px, transparent 1px);
    background-size: 16px 16px; opacity: 0.5; pointer-events: none;
  }
  .page-hero .wrap { position: relative; z-index: 2; }
  .page-hero .eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--yellow); margin-bottom: 22px;
  }
  .page-hero h1 {
    font-size: clamp(44px, 7vw, 84px); font-weight: 900;
    letter-spacing: -0.045em; line-height: 0.98; color: #fff; margin: 0 auto 22px; max-width: 16ch;
  }
  .page-hero h1 .accent { color: var(--yellow); }
  .page-hero p { font-size: clamp(17px, 1.6vw, 20px); color: rgba(255,255,255,0.92); max-width: 56ch; margin: 0 auto; line-height: 1.5; }
  @media (max-width: 720px) { .page-hero { padding: 140px 0 72px; } }

  /* ---- Generic prose / stub content + legal pages ---- */
  .page-body { background: #fff; padding: 96px 0; }
  .prose { max-width: 760px; margin: 0 auto; }
  .prose h2 {
    font-size: clamp(26px, 3.4vw, 38px); font-weight: 900; letter-spacing: -0.03em;
    color: var(--ink); margin: 56px 0 18px;
  }
  .prose h2:first-child { margin-top: 0; }
  .prose h3 { font-size: 20px; font-weight: 800; color: var(--ink); margin: 36px 0 12px; }
  .prose p, .prose li { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
  .prose p { margin: 0 0 18px; }
  .prose ul { padding-left: 22px; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
  .prose a { color: var(--coral); font-weight: 600; }
  .prose a:hover { color: var(--coral-deep); }
  .prose strong { color: var(--ink); }
  .placeholder-note {
    background: var(--mint-bg); border-left: 4px solid var(--mint-ink);
    border-radius: 10px; padding: 18px 22px; margin: 0 0 40px;
    font-size: 15px; color: var(--mint-text);
  }
  .placeholder-note strong { color: var(--mint-text); }
  .stub-cta { text-align: center; margin-top: 56px; }

  /* ============================================================
     PAGE IDENTITY SYSTEM — gives each inner page its own look
     (bold colour-blocking + oversized type, brand palette locked)
     ============================================================ */

  /* Theme tokens — each inner page sets ONE of these on <body> */
  body.theme-purple { --tcol: var(--purple);    --tcol-deep: var(--purple-deep); --ton: #fff;        --tsoft: rgba(255,255,255,0.88); }
  body.theme-coral  { --tcol: var(--coral);     --tcol-deep: var(--coral-deep);  --ton: #fff;        --tsoft: rgba(255,255,255,0.90); }
  body.theme-yellow { --tcol: var(--yellow);    --tcol-deep: var(--yellow-deep); --ton: var(--ink);  --tsoft: rgba(14,13,11,0.70); }
  body.theme-mint   { --tcol: var(--mint-ink);  --tcol-deep: var(--mint-text);   --ton: var(--ink);  --tsoft: rgba(14,13,11,0.70); }
  body.theme-ink    { --tcol: var(--ink);       --tcol-deep: #000;               --ton: #fff;        --tsoft: rgba(255,255,255,0.80); }
  body.theme-plum   { --tcol: var(--purple-deep); --tcol-deep: #4b4677;          --ton: #fff;        --tsoft: rgba(255,255,255,0.86); }

  /* ---- Identity hero: full-colour block, oversized headline ---- */
  .id-hero {
    position: relative; overflow: hidden;
    background: var(--tcol); color: var(--ton);
    padding: clamp(150px, 20vh, 210px) 0 clamp(80px, 12vh, 130px);
  }
  .id-hero .wrap { position: relative; z-index: 3; }
  .id-hero.center .wrap { text-align: center; }
  .id-hero .eyebrow {
    display: inline-block; font-size: 13px; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ton); opacity: 0.72; margin-bottom: 22px;
  }
  .id-hero h1 {
    font-size: clamp(44px, 8.5vw, 108px); font-weight: 900;
    letter-spacing: -0.045em; line-height: 0.9; margin: 0;
    max-width: 15ch; text-wrap: balance;
  }
  .id-hero.center h1 { margin-inline: auto; }
  .id-hero h1 .accent {
    color: var(--ton); position: relative; display: inline-block;
  }
  /* underline swash on the accent word, in a contrasting brand colour */
  .id-hero h1 .accent::after {
    content: ""; position: absolute; left: -2%; right: -2%; bottom: 0.06em;
    height: 0.16em; background: var(--swash, rgba(255,255,255,0.34));
    border-radius: 99px; z-index: -1;
  }
  .id-hero .lead {
    font-size: clamp(18px, 2vw, 23px); line-height: 1.5;
    color: var(--tsoft); max-width: 50ch; margin: 30px 0 0;
  }
  .id-hero.center .lead { margin-inline: auto; }
  .id-hero .hero-cta-row { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }
  .id-hero.center .hero-cta-row { justify-content: center; }
  /* big translucent decorative circles */
  .id-hero .orb { position: absolute; border-radius: 50%; z-index: 1; opacity: 0.5; pointer-events: none; }
  .id-hero .orb.a { width: 420px; height: 420px; top: -140px; right: -90px; background: rgba(255,255,255,0.12); }
  .id-hero .orb.b { width: 260px; height: 260px; bottom: -120px; left: -70px; background: rgba(255,255,255,0.10); }
  body.theme-yellow .id-hero .orb, body.theme-mint .id-hero .orb { background: rgba(14,13,11,0.06); }
  @media (max-width: 720px){ .id-hero .orb.a { width: 260px; height: 260px; } .id-hero .orb.b { display:none; } }

  /* rotated sticker badge — playful accent */
  .sticker {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ink); color: #fff; font-weight: 800;
    font-size: 13px; letter-spacing: 0.04em; padding: 9px 16px;
    border-radius: 99px; transform: rotate(-3deg);
  }
  body.theme-ink .sticker { background: var(--yellow); color: var(--ink); }

  /* ---- Marquee ticker strip ---- */
  .marquee {
    background: var(--ink); color: #fff; overflow: hidden;
    padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .marquee.on-color { background: var(--tcol); color: var(--ton); border-color: rgba(0,0,0,0.08); }
  .marquee-track { display: flex; gap: 0; white-space: nowrap; width: max-content; animation: marquee 32s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .marquee-track span {
    font-size: clamp(22px, 3vw, 34px); font-weight: 900; letter-spacing: -0.02em;
    padding: 0 28px; display: inline-flex; align-items: center; gap: 28px;
  }
  .marquee-track span::after { content: "✦"; font-size: 0.5em; opacity: 0.5; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

  /* ---- Editorial split (image + text, alternating) ---- */
  .split { background: #fff; padding: clamp(70px, 9vw, 120px) 0; }
  .split.tint { background: var(--paper-2, #e9eef1); }
  .split .split-grid {
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 6vw, 88px);
    align-items: center; max-width: 1180px; margin: 0 auto;
  }
  .split.reverse .split-grid { direction: rtl; }
  .split.reverse .split-grid > * { direction: ltr; }
  .split .split-text .eyebrow {
    display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--tcol-deep, var(--coral)); margin-bottom: 16px;
  }
  .split .split-text h2 {
    font-size: clamp(30px, 4.4vw, 52px); font-weight: 900; letter-spacing: -0.035em;
    line-height: 1.02; color: var(--ink); margin: 0 0 20px;
  }
  .split .split-text p { font-size: 17.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 18px; }
  .split .split-text .btn, .split .split-text .text-link { margin-top: 14px; }
  .split .split-media { position: relative; }
  .split .split-media img {
    width: 100%; height: 100%; max-height: 560px; object-fit: cover;
    border-radius: 26px; box-shadow: 0 30px 60px rgba(14,13,11,0.16);
  }
  .split .split-media .frame-tag {
    position: absolute; bottom: 18px; left: 18px; background: var(--tcol); color: var(--ton);
    font-weight: 800; font-size: 13px; padding: 9px 16px; border-radius: 99px;
  }
  @media (max-width: 880px){
    .split .split-grid { grid-template-columns: 1fr; }
    .split.reverse .split-grid { direction: ltr; }
    .split .split-media img { max-height: 380px; }
  }

  /* ---- Colour card grid (each card a brand colour) ---- */
  .cardband { background: #fff; padding: clamp(70px, 9vw, 116px) 0; }
  .cardband.dark { background: var(--ink); }
  .band-head { text-align: center; max-width: 720px; margin: 0 auto clamp(44px, 6vw, 72px); }
  .band-head .eyebrow { display:inline-block; font-size:12px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color: var(--tcol-deep, var(--coral)); margin-bottom:14px; }
  .band-head h1, .band-head h2 { font-size: clamp(30px, 5vw, 56px); font-weight:900; letter-spacing:-0.04em; line-height:1; color: var(--ink); margin:0 0 14px; }
  .cardband.dark .band-head h1, .cardband.dark .band-head h2 { color:#fff; }
  .band-head p { font-size: 17px; color: var(--ink-soft); margin: 0 auto; max-width: 52ch; }
  .cardband.dark .band-head p { color: rgba(255,255,255,0.7); }
  .cc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1180px; margin: 0 auto; }
  .cc-grid.four { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 980px){ .cc-grid, .cc-grid.four { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .cc-grid, .cc-grid.four { grid-template-columns: 1fr; } }
  .cc {
    border-radius: 22px; padding: 34px 28px 30px; color: var(--ink);
    position: relative; overflow: hidden; min-height: 220px;
    display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease;
  }
  .cc:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(14,13,11,0.16); }
  .cc.purple { background: var(--purple); color:#fff; }
  .cc.coral  { background: var(--coral);  color:#fff; }
  .cc.yellow { background: var(--yellow); }
  .cc.mint   { background: var(--mint-bg); }
  .cc.ink    { background: var(--ink-2);  color:#fff; }
  .cc .cc-num { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; opacity: 0.6; margin-bottom: auto; }
  .cc h3 { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; margin: 18px 0 10px; }
  .cc p { font-size: 14.5px; line-height: 1.55; margin: 0; opacity: 0.92; }
  .cc .cc-tag { align-self:flex-start; margin-bottom: 14px; font-size:12px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; padding:6px 12px; border-radius:99px; background: rgba(255,255,255,0.22); }
  .cc.yellow .cc-tag, .cc.mint .cc-tag { background: rgba(14,13,11,0.10); }

  /* ---- Stat band (big numbers on colour) ---- */
  .statband { background: var(--tcol); color: var(--ton); padding: clamp(56px, 7vw, 92px) 0; }
  .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; text-align: center; }
  @media (max-width: 720px){ .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; } }
  .stat .n { font-size: clamp(40px, 6vw, 72px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
  .stat .l { font-size: 14px; font-weight: 600; margin-top: 10px; opacity: 0.82; }

  /* ---- Accordion (FAQ) — native details, no JS ---- */
  .acc-wrap { max-width: 820px; margin: 0 auto; padding: clamp(60px,8vw,100px) 24px; }
  .acc { border-bottom: 1px solid var(--line); }
  .acc summary {
    list-style: none; cursor: pointer; padding: 26px 56px 26px 4px; position: relative;
    font-size: clamp(18px, 2.2vw, 23px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink);
  }
  .acc summary::-webkit-details-marker { display: none; }
  .acc summary::after {
    content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 30px; font-weight: 400; color: var(--tcol-deep, var(--coral)); transition: transform .25s ease;
    line-height: 1;
  }
  .acc[open] summary::after { content: "\2013"; }
  .acc .acc-body { padding: 0 56px 28px 4px; }
  .acc .acc-body p { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; }
  .acc[open] summary { color: var(--tcol-deep, var(--coral)); }

  /* ---- Themed closing CTA band ---- */
  .cta-band { background: var(--tcol); color: var(--ton); text-align: center; padding: clamp(72px, 10vw, 130px) 0; position: relative; overflow: hidden; }
  .cta-band .eyebrow { display:inline-block; font-size:12px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; opacity:0.72; margin-bottom:18px; }
  .cta-band h2 { font-size: clamp(34px, 6vw, 72px); font-weight: 900; letter-spacing: -0.04em; line-height: 0.98; margin: 0 0 18px; max-width: 16ch; margin-inline:auto; }
  .cta-band p { font-size: 18px; color: var(--tsoft); max-width: 46ch; margin: 0 auto 32px; }
  .cta-band .btn { background: var(--ink); }
  .cta-band .btn:hover { background: #000; }
  body.theme-ink .cta-band .btn { background: var(--coral); }

  /* text link helper */
  .text-link { display:inline-flex; align-items:center; gap:8px; font-weight:800; color: var(--tcol-deep, var(--coral)); }
  .text-link .arrow { transition: transform .2s ease; }
  .text-link:hover .arrow { transform: translateX(4px); }

  /* Membership tier note */
  .p6-note { text-align:center; font-size:14px; color: var(--ink-soft); margin: 36px auto 0; max-width: 60ch; }

  /* lists inside colour cards (classes page) */
  .cc ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
  .cc li { font-size: 14px; line-height: 1.35; opacity: 0.95; display: flex; flex-direction: column; }
  .cc li strong { font-weight: 800; }
  .cc li span { opacity: 0.72; font-size: 12.5px; }
  .cc.tall { min-height: 320px; }
  /* list cards: keep number, heading and list anchored to the top */
  .cc.tall .cc-num { margin-bottom: 16px; }

  /* simple two-up feature row (events) */
  .feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 1120px; margin: 0 auto; }
  @media (max-width: 760px){ .feat-grid { grid-template-columns: 1fr; } }
  .feat { border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 16px 40px rgba(14,13,11,0.10); border: 1px solid var(--line); display: flex; flex-direction: column; }
  .feat .feat-img { height: 230px; background-size: cover; background-position: center; position: relative; }
  .feat .feat-pill { position: absolute; top: 16px; left: 16px; background: var(--tcol); color: var(--ton); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 13px; border-radius: 99px; }
  .feat .feat-body { padding: 28px 26px 30px; flex: 1; display: flex; flex-direction: column; }
  .feat .feat-body h3 { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 10px; }
  .feat .feat-body p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 18px; }
  .feat .feat-body .text-link { margin-top: auto; }

  /* white wrapper so accordion is readable over the ink body background */
  .acc-section { background: #fff; }

  /* tinted timetable so it separates from white sections above/below */
  .timetable.tint { background: var(--paper-2, #e9eef1); padding: 100px 0 84px; }
  .timetable.tint + .ways { padding-top: 96px; }

  /* ---- Legal page hero: light, understated, thin colour rule ---- */
  .page-hero.legal {
    background: var(--paper-2, #e9eef1); padding: clamp(140px, 16vh, 180px) 0 56px; text-align: left;
  }
  .page-hero.legal::before { display: none; }
  .page-hero.legal .wrap { max-width: 760px; }
  .page-hero.legal .eyebrow { color: var(--lcol, var(--coral)); opacity: 1; }
  .page-hero.legal h1 { color: var(--ink); font-size: clamp(36px, 6vw, 60px); }
  .page-hero.legal h1 .accent { color: var(--lcol, var(--coral)); }
  .page-hero.legal h1 .accent::after { display: none; }
  .page-hero.legal .legal-rule { height: 5px; width: 72px; background: var(--lcol, var(--coral)); border-radius: 99px; margin-top: 26px; }
  .page-hero.legal p { color: var(--ink-soft); margin: 18px 0 0; max-width: 60ch; }

  /* ============================================================
     HOME SPLIT HERO — bold colour panel + full-bleed photo
     ============================================================ */
  .home-hero {
    position: relative; display: grid; grid-template-columns: 1.02fr 0.98fr;
    min-height: 92vh; background: var(--coral);
  }
  .home-hero .hh-panel {
    position: relative; z-index: 2; color: #fff;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(128px, 16vh, 184px) clamp(22px, 3vw, 52px) clamp(56px, 8vh, 92px);
    overflow: hidden;
  }
  .home-hero .hh-panel .orb { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.12); z-index: 0; pointer-events: none; }
  .home-hero .hh-panel .orb.a { width: 360px; height: 360px; top: -120px; right: -80px; }
  .home-hero .hh-panel .orb.b { width: 220px; height: 220px; bottom: -90px; left: -60px; opacity: 0.8; }
  .home-hero .hh-panel > .hh-inner { position: relative; z-index: 1; max-width: 800px; }
  .home-hero .loc-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.16); color: #fff; font-weight: 700;
    font-size: 13px; letter-spacing: 0.02em; padding: 8px 15px; border-radius: 99px;
  }
  .home-hero h1 {
    font-size: clamp(30px, 4.7vw, 60px); font-weight: 900; letter-spacing: -0.045em;
    line-height: 0.84; margin: 22px 0 0; white-space: nowrap;
  }
  .home-hero h1 .accent { position: relative; display: inline-block; color: #fff; white-space: nowrap; }
  .home-hero h1 .accent::after {
    content: ""; position: absolute; left: -2%; right: -2%; bottom: 0.04em;
    height: 0.16em; background: var(--yellow); border-radius: 99px; z-index: -1;
  }
  .home-hero .lead {
    font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5;
    color: rgba(255,255,255,0.94); margin: 26px 0 0; max-width: 46ch;
  }
  .home-hero .hero-cta-row { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .home-hero .btn { background: var(--ink); }
  .home-hero .btn:hover { background: #000; box-shadow: 0 16px 36px rgba(0,0,0,0.34); }
  .home-hero .hh-rating { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.95); }
  .home-hero .hh-rating .stars { color: #fff; letter-spacing: 1px; }
  .home-hero .hh-rating strong { font-weight: 800; }
  .home-hero .hh-photo { position: relative; background-size: cover; background-position: center 30%; }
  .home-hero .hh-photo::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,13,11,0.34), rgba(14,13,11,0) 28%);
  }
  @media (max-width: 900px) {
    .home-hero { grid-template-columns: 1fr; min-height: 0; }
    .home-hero .hh-photo { min-height: 300px; order: 2; }
    .home-hero .hh-panel { order: 1; padding-top: 116px; }
    .home-hero .hh-panel .orb.a { width: 240px; height: 240px; }
  }

  /* ---- Principles row (lighter than colour cards, for rhythm) ---- */
  .prow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 1180px; margin: 0 auto; }
  .prow .pitem { padding: 6px 30px; border-left: 1px solid var(--line); }
  .prow .pitem:first-child { border-left: none; padding-left: 0; }
  .prow .pn { font-size: 46px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
  .prow .pitem h3 { font-size: 19px; font-weight: 800; color: var(--ink); margin: 14px 0 8px; letter-spacing: -0.01em; }
  .prow .pitem p { font-size: 14.5px; line-height: 1.56; color: var(--ink-soft); margin: 0; }
  @media (max-width: 820px){
    .prow { grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
    .prow .pitem { padding: 6px 26px; }
    .prow .pitem:nth-child(odd) { border-left: none; padding-left: 0; }
  }
  @media (max-width: 480px){ .prow { grid-template-columns: 1fr; } .prow .pitem, .prow .pitem:first-child { border-left: none; padding-left: 0; } }

  /* ---- Team grid (About) ---- */
  .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1120px; margin: 0 auto; }
  @media (max-width: 860px){ .team-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px){ .team-grid { grid-template-columns: 1fr; } }
  .tcard { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px 28px; transition: transform .2s ease, box-shadow .2s ease; }
  .tcard:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(14,13,11,0.12); }
  .tcard .avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 24px; color: #fff; margin-bottom: 16px; }
  .tcard h3 { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
  .tcard .role { font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tcol-deep, var(--purple-deep)); margin: 6px 0 12px; }
  .tcard p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }

  /* ---- Quote band (single testimonial) ---- */
  .quote-band { background: var(--tcol, var(--mint-ink)); color: var(--ton, var(--ink)); padding: clamp(64px, 9vw, 110px) 0; text-align: center; }
  .quote-band .wrap { max-width: 860px; }
  .quote-band .stars { font-size: 20px; letter-spacing: 3px; margin-bottom: 22px; }
  .quote-band blockquote { font-size: clamp(22px, 3vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; margin: 0 0 22px; text-wrap: balance; }
  .quote-band cite { font-style: normal; font-weight: 700; font-size: 15px; opacity: 0.8; }

  /* ============================================================
     HERO POLAROID CARD CAROUSEL — text 2/3, photo stack 1/3
     ============================================================ */
  .id-hero.has-cards .wrap {
    display: grid; grid-template-columns: 1.55fr 1fr;
    gap: clamp(28px, 5vw, 76px); align-items: center;
  }
  .id-hero.has-cards { padding-top: clamp(150px, 18vh, 200px); padding-bottom: clamp(72px, 10vh, 116px); }
  .id-hero.has-cards .hero-text { min-width: 0; }
  .id-hero.has-cards h1 { font-size: clamp(40px, 6vw, 78px); }
  .id-hero.has-cards .lead { max-width: 44ch; }

  .hero-cards {
    position: relative; height: clamp(308px, 25vw, 368px);
    cursor: pointer; -webkit-user-select: none; user-select: none;
  }
  .hero-cards .polaroid {
    position: absolute; top: 0; left: 50%; width: clamp(220px, 70vw, 286px);
    background: #fff; padding: 11px 11px 40px; border-radius: 11px;
    box-shadow: 0 8px 20px rgba(14,13,11,0.14);
    transform: translateX(-50%); transform-origin: center; will-change: transform;
    transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1), opacity 0.4s ease;
  }
  .hero-cards .polaroid img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    border-radius: 4px; display: block;
  }
  .hero-cards .polaroid .cap {
    position: absolute; left: 11px; right: 11px; bottom: 13px; text-align: center;
    font-size: 13.5px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.01em;
  }
  .hero-cards .hint {
    position: absolute; bottom: -2px; right: 4px; z-index: 60;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--ink); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(14,13,11,0.22); pointer-events: none;
  }
  body.theme-ink .hero-cards .hint { background: var(--yellow); color: var(--ink); }
  @media (max-width: 880px) {
    .id-hero.has-cards .wrap { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .id-hero.has-cards .hero-text { text-align: center; }
    .id-hero.has-cards .hero-text h1 {
      font-size: clamp(34px, 8.5vw, 50px);
      max-width: 100%; width: 100%; margin-left: auto; margin-right: auto; text-align: center;
    }
    .id-hero.has-cards .lead { margin-left: auto; margin-right: auto; }
    .hero-cards { height: 356px; margin: 0 auto; }
    .hero-cards .polaroid { width: clamp(210px, 64vw, 262px); }
  }

  /* ============================================================
     MARQUEE COLOURS + HEADER/SECTION DOT TEXTURE
     ============================================================ */
  .marquee.mq-coral  { background: var(--coral);    color: #fff;       border-color: rgba(0,0,0,0.08); }
  .marquee.mq-purple { background: var(--purple);   color: #fff;       border-color: rgba(0,0,0,0.08); }
  .marquee.mq-yellow { background: var(--yellow);   color: var(--ink); border-color: rgba(0,0,0,0.10); }
  .marquee.mq-mint   { background: var(--mint-ink); color: var(--ink); border-color: rgba(0,0,0,0.10); }

  /* subtle dot pattern on solid-colour sections */
  .id-hero, .statband, .cta-band, .quote-band { position: relative; }
  .id-hero::after,
  .statband::before,
  .cta-band::before,
  .quote-band::before,
  .home-hero .hh-panel::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(currentColor 1.3px, transparent 1.5px);
    background-size: 20px 20px;
    color: var(--ton, #fff); opacity: 0.09;
  }
  .id-hero::after { z-index: 1; }
  .statband::before, .cta-band::before, .quote-band::before { z-index: 0; }
  .statband .wrap, .cta-band .wrap, .quote-band .wrap { position: relative; z-index: 1; }
  .home-hero .hh-panel::after { z-index: 0; }

  .cardband.tint { background: var(--paper-2, #e9eef1); }

  /* ---- Stat band: dark section with little yellow cards ---- */
  .statband { background: var(--ink); color: #fff; }
  .statband::before { color: #fff; opacity: 0.06; }
  .statband .stat-grid { gap: 18px; }
  .statband .stat {
    background: var(--yellow); color: var(--ink);
    border-radius: 18px; padding: 28px 16px 22px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.22);
  }
  .statband .stat .n { color: var(--ink); }
  .statband .stat .l { color: rgba(14,13,11,0.72); opacity: 1; }

  /* Home hero: big left-aligned wordmark above the headline */
  .home-hero .hero-logo { display: block; margin: 0 0 26px; line-height: 0; }
  .home-hero .hero-logo img { height: 76px; width: auto; max-width: 100%; display: block; }
  @media (max-width: 900px) { .home-hero .hero-logo img { height: 58px; } }

  /* ---- Prominent infrared USP band (classes) ---- */
  .split.usp-heat { position: relative; overflow: hidden; background: var(--coral); }
  .split.usp-heat::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(#fff 1.3px, transparent 1.5px);
    background-size: 20px 20px; opacity: 0.10;
  }
  .split.usp-heat .wrap { position: relative; z-index: 1; }
  .split.usp-heat .split-text h2 { color: #fff; font-size: clamp(34px, 5vw, 60px); }
  .split.usp-heat .split-text h2 .accent { position: relative; display: inline-block; color: #fff; }
  .split.usp-heat .split-text h2 .accent::after {
    content: ""; position: absolute; left: -2%; right: -2%; bottom: 0.04em;
    height: 0.16em; background: var(--swash, var(--yellow)); border-radius: 99px; z-index: -1;
  }
  .split.usp-heat .split-text p { color: rgba(255,255,255,0.94); font-size: 18px; }
  .split.usp-heat .btn { background: var(--ink); }
  .split.usp-heat .btn:hover { background: #000; }
  .split.usp-heat .split-media .frame-tag { background: var(--ink); color: #fff; }

  /* ============================================================
     CONTACT PAGE
     ============================================================ */
  .contact-sec { background: #fff; padding: clamp(64px, 9vw, 110px) 0; }
  .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 72px); max-width: 1120px; margin: 0 auto; align-items: start; }
  @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
  .contact-form { display: flex; flex-direction: column; gap: 18px; }
  .contact-form .field { display: flex; flex-direction: column; gap: 7px; }
  .contact-form label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
  .contact-form input, .contact-form textarea, .contact-form select {
    font: inherit; font-size: 16px; padding: 14px 16px; border: 1.5px solid var(--line);
    border-radius: 12px; background: #fff; color: var(--ink); width: 100%;
  }
  .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
    outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-soft);
  }
  .contact-form textarea { min-height: 150px; resize: vertical; }
  .contact-form .btn { align-self: flex-start; border: none; margin-top: 4px; }
  .contact-form .form-note { font-size: 13px; color: var(--ink-soft); margin: 0; }
  .contact-aside { background: var(--paper-2, #e9eef1); border-radius: 22px; padding: 32px 30px; }
  .contact-aside h3 { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral); margin: 0 0 12px; }
  .contact-aside h3:not(:first-child) { margin-top: 26px; }
  .contact-aside ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
  .contact-aside li { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
  .contact-aside a { color: var(--ink); font-weight: 600; }
  .contact-aside a:hover { color: var(--coral); }
  .contact-aside .map { display: block; border-radius: 14px; overflow: hidden; height: 220px; margin-top: 16px; border: 1px solid var(--line); }
  .contact-aside .map iframe { width: 100%; height: 100%; border: 0; display: block; }

  /* ============================================================
     v2 REFRESH — denim nav, white heroes, green intro ticker
     ============================================================ */
  :root {
    --denim: #49545a;        /* brand dark grey */
    --denim-deep: #3a4146;
    --green: var(--mint-ink);
    --green-deep: var(--mint-text);
  }

  /* --- Dark bars: muted denim instead of near-black --- */
  .sticky-cta-bar { background: var(--denim); }
  .site-nav.scrolled, body.nav-solid .site-nav {
    background: rgba(63,76,82,0.96);
    border-bottom-color: rgba(255,255,255,0.10);
  }
  .sticker { background: var(--denim); color: #fff; }
  body.theme-ink .sticker { background: var(--yellow); color: var(--ink); }

  /* --- Inner-page heroes: white with muted coloured dots --- */
  .id-hero { background: #fff; color: var(--ink); }
  .id-hero .eyebrow { color: var(--tcol); opacity: 1; }
  .id-hero h1, .id-hero h1 .accent { color: var(--ink); }
  .id-hero .lead { color: var(--ink-soft); }
  .id-hero::after { color: var(--tcol); opacity: 0.15; }
  .id-hero .orb { background: var(--tcol); opacity: 0.07; }
  body.theme-yellow .id-hero .orb, body.theme-mint .id-hero .orb { background: var(--tcol); opacity: 0.10; }

  /* polaroid images: thin purple border */
  .hero-cards .polaroid img { border: 2px solid var(--purple); }

  /* --- Intro-pass ticker: brand green, white text, clickable, slower --- */
  .marquee {
    display: block; background: var(--green); color: #fff;
    text-decoration: none; cursor: pointer;
    border-top: 1px solid rgba(255,255,255,0.16);
    border-bottom: 1px solid rgba(255,255,255,0.16);
    transition: background 0.25s ease;
  }
  .marquee:hover { background: var(--green-deep); }
  .marquee:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
  .marquee .marquee-track { animation-duration: 60s; }
  .marquee .marquee-track span::after { color: rgba(255,255,255,0.5); opacity: 1; }

  /* --- Home hero: white background, yellow dots, ink text --- */
  .home-hero { background: #fff; min-height: 84vh; }
  .home-hero .hh-panel { color: var(--ink); padding-top: clamp(104px, 12vh, 150px); }
  .home-hero .hh-panel::after { color: var(--yellow); opacity: 0.5; }
  .home-hero .hh-panel .orb { background: var(--yellow); opacity: 0.10; }
  .home-hero .loc-pill { background: var(--coral-soft); color: var(--coral-deep); }
  .home-hero h1, .home-hero h1 .accent { color: var(--ink); }
  .home-hero .lead { color: var(--ink-soft); }
  .home-hero .hh-rating { color: var(--ink-soft); }
  .home-hero .hh-rating .stars { color: var(--yellow-deep); }
  .home-hero .btn { background: var(--coral); }
  .home-hero .btn:hover { background: var(--coral-deep); box-shadow: 0 16px 36px rgba(232,82,94,0.40); }
  .home-hero .hero-logo { margin-bottom: 16px; }
  .home-hero .hero-logo img { height: 66px; }
  @media (max-width: 900px){ .home-hero .hero-logo img { height: 50px; } }

  /* home: solid denim nav from top, nav logo visible */
  body.home .site-nav:not(.scrolled) .nav-logo { opacity: 1; pointer-events: auto; }

  /* ============================================================
     v3 REFRESH — grey body text, brand-coloured headlines (no underline),
     per-page sticker colours, intro banner, home nav on-scroll only
     ============================================================ */
  :root { --paper-2: #e9eef1; }   /* light denim blue-grey (was beige) */

  /* body copy: dark grey, not black */
  body { color: #4a4744; }

  /* remove the accent underline swash everywhere */
  .id-hero h1 .accent::after,
  .home-hero h1 .accent::after { display: none; }

  /* headlines: brand colour, highlighted word in a second brand colour */
  .id-hero h1   { color: var(--hcol); }
  .id-hero h1 .accent   { color: var(--acol); }
  .home-hero h1 { color: var(--hcol); }
  .home-hero h1 .accent { color: var(--acol); }
  body.theme-purple { --hcol: var(--purple-deep); --acol: var(--coral); }
  body.theme-coral  { --hcol: var(--coral-deep);  --acol: var(--purple); }
  body.theme-yellow { --hcol: var(--purple-deep); --acol: var(--coral); }
  body.theme-mint   { --hcol: var(--mint-text);   --acol: var(--coral); }
  body.theme-plum   { --hcol: var(--purple-deep); --acol: var(--coral); }
  body.home         { --hcol: var(--coral-deep);  --acol: var(--purple); }

  /* angled sticker pill: a different brand colour per page header */
  body.theme-purple .sticker { background: var(--coral);    color: #fff; }
  body.theme-coral  .sticker { background: var(--purple);   color: #fff; }
  body.theme-yellow .sticker { background: var(--mint-ink); color: var(--ink); }
  body.theme-mint   .sticker { background: var(--coral);    color: #fff; }
  body.theme-plum   .sticker { background: var(--yellow);   color: var(--ink); }

  /* home: no dots, green location pill, bar only on scroll */
  .home-hero .hh-panel::after { display: none; }
  .home-hero .loc-pill { background: var(--mint-bg); color: var(--mint-text); }
  body.home .site-nav:not(.scrolled) .nav-logo { opacity: 0; pointer-events: none; }
  body.home .site-nav:not(.scrolled) .nav-toggle span { background: var(--ink); }

  /* ---- Intro-pass banner (static, designed) ---- */
  .intro-banner {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; flex-wrap: wrap;
    background: var(--green); color: #fff; text-decoration: none;
    padding: 13px 28px; transition: background 0.25s ease;
  }
  .intro-banner:hover { background: var(--green-deep); }
  .intro-banner:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
  .intro-banner .ib-spark { color: rgba(255,255,255,0.55); font-size: 14px; }
  .intro-banner .ib-text { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
  .intro-banner .ib-text strong { font-weight: 800; }
  .intro-banner .ib-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--green-deep);
    font-weight: 800; font-size: 13.5px; padding: 8px 18px; border-radius: 99px;
    transition: transform 0.2s ease;
  }
  .intro-banner .ib-cta .arrow { transition: transform 0.2s ease; }
  .intro-banner:hover .ib-cta .arrow { transform: translateX(3px); }
  @media (max-width: 600px){
    .intro-banner { gap: 12px; padding: 12px 18px; }
    .intro-banner .ib-text { font-size: 14px; }
  }

  /* ============================================================
     v4 — home photo 2/3, unified purple headlines + yellow accent
     ============================================================ */
  @media (min-width: 901px) {
    .home-hero { grid-template-columns: 1fr 2fr; }
  }
  .id-hero h1, .home-hero h1 { color: var(--purple); }
  .id-hero h1 .accent, .home-hero h1 .accent { color: var(--yellow-deep); }

  /* ============================================================
     v5 — OFFICIAL brand palette (exact values, owner-confirmed) + text system
     Five brand colours: yellow, mint, coral, purple, denim (the dark).
     ============================================================ */
  :root {
    --yellow:      #fad732;   /* brand yellow */
    --yellow-deep: #e6b820;
    --coral:       #eb6768;   /* brand coral */
    --coral-deep:  #d04f50;
    --purple:      #8079b9;   /* brand purple */
    --purple-deep: #6660a0;
    --mint-ink:    #5ec09e;   /* brand mint green */
    --mint-text:   #2c8865;
    --denim:       #49545a;   /* brand dark grey */
    --denim-deep:  #3a4146;
    --ink:         #49545a;   /* the single dark colour = brand dark grey (no black anywhere) */
  }

  /* body: dark grey; sub-headings inherit the denim dark */
  body { color: #55525c; }

  /* page headlines: brand purple with brand-yellow accent word */
  .id-hero h1, .home-hero h1 { color: var(--purple); }
  .id-hero h1 .accent, .home-hero h1 .accent { color: var(--yellow); }

  /* home hero: weighted to the text; menu still sits over the image on the right */
  @media (min-width: 901px) { .home-hero { grid-template-columns: 1.55fr 1fr; } }

  /* v5.1 — kill remaining pure-black hovers (use denim) */
  .cta-band .btn:hover, .split.usp-heat .btn:hover { background: var(--denim-deep); }

  /* ============================================================
     v6 — headline accent = solid brand-yellow highlighter, white text, even per row
     ============================================================ */
  .id-hero h1 .accent, .home-hero h1 .accent {
    color: #fff;
    background: var(--yellow);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0.04em 0.16em;
    border-radius: 5px;
    line-height: 1.18;          /* even band height on every wrapped row */
  }

  /* ============================================================
     v7 — two-column intro-pass banner (studio photo + text)
     ============================================================ */
  .intro-banner {
    display: grid; grid-template-columns: 1fr 1.1fr; align-items: stretch;
    background: var(--mint-ink); color: #fff; overflow: hidden;
  }
  .intro-banner .ib-media {
    display: block; min-height: 280px;
    background-size: cover; background-position: center;
  }
  .intro-banner .ib-body {
    align-self: center; padding: clamp(30px,4vw,56px) clamp(26px,5vw,68px);
  }
  .intro-banner .ib-spark {
    display: inline-block; font-size: 12px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.85); margin-bottom: 14px;
  }
  .intro-banner h3 {
    font-size: clamp(26px,3.4vw,42px); font-weight: 900;
    letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 12px; color: #fff;
  }
  .intro-banner p {
    font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.92);
    margin: 0 0 24px; max-width: 42ch;
  }
  .intro-banner .btn { background: #fff; color: var(--mint-text); }
  .intro-banner .btn:hover { background: var(--yellow); color: var(--ink); transform: translateY(-2px); }
  @media (max-width: 760px) {
    .intro-banner { grid-template-columns: 1fr; }
    .intro-banner .ib-media { min-height: 190px; }
  }

  /* ============================================================
     v8 — home hero fits above fold, menu clears the image, refined highlighter
     ============================================================ */
  @media (min-width: 901px) {
    .home-hero { grid-template-columns: 0.82fr 1fr; min-height: 0; }
    .home-hero .hh-panel { padding-top: clamp(86px,10vh,114px); padding-bottom: clamp(38px,6vh,58px); }
    body.home .site-nav .nav-links { gap: 25px; }
  }
  .home-hero .hero-logo { margin-bottom: 13px; }
  .home-hero .hero-logo img { height: 54px; }
  .home-hero h1 { font-size: clamp(38px,4.3vw,66px); margin-top: 15px; }
  .home-hero .lead { margin-top: 15px; }
  .home-hero .hh-rating { margin-top: 15px; }

  /* highlighter: rounded brand-yellow band, white text with a subtle grey lift */
  .id-hero h1 .accent, .home-hero h1 .accent {
    color: #fff;
    background: var(--yellow);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    padding: 0.04em 0.2em;
    border-radius: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.22);
    line-height: 1.2;
  }

  /* ============================================================
     v9 — membership: intro-pass top card + purple "help you pick" contact
     ============================================================ */
  .ways-grid .way-card.intro-top {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px;
    background: var(--coral); color: #fff; border: none;
    box-shadow: 0 18px 44px rgba(235,103,104,0.28);
  }
  .way-card.intro-top:hover { transform: none; }
  .way-card.intro-top .kicker { color: rgba(255,255,255,0.9); margin-bottom: 10px; }
  .way-card.intro-top h3 { color: #fff; font-size: 30px; margin: 0 0 8px; }
  .way-card.intro-top p { color: rgba(255,255,255,0.94); font-size: 15.5px; line-height: 1.5; margin: 0; max-width: 60ch; }
  .way-card.intro-top .it-right { text-align: right; }
  .way-card.intro-top .price { color: #fff; }
  .way-card.intro-top .price .per { color: rgba(255,255,255,0.85); }
  .way-card.intro-top .way-cta {
    margin-top: 12px; background: #fff; color: var(--coral-deep);
    padding: 11px 20px; border-radius: 99px; font-weight: 800;
  }
  .way-card.intro-top .way-cta:hover { background: var(--yellow); color: var(--ink); }
  @media (max-width: 680px) {
    .ways-grid .way-card.intro-top { grid-template-columns: 1fr; gap: 18px; }
    .way-card.intro-top .it-right { text-align: left; }
  }

  /* purple "help you pick" contact section */
  .help-pick { background: var(--purple); color: #fff; padding: clamp(60px,8vw,104px) 0; }
  .help-pick .hp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: center; }
  .help-pick .eyebrow { display:inline-block; color: var(--yellow); font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px; }
  .help-pick h2 { color: #fff; font-size: clamp(34px,5vw,58px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin: 0 0 16px; }
  .help-pick h2 .hl { color: var(--yellow); }
  .help-pick p { color: rgba(255,255,255,0.92); font-size: 18px; line-height: 1.55; margin: 0; max-width: 46ch; }
  .help-pick .contact-form label { color: rgba(255,255,255,0.92); }
  .help-pick .contact-form input, .help-pick .contact-form textarea { background: #fff; border-color: transparent; }
  .help-pick .contact-form textarea { min-height: 120px; }
  .help-pick .contact-form .btn { background: var(--mint-ink); color: #fff; }
  .help-pick .contact-form .btn:hover { background: var(--mint-text); color: #fff; }
  .help-pick .contact-form .form-note { color: rgba(255,255,255,0.8); }
  @media (max-width: 820px) { .help-pick .hp-grid { grid-template-columns: 1fr; } }

  /* ============================================================
     v10 — category photos, belief icons, faq dot fade, google rating, intro card
     ============================================================ */
  /* classes category cards: little photo on top */
  .cc .cc-photo {
    height: 118px; border-radius: 12px; margin-bottom: 16px;
    background-size: cover; background-position: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.16);
  }
  /* about beliefs: little symbol (small + thin) */
  .cc .cc-icon {
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 10px; color: inherit; opacity: 0.92;
  }
  .cc .cc-icon svg { width: 22px; height: 22px; }

  /* all header sections: smaller, tighter dots that fade out toward the plain section */
  .id-hero::after {
    background-image: radial-gradient(currentColor 1px, transparent 1.4px);
    background-size: 13px 13px;
    -webkit-mask-image: linear-gradient(to bottom, #000 28%, transparent 90%);
    mask-image: linear-gradient(to bottom, #000 28%, transparent 90%);
  }

  /* membership intro-pass top card: purple with a yellow border */
  .ways-grid .way-card.intro-top {
    background: var(--purple); border: 3px solid var(--yellow);
    box-shadow: 0 18px 44px rgba(128,121,185,0.30);
  }
  .way-card.intro-top .way-cta { background: var(--yellow); color: var(--ink); }
  .way-card.intro-top .way-cta:hover { background: #fff; color: var(--purple-deep); }

  /* home hero: slightly larger heading + Google-branded rating overlay on image */
  .home-hero h1 { font-size: clamp(42px,4.9vw,76px); }
  .home-hero .hh-photo { position: relative; }
  .hh-overlay {
    position: absolute; right: clamp(16px,2vw,28px); bottom: clamp(16px,2vw,28px);
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px; z-index: 4;
  }
  .hh-overlay .loc-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--mint-bg); color: var(--mint-text);
    font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 99px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  }
  .g-rating {
    display: inline-flex; align-items: center; gap: 12px;
    background: #fff; border-radius: 14px; padding: 10px 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.26); text-decoration: none;
    position: relative; z-index: 5;
  }
  /* decorative children must not eat clicks meant for the pill link */
  .g-rating .g-word, .g-rating .g-word svg, .g-rating .g-info { pointer-events: none; }
  .g-rating * { pointer-events: none; }
  /* hero: decorative layers must not steal the rating pill's click */
  body.home .home-hero .hh-circles,
  body.home .home-hero .hh-circles .hc,
  body.home .home-hero .hh-map,
  body.home .home-hero .hh-photo::before,
  body.home .home-hero .hh-panel::before { pointer-events: none; }
  body.home .home-hero .hh-overlay { z-index: 6; }
  body.home .home-hero .hh-overlay .g-rating,
  body.home .home-hero .hero-google { position: relative; z-index: 7; pointer-events: auto; }
  .g-rating .g-word { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
  .g-rating .g-info { display: flex; flex-direction: column; line-height: 1.1; }
  .g-rating .g-stars { color: #FBBC05; font-size: 13px; letter-spacing: 1px; }
  .g-rating .g-num { font-weight: 800; font-size: 12px; color: var(--ink); }
  @media (max-width: 900px) { .hh-overlay { right: 14px; bottom: 14px; } }

  /* ============================================================
     v11 — home hero fixes + single-row intro strip (below hero)
     ============================================================ */
  /* highlighter must be inline (was inline-block) so it hugs each line */
  .id-hero h1 .accent, .home-hero h1 .accent {
    display: inline;
    color: #fff; background: var(--yellow);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    padding: 0.015em 0.12em; border-radius: 8px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.22);
  }
  .home-hero h1 { line-height: 1.08; }
  .id-hero h1 { line-height: 1.05; }
  @media (min-width: 901px) { .home-hero .hh-panel { padding-top: clamp(60px,6vh,84px); } }

  /* decorative orbs more opaque */
  .home-hero .hh-panel .orb { opacity: 0.24; }

  /* google rating: 5.0 on the same row as the stars; tighter overlay gap */
  .hh-overlay { gap: 7px; }
  .g-rating .g-info { flex-direction: row; align-items: center; gap: 6px; }
  .g-rating .g-num { font-size: 13px; }

  /* single-row intro strip (below the hero) */
  .intro-strip {
    display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
    background: var(--mint-ink); color: #fff; text-decoration: none;
    padding: 14px 28px; transition: background 0.25s ease;
  }
  .intro-strip:hover { background: var(--mint-text); }
  .intro-strip .is-text { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
  .intro-strip .is-text strong { font-weight: 800; }
  .intro-strip .is-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--mint-text);
    font-weight: 800; font-size: 13.5px; padding: 8px 18px; border-radius: 99px;
  }
  .intro-strip:hover .is-cta .arrow { transform: translateX(3px); }
  .intro-strip .is-cta .arrow { transition: transform 0.2s ease; }

  /* ============================================================
     HOME — light & calm, true-colour pops (scoped to body.home)
     Clean white/off-white canvas, generous air. Brand colours used
     at FULL strength as small deliberate pops (coral CTA + accent,
     true green pill, colour-coded card edges), never as pastel fills.
     No decorative circles. Fewer colours competing at once.
     ============================================================ */
  body.home { background: #ffffff; }

  /* remove decorative circles — not part of the brand */
  body.home .home-hero .hh-panel .orb { display: none; }

  /* ABOVE THE FOLD — calm white, dark headline, one colour pop */
  /* line-height: enough to clear descenders; max-width lifted off 14ch so
     each phrase keeps to one line -> clean 2-line headline at full size */
  body.home .home-hero h1 { color: var(--ink); line-height: 1.06; max-width: 20ch; }
  /* drop the loud yellow highlighter band -> clean coral accent word */
  body.home .home-hero h1 .accent {
    display: inline;
    background: none;
    color: var(--coral);
    padding: 0;
    border-radius: 0;
    text-shadow: none;
  }
  /* location pill over the photo: brand yellow pop, sat close to the review badge */
  body.home .hh-overlay .loc-pill {
    background: var(--yellow); color: var(--ink);
    margin-bottom: 0;
  }
  body.home .hh-overlay { gap: 8px; }
  /* primary CTA: brand green, flat + clean (no inset top line), arrow tucked in */
  body.home .home-hero .btn {
    background: var(--mint-ink);
    gap: 9px;
    box-shadow: 0 12px 32px rgba(94,192,158,0.34);
  }
  body.home .home-hero .btn:hover {
    background: var(--mint-text);
    box-shadow: 0 16px 36px rgba(94,192,158,0.42);
  }
  body.home .home-hero .btn .arrow { font-size: 14px; margin-left: 0; }

  /* hero CTAs: left-aligned with the headline; secondary button solid white */
  body.home .home-hero .hero-cta-row { justify-content: flex-start; margin-left: 0; padding-left: 0; }
  body.home .home-hero .btn-outline {
    background: #fff;
    border-color: rgba(14,13,11,0.16);
    box-shadow: 0 8px 22px rgba(14,13,11,0.08);
  }
  body.home .home-hero .btn-outline:hover { background: #fff; border-color: var(--ink); }

  /* soften the hero photo so it sits gently against the calm white side:
     lift + slightly desaturate the image (straight edge kept), and a light
     wash over it so the two halves feel like one calm world. The overlay
     pill/rating sit above this layer, so they stay full-strength. */
  body.home .home-hero .hh-photo { filter: brightness(1.13) saturate(0.86); }
  body.home .home-hero .hh-overlay { filter: saturate(1.14) brightness(0.96); }
  body.home .home-hero .hh-photo::before {
    background:
      linear-gradient(180deg, rgba(14,13,11,0.18) 0%, transparent 20%),
      rgba(255,255,255,0.16);
    z-index: 1;
  }
  /* desktop hero: three photo circle cards on the right (replaces the image
     fade). Mobile keeps the full-image reveal. */
  body.home .home-hero .hh-circles { display: none; }
  /* location + rating pills now sit in the panel, under the CTA buttons,
     stacked: Google bar on top, location pill below, with space above */
  body.home .home-hero .hh-overlay {
    position: static; margin-top: 36px; z-index: auto;
    flex-direction: column-reverse; align-items: flex-start;
    justify-content: flex-start; gap: 12px;
  }
  /* the photo copy is desktop-hidden (used on mobile only) */
  body.home .home-hero .hh-photo .hh-overlay { display: none; }
  /* both pills: matching size + corner rounding */
  body.home .home-hero .loc-pill,
  body.home .home-hero .g-rating {
    border-radius: 999px;
    padding: 9px 18px;
    box-shadow: 0 8px 20px rgba(14,13,11,0.16);
    min-height: 40px; box-sizing: border-box;
  }
  @media (min-width: 901px) {
    /* H-style photo side: one clean cover image (uses the inline background) */
    body.home .home-hero .hh-photo {
      -webkit-mask-image: none; mask-image: none;
      display: block; position: relative; overflow: hidden;
      background-size: cover; background-position: center 30%;
    }
    body.home .home-hero .hh-photo::before { display: none; }  /* kill the old photo top-darken */
    body.home .home-hero .hh-circles { display: none; }
  }

  /* hero layout: widen the text column so the headline holds 2 lines at full
     size, with EVEN left/right padding (was 128px left / 56px right) and less
     of it. Logo + headline both live in the panel, so they stay aligned. */
  @media (min-width: 901px) {
    body.home .home-hero { grid-template-columns: 1fr 1fr; min-height: 90vh; }
    body.home .home-hero .hh-panel {
      padding-left: clamp(40px, 4vw, 60px);
      padding-right: clamp(40px, 4vw, 60px);
      padding-top: clamp(40px, 5vh, 64px);
      padding-bottom: clamp(36px, 5vh, 60px);
    }
  }
  /* mobile: even gutters, let copy use the full width so nothing clips */
  @media (max-width: 900px) {
    body.home .home-hero .hh-panel { padding-left: 24px; padding-right: 24px; }
    body.home .home-hero h1,
    body.home .home-hero .lead { max-width: 100%; }
  }

  /* white hero with brand dots cascading out from the top-left corner
     (same dot treatment as the about-page headers) */
  body.home .home-hero { background: #fff; }
  body.home .home-hero .hh-panel { background: #fff; }
  /* one dot system only — the panel field is removed; the photo's own edge
     dissolves into dots (defined below). */
  body.home .home-hero { isolation: isolate; }
  body.home .home-hero .hh-panel { background: transparent; }
  body.home .home-hero .hh-panel::after { display: none; }

  /* trust bar: grey-blue (denim) strip with white text */
  body.home .trust-bar { background: var(--denim); color: #fff; }
  body.home .trust-bar .trust-item { color: #fff; }
  body.home .trust-bar .trust-sep { background: rgba(255,255,255,0.45); }

  /* a little more breathing room between sections */
  body.home .welcome,
  body.home .events-teaser { padding: 150px 0; }

  /* ABOUT TEASER — solid purple block -> clean off-white, true accents */
  body.home .welcome { background: var(--paper-2, #e9eef1); color: var(--ink-2); }
  body.home .welcome-text .eyebrow { color: var(--coral); }
  body.home .welcome-text h2 { color: var(--ink); }
  body.home .welcome-text h2 .accent { color: var(--purple); }
  body.home .welcome-text p { color: var(--ink-soft); }
  body.home .welcome-text p strong { color: var(--ink); }
  body.home .welcome-text .signature { border-top-color: rgba(14,13,11,0.14); }
  body.home .welcome-text .signature .name { color: var(--ink); }
  body.home .welcome-text .signature .role { color: var(--ink-soft); }

  /* CLASS PREVIEW CARDS — colour blocks -> clean white cards, true-colour edge */
  body.home .cc { background: #fff; color: var(--ink-2);
    box-shadow: 0 6px 22px rgba(14,13,11,0.07);
    border-top: 5px solid var(--cardc, var(--coral)); }
  body.home .cc.coral  { --cardc: var(--coral); }
  body.home .cc.purple { --cardc: var(--purple); }
  body.home .cc.yellow { --cardc: var(--yellow); }
  body.home .cc.mint   { --cardc: var(--mint-ink); }
  body.home .cc .cc-num { color: var(--cardc); opacity: 1; }
  body.home .cc h3 { color: var(--ink); }
  body.home .cc li strong { color: var(--ink); }

  /* EVENTS — brand green with a polaroid card set on the right */
  body.home .events-teaser { background: var(--mint-ink); color: #fff; }
  body.home .events-teaser .et-bg { display: none; }
  body.home .events-teaser::after { display: none; }
  body.home .events-teaser .et-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 76px); align-items: center;
  }
  body.home .events-teaser .et-inner { max-width: 32ch; }
  body.home .events-teaser .eyebrow { color: rgba(255,255,255,0.85); }
  body.home .events-teaser h2 { color: #fff; }
  body.home .events-teaser h2 .accent { color: var(--yellow); }
  body.home .events-teaser p { color: rgba(255,255,255,0.92); }
  body.home .events-teaser .btn { background: #fff; color: var(--mint-text); box-shadow: 0 12px 30px rgba(14,13,11,0.2); }
  body.home .events-teaser .btn:hover { background: #fff; color: var(--mint-text); transform: translateY(-2px); }
  @media (max-width: 820px) {
    body.home .events-teaser .et-grid { grid-template-columns: 1fr; gap: 44px; }
  }

  /* official Google logo in the hero rating badge */
  .g-rating .g-word svg { height: 16px; width: auto; display: block; }

  /* FINAL CTA — dark photo -> light airy wash over photo, dark text */
  body.home .final-cta { color: var(--ink-2); }
  body.home .final-bg { filter: brightness(1.18) saturate(1.04); }
  body.home .final-overlay {
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.82) 45%, rgba(255,255,255,0.92) 100%);
  }
  body.home .final-dots { display: none; }
  body.home .final-cta .eyebrow { color: var(--coral); }
  body.home .final-cta h2 { color: var(--ink); text-shadow: none; }
  body.home .final-cta h2 .accent { color: var(--coral); }
  body.home .final-cta .sub { color: var(--ink-soft); text-shadow: none; }

  /* ===================================================================
     UNIFIED INNER-PAGE HEADERS (about / classes / membership / events / faq)
     White header, denim heading, page-colour eyebrow + accent, small opaque
     grey-blue dots, no circles, straight (un-angled) eyebrow. Section
     eyebrows on each page use the same page colour.
     =================================================================== */
  body.theme-purple { --page: var(--purple);  }   /* about      -> brand purple */
  body.theme-coral  { --page: var(--mint-ink);}   /* classes    -> brand green  */
  body.theme-yellow { --page: var(--coral);   }   /* membership -> brand pink   */
  body.theme-mint   { --page: var(--yellow);  }   /* events     -> brand yellow */
  body.theme-plum   { --page: var(--purple);  }   /* faq        -> brand purple */

  .id-hero { background: #fff; }
  .id-hero h1 { color: var(--denim); }
  .id-hero h1 .accent {
    display: inline; background: none; color: var(--page);
    padding: 0; text-shadow: none; border-radius: 0;
  }
  .id-hero .lead { color: var(--ink-soft); }

  /* faint, thin, closely-spaced grey-blue dots; no circles
     (same dot thinness / spacing / colour as the home hero) */
  .id-hero::after {
    color: var(--denim); opacity: 0.07;
    background-image: radial-gradient(currentColor 0.7px, transparent 1.1px);
    background-size: 7px 7px;
    -webkit-mask-image: linear-gradient(to bottom, #000 32%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 32%, transparent 92%);
  }
  .id-hero .orb { display: none; }

  /* consistent header alignment so the eyebrow sits in the same spot on every
     page (top-aligned text, not vertically centred against varying cards) */
  .id-hero.has-cards .wrap { align-items: start; }
  .id-hero .hero-text .sticker { margin-bottom: 0; }
  .id-hero .hero-text h1 { margin-top: 22px; }

  /* eyebrow pill: straight, page colour, WHITE button-caps text with a lift */
  .id-hero .sticker {
    transform: none;
    background: var(--page); color: #fff;
    text-transform: uppercase; font-weight: 600; letter-spacing: 0.16em; font-size: 12px;
    text-shadow: 0 1px 2px rgba(14,13,11,0.30);
    box-shadow: 0 8px 18px rgba(14,13,11,0.18);
  }

  /* section eyebrows on each page = page colour */
  body.theme-purple .eyebrow,
  body.theme-coral  .eyebrow,
  body.theme-yellow .eyebrow,
  body.theme-mint   .eyebrow,
  body.theme-plum   .eyebrow { color: var(--page); }

  /* sticker colour fix: outrank the old body.theme-x .sticker rules (0,2,1) */
  body.theme-purple .id-hero .sticker,
  body.theme-coral  .id-hero .sticker,
  body.theme-yellow .id-hero .sticker,
  body.theme-mint   .id-hero .sticker,
  body.theme-plum   .id-hero .sticker { background: var(--page); color: #fff; transform: none; }
  /* brand yellow pill needs dark text to be legible */
  body.theme-mint   .id-hero .sticker { color: var(--ink); text-shadow: none; }

  /* ===================== ABOUT PAGE ===================== */
  /* Values cards: number on top, large icon, then text underneath */
  body.theme-purple .cardband .cc { align-items: center; text-align: center; }
  body.theme-purple .cardband .cc .cc-num { order: 1; margin: 0 0 8px; opacity: 0.8; font-size: 13px; }
  body.theme-purple .cardband .cc .cc-icon {
    order: 2; position: static; margin: 0 0 14px; width: auto; height: auto; background: none;
    display: inline-flex; align-items: center; justify-content: center;
  }
  body.theme-purple .cardband .cc .cc-icon svg { width: 46px; height: 46px; stroke-width: 1.2; }
  body.theme-purple .cardband .cc h3 { order: 3; }
  body.theme-purple .cardband .cc p { order: 4; }

  /* Staff flip photo cards */
  .team-grid .tcard { perspective: 1300px; background: none; padding: 0; box-shadow: none; border: 0; cursor: pointer; }
  .team-grid .tflip {
    position: relative; transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.5,0,0.1,1); aspect-ratio: 3 / 4;
  }
  .team-grid .tcard:hover .tflip,
  .team-grid .tcard.flipped .tflip { transform: rotateY(180deg); }
  .team-grid .tface {
    position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(14,13,11,0.14);
  }
  .team-grid .tfront { background-size: cover; background-position: center top; display: flex; align-items: flex-end; }
  .team-grid .tfront::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(14,13,11,0.74));
  }
  .team-grid .tfront-label { position: relative; z-index: 1; padding: 18px; color: #fff; }
  .team-grid .tfront-label h3 { color: #fff; margin: 0; font-size: 20px; letter-spacing: -0.01em; }
  .team-grid .tfront-label .role { display: block; color: rgba(255,255,255,0.88); font-size: 12.5px; margin-top: 3px; }
  .team-grid .tback {
    transform: rotateY(180deg); background: var(--purple-deep); color: #fff;
    padding: 22px; display: flex; flex-direction: column; justify-content: center;
  }
  .team-grid .tback h3 { color: #fff; margin: 0 0 4px; font-size: 19px; }
  .team-grid .tback .role { display: block; color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 12px; }
  .team-grid .tback p { color: rgba(255,255,255,0.92); font-size: 13.5px; line-height: 1.55; margin: 0; }

  /* home menu: frosted white pill so the links read over both the white panel
     and the photo, keeping the hero light. Desktop only; reverts to the solid
     denim bar once scrolled. */
  @media (min-width: 1025px) {
    body.home .site-nav:not(.scrolled) .nav-links {
      background: rgba(255,255,255,0.72);
      -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.7);
      border-radius: 999px;
      padding: 7px 7px 7px 24px;
      gap: 26px;
      box-shadow: 0 10px 28px rgba(14,13,11,0.12);
    }
    body.home .site-nav:not(.scrolled) .nav-links a { color: var(--denim); text-shadow: none; }
    body.home .site-nav:not(.scrolled) .nav-links a:hover { color: var(--coral); }
    body.home .site-nav:not(.scrolled) .nav-links a.nav-cta { color: #fff; }
  }

  /* ===================== MOBILE POLISH ===================== */
  @media (max-width: 900px) {
    /* bigger, punchier hero headlines */
    body.home .home-hero h1 { font-size: clamp(26px, 6.8vw, 60px); line-height: 1.04; }
    .id-hero.has-cards .hero-text h1 { font-size: clamp(40px, 11vw, 54px); line-height: 1.04; }
    /* home above-fold: centred content, taller so it fills the screen */
    body.home .home-hero .hh-panel {
      min-height: 84vh; justify-content: center;
      text-align: center; align-items: center;
      padding-top: 96px; padding-bottom: 56px;
    }
    /* top-fade dot texture over the panel (same feel as the inner-page headers) */
    body.home .home-hero::before {
      content: ""; position: absolute; top: 0; left: 0; right: 0; height: 84vh; z-index: 1;
      pointer-events: none;
      color: var(--denim); opacity: 0.06;
      background-image: radial-gradient(currentColor 0.7px, transparent 1.1px);
      background-size: 7px 7px;
      -webkit-mask-image: linear-gradient(to bottom, #000 18%, transparent 74%);
              mask-image: linear-gradient(to bottom, #000 18%, transparent 74%);
    }
    body.home .home-hero .hh-inner { max-width: 480px; }
    body.home .home-hero .hero-logo { text-align: center; }
    body.home .home-hero .hero-logo img { margin-left: auto; margin-right: auto; }
    body.home .home-hero .lead { margin-left: auto; margin-right: auto; }
    body.home .home-hero .hero-cta-row { justify-content: center; }
    /* mobile hero image: taller + rounded top for a wow reveal, pills centred */
    body.home .home-hero .hh-photo {
      min-height: 60vh;
      border-top-left-radius: 30px; border-top-right-radius: 30px;
    }
    body.home .home-hero .hh-photo::before {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 55%, rgba(14,13,11,0.5));
    }
    /* mobile: pills go back onto the image (hide the panel copy) */
    body.home .home-hero .hh-panel .hh-overlay { display: none; }
    body.home .home-hero .hh-photo .hh-overlay {
      display: flex; position: absolute; inset: 0;
      margin-top: 0; align-items: center; justify-content: center; z-index: 4;
    }
    /* a touch more punch on section headings */
    .band-head h1, .band-head h2, .tt-head h1, .tt-head h2, .ways-head h1, .ways-head h2, .events-teaser h2 { font-size: clamp(30px, 8.5vw, 42px); }
  }

  /* ============================================================
     Legal pages, cookie consent, Instagram feed
     ============================================================ */

  .legal-updated {
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 20px;
  }

  /* ghost / subtle button (reuses .btn base) */
  .btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 22px; border-radius: 999px;
    font-weight: 700; font-size: 13px;
    letter-spacing: 0.16em; text-transform: uppercase;
    line-height: 1;
    background: transparent;
    color: var(--ink);
    border: 1.5px solid rgba(14,13,11,0.28);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .btn-ghost:hover { background: rgba(14,13,11,0.06); border-color: var(--ink); transform: translateY(-1px); }

  /* ----- Cookie banner ----- */
  .cookie-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 40px rgba(14,13,11,0.14);
    padding: 18px 0;
    animation: cookieUp 0.35s ease;
  }
  @keyframes cookieUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .cookie-banner-inner {
    width: min(1120px, 92%); margin: 0 auto;
    display: flex; align-items: center; gap: 28px;
    flex-wrap: wrap;
  }
  .cookie-banner-text { flex: 1 1 380px; }
  .cookie-banner-text strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
  .cookie-banner-text p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
  .cookie-banner-text a { color: var(--coral); font-weight: 600; }
  .cookie-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  .cookie-banner-actions .btn,
  .cookie-banner-actions .btn-ghost { padding: 13px 20px; font-size: 12px; }

  /* ----- Cookie preferences modal ----- */
  .cookie-modal {
    position: fixed; inset: 0; z-index: 9100;
    background: rgba(14,13,11,0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: cookieFade 0.2s ease;
  }
  @keyframes cookieFade { from { opacity: 0; } to { opacity: 1; } }
  .cookie-modal-card {
    background: #fff; border-radius: 16px;
    width: min(540px, 100%); max-height: 88vh; overflow-y: auto;
    padding: 32px;
    box-shadow: 0 30px 80px rgba(14,13,11,0.32);
  }
  .cookie-modal-card h2 { font-size: 24px; margin: 0 0 8px; color: var(--ink); }
  .cookie-modal-card > p { font-size: 14px; color: var(--ink-soft); margin: 0 0 20px; line-height: 1.55; }
  .cookie-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
  .cookie-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
    padding: 16px 0; border-bottom: 1px solid var(--line);
  }
  .cookie-row-text strong { display: block; font-size: 14px; color: var(--ink); margin-bottom: 3px; }
  .cookie-row-text span { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
  .cookie-row input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--coral); cursor: pointer; }
  .cookie-row-locked input { cursor: not-allowed; opacity: 0.6; }
  .cookie-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

  @media (max-width: 560px) {
    .cookie-banner-actions { width: 100%; }
    .cookie-banner-actions .btn,
    .cookie-banner-actions .btn-ghost { flex: 1 1 auto; justify-content: center; }
    .cookie-modal-card { padding: 24px; }
  }

  /* ----- Consent-gated map placeholder ----- */
  .contact-aside .map { position: relative; }
  .consent-placeholder {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; text-align: center; padding: 24px;
    background: var(--mint-bg);
    color: var(--ink-soft);
  }
  .consent-placeholder p { margin: 0; font-size: 13px; max-width: 24ch; line-height: 1.5; }
  .consent-placeholder button {
    background: var(--ink); color: #fff; border: 0; cursor: pointer;
    padding: 10px 18px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .consent-placeholder button:hover { background: var(--coral); }

  /* ----- Instagram feed ----- */
  .ig-feed { background: #fff; padding: 76px 0 40px; }
  .ig-feed .wrap { text-align: center; }
  .ig-feed .eyebrow {
    display: inline-block; font-size: 12px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--coral); margin-bottom: 12px;
  }
  .ig-feed h2 { font-size: clamp(28px, 4vw, 40px); color: var(--ink); margin: 0 0 6px; }
  .ig-feed .ig-handle {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; color: var(--ink-soft); font-size: 15px;
    margin-bottom: 34px; transition: color 0.2s ease;
  }
  .ig-feed .ig-handle:hover { color: var(--coral); }
  .ig-feed .ig-handle svg { width: 20px; height: 20px; }
  .ig-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }
  .ig-grid a {
    position: relative; display: block;
    aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
    background: var(--mint-bg);
  }
  .ig-grid img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
  }
  .ig-grid a::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(232,82,94,0) 55%, rgba(232,82,94,0.28));
    opacity: 0; transition: opacity 0.3s ease;
  }
  .ig-grid a:hover img { transform: scale(1.06); }
  .ig-grid a:hover::after { opacity: 1; }
  @media (max-width: 900px) {
    .ig-grid { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 560px) {
    .ig-feed { padding: 56px 0 32px; }
    .ig-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  }


  /* ============================================================
     Home hero refinements — unified pills, circle cascade, desktop dots
     ============================================================ */
  /* Unified pill set: both white, same height + rounding, defined against white */
  body.home .home-hero .loc-pill,
  body.home .home-hero .g-rating {
    background: rgba(14,13,11,0.045);
    color: var(--ink-soft);
    border: none;
    border-radius: 999px;
    height: 40px; min-height: 40px; padding: 0 16px;
    box-shadow: none;
    display: inline-flex; align-items: center; box-sizing: border-box;
  }
  /* quiet trust signals: sit as one row, tighter, secondary to the CTAs */
  body.home .home-hero .hh-overlay { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
  body.home .home-hero .loc-pill {
    text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 14px;
    gap: 9px; margin-bottom: 0;
  }
  body.home .home-hero .loc-pill svg { color: var(--coral); width: 16px; height: 16px; }
  body.home .home-hero .g-rating { gap: 11px; text-decoration: none; }
  body.home .home-hero .g-rating .g-word svg { height: 17px; }
  body.home .home-hero .g-rating .g-info { flex-direction: row; align-items: center; gap: 6px; }
  body.home .home-hero .g-rating .g-stars { font-size: 14px; }
  body.home .home-hero .g-rating .g-num { font-size: 14px; color: var(--ink); }

  @media (min-width: 901px) {
    /* tighter, overlapping cascade from top-right down to the left */
    body.home .home-hero .hc { z-index: 1; }
    body.home .home-hero .hc.c1 { width: 56%; top: 19%; right: 3%;  bottom: auto; }
    body.home .home-hero .hc.c3 { width: 35%; top: 11%; right: 42%; bottom: auto; }
    body.home .home-hero .hc.c2 { width: 46%; top: 40%; right: 33%; bottom: auto; }
    /* dots matched to the inner-page headers: tiny, tight, denim, top-to-bottom fade */
    body.home .home-hero { position: relative; }
    body.home .home-hero::before {
      content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      color: var(--denim); opacity: 0.07;
      background-image: radial-gradient(currentColor 0.7px, transparent 1.1px);
      background-size: 7px 7px;
      -webkit-mask-image: linear-gradient(to bottom, #000 32%, transparent 92%);
              mask-image: linear-gradient(to bottom, #000 32%, transparent 92%);
    }
    body.home .home-hero .hh-panel,
    body.home .home-hero .hh-photo { position: relative; z-index: 1; }
  }

  /* ============================================================
     Mailing list, footer intro-pass CTA band, cookie FAB
     ============================================================ */
  .newsletter { background: var(--paper-2, #e9eef1); padding: clamp(56px, 7vw, 78px) 0; }
  .newsletter .nl-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; flex-wrap: wrap;
  }
  .newsletter .nl-text { flex: 1 1 340px; }
  .newsletter .nl-text .eyebrow {
    display: inline-block; font-size: 12px; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--coral); margin-bottom: 12px;
  }
  .newsletter .nl-text h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 900; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 8px; line-height: 1.05; }
  .newsletter .nl-text h2 .accent { color: var(--mint-ink); }
  .newsletter .nl-text p { color: var(--ink-soft); margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.55; }
  .nl-form { flex: 1 1 380px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; max-width: 500px; }
  .nl-form input[type="email"] {
    flex: 1 1 220px; height: 52px; border-radius: 999px;
    border: 1px solid var(--line); padding: 0 20px;
    font: inherit; font-size: 15px; background: #fff; color: var(--ink);
  }
  .nl-form input[type="email"]::placeholder { color: var(--muted); }
  .nl-form input[type="email"]:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(235,103,104,0.16); }
  .nl-form .btn { height: 52px; }
  .nl-note { flex-basis: 100%; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
  @media (max-width: 720px) {
    .newsletter .nl-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
    .nl-form { width: 100%; max-width: none; }
  }

  /* Intro-pass CTA band at the top of the footer (sitewide) */
  .footer-cta {
    position: relative; overflow: hidden;
    background: var(--purple);
    padding: clamp(60px, 8vw, 104px) 24px;
    text-align: center; color: #fff;
  }
  .footer-cta::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(#fff 0.8px, transparent 1.1px);
    background-size: 7px 7px; opacity: 0.08;
    -webkit-mask-image: linear-gradient(to bottom, #000 18%, transparent 85%);
            mask-image: linear-gradient(to bottom, #000 18%, transparent 85%);
  }
  .footer-cta .fcta-inner { position: relative; z-index: 1; max-width: 660px; margin: 0 auto; }
  .footer-cta .fcta-spark {
    display: inline-block; font-size: 12px; font-weight: 800;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--yellow); margin-bottom: 16px;
  }
  .footer-cta h3 { font-size: clamp(30px, 5vw, 54px); font-weight: 900; letter-spacing: -0.035em; line-height: 1.02; color: #fff; margin: 0 0 14px; }
  .footer-cta h3 .accent { color: var(--yellow); }
  .footer-cta p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.92); margin: 0 auto 28px; max-width: 48ch; }
  .footer-cta .btn { background: var(--coral); }
  .footer-cta .btn:hover { background: var(--coral-deep); }

  /* Persistent floating "manage cookies" button (like Cookiebot) */
  .cookie-fab {
    position: fixed; left: 18px; bottom: 18px; z-index: 8000;
    width: 46px; height: 46px; border-radius: 50%;
    background: #fff; color: var(--ink);
    border: 1px solid rgba(14,13,11,0.12);
    box-shadow: 0 6px 20px rgba(14,13,11,0.18);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .cookie-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(14,13,11,0.26); }
  .cookie-fab svg { width: 23px; height: 23px; }
  @media (max-width: 560px) { .cookie-fab { width: 42px; height: 42px; left: 14px; bottom: 14px; } }

  /* ============================================================
     Unified footer: slim IG strip + in-footer mailing list
     ============================================================ */
  .ig-strip { background: #fff; border-top: 1px solid var(--line); }
  .ig-strip-label {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px; font-weight: 700; font-size: 13px; color: var(--ink-soft);
    transition: color 0.2s ease;
  }
  .ig-strip-label:hover { color: var(--coral); }
  .ig-strip-label svg { width: 18px; height: 18px; }
  .ig-strip-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
  .ig-strip-row a { position: relative; display: block; height: 150px; overflow: hidden; }
  .ig-strip-row img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
  .ig-strip-row a::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(232,82,94,0) 60%, rgba(232,82,94,0.30));
    opacity: 0; transition: opacity 0.3s ease;
  }
  .ig-strip-row a:hover img { transform: scale(1.06); }
  .ig-strip-row a:hover::after { opacity: 1; }
  @media (max-width: 720px) { .ig-strip-row a { height: 96px; } }

  /* mailing list, inside the footer */
  .footer-news {
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding: 34px 0; margin-top: 8px;
  }
  .footer-news .fn-text h4 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
  .footer-news .fn-text p { font-size: 13px; color: var(--ink-soft); margin: 0; max-width: 46ch; line-height: 1.5; }
  .footer-news .fn-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; flex: 1 1 360px; max-width: 470px; }
  .footer-news .fn-form input[type="email"] {
    flex: 1 1 200px; height: 48px; border-radius: 999px;
    border: 1px solid var(--line); padding: 0 18px;
    font: inherit; font-size: 14px; background: #fff; color: var(--ink);
  }
  .footer-news .fn-form input[type="email"]::placeholder { color: var(--muted); }
  .footer-news .fn-form input[type="email"]:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(235,103,104,0.16); }
  .footer-news .fn-form .btn { height: 48px; }
  .footer-news .fn-note { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: var(--muted); }
  @media (max-width: 720px) {
    .footer-news { flex-direction: column; align-items: flex-start; gap: 18px; }
    .footer-news .fn-form { width: 100%; max-width: none; }
  }

  /* ============================================================
     Footer — Option A (newsletter-led, map under socials) + intro-band Google pill
     ============================================================ */
  .footer-cta .fcta-actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
  .footer-cta .g-rating.fcta-google { height: 46px; border-radius: 999px; }

  .footer-a { padding-top: 0; }  /* remove the base footer top padding that caused the white gap */
  .footer-a .a-news { background: #fff; border-bottom: 1px solid var(--line); padding: clamp(44px, 5vw, 60px) 0; text-align: center; }
  .footer-a .a-news .eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); margin-bottom: 12px; }
  .footer-a .a-news h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 900; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 8px; line-height: 1.05; }
  .footer-a .a-news p { color: var(--ink-soft); max-width: 52ch; margin: 0 auto 22px; font-size: 15px; line-height: 1.55; }
  .footer-a .a-news .fn-form { max-width: 470px; margin: 0 auto; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .footer-a .a-news .fn-form input[type="email"] { flex: 1 1 220px; height: 52px; border-radius: 999px; border: 1px solid var(--line); padding: 0 20px; font: inherit; font-size: 15px; background: #fff; color: var(--ink); }
  .footer-a .a-news .fn-form input[type="email"]::placeholder { color: var(--muted); }
  .footer-a .a-news .fn-form input[type="email"]:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(235,103,104,0.16); }
  .footer-a .a-news .fn-form .btn { height: 52px; }

  .footer-a .a-cols { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr; gap: 48px; padding: 56px 0 40px; align-items: start; }
  .footer-a .a-brand img { height: 150px; width: auto; filter: brightness(0); margin-bottom: 18px; display: block; }
  .footer-a .a-brand > p { color: var(--ink-soft); font-size: 13px; line-height: 1.55; max-width: 34ch; margin: 0 0 20px; }
  .footer-a .a-brand .footer-social { margin-top: 4px; }
  .footer-a .a-contact .footer-map { display: block; width: 100%; min-height: 200px; margin-top: 18px; border-radius: 12px; box-shadow: 0 12px 32px rgba(14,13,11,0.10); }
  @media (max-width: 820px) {
    .footer-a .a-cols { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer-a .a-contact { grid-column: 1 / -1; }
    .footer-a .a-contact .footer-map { max-width: 460px; }
  }
  @media (max-width: 560px) {
    .footer-a .a-cols { grid-template-columns: 1fr; gap: 32px; }
  }

  /* ============================================================
     Hero refinements — Google chip above logo, location as caps text
     ============================================================ */
  @media (min-width: 901px) {
    body.home .home-hero .hero-google { margin: 0 0 22px; }
    body.home .home-hero .hh-panel .hh-overlay .loc-pill {
      background: none; border: none; padding: 0; height: auto; min-height: 0;
      text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 800;
      color: var(--ink-soft); gap: 7px;
    }
    body.home .home-hero .hh-panel .hh-overlay .loc-pill svg { color: var(--coral); width: 14px; height: 14px; }
    body.home .home-hero .hh-panel .hh-overlay { margin-top: 22px; }
  }
  @media (max-width: 900px) {
    /* mobile keeps the pills on the photo, so hide the panel Google chip */
    body.home .home-hero .hero-google { display: none; }
  }

  /* ============================================================
     IG strip redesign (Follow overlay), mobile pills, review count, terms highlight
     ============================================================ */
  /* Instagram strip: bright square photo grid with a colourful Follow pill
     (kept deliberately light so it doesn't compete with the dark intro band) */
  .ig-strip { position: relative; display: block; background: #fff; }
  .ig-strip .ig-strip-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
  .ig-strip .ig-strip-row img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform 0.4s ease, filter 0.3s ease; }
  .ig-strip::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: rgba(14,13,11,0.06); transition: background 0.3s ease;
  }
  .ig-strip .ig-strip-cta {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(45deg, #F58529 0%, #DD2A7B 55%, #8134AF 100%);
    color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 0.01em;
    padding: 13px 24px; border-radius: 999px;
    box-shadow: 0 12px 30px rgba(221,42,123,0.34), 0 4px 10px rgba(14,13,11,0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .ig-strip .ig-strip-cta svg { width: 20px; height: 20px; }
  .ig-strip .ig-strip-cta .ig-handle { font-weight: 600; opacity: 0.95; }
  .ig-strip:hover::after { background: rgba(14,13,11,0.14); }
  .ig-strip:hover .ig-strip-cta { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 16px 38px rgba(221,42,123,0.4), 0 5px 12px rgba(14,13,11,0.2); }
  .ig-strip:hover .ig-strip-row img { transform: scale(1.04); }
  @media (max-width: 720px) {
    .ig-strip .ig-strip-cta { font-size: 13px; padding: 11px 18px; gap: 8px; }
    .ig-strip .ig-strip-cta svg { width: 18px; height: 18px; }
  }

  /* review count in the rating pill; square Google "G" */
  .g-rating .g-count { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
  .g-rating .g-word svg { width: auto; }
  body.home .home-hero .g-rating .g-count { color: var(--ink-soft); }

  /* Mobile: Google chip above the logo; location as a pill on the image */
  @media (max-width: 900px) {
    body.home .home-hero .hero-google { display: inline-flex; margin: 0 0 18px; }
    body.home .home-hero .hh-photo .g-rating { display: none; }
    body.home .home-hero .hh-photo .loc-pill {
      background: #fff; color: var(--ink); box-shadow: 0 6px 18px rgba(0,0,0,0.28);
      height: 40px; padding: 0 16px; border-radius: 999px; letter-spacing: 0; text-transform: none;
      font-size: 13px; font-weight: 700;
    }
    body.home .home-hero .hh-photo .loc-pill svg { color: var(--coral); }
  }

  /* Terms: values still to confirm, highlighted for review */
  .prose mark.tbc { background: #ffe98a; color: var(--ink); padding: 0 4px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

  /* ============================================================
     Heated-studio banner — video background (classes)
     ============================================================ */
  .usp-heat.has-video { position: relative; overflow: hidden; padding: clamp(84px, 12vw, 150px) 0; }
  .usp-heat.has-video::after { display: none; } /* drop the dot texture over the video */
  .usp-heat.has-video .usp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
  .usp-heat.has-video .usp-video-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(184,52,52,0.88) 0%, rgba(120,30,30,0.64) 48%, rgba(14,13,11,0.40) 100%);
  }
  .usp-heat.has-video .wrap { position: relative; z-index: 2; }
  .usp-heat.has-video .split-text { max-width: 620px; }
  .usp-heat.has-video .split-text h2 { color: #fff; }
  .usp-heat.has-video .split-text p { color: rgba(255,255,255,0.94); }
  .usp-heat.has-video .btn { background: #fff; color: var(--coral); }
  .usp-heat.has-video .btn:hover { background: #fff; color: var(--coral-deep); transform: translateY(-2px); }
  .usp-heat.has-video .usp-heat-tag {
    position: absolute; top: 24px; right: 24px; z-index: 2;
    background: var(--yellow); color: var(--ink);
    padding: 8px 16px; border-radius: 999px;
    font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(0,0,0,0.28);
  }
  @media (max-width: 700px) { .usp-heat.has-video .usp-heat-tag { top: 16px; right: 16px; } }

  /* ============================================================
     Heated-studio banner header — brand-aligned (no angle, no underline)
     ============================================================ */
  .usp-heat.has-video .sticker {
    transform: none; background: var(--yellow); color: var(--ink);
    text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; padding: 9px 16px;
  }
  .usp-heat.has-video .split-text h2 .accent { color: var(--yellow); }
  .usp-heat.has-video .split-text h2 .accent::after { display: none; }

  /* Lighten the Instagram photos a touch */
  .ig-strip .ig-strip-row img { filter: brightness(1.07); }
  .ig-strip::after { background: rgba(255,255,255,0.12); }
  .ig-strip:hover::after { background: rgba(255,255,255,0.04); }

  /* CTA banner: Google rating as the top eyebrow */
  .footer-cta .fcta-google { margin: 0 0 18px; }
  /* Lighten the Instagram photos a little more */
  .ig-strip .ig-strip-row img { filter: brightness(1.16); }
  .ig-strip::after { background: rgba(255,255,255,0.22); }

  /* white border on the IG Follow pill so it lifts off the photos */
  .ig-strip .ig-strip-cta { border: 2px solid #fff; }

  /* CTA banner: subtle timetable/class-names line reinforcing "every class" */
  .footer-cta .fcta-classes {
    margin: 22px auto 0; max-width: 640px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.52); line-height: 2;
  }

  /* ============================================================
     Events teaser (light + hero-style circles), IG pill caps, mobile hero circles
     ============================================================ */
  body.home .events-teaser { background: var(--paper-2); color: var(--ink-2); }
  body.home .events-teaser::after { display: none; }
  body.home .events-teaser .eyebrow { color: var(--coral); }
  body.home .events-teaser h2 { color: var(--ink); }
  body.home .events-teaser h2 .accent { color: var(--purple-deep); }
  body.home .events-teaser p { color: var(--ink-soft); }
  body.home .events-teaser .btn { background: var(--coral); color: #fff; box-shadow: 0 12px 30px rgba(232,82,94,0.34); }
  body.home .events-teaser .btn:hover { background: var(--coral-deep); }
  @media (max-width: 820px) {
  }

  /* IG Follow pill: uppercase, spaced button text */
  .ig-strip .ig-strip-cta { text-transform: uppercase; letter-spacing: 0.09em; font-size: 13px; }
  .ig-strip .ig-strip-cta .ig-handle { font-weight: 700; opacity: 0.95; }
  /* Mobile: shrink the Follow pill so it doesn't dominate the strip */
  @media (max-width: 720px) {
    .ig-strip .ig-strip-cta { font-size: 11px; padding: 8px 14px; gap: 6px; letter-spacing: 0.05em; }
    .ig-strip .ig-strip-cta svg { width: 15px; height: 15px; }
  }

  /* Mobile: keep the 3 overlapping circles (instead of the single full image) */
  @media (max-width: 900px) {
    body.home .home-hero .hh-photo {
      background-image: none !important; background: transparent !important;
      -webkit-mask-image: none !important; mask-image: none !important;
      min-height: 400px; border-radius: 0; overflow: visible;
    }
    body.home .home-hero .hh-photo::before { display: none !important; }
    body.home .home-hero .hh-circles { display: block !important; position: absolute; inset: 0 16px; }
    body.home .home-hero .hc { position: absolute; border-radius: 50%; background-size: cover; background-position: center; border: 6px solid #fff; box-shadow: 0 18px 40px rgba(14,13,11,0.20); filter: brightness(1.08) saturate(0.92); z-index: 1; }
    body.home .home-hero .hc.c1 { width: 56%; top: 8%;  right: 3%; }
    body.home .home-hero .hc.c3 { width: 36%; top: 2%;  right: 42%; }
    body.home .home-hero .hc.c2 { width: 46%; top: 34%; right: 30%; }
    body.home .home-hero .hh-photo .hh-overlay { display: none !important; }
  }

  /* Ribble Valley map as the hero location element */
  body.home .home-hero .hh-panel .hh-overlay { display: none; }  /* replaced by the map */
  body.home .home-hero .hh-map { display: flex; align-items: center; gap: 13px; margin-top: 26px; }
  body.home .home-hero .hh-map svg { width: 56px; height: 56px; overflow: visible; flex: none; }
  body.home .home-hero .hh-map svg path { fill: rgba(73,84,90,0.08); stroke: var(--denim); stroke-width: 1.4; stroke-linejoin: round; }
  body.home .home-hero .hh-map svg circle { fill: var(--coral); stroke: #fff; stroke-width: 1; }
  body.home .home-hero .hh-map-cap { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

  /* Events cards: overlapping polaroid stack (like the About page hero) */

  /* Instagram strip: show 3 larger squares on mobile (instead of 6) */
  @media (max-width: 720px) {
    .ig-strip .ig-strip-row { grid-template-columns: repeat(3, 1fr); }
    .ig-strip .ig-strip-row img:nth-child(n+4) { display: none; }
  }

  /* ---- Final fixes: events deck position, mobile circles height, mobile footer centre, hot tag ---- */
  body.home .events-teaser .hero-cards { margin: 0 auto; }
  @media (max-width: 900px) {
    body.home .home-hero .hc { aspect-ratio: 1 / 1; }
  }
  @media (max-width: 560px) {
    /* brand full-width & centred; Explore + Get in touch as two columns */
    .footer-a .a-cols { grid-template-columns: 1fr 1fr; gap: 28px 22px; }
    .footer-a .a-brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; }
    .footer-a .a-brand img { margin-left: auto; margin-right: auto; }
    .footer-a .a-brand > p { margin-left: auto; margin-right: auto; }
    .footer-a .a-brand .footer-social { justify-content: center; }
    .footer-a .a-contact { grid-column: auto; }
    .footer-a .a-contact .footer-map { min-height: 150px; margin-top: 14px; }
  }
  .hot-tag {
    display: inline-block; margin-left: 7px; vertical-align: middle;
    background: var(--coral); color: #fff;
    font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 5px;
  }

  /* Homepage hero: "not yoga perfect." brand green, 21-day CTA brand pink */
  body.home .home-hero h1 .accent { color: var(--mint-ink); }
  body.home .home-hero .hero-cta-row .btn { background: var(--coral); box-shadow: 0 12px 32px rgba(232,82,94,0.36); }
  body.home .home-hero .hero-cta-row .btn:hover { background: var(--coral-deep); box-shadow: 0 16px 36px rgba(232,82,94,0.44); }

  /* hot tag: white pill + coral text (reads on any coloured card), inline with name */
  .hot-tag {
    background: #fff; color: var(--coral); font-weight: 800;
    -webkit-text-fill-color: var(--coral);
  }
  /* Video banner: sticker as caps text with lift (no pill), button yellow */
  .usp-heat.has-video .sticker {
    background: none; padding: 0; color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.4);
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; font-weight: 800;
  }
  .usp-heat.has-video .btn { background: var(--yellow); color: var(--ink); }
  .usp-heat.has-video .btn:hover { background: var(--yellow-deep); color: var(--ink); }

  /* ============================================================
     Membership intro card (subtler), help-pick section, opt-in, mobile centring
     ============================================================ */
  /* Intro card: stands out via a coral border + accents, not a solid block */
  .ways-grid .way-card.intro-top {
    background: #fff; color: var(--ink-2);
    border: 2px solid var(--coral);
    box-shadow: 0 14px 36px rgba(235,103,104,0.14);
  }
  .way-card.intro-top .kicker { color: var(--coral); }
  .way-card.intro-top h3 { color: var(--ink); }
  .way-card.intro-top p { color: var(--ink-soft); }
  .way-card.intro-top .price { color: var(--ink); }
  .way-card.intro-top .price .per { color: var(--ink-soft); }
  .way-card.intro-top .way-cta { background: var(--coral); color: #fff; }
  .way-card.intro-top .way-cta:hover { background: var(--coral-deep); color: #fff; }

  /* Help-pick: grey, centred, yellow eyebrow, form below with name+email on one row */
  .help-pick { background: #fff; }
  .help-pick .hp-inner { max-width: 620px; margin: 0 auto; text-align: center; }
  .help-pick .hp-text .eyebrow { color: var(--yellow-deep); }
  .help-pick .hp-form { margin-top: 34px; text-align: left; }
  .help-pick .hp-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .help-pick .hp-form .form-note { text-align: center; }
  @media (max-width: 560px) { .help-pick .hp-form .field-row { grid-template-columns: 1fr; } }

  /* Mailing-list opt-in (contact + membership forms) */
  .contact-form .opt-in {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 13px; color: var(--ink-soft); line-height: 1.45; margin: 6px 0 2px;
  }
  .contact-form .opt-in input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--coral); flex: none; }

  /* Mobile: centre the hero location line + the circle cluster */
  @media (max-width: 900px) {
    body.home .home-hero .hh-map { justify-content: center; }
    body.home .home-hero .hh-circles {
      left: 50%; right: auto; transform: translateX(-50%);
      width: min(380px, 92%); inset: auto; top: 0; height: 100%;
    }
  }

  /* ============================================================
     Footer grid-areas (map full-width on mobile) + centred mobile circles
     ============================================================ */
  .footer-a .a-cols {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.4fr;
    grid-template-areas: "brand explore contact" "brand explore map";
    column-gap: 48px; row-gap: 0; align-items: start;
  }
  .footer-a .a-brand { grid-area: brand; }
  .footer-a .a-explore { grid-area: explore; }
  .footer-a .a-contact { grid-area: contact; }
  .footer-a .a-map { grid-area: map; margin-top: 18px; }
  .footer-a .a-map .footer-map { display: block; width: 100%; min-height: 200px; border-radius: 12px; box-shadow: 0 12px 32px rgba(14,13,11,0.10); }
  @media (max-width: 820px) {
    .footer-a .a-cols { grid-template-columns: 1fr 1fr; grid-template-areas: "brand brand" "explore contact" "map map"; column-gap: 40px; }
    .footer-a .a-map .footer-map { max-width: 480px; margin: 0 auto; }
  }
  @media (max-width: 560px) {
    .footer-a .a-cols { column-gap: 22px; }
    .footer-a .a-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .footer-a .a-brand img, .footer-a .a-brand > p { margin-left: auto; margin-right: auto; }
    .footer-a .a-brand .footer-social { justify-content: center; }
    .footer-a .footer-col ul { align-items: flex-start; }
    .footer-a .a-map .footer-map { max-width: none; min-height: 170px; }
  }

  /* Mobile hero: centred, balanced circle cluster */
  @media (max-width: 900px) {
    body.home .home-hero .hh-photo { min-height: 420px; }
    body.home .home-hero .hh-circles {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: min(330px, 86%); aspect-ratio: 1 / 1; height: auto; inset: auto; right: auto; margin: 0;
    }
    body.home .home-hero .hc { aspect-ratio: 1 / 1; }
    body.home .home-hero .hc.c1 { width: 60%; top: 6%;   right: 2%; left: auto; bottom: auto; }
    body.home .home-hero .hc.c2 { width: 50%; bottom: 2%; left: 2%;  top: auto; right: auto; }
    body.home .home-hero .hc.c3 { width: 36%; top: 0;     left: 34%; right: auto; bottom: auto; }
  }

  /* CTA banner: mini weekly-timetable motif */
  .footer-cta .fcta-timetable { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .footer-cta .fct-lead { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
  .footer-cta .fct-week { display: flex; justify-content: center; gap: 12px; }
  .footer-cta .fct-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .footer-cta .fct-day i { width: 26px; height: 5px; border-radius: 2px; background: rgba(255,255,255,0.42); display: block; }
  .footer-cta .fct-day span { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 5px; }
  @media (max-width: 560px) { .footer-cta .fct-week { gap: 8px; } .footer-cta .fct-day i { width: 20px; } }

  /* Mobile footer: more room under the social icons */
  @media (max-width: 560px) {
    .footer-a .a-brand .footer-social { margin-bottom: 18px; }
  }

  /* Intro card: green border + accent, more space below */
  .ways-grid .way-card.intro-top { border-color: var(--mint-ink); box-shadow: 0 14px 36px rgba(94,192,158,0.16); margin-bottom: 24px; }
  .way-card.intro-top .kicker { color: var(--mint-text); }

  /* Help-pick: wider, dark readable labels/inputs on the grey */
  .help-pick .hp-inner { max-width: 780px; }
  .help-pick .contact-form label { color: var(--ink); }
  .help-pick .contact-form input, .help-pick .contact-form textarea { border: 1px solid rgba(14,13,11,0.15); color: var(--ink); }
  .help-pick .contact-form input:focus, .help-pick .contact-form textarea:focus { border-color: var(--coral); }

  /* ============================================================
     CTA banner = intro-pass ticket on a light photo background
     ============================================================ */
  .footer-cta {
    position: relative; overflow: hidden;
    background: url('images/f.webp') center 40% / cover no-repeat;
    padding: clamp(64px, 8vw, 104px) 24px;
  }
  .footer-cta::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(rgba(233,238,241,0.78), rgba(233,238,241,0.72));
    -webkit-mask-image: none; mask-image: none; opacity: 1; background-size: auto;
  }
  .footer-cta .ticket {
    position: relative; z-index: 1; max-width: 820px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr auto;
    background: #fff; color: var(--ink); border-radius: 18px; overflow: hidden;
    box-shadow: 0 34px 74px rgba(14,13,11,0.26);
  }
  .footer-cta .tk-main { padding: 42px 44px; text-align: left; }
  .footer-cta .tk-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); margin-bottom: 12px; }
  .footer-cta .tk-main h3 { color: var(--ink); font-size: clamp(28px, 4vw, 46px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 10px; }
  .footer-cta .tk-main h3 .accent { color: var(--coral); }
  .footer-cta .tk-main p { color: var(--ink-soft); font-size: 16px; line-height: 1.5; margin: 0 0 22px; max-width: 42ch; }
  .footer-cta .tk-main .btn { background: var(--coral); color: #fff; }
  .footer-cta .tk-main .g-rating.fcta-google { display: flex; width: fit-content; margin: 0 0 18px; height: 42px; }
  .footer-cta .tk-stub {
    background: var(--coral); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 44px; border-left: 3px dashed rgba(255,255,255,0.6);
  }
  .footer-cta .tk-label { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }
  .footer-cta .tk-price { font-size: 66px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; margin: 4px 0; }
  .footer-cta .tk-days { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.92; }
  @media (max-width: 760px) {
    .footer-cta .ticket { grid-template-columns: 1fr; }
    .footer-cta .tk-main { padding: 32px 26px; }
    .footer-cta .tk-stub { border-left: none; border-top: 3px dashed rgba(255,255,255,0.6); flex-direction: row; gap: 16px; padding: 22px; }
  }

  /* Help-pick: dark heading/body + centred eyebrow on the grey */
  .help-pick .hp-text .eyebrow { display: inline-block; color: var(--yellow-deep); }
  .help-pick .hp-text h2 { color: var(--ink); }
  .help-pick .hp-text p { color: var(--ink-soft); }

  /* Mobile hero circles: flex-centred square box with a clean cluster inside */
  @media (max-width: 900px) {
    body.home .home-hero .hh-photo {
      min-height: 0; display: flex; align-items: center; justify-content: center;
      padding: 8px 0 30px; background: transparent !important;
    }
    body.home .home-hero .hh-photo::before { display: none !important; }
    body.home .home-hero .hh-circles {
      position: relative; display: block;
      width: min(320px, 82vw); aspect-ratio: 1 / 1; height: auto;
      inset: auto; top: auto; left: auto; right: auto; transform: none; margin: 0 auto;
    }
    body.home .home-hero .hc { position: absolute; aspect-ratio: 1 / 1; border: 6px solid #fff; }
    body.home .home-hero .hc.c1 { width: 60%; top: 3%;  right: 2%;  left: auto; bottom: auto; }
    body.home .home-hero .hc.c2 { width: 52%; bottom: 2%; left: 0;   top: auto; right: auto; }
    body.home .home-hero .hc.c3 { width: 38%; top: 0;   left: 31%;  right: auto; bottom: auto; }
  }

  /* FAQ cards: 3 x 3 on desktop */
  .faq-grid { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 1100px) { .faq-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 720px) { .faq-grid { grid-template-columns: 1fr; } }

  /* CTA banner: green background + brand dots + faded weekly timetable behind the ticket */
  .footer-cta { background: var(--mint-ink); }
  .footer-cta::before {
    background: none;
    background-image: radial-gradient(#fff 0.9px, transparent 1.2px);
    background-size: 8px 8px; opacity: 0.13;
    -webkit-mask-image: linear-gradient(#000 15%, transparent 88%);
            mask-image: linear-gradient(#000 15%, transparent 88%);
  }
  .footer-cta .fct-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    display: flex; align-items: center; justify-content: center; opacity: 0.16;
  }
  .footer-cta .fct-bg .fct-week { display: flex; gap: 42px; transform: scale(1.55); }
  .footer-cta .fct-bg .fct-day { display: flex; flex-direction: column; align-items: center; gap: 7px; }
  .footer-cta .fct-bg .fct-day i { width: 44px; height: 8px; border-radius: 3px; background: #fff; }
  .footer-cta .fct-bg .fct-day span { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-top: 6px; }
  .footer-cta .ticket { position: relative; z-index: 1; }

  /* Mobile hero circles: bigger, tighter cascade (mirrors desktop) */
  @media (max-width: 900px) {
    body.home .home-hero .hh-circles { width: min(374px, 92vw); }
    body.home .home-hero .hc.c1 { width: 60%; top: 6%;  right: 2%;  left: auto; bottom: auto; }
    body.home .home-hero .hc.c3 { width: 40%; top: 1%;  right: 42%; left: auto; bottom: auto; }
    body.home .home-hero .hc.c2 { width: 50%; top: 40%; right: 27%; left: auto; bottom: auto; }
  }

  /* ============================================================
     Footer Option D — logo | inline nav | social, then address + wide map
     ============================================================ */
  .footer-d .md-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 4px 0 30px; border-bottom: 1px solid var(--line); }
  .footer-d .md-logo img { height: 96px; width: auto; filter: brightness(0); display: block; }
  .footer-d .md-nav { display: flex; flex-wrap: wrap; gap: 26px; }
  .footer-d .md-nav a { font-weight: 600; color: var(--ink-2); font-size: 15px; }
  .footer-d .md-nav a:hover { color: var(--coral); }
  .footer-d .md-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 44px; padding: 34px 0 0; align-items: center; }
  .footer-d .md-addr h4 { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; }
  .footer-d .md-addr address { font-style: normal; color: var(--ink-2); line-height: 1.7; font-size: 14px; }
  .footer-d .md-map .footer-map { display: block; width: 100%; min-height: 200px; border-radius: 12px; box-shadow: 0 12px 32px rgba(14,13,11,0.10); }
  @media (max-width: 820px) {
    .footer-d .md-bar { justify-content: center; text-align: center; }
    .footer-d .md-nav { justify-content: center; }
    .footer-d .md-row { grid-template-columns: 1fr; gap: 26px; }
  }

  /* Inner-page hero: tighter gap to the first section (was too big) */
  .id-hero { padding-bottom: clamp(48px, 7vh, 84px); }
  .id-hero.has-cards { padding-bottom: clamp(44px, 6vh, 76px); }

  /* Help-pick: brand-coral eyebrow, green highlight, centred paragraph */
  .help-pick .hp-text .eyebrow { color: var(--coral); }
  .help-pick h2 .hl { color: var(--mint-ink); }
  .help-pick .hp-text p { margin-left: auto; margin-right: auto; }

  /* Help-pick form: centre opt-in, button and note; note dark + full width */
  .help-pick .hp-form { text-align: center; }
  .help-pick .hp-form .field { text-align: left; }
  .help-pick .hp-form .opt-in { justify-content: center; text-align: left; max-width: 520px; margin-left: auto; margin-right: auto; }
  .help-pick .hp-form .form-note { color: var(--ink-soft); text-align: center; max-width: none; margin: 12px auto 0; }

  /* ============================================================
     Lighten photos site-wide (like the Instagram filter)
     ============================================================ */
  img { filter: brightness(1.09) saturate(0.98); }
  /* keep logos/marks untouched */
  .nav-logo img, .hero-logo img, .polaroid .cap, .hint svg { filter: none; }
  /* background-image photos + video */
  .cc-photo, .faq-card .face.front, .usp-video { filter: brightness(1.09) saturate(0.98); }

  /* Help-pick: wider content + centre button/opt-in/note (form is a flex column) */
  .help-pick .hp-inner { max-width: 880px; }
  .help-pick .hp-form .btn, .help-pick .hp-form .opt-in, .help-pick .hp-form .form-note { align-self: center; }

  /* Mobile homepage hero circles: larger */
  @media (max-width: 900px) {
    body.home .home-hero .hh-circles { width: min(430px, 96vw); }
  }

  /* Footer: fewer divider lines (was 3 -> keep just the one above the legal) */
  .footer-a .a-news { border-bottom: none; }
  .footer-d .md-bar { border-bottom: none; }

  /* Footer: layer boundaries via a subtle grey newsletter block + one divider */
  .footer-a .a-news { background: var(--paper-2); border-bottom: 1px solid var(--line); }
  .footer-d .md-bar { border-bottom: 1px solid var(--line); }

  /* Cover the remaining photo backgrounds with the lightening filter */
  .feat .feat-img, .team-grid .tfront, .hero-bg, .price-anchor-bg, .events-teaser .et-bg, .hh-photo, .ec { filter: brightness(1.09) saturate(0.98); }

  /* Membership help-pick: wider content area */
  .help-pick .hp-inner { max-width: 1000px; }
  .help-pick .hp-text p { max-width: none; }
  .help-pick .hp-form .opt-in { max-width: 700px; }

  /* Footer: no line above the © legal row */
  .footer-a .footer-bottom { border-top: none; }

  /* Inner-page hero: shift the body up closer to the hero */
  .id-hero { padding-bottom: clamp(28px, 4vh, 56px); }
  .id-hero.has-cards { padding-bottom: clamp(28px, 4vh, 52px); }

  /* Balance heading lines so no single word drops to its own line */
  h1, h2, h3, h4, .id-hero h1, .home-hero h1, .band-head h1, .band-head h2, .ways-head h1, .ways-head h2, .faq-head h1, .faq-head h2, .tt-head h1, .tt-head h2, .split-text h2, .hp-text h2, .events-teaser h2, .welcome-text h2 { text-wrap: balance; }

  /* CTA banner: brand gradient + three circle photos peeking behind the ticket */
  .footer-cta { background: linear-gradient(135deg, var(--yellow) 0%, #fbe9a6 100%); }
  .footer-cta .fcta-circles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .footer-cta .fc { position: absolute; border-radius: 50%; background-size: cover; background-position: center; border: 6px solid rgba(255,255,255,0.92); box-shadow: 0 22px 54px rgba(14,13,11,0.26); }
  .footer-cta .fc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,0.14); pointer-events: none; }
  .footer-cta .fc.c1 { width: 250px; height: 250px; top: -18px; right: 6%; }
  .footer-cta .fc.c2 { width: 178px; height: 178px; bottom: -14px; left: 9%; }
  .footer-cta .fc.c3 { width: 116px; height: 116px; bottom: 30px; left: 20%; }
  .footer-cta .fc.c4 { width: 190px; height: 190px; top: -34px; left: 4%; }
  .footer-cta .fc.c5 { width: 196px; height: 196px; bottom: -26px; right: 8%; }
  .footer-cta .fc.c6 { width: 112px; height: 112px; top: 22px; right: 21%; }
  .footer-cta .ticket { z-index: 2; }
  @media (max-width: 1080px) { .footer-cta .fc.c6 { display: none; } }
  @media (max-width: 820px) {
    .footer-cta .fc.c1 { width: 150px; height: 150px; top: -48px; right: -30px; }
    .footer-cta .fc.c2 { width: 116px; height: 116px; bottom: -40px; left: -18px; }
    .footer-cta .fc.c3 { width: 80px; height: 80px; bottom: 14px; left: 8%; }
    .footer-cta .fc.c4 { width: 118px; height: 118px; top: -40px; left: -30px; }
    .footer-cta .fc.c5 { width: 120px; height: 120px; bottom: -38px; right: -26px; }
  }

  /* ============================================================
     Strong, consistent photo lightening (forced over existing filters)
     ============================================================ */
  img, .hc, .cc-photo, .faq-card .face.front, .usp-video, .feat .feat-img,
  .team-grid .tfront, .hero-bg, .price-anchor-bg, .events-teaser .et-bg,
  .hh-photo, .ec, .lx-bg, .fb-img, .footer-cta .fc, .hero-cards .polaroid img, .polaroid img {
    filter: brightness(1.18) saturate(0.96) !important;
  }
  .ig-strip .ig-strip-row img { filter: brightness(1.2) saturate(0.96) !important; }
  /* logos & marks stay untouched */
  .nav-logo img, .hero-logo img { filter: none !important; }
  .footer-brand img, .footer-a .a-brand img, .md-logo img, .footer-d .md-logo img { filter: brightness(0) !important; }

  /* Help-pick opt-in: full width */
  .help-pick .hp-form .opt-in { max-width: none; }

  /* Lightness (soft, faded wash) — not a harsh brightness boost */
  img, .hc, .cc-photo, .faq-card .face.front, .usp-video, .feat .feat-img,
  .team-grid .tfront, .hero-bg, .price-anchor-bg, .events-teaser .et-bg,
  .hh-photo, .ec, .lx-bg, .fb-img, .footer-cta .fc, .hero-cards .polaroid img, .polaroid img {
    filter: brightness(1.08) contrast(0.84) saturate(0.9) !important;
  }
  .ig-strip .ig-strip-row img { filter: brightness(1.1) contrast(0.85) saturate(0.9) !important; }
  .nav-logo img, .hero-logo img { filter: none !important; }
  .footer-brand img, .footer-a .a-brand img, .md-logo img, .footer-d .md-logo img { filter: brightness(0) !important; }

  /* Non-home hero: extra top padding, pull first section closer */
  .id-hero { padding-top: clamp(176px, 22vh, 234px) !important; padding-bottom: clamp(78px, 9vh, 118px) !important; }
  .id-hero.has-cards { padding-bottom: clamp(80px, 9vh, 122px) !important; }
  main.article > section:first-of-type, .id-hero + section, .id-hero + .split, .id-hero + .band { padding-top: clamp(26px, 4vh, 52px) !important; }

  /* Heat levels section (home): coral -> green gradient + brand dots + photo cards */
  .heatband { position: relative; overflow: hidden; padding: clamp(64px, 9vh, 110px) 0;
    background: linear-gradient(122deg, var(--coral) 0%, #e5876c 46%, var(--mint-ink) 100%); }
  .heatband::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1.4px);
    background-size: 9px 9px; opacity: 0.16; }
  .heatband .wrap { position: relative; z-index: 1; }
  .heatband .band-head { text-align: center; max-width: 640px; margin: 0 auto; }
  .heatband .band-head .eyebrow { color: rgba(255,255,255,0.92); }
  .heatband .band-head h1, .heatband .band-head h2 { color: #fff; }
  .heatband .band-head h1 .accent, .heatband .band-head h2 .accent { color: var(--yellow); }
  .heatband .band-head p { color: rgba(255,255,255,0.94); }
  .heat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(34px, 5vh, 52px); }
  .heat-card {
    position: relative; border-radius: 20px; overflow: hidden; background: #fff;
    box-shadow: 0 26px 58px rgba(14,13,11,0.22);
  }
  .heat-photo { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
  .heat-photo::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.14); pointer-events: none; }
  .heat-kicker {
    position: absolute; left: 16px; bottom: 14px; z-index: 2;
    font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px; color: #fff;
    box-shadow: 0 8px 20px rgba(14,13,11,0.28);
  }
  .heat-card.hot  .heat-kicker { background: var(--coral); }
  .heat-card.warm .heat-kicker { background: var(--yellow-deep); color: var(--ink); }
  .heat-card.cool .heat-kicker { background: var(--mint-ink); }
  .heat-body { padding: 24px 26px 28px; }
  .heat-card h3 { font-size: clamp(21px, 2.3vw, 27px); font-weight: 900; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 10px; }
  .heat-card p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 18px; }
  .heat-eg { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); opacity: 0.72; border-top: 1px solid var(--line); padding-top: 14px; }
  @media (max-width: 820px) { .heat-grid { grid-template-columns: 1fr; gap: 16px; } }

  /* Membership benefits: editorial split (photo feature + colour-chip list) */
  .benefits { padding: clamp(60px, 8vh, 100px) 0; background: var(--paper-2); }
  .benefits-split { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(26px, 4vw, 52px); align-items: stretch; }
  .bn-feature { position: relative; border-radius: 22px; overflow: hidden; min-height: 480px;
    background-size: cover; background-position: center; box-shadow: 0 28px 60px rgba(14,13,11,0.20); }
  .bn-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(20,28,26,0.10) 30%, rgba(20,28,26,0.86)); }
  .bn-feature-cap { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(26px, 3vw, 42px); }
  .bn-feature-cap .eyebrow { display: inline-block; color: rgba(255,255,255,0.92); }
  .bn-feature-cap h2 { color: #fff; font-size: clamp(29px, 3.2vw, 44px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.03; margin: 8px 0 10px; text-wrap: balance; }
  .bn-feature-cap p { color: rgba(255,255,255,0.9); font-size: 15px; line-height: 1.55; max-width: 40ch; margin: 0; }
  .bn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: center; }
  .bn-list li { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; transition: transform .2s ease, box-shadow .2s ease; }
  .bn-list li:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(14,13,11,0.10); }
  .bn-ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(14,13,11,0.14); }
  .bn-ic svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .bn-ic.coral { background: var(--coral); }
  .bn-ic.mint { background: var(--mint-ink); }
  .bn-ic.purple { background: var(--purple); }
  .bn-ic.yellow { background: var(--yellow-deep); }
  .bn-list h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0 0 4px; letter-spacing: -0.01em; }
  .bn-list p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
  @media (max-width: 900px) { .benefits-split { grid-template-columns: 1fr; } .bn-feature { min-height: 300px; } }

  /* Non-home hero: short centred brand-dot divider line, fading out at both ends */
  .id-hero::before {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(30px, 4vh, 50px); z-index: 3; pointer-events: none;
    width: min(300px, 56%); height: 16px;
    background-image: radial-gradient(circle, var(--tcol, #5ec09e) 0.8px, transparent 1px);
    background-size: 16px 16px; background-repeat: repeat-x; background-position: center; opacity: 0.6;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  }
  /* Non-home hero headings: a touch smaller */
  .id-hero h1 { font-size: clamp(38px, 6.6vw, 82px); }
  .id-hero.has-cards h1 { font-size: clamp(36px, 5vw, 66px); }

  /* Momence events embed placeholder (events page) */
  .momence-embed { margin-top: clamp(24px, 4vh, 44px); }
  .momence-placeholder {
    border: 2px dashed var(--line); border-radius: 20px; background: #fff;
    padding: clamp(40px, 6vw, 72px) 28px; text-align: center; min-height: 320px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  }
  .mp-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint-text); background: rgba(94,192,158,0.14); padding: 6px 13px; border-radius: 999px; }
  .mp-title { font-size: clamp(22px, 3vw, 30px); font-weight: 900; color: var(--ink); margin: 6px 0 0; letter-spacing: -0.02em; }
  .mp-sub { font-size: 15px; color: var(--ink-soft); max-width: 48ch; line-height: 1.55; margin: 0 0 8px; }

  /* --- Homepage "Latest" — editorial bento, solid colour caption bar --- */
  .lx-sec { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
  .lx-sec .band-head { text-align: left; max-width: none; margin: 0 0 18px; }
  .lx-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 190px; gap: 14px; }
  @media (max-width: 760px) { .lx-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .lx-grid { grid-template-columns: 1fr; } }
  .lx-tile { position: relative; border-radius: 16px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; }
  .lx-tile.lx-big { grid-row: span 2; }
  .lx-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(1.18) saturate(0.96); z-index: 0; transition: transform 0.35s ease; }
  .lx-tile:hover .lx-bg { transform: scale(1.05); }
  .lx-tag { position: absolute; top: 14px; left: 14px; z-index: 3; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
  .lx-bar { position: relative; z-index: 2; font-weight: 900; letter-spacing: -0.01em; font-size: 14px; padding: 12px 15px; line-height: 1.16; }
  .lx-big .lx-bar { font-size: 19px; padding: 16px 18px; }
  /* flip tiles (Event, Class of the month): front image, back copy + link */
  .lx-tile.lx-flip { display: block; }
  .lx-flip .lx-flipper { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.5,0,0.1,1); }
  .lx-flip:hover .lx-flipper, .lx-flip.flipped .lx-flipper { transform: rotateY(180deg); }
  .lx-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; overflow: hidden; }
  .lx-face.lx-front { display: flex; flex-direction: column; justify-content: flex-end; }
  .lx-face.lx-back { transform: rotateY(180deg); text-decoration: none; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 16px 18px; }
  .lx-big .lx-face.lx-back { padding: 26px 30px; gap: 9px; }
  .lx-flip:hover .lx-bg, .lx-flip.flipped .lx-bg { transform: none; }
  /* When the card is flipped, stop the (now-hidden) front face intercepting
     clicks so the back-face link is actually clickable. */
  .lx-flip:hover .lx-front, .lx-flip.flipped .lx-front { pointer-events: none; }
  .lx-flip:hover .lx-back, .lx-flip.flipped .lx-back { pointer-events: auto; }
  .lx-back-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
  .lx-back p { margin: 0; font-weight: 900; letter-spacing: -0.01em; font-size: 14px; line-height: 1.22; }
  .lx-big .lx-back p { font-size: 21px; }
  .lx-back-cta { font-size: 13px; font-weight: 800; }
  /* --- Free home yoga signup --- */
  .fh-form { max-width: 470px; margin: 4px auto 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .fh-form input[type="email"] { flex: 1 1 220px; height: 52px; border-radius: 999px; border: 1px solid var(--line); padding: 0 20px; font: inherit; font-size: 15px; background: #fff; color: var(--ink); }
  .fh-form input[type="email"]::placeholder { color: var(--muted); }
  .fh-form input[type="email"]:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(235,103,104,0.16); }
  .fh-form .btn { height: 52px; }
  .fh-note { text-align: center; font-size: 13.5px; color: var(--ink-soft); margin: 16px auto 0; max-width: 46ch; }

  /* --- Intro-pass CTA (solid coral spotlight) --- */
  .intro-cta { position: relative; overflow: hidden; background: var(--coral); color: #fff; text-align: center; padding: clamp(60px, 8vw, 96px) 24px; }
  .intro-cta .wrap { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
  .intro-cta .cta-pill { margin: 0 0 18px; }
  .intro-cta .g-rating .g-info { flex-direction: row; align-items: center; gap: 6px; }
  .intro-cta .g-rating .g-num, .intro-cta .g-rating .g-count { color: var(--ink); }
  .intro-cta .cta-blob { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.09); z-index: 0; }
  .intro-cta .cta-blob.b1 { width: 320px; height: 320px; top: -110px; left: -70px; }
  .intro-cta .cta-blob.b2 { width: 240px; height: 240px; bottom: -100px; right: 6%; }
  .intro-cta .cta-stamp { position: absolute; top: clamp(20px, 4vw, 40px); right: clamp(18px, 5vw, 64px); z-index: 2; background: #fff; color: var(--coral); font-weight: 900; font-size: 22px; width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: rotate(9deg); box-shadow: 0 14px 32px rgba(0,0,0,0.18); }
  .intro-cta .cta-eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 14px; }
  .intro-cta h2 { font-size: clamp(32px, 5.5vw, 56px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 12px; color: #fff; }
  .intro-cta h2 .accent { color: var(--yellow); }
  .intro-cta p { font-size: 17px; color: rgba(255,255,255,0.92); margin: 0 auto 26px; max-width: 44ch; line-height: 1.5; }
  .intro-cta .btn { background: #fff; color: var(--coral); box-shadow: 0 12px 30px rgba(0,0,0,0.16); }
  .intro-cta .btn:hover { background: var(--ink); color: #fff; }
  .intro-cta .cta-google { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; opacity: 0.96; }
  .intro-cta .cta-google:hover { text-decoration: underline; }
  .intro-cta .cta-stars { color: var(--yellow); letter-spacing: 1px; font-size: 14px; }
  @media (max-width: 560px) { .intro-cta .cta-stamp { width: 60px; height: 60px; font-size: 17px; top: 16px; right: 16px; } }

  /* --- Footer mailing-list preferences (Footer B) --- */
  .footer-a .a-news .fn-prefs { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 20px; }
  .fn-prefs .pref-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 640px) { .fn-prefs .pref-cards { grid-template-columns: 1fr; } }
  .fn-prefs .pref { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; border: 1.5px solid var(--line); border-radius: 16px; padding: 18px 12px; cursor: pointer; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
  .fn-prefs .pref input { position: absolute; opacity: 0; width: 0; height: 0; }
  .fn-prefs .pref:has(input:checked) { border-color: var(--coral); box-shadow: 0 8px 22px rgba(235,103,104,0.14); }
  .fn-prefs .pref:focus-within { outline: 2px solid var(--coral); outline-offset: 2px; }
  .fn-prefs .pref strong { font-size: 15px; font-weight: 900; margin-top: 5px; color: var(--ink); }
  .fn-prefs .pref > span:last-child { font-size: 12px; color: var(--ink-soft); }
  .fn-prefs .pref-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; }
  .fn-prefs .pi-coral { background: var(--coral-soft); color: var(--coral-deep); }
  .fn-prefs .pi-mint { background: var(--mint-bg); color: var(--mint-text); }
  .fn-prefs .pi-purple { background: #efeaf7; color: var(--purple); }
  .fn-prefs .fn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 480px; width: 100%; margin: 0 auto; }
  .fn-prefs .fn-row input[type="email"] { flex: 1 1 220px; height: 52px; border-radius: 999px; border: 1px solid var(--line); padding: 0 20px; font: inherit; font-size: 15px; background: #fff; color: var(--ink); }
  .fn-prefs .fn-row input[type="email"]:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(235,103,104,0.16); }

  /* --- About nav dropdown --- */
  .nav-links .nav-group { position: relative; display: flex; align-items: center; }
  .nav-caret { display: inline-block; margin-left: 5px; font-size: 9px; vertical-align: middle; opacity: 0.8; transition: transform 0.2s ease; }
  .nav-group:hover .nav-caret, .nav-group:focus-within .nav-caret { transform: rotate(180deg); }
  .nav-sub {
    position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
    margin-top: 6px; min-width: 216px;
    display: flex; flex-direction: column; gap: 2px;
    background: #fff; border-radius: 14px; padding: 9px;
    box-shadow: 0 18px 44px rgba(14,13,11,0.18);
    opacity: 0; visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 95;
  }
  .nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
  }
  /* hover bridge so the menu doesn't close crossing the gap */
  .nav-group::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
  .nav-sub a {
    color: var(--ink) !important; text-shadow: none !important;
    font-size: 12px; letter-spacing: 0.08em;
    padding: 11px 14px; border-radius: 9px; white-space: nowrap;
  }
  .nav-sub a:hover { color: var(--coral) !important; background: var(--paper-2, #e9eef1); }

  @media (max-width: 1024px) {
    .nav-links .nav-group { flex-direction: column; align-items: flex-start; width: 100%; }
    .nav-caret { display: none; }
    .nav-group::after { display: none; }
    .nav-sub {
      position: static; transform: none; opacity: 1; visibility: visible;
      min-width: 0; width: 100%; background: transparent; box-shadow: none;
      padding: 0 0 0 16px; margin: 0; gap: 0;
    }
    /* Keep the sub-menu stacked in place when About is tapped (focus-within) on
       mobile. Without this, the desktop translate(-50%) slides it off-screen. */
    .nav-group:hover .nav-sub,
    .nav-group:focus-within .nav-sub { transform: none; }
    .nav-sub a {
      color: rgba(255,255,255,0.72) !important; font-size: 15px;
      padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
      letter-spacing: 0.04em; white-space: normal;
    }
    .nav-sub a:hover { background: transparent; color: #fff !important; }
  }

  /* --- Footer combined band (Footer B, split) --- */
  .footer-a .a-news .fb-band { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.25fr; gap: 34px; align-items: center; text-align: left; }
  @media (max-width: 760px) { .footer-a .a-news .fb-band { grid-template-columns: 1fr; gap: 26px; } }
  .footer-a .a-news .fb-left h2 { margin: 8px 0 6px; }
  .footer-a .a-news .fb-left p { margin: 0 0 18px; max-width: none; color: var(--ink-soft); font-size: 14.5px; }
  .footer-a .a-news .fb-left .fn-form { margin: 0; justify-content: flex-start; max-width: 430px; }
  .footer-a .a-news .fb-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
  .fb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  @media (max-width: 520px) { .fb-cards { grid-template-columns: 1fr; } }
  .fb-sc { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--ink); background: #fff; }
  .fb-img { height: 92px; background-size: cover; background-position: center; filter: brightness(1.18) saturate(0.96); }
  .fb-b { padding: 12px 14px 14px; position: relative; }
  .fb-dot { position: absolute; top: -6px; left: 14px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; }
  .fb-b strong { display: block; font-size: 15px; font-weight: 900; letter-spacing: -0.01em; margin-top: 2px; color: var(--ink); }
  .fb-s { font-size: 12.5px; color: var(--ink-soft); }

  /* ============================================================
     DEFINITIVE FIX: hero Google rating pill always clickable
     (a later desktop rule reset .hh-overlay z-index to auto/static,
     letting decorative washes/circles cover the pill; force it top)
     ============================================================ */
  body.home .home-hero .g-rating { position: relative !important; z-index: 60 !important; pointer-events: auto !important; }
  body.home .home-hero .g-rating * { pointer-events: none !important; }
  body.home .home-hero .hh-photo::before,
  body.home .home-hero .hh-photo::after,
  body.home .home-hero .hh-panel::before,
  body.home .home-hero .hh-panel::after,
  body.home .home-hero .hh-circles,
  body.home .home-hero .hh-circles *,
  body.home .home-hero .orb { pointer-events: none !important; }

  /* --- polish batch (7 Jul) --- */
  /* theme-yellow eyebrows readable on light bg */
  body.theme-yellow .band-head .eyebrow, body.theme-yellow .id-hero .eyebrow { color: var(--coral) !important; }
  /* footer signup note: uppercase button-style label + more breathing room under the email box */
  .footer-a .a-news .fb-note { margin-top: 30px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; }
  /* footer "About" drop-up menu */
  .footer-d .md-nav .md-group { position: relative; display: inline-flex; align-items: center; }
  .footer-d .md-nav .md-sub { position: absolute; bottom: 100%; left: 0; margin-bottom: 10px; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-width: 190px; box-shadow: 0 -12px 30px rgba(14,13,11,0.16); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 20; }
  .footer-d .md-nav .md-group:hover .md-sub, .footer-d .md-nav .md-group:focus-within .md-sub { opacity: 1; visibility: visible; transform: translateY(0); }
  .footer-d .md-nav .md-sub a { font-size: 13px; padding: 8px 12px; border-radius: 8px; white-space: nowrap; color: var(--ink); }
  .footer-d .md-nav .md-sub a:hover { background: var(--paper-2, #e9eef1); color: var(--coral); }
  @media (max-width: 920px) { .footer-d .md-nav .md-sub { display: none; } }
  /* events type cards: little rounded photo */
  .cc .ev-photo { height: 132px; border-radius: 14px; background-size: cover; background-position: center; margin-bottom: 16px; filter: brightness(1.18) saturate(0.96); }

  /* --- polish batch 2 (7 Jul) --- */
  /* a stray rule was rendering band-head eyebrows brand-yellow (low contrast); force the theme deep colour */
  .band-head .eyebrow { color: var(--tcol-deep, var(--coral)) !important; }
  body.theme-yellow .band-head .eyebrow { color: var(--coral) !important; }
  /* footer signup note: smaller + more room under the email box */
  .footer-a .a-news .fb-note { font-size: 10px !important; margin-top: 44px !important; }

  /* --- Thank-you / confirmation card on a photo background --- */
  .ty-hero { position: relative; overflow: hidden; padding: clamp(104px, 15vw, 140px) 24px clamp(56px, 9vw, 104px); }
  .ty-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(1.18) saturate(0.96); z-index: 0; }
  .ty-hero::after { content: ""; position: absolute; inset: 0; background: rgba(14,13,11,0.30); z-index: 1; }
  .ty-hero .wrap { position: relative; z-index: 2; display: flex; justify-content: center; }
  .ty-card { max-width: 540px; width: 100%; background: #fff; border-radius: 22px; padding: clamp(32px,5vw,46px) clamp(24px,4vw,42px); text-align: center; box-shadow: 0 40px 80px rgba(0,0,0,0.34); }
  .ty-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--mint-bg); color: var(--mint-text); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 15px; border-radius: 999px; margin-bottom: 18px; }
  .ty-chip svg { width: 14px; height: 14px; }
  .ty-card h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 12px; color: var(--ink); }
  .ty-card h1 .ty-hi { color: var(--coral); }
  .ty-card p { font-size: 16.5px; color: var(--ink-soft); margin: 0; line-height: 1.6; }
  .ty-perf { border-top: 2px dashed var(--line); margin: 26px calc(-1 * clamp(24px,4vw,42px)) 0; padding: 22px clamp(24px,4vw,42px) 0; }
  .ty-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

  /* --- Thank-you "before your class" tips: white cards, brand-colour badges --- */
  .ty-tips { background: #fff; }
  .ty-tips .tt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 820px) { .ty-tips .tt-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .ty-tips .tt-grid { grid-template-columns: 1fr; } }
  .ty-tips .tt-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px; text-align: left; }
  .ty-tips .tt-n { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; font-weight: 900; font-size: 15px; margin-bottom: 14px; }
  .ty-tips .tt-card h3 { font-size: 17px; font-weight: 900; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ink); }
  .ty-tips .tt-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

  /* --- Blog index masonry --- */
  .blog-masonry { column-count: 3; column-gap: 20px; max-width: 1120px; margin: 0 auto; }
  @media (max-width: 900px) { .blog-masonry { column-count: 2; } }
  @media (max-width: 560px) { .blog-masonry { column-count: 1; } }
  .bpost { break-inside: avoid; margin: 0 0 20px; display: block; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 26px rgba(14,13,11,0.05); text-decoration: none; color: var(--ink); transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .bpost:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14,13,11,0.12); }
  .bpost .bimg { position: relative; overflow: hidden; }
  .bpost .bimg-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(1.18) saturate(0.96); }
  .bpost .btag { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
  .bpost .bbody { padding: 18px 18px 20px; }
  .bpost .bmeta { font-size: 12px; color: var(--muted); font-weight: 700; margin: 0 0 8px; }
  .bpost .bbody h3 { font-size: 18px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 8px; color: var(--ink); }
  .bpost .bexc { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

  /* --- Blog article (post pages) --- */
  .article { max-width: 720px; margin: 0 auto; padding: clamp(92px,12vw,120px) 24px clamp(44px,6vw,68px); }
  body:has(.article) { background: var(--paper-2, #e9eef1); }
  .article .a-back { display: inline-block; font-weight: 800; font-size: 13px; color: var(--coral); text-decoration: none; margin: 0 0 18px; }
  .article .a-cat { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin: 0 0 14px; }
  .article h1 { font-size: clamp(30px,5vw,46px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 12px; }
  .article .a-meta { font-size: 13px; color: var(--muted); font-weight: 700; margin: 0 0 24px; }
  .article .a-hero { border-radius: 18px; overflow: hidden; margin: 0 0 30px; aspect-ratio: 16/9; background-size: cover; background-position: center; filter: brightness(1.18) saturate(0.96); }
  .article .a-body > p { font-size: 17.5px; line-height: 1.75; color: var(--ink-2); margin: 0 0 20px; }
  .article .a-body > h2 { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; margin: 34px 0 12px; color: var(--ink); }
  .article .a-body > h3 { font-size: 20px; font-weight: 900; letter-spacing: -0.01em; margin: 26px 0 10px; color: var(--ink); }
  .article .a-body ul { margin: 0 0 20px; padding-left: 22px; }
  .article .a-body li { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin: 0 0 8px; }
  .article .a-body a { color: var(--coral); }

  /* --- Free home yoga on-demand library --- */
  .lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
  @media (max-width: 820px) { .lib-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .lib-grid { grid-template-columns: 1fr; } }
  .lib-card { display: block; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 26px rgba(14,13,11,0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .lib-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14,13,11,0.12); }
  .lib-thumb { position: relative; height: 168px; background-size: cover; background-position: center; filter: brightness(1.18) saturate(0.96); display: flex; align-items: center; justify-content: center; }
  .lib-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(14,13,11,0.18); }
  .lib-play { position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.94); color: var(--coral); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.22); transition: transform 0.2s ease; }
  .lib-play svg { width: 22px; height: 22px; margin-left: 2px; }
  .lib-card:hover .lib-play { transform: scale(1.08); }
  .lib-dur { position: absolute; z-index: 1; bottom: 12px; right: 12px; background: rgba(14,13,11,0.72); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
  .lib-b { padding: 15px 16px 18px; }
  .lib-cat { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral); }
  .lib-b h3 { font-size: 17px; font-weight: 900; letter-spacing: -0.01em; margin: 5px 0 4px; }
  .lib-meta { font-size: 12.5px; color: var(--muted); font-weight: 700; }
  .lib-note { text-align: center; font-size: 14px; color: var(--ink-soft); margin: 28px auto 0; max-width: 60ch; }
  .lib-note a { color: var(--coral); font-weight: 700; }

  /* ============================================================
     MOBILE HERO TUNE — smaller logo + google pill, bigger headline,
     tighter vertical rhythm so it flows. Appended last to win the
     cascade cleanly; safe to remove as one block.
     ============================================================ */
  @media (max-width: 900px) {
    /* logo smaller */
    body.home .home-hero .hero-logo { margin-bottom: 14px; }
    body.home .home-hero .hero-logo img { height: 42px; }
    /* google pill smaller (panel pill is the one shown on mobile) */
    body.home .home-hero .hero-google { margin: 0 0 16px; }
    body.home .home-hero .g-rating { gap: 8px; }
    body.home .home-hero .g-rating .g-word svg { height: 14px; }
    body.home .home-hero .g-rating .g-info { gap: 5px; }
    body.home .home-hero .g-rating .g-stars { font-size: 12px; }
    body.home .home-hero .g-rating .g-num { font-size: 12px; }
    body.home .home-hero .g-rating .g-count { font-size: 10px; }
    /* headline bigger + tighter rhythm */
    body.home .home-hero h1 { font-size: clamp(36px, 8.6vw, 60px); line-height: 1.02; margin-top: 4px; }
    body.home .home-hero .lead { margin-top: 14px; font-size: 16px; }
    body.home .home-hero .hero-cta-row { margin-top: 22px; }
  }
  @media (max-width: 560px) {
    body.home .home-hero .hero-logo img { height: 38px; }
    body.home .home-hero h1 { font-size: clamp(34px, 9.4vw, 54px); }
  }

  /* ============================================================
     H-STYLE HERO PHOTO — single clean cover image on every screen
     (replaces the three-circle cascade). Appended last to win the
     mobile circle re-enables; remove this block to restore circles.
     ============================================================ */
  body.home .home-hero .hh-circles { display: none !important; }
  @media (max-width: 900px) {
    body.home .home-hero .hh-photo {
      display: block !important; overflow: hidden !important;
      min-height: 46vh; padding: 0 !important;
      background-image: url('images/hero.webp') !important;
      background-color: transparent !important;
      background-size: cover !important;
      background-position: center 32% !important;
      background-repeat: no-repeat !important;
    }
    body.home .home-hero .hh-photo::before { display: none !important; }
  }

/* ============================================================
   FORM PRIVACY STATEMENT
   Sits where the mailing-list opt-in checkbox used to be, just
   above each form's submit button. (An earlier footer-wide
   privacy band was removed in favour of this.)
   ============================================================ */
.form-privacy {
  margin: 4px 0 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}
.form-privacy a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.form-privacy a:hover { color: var(--coral-deep); }

/* ============================================================
   HERO CLEANUP + TRUST BAR 2x2 (Jul 2026 owner revisions)
   - map blob removed, second CTA removed, one Google pill
   - location pill now sits under the CTA button (.hero-loc)
   - trust bar: 2x2 grid on desktop, 1-per-view auto slider on mobile
   ============================================================ */

/* Location under the button */
body.home .home-hero .hero-loc { margin-top: 20px; }
body.home .home-hero .hero-loc .loc-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 0; height: auto; min-height: 0;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 800;
  color: var(--ink-soft); box-shadow: none;
}
body.home .home-hero .hero-loc .loc-pill svg { color: var(--coral); width: 14px; height: 14px; flex: none; }

/* Google pill: one only, and smaller at every size */
body.home .home-hero .hero-google { display: inline-flex; margin: 0 0 18px; padding: 7px 12px; border-radius: 11px; gap: 8px; }
body.home .home-hero .hero-google .g-word svg { height: 14px; }
body.home .home-hero .hero-google .g-info { gap: 5px; }
body.home .home-hero .hero-google .g-stars { font-size: 11.5px; letter-spacing: 0.5px; }
body.home .home-hero .hero-google .g-num { font-size: 11.5px; }
body.home .home-hero .hero-google .g-count { font-size: 10px; }

/* Trust bar */
/* Trust bar: one-per-view auto slider at ALL widths (desktop now matches mobile). */
.trust-bar .trust-grid {
  display: flex; gap: 0; max-width: 760px; margin: 0 auto;
  overflow-x: auto; scroll-snap-type: x proximity; touch-action: pan-x; overscroll-behavior-x: contain; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;
}
.trust-bar .trust-grid::-webkit-scrollbar { display: none; }
.trust-bar .trust-grid .trust-item {
  flex: 0 0 100%; scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
  gap: 9px; text-align: center; line-height: 1.3;
  font-size: 12px; letter-spacing: 0.14em;
}
.trust-bar .trust-grid .trust-item::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--yellow); flex: none;
}
.trust-bar .trust-dots {
  display: flex; justify-content: center; gap: 7px; margin-top: 14px;
}
.trust-bar .trust-dots button {
  width: 6px; height: 6px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.4); cursor: pointer; transition: background 0.25s ease, transform 0.25s ease;
}
.trust-bar .trust-dots button.is-active { background: var(--yellow); transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) {
  .trust-bar .trust-grid { scroll-behavior: auto; }
}

/* ============================================================
   CTA BANNER — light grey (was solid coral), Jul 2026
   Applies to the shared .intro-cta band on every page.
   ============================================================ */
.intro-cta { background: var(--paper-2); color: var(--ink); }
.intro-cta .cta-blob { background: rgba(14,13,11,0.035); }
.intro-cta .cta-stamp { background: var(--coral); color: #fff; box-shadow: 0 14px 32px rgba(235,103,104,0.30); }
.intro-cta .cta-eyebrow { color: var(--coral-deep); }   /* 3.7:1 on the grey; coral itself is only 2.7:1 */
.intro-cta h2 { color: var(--ink); }
.intro-cta h2 { line-height: 1.4; }   /* room for the pill highlight */
.intro-cta h2 .accent {
  display: inline-block;
  color: #fff;
  background: var(--green);   /* brand mint #5ec09e */
  padding: 0.10em 0.5em 0.22em;   /* asymmetric top/bottom optically centres the word */
  border-radius: 14px;
  line-height: 1;
  text-shadow: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.intro-cta p { color: var(--ink); }   /* ink-soft is 4.25:1 on this grey, under AA */
.intro-cta .btn { background: var(--coral); color: #fff; box-shadow: 0 12px 30px rgba(235,103,104,0.28); }
.intro-cta .btn:hover { background: var(--ink); color: #fff; }
.intro-cta .cta-pill { box-shadow: 0 8px 22px rgba(14,13,11,0.10); }
.intro-cta .cta-google { color: var(--ink-soft); }

/* Timetable footer: book + browse, side by side */
.timetable .tt-foot { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   HERO IMAGE UP (mobile) — the copy panel was holding a
   84vh min-height, pushing the photo below the fold. Let the
   panel size to its content so the image sits in view.
   ============================================================ */
@media (max-width: 900px) {
  body.home .home-hero { min-height: 0; }
  body.home .home-hero .hh-panel {
    min-height: 0;
    padding-top: clamp(84px, 11vh, 104px);
    padding-bottom: clamp(26px, 4vh, 38px);
  }
  body.home .home-hero .hh-photo { min-height: 38vh; }
}

/* ============================================================
   APPLICATION MODAL — work-with-us.html
   One general application popup shared by the studio assistant,
   teaching and studio hire sections. Appended Jul 2026.
   ============================================================ */
body.apply-open { overflow: hidden; }

.apply-modal[hidden] { display: none; }
.apply-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 4vh, 48px) 16px;
  overflow-y: auto;
}
.apply-modal .apply-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(73, 84, 90, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.apply-modal .apply-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: auto;
  background: var(--paper, #fff);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 42px);
  box-shadow: 0 30px 70px rgba(14, 13, 11, 0.28);
}
.apply-modal .apply-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2, #e9eef1);
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.apply-modal .apply-close svg { width: 18px; height: 18px; }
.apply-modal .apply-close:hover { background: var(--coral); color: #fff; transform: translateY(-1px); }
.apply-modal .apply-close:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

.apply-modal .apply-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 12px;
}
.apply-modal h2 {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 12px;
  padding-right: 44px;
}
.apply-modal .apply-intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 46ch;
}
.apply-modal .contact-form textarea { min-height: 120px; }

@media (max-width: 560px) {
  .apply-modal { padding: 12px; }
  .apply-modal .apply-panel { border-radius: 20px; }
  .apply-modal .contact-form .btn { align-self: stretch; justify-content: center; }
}

/* ============================================================
   MEET THE TEAM — smaller cards, click opens a bio dialog
   Source portraits are 320x320. The old grid stretched them to
   ~359x478 (upscaled and hard-cropped), which read as soft.
   Cards are now square and below 320px, so they stay crisp.
   The flip is gone: hover-flip fired accidentally and did nothing
   on touch, and expanding in-grid shoved the layout around.
   ============================================================ */
.team-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 1160px;   /* 5 columns of teacher cards */
}
.team-grid .tcard { perspective: none; cursor: pointer; transition: transform .2s ease; border-radius: 16px; }
.team-grid .tcard:hover { transform: translateY(-4px); }
.team-grid .tcard:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.team-grid .tflip { aspect-ratio: 1 / 1; transform: none !important; transition: none; }
.team-grid .tfront { position: absolute; inset: 0; }
.team-grid .tback { display: none; }   /* bio source for the dialog, kept in the HTML */

.team-grid .tfront-label { padding: 14px; }
.team-grid .tfront-label h3 { font-size: 17px; }
.team-grid .tfront-label .role { font-size: 11.5px; line-height: 1.35; }
.team-grid .tfront-label::after {
  content: "Read more";
  display: block; margin-top: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

/* --- bio dialog --- */
body.tm-open { overflow: hidden; }
.team-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.team-modal[hidden] { display: none; }
.team-modal .tm-backdrop { position: absolute; inset: 0; background: rgba(14,13,11,0.58); }
.team-modal .tm-panel {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 260px 1fr;
  width: min(720px, 100%); max-height: 88vh; overflow: auto;
  background: var(--paper); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(14,13,11,0.34);
}
.team-modal .tm-photo { background-size: cover; background-position: center top; min-height: 320px; }
.team-modal .tm-body { padding: 34px 34px 36px; }
.team-modal .tm-body h3 { font-size: 30px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; }
.team-modal .tm-body .role {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--purple-deep); margin-bottom: 16px;
}
.team-modal .tm-body p { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.team-modal .tm-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--ink);
  font-size: 24px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(14,13,11,0.18);
}
.team-modal .tm-close:hover { background: var(--ink); color: #fff; }

@media (max-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .team-modal { padding: 16px; }
  .team-modal .tm-panel { grid-template-columns: 1fr; }
  .team-modal .tm-photo { min-height: 210px; }
  .team-modal .tm-body { padding: 24px 24px 28px; }
  .team-modal .tm-body h3 { font-size: 25px; }
}

  /* ============================================================
     Momence embeds — brand theming (schedule + reviews widgets read
     these CSS custom properties) and the consent-gated slot wrapper.
     ============================================================ */
  :root {
    --momenceColorBackground: #ffffff;
    --momenceColorPrimary: 235, 103, 104;   /* coral, as R,G,B */
    --momenceColorBlack: 63, 74, 80;         /* ink */
    --momenceReviewColorBackground: #ffffff;
    --momenceBorder: 0px solid #000000;
    --momenceBorderRadius: 14px;
    --momenceBoxShadow: 0 10px 30px rgba(14, 13, 11, 0.06);
  }
  .momence-slot { min-height: 140px; }
  .momence-slot .consent-placeholder { position: static; border: 2px dashed var(--line); border-radius: 20px; background: #fff; padding: clamp(32px, 5vw, 56px) 28px; min-height: 220px; }

  /* Homepage reviews — our own card grid, fresh and calm */
  .reviews-band { padding: clamp(48px, 6vw, 78px) 0; background: var(--paper-2); }
  .reviews-band .band-head { text-align: center; margin-bottom: clamp(24px, 3vw, 38px); }
  .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1180px; margin: 0 auto; }
  @media (max-width: 900px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } }
  .rv-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 24px 22px; box-shadow: 0 8px 24px rgba(14,13,11,0.05); display: flex; flex-direction: column; gap: 12px; }
  .rv-stars { color: var(--yellow-deep); letter-spacing: 2px; font-size: 15px; line-height: 1; }
  .rv-quote { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
  .rv-who { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
  .rv-who strong { font-size: 14px; color: var(--ink); font-weight: 700; }
  .rv-sess { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.07em; }
  .reviews-loading { text-align: center; color: var(--ink-soft); grid-column: 1 / -1; padding: 30px 0; }

  /* ============================================================
     Retreat page — full-bleed video hero
     ============================================================ */
  .retreat-hero { position: relative; min-height: 82vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); color: #fff; }
  .retreat-hero .rh-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
  .retreat-hero .rh-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,16,22,0.15) 0%, rgba(20,16,22,0.12) 42%, rgba(20,16,22,0.74) 100%); }
  .retreat-hero .rh-inner { position: relative; z-index: 2; padding-top: 140px; padding-bottom: clamp(48px, 8vh, 96px); }
  .retreat-hero .sticker { background: rgba(255,255,255,0.18); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .retreat-hero h1 { font-size: clamp(44px, 6.4vw, 84px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin: 18px 0 0; color: #fff; }
  .retreat-hero h1 .accent { color: var(--yellow); }
  .retreat-hero .lead { color: rgba(255,255,255,0.94); max-width: 52ch; margin: 20px 0 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
  .retreat-hero .btn { margin-top: 28px; }
  @media (max-width: 640px) { .retreat-hero { min-height: 74vh; } .retreat-hero .rh-inner { padding-top: 120px; } }

  /* Gift cards "What it covers" — 5 cards: center the last row instead of an
     orphaned 3 + 2 with a gap. */
  .cc-grid.cc-grid-5 { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
  .cc-grid.cc-grid-5 .cc { flex: 1 1 300px; max-width: 373px; }
  @media (max-width: 980px) { .cc-grid.cc-grid-5 .cc { flex-basis: 44%; max-width: none; } }
  @media (max-width: 560px) { .cc-grid.cc-grid-5 .cc { flex-basis: 100%; } }

  /* Gift cards — 3 even steps, and a fresh/white "How it works" (was yellow) */
  .steps.steps-3 { grid-template-columns: repeat(3, 1fr); max-width: 980px; }
  @media (max-width: 900px) { .steps.steps-3 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .steps.steps-3 { grid-template-columns: 1fr; } }
  .how.how-fresh { background: var(--paper-2); }
  .how.how-fresh .how-head { background: transparent; box-shadow: none; padding: 0 20px; margin-bottom: clamp(40px, 6vw, 64px); }

  /* ============================================================
     Single-retreat template — hero meta, itinerary, pricing
     ============================================================ */
  .rh-meta { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 34px; }
  .rh-meta li { display: flex; flex-direction: column; gap: 2px; }
  .rh-meta li span { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
  .rh-meta li strong { font-size: 17px; font-weight: 700; color: #fff; }

  .itin-sec { background: #fff; padding: clamp(64px, 8vw, 110px) 0; }
  .itin { list-style: none; margin: clamp(28px, 4vw, 44px) auto 0; padding: 0; max-width: 760px; }
  .itin li { display: flex; gap: 22px; padding: 20px 0; border-top: 1px solid var(--line); }
  .itin li:first-child { border-top: 0; }
  .itin-time { flex: 0 0 84px; font-weight: 800; font-size: 15px; color: var(--coral); letter-spacing: 0.02em; padding-top: 2px; }
  .itin-body h3 { font-size: 18px; font-weight: 800; margin: 0 0 3px; color: var(--ink); }
  .itin-body p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }

  .price-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 760px; margin: clamp(24px, 4vw, 40px) auto 0; }
  @media (max-width: 620px) { .price-cards { grid-template-columns: 1fr; } }
  .price-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px; text-align: center; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 30px rgba(14,13,11,0.05); }
  .price-card.feat { border-color: var(--coral); box-shadow: 0 16px 40px rgba(235,103,104,0.16); position: relative; }
  .price-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
  .price-card h3 { font-size: 18px; font-weight: 800; margin: 0; color: var(--ink); }
  .price-amt { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
  .price-amt span { font-size: 15px; font-weight: 700; color: var(--ink-soft); margin-left: 4px; }
  .price-card p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
  .price-card .btn, .price-card .btn-outline { margin-top: 6px; align-self: center; }
  .price-note { text-align: center; color: var(--ink-soft); font-size: 14px; margin: clamp(20px, 3vw, 30px) auto 0; max-width: 52ch; }

.md-addr-contact{display:inline-block;margin-top:10px;font-weight:600;text-decoration:underline;text-underline-offset:3px}

.page-head{text-align:center;padding:clamp(96px,12vw,132px) 20px 30px;background:#fff}
.page-head h1{margin:0;font-size:clamp(38px,6.5vw,62px);font-weight:900;letter-spacing:-0.02em;line-height:1.04}
.page-head .lead{margin-left:auto;margin-right:auto;max-width:640px}

/* Trust bar arrows (replaces dots) */
.trust-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease;z-index:2}
.trust-arrow:hover{background:rgba(255,255,255,.15);border-color:#fff}
.trust-prev{left:max(14px,calc(50% - 384px))}
.trust-next{right:max(14px,calc(50% - 384px))}
.trust-dots{display:none!important}

/* Membership "help you pick" is a LIGHT panel now — force the form text dark/readable
   (overrides leftover white rules from the old purple-panel design). */
.help-pick .contact-form label,
.help-pick .contact-form .form-note,
.help-pick .form-privacy { color: var(--ink-soft); }
.help-pick .form-privacy a { color: var(--ink); }

.page-head .eyebrow{display:inline-block;color:var(--tcol-deep,var(--coral));font-size:13px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:14px}
.page-head p{max-width:600px;margin:14px auto 0;color:var(--ink-soft);font-size:17px;line-height:1.55}

/* Membership "help you pick" privacy line: normal left-aligned paragraph
   (the panel/inner is centred, which was orphaning the Privacy Policy link). */
.help-pick .form-privacy { text-align: left; max-width: 100%; margin-left: 0; }

/* Clickable class -> description popup */
.class-clickable { cursor: pointer; }
.day-classes li.class-clickable:hover { background: rgba(14,13,11,0.04); }
.day-classes li.class-clickable:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.cc ul li.class-clickable:hover strong { text-decoration: underline; text-underline-offset: 2px; }
.cc ul li.class-clickable:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
.class-modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.class-modal[hidden] { display: none; }
.cm-backdrop { position: absolute; inset: 0; background: rgba(14,13,11,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.cm-panel { position: relative; background: #fff; border-radius: 18px; max-width: 460px; width: 100%; padding: 32px 28px 28px; box-shadow: 0 24px 64px rgba(0,0,0,0.32); animation: cmIn .18s ease; }
@keyframes cmIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.cm-panel h3 { margin: 0 0 12px; font-size: 24px; letter-spacing: -0.01em; color: var(--ink); }
.cm-panel p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink-soft); }
.cm-close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px; }
.cm-close:hover { color: var(--ink); }

/* Subtle info icon marking a class as clickable */
.ci-info { display: inline-flex; align-items: center; margin-left: 6px; color: var(--ink-soft); opacity: 0.42; vertical-align: -3px; transition: opacity 0.2s ease, color 0.2s ease; }
.ci-info svg { width: 15px; height: 15px; display: block; }
.class-clickable:hover .ci-info, .class-clickable:focus-visible .ci-info { opacity: 1; color: var(--coral); }

/* Info icon on the coloured "Four ways to move" class cards: white to match the white names */
.cc ul li .ci-info { color: #fff; opacity: 0.55; }
.cc ul li.class-clickable:hover .ci-info, .cc ul li.class-clickable:focus-visible .ci-info { color: #fff; opacity: 1; }

/* Reviews carousel strip */
.rv-strip-wrap { position: relative; max-width: 1180px; margin: 0 auto; }
.reviews-strip { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; touch-action: pan-x; overscroll-behavior-x: contain; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 18px 2px; }
.reviews-strip::-webkit-scrollbar { display: none; }
.reviews-strip .rv-card { flex: 0 0 clamp(280px, 33%, 360px); scroll-snap-align: start; }
.rv-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; box-shadow: 0 6px 18px rgba(14,13,11,0.12); cursor: pointer; z-index: 3; font-size: 22px; line-height: 1; color: var(--ink); display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.rv-arrow:hover { background: var(--paper-2); }
.rv-prev { left: -10px; } .rv-next { right: -10px; }
@media (max-width: 760px) {
  .reviews-strip .rv-card { flex-basis: 84%; }
  /* Keep the arrows on mobile as a clear, tappable centred pair below the strip */
  .rv-strip-wrap { padding-bottom: 60px; }
  .rv-arrow { top: auto; bottom: 0; transform: none; width: 46px; height: 46px; }
  .rv-prev { left: calc(50% - 54px); right: auto; }
  .rv-next { right: calc(50% - 54px); left: auto; }
}

/* Timetable legend: tighter rows when it wraps to 2x2 on mobile */
@media (max-width: 620px) { .tt-legend { row-gap: 8px; } }

/* Hero tuning: smaller Google rating + logo, bigger headline, smaller tagline (desktop + mobile) */
body.home .home-hero .hero-logo img { height: clamp(44px, 5vw, 58px); }
body.home .home-hero .g-rating .g-word svg { height: 15px; }
body.home .home-hero .g-rating .g-stars,
body.home .home-hero .g-rating .g-num,
body.home .home-hero .g-rating .g-count { font-size: 12px; }
body.home .home-hero h1 { font-size: clamp(44px, 6.8vw, 86px); }
body.home .home-hero .lead {
  font-family: var(--sans);
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 42ch;
}
/* Events grid (live from Momence, brand cards) */
.ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ev-loading { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); padding: 30px 0; }
.ev-empty { display: block; text-align: center; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 40px 24px; max-width: 640px; margin: 0 auto; }
.ev-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ev-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14,13,11,.12); border-color: transparent; }
.ev-media { position: relative; aspect-ratio: 16 / 10; background: #f0ecf5; overflow: hidden; }
.ev-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ev-card:hover .ev-media img { transform: scale(1.05); }
.ev-price { position: absolute; top: 10px; right: 10px; background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; padding: 5px 11px; border-radius: 999px; }
.ev-price.is-free { background: var(--mint-ink); }
.ev-soldout { position: absolute; top: 10px; left: 10px; background: rgba(14,13,11,.82); color: #fff; font-weight: 600; font-size: 12px; padding: 5px 10px; border-radius: 999px; }
.ev-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.ev-date { display: flex; align-items: baseline; gap: 8px; color: var(--coral); font-weight: 700; font-size: 13px; letter-spacing: .01em; }
.ev-date .ev-time { color: var(--ink-soft); font-weight: 600; }
.ev-name { font-size: 18px; line-height: 1.25; margin: 0; }
.ev-meta { color: var(--ink-soft); font-size: 13px; }
.ev-tag { align-self: flex-start; background: #f2edf7; color: var(--purple-deep, #5a3b8b); font-weight: 600; font-size: 12px; padding: 3px 9px; border-radius: 999px; }
.ev-cta { margin-top: auto; padding-top: 6px; color: var(--coral); font-weight: 700; font-size: 14px; }
.ev-cta::after { content: " \2192"; }
.ev-all { text-align: center; margin-top: 30px; }
@media (max-width: 900px) { .ev-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 560px) { .ev-grid { grid-template-columns: 1fr; } .ev-media { aspect-ratio: 16 / 9; } }

/* Events month filter */
.ev-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 26px; }
.ev-pill { border: 1px solid var(--line); background: #fff; color: var(--ink-soft); font-weight: 600; font-size: 14px; padding: 8px 17px; border-radius: 999px; cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease; }
.ev-pill:hover { border-color: var(--coral); color: var(--coral); }
.ev-pill.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Live IG strip (Behold): force clean square tiles that fill each column.
   Beats the older .ig-strip-row img { height:100% } rule on specificity. */
.ig-strip .ig-strip-row.ig-feed { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding: 0; margin: 0; max-width: none; width: 100%; background: transparent; }
.ig-strip .ig-strip-row.ig-feed img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
@media (max-width: 720px) {
  .ig-strip .ig-strip-row.ig-feed { grid-template-columns: repeat(3, 1fr); }
  .ig-strip .ig-strip-row.ig-feed img:nth-child(n+4) { display: none; }
}

/* When the mobile menu drawer is open, hide the fixed overlays that otherwise
   sit above it (cookie banner z-9000, top sticky CTA z-100) and cover menu items. */
body.nav-open .cookie-banner,
body.nav-open .sticky-cta-bar { display: none !important; }

/* ============================================================
   Premium reveal-on-scroll + sticky media
   Gated on html.has-reveal, which a tiny <head> snippet sets ONLY when
   IntersectionObserver exists and the visitor hasn't asked for reduced motion.
   No JS / reduced motion => nothing hides, everything is visible.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.has-reveal .rvl {
    opacity: 0;
    transform: translateY(54px) scale(.965);
    /* opacity + transform only: both composite on the GPU, so revealing many
       elements at once (e.g. the dense timetable) stays smooth. easeOutExpo
       (confident start, long soft settle) keeps it feeling premium. */
    transition: opacity 1.1s cubic-bezier(.19,1,.22,1),
                transform 1.1s cubic-bezier(.19,1,.22,1);
    transition-delay: var(--rvl-d, 0ms);
  }
  html.has-reveal .rvl.is-in { opacity: 1; transform: none; }
}
/* Directional slide-in only on wider screens (avoids any horizontal scroll on phones) */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  html.has-reveal .rvl.rvl-l { transform: translateX(-72px) scale(.965); }
  html.has-reveal .rvl.rvl-r { transform: translateX(72px) scale(.965); }
  html.has-reveal .rvl.rvl-l.is-in,
  html.has-reveal .rvl.rvl-r.is-in { transform: none; }
}

/* Open mobile menu must out-rank the Momence webchat (z-index 2147483001),
   which otherwise buries the lower menu items and the intro-pass button.
   The drawer sits inside .site-nav (a z-index:90 stacking context), so we must
   raise .site-nav itself, not just the drawer, to escape that context. */
body.nav-open .site-nav { z-index: 2147483004; }
body.nav-open .nav-backdrop { z-index: 2147483002; }

/* ============================================================
   Parallax image bands (opt-in, .px-band[data-parallax])
   ============================================================ */
.px-band { position: relative; overflow: hidden; height: clamp(340px, 54vh, 600px); background: var(--ink); }
.px-media { position: absolute; left: 0; right: 0; top: -16%; bottom: -16%; will-change: transform; }
.px-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14,13,11,.30), rgba(14,13,11,.46)); }
.px-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.px-eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.82); margin-bottom: 14px; }
.px-band h2 { color: #fff; font-size: clamp(30px, 5.2vw, 60px); font-weight: 900; letter-spacing: -.03em; line-height: 1.02; margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,.28); }

/* Parallax on the homepage founder photo: the image drifts within a fixed,
   rounded frame while scrolling (team overlay + captions sit outside the frame). */
.welcome-photo .wp-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(14,13,11,0.20);
}
.welcome-photo .wp-frame .main-photo {
  position: absolute; top: -42%; left: 0;
  width: 100%; height: 184%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  will-change: transform;
}

/* Parallax on the homepage team overlay photo (drifts within its rounded frame) */
.welcome-photo .team-overlay .tm-frame {
  position: relative; aspect-ratio: 4 / 5; border-radius: 9px; overflow: hidden;
}
.welcome-photo .team-overlay .tm-frame img {
  position: absolute; top: -30%; left: 0;
  width: 100%; height: 160%;
  object-fit: cover; border-radius: 0; display: block;
  will-change: transform;
}

/* Temperature cards: staggered reveal-in (via .heat-card in reveal.js) + hover photo zoom.
   The combined transition is scoped high enough to beat the generic .rvl transition,
   and hover only touches box-shadow + the photo (not the card transform), so it never
   fights the reveal's translateY. */
.heatband .heat-grid .heat-card {
  transition: opacity .8s cubic-bezier(.16,.74,.24,1),
              transform .8s cubic-bezier(.16,.74,.24,1),
              box-shadow .35s ease;
}
.heatband .heat-card .heat-photo { transition: transform .6s cubic-bezier(.16,.74,.24,1); }
.heatband .heat-card:hover { box-shadow: 0 36px 74px rgba(14,13,11,0.32); }
.heatband .heat-card:hover .heat-photo { transform: scale(1.07); }

/* Hero headline (definitive): tighter line spacing + keep "Yoga practice," and
   "not yoga perfect." each on one line. Higher specificity (body.home header.home-hero h1)
   so it beats the several earlier .home-hero h1 sizing rules at every breakpoint. */
body.home header.home-hero h1 {
  font-size: clamp(40px, 6.4vw, 86px);
  line-height: 0.85;
  white-space: nowrap;
  max-width: none;
}
body.home header.home-hero h1 .accent { white-space: nowrap; }

/* First static review quote: words cascade in ("writes itself in") */
.reviews blockquote.q-ready .q-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(4px);
  transition: opacity .55s ease,
              transform .55s cubic-bezier(.19,1,.22,1),
              filter .55s ease;
  transition-delay: var(--qd, 0ms);
}
.reviews blockquote.q-in .q-word { opacity: 1; transform: none; filter: blur(0); }

/* Bigger hero headline (definitive): widen the panel + trim its horizontal
   padding on desktop so the large two-line headline fits one line per phrase.
   body.home header.home-hero beats the earlier body.home .home-hero rules. */
@media (min-width: 901px) {
  /* Panel wide enough for the big headline, but not so wide the photo feels narrow. */
  body.home header.home-hero { grid-template-columns: 1.4fr 1fr; }
  body.home header.home-hero .hh-panel {
    padding-left: clamp(24px, 2.4vw, 44px);
    padding-right: clamp(24px, 2.4vw, 44px);
  }
}
/* Mobile: hero is stacked, so use the full width for a much bigger headline. */
@media (max-width: 900px) {
  body.home header.home-hero h1 { font-size: clamp(40px, 11vw, 58px); }
  body.home header.home-hero .hh-panel {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Owner-approved: subtle text-shadow lifts white text on brand-colour CTAs for
   legibility, without changing the brand colours. (Aids readability; note it
   does not change the automated WCAG contrast ratio.) */
.btn:not(.btn-ghost),
.loc-pill,
.help-pick .btn { text-shadow: 0 1px 2px rgba(0,0,0,0.35); }

/* Trust strip arrows: flex-centre the row so arrows sit vertically centred with
   the text (deterministic, no absolute-positioning offset). */
.trust-bar .wrap { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 30px); }
.trust-bar .trust-arrow { position: static; transform: none; flex: 0 0 auto; }
.trust-bar .trust-grid { flex: 0 1 700px; margin: 0; }

/* Skip-to-content link: visually hidden until keyboard focus */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none; }
.skip-link:focus { left: 0; }

/* Coral text-links -> brand-purple pill buttons with white text (owner-approved).
   Uses --purple-deep so white text passes AA (5.6:1); the lighter --purple fails.
   Excludes the intro-pass card CTA, which is already a styled button. */
.text-link,
.way-card:not(.intro-top) .way-cta {
  background: var(--purple-deep);
  color: #fff;
  border-radius: 999px;
  padding: 11px 18px;
  text-shadow: none;
  white-space: nowrap;
  justify-content: center;
  letter-spacing: 0.06em;
}
.text-link:hover,
.way-card:not(.intro-top) .way-cta:hover { background: var(--purple-deep); color: #fff; }

/* Consistent page start: the first content section on top-level pages clears the
   fixed nav uniformly, so every page's eyebrow starts at the same height.
   (Home's first child is the <header> hero, so it is not matched; articles use main.article.) */
main#main > section:first-child { padding-top: 116px; }
@media (max-width: 720px) { main#main > section:first-child { padding-top: 92px; } }

/* ===== "What we believe" cards — Option D: white cards, colour cap + brand icon ===== */
.belief-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.belief-card { background: #fff; border-radius: 20px; padding: 0 24px 28px;
  box-shadow: 0 10px 30px rgba(30,34,40,.07); display: flex; flex-direction: column;
  gap: 15px; overflow: hidden; }
.belief-card .bc-cap { height: 6px; margin: 0 -24px 20px; }
.belief-card.p .bc-cap { background: var(--purple); }
.belief-card.c .bc-cap { background: var(--coral); }
.belief-card.y .bc-cap { background: var(--yellow); }
.belief-card.m .bc-cap { background: var(--mint-ink); }
.belief-card .bc-ic { width: 38px; height: 38px; }
.belief-card .bc-ic svg { width: 100%; height: 100%; }
.belief-card.p .bc-ic { color: var(--purple); }
.belief-card.c .bc-ic { color: var(--coral); }
.belief-card.y .bc-ic { color: var(--yellow-deep); }
.belief-card.m .bc-ic { color: var(--mint-ink); }
.belief-card h3 { margin: 0; font-size: 20px; line-height: 1.22; font-weight: 800;
  color: var(--ink); letter-spacing: -.01em; }
@media (max-width: 820px) { .belief-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .belief-grid { grid-template-columns: 1fr; } }

/* ============================================================
   HOMEPAGE HERO — entrance animation on initial load.
   Gated on html.has-reveal (set only when JS + motion allowed),
   so reduced-motion / no-JS visitors see the hero fully visible.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.has-reveal body.home .home-hero .hh-inner > * {
    opacity: 0; transform: translateY(20px);
    animation: heroRise .9s cubic-bezier(.19,1,.22,1) both;
  }
  html.has-reveal body.home .home-hero .hh-inner > *:nth-child(1){ animation-delay:.08s }
  html.has-reveal body.home .home-hero .hh-inner > *:nth-child(2){ animation-delay:.18s }
  html.has-reveal body.home .home-hero .hh-inner > *:nth-child(3){ animation-delay:.30s }
  html.has-reveal body.home .home-hero .hh-inner > *:nth-child(4){ animation-delay:.42s }
  html.has-reveal body.home .home-hero .hh-inner > *:nth-child(5){ animation-delay:.54s }
  html.has-reveal body.home .home-hero .hh-inner > *:nth-child(6){ animation-delay:.66s }

  html.has-reveal body.home .home-hero .hh-photo {
    opacity: 0; animation: heroPhoto 1.2s cubic-bezier(.19,1,.22,1) .2s both;
  }
  html.has-reveal body.home .home-hero .hh-circles .hc {
    opacity: 0; transform: scale(.6);
    animation: heroPop .7s cubic-bezier(.34,1.56,.64,1) both;
  }
  html.has-reveal body.home .home-hero .hh-circles .hc.c1{ animation-delay:.7s }
  html.has-reveal body.home .home-hero .hh-circles .hc.c2{ animation-delay:.82s }
  html.has-reveal body.home .home-hero .hh-circles .hc.c3{ animation-delay:.94s }
}
@keyframes heroRise  { to { opacity:1; transform:none } }
@keyframes heroPhoto { from { opacity:0; transform:scale(1.05) } to { opacity:1; transform:none } }
@keyframes heroPop   { to { opacity:1; transform:none } }

/* ============================================================
   PARALLAX FRAMES — clip the frame and oversize the media so the
   scroll drift never reveals a gap at the top/bottom edge.
   Opt in with data-parallax="<depth>" (+ data-px-scale for <img>).
   ============================================================ */
[data-parallax] { overflow: hidden; }
/* split-media images: move radius+shadow to the frame, scale the image */
.split .split-media[data-parallax] { border-radius: 26px; box-shadow: 0 30px 60px rgba(14,13,11,0.16); }
.split .split-media[data-parallax] img { border-radius: 0; box-shadow: none; transform: scale(1.16); will-change: transform; }
@media (max-width: 880px) { .split .split-media[data-parallax] { border-radius: 20px; } }
/* bn-feature: a dedicated oversized media layer behind the caption + gradient */
.bn-feature[data-parallax] .px-media {
  position: absolute; top: -90px; bottom: -90px; left: 0; right: 0;
  background-size: cover; background-position: center; z-index: 0; will-change: transform;
}

/* Latest bento — secondary line under the bar title (date / label / hook) */
.lx-bar .lx-sub { display: block; margin-top: 3px; font-weight: 600; font-size: 12px;
  letter-spacing: 0; line-height: 1.3; text-transform: none; opacity: 0.92; }
.lx-big .lx-bar .lx-sub { font-size: 13.5px; margin-top: 4px; }
/* gradient scrim so bar text stays legible over the photo even without the solid bar */
.lx-front::after, .lx-tile > .lx-bg + .lx-tag ~ .lx-bar { }

/* Homepage hero photo parallax — oversized layer, gradient overlay kept on top */
.home-hero .hh-photo[data-parallax] .px-media {
  position: absolute; top: -90px; bottom: -90px; left: 0; right: 0;
  background-size: cover; background-position: center 30%; z-index: 0; will-change: transform;
}
.home-hero .hh-photo[data-parallax]::before { z-index: 1; }

/* Contact page — studio photo at the top of the aside */
.contact-aside .contact-photo { margin: 0 0 22px; }
.contact-aside .contact-photo img { width: 100%; height: auto; max-height: 380px;
  object-fit: cover; border-radius: 20px; box-shadow: 0 20px 44px rgba(20,24,28,0.14); display: block; }

/* Contact — bare form (no tint) beside the tinted aside card, matched height.
   Form fills its (stretched) column by letting the message box grow, so the
   Send button lines up with the bottom of the aside card. */
.contact-grid { align-items: stretch; }
.contact-form { height: 100%; }
.contact-form .field:has(textarea) { flex: 1 1 auto; }
.contact-form .field:has(textarea) textarea { height: 100%; min-height: 180px; }

/* Blog pagination controls */
.blog-pager { display: flex; justify-content: center; align-items: center; gap: 8px;
  flex-wrap: wrap; margin: clamp(30px, 4vw, 48px) auto 4px; }
.blog-pager .pg-btn { min-width: 44px; height: 44px; padding: 0 12px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink); border-radius: 12px; font-family: var(--body); font-weight: 700;
  font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease, background .15s ease; }
.blog-pager .pg-btn.pg-nav { font-size: 20px; line-height: 1; }
.blog-pager .pg-btn:hover:not(:disabled) { border-color: var(--coral); color: var(--coral); }
.blog-pager .pg-btn.is-active { background: var(--coral); border-color: var(--coral); color: #fff; }
.blog-pager .pg-btn:disabled { opacity: .38; cursor: default; }