.site-header{position:fixed;inset:0 0 auto;width:100%;background:var(--white);color:var(--blue);transition:transform .2s}
.site-header.is-film-overlay:not(:focus-within){transform:translateY(-100%);pointer-events:none}
.hero{height:100vh;height:100svh;height:100dvh;min-height:0;max-height:none;width:100%;margin:0;padding:0;overflow:hidden;background:var(--navy)}
/* Extend below the clipped hero to lower the film centre by 12px without a gap. */
.hero .hero-film{position:absolute;inset:0;display:block;width:100%;height:calc(100% + 24px);aspect-ratio:auto;object-fit:cover;object-position:center;background:var(--navy)}
.hero .hero-shade{display:block;z-index:2;background:linear-gradient(90deg,rgba(3,19,34,.72),rgba(3,19,34,.35)48%,rgba(3,19,34,.02)85%);pointer-events:none}
.hero .hero-content{position:absolute;z-index:4;top:50%;left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));width:auto;max-width:none;transform:translateY(-50%);margin:0;padding:0;text-align:left;pointer-events:none}
.hero .eyebrow{max-width:none;margin:0 0 19.2px;font-size:.55rem;line-height:1.65;letter-spacing:.16em;font-weight:600}
.hero h1{font-size:clamp(2.8rem,5.44vw,5.32rem);line-height:1.04;font-weight:600;margin:0;letter-spacing:-.055em;text-shadow:0 2px 24px #03132224}
.hero-title-line{display:block;width:fit-content;max-width:100%;white-space:nowrap}
.hero-title-accessible{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero h1.is-typing .type-char{visibility:hidden}
.hero h1.is-typing .type-char.is-visible{visibility:visible}
.type-char{position:relative}
.hero h1.is-typing .type-char.is-current::after{content:"";position:absolute;left:100%;top:.12em;width:2px;height:.85em;margin-left:.07em;background:currentColor;opacity:.8}
.hero-fallback{margin-top:28px;pointer-events:auto}
.hero-fallback>p{font-size:1.125rem;line-height:1.6}
.hero-bottom{pointer-events:none}
.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:28px}
.hero-actions .text-link{margin-top:0}
.hero-explore{position:absolute;top:100%;left:0;display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:48px;margin-top:28px;padding:12px 18px;border:1px solid #ffffffd9;border-radius:var(--radius-control);background:#fffffff0;color:var(--navy);font-size:.875rem;line-height:1.5;font-weight:600;text-decoration:none;pointer-events:auto;touch-action:manipulation;transition:background .2s,border-color .2s}
.hero-explore>span{font-size:1.25rem;line-height:1}
.hero-explore:hover{background:#00ff80;border-color:#00ff80}
#concept{scroll-margin-top:-16px}
.hero-explore:focus-visible,.film-sound:focus-visible{outline:2px solid white;outline-offset:4px}
.film-sound{position:absolute;z-index:5;right:calc(max(24px,env(safe-area-inset-right)) + 56px);bottom:max(24px,env(safe-area-inset-bottom));display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffff66;border-radius:50%;background:#03132299;color:white;cursor:pointer;touch-action:manipulation;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.film-sound:hover{background:#031322cc;border-color:#ffffffa6}
.film-sound .sound-waves,.film-sound[aria-pressed="true"] .sound-muted{display:none}
.film-sound[aria-pressed="true"] .sound-waves{display:block}
.film-play{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 18px;border:1px solid white;border-radius:var(--radius-control);background:white;color:var(--navy);font-size:.875rem;line-height:1.5;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}
.film-play:hover{background:#00ff80;border-color:#00ff80}
.film-length{padding-left:12px;border-left:1px solid #111a3a40;font-weight:400}
.film-play[hidden],.film-error[hidden],.film-toggle[hidden]{display:none}
.hero .hero-film{z-index:1}
.hero.is-film-active .hero-fallback,.hero.is-film-active .hero-bottom{display:none}
.film-toggle{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:white;cursor:pointer;-webkit-tap-highlight-color:transparent}
.film-toggle-icon{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(3,19,34,.35);opacity:0;transition:opacity .2s}
.film-toggle-icon svg{grid-area:1/1}
.film-resume-icon{display:none}
.film-toggle[data-paused="true"] .film-pause-icon{display:none}
.film-toggle[data-paused="true"] .film-resume-icon{display:block}
.film-toggle[data-paused="true"] .film-toggle-icon,.film-toggle:focus-visible .film-toggle-icon{opacity:1}
.film-toggle:focus-visible{outline:2px solid white;outline-offset:-6px}
.film-noscript,.film-error{position:absolute;z-index:5;left:24px;bottom:24px;width:fit-content;max-width:calc(100% - 48px);padding:12px 18px;border-radius:var(--radius-control);background:#111a3a;color:white;font-size:1rem;line-height:1.6}
.film-error a{font-weight:600}
@media(hover:hover){.film-toggle:hover .film-toggle-icon{opacity:1}}
/* Fit the complete landscape frame on phones, including wide phone landscapes. */
@media(max-width:900px),(max-width:1050px) and (max-height:520px){
 .hero .hero-film{height:100%;object-fit:contain;object-position:center}
 .hero-explore,.film-sound{display:none}
}
@media(max-width:900px){
 .site-header,.site-header.is-film-overlay{background:var(--white);color:var(--blue);border-color:transparent;pointer-events:auto}
 .site-header.is-film-overlay:not(:focus-within){transform:none}
 .site-header.is-film-overlay .brand{visibility:visible}
 .site-header .mobile-menu-toggle,.site-header.is-film-overlay .mobile-menu-toggle{pointer-events:auto;background:transparent;color:var(--blue);border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 .site-header nav{color:var(--blue)}
 .hero{width:calc(100% - 2 * var(--safe-gutter));margin:var(--nav-offset,80px) auto 24px;border-radius:20px;height:calc(100svh - var(--nav-offset,80px) - 24px);min-height:240px}
 .hero-actions{gap:20px}
 .hero-explore{margin-top:24px;gap:20px}
 .film-sound{right:calc(max(18px,env(safe-area-inset-right)) + 56px);bottom:max(18px,env(safe-area-inset-bottom))}
 .hero .hero-content{top:46%;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));padding:0}
 .hero .hero-shade{background:linear-gradient(90deg,rgba(3,19,34,.65),rgba(3,19,34,.22)),linear-gradient(0deg,transparent,rgba(3,19,34,.1))}
 .hero .eyebrow{max-width:320px;margin-bottom:16px;font-size:clamp(.5rem,1.84vw,.55rem);letter-spacing:.12em}
 .hero h1{font-size:clamp(1.6rem,8vw,3.6rem);line-height:1.08;letter-spacing:-.055em}
 .film-toggle-icon{right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}
 .film-error{font-size:.875rem;left:16px;bottom:max(16px,env(safe-area-inset-bottom));max-width:calc(100% - 32px);padding:12px}
}
@media(max-width:900px) and (max-height:520px){.hero:not(.is-film-active){height:620px;min-height:620px}.hero .hero-content{top:50%;padding:0}.hero .eyebrow{max-width:none;margin-bottom:9.6px}.hero h1{font-size:clamp(1.6rem,8vh,2.8rem);line-height:1.02}.hero-explore{margin-top:18px}}
/* Keep the desktop overlay composition inside the full 16:9 portrait frame. */
@media(max-width:900px) and (orientation:portrait){
 .hero{height:auto;aspect-ratio:16/9;min-height:0}
 .hero .hero-content{top:50%}
 .hero .hero-shade{inset:0;height:100%;transform:none}
 .hero .eyebrow{max-width:calc(100% - 56px);margin-bottom:8px;font-size:clamp(.4375rem,1.4vw,.55rem)}
 .hero h1{font-size:clamp(1.125rem,5.44vw,3.4rem);line-height:1.04}
 .hero-explore{position:static;min-height:44px;margin-top:10px;padding:8px 12px;gap:14px;font-size:clamp(.6875rem,2.6vw,.875rem)}
 .film-sound{right:12px;bottom:12px}
 .film-toggle-icon{right:12px;top:12px;bottom:auto}
}
.hero-media{display:contents}
/* Mobile introduces the film with a separate title above its rounded frame. */
@media(max-width:900px),(max-width:1050px) and (max-height:520px){
 .hero,.hero:not(.is-film-active){display:block;width:calc(100% - 2 * var(--safe-gutter,24px));height:auto;min-height:0;aspect-ratio:auto;margin:var(--nav-offset,80px) auto 24px;overflow:visible;border-radius:0;background:white;color:var(--navy)}
 .hero .hero-content{position:relative;inset:auto;transform:none;width:100%;max-width:none;padding:0;margin:0 0 20px}
 .hero .eyebrow{max-width:none;margin-bottom:12px;font-size:clamp(.5rem,1.7vw,.65rem);color:var(--navy)}
 .hero h1{font-size:clamp(1.8rem,7.5vw,3.4rem);line-height:1.04;color:var(--navy);text-shadow:none}
 .hero h1 em{color:#00864a}
 .hero-media{display:block;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:20px;background:var(--navy);color:white}
 .hero .hero-shade{display:none}
 .film-toggle-icon{right:12px;top:12px;bottom:auto}
 .film-sound{right:12px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){.film-play,.film-toggle-icon,.site-header,.film-sound,.hero-explore{transition:none}.hero h1.is-typing .type-char{visibility:visible}.hero h1.is-typing .type-char.is-current::after{display:none}}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
.dimensions .dimension-readable{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dimensions .dimension-char{display:inline;position:relative;margin:0;font:inherit;letter-spacing:inherit;color:inherit}
.is-dimension-typing .dimension-char{opacity:0}
.is-dimension-typing .dimension-char.dimension-visible{opacity:1}
.is-dimension-typing .dimension-current::after{content:"";position:absolute;left:100%;top:.1em;height:.9em;width:1px;background:currentColor}
@media(prefers-reduced-motion:reduce),print{.is-dimension-typing .dimension-char{opacity:1}.dimension-current::after{display:none}}