/* ============================================================
   Reformer Pilates by Kavita — Bristol
   Forge build · poster brand: plaster grey / champagne gold / charcoal
   ============================================================ */

:root {
    /* Colours — sampled directly off Kavita's Opening Soon poster (2026-07-29),
       not approximated. Poster values: plaster #827F79-#BBB3AA, marble #BEB8B1,
       gold #B9925E / #D8BE88 / #F0DAAF, lettering #484440.
       Where a poster value could not carry text at AA it was darkened along its
       own hue rather than swapped for a different colour. */
    --color-bg:           #EDEAE5;   /* light plaster — page ground */
    --color-surface:      #DFDAD3;   /* section surface */
    --color-surface-2:    #D3CDC5;
    --color-plaster:      #8C8781;   /* her actual poster grey — display use only,
                                        white on it is 3.56:1 (large text only) */
    --color-deep:         #7A7670;   /* darkened so white body text clears AA at 4.51 */
    --color-charcoal:     #3E3B37;
    --color-charcoal-2:   #2E2C29;
    --color-text:         #3E3B37;
    --color-text-muted:   #5F5A53;   /* 5.69 on bg, 4.91 on surface */
    --color-gold:         #C9A567;   /* poster gold, core */
    --color-gold-bright:  #E4CB97;   /* poster gold, highlight */
    --color-gold-dark:    #715D3A;   /* 5.26 on bg, 4.54 on surface — text-safe */
    --color-gold-dim:     rgba(201,165,103,0.16);
    --color-gold-ink:     #2E2C29;
    --color-border:       #CFC8BF;
    --color-border-hover: rgba(201,165,103,0.6);
    --plaster-1:          #A39D96;
    --plaster-2:          #8C8781;
    --plaster-3:          #757069;

    /* Metallic gold — foil effect for display type */
    --gold-foil: linear-gradient(105deg, #9C7C46 0%, #C9A567 30%, #F0DAAF 50%, #D8BE88 70%, #9C7C46 100%);

    /* Spacing — 8px grid */
    --space-1:  8px;
    --space-2:  16px;
    --space-3:  24px;
    --space-4:  32px;
    --space-6:  48px;
    --space-8:  64px;
    --space-12: 96px;
    --space-16: 128px;

    /* Type scale */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;

    /* Radii */
    --radius-sm: 2px;
    --radius-md: 4px;

    /* Motion — one scale, three easings. Durations were previously picked
       per-rule (200/350/420/600/720/800/900/1000/1400ms), which is the
       difference between motion that feels designed and motion that feels
       assembled. */
    /* The old entrance curve was an expo-out (0.16, 1, 0.3, 1): it covered ~90%
       of the distance in the first third of the time, then crawled. That reads
       as a snap followed by a drag, not as smooth. easeOutCubic distributes the
       movement evenly and settles without the lurch. */
    --ease-out:     cubic-bezier(0.33, 1, 0.68, 1);     /* entrances — even settle */
    --ease-in-out:  cubic-bezier(0.45, 0, 0.35, 1);     /* things that travel and return */
    --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);       /* long, slow, ambient */
    --duration-fast: 160ms;
    --duration-base: 280ms;
    --duration-slow: 460ms;
    --duration-xl:   700ms;
    --step: 80ms;                                        /* one beat of the cascade */

    --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* clip, not hidden: `overflow-x: hidden` on body silently makes it a scroll
   container, which breaks position:sticky anywhere inside it. */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

body {
    font-family: 'Jost', sans-serif;
    font-size: 1.02rem;
    font-weight: 400;
    letter-spacing: 0.005em;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Shared heading treatment. One family throughout — weight and tracking carry
   the hierarchy, the way her poster does it. */
h1, h2, h3, h4 { color: var(--color-charcoal); line-height: 1.15; overflow-wrap: anywhere; min-width: 0; }
h3, h4 { font-family: 'Jost', sans-serif; font-weight: 600; letter-spacing: 0.01em; }
/* Poster-matched display: light geometric sans, wide tracking. Her poster
   sets REFORMER / PILATES / SOON exactly this way. */
h1, h2 { font-family: 'Jost', sans-serif; font-weight: 300; letter-spacing: 0.06em; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

.section-inner { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-3); }

/* ---- Scroll reveal ---- */
[data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--duration-xl) var(--ease-out),
                transform var(--duration-xl) var(--ease-out);
}
[data-reveal].visible { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="1"] { transition-delay: calc(var(--step) * 1); }
[data-reveal][data-delay="2"] { transition-delay: calc(var(--step) * 2); }
[data-reveal][data-delay="3"] { transition-delay: calc(var(--step) * 3); }
[data-reveal][data-delay="4"] { transition-delay: calc(var(--step) * 4); }
[data-reveal][data-delay="5"] { transition-delay: calc(var(--step) * 5); }
[data-reveal][data-delay="6"] { transition-delay: calc(var(--step) * 6); }
[data-reveal][data-delay="7"] { transition-delay: calc(var(--step) * 7); }
/* The masked heading must ride its own reveal delay, or the mask opens while
   the block is still fading in and the two read as separate events. */
[data-reveal][data-delay="1"] .rise-inner { transition-delay: calc(var(--step) * 1); }
[data-reveal][data-delay="2"] .rise-inner { transition-delay: calc(var(--step) * 2); }
[data-reveal][data-delay="3"] .rise-inner { transition-delay: calc(var(--step) * 3); }
/* Always-play standard (Rahaid, 2026-07-07, reaffirmed 2026-07-28): motion plays
   regardless of the OS Reduce Motion setting. Do not add prefers-reduced-motion
   suppressors to this file. */

/* ---- Shared type patterns ---- */
.eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gold-dark);
    margin-bottom: var(--space-2);
}
.section-title { font-size: var(--text-3xl); font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; }
.section-desc { max-width: 560px; color: var(--color-text-muted); font-size: var(--text-base); margin-top: var(--space-2); }
.section-header { margin-bottom: var(--space-8); }
.section-header.center { text-align: center; }
.section-header.center .section-desc { margin-left: auto; margin-right: auto; }

.gold-foil-text {
    background: var(--gold-foil);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: foil-shift 9s var(--ease-in-out) infinite;
}
@keyframes foil-shift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

::selection { background: var(--color-gold); color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-gold-dark); outline-offset: 2px; }

.script { font-family: 'Jost', sans-serif; font-style: normal; font-weight: 300; color: var(--color-charcoal); letter-spacing: 0.05em; }

