@font-face{font-family:"Exo 2";font-style:normal;font-weight:400;font-display:swap;src:url("assets/exo-400.ttf") format("truetype")}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:500;font-display:swap;src:url("assets/exo-500.ttf") format("truetype")}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:600;font-display:swap;src:url("assets/exo-600.ttf") format("truetype")}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:700;font-display:swap;src:url("assets/exo-700.ttf") format("truetype")}

:root{--urbio-orange:#ec571a;--urbio-black:#080808;--urbio-panel:#202020;--urbio-text:#dfdfdf;--urbio-border:#ffffff38}
body{font-family:"Exo 2",sans-serif;background:var(--urbio-black);color:#fff}
body button,body select,body input,body .pov-product-pin.named-product-pin{font-family:"Exo 2",sans-serif}
body>header{background:#080808;border-bottom:1px solid #ffffff20;height:88px}
.brand{display:flex;align-items:center;letter-spacing:0}.brand img{width:160px;height:auto;display:block}.intro{color:#dfdfdf}
h2,h3,.product-specs dd{font-family:"Exo 2",sans-serif}.product-copy h2{font-weight:700;letter-spacing:0;line-height:1.12;font-size:clamp(30px,3vw,44px)}
.story-bar,main>footer{background:#080808;border-color:#ffffff20}.story-bar{padding-block:18px}
body .product-dialog,body .story-dialog,body .compare-dialog{background:#080808;border:1px solid var(--urbio-border);border-radius:16px}
.product-visual{background:radial-gradient(ellipse at center,#303030,#080808 78%)}
.product-copy{background:#161616}.product-intro,.product-control{color:#dfdfdf;line-height:1.6}.product-eyebrow,.story-kicker,.moon-control-heading output{color:var(--urbio-orange)}
.product-specs dt,.product-note,.experience-note,.demo-caption{color:#afafaf}.product-specs div,.moon-controls,.experience-controls{border-color:#ffffff25}
body .story-panel,body .tour-panel{background:#202020;border-color:var(--urbio-border)}
body .story-choices button,body nav button,body .back-city,body .product-pin,body .experience-actions button,body .experience-primary,body .report-reset,body .moon-presets button,body .compare-controls button,body .story-footer button,body .tour-panel button,body .pov-product-pin.named-product-pin{border:1px solid #ffffff66;border-radius:8px;background:#080808df;color:white;font-weight:500;font-size:15px;line-height:1.3;min-height:42px;padding:12px 20px;transition:background-color .2s,color .2s,border-color .2s;box-shadow:none}
body .pin{border-radius:8px;background:#080808e8;border-color:#ffffff66;font-family:"Exo 2",sans-serif;font-size:14px;box-shadow:none}
body .pin::before,body .product-pin::before{background:var(--urbio-orange)}
body .story-choices .tour-launch,body .experience-primary{background:#fff;color:#080808;border-color:#fff}
body button:not(:disabled):hover,body button[aria-pressed=true],body nav button.selected,body .pin.active{background:var(--urbio-orange);color:#fff;border-color:var(--urbio-orange)}
body .pov-product-pin:not(.named-product-pin):hover{background:transparent;box-shadow:0 0 0 2px var(--urbio-orange)}
body .product-close,body .compare-close,body .story-close{border:1px solid #ffffff66;background:#202020;color:white;border-radius:8px}
body button:focus-visible,body input:focus-visible,body select:focus-visible{outline:2px solid #fff;outline-offset:4px}
body input[type=range]{accent-color:var(--urbio-orange)}
body .arrival-board,body .document-demo,body .report-result,body .citizen-demo select{background:#202020;border-color:#ffffff38}
@media(max-width:640px){body>header{height:72px}.brand img{width:130px}.intro{font-size:13px}body .back-city,body .product-pin,body .pov-product-pin.named-product-pin{font-size:12px;padding:8px 10px}.product-copy h2{font-size:32px}body .story-choices button,body .moon-presets button{font-size:14px;padding:10px 12px}}
@media(prefers-reduced-motion:reduce){body button{transition:none}}

/* Five districts, anchored to the new city image. */
.story-stop-glow{clip-path:polygon(73% 60%,84% 57%,86% 60%,85% 66%,76% 70%)}
.story-charging{left:80%;top:80%}.story-arrivals{left:78%;top:54%}
.story-report-pin{left:28%;top:55%}.cityzen-service{left:77%;top:52%}.egov-service{left:59%;top:22%}
.story-repair-glow{clip-path:ellipse(4% 8% at 28% 55%);mask-image:radial-gradient(ellipse 4% 8% at 28% 55%,#000 30%,transparent 100%)}
.lamp-moon-street .moon-glow,.lamp-moon-suspended .moon-glow{filter:blur(15px)}
@media(max-width:700px){.point-layer{display:flex;align-content:flex-start;flex-wrap:wrap;gap:6px;top:auto;bottom:0;padding:8px;background:#080808dd}.point-layer .product-pin{position:relative;left:auto!important;top:auto!important;transform:none;white-space:normal;font-size:14px;padding:8px}.city.exploring{margin-bottom:140px;overflow:visible}.city.exploring .camera{overflow:hidden}.city.exploring .point-layer{transform:translateY(100%)}.pin{font-size:11px}.back-city{bottom:8px}}
/* Numbered product callouts share their selection with the feature listing. */
.product-dialog{width:min(1280px,calc(100vw - 32px));height:min(920px,calc(100dvh - 32px))}.product-dialog>.product-layout{min-height:100%}.product-close{z-index:10}
.product-visual.with-callouts{position:relative;display:flex;flex-direction:column;gap:26px;justify-content:center;min-width:0}
.with-callouts>.moon-stage,.with-callouts>.experience-stage,.with-callouts>img{flex-shrink:0}
.feature-callouts{position:absolute;pointer-events:none;z-index:5}
.feature-dot{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;padding:0;border:2px solid #fff;border-radius:50%!important;background:#202020;color:#fff;font:600 14px 'Exo 2',sans-serif;pointer-events:auto;cursor:pointer;box-shadow:0 2px 14px #0008}
.feature-dot[aria-pressed=true],.feature-dot:hover{background:#EC571A;box-shadow:0 0 0 5px #ec571a30}
.callout-caption{width:100%;min-height:112px;padding:16px;border:1px solid #ffffff30;border-left:3px solid #EC571A;border-radius:8px;background:#101010;position:relative;z-index:6;font-size:14px;line-height:1.5}
.callout-caption p{margin:8px 0 0;color:#DFDFDF}.callout-caption strong{font-size:16px}
.product-expanded{border-top:1px solid #ffffff25;margin-top:24px;padding-top:8px;font-size:16px;line-height:1.55}.product-expanded h3{font-size:18px;margin:20px 0 12px}.feature-list{padding:0;list-style:none;margin:0 0 24px}.feature-list li{margin-bottom:16px}.feature-list button{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:0;color:#fff;text-align:left;font:inherit;cursor:pointer}.feature-list button span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #ffffff50;border-radius:50%;font-size:14px;flex-shrink:0}.feature-list button[aria-pressed=true] span{background:#EC571A;border-color:#EC571A}.feature-list p{margin:6px 0 0 38px;color:#DFDFDF;font-size:14px}.technical-details{border-block:1px solid #ffffff25;padding:14px 0}.technical-details summary{cursor:pointer;font-weight:600;min-height:28px}.technical-details dl{margin:14px 0}.technical-details dl>div{display:grid;grid-template-columns:42% 58%;gap:10px;padding:10px 0;border-top:1px solid #ffffff15;font-size:14px}.technical-details dt{color:#AFAFAF}.technical-details dd{margin:0;overflow-wrap:anywhere}.configuration-note{font-size:14px;color:#AFAFAF}.product-expanded>p{color:#DFDFDF}
@media(max-width:640px){.product-visual.with-callouts,.moon-demo .product-visual.with-callouts{height:auto;min-height:350px;padding:36px 24px 20px}.with-callouts>img{height:260px;width:100%}.with-callouts .moon-stage{height:280px;width:auto;max-width:100%}.with-callouts .experience-stage{max-width:320px}.with-callouts .experience-sentinal{width:30px;height:320px}.callout-caption{min-height:104px}.feature-dot{width:32px;height:32px}.technical-details dl>div{grid-template-columns:1fr;gap:3px}.product-copy{padding:24px}}
.pin-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.pin-leaders line{stroke:#fff;stroke-opacity:.65;stroke-width:1.3}.point-layer .product-pin{z-index:1}
.point-layer.pins-docked{display:flex;flex-wrap:wrap;align-content:flex-end;align-items:flex-end;gap:12px;padding:12px 12px 72px;pointer-events:none}.pins-docked .product-pin{position:static!important;transform:none!important;white-space:normal}
/* Soft optical bloom: no polygon edge or hard luminous patch. */
.lamp-mesina .moon-glow{left:10%;top:9%;width:62%;height:48%;clip-path:none;border-radius:50%;filter:blur(20px);background:radial-gradient(ellipse,rgba(255,250,230,.55) 0%,rgba(255,250,230,.28) 30%,rgba(255,250,230,.08) 56%,transparent 78%);transform:rotate(-35deg);mix-blend-mode:screen}
.lamp-mesina::before{filter:blur(16px);background:radial-gradient(ellipse,rgba(255,246,218,.22),transparent 68%)}
/* Crossing story: camera framing and overlays follow the same master image. */
.story-crossroad{transform:scale(2.35);transform-origin:59% 74%}
.story-crossroad .story-base{filter:brightness(.72)}
.crossing-illumination{position:absolute;inset:0;background-position:center;background-size:100% 100%;filter:brightness(1.3);mask-image:radial-gradient(ellipse 7% 6% at 58% 74%,#000 30%,transparent 100%);opacity:0;pointer-events:none}
.crossing-bloom{position:absolute;left:50%;top:67%;width:17%;height:13%;background:radial-gradient(ellipse,#fff4d166,transparent 70%);filter:blur(7px);mix-blend-mode:screen;opacity:0;pointer-events:none}
.crossing-marker{position:absolute;transform:translate(-50%,-50%) scale(.48);z-index:4;display:flex;align-items:center;gap:9px;width:max-content;transform-origin:left center}
.crossing-marker i{display:block;width:18px;height:18px;border:3px solid white;border-radius:50%;background:#EC571A;box-shadow:0 0 0 6px #ec571a44}.crossing-marker b{padding:7px 10px;background:#080808e8;border:1px solid #ffffff55;border-radius:6px;font-size:14px;font-weight:500;color:#fff}
@media(prefers-reduced-motion:reduce){.crossing-illumination,.crossing-bloom{transition:none}}

/* Diffuse light without a clipped beam silhouette. */
.lamp-dome .moon-glow,.lamp-moon-street .moon-glow,.lamp-moon-suspended .moon-glow{clip-path:none;border-radius:50%;filter:blur(22px);background:radial-gradient(ellipse,rgba(245,249,255,.48) 0%,rgba(235,244,255,.20) 30%,rgba(225,238,255,.06) 55%,transparent 75%)}
.lamp-dome .moon-glow{left:3%;top:0%;width:94%;height:50%}
.lamp-moon-street .moon-glow{left:5%;top:17%;width:90%;height:48%}
.lamp-moon-suspended .moon-glow{left:22%;top:30%;width:75%;height:42%}

body .story-choices .tour-launch{color:#fff}

/* Glass pins and on-image controls: frosted panel, white outline, no orange bullet. */
body .pin,
body .product-pin,
body .pov-product-pin.named-product-pin,
body .back-city{background-color:#ffffff1c;background-image:linear-gradient(145deg,#ffffff4d 0%,#ffffff17 34%,#ffffff0a 58%,#ffffff33 100%);-webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.06);backdrop-filter:blur(22px) saturate(185%) brightness(1.06);border:1px solid #ffffff5c;border-radius:14px;color:#fff;box-shadow:0 10px 34px #0000004d,0 1px 2px #00000030,inset 0 1px 1px #ffffff96,inset 0 -1px 1px #ffffff3d,inset 0 0 22px #ffffff17;text-shadow:0 1px 5px #000000cc,0 0 3px #00000080}
body .pin::before,
body .product-pin::before{display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--urbio-orange);box-shadow:0 0 7px #ec571ae6,0 0 2px #ffffff80;vertical-align:2px}
body .pin.active::before,
body .product-pin[aria-pressed=true]::before{background:#fff;box-shadow:0 0 7px #ffffffe6}
@media(max-width:700px){body .pin::before{display:none}}
body .pin:not(:disabled):hover,
body .product-pin:not(:disabled):hover,
body .pov-product-pin.named-product-pin:not(:disabled):hover,
body .back-city:not(:disabled):hover{background-color:#ffffff33;background-image:linear-gradient(145deg,#ffffff6b 0%,#ffffff26 34%,#ffffff14 58%,#ffffff45 100%);border-color:#ffffff8c}
body .pin.active,
body .product-pin[aria-pressed=true],
body .product-pin[aria-pressed=true]:hover{background-color:#ec571a94;background-image:linear-gradient(145deg,#ffffff5c 0%,#ffffff1f 40%,#ffffff0f 62%,#ffffff33 100%);border-color:#ffffff8c;color:#fff}

/* Product popup: wider frame with more room for the render; feature callouts removed. */
body .product-dialog{width:min(1440px,calc(100vw - 32px));height:min(920px,calc(100dvh - 32px))}
body .product-layout{grid-template-columns:50% 50%}
body .product-visual{padding:40px}
body .product-visual img{max-height:700px}
body .moon-stage{max-width:390px}
body .experience-stage{max-width:430px}
/* Dome is URBIO's own pole render now: the disc rim sits at 14% of the frame and
   the cone closes at 31%, so the light sits a little lower than the composite's did. */
body .lamp-dome .moon-glow{left:6%;top:8%;width:88%;height:28%}
body .lamp-dome::before{inset:8% -15% 64%}

/* ---------- Phones and small tablets ----------
   The desktop rules above set a fixed two-column popup and a tall dialog, which
   a phone cannot honour, and the exploring layout let the zoomed camera spill
   below the picture. These restore a single column, keep the zoom stage a clean
   16:9 picture with the product list under it, and keep every effect intact. */
@media(max-width:820px){
  body .product-dialog{width:calc(100vw - 20px);height:auto;max-height:calc(100dvh - 20px);border-radius:14px}
  body .product-layout{grid-template-columns:1fr}
  body .product-visual{padding:20px 16px 16px;min-height:0;height:auto}
  body .product-visual img{max-height:38vh}
  body .moon-stage{max-width:min(240px,58vw)}
  body .experience-stage{max-width:min(260px,62vw)}
  body .experience-sentinal{width:26px;height:38vh}
  body .product-copy{padding:22px 18px 28px}
  body .product-copy h2{font-size:30px}
  body .product-specs dd{font-size:16px}
  body .product-close{right:10px;top:10px;width:38px;height:38px;font-size:24px}
  body .product-explore-link{width:100%;justify-content:center}
}
@media(max-width:700px){
  /* the zoom stage keeps its own 16:9 frame; the product list sits directly under it */
  body .city.exploring{overflow:hidden;margin-bottom:0}
  body .city.exploring .point-layer{position:relative;inset:auto;transform:none;min-height:0;
    padding:10px 10px 12px;background:#080808;align-content:flex-start}
  /* once the street-level view is up, the district render underneath is redundant
     and on a phone it shows below the shorter photo, so retire it after the fade */
  body .city.in-pov .camera{opacity:0;transition:opacity .45s ease .75s}
  body .pin{min-height:40px;padding:9px 12px;font-size:12px}
  body .product-pin,body .pov-product-pin.named-product-pin{min-height:40px}
  body .back-city{min-height:40px}
}
@media(max-width:700px){
  /* the five scenario entry points wrap into rows, the same way the district nav
     at the foot of the page does, so every one of them is visible at rest instead
     of half a label disappearing off the right edge */
  body .story-bar{padding:12px 0 13px}
  body .story-choices{flex-wrap:wrap;overflow:visible;gap:8px;padding:0 12px;
    /* a flex item defaults to min-width:auto, which would let this row grow to its
       content width and widen the whole page; these keep it inside the screen */
    width:100%;max-width:100%;min-width:0;box-sizing:border-box;align-self:stretch}
  body .story-choices button{flex:0 1 auto;white-space:nowrap;font-size:13px;padding:10px 14px;min-height:40px}
  body main>footer{padding:14px 12px 18px}
  body main>footer nav{gap:8px}
  body main>footer nav button{font-size:13px;padding:10px 14px;min-height:40px}
}
@media(max-width:700px){
  /* The five zone pins sit only ~33px apart vertically on a phone-sized banner, so
     the chip has to stay small. The tap target is extended invisibly instead, which
     keeps them comfortably tappable without letting the labels collide. */
  body .pin{min-height:32px;padding:7px 10px;font-size:11.5px;position:absolute}
  body .pin::after{content:'';position:absolute;inset:-6px -3px}
}
@media(max-width:380px){
  /* narrower phones shrink the banner further, so the chips shrink with it */
  body .pin{min-height:27px;padding:5px 8px;font-size:11px}
  body .pin::after{inset:-9px -4px}
}
@media(max-width:700px){
  body .compare-controls button{white-space:nowrap}
  body .compare-controls{flex-wrap:wrap;gap:8px}
}

/* ---------- The city map on a phone ----------
   At 16:9 the banner renders about 220px tall on a portrait phone: a quarter of
   the screen, the render at a fifth of its resolution, and five chips stacked
   three deep over the left third. Below 700px the section becomes a tall window
   onto a stage 16:9 at the window's full height - roughly two and a half screens
   wide - that the finger drags across. Nothing is re-measured: the stage is the
   containing block now, so every --x/--y and every hit polygon still refers to
   the same picture, and the extra width alone pulls the five chips apart. */
.map-stage{position:absolute;inset:0}
.map-rail{display:none}
@media(max-width:700px){
  html.map-pan-on body .city:not(.exploring){
    aspect-ratio:auto;height:var(--map-h,220px);
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    /* settling near a district rather than between two is worth the small nudge */
    scroll-snap-type:x proximity}
  html.map-pan-on body .city:not(.exploring)::-webkit-scrollbar{width:0;height:0;display:none}
  html.map-pan-on body .city:not(.exploring)>.map-stage{
    position:relative;width:calc(var(--map-h,220px) * 16 / 9);height:100%;flex:0 0 auto}
  html.map-pan-on body .city:not(.exploring) .pin{scroll-snap-align:center}

  /* the picture is large enough now to carry the full chip again */
  html.map-pan-on body .city:not(.exploring) .pin{
    min-height:38px;padding:9px 13px;font-size:13px;border-radius:12px}
  html.map-pan-on body .city:not(.exploring) .pin::before{display:inline-block;width:6px;height:6px;margin-right:7px}
  html.map-pan-on body .city:not(.exploring) .pin::after{inset:-5px -3px}

  /* position readout and the one line that says the map moves */
  html.map-pan-on .map-rail{display:flex;align-items:center;justify-content:center;
    gap:12px;padding:9px 16px 0;min-height:28px}
  html.map-pan-on .city.exploring+.map-rail{display:none}
  .map-rail.is-flat{visibility:hidden}
  .map-track{position:relative;flex:0 1 96px;height:3px;border-radius:2px;background:#ffffff26}
  .map-track i{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--urbio-orange);
    transition:left .12s linear}
  .map-hint{margin:0;font-size:11.5px;letter-spacing:.04em;color:#8e949b;white-space:nowrap}
  .map-hint[hidden]{display:none}
}
@media(max-width:380px){
  html.map-pan-on body .city:not(.exploring) .pin{min-height:34px;padding:8px 11px;font-size:12px}
}
@media(max-width:380px){
  /* at 320 the five scenario labels each claim a row of their own and swallow the
     screen; two to a row, wrapping their text, keeps the same list but half as tall */
  body .story-choices button{flex:1 1 calc(50% - 4px);white-space:normal;
    font-size:12px;padding:9px 10px;min-height:42px}
  body main>footer nav button{flex:0 1 auto;font-size:12px;padding:9px 11px;min-height:38px}
}
@media(max-width:700px){
  /* a short map means a narrow stage, so the chips give back the width they can */
  html.map-pan-on body .city.map-tight:not(.exploring) .pin{
    min-height:32px;padding:7px 9px;font-size:11px;border-radius:10px}
  html.map-pan-on body .city.map-tight:not(.exploring) .pin::before{width:5px;height:5px;margin-right:5px}
  html.map-pan-on body .city.map-tight:not(.exploring) .pin::after{inset:-7px -4px}
}

/* ---------- Lamp light ----------
   The old effect was a hand-placed ellipse per luminaire, which sat near the lamp
   rather than on it and read as a smudge. Each lamp now ships a mask traced from
   its own render (assets/<id>-emit.png): the LED panel on Mesina and Moon Street,
   the diffuser cone on Moon, Dome and Moon Suspended, with the render's own
   luminance deciding how hot each part of that surface is. Three stacked copies
   of the mask give the core, the bloom and the spill, so the light leaves the
   right shape and every lamp reads as lit at the same strength. */
body .moon-stage .moon-glow{display:none}
body .moon-stage::before{display:none}
body .moon-stage img.lamp-emit{
  position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;max-height:none;
  z-index:2;pointer-events:none;mix-blend-mode:screen;transform-origin:50% 50%;
  /* the blur and the scale never change - only opacity does - so promoting the
     layer lets the slider run without re-rasterising the wide passes */
  will-change:opacity;transition:opacity .15s linear}
body .moon-stage img.emit-core{filter:blur(calc(var(--sw,320px) * .005));opacity:var(--light)}
body .moon-stage img.emit-bloom{filter:blur(calc(var(--sw,320px) * .030));
  transform:scale(1.08);opacity:var(--light)}
body .moon-stage img.emit-halo{filter:blur(calc(var(--sw,320px) * .080));
  transform:scale(1.75);opacity:calc(var(--light) * .95)}
/* a fourth, very wide pass carries the throw out past the luminaire, which is
   what makes the lamp look like it is lighting the space rather than just itself */
body .moon-stage img.emit-spill{filter:blur(calc(var(--sw,320px) * .16));
  transform:scale(2.3);opacity:calc(var(--light) * .62)}
@media(prefers-reduced-motion:reduce){body .moon-stage img.lamp-emit{transition:none}}

/* Moon Street throws from a single recessed disc, so Gaby asked for it to read
   like a spotlight: the source stays punchy and the housing around it does not
   bloom. Only the two outer passes change - the core and the bloom are shared. */
body .moon-stage.lamp-moon-street img.emit-halo{filter:blur(calc(var(--sw,320px) * .055));
  transform:scale(1.30);opacity:calc(var(--light) * .85)}
body .moon-stage.lamp-moon-street img.emit-spill{filter:blur(calc(var(--sw,320px) * .105));
  transform:scale(1.65);opacity:calc(var(--light) * .45)}

/* ---------- Single-screen city, October 2026 ----------
   Cover the viewport with the original 16:9 coordinate system. The scene is
   cropped, never stretched; navigation stays in the viewport corners. */
html:has(body.city-fullscreen), body.city-fullscreen {
  width:100%; height:100%; min-height:0; margin:0; padding:0;
  overflow:hidden;  background:#080808;
}
body.city-fullscreen { position:fixed; inset:0; }
body.city-fullscreen > main {
  position:absolute; inset:0; width:100%; height:100%; transform:none;
  max-width:none; min-height:0; margin:0; padding:0; isolation:isolate;
  overflow:hidden;
}
body.city-fullscreen .city-viewport > .city,
body.city-fullscreen .city-viewport > .city.exploring {
  position:absolute; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%);
  width:max(100vw,177.777778vh); height:max(100vh,56.25vw);
  width:max(100vw,177.777778dvh); height:max(100dvh,56.25vw);
  min-height:0; aspect-ratio:auto; display:block; margin:0; padding:0; overflow:hidden;
}
body.city-fullscreen .city .camera,
body.city-fullscreen .city > .pov-image {
  width:100%; height:100%; aspect-ratio:auto;
}
body.city-fullscreen main > header {
  position:absolute; top:16px; left:16px; z-index:10;
  height:auto; padding:10px 12px; margin:0; border:0; border-radius:10px;
  background:#080808a6; pointer-events:none;
}
body.city-fullscreen main > header .brand img { width:120px; }
body.city-fullscreen main > header .intro { display:none; }
body.city-fullscreen .story-bar {
  position:absolute; top:16px; left:16px; right:auto; z-index:12;
  display:block; width:auto; max-width:calc(100% - 32px);
  padding:0; margin:0; border:0; background:transparent;
  pointer-events:none;
}
body.city-fullscreen .story-choices {
  display:flex; flex-wrap:wrap; justify-content:flex-start;
  width:auto; max-width:100%; min-width:0; gap:7px; margin:0; padding:0;
}
body.city-fullscreen main > footer {
  position:absolute; right:16px; bottom:16px; z-index:12;
  display:block; width:auto; max-width:calc(100% - 32px);
  padding:0; margin:0; border:0; background:transparent;
  pointer-events:none;
}
body.city-fullscreen main > footer nav {
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px;
}
body.city-fullscreen .story-choices button,
body.city-fullscreen main > footer nav button {
  pointer-events:auto; min-height:40px; padding:10px 12px;
  font-size:13px; line-height:1.25; white-space:nowrap;
  background-color:#080808d9; backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); box-shadow:0 3px 18px #0004;
}
body.city-fullscreen .story-choices .tour-launch {
  background-color:var(--urbio-orange); border-color:var(--urbio-orange); color:#fff;
}
body.city-fullscreen .city-menu { pointer-events:auto; }
body.city-fullscreen .city-menu > summary { display:none; }
body.city-fullscreen .city-menu > summary:focus-visible {
  outline:2px solid #fff; outline-offset:3px;
}
body.city-fullscreen.tour-running { padding-bottom:0; }
body.city-fullscreen > .tour-panel { bottom:72px; }
/* On a narrow image, controls remain in the image corners behind two menus.
   Only the expanded menu or dialog may scroll; the page itself stays still. */
@media(max-width:1100px), (max-height:480px) {
  body.city-fullscreen main > header { top:8px; left:8px; padding:7px 10px; }
  body.city-fullscreen main > header .brand img { width:90px; }
  body.city-fullscreen .story-bar {
    top:8px; left:8px; right:auto; max-width:calc(100% - 16px);
  }
  body.city-fullscreen main > footer { right:8px; bottom:8px; max-width:calc(100% - 16px); }
  body.city-fullscreen .city-menu { position:relative; text-align:right; }
  body.city-fullscreen .city-menu > summary {
    display:inline-flex; align-items:center; justify-content:center; gap:12px;
    min-height:40px; padding:9px 12px; border:1px solid #ffffff66; border-radius:8px;
    color:#fff; background:#080808e8; font-size:13px; cursor:pointer;
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    list-style:none;
  }
  body.city-fullscreen .city-menu > summary::-webkit-details-marker { display:none; }
  body.city-fullscreen .city-menu > summary::after { content:'+'; font-size:18px; line-height:1; }
  body.city-fullscreen .city-menu[open] > summary::after { content:'−'; }
  body.city-fullscreen .city-menu > .story-choices,
  body.city-fullscreen .city-menu > nav {
    position:absolute; right:0; top:calc(100% + 6px); width:280px;
    max-width:calc(100vw - 16px); max-height:calc(100vh - 112px);
    max-height:min(400px,calc(100dvh - 112px));
    display:grid; grid-template-columns:1fr; gap:6px;
    padding:8px; margin:0; border:1px solid #ffffff38; border-radius:10px;
    background:#080808f2; box-shadow:0 12px 32px #0008;
    overflow:auto; overscroll-behavior:contain;
  }
  body.city-fullscreen main > footer .city-menu > nav { top:auto; bottom:calc(100% + 6px); }
  body.city-fullscreen .city-menu:not([open]) > .story-choices,
  body.city-fullscreen .city-menu:not([open]) > nav { display:none; }
  body.city-fullscreen .story-choices button,
  body.city-fullscreen main > footer nav button {
    flex:none; width:100%; min-height:40px; padding:10px 12px;
    font-size:13px; text-align:left; white-space:normal;
  }
  body.city-fullscreen > .tour-panel {
    bottom:8px; max-height:calc(100dvh - 16px); overflow:auto;
  }
}
@media(max-width:700px) {
  /* Keep the mobile product list inside the image instead of below it. */
  body.city-fullscreen .city.exploring .point-layer {
    position:absolute; top:auto; bottom:calc(var(--crop-y,0px) + 58px);
    left:calc(var(--crop-x,0px) + 8px); right:calc(var(--crop-x,0px) + 8px);
    transform:none;
    display:flex; align-content:flex-start; gap:5px; min-height:0;
    max-height:calc(100dvh - 112px); padding:6px; overflow:auto;
    background:#080808b8; border-radius:8px; pointer-events:none;
  }
  body.city-fullscreen .city.exploring .point-layer[hidden] { display:none; }
  body.city-fullscreen .city.exploring .point-layer .product-pin {
    min-height:32px; padding:6px 9px; font-size:11px; pointer-events:auto;
  }
  body.city-fullscreen .city.exploring .back-city {
    top:auto; bottom:8px; left:8px; min-height:40px; padding:9px 10px;
  }
  body.city-fullscreen .pin { min-height:28px; padding:6px 8px; font-size:11px; }
}

/* One quiet glass treatment for map labels, product labels and back controls. */
body.city-fullscreen .pin,
body.city-fullscreen .product-pin,
body.city-fullscreen .pov-product-pin.named-product-pin,
body.city-fullscreen .back-city {
  border:1px solid rgba(255,255,255,.22); border-radius:8px;
  background:rgba(15,17,19,.79); color:#fff;
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  box-shadow:none; text-shadow:none; font-weight:500;
}
body.city-fullscreen .pin::before,
body.city-fullscreen .product-pin::before { box-shadow:none; }
body.city-fullscreen .pin:not(:disabled):hover,
body.city-fullscreen .product-pin:not(:disabled):hover,
body.city-fullscreen .back-city:not(:disabled):hover {
  background:rgba(27,29,31,.9); border-color:rgba(255,255,255,.38);
}
body.city-fullscreen .pin.active,
body.city-fullscreen .product-pin[aria-pressed=true] {
  background:rgba(125,49,19,.9); border-color:rgba(236,87,26,.65);
}
body.city-fullscreen main > .back-city {
  position:absolute; left:16px; bottom:16px; top:auto; z-index:12;
}
@media(max-width:700px) {
  body.city-fullscreen main > .back-city { left:8px; bottom:8px; }
}

/* Scenario controls open from the upper-left corner. */
body.city-fullscreen .city-scenario-menu { text-align:left; }
@media(max-width:1100px), (max-height:480px) {
  body.city-fullscreen .city-scenario-menu > .story-choices { left:0; right:auto; }
}

/* Shared typography for text buttons, including map/product labels and Back. */
body.city-fullscreen button:not(.product-close):not(.compare-close):not(.story-close):not([data-tour="end"]),
body.city-fullscreen .city-menu > summary {
  font:500 13px/1.25 "Exo 2",sans-serif;
  letter-spacing:normal;
  text-transform:none;
}

/* Compact product dialogs: content height, contained light bloom, shared type. */
body.city-fullscreen .product-dialog {
  width:min(1040px,calc(100vw - 96px)); height:fit-content;
  max-width:calc(100vw - 48px); max-height:none;
  position:fixed; inset:auto; left:50%; top:50%; margin:0;
  transform:translate(-50%,-50%) scale(var(--product-fit,1)); transform-origin:center;
  padding:0; overflow:hidden; border-radius:14px;
}
body.city-fullscreen .product-dialog > .product-layout {
  min-height:0; grid-template-columns:42% 58%;
  align-items:stretch; transform-origin:top left;
}
body.city-fullscreen .product-visual {
  min-height:0; height:auto; padding:24px; overflow:hidden;
}
body.city-fullscreen .product-visual img:not(.lamp-emit) {
  max-height:380px; object-fit:contain;
}
body.city-fullscreen .product-visual > img { width:100%; height:auto; }
body.city-fullscreen .moon-stage { width:100%; height:auto; max-width:260px; }
body.city-fullscreen .moon-stage img:not(.lamp-emit) { width:100%; height:auto; }
body.city-fullscreen .experience-stage { width:100%; height:auto; max-width:320px; }
body.city-fullscreen .experience-stage img { width:100%; height:auto; }
body.city-fullscreen .experience-sentinal { width:24px; height:340px; }
body.city-fullscreen .experience-sentinal img { width:100%; height:100%; }
body.city-fullscreen .product-copy { min-height:0; padding:28px 28px 24px; }
body.city-fullscreen .product-eyebrow { font-size:10px; line-height:1.3; margin:0 40px 6px 0; }
body.city-fullscreen .product-copy h2 {
  font-size:26px; line-height:1.12; font-weight:600;
  letter-spacing:0; margin:0 30px 10px 0;
}
body.city-fullscreen .product-intro,
body.city-fullscreen .product-control {
  font-size:12px; line-height:1.5; margin:10px 0;
}
body.city-fullscreen .product-note { font-size:10px; line-height:1.4; margin:8px 0; }
body.city-fullscreen .product-specs { gap:0 16px; margin:14px 0; }
body.city-fullscreen .product-specs:empty { display:none; }
body.city-fullscreen .product-specs div { padding:8px 0; }
body.city-fullscreen .product-specs dt { font-size:11px; line-height:1.3; margin-bottom:4px; }
body.city-fullscreen .product-specs dd { font-size:13px; line-height:1.35; font-weight:500; }
body.city-fullscreen .moon-controls { margin:12px 0; padding:10px 0; }
body.city-fullscreen .moon-control-heading { font-size:12px; font-weight:500; }
body.city-fullscreen .moon-controls input { height:26px; margin:4px 0 6px; }
body.city-fullscreen .moon-presets { gap:6px; }
body.city-fullscreen .moon-presets button { min-height:32px; padding:6px 10px; }
body.city-fullscreen .product-expanded { margin-top:14px; padding-top:10px; font-size:12px; line-height:1.45; }
body.city-fullscreen .product-expanded h3 { font-size:12px; font-weight:600; margin:0 0 6px; }
body.city-fullscreen .product-expanded p { margin:0; font-size:12px; line-height:1.45; }
body.city-fullscreen .product-explore { margin:14px 0 0; }
body.city-fullscreen .product-explore-link {
  min-height:36px; padding:9px 14px; border-radius:8px;
  font:500 13px/1.25 "Exo 2",sans-serif;
  text-transform:none; letter-spacing:normal;
  background:var(--urbio-orange); text-shadow:none;
}
body.city-fullscreen .product-explore-link span { font-size:13px; }
body.city-fullscreen .product-close {
  right:10px; top:10px; width:30px; height:30px; font-size:22px;
}
body.city-fullscreen .experience-controls { margin:12px 0; padding:10px 0; }
body.city-fullscreen .experience-controls h3 { font-size:13px; margin:0 0 8px; }
body.city-fullscreen .experience-controls [role=status] { font-size:11px; line-height:1.4; margin:8px 0; }
body.city-fullscreen .experience-actions button,
body.city-fullscreen .experience-primary,
body.city-fullscreen .report-reset { min-height:32px; padding:6px 10px; }
body.city-fullscreen .arrival-board,
body.city-fullscreen .document-demo,
body.city-fullscreen .report-result { margin-top:8px; padding:10px; font-size:11px; }
body.city-fullscreen .arrival-board > div { padding:6px 0; }
body.city-fullscreen .experience-note,
body.city-fullscreen .demo-caption { font-size:10px; }
body.city-fullscreen .workflow-steps { font-size:11px; margin:8px 0; }
body.city-fullscreen .citizen-demo label { font-size:12px; }
body.city-fullscreen .citizen-demo select { font-size:12px; padding:8px; }
@media(max-width:700px) {
  body.city-fullscreen .product-dialog { width:calc(100vw - 48px); }
  body.city-fullscreen .product-dialog > .product-layout { grid-template-columns:1fr; }
  body.city-fullscreen .product-visual { height:150px; padding:14px; }
  body.city-fullscreen .product-visual img:not(.lamp-emit) { max-height:126px; }
  body.city-fullscreen .moon-stage { width:auto; max-width:160px; }
  body.city-fullscreen .moon-stage img:not(.lamp-emit) { width:auto; max-width:100%; height:126px; }
  body.city-fullscreen .experience-stage { width:auto; max-width:200px; }
  body.city-fullscreen .experience-sentinal { width:12px; height:126px; }
  body.city-fullscreen .experience-stage img { width:auto; max-width:100%; height:126px; }
  body.city-fullscreen .product-copy { padding:20px; }
  body.city-fullscreen .product-copy h2 { font-size:23px; }
}

body.city-fullscreen .product-dialog[open] { animation:none; }
body.city-fullscreen .document-demo > strong,
body.city-fullscreen .report-result > strong { font-size:12px; }
body.city-fullscreen .document-demo dl { margin:6px 0; }
body.city-fullscreen .document-demo dl div { margin-top:4px; }
body.city-fullscreen .document-demo .demo-caption { margin-bottom:4px; }
body.city-fullscreen .experience-controls > p { margin:6px 0; }
body.city-fullscreen .sample-location { font-size:11px; margin:8px 0; }
body.city-fullscreen .report-result p { margin:6px 0; }
body.city-fullscreen .report-state { font-size:11px; margin:8px 0; }

/* Center close glyphs independently of inherited text-button metrics. */
body.city-fullscreen .product-close,
body.city-fullscreen .compare-close,
body.city-fullscreen .story-close {
  display:grid;
  place-items:center;
  padding:0;
  line-height:1;
  text-align:center;
  text-indent:0;
}

/* Geometric close icon: avoids the font glyph's uneven vertical bearings. */
body.city-fullscreen .product-close,
body.city-fullscreen .compare-close,
body.city-fullscreen .story-close {
  font-size:0;
  line-height:0;
  color:transparent;
  text-shadow:none;
}
body.city-fullscreen .product-close::before,
body.city-fullscreen .product-close::after,
body.city-fullscreen .compare-close::before,
body.city-fullscreen .compare-close::after,
body.city-fullscreen .story-close::before,
body.city-fullscreen .story-close::after {
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:12px; height:1.5px;
  border-radius:1px;
  background:#fff;
  pointer-events:none;
  transform:translate(-50%,-50%) rotate(45deg);
}
body.city-fullscreen .product-close::after,
body.city-fullscreen .compare-close::after,
body.city-fullscreen .story-close::after {
  transform:translate(-50%,-50%) rotate(-45deg);
}
/* The scenario close control otherwise has no positioned containing block. */
body.city-fullscreen .story-close,
body.city-fullscreen .compare-close { position:relative; }

/* Responsive proposal: panoramic city and readable product sheets on phones. */
body.city-fullscreen .city-viewport { position:absolute; inset:0; overflow:hidden; }
.mobile-location-picker, .city-swipe-hint { display:none; }
@media(max-width:700px) {
  body.city-fullscreen .city-viewport {
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
    scrollbar-width:none;  -webkit-overflow-scrolling:touch;
  }
  body.city-fullscreen .city-viewport::-webkit-scrollbar { display:none; }
  body.city-fullscreen .city-viewport > .city,
  body.city-fullscreen .city-viewport > .city.exploring {
    position:relative; left:0; top:0; transform:none;
    width:max(100vw,177.777778dvh); height:100dvh;
    max-width:none; margin:0;
  }
  body.city-fullscreen .city-viewport.is-exploring { overflow-x:auto; overflow-y:hidden;  }
  body.city-fullscreen .story-bar { top:max(16px,env(safe-area-inset-top)); left:16px; }
  body.city-fullscreen .city-menu > summary { min-height:44px; padding:11px 14px; }
  body.city-fullscreen main > footer {
    left:16px; right:16px; bottom:max(16px,env(safe-area-inset-bottom));
    max-width:none; width:auto;
  }
  body.city-fullscreen main > footer .city-location-menu { display:none; }
  .mobile-location-picker {
    display:flex; flex-direction:column; gap:6px; padding:12px 14px;
    border:1px solid #ffffff26; border-radius:14px;
    background:#101214eb; backdrop-filter:blur(20px); pointer-events:auto;
    box-shadow:0 8px 24px #0003;
  }
  .mobile-location-picker label {
    font:500 9px/1.3 "Exo 2",sans-serif; letter-spacing:.14em; color:#aeb2b6;
  }
  .mobile-location-picker select {
    width:100%; min-height:32px; padding:0; border:0; background:transparent;
    color:#fff; font:500 15px/1.3 "Exo 2",sans-serif; color-scheme:dark;
  }
  .mobile-location-picker select option { background:#101214; }
  .city-swipe-hint {
    position:absolute; z-index:10; left:50%; bottom:120px; transform:translateX(-50%);
    display:block; margin:0; padding:8px 12px; white-space:nowrap;
    border:1px solid #ffffff20; border-radius:20px; background:#101214bc;
    color:#e0e2e4; font:400 11px/1.4 "Exo 2",sans-serif; pointer-events:none;
  }
  .city-swipe-hint[hidden] { display:none; }
  body.city-fullscreen .pin { min-height:40px; padding:10px 13px; font-size:13px; }
  body.city-fullscreen .city.exploring .point-layer {
    bottom:110px; left:calc(var(--mobile-pan,0px) + 12px);
    right:calc(100% - var(--mobile-pan,0px) - 100vw + 12px);
    max-height:calc(100dvh - 180px); padding:8px;
  }
  body.city-fullscreen main > .back-city { left:16px; bottom:118px; min-height:40px; }
  body.city-fullscreen .product-dialog {
    position:fixed; left:0; right:0; top:auto; bottom:0; transform:none;
    width:100%; max-width:none; height:auto; max-height:88dvh;
    margin:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
    border:1px solid #ffffff26; border-bottom:0; border-radius:20px 20px 0 0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  body.city-fullscreen .product-dialog > .product-layout { grid-template-columns:1fr; }
  body.city-fullscreen .product-visual { height:190px; padding:22px; }
  body.city-fullscreen .product-visual img:not(.lamp-emit) { max-height:146px; }
  body.city-fullscreen .moon-stage { max-width:180px; }
  body.city-fullscreen .moon-stage img:not(.lamp-emit) { height:146px; }
  body.city-fullscreen .experience-stage img { height:146px; }
  body.city-fullscreen .experience-sentinal { height:146px; }
  body.city-fullscreen .product-copy { padding:24px 22px 28px; }
  body.city-fullscreen .product-copy h2 { font-size:26px; margin-right:0; }
  body.city-fullscreen .product-intro, body.city-fullscreen .product-control,
  body.city-fullscreen .product-expanded p { font-size:13px; line-height:1.6; }
  body.city-fullscreen .product-explore-link {
    display:flex; justify-content:center; width:100%; min-height:44px;
  }
  body.city-fullscreen .product-close {
    position:sticky; top:12px; float:right; margin:12px 12px -48px 0;
    width:36px; height:36px; z-index:20;
  }
}

/* Mobile exploration: labels stay anchored to products on the panoramic image. */
@media(max-width:700px) {
  body.city-fullscreen .city.exploring .point-layer {
    position:absolute; inset:0; width:100%; height:100%; max-height:none;
    min-height:0; margin:0; padding:0; background:transparent;
    border:0; border-radius:0; overflow:visible; pointer-events:none;
  }
  body.city-fullscreen .city.exploring .point-layer:not([hidden]) { display:block; }
  body.city-fullscreen .city.exploring .point-layer .product-pin {
    position:absolute !important;
    left:var(--product-x) !important; top:var(--product-y) !important;
    transform:translate(-50%,-50%) !important;
    max-width:210px; min-height:40px; padding:10px 13px;
    white-space:nowrap; pointer-events:auto;
  }
  body.city-fullscreen main > .back-city {
    left:16px; top:max(76px,calc(env(safe-area-inset-top) + 60px));
    bottom:auto; min-height:40px;
  }
}

/* Mobile product panels fill the screen with no top gap. */
@media(max-width:700px) {
  body.city-fullscreen .product-dialog {
    height:100dvh; max-height:100dvh;
    top:0; bottom:0; border-radius:0; border:0;
  }
  body.city-fullscreen .city.exploring .point-layer .product-pin {
    max-width:180px; white-space:normal; text-align:center;
  }
  body.city-fullscreen .city.exploring .pin-leaders { display:block; }
}