/* Cinematic Scroll widget (template library version).
   Parts are optional and independent: .cs-hero (pinned video hero), .cs-statement, .cs-strip, .cs-reserve.
   [data-cinematic="short"] = page hero that zooms/fades as you scroll away, no pin. Tokens: --bg --cream --gold --gold2 --muted --serif --shade-rgb. */
.cs-hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;display:grid;place-items:center;text-align:center;isolation:isolate;background:var(--bg)}
.cs-media{position:absolute;inset:0;z-index:-2;will-change:transform}
.cs-media video,.cs-media img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.cs-shade{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 45%,rgba(var(--shade-rgb),.2),rgba(var(--shade-rgb),.78) 75%),linear-gradient(180deg,rgba(var(--shade-rgb),.6),rgba(var(--shade-rgb),.1) 30%,rgba(var(--shade-rgb),.9))}
/* seam-free bottom edge (any viewport, any point of the scroll animation): the media and overlay bleed 2px past the
   hero's clip edge (no bright hairline where the scaled, composited video meets the edge), and a feather layer that
   GSAP never animates blends the last part of the hero into the page background, so the hero runs into the next
   section without a hard line even after the overlay is lightened or the video is zoomed. */
.cs-media,.cs-shade{inset:-2px}
/* <video> is always its own compositor layer, so after a pin releases (fractional transform) its clip can round 1px past
   the overlay/feather: end the media 3px above the edge, inside the feather's fully opaque end, where it is invisible anyway */
.cs-media{bottom:3px;overflow:hidden}
.cs-hero::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:clamp(120px,24%,280px);z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent,var(--bg) 88%)}
.cs-title,.cs-lines{grid-area:1/1;position:relative;padding:0 1.5rem}
.cs-title .eyebrow{justify-content:center;color:var(--gold2);text-shadow:0 2px 14px rgba(0,0,0,.9)}
.cs-h{margin:0;font-family:var(--serif);font-size:clamp(6rem,22vw,20rem);font-weight:400;font-style:italic;line-height:.85;color:var(--cream);text-shadow:0 10px 60px rgba(0,0,0,.45)}
.cs-h>span{display:inline-block}
.cs-sub{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.8rem);font-style:italic;color:var(--cream);opacity:.92;margin:.9rem auto 0;max-width:34rem}
.cs-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.2rem}
.cs-lines{font-family:var(--serif);font-size:clamp(2.4rem,6.5vw,6.2rem);line-height:1.08;color:var(--cream);pointer-events:none}
/* line mask: the clip box gets extra room (padding) cancelled by an equal negative margin, so descenders (g y p j), italic
   tails and glyph overhang are never cut while the layout stays identical (bottom and sides only: stacked negative top margins
   would collapse); the JS start offset (yPercent 135) keeps each line fully below the extended edge until it rises */
.cs-hl{margin:0 -.14em -.28em;padding:0 .14em .28em;overflow:hidden;opacity:0}
.cs-hl>*{display:inline-block}
.cs-cue{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.7rem;font-size:.66rem;letter-spacing:.35em;text-transform:uppercase;color:rgba(var(--ink-rgb),.7)}
.cs-cue i{width:1px;height:56px;background:linear-gradient(var(--gold),transparent);animation:csCue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes csCue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
/* short page-hero variant (add .cs--vh for a full-viewport page hero: 100vh, with 100svh where supported so mobile
   browser bars never make it jump; content taller than the screen grows it instead of clipping) */
[data-cinematic="short"] .cs-hero{height:auto;min-height:clamp(540px,80svh,860px);place-items:end start;text-align:left}
[data-cinematic="short"] .cs-title{padding:calc(var(--header-h,84px) + 3rem) var(--gutter,1.5rem) clamp(3.5rem,8vh,6rem);width:100%;max-width:calc(var(--container,1320px) + var(--gutter,1.5rem) * 2);margin:0 auto}
.cs--vh[data-cinematic="short"] .cs-hero{height:auto;min-height:100vh;min-height:100svh}
[data-cinematic="short"] .cs-title .eyebrow{justify-content:flex-start}
[data-cinematic="short"] .cs-h{font-size:clamp(3rem,8vw,7.4rem);line-height:.95;max-width:14ch}
[data-cinematic="short"] .cs-sub{margin-left:0;font-family:var(--sans);font-style:normal;font-size:clamp(1.02rem,1rem + .35vw,1.25rem);color:rgba(var(--ink-rgb),.86)}
[data-cinematic="short"] .cs-shade{background:linear-gradient(90deg,rgba(var(--shade-rgb),.85),rgba(var(--shade-rgb),.35) 55%,rgba(var(--shade-rgb),.1)),linear-gradient(0deg,rgba(var(--shade-rgb),.95),rgba(var(--shade-rgb),0) 50%),linear-gradient(180deg,rgba(var(--shade-rgb),.6),transparent 25%)}
/* statement */
.cs-statement-text{font-family:var(--serif);font-size:clamp(1.9rem,4.2vw,3.8rem);line-height:1.18;margin:0}
.cs-statement-text .w{display:inline-block;opacity:.14}
/* reduced motion: static, fully readable */
@media (prefers-reduced-motion:reduce){
  .cs-lines{display:none}
  .cs-statement-text .w{opacity:1}
  .cs-media video,.cs-media img{transform:none}
}
/* light theme: the hero stays dark and image-led (on-media palette); see base.css */