.gold-rule { display: flex; align-items: center; gap: var(--space-1); max-width: 280px; }
.gold-rule::before, .gold-rule::after { content: ''; height: 1px; flex: 1; }
.gold-rule::before { background: linear-gradient(90deg, transparent, var(--color-gold)); }
.gold-rule::after { background: linear-gradient(90deg, var(--color-gold), transparent); }
.gold-rule i { width: 5px; height: 5px; background: var(--color-gold); border-radius: 50%; flex-shrink: 0; }
.gold-rule.center { margin-left: auto; margin-right: auto; }

/* ---- Buttons ---- */
.btn-primary, .btn-ghost, .btn-gold {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.btn-primary { background: var(--color-charcoal); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(53,51,46,0.28); }
.btn-primary:active, .btn-ghost:active, .btn-gold:active { transform: translateY(0); }
.btn-ghost { border: 1px solid var(--color-border); color: var(--color-charcoal); background: transparent; }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--color-border-hover); box-shadow: 0 8px 24px rgba(53,51,46,0.10); }
.btn-gold { background: var(--color-gold); color: var(--color-gold-ink); }
.btn-gold:hover { transform: translateY(-2px); background: var(--color-gold-dark); color: #fff; box-shadow: 0 8px 24px rgba(131,103,48,0.35); }
.btn-note { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.04em; }

/* ---- Nav ---- */
#navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--nav-h);
    background: rgba(237,234,229,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--duration-base) var(--ease-out),
                height var(--duration-base) var(--ease-out),
                background var(--duration-base) var(--ease-out);
}
/* Scroll-morph: the bar tightens and deepens once you leave the top. */
#navbar.scrolled {
    height: calc(var(--nav-h) - 10px);
    background: rgba(237,234,229,0.96);
    box-shadow: 0 2px 20px rgba(53,51,46,0.10);
}
.nav-inner { max-width: 1200px; margin: 0 auto; height: 100%; padding: 0 var(--space-3); display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: var(--space-2); }
.nav-monogram { width: 44px; height: 44px; flex-shrink: 0; }
.nav-monogram img, .footer-monogram img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nav-logo-text { display: flex; flex-direction: column; gap: 2px; }
.nav-logo-main { font-family: 'Jost', sans-serif; font-size: var(--text-base); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-charcoal); }
.nav-logo-sub { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gold-dark); }

.nav-links { display: flex; align-items: center; gap: var(--space-4); list-style: none; }
.nav-links a { position: relative; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text); padding: var(--space-1) 0; transition: color var(--duration-fast); }
.nav-links a:not(.nav-cta)::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--color-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out); }
.nav-links a:not(.nav-cta):hover { color: var(--color-gold-dark); }
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--color-gold-dark); }
.nav-links a.active::after { transform: scaleX(1); }
.nav-cta { background: var(--color-charcoal); color: #fff !important; padding: 12px var(--space-3) !important; border-radius: var(--radius-sm); font-weight: 700 !important; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out) !important; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(53,51,46,0.28); }

.nav-mobile-btn { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: var(--space-1); background: none; border: 0; }
.nav-mobile-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-mobile-btn.open span:nth-child(2) { opacity: 0; }
.nav-mobile-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile-btn span { width: 22px; height: 2px; background: var(--color-charcoal); transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base); }

.mobile-menu { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: var(--space-3); }
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.mobile-menu a { display: block; font-size: var(--text-lg); font-weight: 600; color: var(--color-charcoal); padding: var(--space-1) 0; }
.mobile-menu a.active { color: var(--color-gold-dark); }
.mobile-menu .mobile-cta { text-align: center; background: var(--color-charcoal); color: #fff; padding: var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-top: var(--space-1); }

/* ---- Page header (inner pages) ---- */
.page-header { padding: calc(var(--nav-h) + var(--space-8)) 0 var(--space-8); background: var(--color-surface); border-bottom: 1px solid var(--color-border); text-align: center; }
.page-title { font-size: clamp(1.875rem, 4vw, 2.25rem); font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; }
.page-header .gold-rule { margin: var(--space-2) auto; }
.page-subtitle { max-width: 580px; margin: var(--space-2) auto 0; color: var(--color-text-muted); }
/* Narrative pages (Classes, About) hang their header left; decision pages
   (Pricing, FAQs, Contact) stay centred. Six identically centred headers was
   the flattest thing about the old build. */
.page-header.left { text-align: left; }
.page-header.left .gold-rule { margin-left: 0; margin-right: auto; }
.page-header.left .page-subtitle { margin-left: 0; margin-right: 0; }

/* ---- Hero ---- */
.hero { position: relative; min-height: 100vh; padding-top: var(--nav-h); display: flex; align-items: center; background: repeating-linear-gradient(45deg, rgba(53,51,46,0.016) 0 1px, transparent 1px 14px), radial-gradient(120% 90% at 20% 0%, #F4F1EC 0%, var(--color-bg) 55%, var(--color-surface) 100%); }
.hero-frame { position: absolute; inset: var(--space-2); border: 1px solid rgba(201,165,103,0.35); pointer-events: none; z-index: 2; }
.hero-inner { position: relative; z-index: 3; max-width: 1160px; margin: 0 auto; padding: var(--space-8) var(--space-3); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center; }

.hero-badge { display: inline-flex; align-items: center; gap: var(--space-1); border: 1px solid var(--color-border-hover); border-radius: 100px; background: var(--color-gold-dim); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold-dark); margin-bottom: var(--space-3); }
.hero-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); }

.hero-lockup { margin-bottom: var(--space-3); }
.lockup-top { display: block; font-family: 'Jost', sans-serif; font-size: var(--text-2xl); font-weight: 400; letter-spacing: 0.34em; color: var(--color-charcoal); text-transform: uppercase; }
/* The poster's gold word is a flared classical sans with real stroke contrast.
   Jost is monoline and flattened exactly the character that makes it hers, so
   this one word — the brand's signature — gets Tenor Sans. One weight only,
   so never ask this for bold. */
.lockup-gold { display: block; font-family: 'Tenor Sans', sans-serif; font-size: clamp(2.6rem, 6.4vw, 4rem); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.24; }

/* Signature entrance: each lockup line rises from behind a mask on load.
   padding-bottom must clear Jost's descender depth — 0.08em cropped the
   gold line's baseline once the real webfont replaced the fallback. */
