/* SCAI site. Layout: full-bleed showroom. Breakpoints 600 / 900 / 1200. Grid 2 / 8 / 12 cols, gap 24. Single light theme by design. */

/* ---------- Fonts ---------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #1d2227;
  --ink-hover: #0f1215;
  --fg: #171a20;
  --fg-2: #393c41;
  --fg-3: #5c5e62;
  --surface: #f3f4f5;
  --surface-hover: #e7e9eb;
  --line: #e3e5e7;
  --input-line: #d0d2d4;
  --accent: #08a8bf;
  --link: #0a8597;
  --required: #b3412f;
  --footer-bg: #14181b;
  --on-media: #ffffff;
  --dark-line: #5c6166;
  --hover-ink: rgba(0, 0, 0, .05);
  --map: #e5e3df;
  --ph-light: #dcdddf;

  --font: "Barlow", "Segoe UI", Arial, sans-serif;
  --ls-text: .02em;
  --ls-display: -.015em;
  --ls-display-light: -.022em;
  --ease: cubic-bezier(.5, 0, 0, .75);

  --sec-x: 12px;
  --gap: 24px;
  --car-gap: 16px;
  --slide-w: 330px;
  --slide-h: 520px;
  --card-top: 16px;
  --card-pad: 16px;
  --hdr-h: 64px;
}
@media (min-width: 600px) {
  :root { --sec-x: 32px; --slide-w: 606px; --card-top: 24px; --card-pad: 24px; }
}
@media (min-width: 1200px) {
  :root {
    --sec-x: 48px;
    --car-gap: 24px;
    --slide-w: calc((100% - var(--car-gap)) / 2);
    --slide-h: 580px;
    --card-top: 32px 40px;
    --card-pad: 40px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr-h); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 14px/20px var(--font);
  letter-spacing: var(--ls-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: #fff; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.link { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- Type roles ---------- */
