/* Scale to usable viewport space, including Retina displays at scaled resolutions. */
.hero{min-height:680px;height:100svh;max-height:1440px}
.hero header{justify-content:flex-end}
.hero header nav{margin-right:auto}
body[data-direction=signature] .hero-content{top:34%;left:6%;right:6%;grid-template-columns:44% 44%;justify-content:space-between;gap:0;align-items:center}
body[data-direction=signature] .brand{padding-top:clamp(24px,4vh,58px)}
body[data-direction=signature] .brand-mark{width:clamp(300px,29vw,620px);max-width:100%;filter:none}
body[data-direction=signature] .message{justify-self:end;width:max-content;max-width:100%}
body[data-direction=signature] h1{font-size:clamp(28px,2.65vw,66px);letter-spacing:-.035em}
.eyebrow{left:6%;top:24%}
.hero .film{inset:0;transform:none}
.hero .film video{object-position:center}
@media(min-width:1800px){body[data-direction=signature] .hero-content{left:7%;right:7%;grid-template-columns:43% 43%}.hero-bottom{left:7%;right:7%}.eyebrow{left:7%}}
@media(min-width:801px) and (max-height:850px){.hero{min-height:640px}body[data-direction=signature] .hero-content{top:30%}body[data-direction=signature] .brand-mark{width:clamp(280px,27vw,460px)}.eyebrow{top:21%}.scene{bottom:165px}.controls{bottom:151px}}
@media(max-width:800px){.hero{height:100svh;min-height:780px;max-height:1000px}body[data-direction=signature] .hero-content{display:block;top:27%;left:6%;right:6%}body[data-direction=signature] .brand{padding-top:12px}body[data-direction=signature] .brand-mark{width:clamp(240px,55vw,340px)}body[data-direction=signature] .message{margin-top:28px;margin-left:0;width:auto}body[data-direction=signature] h1{font-size:clamp(26px,4.3vw,34px)}.eyebrow{top:19%}}
/* Both headings follow the actual logo bounds instead of unrelated viewport offsets. */
body[data-direction=signature] .hero-content{--mark-width:clamp(300px,29vw,620px);align-items:start;top:38%}
body[data-direction=signature] .brand{position:relative;padding-top:0;width:var(--mark-width);max-width:100%}
body[data-direction=signature] .brand-mark{width:100%}
body[data-direction=signature] .brand .eyebrow{position:absolute;top:auto;bottom:calc(100% + 24px);left:9.4%;right:0;margin:0;white-space:nowrap;font-size:clamp(8px,.65vw,11px);letter-spacing:.13em;gap:0}
body[data-direction=signature] .brand .eyebrow .line{display:none}
body[data-direction=signature] .message{padding-top:calc(var(--mark-width) * .10);margin-top:0}
@media(min-width:801px) and (max-height:850px){body[data-direction=signature] .hero-content{--mark-width:clamp(280px,27vw,460px);top:35%}}
@media(max-width:800px){body[data-direction=signature] .hero-content{--mark-width:clamp(240px,55vw,340px);top:29%}body[data-direction=signature] .brand .eyebrow{font-size:8px;letter-spacing:.07em;bottom:calc(100% + 20px)}body[data-direction=signature] .message{padding-top:0;margin-top:24px;margin-left:calc(var(--mark-width) * .094)}}


/* Phone composition: preserve the complete film instead of a narrow center crop. */
@media(max-width:800px){
 .hero{height:100svh;min-height:calc(56.25vw + 610px);background:#11171b}
 .hero .film{top:76px;bottom:auto;height:auto;aspect-ratio:16/9;width:100%;background:#11171b}
 .hero .film video{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
 body[data-direction=signature] .hero-content{top:calc(76px + 56.25vw + 52px);left:6%;right:6%;--mark-width:clamp(240px,65vw,340px)}
 body[data-direction=signature] .brand .eyebrow{bottom:calc(100% + 16px)}
 body[data-direction=signature] .message{margin-top:18px}
 body[data-direction=signature] h1{font-size:clamp(24px,6.1vw,34px);margin-bottom:18px}
 .hero .shade{background:linear-gradient(180deg,transparent 0,transparent calc(56.25vw + 46px),#11171b calc(56.25vw + 78px))}
 .hero .scene{bottom:140px}
 .hero .controls{bottom:126px}
 .hero .hero-bottom{padding-bottom:max(22px,env(safe-area-inset-bottom))}
}