.hero-lockup .line-mask { display: block; overflow: hidden; padding-bottom: 0.2em; }
.hero-lockup .lockup-top { transform: translateY(120%); animation: lineRise 1s var(--ease-out) 0.22s both; }
.hero-lockup .lockup-gold { transform: translateY(120%); animation: lineRise 1.05s var(--ease-out) 0.40s both, foil-shift 9s var(--ease-in-out) 1.9s infinite; }
@keyframes lineRise { to { transform: translateY(0); } }

.hero .gold-rule { margin-bottom: var(--space-3); }
.hero-script { font-size: clamp(1.6rem, 4.2vw, 2.1rem); line-height: 1.3; margin-bottom: var(--space-2); max-width: 22ch; }
.hero-tagline { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.hero-tagline i { font-style: normal; color: var(--color-gold); padding: 0 var(--space-1); }
.hero-subtitle { max-width: 460px; color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.75; margin-bottom: var(--space-4); }
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-6); }

.hero-stats { display: flex; gap: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.hero-stat-num { font-family: 'Jost', sans-serif; font-size: var(--text-4xl); font-weight: 600; letter-spacing: -0.01em; color: var(--color-charcoal); line-height: 1; }
.hero-stat-label { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: var(--space-1); }

/* Hero photograph — replaced the CSS re-creation of the "Opening Soon" poster.
   The studio is trading; the hero now shows the actual room. */
.hero-visual { position: relative; }
.hero-photo {
    position: relative; margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-2);
    box-shadow: 0 24px 64px rgba(53,51,46,0.22);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The gold inset frame carried over from the poster card — it is the brand's
   strongest single device and the reason this still reads as hers. */
.hero-photo::after { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(228,203,151,0.75); pointer-events: none; z-index: 2; }
/* Light sweep on hover, as the poster had. */
.hero-photo::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.18) 50%, transparent 58%); transform: translateX(-110%); transition: transform 640ms var(--ease-out); }
.hero-visual:hover .hero-photo::before { transform: translateX(110%); }

.hero-photo-mark {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-8) var(--space-3) var(--space-3);
    background: linear-gradient(to top, rgba(28,26,23,0.78), rgba(28,26,23,0));
}
.hero-photo-mark img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; filter: brightness(1.9); }
.hero-photo-mark span { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; }
.hero-photo-mark i { font-style: normal; color: var(--color-gold-bright); padding: 0 var(--space-1); }

/* Cursor tilt — the transform is rewritten every frame by script.js, so only
   the shadow eases here; transform eases on the way out via .is-resetting. */
.hero-visual .hero-photo { transition: box-shadow var(--duration-base) var(--ease-out); transform-style: preserve-3d; }
.hero-visual .hero-photo.is-resetting { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.hero-visual:hover .hero-photo { box-shadow: 0 32px 80px rgba(53,51,46,0.28); }

.hero-float { position: absolute; top: calc(-1 * var(--space-3)); right: calc(-1 * var(--space-2)); background: #fff; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); box-shadow: 0 8px 32px rgba(53,51,46,0.14); min-width: 152px; }
.hero-float-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold-dark); }
.hero-float-value { font-family: 'Jost', sans-serif; font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.01em; color: var(--color-charcoal); line-height: 1.2; }
.hero-float-sub { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---- Trust bar (marquee) ---- */
.trust-bar { background: var(--color-charcoal); padding: var(--space-3) 0; overflow: hidden; }
.trust-track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.trust-bar:hover .trust-track, .trust-bar:focus-within .trust-track { animation-play-state: paused; }
.trust-set { display: flex; align-items: center; gap: var(--space-8); padding-right: var(--space-8); }
.trust-item { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.82); white-space: nowrap; }
.trust-item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--color-gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Sections ---- */
section { padding: var(--space-12) 0; }
.alt { background: var(--color-surface); }


/* Class cards */
/* Photo-backed headers — the gradients above stay as the loading colour underneath. */

/* Studio gallery — real photography, asymmetric editorial grid */
/* Two tiles, not three. Six photographs were being stretched across ten
   slots site-wide and the repeats read as padding — on the one section that
   claims "no stock photography". Each photo now appears exactly once. */
.gallery-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-2); align-items: stretch; }
.gallery-figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface-2); aspect-ratio: 4 / 3; }
.gallery-figure.lead { aspect-ratio: 3 / 2; }
.gallery-figure img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 640ms var(--ease-out); }
.gallery-figure:hover img { transform: scale(1); }
.gallery-figure::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(228,203,151,0.45); border-radius: calc(var(--radius-md) - 6px); pointer-events: none; opacity: 0; transition: opacity var(--duration-base) var(--ease-out); }
.gallery-figure:hover::after { opacity: 1; }
.gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4) var(--space-3) var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: linear-gradient(to top, rgba(28,26,23,0.72), rgba(28,26,23,0)); }
.gallery-note { text-align: left; margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 760px) {
    .gallery-grid { grid-template-columns: minmax(0, 1fr); }
    .gallery-figure, .gallery-figure.lead { aspect-ratio: 3 / 2; }
}


