/* =========================================================================
   SHOWPIECE — signature homepage. Layers over shared.css (front page only).
   Draft palette (--bg/--gold/--white) + Cormorant(--serif)/Jost(--sans) reused.
   Motion is transform/opacity only; JS adds initial states, CSS default is visible.
   ========================================================================= */
.sp{position:relative;background:var(--bg);color:var(--white);overflow:clip}
.sp *{box-sizing:border-box}
.sp h1,.sp h2,.sp h3{font-family:var(--serif);font-weight:300;line-height:1.02;margin:0}
.sp h2 em,.sp h1 em{font-style:italic;color:var(--gold)}
.sp .sp-eyebrow{font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.sp-eyebrow--center{text-align:center}
.sp-lede{font-family:var(--sans);font-weight:300;font-size:1.05rem;line-height:1.7;color:color-mix(in srgb, var(--fg) 62%, transparent);max-width:44ch}
.sp-link{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
	padding-bottom:4px;border-bottom:1px solid rgba(184,151,90,.4);transition:border-color .4s,letter-spacing .4s}
.sp-link:hover{border-color:var(--gold);letter-spacing:.22em}
.sp-link--light{color:var(--white);border-color:rgba(255,255,255,.35)}

/* grain overlay (subtle atmosphere on dark) */
.sp-open__grain,.sp-testi__grain,.sp-cta__grain{position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:1;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E")}

/* gold scroll-progress line */
.sp-progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold),rgba(184,151,90,.4));z-index:120;transform-origin:left}

/* custom cursor removed — native cursor only (P0.4) */

/* ---- 1. OPENING ---- */
.sp-open{position:relative;height:100svh;min-height:600px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
/* graded still, always beneath the video. If autoplay is blocked (iOS Low Power/Low
   Data) the video is hidden and this shows — so the native play button never appears. */
.sp-open__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sp-open__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sp-open--novideo .sp-open__media{display:none}
.sp-open__grade{position:absolute;inset:0;z-index:1;background:
	radial-gradient(120% 90% at 50% 40%,rgba(4,8,15,.35),rgba(4,8,15,.7) 75%),
	linear-gradient(180deg,rgba(4,8,15,.5),rgba(4,8,15,.35) 40%,rgba(4,8,15,.85))}
.sp-open__inner{position:relative;z-index:2;padding:0 24px}
.sp-word{font-family:var(--serif);font-weight:300;letter-spacing:.06em;line-height:.9;
	font-size:clamp(3.2rem,13vw,11rem);margin:0}
.sp-word__row{display:inline-flex;overflow:hidden;padding:0 .04em}
.sp-word .l{display:inline-block;will-change:transform}
.sp-word__sp{width:.4em}
.sp-open__sub{font-family:var(--sans);font-weight:300;font-size:clamp(.8rem,2.5vw,1rem);letter-spacing:.22em;text-transform:uppercase;
	color:color-mix(in srgb, var(--fg) 72%, transparent);margin-top:clamp(1.5rem,4vh,2.5rem)}
.sp-open__scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
	font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb, var(--fg) 50%, transparent);display:flex;flex-direction:column;align-items:center;gap:10px}
.sp-open__scroll span{width:1px;height:44px;background:linear-gradient(var(--gold),transparent)}
/* hero booking CTA — reveals with the wordmark; gold fill reads on the graded video */
.sp-open__cta{margin-top:clamp(2rem,5vh,3rem)}
.sp-open__btn{display:inline-block;font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.2em;
	text-transform:uppercase;color:var(--bg);background:var(--gold);padding:18px 44px;text-decoration:none;
	border:1px solid var(--gold);will-change:transform;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.sp-open__btn:hover{background:transparent;color:var(--white);border-color:var(--white)}
.sp-open__btn:focus-visible{outline:2px solid var(--white);outline-offset:4px}

/* ---- 2. STATS ---- */
.sp-stats{padding:clamp(6rem,14vh,11rem) 0;border-block:1px solid rgba(184,151,90,.14)}
.sp-stats__row{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(2rem,8vw,7rem);max-width:1100px;margin:0 auto;padding:0 24px;list-style:none}
.sp-stats__row li{display:flex;flex-direction:column;align-items:center;text-align:center}
.sp-stats__row b{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--gold);font-size:clamp(3rem,7vw,5.5rem);line-height:1;font-variant-numeric:tabular-nums}
.sp-stats__row span{font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb, var(--fg) 50%, transparent);margin-top:14px}

