/* Home hero: cutaway facilities on white that come online (grey to colour), stay alive with flows,
   people and live events, and open hotspot cards. Facility tabs and module chips sit below. */
.hl{position:relative;background:#fefefe;color:#101C2F;margin-top:64px;overflow:hidden}
.hl_stage{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 16px 28px}

/* copy, centered above the scene */
.hl_copy{text-align:center;max-width:860px;padding:clamp(28px,5svh,52px) 0 10px}
.hl_eb{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--atext,#0A6FA6);margin-bottom:16px}
.hl_eb i{width:7px;height:7px;border-radius:50%;background:var(--amber,#F59C0E);box-shadow:0 0 0 4px rgba(245,156,14,.16)}
.hl h1{font-size:clamp(32px,3.5vw,50px);line-height:1.05;font-weight:700;letter-spacing:-.03em;margin:0 auto 16px;max-width:820px;color:#101C2F}
.hl_copy p{font-size:17px;line-height:1.55;color:#4b5868;margin:0 auto 14px;max-width:640px}
.hl_link{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:var(--deep,#0A6FA6);text-decoration:none;padding:4px 0}
.hl_link svg{width:20px;height:12px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.hl_link:hover{color:#101C2F}
.hl_link:hover svg{transform:translateX(5px)}

/* tabs, Glide style: light rail, active tab white with a progress ring */
.hl_tabs{position:relative;z-index:4;display:flex;gap:2px;padding:5px;margin:10px auto 10px;border-radius:999px;background:#eef1f4;max-width:100%;overflow-x:auto;scrollbar-width:none}
.hl_tabs::-webkit-scrollbar{display:none}
.hl_tab{display:flex;align-items:center;gap:9px;white-space:nowrap;height:40px;padding:0 16px 0 12px;border-radius:999px;border:0;background:transparent;color:#4b5868;font:inherit;font-size:14px;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.hl_tab:hover{color:#101C2F}
.hl_tab.is-on{background:#fff;color:#101C2F;box-shadow:0 1px 3px rgba(16,28,47,.12),0 4px 14px rgba(16,28,47,.06)}
.hl_ring{width:17px;height:17px;flex:none}
.hl_ring circle{fill:none;stroke-width:2.2}
.hl_ring .bg{stroke:currentColor;opacity:.2}
.hl_ring .fg{stroke:#101C2F;stroke-linecap:round;stroke-dasharray:50.3;stroke-dashoffset:50.3;transform:rotate(-90deg);transform-origin:50% 50%}
.hl_tab.is-on.is-run .hl_ring .fg{animation:hlRing var(--dur,12s) linear forwards}
.hl_tab.is-on:not(.is-run) .hl_ring .fg{stroke-dashoffset:0}
@keyframes hlRing{to{stroke-dashoffset:0}}

/* scene frame: the 1536x864 diorama scaled to fit, tilting gently with the pointer */
/* the building sizes to the screen height too, so headline, building and tabs fit in one view */
.hl_scenes{position:relative;width:min(100%,clamp(600px,calc((100svh - 470px) * 1.7778),1240px));aspect-ratio:16/9}
/* scene change: the next facility crossfades in over the last one (never a blank frame),
   arrives in neutral grey and comes online: colour and interior light flow in, then the sensors appear. */
.hl_scene{position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden;transition:opacity .7s ease .25s,visibility 0s .95s}
.hl_scene.is-on{z-index:2;opacity:1;visibility:visible;transition:opacity .45s ease}
.hl_scene img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.hl_img{filter:grayscale(1) brightness(1.06) contrast(.92)}
.hl_scene.is-built .hl_img{animation:hlOnline 1.5s cubic-bezier(.4,0,.2,1) .35s forwards}
@keyframes hlOnline{to{filter:grayscale(0) brightness(1) contrast(1)}}
.hl_box{position:absolute;left:0;top:0;width:1536px;height:864px;transform-origin:0 0}

/* living layer */
.hl_live{position:absolute;inset:0;opacity:0;transition:opacity .6s ease .1s;pointer-events:none}
.hl_scene.is-alive .hl_live{opacity:1}
.hl_svg{position:absolute;inset:0;width:1536px;height:864px;overflow:visible}
.hl_flow{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.9;stroke-dasharray:3 16;animation:hlFlow 1.6s linear infinite;filter:drop-shadow(0 0 6px var(--c))}
.hl_flow_base{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.16}
@keyframes hlFlow{to{stroke-dashoffset:-38}}
.hl_walker{filter:drop-shadow(0 0 6px rgba(0,144,216,.8))}
.hl_scan{position:absolute;top:8%;bottom:8%;width:180px;left:-200px;background:linear-gradient(90deg,rgba(0,144,216,0),rgba(0,144,216,.10) 60%,rgba(0,144,216,.28) 98%,rgba(95,201,245,.9) 100%);mix-blend-mode:multiply;animation:hlScan 7s cubic-bezier(.5,0,.5,1) infinite 1.2s}
@keyframes hlScan{0%{transform:translateX(0)}60%,100%{transform:translateX(1780px)}}
/* chips and hotspots keep a constant on-screen size: --inv undoes the scene scale */
.hl_chip{position:absolute;display:flex;align-items:center;gap:6px;white-space:nowrap;transform-origin:0 0;transform:scale(calc(var(--inv,1)*.9)) translate(-50%,-80%);opacity:0;padding:5px 10px 5px 8px;border-radius:999px;background:rgba(255,255,255,.95);border:1px solid #e3e7ec;box-shadow:0 6px 18px rgba(16,28,47,.14);font-size:12px;font-weight:500;color:#101C2F;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.hl_chip.is-on{opacity:1;transform:scale(var(--inv,1)) translate(-50%,-130%)}
.hl_chip i{width:7px;height:7px;border-radius:50%;background:var(--st)}
.hl_chip b{font-weight:600;font-variant-numeric:tabular-nums}

/* hotspots */
.hl_hs{position:absolute;width:0;height:0;z-index:2;opacity:0;transform:scale(calc(var(--inv,1)*.5));transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1)}
.hl_scene.is-alive .hl_hs{opacity:1;transform:scale(var(--inv,1));transition-delay:calc(var(--k) * 110ms)}
.hl_dot{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;border:2px solid #fff;background:rgba(16,28,47,.82);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .25s,background .25s;box-shadow:0 6px 20px rgba(16,28,47,.35);pointer-events:auto}
.hl_dot svg{width:16px;height:16px;transition:transform .3s}
.hl_dot::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(0,144,216,.7);animation:hlPulse 2.4s ease-out infinite}
.hl_dot::after{content:"";position:absolute;right:-2px;top:-2px;width:11px;height:11px;border-radius:50%;background:var(--st);box-shadow:0 0 0 2px #fff}
.hl_hs[data-s="ok"]{--st:#22c55e}.hl_hs[data-s="watch"]{--st:#F59C0E}.hl_hs[data-s="alert"]{--st:#ef4444}
.hl_dot:hover{transform:scale(1.1);background:var(--accent,#0090D8)}
.hl_hs.is-open .hl_dot{background:var(--accent,#0090D8)}
.hl_hs.is-open .hl_dot svg{transform:rotate(45deg)}
.hl_hs.is-open .hl_dot::before{animation:none;opacity:0}
@keyframes hlPulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* module tag on each card, and the module filter row under the tabs */
.hl_mod{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;padding:3px 9px 3px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em;color:var(--m);background:color-mix(in srgb,var(--m) 10%,#fff)}
.hl_mod::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--m)}
.hl_mods{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:2px auto 10px;max-width:100%}
.hl_mchip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;border-radius:999px;border:1px solid #e3e7ec;background:#fff;color:#4b5868;font:inherit;font-size:12.5px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.hl_mchip i{width:7px;height:7px;border-radius:50%;background:var(--m)}
.hl_mchip:hover{border-color:var(--m);color:#101C2F}
.hl_mchip.is-on{background:var(--m);border-color:var(--m);color:#fff}
.hl_mchip.is-on i{background:#fff}
.hl_scenes.has-mod .hl_hs:not(.is-mod){opacity:.22 !important}
.hl_scenes.has-mod .hl_hs.is-mod .hl_dot{background:var(--accent,#0090D8)}

/* card */
.hl_card{position:absolute;left:0;top:0;z-index:5;width:300px;padding:16px 16px 14px;border-radius:16px;background:rgba(255,255,255,.97);border:1px solid #e3e7ec;box-shadow:0 24px 60px rgba(16,28,47,.18);color:#101C2F;opacity:0;transform:translateY(8px) scale(.97);pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.hl_card.is-on{opacity:1;transform:none;pointer-events:auto}
.hl_card_h{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin-bottom:2px}
.hl_card_h i{width:8px;height:8px;border-radius:50%;background:var(--st);flex:none}
.hl_card_p{font-size:12px;color:#6b7787;margin-bottom:12px}
.hl_rows{display:grid;gap:1px;border-radius:10px;overflow:hidden;background:#e7eaef;margin-bottom:12px}
.hl_row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 10px;background:#f7f8fa;font-size:12.5px}
.hl_row span{color:#4b5868}
.hl_row b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.hl_row b.watch{color:#b45309}.hl_row b.alert{color:#dc2626}
.hl_act{display:flex;gap:9px;font-size:12.5px;line-height:1.45;color:#26364a}
.hl_act svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--accent,#0090D8)}
.hl_card_f{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid #eef0f3;font-size:11px;color:#8a95a3}
.hl_card_f a{color:var(--deep,#0A6FA6);text-decoration:none;font-size:12px}
.hl_card_f a:hover{color:#101C2F}
.hl_card_empty{color:#4b5868;font-size:14px;line-height:1.5;margin:0}
.hl_note{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:6px;font-size:12.5px;color:#6b7787}
.hl_note a{color:var(--deep,#0A6FA6);text-decoration:none;font-weight:500;margin-left:6px}
.hl_note a:hover{color:#101C2F}
.hl_hint_dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:14px;line-height:1;color:#fff;background:#101C2F;flex:none}

@media (max-width:860px){
  .hl_copy{padding:36px 4px 16px}
  .hl h1{font-size:30px}
  .hl_copy p{font-size:15.5px;margin-bottom:12px}
  .hl_tabs{align-self:stretch;margin:10px 0 2px}
  .hl_mods{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;align-self:stretch;margin:6px 0 4px;scrollbar-width:none}
  .hl_mods::-webkit-scrollbar{display:none}
  .hl_mchip{flex:none}
  .hl_tab{height:36px;font-size:13px;padding:0 12px 0 10px}
  .hl_scenes{width:calc(100% + 32px);margin:0 -16px}
  .hl_chip{display:none}
  .hl_dot{left:-13px;top:-13px;width:26px;height:26px;border-width:1.5px}
  .hl_dot svg{width:11px;height:11px}
  .hl_dot::before{inset:-5px}
  .hl_dot::after{width:9px;height:9px}
  /* the card sits under the scene, always present so the page does not jump */
  .hl_card{position:relative;left:auto !important;top:auto !important;width:100%;min-height:206px;margin-top:4px;padding:14px 14px 12px;opacity:1;transform:none;pointer-events:auto;box-shadow:0 8px 28px rgba(16,28,47,.1)}
  .hl_note{display:block;text-align:left;padding:0 2px;line-height:1.5}
  .hl_note .hl_hint_dot{display:none}
  .hl_note a{display:inline-block;margin:4px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .hl_img{filter:none}
  .hl_scene.is-built .hl_img{animation:none}
  .hl_flow,.hl_scan,.hl_dot::before{animation:none}
  .hl_scan{display:none}
}