/* CTA band */
.cta-band { position: relative; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E"), radial-gradient(60% 90% at 50% 0%, rgba(201,165,103,0.14) 0%, transparent 60%), linear-gradient(150deg, var(--color-charcoal) 0%, var(--color-charcoal-2) 100%); text-align: center; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; inset: var(--space-2); border: 1px solid rgba(201,165,103,0.35); pointer-events: none; }
/* The poster's script sets ONE short decorative word above a large statement.
   These four CTA accents are that exact role — two to five words, with the
   heading underneath carrying the meaning — so the script is safe here and
   nowhere else. Deliberately NOT on .hero-script: that line is real copy, and
   Rahaid has raised readability three times. */
.cta-band .script { font-family: 'Great Vibes', cursive; font-weight: 400; font-size: clamp(2.6rem, 5.5vw, 4.25rem); line-height: 1.35; letter-spacing: 0.01em; padding-bottom: 0.12em; background: var(--gold-foil); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil-shift 9s var(--ease-in-out) infinite; }
.cta-band h2 { color: #fff; font-size: var(--text-3xl); letter-spacing: 0.08em; text-transform: uppercase; margin: var(--space-2) 0; }
.cta-band p { color: rgba(255,255,255,0.72); max-width: 560px; margin: 0 auto var(--space-4); }
.cta-reformer { margin-top: var(--space-4); }
.cta-reformer svg { width: 120px; height: auto; opacity: 0.55; }
.promo-reformer { margin-top: var(--space-3); }
.promo-reformer svg { width: 96px; height: auto; opacity: 0.5; }

/* Pricing */
.pricing-note { text-align: center; margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }

/* About */
.about-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: center; }
.about-visual { position: relative; }
/* This column held a photograph already used on the homepage. Kavita's line is
   the strongest thing on the page and was buried in the body copy; it earns the
   panel more than a third print of the same room did. */
.about-statement {
    position: relative; margin: 0; padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-md);
    /* No radial highlight here. On the plaster pair it lifted the top-left to
       1.75:1 against white — the corner the first line of the quote sits in. */
    background: linear-gradient(150deg, #6A6660, var(--color-charcoal));
    box-shadow: 0 24px 64px rgba(53,51,46,0.18);
}
.about-statement::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(228,203,151,0.6); pointer-events: none; }
.about-statement p {
    font-family: 'Jost', sans-serif; font-weight: 300; letter-spacing: 0.03em;
    font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.3; color: #fff;
    margin: 0 0 var(--space-4); text-wrap: balance;
}
.about-statement cite {
    display: block; font-style: normal; font-size: var(--text-xs); font-weight: 700;
    letter-spacing: 0.24em; text-transform: uppercase; color: #F4E4C0;   /* 4.54 on the panel's lightest end */
}
.about-text { color: var(--color-text-muted); margin-bottom: var(--space-2); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-6); align-items: start; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); margin-bottom: var(--space-2); overflow: hidden; transition: border-color var(--duration-base) var(--ease-out); }
.faq-item:hover { border-color: var(--color-border-hover); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; padding: var(--space-2) var(--space-3); font-weight: 600; font-size: var(--text-sm); color: var(--color-charcoal); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { flex-shrink: 0; width: 22px; height: 22px; border: 1px solid var(--color-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-gold-dark); font-size: var(--text-sm); transition: transform var(--duration-base) var(--ease-out); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 var(--space-3) var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.faq-promo { background: var(--color-charcoal); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-2); }
.faq-promo .eyebrow { color: var(--color-gold-bright); }
.faq-promo h3 { color: #fff; font-size: var(--text-xl); margin-bottom: var(--space-1); }
.faq-promo p { font-size: var(--text-sm); color: rgba(255,255,255,0.7); margin-bottom: var(--space-3); }
.faq-aside { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); }
.faq-aside p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.faq-aside-line { font-size: var(--text-sm); font-weight: 600; color: var(--color-charcoal); padding: var(--space-1) 0; }

/* Contact */
/* Kavita's ruling, 2026-07-29: nobody should reach Fresha without meeting the
   waiver. Booking is now an explicit two-step here rather than a jump straight
   out, with step 2 still reachable directly so returning clients are not made
   to re-sign. */
.book-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); list-style: none; padding: 0; margin: 0; counter-reset: none; }
.book-step { position: relative; padding: var(--space-5) var(--space-4) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.book-step-n { display: block; font-family: 'Jost', sans-serif; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.22em; color: var(--color-gold-dark); margin-bottom: var(--space-2); }
.book-step h2 { font-family: 'Jost', sans-serif; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 300; letter-spacing: 0.05em; text-transform: none; margin-bottom: var(--space-2); }
.book-step p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.7; margin-bottom: var(--space-3); }
@media (max-width: 760px) { .book-steps { grid-template-columns: minmax(0, 1fr); } }

/* Locked until the waiver is in. Muted rather than half-transparent so it still
   clears contrast — a disabled control nobody can read is its own failure. */
.is-locked { background: var(--color-surface-2); color: #57524B; cursor: not-allowed; box-shadow: none; pointer-events: none; }   /* 4.9 on surface-2; the muted token was 4.33 */
.is-locked:hover { transform: none; box-shadow: none; }
.gate-note { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.6; }

/* Revealed by handleWaiverSubmit — signing is the gate, not the destination. */
.waiver-next { margin-top: var(--space-4); padding: var(--space-5) var(--space-4); border-radius: var(--radius-md); background: linear-gradient(150deg, #6A6660, var(--color-charcoal)); text-align: center; }
.waiver-next h3 { color: #fff; font-weight: 300; letter-spacing: 0.05em; margin-bottom: var(--space-1); }
.waiver-next p { color: rgba(255,255,255,0.78); font-size: var(--text-sm); margin-bottom: var(--space-3); }

.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: start; }
.contact-detail { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.contact-detail-icon { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); display: flex; align-items: center; justify-content: center; }
.contact-detail-icon svg { width: 18px; height: 18px; color: var(--color-gold-dark); }
.contact-detail-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold-dark); }
.contact-detail-value { font-size: var(--text-sm); font-weight: 600; color: var(--color-charcoal); }
.contact-detail-value small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 400; }
.contact-detail-value a { color: var(--color-gold-dark); text-decoration: underline; text-underline-offset: 3px; }
.belle-card { background: var(--color-bg); border: 1px solid var(--color-border); border-left: 2px solid var(--color-gold); border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-4); }
.belle-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.belle-card a { font-size: var(--text-sm); font-weight: 700; color: var(--color-gold-dark); letter-spacing: 0.04em; }
.belle-card a:hover { color: var(--color-charcoal); }

.booking-form { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: 0 12px 48px rgba(53,51,46,0.08); }
.booking-form h3 { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.booking-form > p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.form-group { margin-bottom: var(--space-2); }
.form-group label { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-charcoal); margin-bottom: var(--space-1); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: 'Jost', sans-serif; font-size: var(--text-sm); color: var(--color-text); background: var(--color-surface); transition: border-color var(--duration-fast); appearance: none; -webkit-appearance: none; }
/* was `outline: none` at higher specificity than the global :focus-visible rule,
   which silently removed the ring from every field on the site. */
.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible { outline: 2px solid var(--color-gold-dark); outline-offset: 2px; border-color: var(--color-gold-dark); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--color-gold-dark); box-shadow: 0 0 0 3px var(--color-gold-dim); }
.form-group textarea { resize: none; height: 96px; }
.form-submit { width: 100%; padding: var(--space-2); background: var(--color-charcoal); color: #fff; border: none; border-radius: var(--radius-sm); font-family: 'Jost', sans-serif; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast); }
.form-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(53,51,46,0.28); }
.form-submit:disabled { opacity: 0.85; cursor: default; transform: none; box-shadow: none; }

/* ---- Footer ---- */
footer { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E"), var(--color-charcoal-2); color: rgba(255,255,255,0.75); padding: var(--space-8) 0 var(--space-4); }
.footer-inner { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-3); }
/* Masthead close. The old shape — brand block plus three columns of links plus a
   copyright tail — is the footer that lands identically on a SaaS and a bakery.
   A studio's footer is better spent on what the studio actually is. */