/* ---- 3. STORY ---- */
.sp-story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center;max-width:1300px;margin:0 auto;padding:clamp(5rem,12vh,9rem) clamp(1.5rem,5vw,4rem)}
.sp-story__media{margin:0;overflow:hidden;border-radius:2px}
.sp-story__media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;will-change:transform;transform:scale(1.15)}
.sp-story h2{font-size:clamp(2rem,5vw,4rem);margin-bottom:1.5rem}
.sp-story .sp-lede{margin-bottom:2rem}

/* ---- 4. SERVICES (horizontal) ----
   Intro is a static centered header ABOVE the gallery (reads on mobile); the track
   is the only thing the desktop pin translates. .sp-services__scroller is overflow:
   visible on desktop (lets the pinned track extend past the viewport) and a native
   snap-scroller on mobile. */
.sp-services{position:relative;padding-top:clamp(3rem,8vh,6rem)}
.sp-services__intro{max-width:900px;margin:0 auto;padding:0 24px clamp(2rem,5vh,3rem);text-align:center}
.sp-services__intro h2{font-size:clamp(2rem,4.5vw,3.4rem)}
.sp-services__scroller{overflow:visible}
.sp-services__track{display:flex;gap:clamp(1.5rem,3vw,2.5rem);padding:0 clamp(1.5rem,5vw,4rem) clamp(2rem,5vh,3rem);will-change:transform}
.sp-svc{flex:0 0 auto;width:min(78vw,360px);min-height:60vh;display:flex;flex-direction:column;justify-content:flex-end;
	padding:2.2rem;border:1px solid rgba(184,151,90,.16);background:linear-gradient(180deg,rgba(11,21,36,.2),rgba(11,21,36,.6));text-decoration:none;color:var(--white);transition:border-color .4s,transform .5s}
.sp-svc:hover{border-color:rgba(184,151,90,.5)}
.sp-svc__idx{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.4rem;margin-bottom:auto}
.sp-svc h3{font-size:1.7rem;margin-bottom:.6rem}
.sp-svc p{font-family:var(--sans);font-weight:300;font-size:.95rem;color:color-mix(in srgb, var(--fg) 55%, transparent);margin:0 0 1.2rem}
.sp-svc__go{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
/* desktop: the pinned section is a clean 100vh flex column (header / gallery / controls
   centred) so the intro-above-track layout never overflows the pin and clips cards. */
@media(min-width:821px){
	.sp-services{height:100vh;min-height:660px;display:flex;flex-direction:column;justify-content:center;
		gap:clamp(1rem,2vh,2rem);padding-top:0}
	.sp-services__intro{padding-bottom:0}
	.sp-svc{min-height:48vh}
	.sp-services__controls{padding-bottom:0}
}
/* gallery controls — prev/next + scrub progress. Tokens only, so the light theme
   inherits them; hidden in static/no-JS paths where the track is a native scroller. */
.sp-services__controls{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,28px);
	padding:0 clamp(1.5rem,5vw,4rem) clamp(2.5rem,7vh,4.5rem)}
.sp-svc-arrow{flex:0 0 auto;width:48px;height:48px;border:1px solid var(--border2);border-radius:50%;
	display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:22px;line-height:1;
	color:var(--gold);background:transparent;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.sp-svc-arrow:hover{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.sp-svc-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sp-services__bar{flex:1 1 auto;max-width:280px;height:2px;background:var(--border2);position:relative;overflow:hidden}
.sp-services__bar span{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}
html:not(.js) .sp-services__controls,
.sp-static .sp-services__controls{display:none}

/* ---- 5. SIGNATURE PROGRAMS — three editorial cards, ALL visible ----
   No pin, no crossfade, no scroll hijack. Entrance stagger only (JS-off = static).
   Weightier than the services slider by design: exactly three, all present. The ghost
   numeral is the card's background motif — same gold-token artistry as the particles. */
.sp-programs{position:relative;background:var(--bg2);padding:clamp(5rem,12vh,9rem) clamp(1.5rem,5vw,4rem)}
.sp-programs__head{text-align:center;max-width:900px;margin:0 auto clamp(2.5rem,6vh,4rem)}
.sp-programs__head h2{font-size:clamp(1.8rem,4vw,3rem);max-width:20ch;margin:0 auto}
.sp-programs__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,2.5vw,2rem);max-width:1200px;margin:0 auto}
@media(min-width:821px){.sp-programs__grid{grid-template-columns:repeat(3,1fr)}}
.sp-prog{position:relative;overflow:hidden;display:flex;min-height:340px;
	padding:clamp(2rem,3vw,2.75rem);border:1px solid var(--border2);background:var(--bg3)}
.sp-prog::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
	background:linear-gradient(90deg,var(--gold),transparent);z-index:2}
