/* Service guide hero — full-section background (three.js city).
   Light type and the hero button come from .is-on-dark (editorial-hero.css) and .button--hero (shared.css). */
.guide-hero .guide-hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.guide-hero .guide-hero-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* legibility: a soft dark field behind the centered copy, city stays bright at the edges and bottom */
.guide-hero .guide-hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(46% 38% at 50% 46%,rgba(11,11,11,.55) 0%,rgba(11,11,11,.3) 50%,rgba(11,11,11,0) 100%),
 linear-gradient(180deg,rgba(11,11,11,.75) 0%,rgba(11,11,11,0) 22%,rgba(11,11,11,0) 78%,rgba(11,11,11,.6) 100%)}
.guide-hero > .plate{display:none}
/* HUD: time of day, like a data player — illustrative, never a claim */
.guide-hero-hud{position:absolute;right:var(--gutter,48px);bottom:28px;z-index:2;display:grid;grid-template-columns:auto 160px auto;gap:6px 12px;align-items:center;
 font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:rgba(244,244,242,.75)}
.guide-hero-hud .hud-track{height:1px;background:rgba(244,244,242,.25);overflow:hidden}
.guide-hero-hud .hud-fill{display:block;height:100%;background:#f4f4f2;transform-origin:0 50%;transform:scaleX(0)}
.guide-hero-hud .hud-note{grid-column:1/-1;justify-self:end;font-size:9px;color:rgba(244,244,242,.4)}
@media(max-width:760px){.guide-hero-hud{left:24px;right:24px;bottom:auto;top:16px;grid-template-columns:auto 1fr auto}}