.footer-mast { display: flex; align-items: center; gap: var(--space-2); }
.footer-monogram { display: inline-block; width: 56px; height: 56px; flex-shrink: 0; }
.footer-brand h3, .footer-mast h3 { color: #fff; font-size: var(--text-2xl); letter-spacing: 0.16em; text-transform: uppercase; }
.footer-brand-sub { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gold-bright); }
.footer-statement { margin-top: var(--space-3); max-width: 46ch; font-size: var(--text-base); color: rgba(255,255,255,0.62); }

.footer-facts { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.12); }
.footer-facts dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold-bright); margin-bottom: 6px; }
.footer-facts dd { font-size: var(--text-sm); color: rgba(255,255,255,0.72); }
.footer-facts a { color: #fff; text-decoration: underline; text-underline-offset: 3px; transition: color var(--duration-fast); }
.footer-facts a:hover { color: var(--color-gold-bright); }

.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,0.12); }
.footer-links a { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; color: rgba(255,255,255,0.7); transition: color var(--duration-fast); }
.footer-links a:hover { color: var(--color-gold-bright); }
.footer-social { display: inline-flex; align-items: center; gap: 8px; }
.footer-social svg { width: 16px; height: 16px; flex-shrink: 0; }

.footer-bottom { margin-top: var(--space-4); font-size: var(--text-xs); color: rgba(255,255,255,0.45); }
.footer-bottom p a { color: rgba(255,255,255,0.6); text-decoration: underline; transition: color var(--duration-fast); }
.footer-bottom p a:hover { color: var(--color-gold-bright); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-mobile-btn { display: flex; }
    .hero { min-height: 0; }
    .hero-inner { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6) var(--space-3); }
    .hero-frame { display: none; }
    .hero-visual { max-width: 440px; width: 100%; margin: var(--space-2) auto 0; }
    .hero-float { position: static; width: max-content; margin: var(--space-2) auto 0; text-align: center; }
    
    .about-grid, .contact-grid, .faq-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    section { padding: var(--space-8) 0; }
    .hero-stats { gap: var(--space-4); }
    .lockup-gold { font-size: var(--text-5xl); }
}
@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; }
    .hero-stats { flex-wrap: wrap; gap: var(--space-3); }
}

/* ============================================================
   v5 upgrade — signature motion, journey, compliance, mobile CTA
   ============================================================ */

/* ---- Scroll progress bar (under the fixed nav) ---- */
/* Scroll indicator as a reformer carriage on its rail. A gold bar filling
   left-to-right is what every site does; this studio's whole object is a
   carriage that travels a track, so the page's progress rides the same
   idea. The rail is always drawn; the carriage sits at your position. */
.scroll-rail { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 101; height: 12px; pointer-events: none; }
.scroll-rail::before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: rgba(201,165,103,0.22); }
.scroll-progress {
    position: absolute; top: 4px; left: 0; right: 0; height: 2px;
    background: var(--gold-foil); background-size: 200% auto;
    transform: scaleX(0); transform-origin: left;
}
.scroll-carriage { position: absolute; top: 0; left: 0; width: 30px; height: 11px; will-change: transform; }
@media (max-width: 760px) { .scroll-carriage { display: none; } .scroll-rail { height: 3px; } }
/* the carriage bed */
.scroll-carriage::before {
    content: ''; position: absolute; top: 1px; left: 0; width: 30px; height: 5px;
    border-radius: 2px; background: var(--color-gold);
    box-shadow: 0 1px 4px rgba(131,103,48,0.45);
}
/* its two wheels on the rail */
.scroll-carriage::after {
    content: ''; position: absolute; top: 7px; left: 4px; width: 22px; height: 4px;
    background:
        radial-gradient(circle 2px at 2px 2px, var(--color-gold-dark) 98%, transparent 100%),
        radial-gradient(circle 2px at 20px 2px, var(--color-gold-dark) 98%, transparent 100%);
}

/* ---- Hero poster: enable cursor-tilt (JS sets transform) ---- */

/* ---- Signature motion: the reformer carriage glides on its rail ---- */
.poster-reformer .carriage {
    transform-box: fill-box;
    transform-origin: center;
    animation: carriage-glide 4.6s var(--ease-out) infinite;
}
@keyframes carriage-glide {
    0%, 100% { transform: translateX(-7px); }
    50%      { transform: translateX(9px); }
}

/* ---- "Your first class" journey (home) ---- */
.journey-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
    counter-reset: step;
}
.journey-step {
    position: relative; padding: var(--space-4) var(--space-3) var(--space-3);
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: transform var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.journey-step:hover { transform: translateY(-4px); border-color: var(--color-border-hover); box-shadow: 0 12px 32px rgba(53,51,46,0.10); }
.journey-step::before {
    counter-increment: step; content: counter(step, decimal-leading-zero);
    position: absolute; top: calc(-1 * var(--space-2)); left: var(--space-3);
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-charcoal); color: var(--color-gold-bright);
    font-family: 'Jost', sans-serif; font-weight: 700; font-size: var(--text-sm);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(53,51,46,0.22);
}
.journey-step h3 { font-size: var(--text-lg); font-weight: 600; margin: var(--space-2) 0 var(--space-1); }
.journey-step p { font-size: var(--text-sm); color: var(--color-text-muted); }
.journey-time { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold-dark); }

/* ---- Sticky mobile CTA bar ---- */
.sticky-cta {
    position: fixed; left: var(--space-2); right: var(--space-2); bottom: var(--space-2);
    z-index: 95; display: none; align-items: center; justify-content: space-between;
    gap: var(--space-2); padding: 14px var(--space-3);
    background: var(--color-charcoal); border-radius: var(--radius-md);
    box-shadow: 0 12px 40px rgba(53,51,46,0.35);
    transform: translateY(140%); transition: transform var(--duration-base) var(--ease-out);
}
.sticky-cta span { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.65); text-transform: uppercase; }
.sticky-cta strong { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold-bright); white-space: nowrap; }
.sticky-cta.show { transform: translateY(0); }
@media (max-width: 720px) { .sticky-cta { display: flex; } }