.sp-prog__num{position:absolute;top:-.16em;right:.04em;z-index:0;pointer-events:none;
	font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(7rem,12vw,11rem);line-height:1;
	color:var(--gold);opacity:.16}
.sp-prog__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;width:100%}
.sp-prog__tag{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:1.25rem}
.sp-prog__name{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1.05;margin-bottom:1rem;color:var(--white)}
.sp-prog__desc{font-family:var(--sans);font-weight:300;font-size:1rem;line-height:1.65;color:var(--muted);margin:0 0 auto;max-width:34ch}
.sp-prog__btn{margin-top:1.75rem}

/* ---- 6. TESTIMONIALS (crossfade) ---- */
.sp-testi{position:relative;padding:clamp(5rem,12vh,9rem) 24px;text-align:center;overflow:hidden}
.sp-testi__stage{position:relative;max-width:760px;margin:2rem auto 0;min-height:340px}
.sp-testi__slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;opacity:0;transition:opacity 1.4s ease;pointer-events:none}
.sp-testi__slide.is-active{opacity:1;pointer-events:auto}
.sp-testi__slide img{width:76px;height:76px;border-radius:50%;object-fit:cover;margin-bottom:1.75rem}
.sp-testi__slide blockquote{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.5;color:color-mix(in srgb, var(--fg) 85%, transparent);margin:0 0 1.5rem}
.sp-testi__slide figcaption{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.sp-testi__dots{display:flex;gap:10px;justify-content:center;margin-top:2.5rem}
.sp-testi__dots button{width:7px;height:7px;border-radius:50%;border:0;background:rgba(184,151,90,.3);cursor:pointer;transition:background .3s,transform .3s}
.sp-testi__dots button.is-active{background:var(--gold);transform:scale(1.3)}

/* ---- CTA ---- */
.sp-cta{position:relative;text-align:center;padding:clamp(6rem,16vh,12rem) 24px;overflow:hidden}
.sp-cta h2{font-size:clamp(2.2rem,6vw,4.5rem);margin-bottom:2.5rem}
.sp-btn{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--bg);
	background:var(--gold);padding:20px 46px;text-decoration:none;position:relative;will-change:transform;transition:background .4s}
.sp-btn:hover{background:var(--white)}

/* ---- responsive: mobile tuned-down (still opens with video + wordmark) ---- */
@media(max-width:820px){
	.sp-story{grid-template-columns:1fr;gap:2rem}
	.sp-story__media img{transform:none;aspect-ratio:16/10}
	/* first card fully visible, next card peeks ~18vw (the peek IS the affordance) */
	.sp-services__scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-padding-left:6vw}
	.sp-services__track{flex-wrap:nowrap;padding:0 6vw clamp(1.25rem,4vh,2rem);gap:14px}
	.sp-svc{width:80vw;min-height:52vh;scroll-snap-align:start}
	/* touch-sized controls */
	.sp-services__controls{gap:18px;padding-bottom:clamp(2rem,7vh,3rem)}
	.sp-svc-arrow{width:52px;height:52px;font-size:24px}
	.sp-services__bar{max-width:none}
}
@media(max-width:520px){
	.sp-stats__row{gap:2.5rem}
	.sp-word{font-size:clamp(3rem,17vw,5rem)}
}

/* ---- reduced motion: clean static, everything visible ---- */
@media(prefers-reduced-motion:reduce){
	.sp-open__media{display:none}
	.sp-open{background:linear-gradient(160deg,var(--bg3),var(--bg))}
	.sp-word .l{transform:none!important}
	.sp-prog{opacity:1!important;transform:none!important}
	.sp-story__media img{transform:none}
	.sp-testi__slide{position:relative;opacity:1!important;margin-bottom:3rem}
	.sp-progress{display:none}
	.sp-services__controls{display:none}
	*{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* static fallback (reduced-motion OR no-GSAP): clean stacked layout */
.sp-static .sp-word .l{transform:none!important}
.sp-static [data-open-sub]{opacity:1!important}
.sp-static .sp-prog{opacity:1!important;transform:none!important}
.sp-static .sp-testi__slide{position:relative;opacity:1!important;margin-bottom:3rem}
.sp-static .sp-story__media img{transform:none}
.sp-static .sp-services__track{overflow-x:auto}

/* the showpiece runs its own cursor; retire the draft's cursor + particles on home */
body.home #cursor-dot,body.home #cursor-ring,body.home #particle-canvas{display:none!important}

/* Programs is now a static card grid — visible with JS dead by construction; no pinned
   fallback needed. Entrance stagger (JS only) sets opacity via GSAP, never CSS. */