.hero{min-height:calc(100svh - 94px);padding-block:100px 45px;gap:55px 60px}
.hero>.hero-photo{transform:scale(1.06);animation:scene-open 4.8s cubic-bezier(.2,.65,.3,1) both;will-change:transform}
.hero:has(>.hero-photo)::before{background:linear-gradient(90deg,rgba(7,20,34,.9),rgba(7,20,34,.65) 55%,rgba(7,20,34,.25)),linear-gradient(0deg,rgba(7,20,34,.65),transparent 45%)}
.hero h1{font-size:clamp(2rem,4.5vw,4.3rem);letter-spacing:-.045em;line-height:1.28}.hero-specialty{font-size:.48em;letter-spacing:.02em}
.hero-copy h1{animation:title-open 1.2s cubic-bezier(.2,.7,.2,1) both}.company-intro,.field-tags{animation:title-open 1.2s .15s both}
.hero-panel{background:rgba(13,34,51,.88);color:#fff;border:1px solid rgba(219,230,238,.35);backdrop-filter:blur(12px);box-shadow:0 20px 60px #0003;animation:title-open 1.3s .25s both}
.hero-panel .panel-top{background:transparent;border-color:#6f8394}.hero-panel .panel-top span,.hero-panel .panel-top small{color:#d9e4ed}.hero-panel .panel-main>p{color:#fff}.hero-panel .panel-main dt{color:#c3d3df}.hero-panel .panel-main dd{color:#fff}.hero-panel .panel-main dl div{border-color:#627589}.hero-panel>a{background:#e4bc78;color:#10283f}.hero-panel>a:hover{background:#f0d39f}.hero-panel>a span{color:#30485a}
header{position:sticky;top:0;transition:box-shadow .3s;z-index:100}header.scrolled{box-shadow:0 6px 24px #10283f16}html{scroll-padding-top:110px}
.cinema-enter{animation:section-open .8s cubic-bezier(.2,.65,.3,1) both}.service-grid article{transition:transform .3s,border-color .3s,box-shadow .3s}.service-grid article:hover{transform:translateY(-4px);border-color:#9e7d48;box-shadow:0 10px 28px #10283f0d}
@keyframes scene-open{from{transform:scale(1.15)}to{transform:scale(1.06)}}
@keyframes title-open{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes section-open{from{opacity:.25;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){header{height:78px}.hero{min-height:auto;padding-block:65px 35px;gap:35px}.hero h1{font-size:clamp(2rem,6.8vw,3.7rem)}.hero>.hero-photo{object-position:58% center}.hero:has(>.hero-photo)::before{background:linear-gradient(180deg,rgba(7,20,34,.58),rgba(7,20,34,.87))}.hero-panel{backdrop-filter:none}.hero-specialty{font-size:.57em}html{scroll-padding-top:92px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero>.hero-photo{transform:none;will-change:auto}}

/* Full-bleed team background; mobile framing keeps the group inside the viewport. */
.hero>.hero-photo{object-position:55% 72%}
@media(max-width:900px){
.hero{background:#10283f url('./construction-team.jpg') center/cover no-repeat;padding-block:55px 30px;min-height:0}
.hero>.hero-photo{inset:18% auto auto -55%;width:190%;max-width:none;height:auto;object-fit:contain;object-position:center;transform:none;animation:none;will-change:auto;mask-image:linear-gradient(transparent 0%,#000 18%,#000 90%,transparent 100%)}
.hero:has(>.hero-photo)::before{background:linear-gradient(180deg,rgba(7,20,34,.8),rgba(7,20,34,.48) 35%,rgba(7,20,34,.48) 62%,rgba(7,20,34,.8))}
.hero>.hero-panel{background:rgba(13,34,51,.7)}
.hero>.photo-credit{position:static;text-align:left}
}