/* ---- Cookie consent banner ---- */
.cookie-banner {
    position: fixed; left: var(--space-2); right: var(--space-2); bottom: var(--space-2);
    z-index: 200; max-width: 560px; margin: 0 auto;
    display: flex; flex-direction: column; gap: var(--space-2);
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-3);
    box-shadow: 0 16px 48px rgba(53,51,46,0.24);
    opacity: 0; transform: translateY(16px);
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.cookie-banner.show { opacity: 1; transform: translateY(0); }
.cookie-banner p { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.6; }
.cookie-banner a { color: var(--color-gold-dark); font-weight: 600; text-decoration: underline; }
.cookie-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.cookie-banner button {
    font-family: 'Jost', sans-serif; font-size: var(--text-xs); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
    padding: 10px var(--space-3); border-radius: var(--radius-sm);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast);
}
.cookie-decline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); }
.cookie-decline:hover { border-color: var(--color-border-hover); }
.cookie-accept { background: var(--color-charcoal); border: 1px solid var(--color-charcoal); color: #fff; }
.cookie-accept:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(53,51,46,0.28); }

/* ---- Legal / policy pages ---- */
.legal-body { max-width: 760px; margin: 0 auto; padding: var(--space-8) var(--space-3) var(--space-12); }
.legal-body h2 { font-size: var(--text-xl); letter-spacing: 0.06em; text-transform: uppercase; margin: var(--space-6) 0 var(--space-2); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: var(--space-2); }
.legal-body ul { padding-left: var(--space-3); margin-bottom: var(--space-2); }
.legal-body li { margin-bottom: var(--space-1); }
.legal-body a { color: var(--color-gold-dark); font-weight: 600; text-decoration: underline; }
.legal-updated { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold-dark); margin-bottom: var(--space-4); }

@media (max-width: 900px) { .journey-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); } }
@media (max-width: 480px) { .journey-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Motion layer (v7)
   ============================================================ */

/* Cross-document view transitions. Static multi-page nav used to be a hard
   white cut between pages; this crossfades them. Chromium ships it today,
   everyone else silently keeps the hard cut — no fallback needed. */
@view-transition { navigation: auto; }
/* Pages wipe up rather than crossfade — the same upward gesture the hero
   photograph and every masked heading use, so navigation belongs to the
   same motion vocabulary instead of being a generic dissolve. */
::view-transition-old(root) { animation: vt-out 240ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-wipe 560ms var(--ease-out) both; }
@keyframes vt-out  { to { opacity: 0; transform: scale(0.995); } }
@keyframes vt-wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Scroll-driven parallax on the studio photographs. Composed through a custom
   property so it stacks with the hover scale instead of fighting it. */
@property --img-y { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --img-s { syntax: '<number>';     inherits: false; initial-value: 1.04; }
.gallery-figure img { transform: scale(var(--img-s)) translateY(var(--img-y)); }
.gallery-figure:hover img { --img-s: 1; }
@supports (animation-timeline: view()) {
    .gallery-figure img {
        animation: gallery-drift linear both;
        animation-timeline: view();
        animation-range: entry cover exit cover;
    }
    @keyframes gallery-drift { from { --img-y: 3%; } to { --img-y: -3%; } }
}


/* Reveal depends on JS to add .visible. If script.js fails, the page would
   otherwise render completely blank — this is the guard. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* At 320px the uppercase + 0.1em tracking pushes long CTA labels onto a second
   line, which reads as a broken button rather than a wrapped one. Tighten the
   metrics instead of cutting the copy. */
@media (max-width: 420px) {
    .btn-primary, .btn-ghost, .btn-gold {
        padding: var(--space-2) var(--space-3);
        letter-spacing: 0.06em;
    }
}

/* ============================================================
   Motion layer II (v8) — the premium pass
   Considered moments rather than more hover-lifts. Everything here is
   transform/opacity/clip-path, and everything degrades in the
   reduced-motion block that follows.
   ============================================================ */

/* --- Signature entrance: headings rise from behind a mask ---------------
   The hero lockup already did this. Extending it to every section and page
   title gives the site one entrance language instead of a generic fade. */
.rise-mask { overflow: hidden; padding-bottom: 0.22em; }
.rise-mask .rise-inner { display: block; transform: translateY(115%); transition: transform 760ms var(--ease-out); }
[data-reveal].rise-mask { transform: none; }            /* the inner span does the travel */
[data-reveal].rise-mask.visible .rise-inner { transform: translateY(0); }
/* Stat numbers use the same mask but are not themselves reveal targets. */
.rise-mask.visible .rise-inner { transform: translateY(0); }
.hero-stat-num.rise-mask { padding-bottom: 0.12em; }

/* --- Gold rule draws itself outward from the centre --------------------- */
.gold-rule::before, .gold-rule::after { transform: scaleX(0); transition: transform 800ms var(--ease-out) 180ms; }
.gold-rule::before { transform-origin: right; }
.gold-rule::after  { transform-origin: left; }
.gold-rule i { transform: scale(0); transition: transform 420ms var(--ease-out) 120ms; }
[data-reveal].visible.gold-rule::before,
[data-reveal].visible.gold-rule::after { transform: scaleX(1); }
[data-reveal].visible.gold-rule i { transform: scale(1); }
/* Rules that are not themselves reveal targets (inside a revealed parent). */
.visible .gold-rule::before, .visible .gold-rule::after { transform: scaleX(1); }
.visible .gold-rule i { transform: scale(1); }

/* --- Hero photograph: masked entrance, then a slow drift ---------------- */
.hero-photo { clip-path: inset(0 0 0 0); }
.hero-photo img { animation: hero-in 1250ms var(--ease-out) 400ms both, hero-drift 30s var(--ease-soft) 2.2s infinite alternate; }
@keyframes hero-in {
    from { clip-path: inset(0 0 100% 0); transform: scale(1.12); }
    to   { clip-path: inset(0 0 0 0);    transform: scale(1); }
}
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.05); } }

/* --- Gallery: photographs wipe in rather than fade ----------------------
   The clip goes on the IMAGE, never on the figure. Clipping the observed
   element to zero height makes IntersectionObserver report it as not
   intersecting, so it never gets .visible and never unclips — the images
   would simply never appear. */
.gallery-figure img { clip-path: inset(0 0 100% 0); transition: transform 640ms var(--ease-out), clip-path 800ms var(--ease-out); }
.gallery-figure.visible img { clip-path: inset(0 0 0 0); }
[data-reveal].gallery-figure { transform: none; opacity: 1; }

/* --- Scroll-driven brand motif ------------------------------------------ */
@supports (animation-timeline: view()) {
    /* The reformer carriage glides as you scroll past it — the brand motif
       driven by the reader rather than by a timer. */
    .cta-reformer .carriage {
        animation: carriage-scroll linear both;
        animation-timeline: view();
        animation-range: entry cover exit cover;
    }
    @keyframes carriage-scroll { from { transform: translateX(-8px); } to { transform: translateX(10px); } }
}

