/* hero: full-bleed scene with hotspots */
.hero{position:relative; height:max(600px, calc(100vh - 120px)); height:max(600px, calc(100svh - 120px)); display:flex; align-items:flex-end; overflow:hidden; background:var(--night); color:#fff; container-type:size}
.scene{position:absolute; top:50%; left:50%; width:100%; height:100%; width:max(100cqw, 179.1cqh); height:max(100cqh, 55.83cqw); transform:translate(-50%,-50%)}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-shade{position:absolute; inset:0; background:linear-gradient(to top, rgb(var(--shade) / .9) 0%, rgb(var(--shade) / .45) 34%, rgb(var(--shade) / 0) 62%), linear-gradient(to right, rgb(var(--shade) / .8) 0%, rgb(var(--shade) / .35) 38%, rgb(var(--shade) / 0) 58%)}
.copy-box{margin-inline-start:auto; max-width:560px}
.hero-copy{position:relative; z-index:2; width:var(--wrap); margin-inline:auto; padding-block:3rem clamp(3rem,7vh,5rem)}
.hero h1{color:#fff; font-size:clamp(2.6rem, 5vw, 4.4rem); font-weight:800; letter-spacing:-0.025em; line-height:1.02}
.hero .lede{margin-top:1.4rem; font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--on-dark-soft); max-width:36ch}
.hero .actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem}
.hero .btn-ghost{border-color:#fff; color:#fff}
.hero .btn-ghost:hover{background:#fff; color:var(--navy)}
.scan{position:absolute; inset-inline:0; top:24%; height:110px; width:100%; z-index:1; pointer-events:none}
.scan path{stroke:var(--orange); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2400; stroke-dashoffset:2400; animation:draw 2.6s .4s cubic-bezier(.6,0,.2,1) forwards; filter:drop-shadow(0 0 6px rgba(238,106,30,.7)); opacity:.85}
.hotspots{position:absolute; inset:0; z-index:3; list-style:none; margin:0; padding:0}
/* hotspot positions on the scene, and when each one fades in */
.hs--fleet{--x:8%; --y:45%; --d:.9s}
.hs--services{--x:50%; --y:40%; --d:1.4s}
.hs--diagnostics{--x:71.6%; --y:49%; --d:1.9s}
.hs--contact{--x:89%; --y:55%; --d:2.4s}
.hs{position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; text-decoration:none; color:#fff; opacity:0; animation:fade .5s var(--d) forwards}
.hs .tag{order:-1; background:rgba(14,26,54,.78); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:.4rem 1rem; font-family:var(--display); font-weight:700; font-size:.98rem; white-space:nowrap; transition:background .2s, border-color .2s}
.hs .stem{width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.15))}
.hs .dot{width:16px; height:16px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(238,106,30,.3); position:relative}
.hs .dot::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--orange); animation:ping 2.2s var(--d) infinite}
.hs:hover{color:#fff}
.hs:hover .tag,.hs:focus-visible .tag{background:var(--orange-ink); border-color:var(--orange-ink)}
.hs:focus-visible{outline:none}
.hs:focus-visible .tag{outline:3px solid #fff; outline-offset:3px}
.hs-bar{display:none}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes ping{0%{transform:scale(1); opacity:.9}70%,100%{transform:scale(2.6); opacity:0}}
/* The scene crops to cover the hero. Below ~1.65:1 (or under 990px wide) the
   outer hotspots fall off-screen, so the shortcut bar takes over navigation. */
@media (max-width:990px), (max-aspect-ratio:33/20){
  .hotspots{display:none}
  .hs-bar{display:flex; gap:.6rem; overflow-x:auto; padding:1rem 1.25rem; padding-inline-end:2.5rem; background:var(--navy-deep); scrollbar-width:none; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 2.5rem); mask-image:linear-gradient(to right, transparent 0, #000 2.5rem)}
  .hs-bar::-webkit-scrollbar{display:none}
  .hs-bar a{flex:none; display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.4rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.25); color:#fff; text-decoration:none; font-family:var(--display); font-weight:700; transition:background .2s, border-color .2s}
  .hs-bar a:first-child{margin-inline-start:auto}
  .hs-bar a:last-child{margin-inline-end:auto}
  .hs-bar a:hover{color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5)}
  .hs-bar a::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--orange)}
}
/* Short heroes: the copy block rises into the scene, so lift the pulse line above the headline. */
@container (height < 760px){ .scan{top:3%} }
/* With hotspots on, keep the copy in its own half so the centered hotspot never sits on the headline. */
@media (min-width:991px) and (min-aspect-ratio:33/20){ .copy-box{max-width:min(560px, calc(50% - 96px))} }
@media (max-width:760px){
  .scan{top:16%}
  .copy-box{max-width:none}
  .hero{height:max(470px, calc(100svh - 190px))}
  .hero-copy{padding-bottom:calc(6rem + env(safe-area-inset-bottom,0px))}
  .hero-shade{background:linear-gradient(to top, rgb(var(--shade) / .95) 0%, rgb(var(--shade) / .7) 45%, rgb(var(--shade) / .15) 75%)}
}

/* facts */
.facts .wrap{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid var(--line)}
.fact{padding:1.6rem 1.2rem}
.fact + .fact{border-inline-start:1px solid var(--line)}
.fact strong{display:block; font-family:var(--display); font-size:1.9rem; color:var(--navy); line-height:1.2}
.fact span{color:var(--muted); font-size:.95rem}
@media (max-width:760px){.facts .wrap{grid-template-columns:repeat(2,minmax(0,1fr))} .fact:nth-child(3){border-inline-start:0} .fact:nth-child(n+3){border-top:1px solid var(--line)}}
.home-entries{padding-block:clamp(3.5rem,7vw,5.5rem)}
.home-entries .section-head{margin-bottom:2rem}