/* The film is decorative; the message and links remain independent. */
.header{background:#070e1a;border-bottom-color:#ffffff24;backdrop-filter:none;-webkit-backdrop-filter:none}
.hero.hero-cinema{isolation:isolate;position:relative;background:#060c16;min-height:calc(100svh - 88px);height:auto;padding-top:27px}
.hero-cinema .hero-media{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:#060c16}
.hero-cinema .hero-media picture,.hero-cinema .hero-media img,.hero-cinema video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-cinema video{opacity:0;pointer-events:none}
.hero-cinema video.is-playing{opacity:1}
.hero-cinema video::-webkit-media-controls{display:none!important}
.hero-cinema:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#040a14d9 0%,#040a1499 29%,#040a1430 48%,transparent 66%)}
.hero-cinema .hero-layout{display:flex;align-items:center;min-height:590px;padding:38px 0;flex:1}
.hero-cinema .hero-copy{width:46%;max-width:640px;text-shadow:0 2px 24px #0009}
.hero-cinema h1{font-size:clamp(58px,6.2vw,106px);color:#fff}
.hero-cinema h1 em{color:#dceaff}
.hero-cinema .hero-description{max-width:410px;font-size:17px;line-height:1.65;color:#f1f5fc}
.hero-cinema .hero-top,.hero-cinema .hero-bottom{position:relative;z-index:2}
.hero-cinema .hero-bottom{border-color:#ffffff30;background:transparent}
.hero-cinema .hero-top{color:#dbe7fa;opacity:1}
.hero-cinema .hero-top i{background:#87b8ff;box-shadow:0 0 12px #76a9ff}
@media(max-width:900px){
 .hero.hero-cinema{height:calc(100svh - 74px);min-height:760px;padding-top:22px}
 .hero-cinema .hero-layout{min-height:0;display:block;padding:38px 0 0}
 .hero-cinema .hero-copy{width:100%;max-width:610px}
 .hero-cinema h1{font-size:clamp(48px,7.4vw,72px)}
 .hero-cinema .hero-description{font-size:16px;max-width:510px;margin:20px 0}
 .hero-cinema .hero-media{top:40%;bottom:0}
 .hero-cinema .hero-media picture,.hero-cinema .hero-media img,.hero-cinema video{object-fit:cover;object-position:center bottom}
 .hero-cinema:after{background:linear-gradient(180deg,#060c16 0%,#060c16 39%,#060c1600 58%,transparent 92%,#060c1680 100%)}
 .hero-cinema .hero-bottom{height:48px;min-height:48px;font-size:9px}
}
@media(max-width:600px){
 .hero.hero-cinema{height:calc(100svh - 74px);min-height:680px;padding-top:16px}
 .hero-cinema .hero-top{font-size:6.5px;line-height:1.6}
 .hero-cinema .hero-layout{padding-top:25px;flex:1}
 .hero-cinema .hero-copy>.eyebrow{font-size:8px;margin-bottom:13px}
 .hero-cinema h1{font-size:clamp(39px,10.5vw,57px);line-height:1.04}
 .hero-cinema .hero-description{font-size:13px;line-height:1.6;margin:17px 0;max-width:360px}
 .hero-cinema .hero-actions{gap:16px}
 .hero-cinema .hero-actions .button{font-size:10px;padding:13px 14px;gap:12px}
 .hero-cinema .hero-actions .text-link{font-size:10px}
 .hero-cinema .hero-media{top:43%;bottom:24px;left:-3%;right:-3%}
 .hero-cinema:after{background:linear-gradient(180deg,#060c16 0%,#060c16 43%,#060c1600 62%,transparent 94%,#060c1670 100%)}
 .hero-cinema .hero-bottom{height:38px;min-height:38px;font-size:8px}
 .header nav{background:#0a1525}
}
@media(max-width:600px) and (max-height:740px){
 .hero.hero-cinema{min-height:600px}
 .hero-cinema .hero-layout{padding-top:16px}
 .hero-cinema h1{font-size:clamp(35px,9.5vw,46px)}
 .hero-cinema .hero-description{font-size:12px;margin:12px 0}
}
@media(min-width:901px){
 .hero.hero-cinema{height:calc(100svh - 88px);min-height:610px}
 .hero-cinema .hero-layout{min-height:0;padding:24px 0}
}
@media(min-width:901px) and (max-height:800px){
 .hero-cinema h1{font-size:clamp(54px,5.6vw,80px)}
 .hero-cinema .hero-description{font-size:15px;line-height:1.6;margin:20px 0}
}
@media(max-width:900px){
 .hero-cinema .hero-media{mask-image:linear-gradient(180deg,transparent 0%,#000 28%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 28%)}
}
@media(max-width:600px){
 .hero-cinema .hero-media{top:auto;height:46svh;max-height:400px;bottom:24px}
 .hero-cinema .hero-media picture,.hero-cinema .hero-media img,.hero-cinema video{object-fit:cover;object-position:center bottom}
}
/* Only this first screen follows the film clock; it never replays on scroll. */
.hero-cinema.cinema-timed .hero-copy>*,.hero-cinema.cinema-timed .hero-bottom{opacity:0;transform:translateY(14px);filter:blur(4px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1),filter .85s ease;transition-delay:0s}
.hero-cinema.cinema-timed .hero-copy>.is-cinema-visible,.hero-cinema.cinema-timed .hero-bottom.is-cinema-visible{opacity:1;transform:none;filter:none}
.hero-cinema:not(.cinema-timed) .hero-copy>.scroll-reveal{opacity:1;transform:none;filter:none}
.hero-cinema .hero-bottom.is-cinema-visible .arrow-icon{animation:cinema-scroll-cue 2.4s ease-in-out infinite}
@keyframes cinema-scroll-cue{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.hero-cinema.cinema-timed .hero-copy>*,.hero-cinema.cinema-timed .hero-bottom{opacity:1;transform:none;filter:none;transition:none}.hero-cinema .hero-bottom .arrow-icon{animation:none!important}}

/* The navigation floats over the film, then resumes its original blue. */
.header{position:fixed;inset:0 0 auto;z-index:100;background:linear-gradient(110deg,#596f91,#718ba7);border-bottom-color:#ffffff40;transition:background .35s ease,border-color .35s ease;backdrop-filter:none;-webkit-backdrop-filter:none}
.header.is-over-hero{background:rgba(0,0,0,.26);border-bottom-color:#ffffff18;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero.hero-cinema{height:100svh;min-height:698px;padding-top:115px}
@media(max-width:900px){.hero.hero-cinema{height:100svh;min-height:834px;padding-top:96px}}
@media(max-width:600px){
 .hero.hero-cinema{height:100svh;min-height:754px;padding-top:90px}
 .header nav{background:#637c9a}
 .header.is-over-hero nav{background:rgba(5,12,23,.96)}
}
@media(max-width:600px) and (max-height:740px){.hero.hero-cinema{min-height:674px}}
@media(prefers-reduced-motion:reduce){.header{transition:none}}

/* Follow the visible mobile viewport, including browser-bar size changes. */
@media(max-width:900px){.hero.hero-cinema{height:100vh;height:100dvh;min-height:0}}
@media(max-width:600px){
 .hero-cinema .hero-media{height:46dvh}
 .hero-cinema .hero-bottom{padding-bottom:env(safe-area-inset-bottom,0px);height:calc(38px + env(safe-area-inset-bottom,0px));min-height:calc(38px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:600px) and (max-height:650px){
 .hero.hero-cinema{padding-top:84px}
 .hero-cinema .hero-layout{padding-top:10px}
 .hero-cinema h1{font-size:clamp(30px,8.5vw,39px)}
 .hero-cinema .hero-copy>.eyebrow{margin-bottom:8px}
 .hero-cinema .hero-description{font-size:11px;line-height:1.45;margin:10px 0}
 .hero-cinema .hero-actions .button{padding:10px 12px}
 .hero-cinema .hero-media{height:40dvh}
}

/* Portrait tablets retain the editorial split and a compact, single-line nav. */
@media(min-width:601px) and (max-width:900px) and (orientation:portrait){
 .header{padding-left:4%;padding-right:4%;gap:20px}
 .header .brand{flex:none}.header .brand img{width:clamp(88px,14.5vw,112px)}
 .header nav{gap:clamp(8px,1.5vw,14px);font-size:clamp(10px,1.44vw,11px);flex-wrap:nowrap;min-width:0}
 .header nav>a{white-space:nowrap;flex:none}
 .header .nav-cta{padding:11px 13px;font-size:inherit}
 .header .nav-cta .cta-label{gap:12px;white-space:nowrap}
 .header .nav-cta .cta-label>span{margin-left:0}
 .ink-case-grid.case-reversed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:7%;align-items:start;text-align:left;padding-top:65px}
 .ink-case-grid.case-reversed>.ink-case-story{grid-column:2;grid-row:1;position:sticky;top:112px;align-self:start;transform:none;opacity:1}
 .ink-case-grid.case-reversed>.ink-features{grid-column:1;grid-row:1;width:auto;padding-top:0}
 .ink-case-grid.case-reversed .ink-case-story h2{font-size:clamp(36px,4.9vw,46px);line-height:1.08}
 .ink-case-grid.case-reversed .ink-case-story>p:not(.eyebrow){font-size:14px;line-height:1.7;margin:22px 0}
 .case-reversed .ink-features>div{min-height:260px;padding:30px 0 55px;margin-bottom:30px;text-align:left}
 .case-reversed .ink-features>div:last-child{margin-bottom:0}
 .case-reversed .ink-features strong{font-size:23px}
 .case-reversed .ink-features .case-icon{margin:0 0 22px}
 .case-reversed .ink-features p{margin-left:0;margin-right:0}
}