/* --- Buttons take a light sweep on hover, echoing the foil -------------- */
.btn-primary, .btn-ghost, .btn-gold { position: relative; overflow: hidden; }
.btn-primary::after, .btn-ghost::after, .btn-gold::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.34) 50%, transparent 60%);
    transform: translateX(-120%);
}
.btn-primary:hover::after, .btn-ghost:hover::after, .btn-gold:hover::after {
    transform: translateX(120%); transition: transform 720ms var(--ease-out);
}
.btn-ghost::after { background: linear-gradient(115deg, transparent 40%, rgba(201,165,103,0.22) 50%, transparent 60%); }

/* --- Hero stat counters land rather than appear ------------------------- */
.hero-stat-num { font-variant-numeric: tabular-nums; }

/* --- FAQ answers open smoothly instead of snapping ---------------------- */
@supports selector(details::details-content) {
    :root { interpolate-size: allow-keywords; }
    .faq-item::details-content {
        block-size: 0; overflow: hidden;
        transition: block-size 420ms var(--ease-out), content-visibility 420ms allow-discrete;
        transition-behavior: allow-discrete;
    }
    .faq-item[open]::details-content { block-size: auto; }
}


/* --- The first-class journey, ridden by a carriage ----------------------
   Four steps in a row is a list. The same four steps with a carriage
   travelling the rail above them, driven by your scroll, is the studio's
   own object explaining its own class. */
.journey-rail { position: relative; height: 22px; margin-bottom: var(--space-3); }
.journey-rail-line { position: absolute; left: 0; right: 0; top: 15px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,165,103,0.45) 12%, rgba(201,165,103,0.45) 88%, transparent); }
.journey-rail-line::before, .journey-rail-line::after { content: ''; position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-gold); }
.journey-rail-line::before { left: 0; }
.journey-rail-line::after  { right: 0; }
/* The mover spans the whole rail, so translateX(100%) means "the rail's
   width" rather than "the carriage's own 44px". The glyph sits at its left
   edge and gets carried along. */
.journey-carriage { position: absolute; top: 0; left: 0; width: 100%; color: var(--color-gold-dark); }
.journey-carriage svg { display: block; width: 44px; height: 16px; }
@supports (animation-timeline: view()) {
    .journey-carriage {
        animation: journey-ride linear both;
        animation-timeline: view();
        animation-range: entry 85% exit 15%;
    }
    @keyframes journey-ride {
        from { transform: translateX(0); }
        to   { transform: translateX(calc(100% - 44px)); }
    }
}
/* Without scroll-driven support the carriage simply sits at the start of the
   rail — still reads as a rail with a carriage on it, just static. */
@media (max-width: 900px) { .journey-rail { display: none; } }


/* --- Detail band: the kit shot, paired with what it actually shows -------
   Pricing was the barest page on the site — three cards on empty ground. */
.detail-band { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-8); align-items: center; }
.detail-figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface-2); aspect-ratio: 4 / 5; }
.detail-figure img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 640ms var(--ease-out); }
.detail-figure:hover img { transform: scale(1); }
.detail-figure::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(228,203,151,0.5); pointer-events: none; }
.detail-copy .gold-rule { margin-bottom: var(--space-3); }
.detail-text { color: var(--color-text-muted); margin-bottom: var(--space-2); max-width: 52ch; }
@supports (animation-timeline: view()) {
    .detail-figure img {
        animation: detail-drift linear both;
        animation-timeline: view();
        animation-range: entry cover exit cover;
    }
    @keyframes detail-drift { from { transform: scale(1.08) translateY(-1.5%); } to { transform: scale(1.02) translateY(1.5%); } }
}
@media (max-width: 820px) {
    .detail-band { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .detail-figure { aspect-ratio: 3 / 2; }
}

/* --- Waiver page --------------------------------------------------------
   The waiver text and the form sit side by side on desktop so the document
   stays on screen while it is being agreed to. */

.waiver-h2 { font-size: var(--text-lg); letter-spacing: 0.08em; text-transform: uppercase; margin: var(--space-6) 0 var(--space-2); }
.waiver-form > .waiver-h2:first-of-type { margin-top: 0; }
.waiver-note { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }

.waiver-checks { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.waiver-check { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); font-size: var(--text-sm); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.waiver-check:hover { border-color: var(--color-border-hover); }
.waiver-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--color-gold-dark); flex-shrink: 0; }
.waiver-check input:checked ~ span { color: var(--color-charcoal); font-weight: 500; }
.waiver-check:has(input:checked) { border-color: var(--color-border-hover); background: var(--color-gold-dim); }


@media (max-width: 900px) {
}

/* Booking buttons hand off to Fresha; mark them so the jump is not a surprise. */
.book-ext { display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.5em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg) translateY(-0.1em); opacity: 0.75; }
.book-note { font-size: var(--text-xs); color: var(--color-text-muted); }
.classes-terms { text-align: center; max-width: 60ch; margin: 0 auto var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); }
.classes-terms strong { color: var(--color-charcoal); font-weight: 600; }
.classes-terms a { color: var(--color-gold-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Editorial pass (v20) — breaking the centred-grid rhythm
   ============================================================ */

/* The manifesto replaces six equal cards. The giant numeral carries the whole
   positioning; the six points hang off it as a list, not as boxes. */
.manifesto { padding: var(--space-16) 0; }
.manifesto-top { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: var(--space-6); align-items: center; margin-bottom: var(--space-12); }
.manifesto-figure {
    display: block; font-family: 'Jost', sans-serif; font-weight: 700; line-height: 0.72;
    font-size: clamp(9rem, 22vw, 20rem); letter-spacing: -0.04em;
    background: var(--gold-foil); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: foil-shift 9s var(--ease-in-out) infinite;
}
.manifesto-title { font-family: 'Jost', sans-serif; font-size: clamp(2.2rem, 4.8vw, 4rem); font-weight: 300; line-height: 1.08; letter-spacing: 0.05em; text-transform: none; }
.manifesto-desc { margin-top: var(--space-3); max-width: 44ch; color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.7; }

/* Two columns of hairline-separated entries — deliberately not cards. */
.manifesto-list { list-style: none; counter-reset: m; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); border-top: 1px solid var(--color-border); }
.manifesto-list li { counter-increment: m; position: relative; padding: var(--space-4) 0 var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); }
.manifesto-list li::before { content: counter(m, decimal-leading-zero); position: absolute; left: 0; top: var(--space-4); font-family: 'Jost', sans-serif; font-size: var(--text-sm); font-weight: 700; color: var(--color-gold-dark); letter-spacing: 0.08em; }
.manifesto-list h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: 0.02em; margin-bottom: 6px; }
.manifesto-list p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 42ch; }