.eyebrow { font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.t-hero { font-weight: 500; font-size: 40px; line-height: 48px; letter-spacing: var(--ls-display); }
.t-h2 { font-weight: 500; font-size: 40px; line-height: 48px; letter-spacing: var(--ls-display); }
.t-sub { font-weight: 400; font-size: 17px; line-height: 20px; letter-spacing: var(--ls-text); }
.t-label { font-weight: 500; font-size: 14px; line-height: 20px; }
.t-card-title { font-weight: 500; font-size: 28px; line-height: 36px; letter-spacing: var(--ls-display); }
.t-card-desc { font-weight: 400; font-size: 17px; line-height: 20px; color: var(--fg-3); }
.t-small { font-size: 14px; line-height: 20px; }
@media (min-width: 600px) {
  .hero .t-sub { font-size: 20px; line-height: 28px; letter-spacing: var(--ls-display-light); }
}
@media (min-width: 1200px) {
  .t-sub { font-size: 20px; line-height: 28px; letter-spacing: var(--ls-display-light); }
  .t-hero { font-size: 56px; line-height: 56px; }
  .t-h2 { font-size: 48px; line-height: 56px; }
  .t-label { font-size: 17px; line-height: 20px; }
  .t-card-title { font-size: 34px; line-height: 44px; }
  .t-card-desc { font-size: 20px; line-height: 28px; letter-spacing: var(--ls-display-light); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 4px 16px;
  border: 1px solid transparent; border-radius: 4px;
  font-weight: 500; font-size: 14px; line-height: 16.8px; text-align: center;
  transition: border-color .33s, background-color .33s, color .33s;
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--ink-hover); }
.btn--secondary { background: var(--surface); color: var(--fg); }
.btn--secondary:hover { background: var(--surface-hover); }
.on-dark .btn--primary { background: #fff; color: var(--ink); }
.on-dark .btn--primary:hover { background: var(--surface); }
.on-dark .btn--secondary { background: transparent; color: #fff; border-color: var(--dark-line); }
.on-dark .btn--secondary:hover { background: rgba(255, 255, 255, .08); border-color: #8a8f94; }
.cta { display: flex; gap: 8px; }
.cta--w160 .btn { width: 160px; flex: 0 1 auto; min-width: 0; }

/* ---------- Placeholder backgrounds ---------- */
.ph { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.hbg-1 { background: #1d2227; }
.hbg-2 { background: linear-gradient(160deg, #2a2f34 0%, #16191c 100%); }
.hbg-3 { background: #23282c; }
.hbg-4 { background: linear-gradient(200deg, #262a2e 0%, #121416 100%); }
.g1 { background: linear-gradient(160deg, #4d5157 0%, #1f2226 100%); }
.g2 { background: linear-gradient(160deg, #5f6369 0%, #2a2d32 100%); }
.g4 { background: linear-gradient(160deg, #2e3136 0%, #111316 100%); }
.g5 { background: linear-gradient(200deg, #575b61 0%, #22252a 100%); }
.g6 { background: linear-gradient(200deg, #42464c 0%, #181a1e 100%); }
.gl { background: var(--ph-light); }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 500;
  height: var(--hdr-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: var(--bg); color: var(--fg);
  border-bottom: 1px solid var(--line);
}
.hdr-start { grid-column: 1; display: flex; align-items: center; min-width: 0; padding-left: 16px; }
.hdr-nav { grid-column: 2; display: none; }
.hdr-end { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-right: 12px; }
.hdr-cta { display: none; }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.logo-mark { font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.logo-mark span { color: var(--accent); }
.logo-sep { flex-shrink: 0; width: 1px; height: 26px; background: var(--input-line); }
.logo-desc { display: flex; flex-direction: column; font-weight: 400; font-size: 11.5px; line-height: 1.25; letter-spacing: .01em; color: var(--fg-3); white-space: nowrap; }
.nav-item {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 4px 16px; border-radius: 4px;
  font-weight: 500; font-size: 14px; line-height: 20px; color: var(--fg-2);
  transition: color .33s, background-color .33s;
}
.nav-item:hover { background: var(--hover-ink); color: var(--fg); }
.menu-btn { background: var(--hover-ink); }
.icon-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: background-color .33s;
}
.icon-btn:hover { background: var(--hover-ink); }
.icon-btn svg { width: 24px; height: 24px; }
@media (max-width: 599px) {
  .logo-sep, .logo-desc { display: none; }
}
@media (min-width: 600px) {
  .hdr-start { padding-left: 20px; }
  .hdr-end { padding-right: 20px; }
}
@media (min-width: 1200px) {
  .hdr-start { padding-left: 32px; }
  .hdr-end { padding-right: 32px; }
  .hdr-nav { display: flex; padding: 0 8px; }
  .hdr-cta { display: inline-flex; }
  .menu-btn { display: none; }
}

/* ---------- Mobile / tablet drawer ---------- */
.drawer {
  position: fixed; inset: 0; z-index: 600; background: var(--bg); color: var(--fg);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.drawer-head { height: 64px; padding: 16px; display: flex; justify-content: flex-end; flex-shrink: 0; }
.drawer-head svg { width: 16px; height: 16px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 28px 48px; }
.drawer-list { display: flex; flex-direction: column; margin: 0 -12px; padding-top: 32px; }
.drawer-list li { margin-bottom: 16px; }
.drawer-item {
  display: flex; align-items: center; width: 100%; min-height: 56px;
  padding: 16px 6px 16px 12px; border-radius: 4px; text-align: start;
  font-weight: 500; font-size: 17px; line-height: 24px;
  transition: background-color .33s;
}
.drawer-item:hover { background: var(--hover-ink); }
.drawer-item .grow { flex: 1; }
.drawer-item .chev { width: 16px; height: 16px; margin: 0 2px 0 8px; }
.drawer-cta { padding: 16px 12px 0; }
.drawer-cta .btn { width: 100%; min-height: 48px; font-size: 17px; }
@media (min-width: 600px) {
  .drawer-body { width: 100%; max-width: 665px; margin: 0 auto; }
}
@media (min-width: 1200px) { .drawer { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--on-media);
  height: calc(90vh - 68px); height: calc(90svh - 68px);
  min-height: 480px;
}
.hero-slide {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: 1fr 1fr;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s .5s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.hero-head {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 64px 24px 24px;
}
.hero-head > * + * { margin-top: 4px; }
.hero-head > .eyebrow + * { margin-top: 12px; }
.hero-head .t-sub { color: #d5d8db; }
.hero-head .cta { margin-top: 16px; width: 100%; justify-content: center; }
.hero-head .cta .btn { flex: 1 1 0; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; }
/* Hero images: cover the slide; the slide colour (.hbg-N) shows if the image is missing. */
.hero-media { position: absolute; inset: 0; }
.hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
/* Per-slide crop: move the focal point here if a subject gets cut. */
.hero-media--1 img { object-position: 50% 70%; }
.hero-media--2 img { object-position: 50% 70%; }
.hero-media--3 img { object-position: 50% 70%; }
.hero-media--4 img { object-position: 50% 70%; }
/* Legibility: darkens the top (headline) and bottom (dots) over any image. */
.ph--img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 24, 27, .86) 0%, rgba(20, 24, 27, .72) 35%, rgba(20, 24, 27, .38) 55%, rgba(20, 24, 27, .06) 75%, rgba(20, 24, 27, .35) 100%);
}
.hero-nav { display: none; }
@media (min-width: 600px) {
  .hero { height: calc(80vh - 60px); height: calc(80svh - 60px); }
  .hero-head { padding: 88px 32px 32px; }
  .hero-head > .t-sub { margin-top: 8px; }
  .hero-head .cta { margin-top: 24px; }
  .hero-head .cta .btn { flex: 0 1 164px; }
}
@media (min-width: 1200px) {
  .hero-head { width: 66.6667%; margin: 0 auto; padding: 56px 32px 32px; }
  .hero-head > .t-sub { margin-top: 8px; }
  .hero-head .cta .btn { flex: 0 1 200px; }
  .hero { height: calc(80vh - 64px); height: calc(80svh - 64px); min-height: 560px; }
  .hero-nav {
    display: inline-flex; position: absolute; top: 50%; z-index: 3;
    width: 40px; height: 40px; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .75); color: var(--fg);
    border: 2px solid transparent; border-radius: 4px; padding: 4px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    transition: background-color .33s;
  }
  .hero-nav:hover { background: rgba(255, 255, 255, .95); }
  .hero-nav svg { width: 24px; height: 24px; }
  .hero-nav--prev { left: 48px; }
  .hero-nav--next { right: 48px; }
}

/* ---------- Dots ---------- */
.dots { display: flex; justify-content: center; gap: 8px; height: 12px; }
.dots button { width: 12px; height: 12px; border-radius: 8px; background: var(--ink); opacity: .5; transition: opacity .33s; }
.dots button[aria-current="true"] { opacity: 1; }
.dots--light button { background: #fff; }

/* ---------- Freeflow carousel ---------- */
.ff { position: relative; }
.ff-track {
  display: flex; gap: var(--car-gap);
  padding: 0 var(--sec-x);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--sec-x);
  scrollbar-width: none;
}
.ff-track::-webkit-scrollbar { display: none; }
.ff-slide {
  position: relative; flex: 0 0 var(--slide-w); width: var(--slide-w); height: var(--slide-h);
  border-radius: 8px; color: var(--on-media);
  display: grid; grid-template-rows: 1fr 2fr;
  scroll-snap-align: start;
}
.ff-top { position: relative; padding: var(--card-top); }
.ff-bottom { position: relative; padding: var(--card-pad); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
/* Card images: cover the card; the gradient keeps the label (top) and the title (bottom) readable. */
.ph-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ph--card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 24, 27, .45) 0%, rgba(20, 24, 27, 0) 22%, rgba(20, 24, 27, 0) 42%, rgba(20, 24, 27, .7) 72%, rgba(20, 24, 27, .9) 100%);
}
.ff-top .t-label { color: #d5d8db; }
.ff-bottom .t-sub { margin-top: 4px; color: #d5d8db; }
.ff-bottom .cta { margin-top: 24px; }
.sec-head { max-width: 860px; padding: 0 var(--sec-x) 24px; }
.sec-head .t-h2 { margin-top: 8px; }
.sec-head .t-sub { margin-top: 8px; color: var(--fg-3); }
@media (min-width: 1200px) { .sec-head { padding-bottom: 32px; } }
.ff-dots { margin-top: 16px; }
.ff-nav { display: none; }
@media (min-width: 1200px) {
  .ff-dots { margin-top: 24px; }
  .ff-nav {
    display: inline-flex; position: absolute; top: calc(var(--slide-h) / 2 - 44px); z-index: 3;
    width: 40px; height: 40px; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .75); color: var(--fg);
    border: 2px solid transparent; border-radius: 4px; padding: 4px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    transition: background-color .33s;
  }
  .ff-nav:hover { background: rgba(255, 255, 255, .95); }
  .ff-nav svg { width: 24px; height: 24px; }
  .ff-nav--prev { left: 48px; }
  .ff-nav--next { right: 48px; }
}

/* ---------- Demo slot (comparison) ---------- */
.s-demo { padding: 24px 12px 0; }
.demo { border-radius: 8px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 600px) { .s-demo { padding: 40px 32px 0; } }
@media (min-width: 1200px) { .s-demo { padding: 48px 48px 0; } }

/* ---------- Sections ---------- */
.s-carA { padding-top: 24px; }
.s-promo { padding: 24px 12px 64px; }
.s-tiles { padding: 32px 12px; }
.s-map { padding: 40px 0; max-width: 2560px; margin: 0 auto; }
@media (min-width: 600px) {
  .s-carA { padding-top: 40px; }
  .s-promo { padding: 32px 32px 96px; }
  .s-tiles { padding: 32px; }
  .s-map { padding: 40px 32px; }
}
@media (min-width: 1200px) {
  .s-carA { padding-top: 48px; }
  .s-promo { padding: 16px 48px 120px; }
  .s-tiles { padding: 32px 48px; }
  .s-map { padding: 40px 48px; }
}

/* ---------- Promo cards ---------- */
.promo-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.promo {
  display: grid; grid-template-rows: 200px auto;
  background: var(--surface); border-radius: 8px; overflow: hidden;
}
.promo-media { position: relative; }
.promo-text { padding: 24px; }
.promo-text .t-card-desc { margin-top: 4px; }
.promo-text .btn-row { padding-top: 16px; display: flex; gap: 8px; }
.promo-text .btn { width: 180px; }
@media (min-width: 600px) {
  .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .promo { grid-template-rows: auto; }
  .promo-media { display: none; }
}
@media (min-width: 1200px) {
  .promo { grid-template-columns: 2fr 1fr; }
  .promo-text { padding: 32px 24px 32px 48px; grid-row: 1; grid-column: 1; }
  .promo-media { display: flex; align-items: center; grid-row: 1; grid-column: 2; border-radius: 0 8px 8px 0; overflow: hidden; }
  .promo-media .promo-img { position: relative; width: 100%; height: 190px; border-radius: 8px; }
}
.promo-img { position: relative; width: 100%; height: 100%; }

/* ---------- Tiles ---------- */
.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tile {
  position: relative; min-width: 0; height: 520px; border-radius: 8px; color: var(--on-media);
  display: grid; grid-template-rows: 1fr 2fr; grid-template-columns: minmax(0, 1fr);
}
.tile-top { position: relative; padding: var(--card-top); }
.tile-bottom { position: relative; padding: var(--card-pad); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.tile-bottom .t-sub { margin-top: 4px; color: #d5d8db; }
.tile-bottom .cta { margin-top: 24px; width: 100%; max-width: 328px; }
.tile-bottom .cta--w160 .btn { width: auto; flex: 0 1 160px; }
@media (min-width: 1200px) {
  .tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .tile { height: 580px; }
  .tile--main { grid-column: span 8; }
  .tile--aside { grid-column: span 4; }
}

/* ---------- GIS map block ---------- */
:root { --st-run: #12a150; --st-standby: #8a8d91; --st-alarm: #e39a0b; --water: #cad6db; --park: #d9e1d1; }
.map { position: relative; height: 400px; overflow: hidden; background: var(--map); }
.gis { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gis .st { cursor: pointer; }
.gis .st:focus { outline: none; }
.gis .st:focus-visible .st-dot { stroke: var(--link); stroke-width: 4; }
.gis .st-halo { opacity: 0; transform-box: fill-box; transform-origin: center; }
.gis .st.is-selected .st-halo { opacity: .28; animation: halo 2.4s ease-out infinite; }
@keyframes halo { 0% { transform: scale(.6); opacity: .35; } 100% { transform: scale(1.6); opacity: 0; } }
.gis .st-label { font: 600 12px var(--font); fill: var(--fg-2); paint-order: stroke; stroke: var(--map); stroke-width: 4px; letter-spacing: .02em; }
.popup {
  position: absolute; z-index: 2; width: 264px;
  background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  padding: 14px 16px 12px; color: var(--fg);
}
.popup::after { content: ""; position: absolute; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); left: var(--tail-x, 50%); margin-left: -6px; }
.popup[data-side="top"]::after { bottom: -6px; }
.popup[data-side="bottom"]::after { top: -6px; }
.popup[data-side="none"]::after { display: none; }
.pop-head { display: flex; align-items: center; gap: 8px; }
.pop-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pop-title { flex: 1; font-weight: 600; font-size: 14px; line-height: 20px; }
.pop-close { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--fg-3); }
.pop-close:hover { background: var(--hover-ink); }
.pop-close svg { width: 12px; height: 12px; }
.pop-status { margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--fg-3); }
.pop-alarm { margin-top: 10px; padding: 6px 8px; border-radius: 4px; background: #fdf3df; color: #8a5a00; font-weight: 500; font-size: 12px; line-height: 18px; }
.pop-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.pop-kpis dt { font-size: 12px; line-height: 16px; color: var(--fg-3); }
.pop-kpis dd { margin: 2px 0 0; font-weight: 500; font-size: 17px; line-height: 20px; font-variant-numeric: tabular-nums; }
.pop-kpis dd small { font-weight: 400; font-size: 12px; color: var(--fg-3); margin-left: 2px; }
.pop-trend { margin-top: 12px; }
.pop-trend span { display: block; font-size: 12px; line-height: 16px; color: var(--fg-3); }
.pop-trend svg { display: block; width: 100%; height: 36px; margin-top: 4px; }
.pop-link { display: inline-block; margin-top: 10px; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--link); }
.pop-link:hover { text-decoration: underline; }
@media (max-width: 599px) {
  .popup { width: 232px; padding: 12px 14px 10px; }
  .pop-trend { display: none; }
  .pop-kpis { margin-top: 10px; padding-top: 10px; gap: 8px 12px; }
  .pop-link { display: none; }
}
.map-locate {
  position: absolute; left: 10px; bottom: 10px; height: 40px; padding: 8px 12px 8px 8px;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
  font-weight: 500; font-size: 14px; line-height: 20px; color: var(--fg-2);
}
.map-locate svg { width: 24px; height: 24px; }
.map-zoom {
  position: absolute; right: 10px; bottom: 10px; width: 40px;
  background: #fff; border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
  display: flex; flex-direction: column;
}
.map-zoom button { height: 40px; display: flex; align-items: center; justify-content: center; color: var(--fg-2); }
.map-zoom button + button { border-top: 1px solid var(--line); }
.map-zoom svg { width: 18px; height: 18px; }
.map-content { display: flex; flex-direction: column; gap: 32px; padding: 24px; }
.map-row { display: flex; flex-direction: column; gap: 32px; }
.map-title { font-weight: 500; font-size: 40px; line-height: 48px; letter-spacing: var(--ls-display); }
.map-sub { font-weight: 400; font-size: 17px; line-height: 20px; color: var(--fg-3); letter-spacing: var(--ls-display-light); }
.legend { display: flex; gap: 40px; height: 0; overflow: hidden; visibility: hidden; }
.legend-key .count { display: flex; align-items: center; gap: 12px; }
.legend-key .count span { font-weight: 500; font-size: 48px; line-height: 56px; letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; }
.legend-key .count i { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.legend-key .count .k-run { background: var(--st-run); }
.legend-key .count .k-alarm { background: var(--st-alarm); }
.legend-key p { font-size: 20px; line-height: 28px; color: var(--fg-3); letter-spacing: var(--ls-display-light); }
.map-ctas { display: flex; gap: 16px; }
.map-ctas .btn { flex: 1 1 0; padding-inline: 24px; }
@media (min-width: 600px) {
  .map { height: 450px; border-radius: 8px; }
  .map-ctas .btn { flex: 0 0 auto; }
}
@media (min-width: 1200px) {
  .map { height: 550px; }
  .map-content { padding: 40px 48px; }
  .map-row { flex-direction: row; justify-content: space-between; }
  .map-title { font-size: 48px; line-height: 56px; }
  .map-sub { font-size: 20px; line-height: 28px; }
  .legend { height: auto; overflow: visible; visibility: visible; }
}

/* ---------- Licensing ---------- */
.s-lic { padding: 32px 12px 0; }
.lic { padding: 32px 24px; border: 1px solid var(--line); border-radius: 8px; }
.lic-head .t-h2 { margin-top: 8px; }
.lic-head .t-sub { margin-top: 8px; color: var(--fg-3); }
.lic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.lic-grid li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lic-value { font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: var(--ls-display); color: var(--fg); }
.lic-key { font-size: 15px; line-height: 22px; color: var(--fg-3); }
.lic-foot { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.lic-scope { font-size: 17px; line-height: 24px; color: var(--fg-2); }
.lic-foot .cta .btn { flex: 1 1 0; padding-inline: 24px; }
@media (min-width: 600px) {
  .s-lic { padding: 32px 32px 0; }
  .lic { padding: 40px; }
  .lic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lic-foot .cta .btn { flex: 0 0 auto; }
}
@media (min-width: 1200px) {
  .s-lic { padding: 32px 48px 0; }
  .lic { padding: 48px; }
  .lic-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lic-value { font-size: 28px; line-height: 36px; }
  .lic-foot { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- Footer ---------- */
.foot { background: var(--footer-bg); color: #a9aeb3; }
.foot-inner {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom, 0px));
  font-size: 13px; line-height: 20px;
}
.foot a { color: #d4d7da; }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.foot :focus-visible { outline-color: #fff; }
@media (min-width: 600px) {
  .foot-inner { flex-direction: row; justify-content: space-between; padding: 28px 32px; }
}
@media (min-width: 1200px) {
  .foot-inner { padding: 28px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}