/* Utilities colors and a shared alignment grid for the signature hero. */
:root{--gold:#ffa31a;--hero-gutter:6%}
body[data-direction=signature] .brand .eyebrow{left:2.5%}
body[data-direction=signature] h1{color:#f4f0e6}
body[data-direction=signature] h1 em{color:var(--gold)}
.scene,.hero-bottom{left:var(--hero-gutter)}
.controls,.hero-bottom{right:var(--hero-gutter)}
.scene-dot{background:var(--gold)}
.hero-bottom{grid-template-columns:44% 44%;justify-content:space-between;gap:0;padding-right:0}
.hero-bottom .explore{position:absolute;right:0;top:50%;bottom:auto;transform:translateY(-50%);width:44px;height:44px;min-width:44px;min-height:44px;padding:0;box-sizing:border-box;display:grid;place-items:center;line-height:1;border-radius:50%}
.hero-bottom .explore svg{display:block;width:22px;height:22px;flex:none}
.categories{justify-content:flex-start;gap:clamp(24px,3vw,64px)}
@media(min-width:1800px){:root{--hero-gutter:7%}.hero-bottom{grid-template-columns:43% 43%}}
@media(max-width:1000px){.hero-bottom{grid-template-columns:1fr;gap:15px;padding-right:59px}}
@media(max-width:800px){
 .categories{display:flex;justify-content:space-between;gap:12px}
 .hero .scene{bottom:148px}
 .hero .controls{bottom:88px;left:var(--hero-gutter);right:auto}
 .hero-bottom{padding-top:12px;padding-bottom:18px}
}

/* Match the live Tech hero headline exactly; Utilities keeps its own words and green. */
body[data-direction=signature] h1{font-family:Manrope,Arial,sans-serif;font-weight:400;line-height:1.24;letter-spacing:-.035em}

#film-start{display:none}#film-start[hidden]{display:none!important}
@media(max-width:800px){
 .hero .film{z-index:0;top:76px;width:100%;aspect-ratio:16/9;overflow:hidden}
 .hero .shade{z-index:1;pointer-events:none}
 .hero-content,.hero .scene,.hero .controls,.hero-bottom{z-index:2}
 #film-start{display:block;position:absolute;z-index:3;top:calc(76px + 28.125vw);left:50%;transform:translate(-50%,-50%);min-height:48px;padding:12px 20px;border:1px solid #ffffff88;border-radius:24px;background:#101519df;color:#fff;font:600 14px 'DM Sans',sans-serif;cursor:pointer}
 body[data-direction=signature] .message{justify-self:start;width:100%}
}

.hero-summary{max-width:38ch;margin:0 0 26px;color:#d1d7db;font:400 clamp(14px,1.1vw,18px)/1.65 'DM Sans',sans-serif}
body[data-direction=signature] h1{margin-bottom:18px}
@media(max-width:800px){
 .hero{height:auto!important;min-height:0!important;max-height:none;padding:calc(76px + 56.25vw + 40px) 6% 24px;display:flex;flex-direction:column}
 body[data-direction=signature] .hero-content{position:relative;inset:auto;display:block;width:100%;--mark-width:clamp(240px,65vw,340px)}
 body[data-direction=signature] .brand{margin-left:calc(var(--mark-width) * -.025)}
 body[data-direction=signature] .brand .eyebrow{position:relative;inset:auto;left:2.5%;margin-bottom:18px;white-space:normal}
 body[data-direction=signature] .message{margin:24px 0 0;padding:0;width:100%;justify-self:start}
 body[data-direction=signature] h1{font-size:clamp(25px,6.4vw,34px);line-height:1.2;letter-spacing:-.035em;margin-bottom:14px}
 .hero-summary{font-size:15px;line-height:1.65;margin-bottom:22px;max-width:34ch}
 .hero .scene{position:relative;inset:auto;margin-top:28px}
 .hero .controls{position:relative;inset:auto;margin-top:16px}
 .hero .hero-bottom{position:relative;inset:auto;width:100%;margin-top:24px;padding:14px 54px 0 0}
 .hero-bottom .explore{top:calc(50% + 7px)}
}
@media(max-width:800px){.hero>header{display:none}}

@media(max-width:767px){
 .hero .film{top:calc(64px + env(safe-area-inset-top,0px))}
 .hero{padding-top:calc(64px + env(safe-area-inset-top,0px) + 56.25vw + 40px)}
 #film-start{top:calc(64px + env(safe-area-inset-top,0px) + 28.125vw)}
 .hero .shade{background:linear-gradient(180deg,transparent 0,transparent calc(56.25vw + 34px),#11171b calc(56.25vw + 66px))}
}

/* Continuous decorative film: no visible playback controls. */
#film-start,#play,.controls{display:none!important}