/* One moment on the page that ignores the container entirely. */
.bleed { padding: 0; }
.bleed-figure { position: relative; margin: 0; height: clamp(420px, 72vh, 760px); overflow: hidden; }
.bleed-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
/* The scrim has to hold to the full width of the quote, not taper across it —
   at 0.35 by mid-frame the line crossed a bright wall and stopped being readable. */
.bleed-figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(28,26,23,0.86) 0%, rgba(28,26,23,0.74) 45%, rgba(28,26,23,0.3) 72%, rgba(28,26,23,0.06) 100%); }
.bleed-quote { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; max-width: 1080px; margin: 0 auto; padding: 0 var(--space-3); }
.bleed-quote span { display: block; max-width: 20ch; font-family: 'Jost', sans-serif; font-weight: 300; letter-spacing: 0.03em; font-size: clamp(1.5rem, 3.2vw, 2.7rem); line-height: 1.25; color: #fff; }
.bleed-quote cite { display: block; margin-top: var(--space-3); font-style: normal; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-gold-bright); }

/* Confidence with scale: section titles were 30px on a page selling a premium
   product. Nothing else on the page had permission to be large. */
.section-title { font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: 0.1em; }
.page-title { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: 0.12em; }

@media (max-width: 900px) {
    .manifesto-top { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); text-align: left; }
    .manifesto-figure { font-size: clamp(7rem, 34vw, 12rem); }
    .manifesto-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .bleed-figure { height: 60vh; }
    .bleed-figure::after { background: linear-gradient(to top, rgba(28,26,23,0.85) 20%, rgba(28,26,23,0.25) 100%); }
    .bleed-quote { justify-content: flex-end; padding-bottom: var(--space-6); }
    .bleed-quote span { max-width: 100%; }
}

/* Pricing as a rate list, not three equal cards. Big figures on
   hairline rows read like a price list in a good restaurant; three boxes read
   like a SaaS plan picker. */
.rate-list { border-top: 1px solid var(--color-border); }
.rate { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.7fr) auto; gap: var(--space-6); align-items: center; padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); transition: background var(--duration-base) var(--ease-out); }
.rate:hover { background: rgba(201,165,103,0.045); }
.rate-name h2 { font-family: 'Jost', sans-serif; font-size: clamp(1.4rem, 2.4vw, 1.95rem); font-weight: 300; letter-spacing: 0.05em; text-transform: none; }
.rate-name p { margin-top: 6px; font-size: var(--text-sm); color: var(--color-text-muted); max-width: 40ch; }
.rate-figure { text-align: right; }
.rate-price { display: block; font-family: 'Jost', sans-serif; font-size: clamp(2.3rem, 4.6vw, 3.4rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1; color: var(--color-charcoal); }
.rate-unit { display: block; margin-top: 6px; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.rate-cta { justify-self: end; white-space: nowrap; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-charcoal); border-bottom: 1px solid var(--color-gold); padding-bottom: 4px; transition: color var(--duration-fast), border-color var(--duration-fast); }
.rate-cta:hover { color: var(--color-gold-dark); border-color: var(--color-gold-dark); }
.rate.featured .rate-price { color: var(--color-gold-dark); }
.rate-flag { position: absolute; top: var(--space-2); left: 0; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold-dark); }
@media (max-width: 760px) {
    .rate { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-4) 0; }
    .rate-figure { text-align: left; }
    .rate-cta { justify-self: start; }
}

/* Classes as alternating editorial rows. Three equal cards was the last
   equal-box grid on the site; a level is a thing you read about, not a plan
   you compare in a row. */
.levels { display: grid; gap: var(--space-16); }
.level { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.level.reverse .level-photo, .level.reverse .level-mark { order: 2; }
/* Rows without a photograph carry the numeral instead — the manifesto's device,
   reused so an absent photo reads as art direction rather than a missing asset. */
.level-mark {
    font-family: 'Jost', sans-serif; font-weight: 700; line-height: 0.72;
    font-size: clamp(6rem, 15vw, 13rem); letter-spacing: -0.04em; text-align: center;
    background: var(--gold-foil); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: foil-shift 9s var(--ease-in-out) infinite;
}
.level-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 5 / 4; background: var(--color-surface-2); }
.level-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 640ms var(--ease-out); }
.level:hover .level-photo img { transform: scale(1); }
.level-photo::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(228,203,151,0.45); pointer-events: none; opacity: 0; transition: opacity var(--duration-base) var(--ease-out); }
.level:hover .level-photo::after { opacity: 1; }
.level-index { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold-dark); margin-bottom: var(--space-2); }
.level-copy h2 { font-family: 'Jost', sans-serif; font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 300; letter-spacing: 0.05em; text-transform: none; margin-bottom: var(--space-2); }
.level-copy p { color: var(--color-text-muted); max-width: 46ch; margin-bottom: var(--space-3); font-size: var(--text-base); line-height: 1.75; }
@supports (animation-timeline: view()) {
    .level-photo img { animation: level-drift linear both; animation-timeline: view(); animation-range: entry cover exit cover; }
    @keyframes level-drift { from { transform: scale(1.10) translateY(-1.6%); } to { transform: scale(1.03) translateY(1.6%); } }
}
@media (max-width: 820px) {
    .levels { gap: var(--space-8); }
    .level, .level.reverse { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .level.reverse .level-photo, .level.reverse .level-mark { order: 0; }
    .level-mark { text-align: left; }
    .level-photo { aspect-ratio: 3 / 2; }
}

/* About's four pillars were the last equal-box grid on the site. */
.creed { list-style: none; margin-top: var(--space-4); border-top: 1px solid var(--color-border); }
.creed li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.creed h3 { font-family: 'Jost', sans-serif; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-charcoal); margin-bottom: 4px; }
.creed p { font-size: var(--text-sm); color: var(--color-text-muted); }
/* Waiver v2 — questionnaire blocks */
.section-inner.narrow { max-width: 760px; }
.q { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.q legend { font-size: var(--text-sm); font-weight: 600; color: var(--color-charcoal); margin-bottom: var(--space-2); line-height: 1.5; }
.q-opts { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.q-opts .waiver-check { flex: 0 0 auto; min-width: 110px; }
.q-detail { margin-top: var(--space-2); }
.waiver-check.sig { align-items: flex-start; background: var(--color-surface); }