/* Responsive hero v4, 2026-10-20.
 * Source 1664x960. Protected union: x340..1440, y140..890 (1100x750).
 * The safe box fits the scene; source coordinates are relative to that box.
 * Recalibrate these ratios if the source changes. No viewport-wide cover.
 */
.hero--video { background:#0b1c2f; }
.hero--video .hero__film { position:relative; isolation:isolate; overflow:hidden; }
.hero--video .hero__film::before { display:none; }
.hero--video .hero__grid { display:grid; grid-template-columns:minmax(0,560fr) minmax(0,640fr); align-items:center; gap:32px; min-height:440px; padding-block:0; }
.hero--video .hero__text { width:auto; min-width:0; padding-block:32px; position:relative; z-index:1; }
.hero--video h1 { max-width:14ch; font-size:clamp(40px,4.3vw,62px); line-height:1.04; letter-spacing:-.035em; text-wrap:balance; }
.hero--video .hero__sub { max-width:49ch; margin:22px 0 28px; color:#d4e2ef; }
.hero--video .hero__cta { gap:12px; }
.hero--video .hero__cta .btn { white-space:normal; text-align:center; }
.hero--video .hero__cta .btn--light { background:rgba(11,28,47,.52); border-color:#8ca8be; }
.hero--video .hero__cta .btn--light:hover { background:#17334b; border-color:#fff; }
.hero--video .hero__micro { color:#c4d5e4; font-size:14px; margin-top:18px; overflow-wrap:anywhere; }
.hero--video .hero__scene { --scene-height:440px; --scene-pad:24px; position:relative; min-width:0; width:100%; height:var(--scene-height); }
.hero--video .hero__viewport { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; }
.hero--video .hero__safe { position:relative; flex:none; width:calc(100% - var(--scene-pad) * 2); max-width:calc((var(--scene-height) - var(--scene-pad) * 2) * 1100 / 750); aspect-ratio:1100 / 750; }
.hero--video .hero__media { position:absolute; width:151.272727%; height:128%; left:-30.909091%; top:-18.666667%; pointer-events:none; }
.hero--video .hero__media img,.hero--video .hero__video { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:fill; }
.hero--video .hero__video { opacity:1; transition:none; }
.hero--video.has-video-error .hero__video { visibility:hidden; }
/* Blend both real source edges and clipping edges; keep fades outside safe box. */
.hero--video .hero__media::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#0b1c2f,transparent 3%,transparent 97%,#0b1c2f),linear-gradient(180deg,#0b1c2f,transparent 4%,transparent 96%,#0b1c2f); }
.hero--video .hero__viewport::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#0b1c2f,transparent 16px,transparent calc(100% - 16px),#0b1c2f),linear-gradient(180deg,#0b1c2f,transparent 16px,transparent calc(100% - 16px),#0b1c2f); }
.hero--video .hero__tools { position:absolute; z-index:2; right:8px; bottom:8px; display:flex; width:auto; margin:0; padding:0; min-height:0; }
.hero--video .hero__motion { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; width: 44px; padding: 0; color: #f0f6fc; background: #132c43; border: 1px solid #738da3; border-radius: 999px; font: 500 14px/1.2 var(--font); cursor: pointer; touch-action: manipulation; transition: background-color .18s, border-color .18s; }
.hero--video .hero__motion[hidden] { display: none; }
.hero--video .hero__motion:hover { background: #223f58; border-color: #d4e2ef; }
.hero--video .hero__motion:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
.hero--video .hero__motion-icon { width: 12px; height: 14px; position: relative; flex: none; }
.hero--video .hero__motion-icon::before { content: ''; position: absolute; top: 1px; left: 2px; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
.hero--video .hero__motion.is-playing .hero__motion-icon::before { top: 1px; left: 1px; width: 10px; height: 12px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hero--video .hero__strip { position: relative; background: #0b293e; }
.hero--video .hero__strip li { color: #bdd1e1; }


@media (max-width:1100px) and (min-width:961px) {
 .hero--video h1 { font-size:44px; }
 .hero--video .hero__sub { font-size:17px; }
 .hero--video .hero__cta { gap:10px; }
 .hero--video .hero__cta .btn { padding-inline:18px; font-size:14px; }
}
@media (max-width:960px) {
 .hero--video .hero__grid { grid-template-columns:minmax(0,1fr); min-height:0; gap:8px; max-width:682px; padding:12px 16px 24px; }
 .hero--video .hero__text { padding:8px 0 0; }
 .hero--video .hero__scene { --scene-pad:16px; --scene-height:min(346.666667px,calc((100vw - 32px) * 2 / 3)); width:min(520px,100%); justify-self:center; order:-1; }
 .hero--video h1 { max-width:18ch; font-size:clamp(31px,6vw,46px); line-height:1.08; }
 .hero--video .hero__sub { margin:16px 0 22px; max-width:47ch; font-size:16px; line-height:1.5; }
 .hero--video .hero__cta .btn { flex:1 1 auto; }
 .hero--video .hero__micro { font-size:13px; line-height:1.6; margin-top:16px; }
 .hero--video .hero__strip li { font-size:13px; padding-block:16px; }
 .hero--video .hero__strip b { font-size:15px; }
}
/* Landscape phones/tablets keep copy beside a compact scene, with normal scrolling. */
@media (min-width:700px) and (max-width:960px) and (max-height:600px) {
 .hero--video .hero__grid { grid-template-columns:minmax(0,3fr) minmax(0,2fr); max-width:1280px; gap:24px; padding-block:20px; }
 .hero--video .hero__scene { --scene-height:260px; width:100%; order:0; }
 .hero--video .hero__text { padding:0; }
 .hero--video h1 { font-size:32px; }
 .hero--video .hero__sub { margin:14px 0 18px; }
 .hero--video .hero__cta .btn { padding-inline:14px; font-size:14px; }
}
@media (prefers-contrast:more) {
 .hero--video .hero__text { background:#0b1c2f; }
 .hero--video .hero__sub,.hero--video .hero__micro { color:#fff; }
}
/* Homepage header exceeds the viewport at 1101px; expose its existing drawer earlier. */
@media (min-width:1101px) and (max-width:1180px) {
 body.home .hdr .nav,body.home .hdr__search { display:none; }
 body.home .hdr .icon-btn--m { display:inline-flex; }
 body.home .hdr .logo { margin-right:auto; }
}

/* Continuous backdrop: retain safe framing, blend source dark tones and feather the scene. */
.hero--video .hero__viewport { background:#0b1c2f; }
.hero--video .hero__media { mix-blend-mode:lighten; }
.hero--video .hero__viewport::after { background:linear-gradient(90deg,#0b1c2f 0%,transparent 23%,transparent 88%,#0b1c2f 100%),linear-gradient(180deg,#0b1c2f 0%,transparent 15%,transparent 85%,#0b1c2f 100%); }