.film-hero.hero{position:relative;height:auto;min-height:0;padding:0;background:#101f27;overflow:visible;isolation:isolate}
.film-stage{position:relative;height:min(100svh,56.25vw);min-height:0;overflow:hidden;color:#fff5e7}
.film-hero.film-enhanced{height:390svh;min-height:900px}
.film-enhanced .film-stage{position:sticky;top:0}
.film-world,.film-shade{position:absolute;inset:0;pointer-events:none}
.film-world img,.film-world video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 50%}
.film-video{opacity:0}.film-ready .film-video{opacity:1}
.film-shade{background:linear-gradient(90deg,#071a29b8,transparent 55%),linear-gradient(0deg,#071a29b0,transparent 25%)}
.film-copy{position:absolute;z-index:2;left:var(--gutter);top:24%;width:min(38%,490px);text-align:left;text-shadow:0 2px 24px #07172355}
.film-copy h1,.film-copy h2{font:500 clamp(62px,6.4vw,104px)/.94 Cormorant,Georgia,serif;letter-spacing:-.035em;margin:0 0 24px}
.film-copy .eyebrow{font-size:14px;letter-spacing:.15em;margin:0 0 20px}.film-copy>p:last-child{font-size:18px;line-height:1.65;margin:0}
.film-closing,.film-whale{opacity:0;visibility:hidden}
.film-controls{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);bottom:38px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.film-controls .button{font-size:16px;min-height:48px}.film-skip{font-size:15px;color:#fff5e7;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:12px}.film-skip:hover{text-decoration:underline}
.film-motion{margin-left:auto;min-height:44px;font:inherit;font-size:14px;border:1px solid #fff6;border-radius:30px;background:#102534a3;color:#fff5e7;padding:10px 17px;backdrop-filter:blur(10px)}.film-motion[hidden]{display:none}
.film-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff20;display:none}.film-enhanced .film-progress{display:block}.film-progress span{display:block;width:100%;height:100%;background:#efcfa3;transform:scaleX(0);transform-origin:left}
body:has(.film-hero) .site-header{z-index:10}
@media(max-width:700px){body:has(.film-hero) .site-header{position:absolute;top:16px;left:18px;right:18px;height:54px;padding:8px 15px;border-radius:40px;border:1px solid #fff6;background:#f5ecd9ed}body:has(.film-hero) .site-header .wordmark{font-size:19px}body:has(.film-hero) .site-header nav{top:64px;left:0;right:0;border-radius:22px;padding:18px}.film-stage{min-height:660px}.film-hero.film-enhanced{height:340svh}.film-copy{left:24px;right:24px;top:112px;width:auto;text-align:left}.film-copy h1,.film-copy h2{font-size:clamp(52px,13vw,72px);margin-bottom:16px}.film-copy .eyebrow{font-size:14px;margin-bottom:14px}.film-copy>p:last-child{font-size:16px}.film-shade{background:linear-gradient(#081c2bcc,transparent 62%),linear-gradient(0deg,#071a29cc,transparent 24%)}.film-controls{left:24px;right:24px;bottom:24px;gap:8px 16px}.film-motion{margin-left:0}.film-controls .button{padding:12px 20px}.film-skip{font-size:14px}}
@media(min-width:701px) and (max-width:1100px){.film-copy{top:25%}.film-copy h1,.film-copy h2{font-size:clamp(42px,6vw,66px);margin-bottom:14px}.film-copy .eyebrow{margin-bottom:10px}.film-copy>p:last-child{font-size:16px}.film-controls{bottom:20px}}
@media(max-height:650px) and (min-width:701px){.film-copy{top:24%}.film-copy h1,.film-copy h2{font-size:clamp(40px,6vw,62px);margin-bottom:12px}.film-copy .eyebrow{margin-bottom:8px}.film-copy>p:last-child{font-size:16px}.film-controls{bottom:16px}}
@media(max-width:700px){.film-stage{height:100svh;min-height:max(700px,calc(480px + 75vw))}.film-world{top:350px;bottom:auto;height:75vw}.film-shade{background:linear-gradient(#071a2955,transparent 50%)}.film-copy{top:105px}.film-copy h1,.film-copy h2{font-size:clamp(48px,12vw,66px);margin-bottom:12px}.film-copy .eyebrow{margin-bottom:10px}.film-controls{bottom:24px}}
@media(prefers-reduced-motion:reduce){.film-hero.film-enhanced{height:auto;min-height:0}.film-enhanced .film-stage{position:relative}.film-video,.film-progress,.film-motion{display:none!important}.film-opening{opacity:1!important;visibility:visible!important;transform:none!important}.film-closing{display:none!important}}
html:not(.js) body:has(.film-hero) .site-header{position:relative;top:0;left:0;right:0;height:auto;border-radius:0}

/* Keep the existing navigation available throughout the homepage journey. */
body:has(.film-hero) .site-header{position:fixed}
@media(prefers-reduced-motion:reduce){.film-whale{display:none!important}}

@media(max-width:700px){.film-world img,.film-world video{object-fit:cover;object-position:60% center}}
/* Warm translucent glass retains the ink wordmark and amber listening action. */
body:has(.film-hero) .site-header{background:linear-gradient(120deg,#fff5e6a6,#f5e9d375);border:1px solid #fff4dd99;backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%);box-shadow:inset 0 1px 0 #fff9,inset 0 -1px 0 #ffffff26,0 8px 30px #0619231c;color:#102b37}
body:has(.film-hero) .site-header .button.gold{background:#f4d5aee6;border:1px solid #fff0d5b3;box-shadow:inset 0 1px 0 #fff7,0 3px 12px #45301a0d;color:#102b37}
body:has(.film-hero) .site-header nav{font-size:14px}
@media(max-width:700px){body:has(.film-hero) .site-header nav{background:#f4eddfed;border:1px solid #fff7;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 12px 32px #081d2926}body:has(.film-hero) .site-header .menu-toggle{background:#fff2;border-color:#15344040;font-size:14px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body:has(.film-hero) .site-header{background:#f4ebdff2}}
/* Follow the imagined journey with an immediate, readable listening choice. */
body:has(.film-hero) #story-collection{scroll-margin-top:105px;background:#101f27;color:#fff5e7;padding:clamp(60px,7vw,110px) 0}
body:has(.film-hero) .collection .section-heading{margin-bottom:40px;align-items:end}
body:has(.film-hero) .collection .section-heading .eyebrow{font-size:14px;letter-spacing:.12em}
body:has(.film-hero) .collection .section-heading>p{font-size:16px;line-height:1.7}
body:has(.film-hero) .collection .story-grid{grid-template-columns:1fr 1fr;gap:48px 36px;align-items:start}
body:has(.film-hero) .collection .story-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;gap:0;background:#19333d;border:1px solid #ffffff16;border-radius:26px;overflow:hidden}
body:has(.film-hero) .collection .story-card:first-child .story-art{border-radius:0;height:100%}
body:has(.film-hero) .collection .story-card:first-child .story-art img{height:100%;min-height:370px;aspect-ratio:1.8;object-fit:cover}
body:has(.film-hero) .collection .story-card:first-child .story-card-copy{padding:clamp(26px,4vw,62px);align-self:center}
body:has(.film-hero) .collection .story-card:first-child h3{font-size:clamp(38px,4vw,60px)}
body:has(.film-hero) .collection .story-card:last-child{grid-column:auto;max-width:none;width:100%}
body:has(.film-hero) .collection .story-art img{aspect-ratio:1.8}
body:has(.film-hero) .collection .story-card h3{font-size:clamp(30px,3vw,40px);line-height:1.12;text-wrap:pretty}
body:has(.film-hero) .collection .story-card-copy p{font-size:16px;line-height:1.75}
body:has(.film-hero) .collection .story-badge{font-size:14px}
.home-story-action{margin-top:24px}.home-story-action .button{font-size:15px;min-height:46px}
body:has(.film-hero) .purpose{padding:clamp(70px,9vw,140px) 0;background:#f5efe3}
body:has(.film-hero) .purpose-layout>.eyebrow{font-size:14px;letter-spacing:.12em}
body:has(.film-hero) .purpose p{font-size:18px;line-height:1.8}
body:has(.film-hero) .purpose .button{font-size:16px}
body:has(.film-hero) .app-invite{border-top:1px solid #19333d19;background:#e5e9e1}
body:has(.film-hero) .app-invite .phone{transform:none}
body:has(.film-hero) .app-invite .eyebrow{font-size:14px}
body:has(.film-hero) .app-invite p{font-size:18px}
@media(max-width:700px){body:has(.film-hero) .collection .story-grid{display:grid;grid-template-columns:1fr;gap:38px}body:has(.film-hero) .collection .story-card:first-child{display:block}body:has(.film-hero) .collection .story-card:first-child .story-art img{min-height:0;height:auto;aspect-ratio:1.6}body:has(.film-hero) .collection .story-card:first-child .story-card-copy{padding:26px}body:has(.film-hero) .collection .story-card:first-child h3{font-size:38px}body:has(.film-hero) .collection .section-heading h2{font-size:42px}body:has(.film-hero) .collection .section-heading>p{margin-top:16px}body:has(.film-hero) .purpose p,body:has(.film-hero) .app-invite p{font-size:16px}.film-copy .eyebrow{font-size:12px;letter-spacing:.1em}}

/* The collection masks the held final frame instead of following an empty tail. */
body:has(.film-hero) .site-header .button.gold,.film-controls .button.gold,.home-story-action .button.gold{background:linear-gradient(135deg,#ffe4bcbf,#eec58f8c);border:1px solid #fff1cfb3;color:#102a35;backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);box-shadow:inset 0 1px 0 #fff9,inset 0 -1px 0 #7b532326,0 5px 20px #071a291a;text-shadow:0 1px 0 #ffffff35}
body:has(.film-hero) .site-header .button.gold:hover,.film-controls .button.gold:hover,.home-story-action .button.gold:hover{background:linear-gradient(135deg,#ffebcfd9,#f4d2a4b3);border-color:#fff4df}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body:has(.film-hero) .site-header .button.gold,.film-controls .button.gold,.home-story-action .button.gold{background:#f2d2a9}}
body:has(.film-hero){--film-stage-height:min(100svh,56.25vw)}
.film-stage{height:var(--film-stage-height)}
.film-hero.film-enhanced{height:calc(390svh + var(--film-stage-height))}
body:has(.film-enhanced) #story-collection{position:relative;z-index:2;margin-top:calc(-1 * var(--film-stage-height));border-radius:32px 32px 0 0;box-shadow:0 -1px 0 #ffffff20;overflow:hidden}
@media(max-width:700px){body:has(.film-hero){--film-stage-height:calc(402px + 75vw)}.film-stage{height:var(--film-stage-height);min-height:0}.film-hero.film-enhanced{height:calc(340svh + var(--film-stage-height))}.film-world{top:284px;height:75vw}.film-copy{top:100px}.film-copy h1,.film-copy h2{font-size:clamp(38px,9.7vw,50px);margin-bottom:12px}.film-copy>p:last-child{font-size:15px;line-height:1.5}.film-copy .eyebrow{font-size:12px;margin-bottom:10px}.film-controls{bottom:18px;gap:4px 14px}.film-controls .button{font-size:14px;min-height:44px}.film-motion{font-size:13px;min-height:40px;padding:8px 14px}body:has(.film-enhanced) #story-collection{border-radius:24px 24px 0 0}}
@media(prefers-reduced-motion:reduce){.film-hero.film-enhanced{height:auto}body:has(.film-enhanced) #story-collection{margin-top:0;border-radius:0;box-shadow:none}}

/* Pin the film and real story content as one flow. A shorter film now reveals
   the beginning of the collection, rather than an empty scroll-track backdrop.
   After playback, the inner film stays pinned as the rounded collection covers it. */
.film-flow{position:relative}
.film-hero.film-enhanced{height:calc(390svh - var(--film-stage-height) + var(--film-flow-height,var(--film-stage-height)));min-height:0}
.film-enhanced .film-flow{position:sticky;top:0}
body:has(.film-enhanced) #story-collection{margin-top:0}
@media(max-width:700px){.film-hero.film-enhanced{height:calc(340svh - var(--film-stage-height) + var(--film-flow-height,var(--film-stage-height)))}}
@media(prefers-reduced-motion:reduce){.film-hero.film-enhanced{height:auto}.film-enhanced .film-flow{position:relative}}

/* Mobile film: natural text height, intact 4:3 image, and a stable action grid. */
@media(max-width:700px){
 .film-stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;height:auto;min-height:0;padding-top:92px}
 .film-copy{position:relative;grid-area:1/1;left:auto;right:auto;top:auto;width:auto;align-self:center;margin:0;padding:12px 24px 24px}
 .film-copy h1,.film-copy h2{font-size:clamp(40px,10.8vw,52px);line-height:.98;margin-bottom:14px}
 .film-copy .eyebrow{font-size:12px;line-height:1.6;max-width:32ch;margin-bottom:12px}
 .film-copy>p:last-child{font-size:16px;line-height:1.5}
 .film-copy>p br{display:none}
 .film-world{position:relative;grid-area:2/1;inset:auto;height:auto;aspect-ratio:4/3;width:100%}
 .film-controls{position:relative;grid-area:3/1;inset:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;margin:0;padding:18px 24px 20px;align-items:center}
 .film-controls>.button{grid-column:1/-1;width:100%;padding:12px 20px;min-height:54px;margin:0;border-radius:22px;font-size:16px}
 .film-controls>.button>span{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2px 14px;width:100%;text-align:left}
 .film-listen-title{font-size:13px;margin:0}
 .film-skip{min-width:0;min-height:44px;font-size:14px;gap:8px;line-height:1.4}
 .film-motion{margin:0;min-height:44px;padding:9px 12px;font-size:13px;white-space:nowrap}
 .film-shade{display:none}
 .film-hero.film-enhanced{height:calc(340svh - var(--film-measured-stage-height,var(--film-stage-height)) + var(--film-flow-height,var(--film-stage-height)))}
}