/* The scene is the page; controls stay at its edges. */
.hero { height:100svh; min-height:600px; }
.hero-header { top:32px; left:4.4%; right:4.4%; }
.brand-lockup { width:145px; height:auto; }
.hero-payoff { left:4%; top:34%; width:92%; text-align:center; }
.hero-payoff h1 { letter-spacing:-.045em; }
.payoff-name { font-size:clamp(72px,11.5vw,184px); font-weight:700; letter-spacing:-.065em; line-height:1; margin-bottom:21px; }
.payoff-description { font-size:clamp(25px,2.75vw,44px); display:flex; justify-content:center; flex-wrap:wrap; gap:0 .23em; }
.payoff-line { font-size:clamp(25px,2.75vw,44px); letter-spacing:-.045em; line-height:1.4; }
.payoff-values span:last-child { color:inherit; }
.payoff-english { max-width:none; font-size:clamp(13px,1.65vw,25px); line-height:1.55; margin-top:38px; color:#123b60; }
.hero-payoff .demo-cta { margin-top:27px; background:#e9f6f44d; color:#072957; border-color:#123b6066; font-size:11px; padding:11px 22px; min-height:44px; backdrop-filter:blur(10px); }
.hero-payoff .demo-cta:hover { background:#f3fff1c9; }
.hero-payoff .demo-cta span { color:#235d4b; }
.hero-tag { left:4.4%; bottom:132px; color:#e7f8ff; font-size:10px; letter-spacing:.13em; }
.hero-tag span { font-size:13px; color:#d0e4f4; }
.edge-wave { right:4.4%; bottom:133px; width:95px; }
.home-nav { left:4.4%; right:4.4%; bottom:42px; grid-template-columns:repeat(4,minmax(0,246px)); justify-content:space-between; gap:28px; }
.nav-link { min-height:54px; padding:14px 22px; background:#041f40b3; border:1px solid #c0e9fa5c; box-shadow:inset 0 1px #e5f9ff0a; }
.nav-link:first-child { border-color:#5fc5de9c; }
.nav-text { font-size:12px; gap:12px; }
.nav-number { color:#8cd7ee; opacity:1; font-size:9px; }
.nav-link:hover { background:#0b4770e8; color:#fff; border-color:#a6e8f3; transform:translateY(-3px); }
.story-dialog { inset:0; width:100%; height:100dvh; border:0; border-radius:0; background:#f8fbfd; }
.story-layout { grid-template-rows:76px minmax(0,1fr) 70px; }
.story-top { background:#eff7fa; padding:0 4.4%; }
.story-content { max-width:1440px; padding:46px 4.4% 48px; }
.story-bottom { padding:0 4.4%; background:#eaf4f9; }
.section-heading { font-family:OpenSans,Arial,sans-serif; font-weight:700; font-size:clamp(34px,3.5vw,55px); letter-spacing:-.055em; line-height:1.13; }
.film-dialog { background:radial-gradient(ellipse at 65% 45%,#174b75,#03152f 65%); }
.film-header { top:26px; left:4.4%; right:4.4%; }
.film-content { padding:80px 9vw 40px; grid-template-columns:1fr minmax(260px,.8fr); gap:8vw; }
.video-shell { height:min(84svh,940px); border-radius:8px; border-color:#84c9e757; }
.film-copy h2 { font-size:clamp(43px,5.7vw,91px); }
.film-copy p { max-width:390px; }
.film-close { min-height:44px; }
@media(min-width:1700px) { .hero-payoff { top:35%; } .home-nav { grid-template-columns:repeat(4,minmax(0,280px)); } }
@media(min-width:701px) and (max-height:750px) {
  .hero { min-height:550px; }
  .hero-payoff { top:30%; }
  .payoff-name { font-size:min(10vw,125px); margin-bottom:15px; }
  .payoff-line { font-size:clamp(22px,2.5vw,35px); }
  .payoff-english { margin-top:20px; font-size:17px; }
  .hero-payoff .demo-cta { margin-top:18px; }
  .hero-tag,.edge-wave { bottom:110px; }
  .home-nav { bottom:28px; }
}
@media(max-width:1000px) and (min-width:701px) {
  .home-nav { gap:12px; }
  .nav-link { padding:14px; }
  .nav-text { font-size:11px; gap:8px; }
}
@media(max-width:700px) {
  .hero { min-height:600px; }
  .hero-header { top:25px; left:7%; right:7%; }
  .brand-lockup { width:128px; }
  .hero-payoff { top:31%; left:6%; width:88%; }
  .payoff-name { font-size:clamp(48px,13.5vw,89px); margin-bottom:21px; }
  .payoff-description { display:block; }
  .payoff-line { font-size:clamp(21px,5.5vw,34px); line-height:1.4; }
  .payoff-values { justify-content:center; }
  .payoff-english { margin:26px auto 0; max-width:340px; font-size:13px; line-height:1.65; }
  .hero-payoff .demo-cta { margin-top:23px; padding:11px 16px; font-size:10px; gap:12px; }
  .hero-tag { display:none; }
  .edge-wave { right:7%; bottom:161px; width:65px; }
  .home-nav { left:6%; right:6%; bottom:max(29px,env(safe-area-inset-bottom)); grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .nav-link { min-height:49px; padding:13px 14px; }
  .nav-text { font-size:10px; gap:7px; }
  .nav-arrow { font-size:17px; }
  .story-dialog { inset:0; width:100%; height:100dvh; border-radius:0; }
  .story-layout { grid-template-rows:68px minmax(0,1fr) 73px; }
  .story-top { padding:0 18px; gap:14px; }
  .story-location { display:none; }
  .story-content { padding:30px 18px 36px; }
  .story-bottom { padding:0 10px; }
  .panel-nav { grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; }
  .panel-nav a { min-height:47px; font-size:9px; padding:8px; line-height:1.5; border-radius:16px; }
  .panel-nav small { display:none; }
  .film-content { display:flex; flex-direction:column-reverse; gap:24px; padding:82px 22px 30px; }
  .video-shell { height:min(70svh,710px); min-height:300px; width:auto; flex-shrink:0; }
  .film-copy { width:100%; max-width:340px; }
  .film-copy .kicker { font-size:9px; margin-bottom:12px; }
  .film-copy h2 { font-size:30px; }
  .film-copy h2 br { display:none; }
  .film-copy p { margin:13px 0; font-size:12px; }
}
@media(max-width:700px) and (max-height:700px) {
  .hero { min-height:560px; }
  .hero-payoff { top:23%; }
  .payoff-name { margin-bottom:15px; }
  .payoff-english { margin-top:20px; font-size:12px; }
  .hero-payoff .demo-cta { margin-top:17px; }
  .edge-wave { display:none; }
  .home-nav { bottom:24px; }
}
@media(max-height:550px) { body:not(.is-loading) { overflow-y:auto; } .hero { height:600px; min-height:600px; } }
@media(prefers-reduced-motion:reduce) { .payoff-part { opacity:1; animation:none!important; clip-path:none; } }