/* 3iS Transport, site styles. Generated pages live in dist/; edit src/ and this file.
   Direction: airy and precise. White and e-paper grey grounds, evergreen for big moments,
   lime used only as a signal. Archivo set wide for headlines, Martian Mono for data. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 300 800; font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/martian-mono-latin.woff2") format("woff2");
  font-weight: 300 600; font-stretch: 75% 112.5%; font-display: swap;
}

:root {
  --bg: #FFFFFF;
  --paper: #F3F5F0;
  --paper-2: #E8ECE4;
  --ink: #0B1F17;
  --ink-2: #44554C;
  --ink-3: #66756D;
  --line: rgba(11, 31, 23, .10);
  --line-2: rgba(11, 31, 23, .18);
  --green: #0F3D2B;
  --green-2: #0A2A1D;
  --green-3: #17503A;
  --on-green: #EDF4EF;
  --on-green-2: #A8C2B2;
  --lime: #8DC63F;
  --lime-2: #A9DB5E;
  --lime-ink: #3D6A0C;
  --glow: rgba(141, 198, 63, .30);
  --epaper: #E4E7E0;

  --display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* display mock-ups only */

  --max: 1320px;
  --narrow: 860px;
  --gutter: clamp(20px, 4.2vw, 48px);
  --sec: clamp(84px, 11vw, 168px);
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --hdr: 64px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.62; font-weight: 400;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 640; line-height: 1.04; letter-spacing: -.022em; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--lime-ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--lime-2); color: var(--ink); }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }
.sec { padding-block: var(--sec); }
.sec--tight { padding-block: calc(var(--sec) * .6); }
.sec:not(.band) + .sec:not(.band) { padding-top: 0; }
.band { background: var(--paper); }
.band--green { background: var(--green-2); color: var(--on-green); }
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack--lg { gap: 28px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--top { align-items: start; }
.split--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
@media (max-width: 900px) { .split, .split--wide { grid-template-columns: minmax(0, 1fr); } }
main { display: block; }

/* ---------------------------------------------------------------- type */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em; width: fit-content; max-width: 100%;
  font-family: var(--body); font-size: .84rem; font-weight: 600; letter-spacing: .005em; line-height: 1.3;
  color: var(--green); background: rgba(141, 198, 63, .15); padding: .42em .95em .42em .8em; border-radius: 999px; margin: 0;
}
.eyebrow::before { content: ""; width: .5em; height: .5em; border-radius: 2px; background: var(--lime); flex: none; }
.band--green .eyebrow, .on-dark .eyebrow, .phead--dark .eyebrow { color: var(--lime-2); background: rgba(169, 219, 94, .12); }
.label { font-family: var(--body); font-size: .82rem; font-weight: 600; letter-spacing: .005em; color: var(--ink-3); text-transform: none; }
.display {
  font-family: var(--display); font-variation-settings: "wdth" 118; font-weight: 660;
  font-size: clamp(2.6rem, 6.9vw, 5.9rem); line-height: .98; letter-spacing: -.035em; text-wrap: balance;
}
.display em { font-style: normal; color: var(--lime-ink); }
.band--green .display em, .on-dark .display em { color: var(--lime-2); }
.h1 { font-variation-settings: "wdth" 116; font-size: clamp(2.4rem, 5.8vw, 5rem); letter-spacing: -.032em; line-height: 1; }
.h2 { font-variation-settings: "wdth" 114; font-size: clamp(2rem, 4.2vw, 3.5rem); letter-spacing: -.03em; }
.h3 { font-variation-settings: "wdth" 108; font-size: clamp(1.3rem, 1.9vw, 1.6rem); letter-spacing: -.015em; line-height: 1.15; }
.h4 { font-variation-settings: "wdth" 104; font-size: 1.12rem; letter-spacing: -.01em; line-height: 1.25; font-weight: 620; }
.lede { font-size: clamp(1.15rem, 1.65vw, 1.42rem); line-height: 1.5; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.band--green .lede, .on-dark .lede { color: var(--on-green-2); }
.split--wide .prose { font-size: 1.14rem; line-height: 1.6; }
.prose { max-width: 66ch; display: flex; flex-direction: column; gap: 1.05em; color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 620; }
.muted { color: var(--ink-3); }
.small { font-size: .9rem; }
.mono { font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: .01em; }
.center { text-align: center; margin-inline: auto; }
.center .lede { margin-inline: auto; }
.section-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 56rem; }
.section-head.center { align-items: center; }
.section-head--row { flex-direction: row; justify-content: space-between; align-items: end; max-width: none; flex-wrap: wrap; gap: 24px; }
.section-head--row > div { display: flex; flex-direction: column; gap: 18px; max-width: 48rem; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --b: var(--ink); --f: #fff;
  display: inline-flex; align-items: center; gap: .6em; min-height: 48px; padding: .8em 1.35em;
  border-radius: 999px; background: var(--b); color: var(--f); text-decoration: none;
  font-weight: 560; font-size: 1rem; line-height: 1; border: 1px solid var(--b);
  transition: transform .25s var(--ease), background .25s, box-shadow .25s; cursor: pointer;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -12px rgba(11, 31, 23, .45); }
.btn .ic { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn--green { --b: var(--green); }
.btn--lime { --b: var(--lime); --f: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: rgba(11, 31, 23, .04); box-shadow: none; }
.on-dark .btn--ghost, .band--green .btn--ghost { color: var(--on-green); border-color: rgba(237, 244, 239, .28); }
.on-dark .btn--ghost:hover, .band--green .btn--ghost:hover { background: rgba(237, 244, 239, .08); }
.btn--sm { min-height: 40px; padding: .6em 1.05em; font-size: .92rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .45em; font-weight: 560; text-decoration: none; color: var(--ink); }
.link-arrow .ic { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.link-arrow:hover .ic { transform: translateX(3px); }
.on-dark .link-arrow, .band--green .link-arrow { color: var(--on-green); }

/* ---------------------------------------------------------------- header */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hdr);
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.hdr.is-scrolled, .hdr.is-open { border-bottom-color: var(--line); }
.hdr.is-open { background: rgba(255, 255, 255, .97); }
.hdr__in { height: 100%; display: flex; align-items: center; gap: 28px; }
.hdr__logo { display: block; flex: none; width: 74px; color: var(--green); }
.hdr__logo svg { width: 100%; height: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__link, .nav__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px;
  font-size: .94rem; font-weight: 500; text-decoration: none; color: var(--ink-2); background: none; border: 0; cursor: pointer;
  transition: color .2s, background .2s;
}
.nav__link:hover, .nav__btn:hover, .nav__btn[aria-expanded="true"] { color: var(--ink); background: rgba(11, 31, 23, .05); }
.nav__link[aria-current="page"], .nav__btn.is-current { color: var(--ink); }
.nav__btn .chev { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.nav__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr__cta { margin-left: 10px; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 999px; border: 0; background: none; cursor: pointer; position: relative; }

/* mega panel */
.mega {
  position: fixed; left: 0; right: 0; top: var(--hdr); z-index: 49;
  background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(11, 31, 23, .35);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease); }
.mega__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; padding-block: 36px 40px; }
.mega__col h3 { font-family: var(--body); font-size: .82rem; font-weight: 650; letter-spacing: 0; color: var(--ink-3); margin-bottom: 14px; }
.mega__col h3 a { text-decoration: none; }
.mega__col ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.mega__col a.ml { display: block; padding: 6px 0; text-decoration: none; font-size: .98rem; color: var(--ink); font-weight: 500; }
.mega__col a.ml:hover { color: var(--lime-ink); }
.mega__foot { border-top: 1px solid var(--line); padding-block: 16px; display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; font-size: .9rem; color: var(--ink-3); }

/* mobile sheet */
.sheet { display: none; }
@media (max-width: 1080px) {
  .nav, .hdr__cta { display: none; }
  .menu-btn { display: block; }
  .mega { display: none; }
  .sheet {
    display: block; position: fixed; inset: var(--hdr) 0 0 0; z-index: 48; background: #fff; overflow-y: auto;
    padding: 12px var(--gutter) calc(120px + env(safe-area-inset-bottom, 0px));
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
  }
  .sheet.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease); }
  .sheet details { border-bottom: 1px solid var(--line); }
  .sheet summary, .sheet > a {
    display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer;
    font-family: var(--display); font-variation-settings: "wdth" 112; font-size: 1.6rem; font-weight: 620; letter-spacing: -.02em;
    padding: 16px 0; text-decoration: none; color: var(--ink);
  }
  .sheet > a { border-bottom: 1px solid var(--line); }
  .sheet summary::-webkit-details-marker { display: none; }
  .sheet summary .chev { width: 18px; height: 18px; transition: transform .25s; }
  .sheet details[open] summary .chev { transform: rotate(180deg); }
  .sheet .sub { display: grid; gap: 2px; padding: 0 0 16px; }
  .sheet .sub h4 { font-family: var(--body); font-size: .82rem; font-weight: 650; letter-spacing: 0; color: var(--ink-3); margin: 12px 0 4px; }
  .sheet .sub a { padding: 7px 0; text-decoration: none; font-size: 1.05rem; color: var(--ink-2); }
  .sheet__contact { margin-top: 28px; display: grid; gap: 10px; }
}
body.no-scroll { overflow: hidden; }

/* mobile action bar */
.dock { display: none; }
@media (max-width: 760px) {
  .dock {
    display: flex; gap: 8px; position: fixed; z-index: 47; left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 12px 40px -12px rgba(11, 31, 23, .35), 0 0 0 1px var(--line);
    transition: transform .35s var(--ease), opacity .3s;
  }
  .dock a { flex: 1; justify-content: center; min-height: 46px; }
  .dock.is-hidden { transform: translateY(140%); opacity: 0; }
  body { padding-bottom: 76px; }
}

/* ---------------------------------------------------------------- stop drawing (home.scene(); cropped on the service pages) */
.scene { position: relative; margin-top: clamp(32px, 4.5vw, 56px); }
.scene svg { width: 100%; height: auto; overflow: visible; }
.scene .s-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene .s-thin { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.scene .s-glass { fill: rgba(141, 198, 63, .07); stroke: var(--ink); stroke-width: 1.2; opacity: .9; }
.scene .s-white { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.scene .s-ink { fill: var(--ink); }
.scene .s-green { fill: var(--green); }
.scene .s-lime { fill: var(--lime); }
.scene .s-sedum { fill: var(--lime); opacity: .85; }
.scene .s-paper { fill: var(--epaper); }
.scene .s-ground { fill: var(--paper-2); }
.scene .s-txt { font-family: var(--mono); font-size: 9px; fill: var(--ink); }
.scene .s-txt-b { font-family: var(--mono); font-size: 9px; font-weight: 600; fill: var(--ink); }
.scene .cone { animation: cone 5.5s ease-in-out infinite; transform-origin: top center; }
.scene .cone--b { animation-delay: -2.4s; }
@keyframes cone { 0%, 100% { opacity: .85; } 50% { opacity: .55; } }
.scene .tick { animation: tick 6s steps(1) infinite; }
@keyframes tick { 0%, 92% { opacity: 1; } 93%, 96% { opacity: .15; } 97%, 100% { opacity: 1; } }
.hot { cursor: pointer; }
.hot rect.pill { fill: #fff; stroke: var(--line-2); stroke-width: 1; transition: fill .2s, stroke .2s; }
.hot text { font-family: var(--body); font-size: 14px; font-weight: 600; fill: var(--ink); }
.hot .sq { fill: var(--lime); }
.hot line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; }
.hot:hover rect.pill, .hot:focus rect.pill { fill: var(--ink); stroke: var(--ink); }
.hot:hover text, .hot:focus text { fill: #fff; }
.hot:focus { outline: none; }
@media (max-width: 760px) {
  .scene { overflow: hidden; margin-inline: calc(var(--gutter) * -1); }
  .scene svg { width: 190%; max-width: none; margin-left: -38%; }
  .scene .hot { display: none; }
}
.chip {
  display: inline-flex; align-items: center; gap: .55em; padding: .5em .95em; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; font-size: .88rem; text-decoration: none; color: var(--ink);
  transition: background .2s, color .2s, border-color .2s;
}
.chip::before { content: ""; width: .5em; height: .5em; background: var(--lime); }
.chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------------------------------------------------------------- page head (inner pages) */
.phead { padding-top: calc(var(--hdr) + clamp(40px, 6vw, 88px)); padding-bottom: clamp(36px, 5vw, 64px); position: relative; isolation: isolate; }
.phead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 70% at 85% 0%, rgba(141, 198, 63, .13), transparent 70%);
}
.phead__in { display: flex; flex-direction: column; gap: 22px; max-width: 62rem; }
.phead .lede { max-width: 52ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; font-size: .86rem; font-weight: 500; color: var(--ink-3); line-height: 1.4; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.phead--dark { background: var(--green-2); color: var(--on-green); }
.phead--dark::before { background: radial-gradient(60% 80% at 80% 10%, rgba(141, 198, 63, .22), transparent 70%); }
.phead--dark .crumbs, .phead--dark .crumbs a { color: var(--on-green-2); }
.phead--dark .lede { color: var(--on-green-2); }

/* full-bleed rounded media */
.media { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--paper-2); isolation: isolate; }
.media img, .media picture { width: 100%; height: 100%; object-fit: cover; }
.media picture img { width: 100%; height: 100%; object-fit: cover; }
.media--hero { aspect-ratio: 21 / 9; }
.media--wide { aspect-ratio: 16 / 9; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--sq { aspect-ratio: 1 / 1; }
.media--tall { aspect-ratio: 4 / 5; }
@media (max-width: 760px) { .media--hero { aspect-ratio: 4 / 3; } .media { border-radius: var(--r-lg); } }
.media__cap { position: absolute; left: 16px; bottom: 16px; z-index: 2; font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .86); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.media--contain { background: var(--paper); }
.media--contain img, .media--contain picture img { object-fit: contain; padding: 6%; }

/* ---------------------------------------------------------------- bento of services */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px;
  border-radius: var(--r-xl); overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; background: var(--green-2);
  grid-column: span 4;
}
.tile--lg { grid-column: span 8; min-height: 520px; }
.tile--md { grid-column: span 6; min-height: 440px; }
.tile picture, .tile > img { position: absolute; inset: 0; z-index: -2; }
.tile picture img, .tile > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile:hover picture img, .tile:hover > img { transform: scale(1.04); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 42, 29, 0) 30%, rgba(10, 42, 29, .55) 62%, rgba(10, 42, 29, .92) 100%); }
.tile__body { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 10px; }
.tile__k { font-size: .8rem; font-weight: 600; color: #fff; display: inline-flex; align-items: center; gap: .55em; width: fit-content; max-width: 100%; padding: .36em .85em .36em .7em; border-radius: 999px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); line-height: 1.3; }
.tile__k::before { content: ""; width: .5em; height: .5em; border-radius: 2px; background: var(--lime); flex: none; }
.tile h3 { font-variation-settings: "wdth" 112; font-size: clamp(1.5rem, 2.3vw, 2.2rem); letter-spacing: -.025em; }
.tile p { color: rgba(255, 255, 255, .82); max-width: 44ch; font-size: .98rem; line-height: 1.5; }
.tile__go { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s, transform .3s var(--ease); }
.tile__go .ic { width: 18px; height: 18px; }
.tile:hover .tile__go { background: var(--lime); color: var(--ink); transform: rotate(-45deg); }
.tile--plain { background: var(--paper); color: var(--ink); }
.tile--plain::after { display: none; }
.tile--plain p { color: var(--ink-2); }
.tile--plain .tile__k { color: var(--green); background: rgba(141, 198, 63, .15); }
.tile--plain .tile__go { background: #fff; }
@media (max-width: 1000px) { .tile, .tile--lg, .tile--md { grid-column: span 6; min-height: 380px; } }
@media (max-width: 640px) { .tile, .tile--lg, .tile--md { grid-column: span 12; min-height: 340px; } }

/* ---------------------------------------------------------------- cards and lists */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards--3, .cards--2 { grid-template-columns: minmax(0, 1fr); } }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.band .card { border-color: transparent; }
.card p { color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.card .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--paper); color: var(--green); margin-bottom: 4px; }
.band .card .ico { background: var(--paper); }
.card .ico .ic { width: 22px; height: 22px; }
a.card .link-arrow { margin-top: auto; padding-top: 6px; }
a.card { text-decoration: none; color: inherit; transition: transform .3s var(--ease), box-shadow .3s; }
a.card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(11, 31, 23, .35); }
.card--dark { background: var(--green); color: var(--on-green); border-color: transparent; }
.card--dark p { color: var(--on-green-2); }

.ticks { list-style: none; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 1.6em; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: .55em; height: .55em; background: var(--lime); }
.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
@media (max-width: 620px) { .ticks--2 { grid-template-columns: minmax(0, 1fr); } }
.band--green .ticks li, .on-dark .ticks li { color: var(--on-green); }

.panel { background: var(--paper); border-radius: var(--r-lg); padding: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 18px; }
.panel--white { background: #fff; border: 1px solid var(--line); }
.panel--green { background: var(--green); color: var(--on-green); }

/* numbered process (a real sequence) */
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: s; border-top: 1px solid var(--line-2); }
.steps li { counter-increment: s; padding: 22px 18px 0 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.steps li::before { content: counter(s, decimal-leading-zero); font-size: .9rem; font-weight: 700; color: var(--lime-ink); font-variant-numeric: tabular-nums; }
.steps li::after { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--lime); }
.steps h3 { font-size: 1.2rem; font-variation-settings: "wdth" 110; }
.steps p { font-size: .94rem; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- stats / figures */
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.figs > div { background: #fff; padding: clamp(20px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 8px; }
.figs b { font-family: var(--display); font-variation-settings: "wdth" 122; font-weight: 640; font-size: clamp(1.9rem, 3.4vw, 3rem); letter-spacing: -.03em; line-height: 1; }
.figs b small { font-family: var(--body); font-size: .95rem; font-weight: 600; letter-spacing: 0; margin-left: .25em; color: var(--ink-3); }
.figs span { font-size: .9rem; color: var(--ink-2); }
.figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .figs, .figs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .figs--3 { grid-template-columns: minmax(0, 1fr); } .figs--3 > div { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; } }
.on-dark .figs, .band--green .figs { background: rgba(237, 244, 239, .12); border-color: rgba(237, 244, 239, .12); }
.on-dark .figs > div, .band--green .figs > div { background: var(--green-2); }
.on-dark .figs b small, .band--green .figs b small { color: var(--on-green-2); }
.on-dark .figs span, .band--green .figs span { color: var(--on-green-2); }

/* ---------------------------------------------------------------- night band (Luton) */
.night { position: relative; overflow: hidden; isolation: isolate; }
.night__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .night__grid { grid-template-columns: minmax(0, 1fr); } }
.night::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 60% at 25% 40%, rgba(141, 198, 63, .18), transparent 70%); }
.quote { font-family: var(--display); font-variation-settings: "wdth" 108; font-weight: 520; font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.35; letter-spacing: -.012em; text-wrap: pretty; margin: 0; }
.quote::before { content: "\201C"; display: block; font-size: 3em; line-height: .6; color: var(--lime); height: .45em; }
.cite { font-size: .92rem; color: var(--ink-3); display: flex; flex-direction: column; gap: 2px; }
.cite b { color: var(--ink); font-weight: 600; }
.on-dark .cite, .band--green .cite { color: var(--on-green-2); }
.on-dark .cite b, .band--green .cite b { color: var(--on-green); }

/* ---------------------------------------------------------------- case study tiles */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .cases { grid-template-columns: minmax(0, 1fr); } }
.case { min-height: 460px; grid-column: auto; }
.case .tile__body { gap: 12px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.facts > div { background: #fff; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.facts dt { font-size: .8rem; font-weight: 600; color: var(--ink-3); }
.facts dd { margin: 0; font-weight: 560; line-height: 1.35; }
.badge { display: inline-flex; align-items: center; gap: .55em; padding: .45em .9em; border-radius: 999px; font-size: .82rem; background: var(--paper); color: var(--ink-2); }
.badge::before { content: ""; width: .5em; height: .5em; background: var(--lime); }
.gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.gallery .media:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.gallery .media { grid-column: span 2; aspect-ratio: 4 / 3; }
.gallery .media:nth-child(1) { aspect-ratio: auto; }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery .media, .gallery .media:nth-child(1) { grid-column: span 1; grid-row: auto; aspect-ratio: 4 / 3; } .gallery .media:nth-child(1) { grid-column: span 2; } }

/* ---------------------------------------------------------------- displays (rendered, not photographed) */
.devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.devices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .devices, .devices--2 { grid-template-columns: minmax(0, 1fr); } }
.device { border-radius: var(--r-lg); background: var(--paper); padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 18px; text-decoration: none; color: inherit; transition: transform .3s var(--ease); }
a.device:hover { transform: translateY(-3px); }
.device__stage { border-radius: var(--r-md); background: #fff; padding: 22px; display: grid; place-items: center; min-height: 260px; }
.epd { width: 100%; max-width: 300px; background: #2A2F2C; border-radius: 14px; padding: 12px; box-shadow: 0 30px 50px -30px rgba(11, 31, 23, .6); }
.epd__screen { background: var(--epaper); color: #151816; border-radius: 4px; padding: 12px 12px 10px; font-family: var(--mono); font-size: .66rem; line-height: 1.3; }
.epd__top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid #151816; padding-bottom: 7px; margin-bottom: 4px; }
.epd__top b { font-family: var(--display); font-variation-settings: "wdth" 110; font-size: .98rem; font-weight: 700; letter-spacing: -.01em; }
.epd__row { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(21, 24, 22, .25); align-items: baseline; }
.epd__row:last-child { border-bottom: 0; }
.epd__row b { font-weight: 600; font-size: .82rem; }
.epd__row i { font-style: normal; font-weight: 600; }
.epd__note { margin-top: 8px; font-size: .58rem; opacity: .75; }
.tft { width: 100%; max-width: 320px; background: #0E1411; border-radius: 12px; padding: 10px; box-shadow: 0 30px 50px -30px rgba(11, 31, 23, .6); }
.tft__screen { border-radius: 4px; overflow: hidden; background: linear-gradient(180deg, #F7FAF6, #E9F0EA); font-size: .72rem; }
.tft__bar { background: var(--green); color: #fff; padding: 9px 12px; display: flex; justify-content: space-between; font-weight: 600; }
.tft__bar span:last-child { font-family: var(--mono); font-weight: 450; }
.tft__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid rgba(11, 31, 23, .08); }
.tft__route { background: var(--lime); color: var(--ink); font-weight: 700; border-radius: 6px; padding: 3px 7px; font-family: var(--mono); font-size: .68rem; min-width: 3.2em; text-align: center; }
.tft__row:nth-child(3) .tft__route { background: #F2B544; }
.tft__row:nth-child(4) .tft__route { background: #7FB7E6; }
.tft__row em { font-style: normal; font-family: var(--mono); font-weight: 600; }
.tft__msg { padding: 8px 12px; background: #fff; font-size: .64rem; color: var(--ink-2); }
.led { width: 100%; max-width: 320px; background: #050706; border-radius: 10px; padding: 14px 16px; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px #1a1f1c; }
.led__row { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; gap: 10px; font-family: var(--mono); font-size: .78rem; color: #FFB54A; text-shadow: 0 0 6px rgba(255, 166, 40, .65); padding: 4px 0; letter-spacing: .04em; }
.led__row.is-head { color: #FFD08A; border-bottom: 1px dashed rgba(255, 181, 74, .3); padding-bottom: 7px; margin-bottom: 3px; }
.led__blink { animation: tick 2s steps(1) infinite; }
.device h3 { font-size: 1.3rem; font-variation-settings: "wdth" 110; }
.device p { color: var(--ink-2); font-size: .96rem; }
.device__tag { font-size: .82rem; font-weight: 650; color: var(--lime-ink); }

/* ---------------------------------------------------------------- spec tables */
.spec { display: grid; gap: 28px; }
.spec__grp h3 { font-family: var(--body); font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--ink); margin-bottom: 8px; }
.spec table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 13px 0; border-bottom: 1px solid var(--line); }
.spec th { font-weight: 500; color: var(--ink-2); width: 38%; padding-right: 20px; }
.spec td { font-weight: 520; }
.spec--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
@media (max-width: 900px) { .spec--2 { grid-template-columns: minmax(0, 1fr); } }
.tbl-scroll { overflow-x: auto; }

/* ---------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 0; font-family: var(--display); font-variation-settings: "wdth" 106; font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line-2); position: relative; transition: background .2s, transform .3s var(--ease); }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.faq summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--ease); }
.faq details[open] .pm::after { transform: translate(-50%, -50%) rotate(0); }
.faq details[open] .pm { background: var(--lime); border-color: var(--lime); }
.faq .ans { padding: 0 0 24px; max-width: 70ch; color: var(--ink-2); display: flex; flex-direction: column; gap: .8em; }

/* ---------------------------------------------------------------- CTA band */
.cta { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); background: var(--green-2); color: var(--on-green); padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 88px); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 90% at 100% 100%, rgba(141, 198, 63, .35), transparent 65%), radial-gradient(40% 60% at 0% 0%, rgba(23, 80, 58, .9), transparent 70%); }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: linear-gradient(rgba(237, 244, 239, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(237, 244, 239, .07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.cta__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 32px; align-items: end; }
@media (max-width: 900px) { .cta__in { grid-template-columns: minmax(0, 1fr); } }
.cta .lede { color: var(--on-green-2); }
.cta__contact { display: grid; gap: 10px; font-size: 1.02rem; font-weight: 500; min-width: 0; }
.cta__contact > * { display: flex; align-items: center; gap: 12px; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.cta__contact .ic { width: 40px; height: 40px; padding: 10px; border-radius: 999px; background: rgba(237, 244, 239, .10); color: var(--lime-2); flex: none; }
.cta__contact a { color: var(--on-green); text-decoration: none; }
.cta__contact a:hover { color: var(--lime-2); }

/* ---------------------------------------------------------------- products */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.search { position: relative; flex: 1 1 280px; max-width: 420px; }
.search input { width: 100%; height: 48px; border-radius: 999px; border: 1px solid var(--line-2); padding: 0 18px 0 44px; font: inherit; font-size: .98rem; background: #fff; }
.search input:focus { outline: none; border-color: var(--ink); }
.search .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: .5em 1em; font-size: .86rem; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.count { font-size: .88rem; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.pcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; border-radius: var(--r-lg); background: var(--paper); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(11, 31, 23, .4); }
.pcard__img { aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.04); }
.pcard__b { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 5px; }
.pcard__b h3 { font-size: 1.04rem; font-variation-settings: "wdth" 104; font-weight: 600; letter-spacing: -.005em; line-height: 1.25; }
.pcard__b span { font-size: .8rem; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pcard__b p { font-size: .86rem; color: var(--ink-2); line-height: 1.4; }
.pcard[hidden] { display: none; }
.pdetail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .pdetail { grid-template-columns: minmax(0, 1fr); } }
.pgallery { display: grid; gap: 12px; }
.pgallery__main { aspect-ratio: 1 / 1; border-radius: var(--r-xl); background: var(--paper); overflow: hidden; display: grid; place-items: center; }
.pgallery__main img { width: 100%; height: 100%; object-fit: contain; }
.pgallery__main--wide { aspect-ratio: 4 / 3; }
.pgallery__main picture { width: 100%; height: 100%; display: grid; place-items: center; }
.pgallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pgallery__thumbs button { aspect-ratio: 1 / 1; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper); padding: 0; overflow: hidden; cursor: pointer; }
.pgallery__thumbs button[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pgallery__thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.pinfo { position: sticky; top: calc(var(--hdr) + 24px); display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 900px) { .pinfo { position: static; order: -1; } }
.pgallery .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- forms */
.form { display: grid; gap: 18px; }
.form .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 620px) { .form .two { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: .9rem; font-weight: 560; }
.field label .opt { color: var(--ink-3); font-weight: 400; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 1rem; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(141, 198, 63, .25); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: .86rem; color: var(--ink-3); }
.form__err { padding: 14px 18px; border-radius: 14px; background: #FFF3EC; color: #7A2E00; font-size: .95rem; }
.form__check { font-size: .9rem; color: #7A2E00; }
.cf-turnstile { min-height: 65px; max-width: 100%; overflow-x: auto; }

/* ---------------------------------------------------------------- footer */
.ftr { background: var(--green-2); color: var(--on-green-2); padding-top: clamp(64px, 8vw, 112px); padding-bottom: 40px; margin-top: var(--sec); font-size: .94rem; }
.ftr a { color: var(--on-green); text-decoration: none; }
.ftr a:hover { color: var(--lime-2); }
.ftr__top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 1000px) { .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr__brand { grid-column: 1 / -1; } }
.ftr__brand { display: flex; flex-direction: column; gap: 20px; max-width: 30rem; }
.ftr__logo { width: 140px; color: #fff; }
.ftr__tag { font-family: var(--display); font-variation-settings: "wdth" 112; font-size: 1.35rem; font-weight: 560; color: var(--on-green); line-height: 1.25; letter-spacing: -.01em; }
.ftr__tag span { color: var(--lime-2); }
.ftr h3 { font-family: var(--body); font-size: .9rem; font-weight: 650; letter-spacing: 0; color: #fff; margin-bottom: 14px; }
.ftr ul { list-style: none; display: grid; gap: 9px; }
.ftr__base { margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 1px solid rgba(237, 244, 239, .12); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: .8rem; line-height: 1.6; }
.ftr__base nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ftr address { font-style: normal; line-height: 1.6; }

/* ---------------------------------------------------------------- reveal (visible at rest without JS) */
html.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1; transform: none; transition: none; }
  .scene .cone, .scene .tick, .led__blink { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- misc */
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.note { font-size: .84rem; color: var(--ink-3); }
.kbd { font-variant-numeric: tabular-nums; font-size: .8em; background: var(--paper); padding: .1em .4em; border-radius: 6px; }
.legal { max-width: 74ch; display: flex; flex-direction: column; gap: 1em; color: var(--ink-2); }
.legal h2 { font-size: 1.5rem; color: var(--ink); margin-top: 1.4em; font-variation-settings: "wdth" 108; letter-spacing: -.015em; }
.legal h3 { font-size: 1.1rem; color: var(--ink); margin-top: .8em; font-variation-settings: "wdth" 104; }
.legal ul, .legal ol { padding-left: 1.3em; display: grid; gap: .45em; }
.legal .draft { background: #FFF6DA; border-radius: 14px; padding: 14px 18px; color: #5B4300; font-size: .92rem; }
.compare { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 560px; }
.compare th, .compare td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.compare thead th { font-size: .82rem; font-weight: 650; color: var(--ink-3); }
.compare td:last-child, .compare th:last-child { text-align: right; }
.logo-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.ic { width: 20px; height: 20px; flex: none; }

/* ---------------------------------------------------------------- design pass, Oct 2026 */
.h4, .pcard__b h3, .steps h3, .card h3.h4, .device h3, .faq summary { font-family: var(--body); font-variation-settings: normal; letter-spacing: -.01em; font-weight: 700; }
.faq summary { font-size: 1.12rem; font-weight: 650; }
.h4 { font-size: 1.14rem; }
.steps h3 { font-size: 1.15rem; }
.device h3 { font-size: 1.25rem; }
.card p, .tile p { text-wrap: pretty; }
a[href^="mailto:"], a[href^="tel:"] { overflow-wrap: anywhere; }
.contact-lines { display: grid; gap: 14px; }
.contact-lines a, .contact-lines span { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); font-family: var(--display); font-variation-settings: "wdth" 108; font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: -.015em; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.contact-lines .ic { width: 44px; height: 44px; padding: 11px; border-radius: 999px; background: var(--paper); color: var(--green); flex: none; }
.contact-lines a:hover { color: var(--lime-ink); }
.ftr__contact { display: grid; gap: 12px; }
.ftr__contact a, .ftr__contact span { display: flex; align-items: flex-start; gap: 10px; overflow-wrap: anywhere; line-height: 1.4; }
.ftr__contact .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--lime-2); flex: none; }
.ftr { position: relative; overflow: hidden; isolation: isolate; }
.ftr__mark { position: absolute; left: 50%; bottom: -3vw; transform: translateX(-50%); width: min(1400px, 110vw); color: rgba(237, 244, 239, .045); z-index: -1; pointer-events: none; }
.ftr__mark svg { width: 100%; height: auto; }
.ftr ul a { display: inline-block; padding: 2px 0; }
.ftr__base { position: relative; }
@media (max-width: 620px) {
  .ftr__top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .ftr__contact-col { grid-column: 1 / -1; }
  .ftr__base { flex-direction: column; }
  .section-head--row { align-items: flex-start; }
  .phead__in { gap: 18px; }
  .figs b { font-size: 1.8rem; }
}
@media (max-width: 420px) { .led__row { font-size: .7rem; gap: 8px; } .device__stage { padding: 14px; } }

/* ---------------------------------------------------------------- mega menu v2 */
.mega { max-height: calc(100vh - var(--hdr)); overflow-y: auto; }
.mega__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 28px 32px; padding-block: 30px 28px; align-items: start; }
.mega__grid--who { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); align-items: stretch; }
.mega__grp + .mega__grp { margin-top: 26px; }
.mega__h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: .96rem; line-height: 1.25; }
.mega__h:hover { color: var(--lime-ink); }
.mega__h .ico, .mega__card .ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(141, 198, 63, .16); color: var(--green); }
.mega__h .ico .ic, .mega__card .ico .ic { width: 18px; height: 18px; }
.mega__col ul { list-style: none; display: grid; gap: 1px; }
.mega__col a.ml { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; margin-inline: -10px; border-radius: 10px; font-size: .95rem; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background .2s, color .2s; }
.mega__col a.ml .ic { width: 15px; height: 15px; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .25s var(--ease); color: var(--lime-ink); }
.mega__col a.ml:hover, .mega__col a.ml:focus-visible { background: var(--paper); color: var(--ink); }
.mega__col a.ml:hover .ic, .mega__col a.ml:focus-visible .ic { opacity: 1; transform: none; }
.mega__feat { position: relative; display: flex; align-items: flex-end; min-height: 300px; height: 100%; border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; background: var(--green-2); }
.mega__feat picture, .mega__feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease); }
.mega__feat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 42, 29, .05) 20%, rgba(10, 42, 29, .92) 100%); }
.mega__feat:hover img { transform: scale(1.04); }
.mega__feat-b { display: flex; flex-direction: column; gap: 8px; padding: 22px; }
.mega__feat-b b { font-family: var(--display); font-variation-settings: "wdth" 110; font-size: 1.3rem; font-weight: 640; letter-spacing: -.015em; line-height: 1.15; }
.mega__feat-b > span:not(.tile__k):not(.mega__feat-go) { font-size: .9rem; color: rgba(255, 255, 255, .82); line-height: 1.45; }
.mega__feat-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; margin-top: 4px; }
.mega__feat-go .ic { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.mega__feat:hover .mega__feat-go .ic, .mega__card:hover .mega__feat-go .ic { transform: translateX(3px); }
.mega__card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r-lg); background: var(--paper); text-decoration: none; color: var(--ink); transition: background .2s, transform .3s var(--ease); }
.mega__card:hover { background: var(--paper-2); transform: translateY(-2px); }
.mega__card b { font-size: 1.08rem; font-weight: 700; }
.mega__card > span:not(.ico):not(.mega__feat-go) { color: var(--ink-2); font-size: .93rem; line-height: 1.45; }
.mega__card .mega__feat-go { margin-top: auto; color: var(--green); }
.mega__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-block: 16px 20px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); }
.mega__contact { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.mega__contact a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink-2); font-weight: 500; }
.mega__contact a:hover { color: var(--ink); }
.mega__contact .ic { width: 16px; height: 16px; color: var(--lime-ink); }
.mega.is-open .mega__col, .mega.is-open .mega__feat, .mega.is-open .mega__card { animation: megaIn .45s var(--ease) both; }
.mega.is-open .mega__col:nth-child(2), .mega.is-open .mega__card:nth-child(2) { animation-delay: .03s; }
.mega.is-open .mega__col:nth-child(3), .mega.is-open .mega__card:nth-child(3) { animation-delay: .06s; }
.mega.is-open .mega__col:nth-child(4) { animation-delay: .09s; }
.mega.is-open .mega__feat { animation-delay: .1s; }
@keyframes megaIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1240px) { .mega__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mega__grid > .mega__feat { display: none; } }
@media (prefers-reduced-motion: reduce) { .mega.is-open .mega__col, .mega.is-open .mega__feat, .mega.is-open .mega__card { animation: none; } }
/* images inside cards sit flush */
.card > .media { border-radius: 0; }

/* ---------------------------------------------------------------- mega menu v3: category rail + panes */
.mega2 { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 0; padding-block: 18px 22px; }
.mega2__rail { display: grid; align-content: start; gap: 4px; padding-right: 20px; border-right: 1px solid var(--line); }
.mrail { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 14px; text-decoration: none; color: var(--ink); transition: background .2s; }
.mrail .ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--paper); color: var(--green); transition: background .2s, color .2s; }
.mrail .ico .ic { width: 19px; height: 19px; }
.mrail__t { display: grid; gap: 1px; min-width: 0; flex: 1; }
.mrail__t b { font-size: .98rem; font-weight: 700; line-height: 1.25; }
.mrail__t span { font-size: .82rem; color: var(--ink-3); line-height: 1.3; }
.mrail__chev { width: 14px; height: 14px; transform: rotate(-90deg); opacity: 0; transition: opacity .2s, transform .25s var(--ease); color: var(--ink-3); }
.mrail[aria-selected="true"] { background: var(--paper); }
.mrail[aria-selected="true"] .ico { background: var(--lime); color: var(--ink); }
.mrail[aria-selected="true"] .mrail__chev { opacity: 1; transform: rotate(-90deg) translateY(2px); }
.mega2__panes { padding-left: 28px; min-height: 360px; }
.mpane { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto 1fr; gap: 6px 28px; height: 100%; }
.mpane[hidden] { display: none; }
.mpane__head { grid-column: 1 / -1; padding: 8px 0 4px; }
.mpane__head a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 640; font-size: 1.35rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.mpane__head a .ic { width: 18px; height: 18px; color: var(--lime-ink); transition: transform .25s var(--ease); }
.mpane__head a:hover .ic { transform: translateX(3px); }
.mpane__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; align-content: start; }
.mlink { display: grid; gap: 2px; padding: 11px 14px; margin-left: -14px; border-radius: 12px; text-decoration: none; color: var(--ink); transition: background .2s; }
.mlink b { display: flex; align-items: center; gap: 6px; font-size: .97rem; font-weight: 650; }
.mlink b .ic { width: 14px; height: 14px; color: var(--lime-ink); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .25s var(--ease); }
.mlink span { font-size: .85rem; color: var(--ink-3); line-height: 1.35; }
.mlink:hover, .mlink:focus-visible { background: var(--paper); }
.mlink:hover b .ic, .mlink:focus-visible b .ic { opacity: 1; transform: none; }
.mpane .mega__feat { grid-row: 2; grid-column: 2; min-height: 280px; }
.mega.is-open .mpane:not([hidden]) .mpane__links, .mega.is-open .mpane:not([hidden]) .mega__feat { animation: megaIn .35s var(--ease) both; }
.mega.is-open .mpane:not([hidden]) .mega__feat { animation-delay: .05s; }
@media (max-width: 1240px) { .mpane { grid-template-columns: minmax(0, 1fr); } .mpane .mega__feat { display: none; } }

/* ---------------------------------------------------------------- stop drawing, second pass */
@keyframes sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.scene { margin-top: clamp(24px, 3.5vw, 44px); isolation: isolate; }
.scene::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: 2%; height: 38%; z-index: -1; background: radial-gradient(50% 60% at 50% 100%, rgba(141, 198, 63, .22), transparent 70%); filter: blur(6px); }
.hot .pdot { fill: var(--lime); stroke: #fff; stroke-width: 1.5; }
.hot .pring { fill: none; stroke: var(--lime); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: pring 2.6s ease-out infinite; }
.hot:nth-of-type(2n) .pring { animation-delay: -1.3s; }
@keyframes pring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.hot:hover .pdot { fill: var(--ink); }
.rti-m.flip { animation: flip .5s ease; }
@keyframes flip { 0% { opacity: 1; } 40% { opacity: .1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hot .pring { animation: none; } }

/* ---------------------------------------------------------------- solution cards (image-led) */
.scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.scard { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); background: #fff; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: 0 0 0 1px var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.band .scard { box-shadow: 0 1px 2px rgba(11, 31, 23, .04); }
.scard:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 28px 50px -28px rgba(11, 31, 23, .45); }
.scard__img { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--paper-2); }
.scard__img picture, .scard__img > img { position: absolute; inset: 0; display: block; overflow: hidden; }
.scard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.scard:hover .scard__img img { transform: scale(1.05); }
.scard__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 42, 29, .28)); pointer-events: none; }
.scard__ico { position: absolute; z-index: 2; left: 20px; bottom: -22px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--green); box-shadow: 0 8px 20px -8px rgba(11, 31, 23, .35), 0 0 0 1px var(--line); }
.scard__ico .ic { width: 22px; height: 22px; }
.scard__b { position: relative; display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 34px 22px 22px; padding-right: 70px; }
.scard__img:not(:has(.scard__ico)) + .scard__b { padding-top: 20px; }
.scard h3 { font-family: var(--body); font-size: 1.14rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0; }
.scard p { font-size: .94rem; color: var(--ink-2); line-height: 1.45; margin: 0; text-wrap: pretty; }
.scard__go { position: absolute; right: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--paper); color: var(--ink); transition: background .25s, transform .35s var(--ease); }
.scard__go .ic { width: 17px; height: 17px; }
.scard:hover .scard__go { background: var(--lime); transform: rotate(-45deg); }
/* information cards: borderless and lighter */
.card { border: 0; background: var(--paper); }
.band .card { background: #fff; box-shadow: 0 1px 2px rgba(11, 31, 23, .04); }
.card .ico, .band .card .ico { width: 46px; height: 46px; border-radius: 14px; background: rgba(141, 198, 63, .16); color: var(--green); }
.card .ico .ic { width: 22px; height: 22px; }
.card h3.h4 { font-size: 1.08rem; }
.scards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .scards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .scards--3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- phone pass, Oct 2026 */
/* menu sheet */
@media (max-width: 1080px) {
  .sheet { padding-top: 16px; background: var(--bg); }
  .sfeat { position: relative; display: flex; align-items: flex-end; min-height: 168px; border-radius: 20px; overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; background: var(--green-2); margin-bottom: 8px; }
  .sfeat picture, .sfeat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
  .sfeat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 42, 29, 0) 25%, rgba(10, 42, 29, .9)); }
  .sfeat__b { display: grid; gap: 8px; padding: 16px; }
  .sfeat__b b { font-family: var(--display); font-variation-settings: "wdth" 110; font-size: 1.25rem; font-weight: 640; letter-spacing: -.015em; line-height: 1.15; }
  .sheet__h { margin: 22px 0 10px; font-size: .82rem; font-weight: 700; color: var(--ink-3); letter-spacing: .01em; }
  .scats { display: grid; gap: 8px; }
  .scat { border: 0; border-radius: 16px; background: var(--paper); overflow: hidden; }
  .sheet .scat summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-family: var(--body); font-size: 1rem; font-weight: 700; letter-spacing: 0; border: 0; }
  .scat .ico, .swho .ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--green); }
  .scat[open] .ico { background: var(--lime); color: var(--ink); }
  .scat .ico .ic, .swho .ico .ic { width: 20px; height: 20px; }
  .scat__t { display: grid; gap: 1px; flex: 1; min-width: 0; }
  .scat__t b { font-size: 1rem; line-height: 1.25; }
  .scat__t span { font-size: .82rem; font-weight: 500; color: var(--ink-3); line-height: 1.3; }
  .scat summary .chev { width: 18px; height: 18px; color: var(--ink-3); transition: transform .25s var(--ease); }
  .scat[open] summary .chev { transform: rotate(180deg); }
  .scat__links { display: grid; gap: 2px; padding: 0 8px 10px; }
  .sl { display: grid; gap: 1px; padding: 10px 12px; border-radius: 12px; background: #fff; text-decoration: none; color: var(--ink); }
  .sl + .sl { margin-top: 4px; }
  .sl b { display: flex; align-items: center; gap: 6px; font-size: .97rem; font-weight: 650; }
  .sl span { font-size: .84rem; color: var(--ink-3); line-height: 1.35; }
  .sl--all { background: transparent; }
  .sl--all b { color: var(--green); font-size: .92rem; }
  .sl--all .ic { width: 15px; height: 15px; }
  .swhos { display: grid; gap: 8px; }
  .swho { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--paper); text-decoration: none; color: var(--ink); }
  .swho b { flex: 1; font-size: 1rem; }
  .swho > .ic { width: 18px; height: 18px; color: var(--ink-3); }
  .squicks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
  .squick { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 14px; border: 1px solid var(--line-2); text-decoration: none; color: var(--ink); font-weight: 650; font-size: .96rem; }
  .sheet.is-open .sfeat, .sheet.is-open .scat, .sheet.is-open .swho { animation: megaIn .4s var(--ease) both; }
  .sheet.is-open .scat:nth-child(2) { animation-delay: .03s; } .sheet.is-open .scat:nth-child(3) { animation-delay: .06s; }
  .sheet.is-open .scat:nth-child(4) { animation-delay: .09s; } .sheet.is-open .scat:nth-child(5) { animation-delay: .12s; }
}
/* swipe carousels instead of tall stacks */
@media (max-width: 620px) {
  .swipe { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 84%; scroll-snap-align: start; min-width: 0; }
  .swipe > .case { min-height: 400px; }
  html.js .swipe > .rv { opacity: 1; transform: none; }
  .section-head { margin-bottom: 24px; }
}
@media (max-width: 1080px) {
  .sfeat::after { background: linear-gradient(180deg, rgba(10, 42, 29, .15) 0%, rgba(10, 42, 29, .55) 45%, rgba(10, 42, 29, .94) 100%); }
  .sfeat__b b { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
}
@media (max-width: 1080px) {
  .sheet > a.sfeat { color: #fff; padding: 0; border-bottom: 0; font-family: var(--body); font-size: 1rem; font-weight: 400; letter-spacing: 0; display: flex; justify-content: flex-start; }
}

/* phone menu: main navigation set in the display face, as before */
@media (max-width: 1080px) {
  .sheet__h { margin: 26px 0 12px; font-family: var(--display); font-variation-settings: "wdth" 112; font-size: 1.6rem; font-weight: 620; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
  .scat__t b, .swho b { font-family: var(--display); font-variation-settings: "wdth" 110; font-weight: 620; font-size: 1.08rem; letter-spacing: -.012em; }
  .sl b { font-family: var(--display); font-variation-settings: "wdth" 106; font-weight: 600; letter-spacing: -.008em; }
  .sbigs { display: grid; margin-top: 18px; border-top: 1px solid var(--line); }
  .sbig { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-family: var(--display); font-variation-settings: "wdth" 112; font-size: 1.6rem; font-weight: 620; letter-spacing: -.02em; line-height: 1.1; }
  .sbig .ic { width: 22px; height: 22px; color: var(--lime-ink); transition: transform .25s var(--ease); }
  .sbig:active .ic, .sbig:hover .ic { transform: translateX(4px); }
}

/* icons on submenu links */
.mlink { grid-template-columns: 36px minmax(0, 1fr); align-items: start; column-gap: 12px; }
.mlink__ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--paper); color: var(--green); transition: background .2s, color .2s; }
.mlink__ico .ic { width: 18px; height: 18px; }
.mlink:hover .mlink__ico, .mlink:focus-visible .mlink__ico { background: var(--lime); color: var(--ink); }
.mlink:hover, .mlink:focus-visible { background: var(--paper); }
.mlink:hover .mlink__ico { background: var(--lime); }
.mlink__t { display: grid; gap: 2px; min-width: 0; }
@media (max-width: 1080px) {
  .sl { display: flex; align-items: center; gap: 12px; }
  .sl__ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--paper); color: var(--green); }
  .sl__ico .ic { width: 18px; height: 18px; }
  .sl__t { display: grid; gap: 1px; min-width: 0; }
  .sl:active .sl__ico { background: var(--lime); color: var(--ink); }
  .sl--all { padding-left: 12px; }
}

/* phone menu: selected states */
@media (max-width: 1080px) {
  .scat { transition: background .25s, box-shadow .25s; }
  .scat[open] { background: rgba(141, 198, 63, .14); box-shadow: inset 0 0 0 1px rgba(141, 198, 63, .35); }
  .scat[open] .scat__t span { color: var(--ink-2); }
  .scat summary:active { background: rgba(141, 198, 63, .10); }
  .sl, .swho, .sbig { transition: background .2s, color .2s; -webkit-tap-highlight-color: transparent; }
  .sl:active { background: rgba(141, 198, 63, .18); }
  .sl[aria-current="page"] { background: #fff; box-shadow: inset 3px 0 0 var(--lime); }
  .sl[aria-current="page"] .sl__ico { background: var(--lime); color: var(--ink); }
  .swho:active, .swho[aria-current="page"] { background: rgba(141, 198, 63, .16); }
  .swho[aria-current="page"] .ico { background: var(--lime); color: var(--ink); }
  .sbig:active { color: var(--green); }
  .sbig[aria-current="page"] { color: var(--green); }
}
.ftr h2 { font-family: var(--body); font-size: .9rem; font-weight: 650; letter-spacing: 0; color: #fff; margin-bottom: 14px; }
.spec__grp h2 { font-family: var(--body); font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--ink); margin-bottom: 8px; }

/* ---------------------------------------------------------------- navigation bar v2 */
:root { --hdr: 72px; }
.hdr { transition: height .3s var(--ease), background .3s, box-shadow .3s, border-color .3s; }
.hdr.is-scrolled { --hdr-h: 62px; height: 62px; box-shadow: 0 10px 30px -22px rgba(11, 31, 23, .45); }
.hdr__in { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; }
.hdr__logo { width: 82px; transition: width .3s var(--ease); }
.hdr.is-scrolled .hdr__logo { width: 72px; }
.nav { justify-self: center; margin-left: 0; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(11, 31, 23, .04); box-shadow: inset 0 0 0 1px var(--line); }
.nav__link, .nav__btn { height: 38px; padding: 0 16px; font-weight: 550; color: var(--ink-2); }
.nav__link:hover, .nav__btn:hover, .nav__btn[aria-expanded="true"] { background: rgba(255, 255, 255, .9); color: var(--ink); box-shadow: 0 1px 2px rgba(11, 31, 23, .08); }
.nav__link[aria-current="page"], .nav__btn.is-current { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(11, 31, 23, .12), 0 0 0 1px var(--line); }
.nav__link[aria-current="page"]::after, .nav__btn.is-current::after { content: ""; width: 5px; height: 5px; border-radius: 2px; background: var(--lime); margin-left: 6px; }
.nav__btn.is-current::after { order: -1; margin: 0 6px 0 0; }
.hdr__act { display: flex; align-items: center; gap: 14px; justify-self: end; }
.hdr__tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hdr__tel .ic { width: 30px; height: 30px; padding: 7px; border-radius: 999px; background: rgba(141, 198, 63, .18); color: var(--green); }
.hdr__tel:hover { color: var(--lime-ink); }
.hdr__cta { margin-left: 0; }
.hdr__cta .ic { width: 16px; height: 16px; }
@media (max-width: 1320px) { .hdr__tel span { display: none; } .hdr__tel .ic { width: 38px; height: 38px; padding: 10px; } }
.mega { top: var(--hdr); }
.hdr.is-scrolled ~ .mega { top: 62px; }
/* phones and tablets */
@media (max-width: 1080px) {
  :root { --hdr: 64px; }
  .hdr.is-scrolled { height: 64px; }
  .hdr__in { grid-template-columns: auto 1fr auto; }
  .hdr__act { display: none; }
  .menu-btn { display: inline-flex; align-items: center; gap: 10px; width: auto; height: 42px; padding: 0 8px 0 16px; border-radius: 999px; background: rgba(11, 31, 23, .05); box-shadow: inset 0 0 0 1px var(--line); justify-self: end; margin-left: 0; }
  .menu-btn__l { font-weight: 650; font-size: .92rem; color: var(--ink); }
  .menu-btn__i { position: relative; width: 28px; height: 28px; border-radius: 999px; background: var(--green); }
  .menu-btn__i span { position: absolute; left: 8px; right: 8px; height: 1.5px; background: #fff; transition: transform .3s var(--ease), top .3s var(--ease); }
  .menu-btn__i span:first-child { top: 11px; }
  .menu-btn__i span:last-child { top: 16px; }
  .is-open .menu-btn__i span:first-child { top: 13.5px; transform: rotate(45deg); }
  .is-open .menu-btn__i span:last-child { top: 13.5px; transform: rotate(-45deg); }
  .is-open .menu-btn { background: rgba(141, 198, 63, .18); }
}

/* ---------------------------------------------------------------- navigation bar v3: calm */
.nav { padding: 0; background: none; box-shadow: none; gap: 6px; }
.nav__link, .nav__btn { position: relative; height: 40px; padding: 0 12px; border-radius: 10px; font-weight: 500; color: var(--ink-2); background: none; box-shadow: none; }
.nav__link:hover, .nav__btn:hover, .nav__btn[aria-expanded="true"] { background: none; box-shadow: none; color: var(--ink); }
.nav__link[aria-current="page"], .nav__btn.is-current { background: none; box-shadow: none; color: var(--ink); font-weight: 600; }
.nav__link[aria-current="page"]::after, .nav__btn.is-current::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 14px; height: 2px; margin: 0; border-radius: 2px; background: var(--lime); transform: translateX(-50%); order: 0; }
.hdr.is-scrolled { box-shadow: none; border-bottom-color: var(--line); }
@media (max-width: 1080px) {
  .menu-btn { width: 44px; height: 44px; padding: 0; background: none; box-shadow: none; justify-content: center; }
  .menu-btn__i { width: 24px; height: 24px; background: none; }
  .menu-btn__i span { left: 2px; right: 2px; background: var(--ink); }
  .menu-btn__i span:first-child { top: 8px; }
  .menu-btn__i span:last-child { top: 15px; }
  .is-open .menu-btn__i span:first-child, .is-open .menu-btn__i span:last-child { top: 11.5px; }
  .is-open .menu-btn { background: none; }
}

/* drawing labels: quiet at rest, a pill on hover */
.hot rect.pill { fill: transparent; stroke: transparent; }
.hot text { fill: var(--ink-2); font-weight: 600; }
.hot line { opacity: .35; }
.hot:hover rect.pill, .hot:focus rect.pill { fill: var(--ink); stroke: var(--ink); }
.hot:hover text, .hot:focus text { fill: #fff; }
.hot:hover line { opacity: .8; }
.hot .pring { stroke-width: 1.2; }

/* ---------------------------------------------------------------- cookie consent */
.cc { position: fixed; z-index: 60; left: 24px; bottom: 24px; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-radius: 24px; box-shadow: 0 30px 70px -30px rgba(11, 31, 23, .55), 0 0 0 1px var(--line); padding: 22px;
  animation: ccIn .5s var(--ease) both; }
.cc[hidden] { display: none; }
@keyframes ccIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.cc__main { display: grid; gap: 12px; }
.cc__head { display: flex; align-items: center; gap: 12px; }
.cc__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(141, 198, 63, .18); color: var(--green); flex: none; }
.cc__ico .ic { width: 20px; height: 20px; }
.cc h2 { font-family: var(--display); font-variation-settings: "wdth" 112; font-size: 1.3rem; font-weight: 640; letter-spacing: -.015em; }
.cc p { font-size: .92rem; line-height: 1.5; color: var(--ink-2); margin: 0; }
.cc p a { color: var(--green); font-weight: 600; }
.cc__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.cc__btns .btn { flex: 1 1 auto; justify-content: center; }
.cc__prefs { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.cc__prefs[hidden] { display: none; }
.cc-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 14px; background: var(--paper); }
.cc-row b { font-size: .95rem; font-weight: 700; }
.cc-row p { font-size: .84rem; margin-top: 2px; }
.cc-always { flex: none; font-size: .78rem; font-weight: 650; color: var(--green); background: rgba(141, 198, 63, .18); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.cc-switch { position: relative; flex: none; width: 46px; height: 28px; cursor: pointer; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-switch span { position: absolute; inset: 0; border-radius: 999px; background: #C9D1C6; transition: background .25s; }
.cc-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.cc-switch input:checked + span { background: var(--green); }
.cc-switch input:checked + span::after { transform: translateX(18px); }
.cc-switch input:focus-visible + span { outline: 2px solid var(--lime-ink); outline-offset: 2px; }
.cc-link { background: none; border: 0; padding: 8px 6px; font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cc-open { background: none; border: 0; padding: 0; font: inherit; color: var(--on-green); cursor: pointer; }
.cc-open:hover { color: var(--lime-2); }
@media (max-width: 620px) {
  .cc { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; padding: 18px; border-radius: 22px; }
  body.cc-on .dock { transform: translateY(160%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cc { animation: none; } }

/* "Live departures" label on the display mock-ups (RTI and e-paper pages) */
.hero2__rti-k { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 650; color: rgba(255, 255, 255, .85); }
.hero2__rti-k i { width: 8px; height: 8px; border-radius: 99px; background: var(--lime); box-shadow: 0 0 0 0 rgba(141, 198, 63, .7); animation: live 1.8s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(141, 198, 63, .7); } 100% { box-shadow: 0 0 0 10px rgba(141, 198, 63, 0); } }
.rti-h.flip { animation: flip .5s ease; }
@media (prefers-reduced-motion: reduce) { .hero2__rti-k i { animation: none; } }

/* vertical steps (turnkey timelines) */
.vsteps { list-style: none; counter-reset: v; display: grid; margin: 6px 0 0; padding: 0; }
.vsteps li { counter-increment: v; position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.vsteps li::before { content: counter(v, decimal-leading-zero); position: relative; z-index: 1; flex: none; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: rgba(141, 198, 63, .18); color: var(--green); font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; }
.vsteps li:not(:last-child)::after { content: ""; position: absolute; left: 17.25px; top: 45px; height: calc(100% - 36px); width: 1.5px; background: rgba(141, 198, 63, .45); }
.vsteps li b { font-size: 1.05rem; font-weight: 650; color: var(--ink); }
.vsteps li:last-child::before { background: var(--lime); color: var(--ink); }

/* case studies index */
.fcase { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); border-radius: var(--r-xl); overflow: hidden; background: var(--paper); }
.fcase__media { position: relative; min-height: 520px; display: block; }
.fcase__media picture, .fcase__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcase__body { display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 4vw, 56px); }
.fcase__body h2 a { text-decoration: none; color: inherit; }
.fcase__body h2 a:hover { color: var(--green); }
.fcase__body .lede { font-size: 1.05rem; max-width: none; }
.fcase__facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fcase__facts > div { background: #fff; border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.fcase__facts dt { font-size: .78rem; font-weight: 650; color: var(--ink-3); }
.fcase__facts dd { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.fcase__q { margin: 0; padding-left: 16px; border-left: 3px solid var(--lime); }
.fcase__q p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink); font-style: italic; }
.fcase__q footer { margin-top: 6px; font-size: .84rem; color: var(--ink-3); }
.badge--plain { background: #fff; }
.ccards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ccard { display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; background: #fff; text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(11, 31, 23, .04); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.ccard:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(11, 31, 23, .45); }
.ccard__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.ccard__img picture, .ccard__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.ccard:hover .ccard__img img { transform: scale(1.04); }
.ccard__badge { position: absolute; left: 16px; top: 16px; padding: .4em .9em; border-radius: 999px; font-size: .8rem; font-weight: 650; background: rgba(255, 255, 255, .92); color: var(--green); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ccard__b { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 26px; }
.ccard__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-s { font-size: .78rem; font-weight: 600; color: var(--ink-2); background: var(--paper); padding: .3em .75em; border-radius: 999px; }
.ccard h3 { font-family: var(--display); font-variation-settings: "wdth" 112; font-size: 1.5rem; font-weight: 640; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.ccard p { color: var(--ink-2); font-size: .97rem; line-height: 1.5; margin: 0; }
.ccard .link-arrow { margin-top: 4px; color: var(--green); }
@media (max-width: 900px) { .fcase { grid-template-columns: minmax(0, 1fr); } .fcase__media { min-height: 300px; } .ccards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .fcase__facts { grid-template-columns: minmax(0, 1fr); } }

/* phones: the stop drawing (cropped on the service pages) shown whole, never cropped */
@media (max-width: 760px) {
  .scene { overflow: visible; margin-inline: 0; }
  .scene svg { width: 100% !important; margin-left: 0 !important; }
}

/* street furniture guide, specified-for chips */
.guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gblock { background: #fff; border-radius: var(--r-lg); padding: clamp(22px, 2.8vw, 34px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gblock h2 { font-size: 1.3rem; }
.gblock .prose { font-size: .98rem; gap: .8em; }
.gblock .ticks { gap: 8px; }
.gblock .ticks li { font-size: .95rem; }
.specfor { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.specfor__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.specfor__chips span { background: #fff; border-radius: 999px; padding: .45em .95em; font-size: .9rem; font-weight: 550; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 900px) { .guide { grid-template-columns: minmax(0, 1fr); } }

/* 3iS-M50 specification */
.hls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.hl { background: #fff; border-radius: var(--r-lg); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hl__ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(141, 198, 63, .16); color: var(--green); margin-bottom: 6px; }
.hl__ico .ic { width: 19px; height: 19px; }
.hl b { font-family: var(--display); font-variation-settings: "wdth" 116; font-weight: 650; font-size: clamp(1.25rem, 1.7vw, 1.6rem); letter-spacing: -.025em; line-height: 1.05; }
.hl b small { font-family: var(--body); font-size: .62em; font-weight: 700; color: var(--lime-ink); margin-left: .25em; letter-spacing: 0; }
.hl > span:last-child { font-size: .84rem; color: var(--ink-2); line-height: 1.35; }
.dwgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.dwg { margin: 0; background: #fff; border-radius: var(--r-lg); padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.dwg svg { width: 100%; height: auto; }
.dw-fill { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.dw-cell { stroke: var(--ink); stroke-width: .6; opacity: .35; }
.dw-led { fill: var(--lime); stroke: var(--ink); stroke-width: 1.2; }
.dw-dim { stroke: var(--lime-ink); stroke-width: 1.2; }
.dw-t { font-family: var(--body); font-size: 13px; font-weight: 700; fill: var(--ink); }
.dw-l { font-family: var(--body); font-size: 11px; font-weight: 600; fill: var(--ink-3); letter-spacing: .04em; }
.dwg figcaption { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .92rem; }
.dwg figcaption span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.scards2 { columns: 3 300px; column-gap: 16px; }
.scard2 { break-inside: avoid; background: #fff; border-radius: var(--r-lg); padding: 22px 22px 8px; margin-bottom: 16px; display: block; }
.scard2__h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.scard2__h .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--paper); color: var(--green); flex: none; }
.scard2__h .ico .ic { width: 19px; height: 19px; }
.scard2 h3 { font-family: var(--body); font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.scard2 dl { margin: 0; }
.scard2 dl > div { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 3px; }
.scard2 dt { font-size: .8rem; font-weight: 650; color: var(--ink-3); }
.scard2 dd { margin: 0; font-size: .97rem; font-weight: 550; line-height: 1.45; color: var(--ink); }
@media (max-width: 1100px) { .hls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dwgs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .hls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hl { padding: 14px; } }
@media (min-width: 900px) { #specification .section-head--row > .row { flex-wrap: nowrap; } }

/* about hero: dark editorial with a photo mosaic */
.ahero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #06180F; padding: calc(var(--hdr) + clamp(36px, 5vw, 72px)) 0 clamp(48px, 6vw, 88px); }
.ahero::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .5; background-image: linear-gradient(rgba(237, 244, 239, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(237, 244, 239, .06) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 75%); mask-image: linear-gradient(90deg, #000 30%, transparent 75%); }
.ahero::after { content: ""; position: absolute; z-index: -1; left: -15%; bottom: -40%; width: 70%; height: 90%; background: radial-gradient(closest-side, rgba(141, 198, 63, .22), transparent); }
.ahero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ahero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ahero .crumbs, .ahero .crumbs a { color: rgba(255, 255, 255, .6); }
.ahero .eyebrow { color: var(--lime-2); background: rgba(169, 219, 94, .12); }
.ahero__h1 { font-family: var(--body); font-size: 1.05rem; font-weight: 650; color: rgba(255, 255, 255, .75); letter-spacing: 0; margin: 0; }
.ahero .display { color: #fff; font-size: clamp(2.6rem, 5.4vw, 4.9rem); text-align: left; }
.ahero .display em { background: linear-gradient(92deg, #C5EA8C 0%, #8DC63F 55%, #B3DF6E 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 9s ease-in-out infinite; }
.ahero .lede { color: rgba(255, 255, 255, .8); max-width: 46ch; }
.vpills { display: flex; flex-wrap: wrap; gap: 8px; }
.vpill { display: inline-flex; align-items: center; gap: 8px; padding: .5em 1em; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-size: .92rem; }
.vpill::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); }
.vpill b { font-weight: 650; }
.vpill--sq { background: var(--lime); color: var(--ink); border-color: var(--lime); font-weight: 700; }
.vpill--sq::before { background: var(--ink); }
.ahero__mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, 72px); gap: 12px; }
.mo { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: #0B2A1D; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.mo picture, .mo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo figcaption { position: absolute; left: 10px; bottom: 10px; right: 10px; font-size: .74rem; font-weight: 650; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.mo--0 { grid-column: 1 / 5; grid-row: 1 / 4; }
.mo--1 { grid-column: 5 / 7; grid-row: 1 / 5; }
.mo--2 { grid-column: 1 / 3; grid-row: 4 / 7; }
.mo--3 { grid-column: 3 / 5; grid-row: 4 / 7; }
.mo--4 { grid-column: 5 / 7; grid-row: 5 / 7; }
@media (max-width: 960px) {
  .ahero__in { grid-template-columns: minmax(0, 1fr); }
  .ahero__mosaic { grid-template-rows: repeat(6, 54px); }
}
@media (max-width: 520px) { .ahero__mosaic { grid-template-rows: repeat(6, 44px); gap: 8px; } .mo { border-radius: 14px; } .mo figcaption { display: none; } }
@media (prefers-reduced-motion: reduce) { .ahero .display em { animation: none; } }

/* ---------------------------------------------------------------- e-paper displays page */
.ep-hero__in { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 901px) { .ep-hero__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.ep-hero__device { position: relative; display: grid; justify-items: center; gap: 14px; padding: clamp(28px, 4vw, 48px) 20px; border-radius: var(--r-xl);
  background: radial-gradient(120% 90% at 70% 10%, rgba(141, 198, 63, .22), transparent 60%), linear-gradient(160deg, var(--green-3), var(--green-2)); }
.ep-hero__device .epd { max-width: 340px; }
.ep-live { color: var(--on-green); }
.ep-figs .hl { background: var(--paper); }
.ep-feats .card { height: 100%; }
.pws { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pw { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--r-lg); background: var(--paper); min-width: 0; }
.pw:first-child { background: var(--green); color: var(--on-green); }
.pw:first-child p { color: var(--on-green-2); }
.pw:first-child .ico { background: rgba(141, 198, 63, .2); color: var(--lime); }
.pw p { font-size: .92rem; color: var(--ink-2); margin-top: 6px; }
@media (max-width: 1100px) { .pws { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pws { grid-template-columns: minmax(0, 1fr); } .pw { flex-direction: row; align-items: flex-start; } }
.sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.size { background: #fff; border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; border: 1px solid var(--line); }
.size__in { font-family: var(--display); font-variation-settings: "wdth" 116; font-weight: 650; font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -.03em; line-height: 1; color: var(--green); }
.size__use { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--lime-ink); }
.size dl { display: grid; gap: 8px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.size dl div { display: grid; gap: 1px; }
.size dt { font-size: .75rem; color: var(--ink-3); }
.size dd { margin: 0; font-size: .9rem; font-weight: 600; }
.size p { font-size: .88rem; color: var(--ink-2); margin-top: auto; }
@media (max-width: 1100px) { .sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .size { padding: 16px; } }
.mounts { margin-top: 28px; background: var(--green); color: var(--on-green); border-radius: var(--r-xl); padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; }
@media (min-width: 901px) { .mounts { grid-template-columns: 200px minmax(0, 1fr); align-items: start; } }
.mounts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mounts li { display: grid; gap: 4px; padding-left: 14px; border-left: 2px solid var(--lime); }
.mounts li span { font-size: .9rem; color: var(--on-green-2); }
@media (max-width: 1000px) { .mounts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mounts ul { grid-template-columns: minmax(0, 1fr); } }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: fl; }
.flow > li { counter-increment: fl; position: relative; padding: 24px 22px; border-radius: var(--r-lg); background: var(--paper); min-width: 0; }
.flow > li::before { content: "0" counter(fl); display: block; font-family: var(--display); font-weight: 650; font-size: .85rem; color: var(--lime-ink); margin-bottom: 14px; }
.flow > li:not(:last-child)::after { content: ""; position: absolute; top: 34px; right: -12px; width: 12px; height: 2px; background: var(--lime); }
.flow h3 { font-family: var(--display); font-size: 1.12rem; font-weight: 650; letter-spacing: -.015em; margin: 0 0 6px; }
.flow p { font-size: .92rem; color: var(--ink-2); margin: 0; }
@media (max-width: 900px) { .flow { grid-template-columns: minmax(0, 1fr); } .flow > li:not(:last-child)::after { top: auto; bottom: -12px; right: auto; left: 34px; width: 2px; height: 12px; } }
.pw .ico { align-self: flex-start; flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(141, 198, 63, .16); color: var(--green); }
.mounts li { align-content: start; }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards--4 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .size:last-child:nth-child(odd) { grid-column: span 2; } }
/* cropped details of the stop drawing: clip to the crop at every width */
.scene.scene--detail { margin: 0; overflow: hidden; }
.scene.scene--detail svg { width: 100%; max-width: 100%; margin: 0; overflow: hidden; }

/* ---------------------------------------------------------------- RTI hub page */
.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; }
.rhero .display { font-size: clamp(2.4rem, 4.8vw, 4.4rem); margin: 0; }
.rsw { position: relative; border-radius: var(--r-xl); padding: clamp(18px, 2.4vw, 28px); background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.rsw__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.rsw__tabs { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: rgba(0, 0, 0, .28); }
.rsw__tab { appearance: none; border: 0; background: transparent; color: rgba(255, 255, 255, .72); font: inherit; font-size: .84rem; font-weight: 650; padding: .5em 1em; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s; }
.rsw__tab:hover { color: #fff; }
.rsw__tab[aria-selected="true"] { background: var(--lime); color: var(--ink); }
.rsw__tab:focus-visible { outline: 2px solid var(--lime-2); outline-offset: 2px; }
.rsw__pane { animation: rswIn .5s var(--ease); }
.rsw__pane[hidden] { display: none; }
@keyframes rswIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rsw__stage { display: grid; place-items: center; min-height: 270px; border-radius: var(--r-lg); padding: clamp(18px, 3vw, 32px); background: radial-gradient(90% 80% at 50% 0%, rgba(141, 198, 63, .18), transparent 70%), rgba(0, 0, 0, .22); }
.rsw__stage .epd, .rsw__stage .tft, .rsw__stage .led { max-width: 360px; }
.rsw__stage--led { background: radial-gradient(90% 80% at 50% 0%, rgba(255, 170, 40, .12), transparent 70%), rgba(0, 0, 0, .35); }
.rsw__cap { margin: 14px 4px 0; font-size: .92rem; color: rgba(255, 255, 255, .78); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; }
.rsw__cap a { color: var(--lime-2); font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.rsw__cap a .ic { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .rsw__pane { animation: none; } }
.hls--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .hls--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp { overflow-x: auto; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.cmp table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; }
.cmp th, .cmp td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 650; font-size: 1.05rem; background: var(--paper); }
.cmp thead th:nth-child(2) { background: var(--green); color: var(--on-green); }
.cmp tbody th { font-weight: 650; color: var(--ink-2); width: 16%; white-space: nowrap; }
.cmp td { color: var(--ink); }
.flow ul.ticks { margin: 0; gap: 6px; font-size: .92rem; }
.band .flow > li { background: #fff; }
.flow ul.ticks { margin-top: 4px; }
@media (max-width: 700px) {
  .cmp { overflow: visible; }
  .cmp table { min-width: 0; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tbody, .cmp tr { display: block; }
  .cmp tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .cmp tbody tr:last-child { border-bottom: 0; }
  .cmp tbody th { display: block; width: auto; padding: 0 0 8px; border: 0; font-family: var(--display); font-size: 1rem; color: var(--ink); }
  .cmp td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 6px 0; border: 0; font-size: .92rem; }
  .cmp td::before { content: attr(data-t); font-weight: 650; color: var(--lime-ink); font-size: .84rem; }
}
.epd__row > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .devices.swipe > .device { flex-basis: 90%; padding: 18px; } .devices.swipe .device__stage { padding: 14px; min-height: 0; } }

/* ---------------------------------------------------------------- live bus tracker */
.lhero { padding-bottom: clamp(24px, 3vw, 40px); }
.lbt-sec { padding-bottom: clamp(56px, 7vw, 96px); }
.lbt { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 40px 80px -50px rgba(11, 31, 23, .45); }
.lbt__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: var(--paper); border-bottom: 1px solid var(--line); }
.lbt__steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.lbt__step { appearance: none; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: inherit; font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; cursor: pointer; max-width: 100%; transition: background .2s, border-color .2s; }
.lbt__step span { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--paper-2); font-size: .78rem; font-weight: 700; flex: none; }
.lbt__step b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbt__step.is-on { border-color: var(--green); }
.lbt__step.is-on span { background: var(--lime); }
.lbt__step:disabled { opacity: .45; cursor: default; }
.lbt__step:not(:disabled):hover { border-color: var(--green); }
.lbt__status { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 650; color: var(--ink-2); }
.lbt__status i { width: 9px; height: 9px; border-radius: 99px; background: var(--ink-3); flex: none; }
.lbt__status.is-live i { background: var(--lime); box-shadow: 0 0 0 0 rgba(141, 198, 63, .7); animation: live 1.8s ease-out infinite; }
.lbt__status.is-loading i { background: var(--lime); animation: blink 1s ease-in-out infinite; }
.lbt__status.is-stale i { background: #E0A325; }
.lbt__status.is-error i { background: #C8452F; }
@keyframes blink { 50% { opacity: .25; } }
.lbt__body { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); height: clamp(560px, 74vh, 780px); }
.lbt__panel { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 18px; border-right: 1px solid var(--line); }
.lbt__view { display: flex; flex-direction: column; gap: 14px; }
.lbt__view[hidden] { display: none; }
.lbt__search { position: relative; }
.lbt__search > .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.lbt__search input { width: 100%; font: inherit; font-size: 1rem; padding: 13px 14px 13px 42px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); }
.lbt__search input:focus { outline: none; border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(141, 198, 63, .25); }
.lbt__near { appearance: none; font: inherit; text-align: left; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; }
.lbt__near:hover { border-color: var(--green); }
.lbt__near > .ic { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--lime); color: var(--ink); flex: none; }
.lbt__near span { display: grid; gap: 2px; }
.lbt__near small { color: var(--ink-3); font-size: .84rem; }
.lbt__near.is-busy > .ic { animation: blink 1s ease-in-out infinite; }
.lbt__label { margin: 4px 0 -4px; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.lbt__label[hidden] { display: none; }
.lbt__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lbt__chips[hidden] { display: none; }
.lbt__chip { appearance: none; font: inherit; font-size: .92rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s; }
.lbt__chip:hover, .lbt__chip:focus-visible { background: var(--green); border-color: var(--green); color: #fff; outline: none; }
.lbt__head h2, .lbt__rhead h2 { margin: 0; }
.lbt__head p, .lbt__rhead p { margin: 4px 0 0; color: var(--ink-2); font-size: .92rem; }
.lbt__routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.lbt__route { appearance: none; font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 68px; padding: 8px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; transition: transform .15s var(--ease), background .15s, border-color .15s; }
.lbt__route b { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbt__route span { font-size: .72rem; color: var(--ink-3); font-weight: 600; }
.lbt__route:hover, .lbt__route:focus-visible { background: var(--green); border-color: var(--green); color: #fff; transform: translateY(-2px); outline: none; }
.lbt__route:hover span, .lbt__route:focus-visible span { color: var(--on-green-2); }
.lbt__skel { height: 68px; border-radius: 14px; background: linear-gradient(90deg, var(--paper) 0%, var(--paper-2) 50%, var(--paper) 100%); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
[data-route-list] .lbt__skel { height: 58px; margin-bottom: 8px; }
@keyframes skel { to { background-position: -200% 0; } }
.lbt__empty { margin: 0; padding: 14px; border-radius: 14px; background: var(--paper); color: var(--ink-2); font-size: .92rem; }
.lbt__empty[hidden] { display: none; }
.lbt__back { appearance: none; border: 0; background: none; font: inherit; font-weight: 650; font-size: .92rem; color: var(--green); display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; align-self: flex-start; }
.lbt__back .ic { width: 16px; height: 16px; transform: rotate(180deg); }
.lbt__back:hover span { text-decoration: underline; }
.lbt__rhead { display: flex; align-items: center; gap: 14px; }
.lbt__badge { flex: none; min-width: 64px; height: 64px; padding: 0 12px; border-radius: 18px; display: grid; place-items: center; background: var(--lime); color: var(--ink); font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 750; font-size: 1.6rem; letter-spacing: -.02em; }
.lbt__dir + .lbt__dir { margin-top: 14px; }
.lbt__dir h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: .9rem; font-weight: 700; color: var(--ink); }
.lbt__dir h3 span { font-size: .76rem; padding: 2px 8px; border-radius: 99px; background: var(--paper-2); color: var(--ink-2); }
.lbt__dir ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lbt__bus { appearance: none; font: inherit; text-align: left; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.lbt__bus:hover, .lbt__bus:focus-visible { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(141, 198, 63, .25); }
.lbt__bus > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.lbt__bus b { font-weight: 650; font-size: .94rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbt__bus small { color: var(--ink-3); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbt__bus-l { min-width: 38px; padding: 4px 8px; border-radius: 10px; background: var(--green); color: #fff; font-weight: 700; font-size: .86rem; text-align: center; }
.lbt__bus-go { font-size: .76rem; font-weight: 700; color: var(--green); padding: 4px 10px; border-radius: 99px; background: var(--paper); }
.lbt__bus.is-old { opacity: .6; }
.lbt__bus.is-old .lbt__bus-l { background: var(--ink-3); }
.lbt__msg { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--paper); border-left: 4px solid var(--lime); font-size: .94rem; color: var(--ink-2); }
.lbt__msg b { display: block; color: var(--ink); margin-bottom: 2px; }
.lbt__map { position: relative; min-height: 0; background: var(--paper-2); isolation: isolate; z-index: 0; }
#lbt-map { position: absolute; inset: 0; font-family: var(--body); }
#lbt-map .leaflet-tile-pane { filter: saturate(.35) brightness(1.04); }
.lbt__fit { position: absolute; top: 12px; right: 12px; z-index: 500; appearance: none; font: inherit; font-size: .86rem; font-weight: 650; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .4); }
.lbt__fit[hidden] { display: none; }
.lbt__fit .ic { width: 16px; height: 16px; }
.lbt__src { margin: 0; padding: 12px 18px; font-size: .78rem; color: var(--ink-3); border-top: 1px solid var(--line); background: var(--paper); }
.lbt__src a { color: inherit; }
/* bus markers */
.bm { width: 0 !important; height: 0 !important; background: none; border: 0; }
.bm b { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; padding: 3px 8px; border-radius: 999px; background: var(--green); color: #fff; border: 2px solid #fff; font-family: var(--body); font-size: 12px; font-weight: 750; line-height: 1.2; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
.bm__dir { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; pointer-events: none; }
.bm__dir::before { content: ""; position: absolute; left: 50%; top: -3px; margin-left: -6px; border: 6px solid transparent; border-bottom: 9px solid var(--lime-ink); border-top: 0; }
.bm.is-old b { background: #7C8781; }
.bm:hover b, .bm:focus b { background: var(--lime); color: var(--ink); }
.leaflet-popup-content-wrapper { border-radius: 16px; }
@media (max-width: 900px) {
  .lbt { border-radius: var(--r-lg); margin-inline: calc(var(--gutter) * -0.5); }
  .lbt__body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .lbt__panel { border-right: 0; overflow: visible; padding: 16px; }
  .lbt__map { height: 48vh; min-height: 300px; border-top: 1px solid var(--line); }
  .lbt.has-route .lbt__map { order: -1; border-top: 0; border-bottom: 1px solid var(--line); }
  .lbt__bar { padding: 10px; }
  .lbt__status { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lbt__status i, .lbt__skel, .lbt__near.is-busy > .ic { animation: none; } }
.tryit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--r-lg); background: var(--green); color: var(--on-green); text-decoration: none; transition: transform .25s var(--ease); }
.tryit:hover { transform: translateY(-2px); }
.tryit__ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--lime); color: var(--ink); }
.tryit__ico .ic { width: 22px; height: 22px; }
.tryit b { display: block; font-family: var(--display); font-weight: 650; font-size: 1.12rem; color: #fff; }
.tryit small { display: block; color: var(--on-green-2); font-size: .92rem; margin-top: 2px; }
.tryit__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--lime-2); white-space: nowrap; }
.tryit__go .ic { width: 16px; height: 16px; }
@media (max-width: 700px) { .tryit { grid-template-columns: auto minmax(0, 1fr); } .tryit__go { grid-column: 2; } }
/* Google Maps markers (AdvancedMarkerElement anchors content at its bottom centre) */
.gdot { width: 14px; height: 14px; border-radius: 99px; background: var(--green); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transform: translateY(50%); cursor: pointer; }
.gdot.is-old { background: #8A958F; }
.gdot--faint { width: 6px; height: 6px; border: 0; box-shadow: none; opacity: .2; cursor: default; }
.gdot--you { width: 18px; height: 18px; background: var(--lime); border-width: 3px; cursor: default; }
.bm--g { position: relative; transform: none; cursor: pointer; }
.gm-style .gm-style-iw-c { border-radius: 16px; }
.credits { display: grid; gap: 12px; margin-bottom: 8px; }
.credit { padding: 18px 20px; border-radius: var(--r-md); background: var(--paper); }
.credit h3 { margin: 0 0 4px; }
.credit p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.lbt__body { border-bottom-left-radius: var(--r-xl); border-bottom-right-radius: var(--r-xl); }
/* on-bus signage (live bus tracker) */
.sign { display: grid; gap: 8px; margin-bottom: 16px; }
.sign .lbt__label { margin: 0 0 2px; }
.sign__blind { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; background: #0A0B0A; box-shadow: inset 0 0 0 1px #1d201d, 0 10px 24px -14px rgba(0, 0, 0, .6); overflow: hidden; font-family: var(--mono); color: #FFB52E; text-shadow: 0 0 6px rgba(255, 170, 40, .55); text-transform: uppercase; }
.sign__blind::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, transparent 0 1px, rgba(0, 0, 0, .55) 1.6px); background-size: 3px 3px; }
.sign__blind b { font-size: 1.5rem; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.sign__blind span { font-size: .95rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sign__screen { border-radius: 14px; overflow: hidden; background: #0B1F17; color: #fff; box-shadow: inset 0 0 0 4px #1a1d1b, 0 14px 30px -18px rgba(0, 0, 0, .7); }
.sign__top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--lime); color: var(--ink); font-weight: 700; font-size: .86rem; }
.sign__top span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sign__l { padding: 1px 8px; border-radius: 6px; background: var(--ink); color: var(--lime); font-weight: 800; }
.sign__top time { font-variant-numeric: tabular-nums; }
.sign__body { padding: 14px 14px 10px; display: grid; gap: 4px; }
.sign__body small { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lime-2); }
.sign__body strong { font-family: var(--display); font-variation-settings: "wdth" 108; font-weight: 650; font-size: 1.45rem; line-height: 1.1; letter-spacing: -.01em; }
.sign__then { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; border-left: 2px solid rgba(169, 219, 94, .4); }
.sign__then li { position: relative; padding: 3px 0 3px 14px; font-size: .88rem; color: var(--on-green-2); }
.sign__then li::before { content: ""; position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 99px; background: #0B1F17; border: 2px solid var(--lime-2); }
.sign__foot { padding: 8px 14px 12px; font-size: .78rem; color: var(--on-green-2); border-top: 1px solid rgba(255, 255, 255, .08); }
.sign__screen--off strong { font-size: 1.05rem; color: var(--on-green-2); }
.lbt__bus.is-sel { border-color: var(--green); box-shadow: 0 0 0 3px rgba(141, 198, 63, .3); }
/* bus popup (Leaflet and Google Maps) */
.bp { display: grid; gap: 10px; min-width: 210px; max-width: 260px; font-family: var(--body); color: var(--ink); }
.bp__h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.bp__l { min-width: 42px; padding: 7px 9px; border-radius: 10px; background: var(--lime); color: var(--ink); font-weight: 800; font-size: 1rem; line-height: 1; text-align: center; }
.bp__h div { display: grid; gap: 2px; min-width: 0; }
.bp__h b { font-size: .98rem; font-weight: 700; line-height: 1.25; }
.bp__h small { font-size: .8rem; color: var(--ink-3); }
.bp__next { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--paper); border-left: 3px solid var(--lime); }
.bp__next small { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lime-ink); }
.bp__next b { font-size: .92rem; font-weight: 650; }
.bp__meta { margin: 0; font-size: .78rem; color: var(--ink-3); }
.bp__go { appearance: none; border: 0; border-radius: 999px; background: var(--green); color: #fff; font: inherit; font-size: .84rem; font-weight: 650; padding: 8px 14px; cursor: pointer; justify-self: start; }
.bp__go:hover { background: var(--green-3); }
.leaflet-popup-content { margin: 14px 16px; }
/* signage: times */
.sign__next { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sign__due { font-family: var(--display); font-weight: 650; font-size: 1.2rem; color: var(--lime-2); font-variant-numeric: tabular-nums; }
.sign__late { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-style: normal; font-size: .66rem; letter-spacing: .04em; vertical-align: 1px; }
.sign__late.is-ok, .bp__late.is-ok { background: rgba(141, 198, 63, .2); color: var(--lime-2); }
.sign__late.is-early, .bp__late.is-early { background: rgba(120, 180, 255, .18); color: #A9CCFF; }
.sign__late.is-late, .bp__late.is-late { background: rgba(255, 181, 46, .18); color: #FFC75A; }
.sign__late.is-bad, .bp__late.is-bad { background: rgba(255, 110, 80, .2); color: #FF9C85; }
.sign__then li { display: flex; justify-content: space-between; gap: 10px; }
.sign__then li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sign__then em { font-style: normal; font-variant-numeric: tabular-nums; color: #fff; opacity: .8; }
.sign__times { margin-top: 4px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sign__times table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.sign__times caption { text-align: left; padding: 10px 12px 6px; font-weight: 700; font-size: .84rem; }
.sign__times th, .sign__times td { padding: 7px 12px; border-top: 1px solid var(--line); text-align: left; }
.sign__times thead th { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--paper); }
.sign__times tbody th { font-weight: 500; max-width: 0; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sign__times td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sign__times td.is-ok { color: var(--lime-ink); font-weight: 650; }
.sign__times td.is-late { color: #A06A00; font-weight: 650; }
.sign__times td.is-bad { color: #B23A1E; font-weight: 700; }
.sign__times p { margin: 0; padding: 8px 12px 10px; font-size: .74rem; color: var(--ink-3); border-top: 1px solid var(--line); }
.bp__late { justify-self: start; margin-top: 4px; padding: 1px 8px; border-radius: 99px; font-size: .72rem; font-weight: 700; }
.bp__late.is-ok { color: var(--lime-ink); } .bp__late.is-early { color: #2F5FA8; } .bp__late.is-late { color: #8A5A00; } .bp__late.is-bad { color: #A3311A; }
/* mega menu v3: contrast fix, solid panel, pane headers */
.mega { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 40px 80px -40px rgba(11, 31, 23, .35), 0 1px 0 var(--line); }
.mlink .mlink__t b { color: var(--ink); }
.mlink .mlink__t > span { color: var(--ink-3); }
.mlink:hover .mlink__t b { color: var(--green); }
.mpane__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 6px 0 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.mpane__head > div { display: grid; gap: 4px; max-width: 56ch; }
.mpane__head .mpane__title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 640; font-size: 1.4rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.mpane__head .mpane__title .ic { width: 18px; height: 18px; color: var(--lime-ink); transition: transform .25s var(--ease); }
.mpane__head .mpane__title:hover .ic { transform: translateX(3px); }
.mpane__head p { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.45; }
.mpane__all { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); font-size: .86rem; font-weight: 650; text-decoration: none; white-space: nowrap; transition: border-color .2s, background .2s; }
.mpane__all .ic { width: 14px; height: 14px; }
.mpane__all:hover { border-color: var(--green); background: var(--paper); }
.mpane__links { gap: 2px 12px; padding-top: 4px; }
.mrail { position: relative; }
.mrail[aria-selected="true"]::before { content: ""; position: absolute; left: -2px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--lime); }
.mpane .mega__feat { grid-row: 2; min-height: 300px; }
.mpane__head .mpane__all { font-family: var(--body); font-variation-settings: normal; font-size: .86rem; font-weight: 650; letter-spacing: 0; }
.mpane__head .mpane__all .ic { width: 14px; height: 14px; color: currentColor; }
/* map placeholder until a city is chosen (the map itself loads on demand) */
.lbt__ph { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px; text-align: center; color: var(--ink-2);
  background: radial-gradient(60% 55% at 50% 45%, rgba(141, 198, 63, .16), transparent 70%), repeating-linear-gradient(0deg, transparent 0 39px, rgba(11, 31, 23, .05) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(11, 31, 23, .05) 39px 40px), var(--paper); }
.lbt__ph .ic { width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: #fff; color: var(--green); box-shadow: 0 10px 24px -14px rgba(11, 31, 23, .5); margin-bottom: 6px; }
.lbt__ph b { font-family: var(--display); font-weight: 650; font-size: 1.1rem; color: var(--ink); }
.lbt__ph span { font-size: .9rem; }
/* signage: previous stop */
.sign__prev { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px dashed rgba(255, 255, 255, .14); font-size: .86rem; color: rgba(237, 244, 239, .55); }
.sign__prev span { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1px; color: rgba(237, 244, 239, .45); }
.sign__times tr.is-prev th, .sign__times tr.is-prev td { color: var(--ink-3); background: var(--paper); font-weight: 400; }

/* ---------------------------------------------------------------- bus punctuality statistics */
.pst { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: 0 40px 80px -50px rgba(11, 31, 23, .45); overflow: hidden; }
.pst__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px; background: var(--paper); border-bottom: 1px solid var(--line); }
.pst__city { position: relative; display: inline-flex; align-items: center; flex: 1 1 260px; max-width: 360px; }
.pst__city > .ic { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--green); pointer-events: none; }
.pst__city select { width: 100%; appearance: none; font: inherit; font-weight: 650; font-size: 1rem; padding: 12px 40px 12px 42px; border-radius: 14px; border: 1px solid var(--line-2); color: var(--ink); cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F3D2B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; }
.pst__city select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(141, 198, 63, .25); }
.pst__seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); }
.pst__seg button { appearance: none; border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 650; padding: 7px 14px; border-radius: 999px; color: var(--ink-2); cursor: pointer; }
.pst__seg button[aria-pressed="true"] { background: var(--green); color: #fff; }
.pst__dl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; font-size: .84rem; color: var(--ink-3); }
.pst__dl[hidden] { display: none; }
.pst__dl a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font-weight: 650; text-decoration: none; }
.pst__dl a:hover { border-color: var(--green); }
.pst__note { margin: 0; padding: 10px 16px; font-size: .84rem; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.pst__note:empty { display: none; }
.pst__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.pst__body[aria-busy="true"] { opacity: .55; transition: opacity .2s; }
.pkpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pkpi { padding: 16px; border-radius: var(--r-md); background: var(--paper); display: grid; gap: 4px; min-width: 0; }
.pkpi b { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 650; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -.02em; line-height: 1.05; }
.pkpi span { font-size: .8rem; color: var(--ink-3); }
.pkpi--ok b { color: #3D6A0C; } .pkpi--late b { color: #A06A00; } .pkpi--bad b { color: #B23A1E; } .pkpi--early b { color: #2F5FA8; }
.pcard { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.pcard--wide { grid-column: 1 / -1; }
.pcard header h3 { margin: 0; font-family: var(--display); font-weight: 650; font-size: 1.1rem; letter-spacing: -.01em; }
.pcard header p { margin: 2px 0 0; font-size: .84rem; color: var(--ink-3); }
.pbar { display: flex; width: 100%; border-radius: 99px; overflow: hidden; background: var(--paper-2); }
.pbar i { display: block; height: 100%; }
.plegend { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--ink-2); }
.plegend span { display: inline-flex; align-items: center; gap: 6px; }
.plegend i { width: 10px; height: 10px; border-radius: 3px; }
.pchart { width: 100%; height: auto; display: block; }
.pchart .pgrid { stroke: var(--line); stroke-width: 1; }
.pchart .paxis { font: 600 10px var(--body); fill: var(--ink-3); }
.pchart rect:hover { opacity: .8; }
.hm-wrap { overflow-x: auto; }
.hm { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 520px; font-size: .72rem; }
.hm th { font-weight: 600; color: var(--ink-3); padding: 0 4px; text-align: left; }
.hm thead th { text-align: center; }
.hm td { height: 22px; border-radius: 5px; }
.hm td.hm--none { background: repeating-linear-gradient(45deg, var(--paper) 0 4px, var(--paper-2) 4px 8px); }
.hm-key { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--ink-3); }
.hm-key i { width: 120px; height: 10px; border-radius: 99px; background: linear-gradient(90deg, rgba(217, 83, 79, .08), rgba(217, 83, 79, .9)); }
.hm-key__none { margin-left: 10px; padding-left: 18px; position: relative; }
.hm-key__none::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 3px; background: repeating-linear-gradient(45deg, var(--paper) 0 3px, var(--paper-2) 3px 6px); }
.ptools input { width: 100%; max-width: 320px; font: inherit; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper); }
.ptools input:focus { outline: none; border-color: var(--green); background: #fff; }
.ptable { overflow-x: auto; }
.ptable table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ptable th, .ptable td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.ptable thead th { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.ptable thead button { appearance: none; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.ptable thead button[aria-sort]::after { content: " ↓"; color: var(--lime-ink); }
.ptable thead button[aria-sort="ascending"]::after { content: " ↑"; }
.ptable tbody th { font-weight: 500; }
.ptable td.is-bad { color: #B23A1E; font-weight: 700; }
.ptable .pt-mix { width: 26%; min-width: 120px; }
.pline { display: inline-block; min-width: 34px; padding: 2px 7px; border-radius: 8px; background: var(--green); color: #fff; font-weight: 700; font-size: .82rem; text-align: center; }
.pmore { justify-self: start; }
.pop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pop:last-child { border-bottom: 0; }
.pop__n { font-weight: 650; font-size: .92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop__v { font-size: .82rem; color: var(--ink-3); }
.pop .pbar { grid-column: 1 / -1; }
.pcities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.pcity { appearance: none; font: inherit; text-align: left; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--ink); }
.pcity:hover, .pcity:focus-visible { background: var(--paper); border-color: var(--line); outline: none; }
.pcity__r { font-size: .8rem; font-weight: 700; color: var(--ink-3); }
.pcity__n { font-weight: 650; }
.pcity__v { font-family: var(--display); font-weight: 650; }
.pcity .pbar, .pcity__s { grid-column: 2 / -1; }
.pcity__s { font-size: .78rem; color: var(--ink-3); }
.pempty { margin: 0; padding: 14px; border-radius: 12px; background: var(--paper); color: var(--ink-2); font-size: .9rem; }
.pempty--big { grid-column: 1 / -1; padding: 28px; text-align: center; }
@media (max-width: 1000px) { .pkpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pst { border-radius: var(--r-lg); margin-inline: calc(var(--gutter) * -0.5); }
  .pst__body { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .pkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcities { grid-template-columns: minmax(0, 1fr); }
  .pst__dl { margin-left: 0; }
  .pst__city { max-width: none; }
}
.pcard > * { min-width: 0; }
/* bus stop drawing on phones: keep the hotspots as big tappable dots (labels would be unreadably small) */
.hot .phit { fill: transparent; pointer-events: all; }
@media (max-width: 760px) {
  .scene .hot { display: inline; }
  .scene .hot line, .scene .hot rect, .scene .hot text { display: none; }
  .scene .hot .phit { r: 70px; }
  .scene .hot .pdot { r: 14px; stroke-width: 5px; }
  .scene .hot .pring { r: 16px; stroke-width: 5px; }
}
/* signage: view tabs and route line */
.sign__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sign__tabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.sign__tabs button { appearance: none; border: 0; background: none; font: inherit; font-size: .78rem; font-weight: 650; padding: 4px 10px; border-radius: 999px; color: var(--ink-2); cursor: pointer; }
.sign__tabs button[aria-selected="true"] { background: var(--green); color: #fff; }
.rl { list-style: none; margin: 0; padding: 14px 14px 10px; border-radius: 14px; background: #0B1F17; color: #fff; position: relative; }
.rl > li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; }
/* the track: a line through every dot */
.rl > li::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 3px; background: var(--lime); }
.rl > li:first-child::before { top: 50%; }
.rl > li:last-child::before { bottom: 50%; }
.rl > li.is-past::before, .rl > li.is-past + .rl__bus::before { background: rgba(237, 244, 239, .25); }
.rl__dot { position: relative; z-index: 1; justify-self: center; width: 13px; height: 13px; border-radius: 99px; background: #0B1F17; border: 3px solid var(--lime); }
.rl__n { display: grid; gap: 1px; min-width: 0; font-size: .92rem; }
.rl__n small { font-size: .72rem; color: var(--on-green-2); }
.rl__t { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; }
.rl__s.is-past { color: rgba(237, 244, 239, .5); }
.rl__s.is-past .rl__dot { border-color: rgba(237, 244, 239, .35); background: rgba(237, 244, 239, .35); }
.rl__s.is-past .rl__dot::after { content: "✓"; position: absolute; inset: -3px; display: grid; place-items: center; font-size: 8px; font-weight: 800; color: #0B1F17; }
.rl__s.is-next .rl__n { font-weight: 700; font-size: 1rem; }
.rl__s.is-next .rl__dot { width: 15px; height: 15px; }
.rl__s.is-late .rl__t { color: #FFC75A; }
.rl__s.is-bad .rl__t { color: #FF9C85; }
.rl__s.is-end .rl__dot { border-radius: 4px; background: var(--lime); }
.rl__bus { min-height: 46px !important; }
.rl__bus::before { background: linear-gradient(rgba(237, 244, 239, .25) 50%, var(--lime) 50%) !important; }
.rl__pulse { position: relative; z-index: 1; justify-self: center; width: 18px; height: 18px; border-radius: 99px; background: var(--lime); box-shadow: 0 0 0 0 rgba(141, 198, 63, .7); animation: rlPulse 1.4s ease-out infinite; }
.rl__pulse::after { content: ""; position: absolute; inset: 5px; border-radius: 99px; background: #0B1F17; }
@keyframes rlPulse { 0% { box-shadow: 0 0 0 0 rgba(141, 198, 63, .75); opacity: 1; } 50% { opacity: .55; } 100% { box-shadow: 0 0 0 12px rgba(141, 198, 63, 0); opacity: 1; } }
.rl__bus .rl__n b { font-size: .86rem; color: var(--lime-2); }
.rl__bus .sign__late { justify-self: start; margin: 2px 0 0; }
.rl__gap .rl__n { font-size: .78rem; color: var(--on-green-2); font-style: italic; }
.rl__gap::before { background: repeating-linear-gradient(var(--lime) 0 4px, transparent 4px 9px) !important; }
@media (prefers-reduced-motion: reduce) { .rl__pulse { animation: none; } }

/* ---------------------------------------------------------------- bus stop departure board */
.sbd { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: 0 40px 80px -50px rgba(11, 31, 23, .45); overflow: hidden; }
.sbd__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; background: var(--paper); border-bottom: 1px solid var(--line); }
.sbd__search { position: relative; flex: 2 1 280px; }
.sbd__search > .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.sbd__search input { width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px 12px 42px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); }
.sbd__search input:disabled { background: var(--paper-2); cursor: not-allowed; }
.sbd__search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(141, 198, 63, .25); }
.sbd__near { padding: 11px 16px; }
.sbd__near .ic { width: 16px; height: 16px; }
.sbd__results { display: grid; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); max-height: 420px; overflow-y: auto; }
.sbd__results[hidden] { display: none; }
.sbd__stop { appearance: none; font: inherit; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.sbd__stop:hover, .sbd__stop:focus-visible { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(141, 198, 63, .25); }
.sbd__stop-n { display: grid; gap: 2px; min-width: 0; }
.sbd__stop-n small { color: var(--ink-3); font-size: .82rem; }
.sbd__routes { display: flex; flex-wrap: wrap; gap: 4px; }
.sbd__routes .pline { font-size: .76rem; min-width: 28px; }
.sbd__board { padding: 18px; display: grid; gap: 16px; }
.sbd__empty { display: grid; justify-items: center; gap: 6px; padding: 48px 20px; text-align: center; color: var(--ink-2); border-radius: var(--r-lg); background: radial-gradient(60% 70% at 50% 40%, rgba(141, 198, 63, .14), transparent 70%), var(--paper); }
.sbd__empty .ic { width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: #fff; color: var(--green); margin-bottom: 6px; }
.sbd__empty b { font-family: var(--display); font-weight: 650; font-size: 1.1rem; color: var(--ink); }
.sbd__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; align-items: flex-end; }
.sbd__head h2 { margin: 2px 0 2px; }
.sbd__head p { margin: 0; color: var(--ink-2); font-size: .9rem; }
.sbd__head .sbd__routes { margin-top: 8px; }
.sbd__kpis { display: flex; gap: 8px; flex-wrap: wrap; }
.sbd__kpis span { padding: 8px 12px; border-radius: 12px; background: var(--paper); font-size: .84rem; color: var(--ink-2); }
.sbd__kpis b { font-family: var(--display); font-size: 1.1rem; color: var(--ink); margin-right: 2px; }
.sbd__kpis .is-bad b { color: #B23A1E; }
.sbd__styles { display: inline-flex; justify-self: start; padding: 4px; gap: 2px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.sbd__styles button { appearance: none; border: 0; background: none; font: inherit; font-size: .86rem; font-weight: 650; padding: 7px 14px; border-radius: 999px; color: var(--ink-2); cursor: pointer; }
.sbd__styles button[aria-pressed="true"] { background: var(--green); color: #fff; }
.sbd__screen { display: grid; place-items: center; padding: clamp(18px, 3vw, 34px); border-radius: var(--r-lg); background: radial-gradient(80% 90% at 50% 0%, rgba(141, 198, 63, .16), transparent 70%), linear-gradient(160deg, var(--green-3), var(--green-2)); }
.sbd__screen .tft, .sbd__screen .epd, .sbd__screen .led { max-width: 620px; width: 100%; }
.sbd-tft .tft__row > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.tft__late { font-size: .7rem; font-weight: 700; }
.tft__late.is-late { color: #A06A00; } .tft__late.is-bad { color: #C0392B; } .tft__late.is-early { color: #2F5FA8; }
.sbd-led .led__row.is-late span:last-child { color: #FF7A4D; }
.sbd__table td small { display: block; font-size: .74rem; color: var(--ink-3); }
.sbd__table td.is-bad { color: #B23A1E; font-weight: 700; } .sbd__table td.is-late { color: #A06A00; font-weight: 650; } .sbd__table td.is-early { color: #2F5FA8; font-weight: 650; } .sbd__table td.is-ok { color: var(--lime-ink); font-weight: 650; }
.sbd__st { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .76rem; font-weight: 700; white-space: nowrap; background: var(--paper); color: var(--ink-2); }
.sbd__st.is-ok { background: rgba(141, 198, 63, .18); color: var(--lime-ink); }
.sbd__st.is-late { background: rgba(240, 168, 48, .18); color: #8A5A00; }
.sbd__st.is-bad { background: rgba(217, 83, 79, .15); color: #A3311A; }
.sbd__st.is-early { background: rgba(127, 167, 217, .2); color: #2F5FA8; }
.sbd__upd { margin: 0; font-size: .8rem; color: var(--ink-3); }
.sbd__upd a { color: inherit; }
@media (max-width: 760px) {
  .sbd { border-radius: var(--r-lg); margin-inline: calc(var(--gutter) * -0.5); }
  .sbd__board { padding: 12px; }
  .sbd__near { width: 100%; justify-content: center; }
  .sign__times.sbd__table { overflow-x: auto; }
  .sbd__table table { min-width: 520px; }
}
.sbd__board > * { min-width: 0; }
.sbd__head > div { min-width: 0; }
/* on the board preview, route chips are one colour so they can't be mistaken for late/early colours */
.sbd-tft .tft__route { background: var(--green) !important; color: #fff !important; }
.sbd__table tbody th { width: 64px; }
/* process steps on phones/tablets: a vertical timeline (numbered circles on a line) instead of the desktop's row */
@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; border-top: 0; }
  .steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; padding: 0 0 24px; }
  .steps li::before { grid-row: 1 / span 2; position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 99px; display: grid; place-items: center; background: #fff; border: 2px solid var(--lime); color: var(--lime-ink); font-size: .84rem; }
  .steps li::after { top: 40px; bottom: 0; left: 19px; width: 2px; height: auto; background: var(--line-2); }
  .steps li:last-child { padding-bottom: 0; }
  .steps li:last-child::after { display: none; }
  .steps h3 { grid-column: 2; align-self: center; min-height: 40px; display: flex; align-items: center; margin: 0; }
  .steps p { grid-column: 2; margin: 0; }
  .band .steps li::before { background: var(--paper); }
}
.sbd__ind { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--lime); color: var(--ink); font-family: var(--body); font-size: .72rem; font-weight: 700; vertical-align: 2px; letter-spacing: 0; }
.sbd__back { justify-self: start; }
.sbd__results { scroll-margin-top: calc(var(--hdr) + 12px); }
@media (max-width: 760px) { .sbd__results { max-height: none; overflow: visible; } }
/* tracker: snake route (stop dots) and the red "bus is here" blinker */
.rstop { position: relative; width: 12px !important; height: 12px !important; border-radius: 99px; background: #fff; border: 2.5px solid #2E7D32; box-sizing: border-box; }
.rstop--g { transform: translateY(50%); }
.rstop.is-past { border-color: #8A958F; }
.rblink { position: relative; width: 22px; height: 22px; }
.rblink i { position: absolute; inset: 2px; border-radius: 99px; background: #E53935; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(229, 57, 53, .75); animation: rblink 1.1s ease-out infinite; }
.rblink--g { transform: translateY(50%); }
@keyframes rblink { 0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, .75); opacity: 1; } 50% { opacity: .45; } 100% { box-shadow: 0 0 0 14px rgba(229, 57, 53, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rblink i { animation: none; } }
/* stop search map */
.sbd__map { position: relative; height: clamp(260px, 42vh, 420px); border-bottom: 1px solid var(--line); isolation: isolate; z-index: 0; background: var(--paper-2); }
.sbd__map[hidden] { display: none; }
#sbd-map { position: absolute; inset: 0; font-family: var(--body); }
#sbd-map .leaflet-tile-pane { filter: saturate(.35) brightness(1.04); }
.smk { position: relative; width: 26px !important; height: 26px !important; border-radius: 99px; background: var(--green); border: 2.5px solid #fff; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); display: grid; place-items: center; cursor: pointer; }
.smk--g { transform: translateY(50%); }
.smk b { position: relative; z-index: 1; color: #fff; font: 800 10px/1 var(--body); }
.smk__dir { position: absolute; inset: -9px; pointer-events: none; }
.smk__dir::before { content: ""; position: absolute; left: 50%; top: 0; margin-left: -5px; border: 5px solid transparent; border-bottom: 7px solid var(--lime-ink); border-top: 0; }
.smk:hover { background: var(--lime); }
.smk:hover b { color: var(--ink); }
.smk-pop { display: grid; gap: 6px; min-width: 200px; font-family: var(--body); }
.smk-pop b { font-size: .95rem; }
.smk-pop > span { font-size: .82rem; color: var(--ink-2); }
/* stop names link to their departure boards */
.stoplink { color: inherit; text-decoration: underline; text-decoration-color: rgba(141, 198, 63, .55); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.stoplink:hover { text-decoration-color: var(--lime); }
.sign__screen .stoplink, .rl .stoplink { text-decoration-color: rgba(169, 219, 94, .5); }
.sign__times .stoplink { text-decoration-color: rgba(61, 106, 12, .35); }
.bp--stop .bp__go { text-decoration: none; display: inline-block; }
/* bus stop board map: the stop pin, live bus badges, selectable rows */
.spin { position: relative; width: 30px; height: 30px; }
.spin i { position: absolute; left: 3px; top: 0; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--lime); border: 3px solid var(--ink); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6); }
.spin i::after { content: ""; position: absolute; inset: 5px; border-radius: 99px; background: var(--ink); }
.bmk-w { width: 0 !important; height: 0 !important; }
.bmk-w--g { position: relative; }
.bmk { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); padding: 2px 7px; border-radius: 999px; background: var(--green); color: #fff; border: 2px solid #fff; font: 750 11px/1.2 var(--body); white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); cursor: pointer; }
.bmk:hover { background: var(--lime); color: var(--ink); }
.sbd__hint { margin: -4px 0 0; font-size: .84rem; color: var(--ink-3); }
.sbd__table tbody tr[data-trip] { cursor: pointer; }
.sbd__table tbody tr[data-trip]:hover th, .sbd__table tbody tr[data-trip]:hover td { background: var(--paper); }
.sbd__table tbody tr.is-sel th, .sbd__table tbody tr.is-sel td { background: rgba(141, 198, 63, .14); }
.sbd__table tbody tr.is-sel th { box-shadow: inset 4px 0 0 var(--lime); }
.sbd__table tbody tr[data-trip]:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
/* route dot labels: always for key stops, the rest once zoomed in to street level */
.rstop span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 1px 6px; border-radius: 6px;
  background: rgba(255, 255, 255, .92); color: var(--ink); font: 600 11px/1.35 var(--body); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .35); pointer-events: none; }
.rstop.is-past { border-color: #8A958F; }
.rstop.is-past span { color: var(--ink-3); background: rgba(255, 255, 255, .8); }
.rstop.is-key { width: 14px !important; height: 14px !important; border-width: 3px; }
.rstop.is-key span { font-weight: 750; font-size: 12px; background: #fff; border: 1.5px solid var(--lime); }
.rstop.is-next span::before { content: "Next: "; color: var(--lime-ink); }
.rstop.is-here { border-color: var(--ink); background: var(--lime); }
.rstop.is-here span { background: var(--ink); color: #fff; border-color: var(--ink); }
.zoomed-out .rstop:not(.is-key) span { display: none; }
/* times on route dot labels */
.rstop .rt { margin-left: 4px; font-weight: 750; font-variant-numeric: tabular-nums; color: #2E7D32; }
.rstop .rt.is-late { color: #A06A00; }
.rstop .rt.is-bad { color: #C0392B; }
.rstop .rt.is-past { color: var(--ink-3); font-weight: 600; }
.rstop .rt s { margin-left: 3px; font-weight: 500; color: var(--ink-3); }
.rstop.is-here .rt { color: var(--lime-2); }
.rstop.is-here .rt s { color: rgba(255, 255, 255, .6); }
.rstop.is-prev span::before { content: "Prev: "; color: var(--ink-3); }
.rstop.is-prev span { border-color: #B9C2BC; }
.rstop.is-end span::before { content: "End: "; color: var(--ink-3); }
.rstop.is-here.is-end span::before { color: rgba(255, 255, 255, .7); }
/* snail trail: stops behind the bus are filled in; stops ahead stay hollow */
.rstop { border-color: #6BAA2C; }
.rstop.is-past { background: #1F6B2A; border-color: #fff; box-shadow: 0 0 0 1.5px #1F6B2A; }
.rstop.is-past span { color: var(--ink-2); background: rgba(255, 255, 255, .88); }
.rstop.is-past .rt.is-past { color: var(--ink-3); }
.rstop.is-prev { background: #1F6B2A; }
.rstop.just-filled { animation: trailFill .9s var(--ease); }
/* Leaflet positions markers with transform, so its pop is colour and glow only; Google's markers can scale */
@keyframes trailFill { 0% { background: #fff; } 40% { background: #8DC63F; box-shadow: 0 0 0 8px rgba(141, 198, 63, .45); } 100% { } }
.rstop--g.just-filled { animation-name: trailFillG; }
@keyframes trailFillG { 0% { transform: translateY(50%) scale(1); background: #fff; } 40% { transform: translateY(50%) scale(1.8); background: #8DC63F; box-shadow: 0 0 0 6px rgba(141, 198, 63, .35); } 100% { transform: translateY(50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .rstop.just-filled { animation: none; } }
/* route line = the map's snail trail: filled dark-green trail behind, red bus, lighter hollow stops ahead */
.rl--trail > li::before { background: #8DC63F; }
.rl--trail > li.is-past::before, .rl--trail > li.rl__gap.is-past::before { background: #3E8E3A; }
.rl--trail > li.rl__bus::before { background: linear-gradient(#3E8E3A 50%, #8DC63F 50%) !important; }
.rl--trail .rl__dot { border-color: #8DC63F; background: #0B1F17; }
.rl--trail .rl__s.is-past { color: rgba(237, 244, 239, .72); }
.rl--trail .rl__s.is-past .rl__dot { background: #3E8E3A; border-color: #fff; }
.rl--trail .rl__s.is-past .rl__dot::after { content: none; }
.rl--trail .rl__pulse { background: #E53935; box-shadow: 0 0 0 0 rgba(229, 57, 53, .7); animation-name: rlPulseRed; }
.rl--trail .rl__pulse::after { background: #fff; inset: 6px; }
@keyframes rlPulseRed { 0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, .75); opacity: 1; } 50% { opacity: .5; } 100% { box-shadow: 0 0 0 12px rgba(229, 57, 53, 0); opacity: 1; } }
.rl--trail .rl__bus .rl__n b { color: #FF8A80; }
.rl__tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 99px; font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; background: rgba(169, 219, 94, .2); color: var(--lime-2); }
.rl__s.is-past .rl__tag { background: rgba(255, 255, 255, .14); color: rgba(237, 244, 239, .8); }
.rl--trail .rl__t s { margin-left: 4px; font-weight: 500; opacity: .55; }
.rl--trail .rl__t .is-late { color: #FFC75A; }
.rl--trail .rl__t .is-bad { color: #FF9C85; }
.rl__gap.is-past .rl__n { color: rgba(237, 244, 239, .5); }
.rl--trail .rl__gap::before { background: repeating-linear-gradient(#8DC63F 0 4px, transparent 4px 9px) !important; }
.rl--trail .rl__gap.is-past::before { background: repeating-linear-gradient(#3E8E3A 0 4px, transparent 4px 9px) !important; }
.rl__tag { justify-self: start; line-height: 1.6; margin: 0 0 1px; }
.rl__gap .rl__n { grid-column: 2 / -1; }
.rl--trail .rl__s.is-past .rl__dot { border-width: 2px; background: #3E8E3A; box-shadow: 0 0 0 1px #3E8E3A; }
/* stop board: the selected bus's route line beside the arrivals table */
.sbd__follow { display: grid; gap: 16px; align-items: start; }
.sbd__follow > * { min-width: 0; }
@media (min-width: 980px) { .sbd__follow { grid-template-columns: minmax(0, 1fr) 340px; } .sbd__follow .sbd__rline { position: sticky; top: 90px; } }
.sbd__follow.is-empty { display: none; }
.sbd__rline { border-radius: 14px; background: #0B1F17; color: #fff; overflow: hidden; }
.sbd__rline:empty { display: none; }
.sbd__rlh { display: flex; align-items: center; gap: 10px; padding: 14px 14px 4px; }
.sbd__rlh b { display: block; font-size: .95rem; line-height: 1.25; }
.sbd__rlh small { display: block; font-size: .74rem; color: var(--on-green-2); }
.sbd__rline .rl { border-radius: 0; padding-top: 8px; }
.sbd__rline .lbt__skel { margin: 10px 14px 14px; opacity: .15; }
.sbd__rlnote { margin: 0; padding: 10px 14px 16px; font-size: .86rem; color: var(--on-green-2); }
.rl__s.is-here .rl__n { font-weight: 800; font-size: 1rem; }
.rl__s.is-here .rl__dot { width: 17px; height: 17px; border-radius: 5px; border-color: #fff; background: #8DC63F; }
.rl__s.is-here .rl__tag { background: #fff; color: #0B1F17; }
.rl__s.is-past.is-here .rl__dot { background: #3E8E3A; }
.rl--trail.is-sched .rl__t { color: rgba(237, 244, 239, .85); }
/* one time format on every sign: minutes within the hour, clock beyond; a lime dot marks buses tracked live */
.livemark { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 99px; background: #6BAA2C; box-shadow: 0 0 0 2px rgba(141, 198, 63, .3); vertical-align: 2px; font-style: normal; }
.tft__msg .livemark { margin: 0 3px 0 0; vertical-align: 1px; }
.sbd__table td.sbd__due { font-weight: 700; white-space: nowrap; }
.sign__times tbody th { width: 46%; }
.sign__times th, .sign__times td { padding-left: 10px; padding-right: 10px; }
.sign__times td.sign__duein { font-weight: 700; }
/* compact bus popup: head shares the InfoWindow header row with the close button; lateness and age on one line */
.bp { gap: 8px; }
.bp__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.bp__row .bp__late { margin-top: 0; }
.bp__next { padding: 6px 10px; }
.bp--head { min-width: 0; max-width: 220px; padding-top: 4px; }
.bp--head .bp__l { padding: 6px 8px; min-width: 38px; }
.gm-style .gm-style-iw-ch { padding-top: 10px; }
.gm-style .gm-style-iw-d .bp { padding-bottom: 2px; }
.gm-style-iw-d .bp { min-width: 0; max-width: 240px; }
.gm-style .gm-style-iw-d { overflow: hidden auto !important; }
.rblink, .rblink i { pointer-events: none; }
gmp-advanced-marker:has(> .rblink), gmp-advanced-marker:has(.rblink) { pointer-events: none !important; }
.bp__h b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bp--head { max-width: 236px; }
/* on the stop board the followed bus is only the red blinker, so it is the tap target for its popup */
.rblink--tap, .rblink--tap i { pointer-events: auto; cursor: pointer; }
gmp-advanced-marker:has(.rblink--tap) { pointer-events: auto !important; }
/* stop popups (tracker route stops, stop board search results and route stops): a mini departure board */
.bp--stop { gap: 8px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.bp__stopn { font-size: .98rem; }
.bp--stop .sdep { display: grid; gap: 2px; min-width: 180px; align-content: start; }
.bp--stop .sdep.is-loading { min-height: 96px; }
.bp--head .bp__h small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp--stop .sdep__r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 8px; font-size: .84rem; }
.sdep__r .pline { min-width: 30px; font-size: .76rem; padding: 1px 6px; }
.sdep__d { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.sdep__t { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 750; color: var(--lime-ink); }
.sdep__t.is-late { color: #B23A1E; }
.sdep__t .livemark { margin-left: 4px; }
.sdep__r.is-this { background: rgba(141, 198, 63, .18); }
.sdep__r.is-this .sdep__d { color: var(--ink); font-weight: 650; }
.sdep__none { font-size: .82rem; color: var(--ink-3); }
.bp--head .sbd__ind { font-size: .7rem; vertical-align: 1px; }
/* bus popups: the bus's next stops as a small departure board */
.bp { grid-template-columns: minmax(0, 1fr); }
.sdep--stops { display: grid; gap: 1px; min-width: 180px; }
.sdep__h { font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lime-ink); padding: 0 6px 2px; }
.sdep--stops .sdep__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 8px; font-size: .84rem; }
.sdep--stops .sdep__d .stoplink { text-decoration-color: rgba(61, 106, 12, .3); }
.sdep--stops .sdep__r.is-next { background: var(--paper); box-shadow: inset 3px 0 0 var(--lime); }
.sdep--stops .sdep__r.is-next .sdep__d { color: var(--ink); font-weight: 650; }
.sdep--stops .sdep__r.is-here { background: rgba(141, 198, 63, .18); }
.sdep--stops .sdep__r.is-here .sdep__d { color: var(--ink); font-weight: 700; }
.sdep--stops .sdep__d small { font-size: .68rem; font-weight: 600; color: var(--lime-ink); }
.sdep__more { padding: 1px 6px 0; font-size: .74rem; font-style: italic; color: var(--ink-3); }
.sdep__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 2px; }
.sdep__top .sdep__h { padding-bottom: 0; }
.sdep__top .bp__late { margin: 0; font-size: .68rem; }
.sdep--stops .sdep__r.is-here { box-shadow: inset 3px 0 0 #1F6B2A; }
.bp--stop > .sdep__h { padding: 4px 6px 0; }
.bp--stop .sdep--stops { min-width: 180px; }
/* route stop popups: "Next stops" / "Departures" tabs */
.ptabs { display: inline-flex; justify-self: start; gap: 2px; padding: 3px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.ptabs button { appearance: none; border: 0; background: none; font: inherit; font-size: .74rem; font-weight: 650; color: var(--ink-2); padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.ptabs button[aria-selected="true"] { background: var(--green); color: #fff; }
[data-ppane] .sdep__h { display: none; }
[data-ppane][hidden] { display: none; }
/* stop popups: the board link is a text link, not a pill, so two lists and the link fit a 340px phone map */
.bp--stop .bp__go { background: none; color: var(--green); padding: 2px 6px; font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(61, 106, 12, .35); border-radius: 6px; }
.bp--stop .bp__go:hover { background: var(--paper); color: var(--green); }
.ptabs { padding: 2px; }
.ptabs button { padding: 3px 10px; }
.bp--stop { gap: 6px; }
/* route line: a stop name opens its Next stops / Departures card underneath */
.rl__nb { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(169, 219, 94, .5); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.rl__nb::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 2px 0 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); opacity: .55; transition: transform .2s; }
.rl__nb[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.rl__nb:hover, .rl__nb:focus-visible { text-decoration-color: var(--lime); outline: none; }
.rl > li.rl__x { display: block; min-height: 0; padding: 2px 0 10px 36px; }
.rl--trail > li.rl__x.is-past::before { background: #3E8E3A; }
.rlx { padding: 10px; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .6); }
.rlx .sdep--stops, .rlx .sdep { min-width: 0; }
.sbd__rline .rl > li.rl__x { padding-right: 0; }

/* ---------------------------------------------------------------- About and RTI heroes: light (12 Oct, owner) */
.ahero { color: var(--ink); background: linear-gradient(180deg, #fff 0%, var(--paper) 100%); padding-top: calc(var(--hdr) + clamp(24px, 3.5vw, 52px)); }
.ahero::before { opacity: 1; background-image: linear-gradient(rgba(15, 61, 43, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 61, 43, .045) 1px, transparent 1px); }
.ahero::after { background: radial-gradient(closest-side, rgba(141, 198, 63, .14), transparent); left: auto; right: -15%; bottom: auto; top: -30%; }
.ahero .crumbs, .ahero .crumbs a { color: var(--ink-3); }
.ahero .eyebrow { color: var(--green); background: rgba(141, 198, 63, .18); }
.ahero__h1 { color: var(--ink-3); }
.ahero .display { color: var(--ink); }
.ahero .display em { animation: none; color: var(--green); -webkit-text-fill-color: currentColor; background: linear-gradient(transparent 68%, rgba(141, 198, 63, .5) 68%, rgba(141, 198, 63, .5) 92%, transparent 92%);
  -webkit-background-clip: border-box; background-clip: border-box; background-size: auto; font-style: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ahero .lede { color: var(--ink-2); }
.vpill { background: #fff; border-color: var(--line); color: var(--ink); }
.vpill--sq { background: var(--lime); border-color: var(--lime); }
.mo { background: var(--paper); box-shadow: 0 30px 60px -36px rgba(11, 31, 23, .45); }
/* the RTI switcher keeps a dark bay: LED and full-colour screens read best on dark, and it frames them as devices */
.rhero .rsw { background: radial-gradient(90% 70% at 80% 0%, rgba(141, 198, 63, .18), transparent 70%), var(--green-2); border-color: transparent; color: var(--on-green);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 40px 80px -44px rgba(11, 31, 23, .55); }

/* the drawing as a green energy story: sun, beams of light onto every panel, power flowing to what it runs */
.scene .beam { fill: none; stroke: #E8A900; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 9; opacity: .55; animation: beam 1.4s linear infinite; }
.scene .flow { fill: none; stroke: var(--lime); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 4 6; animation: beam .9s linear infinite; }
@keyframes beam { to { stroke-dashoffset: -22; } }
.scene .sun-rays { transform-box: fill-box; transform-origin: center; animation: sunspin 30s linear infinite; }
@keyframes sunspin { to { transform: rotate(360deg); } }
.scene .s-badge { font-family: var(--body); font-size: 13px; font-weight: 700; fill: var(--ink); }
@media (prefers-reduced-motion: reduce) { .scene .beam, .scene .flow, .scene .sun-rays { animation: none; } }
/* panels glow in turn as the sunlight reaches them; the sun breathes */
.scene .pv { animation: pvGlow 4s ease-in-out infinite; }
.scene .pv--2 { animation-delay: 1s; } .scene .pv--3 { animation-delay: 2s; } .scene .pv--4 { animation-delay: 3s; }
@keyframes pvGlow {
  0%, 60%, 100% { filter: drop-shadow(0 0 0 rgba(255, 201, 60, 0)); stroke: #0B1F17; }
  25% { filter: drop-shadow(0 0 7px rgba(255, 201, 60, .95)) drop-shadow(0 0 16px rgba(255, 201, 60, .55)) brightness(1.5); stroke: #E8A900; }
}
.scene .sun-glow { transform-box: fill-box; transform-origin: center; animation: sunBreathe 4s ease-in-out infinite; }
@keyframes sunBreathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scene .pv, .scene .sun-glow { animation: none; } }
/* the planter tree sways in the breeze: the canopy pivots on the top of the trunk, each clump wobbles a little on its own */
.scene .tree { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 4.5s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3.5deg); } }
.scene .lf { transform-box: fill-box; transform-origin: 50% 80%; animation: leaf 3s ease-in-out infinite; }
.scene .lf--2 { animation-duration: 2.6s; animation-delay: -.8s; }
.scene .lf--3 { animation-duration: 3.4s; animation-delay: -1.6s; }
@keyframes leaf { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(2px, -1.5px) scale(1.03); } }
.scene .wind { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; opacity: 0; stroke-dasharray: 60 120; animation: wind 4.5s ease-in-out infinite; }
.scene .wind--2 { animation-delay: 1.4s; }
@keyframes wind { 0% { stroke-dashoffset: 60; opacity: 0; } 25% { opacity: .35; } 60% { opacity: .25; } 100% { stroke-dashoffset: -110; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scene .tree, .scene .lf, .scene .wind { animation: none; } .scene .wind { display: none; } }
/* the tree and the Planters dot share one pivot (the top of the trunk, user point 274,410; view-box origin is 0,-34),
   so the dot stays on the canopy as it sways */
.scene .tree, .scene .hot__anchor.sway { transform-box: view-box; transform-origin: 274px 444px; animation: sway 4.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .scene .hot__anchor.sway { animation: none; } }
/* the bus arrives (slowing), dwells at the flag with its doors open, indicates and pulls away (speeding up).
   One 24s cycle; the wheels turn in step with the distance (radius 44, so about 1440deg per 1100 units). */
.scene .bus { animation: busRun 24s infinite; }
@keyframes busRun {
  0% { transform: translateX(1460px); animation-timing-function: cubic-bezier(.15, .55, .3, 1); }
  26% { transform: translateX(360px); }
  56% { transform: translateX(360px); animation-timing-function: cubic-bezier(.6, 0, .85, .45); }
  82%, 100% { transform: translateX(-1200px); }
}
.scene .wheel { transform-box: fill-box; transform-origin: center; animation: wheelRun 24s infinite; }
@keyframes wheelRun {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.15, .55, .3, 1); }
  26% { transform: rotate(-1430deg); }
  56% { transform: rotate(-1430deg); animation-timing-function: cubic-bezier(.6, 0, .85, .45); }
  82%, 100% { transform: rotate(-3460deg); }
}
.scene .door__l, .scene .door__r { transform-box: fill-box; animation: doorL 24s infinite; transform-origin: left center; }
.scene .door__r { animation-name: doorR; transform-origin: right center; }
@keyframes doorL { 0%, 29%, 51%, 100% { transform: scaleX(1); } 32%, 48% { transform: scaleX(.18); } }
@keyframes doorR { 0%, 29%, 51%, 100% { transform: scaleX(1); } 32%, 48% { transform: scaleX(.18); } }
.scene .ind { opacity: 0; animation: ind 24s infinite; }
@keyframes ind { 0%, 50% { opacity: 0; } 51%, 52.5% { opacity: 1; } 53%, 54.5% { opacity: 0; } 55%, 56.5% { opacity: 1; } 57%, 58.5% { opacity: 0; } 59%, 60.5% { opacity: 1; } 61%, 100% { opacity: 0; } }
.scene .bus__led { font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: .08em; fill: #FFB020; }
@media (prefers-reduced-motion: reduce) { .scene .bus, .scene .wheel, .scene .door__l, .scene .door__r, .scene .ind { animation: none; } .scene .bus { transform: translateX(360px); } }
/* labels stay readable when the bus passes behind them */
.scene .hot rect.pill { fill: rgba(255, 255, 255, .92); stroke: transparent; }
.scene .hot:hover rect.pill, .scene .hot:focus rect.pill { fill: var(--ink); stroke: var(--ink); }   /* white text on dark, as before */
/* tracker: browse England by region, then town */
.lbt__chip--region { background: var(--paper); }
.lbt__chip--region[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.lbt__view[data-view="start"] [data-cities-all] { max-height: 340px; overflow-y: auto; padding: 2px; }

/* ---------------------------------------------------------------- home hero: the departure board (22 Oct 2026)
   src/home.py board_hero(). Phones first: the copy, then a daylight shelter photo with a 3iS e-paper board over its
   lower half. The board lists 3iS's services as departures; static/js/hero.js counts the times down, inverts the
   row that is due and moves it to the end when it "leaves". Its times are aria-hidden; each row is a plain link.
   With reduced motion or no JS it is a still board. From 900px the photo and board sit beside the copy. */
.bh { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--hdr);
  background: radial-gradient(70% 55% at 92% 0%, rgba(255, 236, 170, .55), rgba(255, 236, 170, 0) 70%),
              linear-gradient(180deg, #DDEFF2 0%, #EAF4EF 48%, #F3F5F0 100%); }
.bh__in { display: grid; gap: 26px; padding-top: 18px; }
.bh__copy { min-width: 0; }
.bh__news { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 18px; background: rgba(255, 255, 255, .84);
  box-shadow: 0 0 0 1px rgba(11, 31, 23, .08), 0 10px 24px -16px rgba(11, 31, 23, .5); color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 550; line-height: 1.25; }
.bh__news-k { flex: none; align-self: stretch; display: grid; place-items: center; padding: 3px 10px; border-radius: 13px; background: var(--green); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .02em; }
.bh__news-t { display: grid; gap: 1px; }
.bh__news-s { font-size: .78rem; font-weight: 500; color: var(--ink-3); }
.bh__news .ic { flex: none; width: 15px; height: 15px; color: var(--lime-ink); transition: transform .25s var(--ease); }
.bh__news:hover .ic { transform: translateX(3px); }
.bh__h1 { margin: 18px 0 0; display: grid; gap: 12px; font-weight: inherit; }
.bh__kick { font: 750 .7rem/1.45 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--lime-ink); }
.bh__big { font-family: var(--display); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 750; font-size: clamp(2.25rem, 10.4vw, 5.4rem);
  line-height: .96; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.bh__big em { position: relative; z-index: 0; font-style: normal; color: var(--green); white-space: nowrap; }
.bh__big em::after { content: ""; position: absolute; z-index: -1; left: -.03em; right: -.05em; bottom: .1em; height: .26em; border-radius: .04em; background: var(--lime); transform-origin: left center; }
.bh__say { margin: 16px 0 0; font-size: 1.04rem; line-height: 1.5; color: var(--ink-2); max-width: 35em; text-wrap: pretty; }
.bh__say strong { color: var(--green); font-weight: 700; }
.bh__cta { display: flex; gap: 10px; margin-top: 20px; }
.bh__cta .btn { flex: 1 1 0; justify-content: center; min-height: 50px; padding-inline: .8em; white-space: nowrap; }
.bh__cta .btn--ghost { background: rgba(255, 255, 255, .65); }
.bh__cta .btn--ghost:hover { background: #fff; }
.bh :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* the photo and the board */
.bh__vis { position: relative; min-width: 0; }
.bh__photo { position: relative; aspect-ratio: 4 / 3.3; border-radius: 24px; overflow: hidden; background: var(--paper-2);
  box-shadow: 0 0 0 1px rgba(11, 31, 23, .06), 0 30px 60px -40px rgba(11, 31, 23, .55); }
.bh__photo picture, .bh__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.bh__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 31, 23, 0) 45%, rgba(11, 31, 23, .28) 100%); }
.bh__sun { position: absolute; z-index: 2; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: .55em; padding: .42em .9em .42em .6em; border-radius: 999px;
  background: rgba(255, 255, 255, .9); color: var(--ink); font: 700 .8rem/1.2 var(--body); box-shadow: 0 10px 24px -16px rgba(11, 31, 23, .6); }
.bh__batt { position: relative; flex: none; width: 1.6em; height: .82em; border: 1.5px solid var(--lime-ink); border-radius: 2px; }
.bh__batt::after { content: ""; position: absolute; right: -4px; top: 50%; width: 2px; height: .36em; transform: translateY(-50%); border-radius: 0 1px 1px 0; background: var(--lime-ink); }
.bh__batt b { position: absolute; inset: 1.5px; border-radius: 1px; background: var(--lime); transform-origin: left center; }

/* the display: a 3iS e-paper unit in its housing (the mono face is allowed inside display mock-ups only) */
.bh__board { position: relative; z-index: 2; margin: -34% 12px 0; padding: 8px; border-radius: 20px; background: #2A2F2C;
  box-shadow: 0 34px 56px -30px rgba(11, 31, 23, .85), inset 0 1px 0 rgba(255, 255, 255, .1); }
.bh__screen { border-radius: 12px; overflow: hidden; background: var(--epaper); color: #151816; }
.bh__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px 10px; border-bottom: 2px solid #151816; }
.bh__brand svg { display: block; height: 19px; width: auto; }
.bh__clock { font: 600 .95rem/1 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.bh__rows { list-style: none; margin: 0; padding: 0; }
.bh__rows li { max-height: 80px; border-bottom: 1px solid rgba(21, 24, 22, .2); overflow: hidden; }
.bh__rows a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 52px; padding: 0 14px;
  color: inherit; text-decoration: none; transition: background-color .2s; }
.bh__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #151816; color: var(--epaper); }
.bh__ic .ic { width: 17px; height: 17px; stroke-width: 1.8; }
.bh__t { font: 650 .98rem/1.2 var(--body); text-wrap: balance; padding-block: 8px; }
.bh__rows i { font: 600 .8rem/1 var(--mono); font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bh__rows a:hover, .bh__rows a:focus-visible { background: rgba(21, 24, 22, .07); }
.bh__rows a:hover .bh__t, .bh__rows a:focus-visible .bh__t { text-decoration: underline; text-underline-offset: .18em; }
.bh__rows a:focus-visible { outline-offset: -3px; }
.bh__rows .is-due a { background: #151816; color: var(--epaper); }
.bh__rows .is-due .bh__ic { background: var(--lime); color: #151816; }
.bh__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; color: #3E4641; text-decoration: none; font: 650 .86rem/1.2 var(--body); }
.bh__foot .ic { width: 18px; height: 18px; }
.bh__foot:hover { color: #151816; text-decoration: underline; text-underline-offset: .18em; }
.bh__facts { margin-top: 18px; padding-bottom: clamp(26px, 4vw, 44px); }

@media (prefers-reduced-motion: no-preference) {
  html.js .bh__kick, html.js .bh__say, html.js .bh__cta, html.js .bh__news { animation: bhRise .7s var(--ease) both; }
  html.js .bh__news { animation-delay: .05s; }
  html.js .bh__say { animation-delay: .18s; }
  html.js .bh__cta { animation-delay: .26s; }
  html.js .bh__big em::after { animation: bhMark .9s cubic-bezier(.6, 0, .2, 1) .45s both; }
  html.js .bh__photo { animation: bhPhoto 1.2s var(--ease) .1s both; }
  html.js .bh__board { animation: bhRise .8s var(--ease) .35s both; }
  html.js .bh__screen { animation: bhRefresh .7s steps(1, end) .9s both; }   /* e-paper: black, white, then the image */
  html.js .bh__sun { animation: bhRise .6s var(--ease) .7s both; }
  html.js .bh__batt b { animation: bhBatt 4s ease-in-out 1.2s infinite; }
  html.js .bh__rows li { transition: max-height .5s var(--ease), opacity .35s ease, border-color .35s; }
  html.js .bh__rows li.is-leaving { max-height: 0; opacity: 0; border-color: transparent; }
  html.js .bh__rows li.is-new { animation: bhIn .5s var(--ease) both; }
  html.js .bh__rows i.flip, html.js .bh__clock.flip { animation: bhFlip .45s steps(2, end); }
  html.js .bh.is-paused .bh__batt b { animation-play-state: paused; }
}
@keyframes bhRise { from { opacity: 0; transform: translateY(14px); } }
@keyframes bhMark { from { transform: scaleX(0); } }
@keyframes bhPhoto { from { opacity: 0; transform: scale(1.05); } }
@keyframes bhRefresh { 0% { filter: invert(1); } 33% { filter: brightness(1.6) contrast(.2); } 66%, 100% { filter: none; } }
@keyframes bhBatt { 0% { transform: scaleX(.12); } 70%, 100% { transform: none; } }
@keyframes bhIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes bhFlip { 0% { color: var(--epaper); background: #151816; } 100% { color: inherit; background: transparent; } }

@media (min-width: 600px) {
  .bh__photo { aspect-ratio: 16 / 10; }
  .bh__board { position: absolute; right: 18px; bottom: -26px; width: min(380px, 62%); margin: 0; }
  .bh__vis { margin-bottom: 26px; }
  .bh__cta .btn { flex: none; padding-inline: 1.3em; }
  .bh__big { font-size: clamp(2.8rem, 8vw, 4.4rem); }
}
@media (min-width: 900px) {
  .bh__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 4.5vw, 72px);
    min-height: clamp(560px, calc(100svh - var(--hdr) - 150px), 780px); padding-block: clamp(24px, 5vh, 56px) 8px; }
  .bh__h1 { margin-top: 26px; gap: 16px; }
  .bh__kick { font-size: .78rem; letter-spacing: .12em; }
  .bh__big { font-size: clamp(3rem, 1.2rem + 3.5vw, 5.4rem); }
  .bh__say { font-size: 1.12rem; margin-top: 20px; }
  .bh__cta { margin-top: 28px; gap: 12px; }
  .bh__vis { margin-bottom: 0; }
  .bh__photo { aspect-ratio: 5 / 5.6; max-height: calc(100svh - var(--hdr) - 120px); width: 100%; }
  .bh__board { right: auto; left: calc(-1 * clamp(18px, 2.25vw, 36px)); bottom: 24px; width: min(400px, 82%); }
  .bh__sun { top: 18px; right: 18px; font-size: .86rem; }
}
@media (min-width: 900px) and (max-width: 1180px) {
  .bh__photo { aspect-ratio: 4 / 5; }
  .bh__board { width: min(360px, 90%); }
}

/* ---------------------------------------------------------------- home hero: the living bus stop (15 Oct 2026)
   src/hero.py draws a daylight, solar-powered bus stop under 3iS's own sentence; static/js/hero.js adds the motion.
   The markup is the finished stop (bus at the flag, display on Due, light on), and that is what shows with JS off
   or with reduced motion. The intro below runs once, only under html.js with motion allowed, and always ends on
   that picture. The loops (.is-run) and the SMIL clock run only while hero.js says so: 74 s at most, paused off
   screen (.is-off) or when the visitor pauses (.is-paused). Labels over the drawing sit at --x/--y in its 1600 x 660 units (x/16 %, y/6.6 %). */
.ls { position: relative; scroll-margin-top: var(--hdr); }
.ls__band { --ls-h: max(calc(100svh - var(--hdr)), 640px); --ls-copy: 330px;
  position: relative; isolation: isolate; overflow: hidden; min-height: var(--ls-h);
  background: radial-gradient(46% 62% at 62% 6%, rgba(255, 240, 190, .55), rgba(255, 240, 190, 0) 70%),
              linear-gradient(180deg, #D3EAF1 0%, #E3F1F1 40%, #EEF5EE 72%, #F3F5F0 100%); }

/* the section header (since 22 Oct the drawing is the home page's second section, under .bh) */
.ls__copy { position: relative; z-index: 3; padding-top: clamp(28px, 6vh, 72px); pointer-events: none; }
.ls__copy-in { max-width: min(560px, 46vw); pointer-events: auto; }
.ls__h2 { margin: 12px 0 0; font-family: var(--display); font-variation-settings: "wdth" 118; font-weight: 650; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.5rem); line-height: 1.08; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.ls__lede { margin: 12px 0 0; font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.ls :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* the stage: pinned to the foot of the band, so the pavement meets the bottom edge. Its width is capped by the
   height left under the copy (--ls-copy), so the cycle hub and its label stay clear of the buttons. */
.ls__stage { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; margin-inline: auto;
  width: min(100%, 2000px, max(900px, calc((var(--ls-h) - var(--ls-copy)) * 4.25))); }
.ls__scene { position: relative; aspect-ratio: 1600 / 660; container-type: inline-size; }
.ls__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ls__svg text { font-family: var(--body); }
.ls .s-fascia { font-size: 12px; font-weight: 700; fill: #EDF4EF; letter-spacing: .02em; }
.ls .s-flag { font-size: 8.5px; font-weight: 800; fill: var(--green); letter-spacing: .06em; }
.ls .bus__led { font-family: var(--mono); font-size: 13px; font-weight: 600; fill: #FFB020; letter-spacing: .02em; }
.ls .van__t { font-size: 14px; font-weight: 700; fill: #fff; }
.ls .o__sh { fill: var(--ink); opacity: .09; }
.ls .lens { fill: #F1FFD2; }
.ls .glow { opacity: .9; }
.ls .cone { opacity: .85; }
.ls .pv__hit { fill: #FFE27A; opacity: 0; mix-blend-mode: screen; }
.ls .shaft { fill: none; stroke: #FFE07A; stroke-width: 9; stroke-linecap: round; opacity: .22; }
.ls .beam { fill: none; stroke: #F2B705; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 13; opacity: 0; }
.ls .flow { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 7; }
.ls .bp { opacity: 0; pointer-events: none; }
.ls .bp__lines path, .ls .bp__dim path { fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.ls .bp__dim path { stroke-width: 1.1; stroke-dasharray: 4 4; }
.ls .bp__tb rect, .ls .bp__tb path { fill: rgba(255, 255, 255, .7); stroke: var(--green); stroke-width: 1.2; }
.ls .bp__tb text { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; fill: var(--green); }
.ls .pins path { fill: none; stroke: var(--green); stroke-width: 1.4; stroke-dasharray: 2 3; opacity: .6; }
.ls .pin__dot { fill: var(--lime); stroke: #fff; stroke-width: 2; }
.ls .pin__ring { fill: none; stroke: var(--lime); stroke-width: 2; opacity: 0; }

/* labels on the drawing: the four services always, the other parts as dots that name themselves on hover/focus */
.ls__tag { position: absolute; z-index: 2; left: calc(var(--x) / 16 * 1%); top: calc(var(--y) / 6.6 * 1%); transform: translate(-50%, -100%);
  display: inline-flex; align-items: center; gap: .55em; padding: .32em .95em .32em .32em; border-radius: 999px; background: #fff; color: var(--ink);
  font: 650 clamp(12px, .96cqw, 15.5px)/1.2 var(--body); text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(11, 31, 23, .08), 0 12px 26px -14px rgba(11, 31, 23, .55); transition: background .2s, color .2s; }
.ls__tag--below { transform: translate(-50%, 0); }
.ls__n { flex: none; display: inline-grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: 999px; background: var(--lime); color: var(--ink); }
.ls__n .ic { width: 1.1em; height: 1.1em; stroke-width: 2; }
.ls__tag-t { display: grid; }
a.ls__tag:hover, a.ls__tag:focus-visible, .ls__rti:hover .ls__tag, .ls__rti:focus-visible .ls__tag { background: var(--green); color: #fff; }
/* the 3iS-M50's status under the Solar lighting label: the battery fills in daylight, then the light is on */
.ls__tag:has(.ls__state) { border-radius: 1.1em; padding-block: .4em; }
.ls__state { display: flex; align-items: center; gap: .45em; margin-top: .2em; font-size: .8em; font-weight: 600; color: var(--lime-ink); }
a.ls__tag:hover .ls__state, a.ls__tag:focus-visible .ls__state { color: var(--lime-2); }
.ls__batt { position: relative; flex: none; width: 1.6em; height: .82em; border: 1.5px solid currentColor; border-radius: 2px; }
.ls__batt::after { content: ""; position: absolute; right: -4px; top: 50%; width: 2px; height: .36em; transform: translateY(-50%); border-radius: 0 1px 1px 0; background: currentColor; }
.ls__batt b { position: absolute; inset: 1.5px; border-radius: 1px; background: var(--lime); transform-origin: left center; }
.ls__st { display: grid; }
.ls__st > span { grid-area: 1 / 1; }
.ls__st1 { opacity: 0; }
.ls__dot { position: absolute; z-index: 2; left: calc(var(--x) / 16 * 1%); top: calc(var(--y) / 6.6 * 1%); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 99px;
  background: var(--lime); box-shadow: 0 0 0 2px #fff, 0 0 10px 4px rgba(226, 250, 168, .95); transition: background .2s; }
.ls__dot::before { content: ""; position: absolute; inset: -13px; border-radius: 99px; }   /* a 37 px target */
.ls__dot::after { content: ""; position: absolute; inset: 0; border-radius: 99px; border: 2px solid var(--lime); opacity: 0; pointer-events: none; }
.ls__dot span { position: absolute; top: 50%; left: calc(100% + 10px); transform: translate(-4px, -50%); padding: .32em .85em; border-radius: 999px; background: var(--green); color: #fff;
  font: 650 clamp(12px, .9cqw, 14.5px)/1.2 var(--body); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  box-shadow: 0 12px 26px -14px rgba(11, 31, 23, .55); }
.ls__dot--l span { left: auto; right: calc(100% + 10px); transform: translate(4px, -50%); }
.ls__dot:hover, .ls__dot:focus-visible { z-index: 4; background: var(--green); }
.ls__dot:hover span, .ls__dot:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.ls__sunsign { position: absolute; z-index: 1; left: calc(1046 / 16 * 1%); top: calc(54 / 6.6 * 1%); display: inline-flex; align-items: center; gap: .55em;
  padding: .38em .9em .38em .45em; border-radius: 999px; background: rgba(255, 255, 255, .8); font: 700 clamp(11px, .86cqw, 14px)/1.2 var(--body); color: var(--ink); white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(11, 31, 23, .07); }
.ls__sunsign i { width: 1.15em; height: 1.15em; border-radius: 99px; background: #FFC93C; box-shadow: 0 0 0 .25em rgba(255, 201, 60, .3); }

/* the real-time display, magnified in clear sky above its totem (the leader is drawn in the SVG at x 1318) */
.ls__rti { position: absolute; z-index: 2; left: calc(1300 / 16 * 1%); bottom: calc((660 - 262) / 6.6 * 1%); width: max(calc(258 / 16 * 1%), 190px);
  display: flex; flex-direction: column; align-items: flex-start; gap: .6em; color: var(--ink); text-decoration: none; font-size: clamp(10.5px, .76cqw, 13px); }
.ls__rti .ls__tag { position: static; transform: none; font-size: clamp(12px, .96cqw, 15.5px); }
.ls__epd { display: block; width: 100%; padding: .6em; border-radius: 1.1em; background: #2A2F2C; box-shadow: 0 26px 40px -24px rgba(11, 31, 23, .7); }
.ls__epd > span { display: grid; grid-template-columns: 2.3em minmax(0, 1fr) auto; gap: .5em; align-items: baseline; padding: .5em .65em; background: var(--epaper); color: #151816;
  font-family: var(--mono); font-size: 1em; line-height: 1.25; border-bottom: 1px solid rgba(21, 24, 22, .22); }
.ls__epd > .ls__epd-top { display: flex; justify-content: space-between; align-items: baseline; border-radius: .3em .3em 0 0; padding-top: .75em; border-bottom: 1.5px solid #151816; }
.ls__epd-top b { font-family: var(--display); font-variation-settings: "wdth" 108; font-size: 1.3em; font-weight: 700; letter-spacing: -.01em; }
.ls__epd > span b { font-weight: 600; }
.ls__epd > span span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--body); font-size: 1.08em; font-weight: 550; }   /* destinations in the sans: "Railway Station" fits whole */
.ls__epd i { font-style: normal; font-weight: 600; text-align: right; }
.ls__epd > .ls__epd-note { display: block; border: 0; border-radius: 0 0 .3em .3em; font-size: .8em; color: #4A524D; padding-top: .45em; padding-bottom: .65em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls__row.is-due { background: #151816; color: var(--epaper); }

/* pause / play */
/* in clear sky at the top right, so it never covers the drawing */
.ls__pause { position: absolute; z-index: 4; top: clamp(14px, 2.4vh, 24px); right: max(var(--gutter), calc((100% - var(--max)) / 2)); width: 40px; height: 40px;
  display: grid; place-items: center; padding: 0; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .9); color: var(--ink); cursor: pointer;
  box-shadow: 0 10px 24px -16px rgba(11, 31, 23, .5); transition: background .2s, border-color .2s; }
.ls__pause:hover { background: #fff; border-color: var(--green); }
.ls__pause[hidden] { display: none; }
.ls__pause span { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.ls__pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }

/* phones only: every part of the stop as chips */
.ls__parts { display: none; }

/* facts under the hero */
.ls__facts { margin: clamp(18px, 2.4vw, 28px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ls__facts > div { padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.ls__facts dt { font-family: var(--display); font-variation-settings: "wdth" 122; font-weight: 650; font-size: clamp(1.45rem, 2.2vw, 2rem); letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.ls__facts dt small { font-family: var(--body); font-size: .5em; font-weight: 700; color: var(--lime-ink); margin-left: .12em; letter-spacing: 0; }
.ls__facts dd { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.4; }

/* pointing at a service lights it up in the drawing */
.ls .o, .ls .energy, .ls .traffic { transition: opacity .35s ease; }
.ls:has([data-k="shelter"]:is(:hover, :focus-visible)) .o:not(.o-shelter),
.ls:has([data-k="hub"]:is(:hover, :focus-visible)) .o:not(.o-hub),
.ls:has([data-k="rti"]:is(:hover, :focus-visible)) .o:not(.o-totem),
.ls:has([data-k="solar"]:is(:hover, :focus-visible)) .o:not(.o-shelter, .o-light, .o-totem, .o-bin, .o-hub),
.ls:has([data-k]:is(:hover, :focus-visible)) .traffic { opacity: .3; }
.ls:has([data-k="solar"]:is(:hover, :focus-visible)) .pv__hit { opacity: .55; }

/* ---- motion ---- */
@media (prefers-reduced-motion: no-preference) {
  /* hero.js sets .is-wait, then .is-go once the stage scrolls into view, so the intro plays where it is seen */
  html.js .ls.is-wait .ls__stage { opacity: 0; }
  html.js .ls.is-go .ls__stage { animation: lsFade .4s ease both; }
  /* 1. design: the stop is drawn as a plan, with its title block */
  html.js .ls.is-go .bp { animation: lsPlan 2.5s ease both; }
  html.js .ls.is-go .bp__lines path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lsDraw .6s cubic-bezier(.45, 0, .2, 1) calc(var(--d, 0s) * .45) both; }
  html.js .ls.is-go .bp__dim, html.js .ls.is-go .bp__tb { animation: lsFade .5s ease .4s both; }
  /* 2. supply and 3. install: each part drops in and lands; the street is there once the stop is */
  html.js .ls.is-go .o__in { animation: lsDrop .75s cubic-bezier(.2, .85, .3, 1.12) calc(.8s + var(--i) * .1s) both; }
  html.js .ls.is-go .o__sh { transform-box: fill-box; transform-origin: center; animation: lsLand .6s ease calc(1.05s + var(--i) * .1s) both; }
  html.js .ls.is-go .traffic { animation: lsFade .3s linear 1.9s both; }
  /* power on: one pulse of sunlight down each beam, then the lights, screens and status wake */
  html.js .ls.is-go .energy { animation: lsFade .8s ease 1.6s both; }
  html.js .ls.is-go .beam { animation: lsBeam 1.3s linear 1.7s 2 both; }
  html.js .ls.is-go .flow { animation: lsFade .6s ease 2.1s both; }
  html.js .ls.is-go .cone, html.js .ls.is-go .glow { animation: lsFade 1s ease 2.2s both; }
  html.js .ls.is-go .lens { animation: lsLensOn .8s ease 2.1s both; }
  html.js .ls.is-go .o-shelter .cone, html.js .ls.is-go .o-shelter .glow { animation-delay: 3.5s; }   /* the 3iS-M50 lights once its battery is charged */
  html.js .ls.is-go .o-shelter .lens { animation-delay: 3.4s; }
  html.js .ls.is-go .tot-screen { animation: lsWake .6s steps(3, end) 2s both; }
  html.js .ls.is-go .ls__rti { animation: lsPop .7s cubic-bezier(.2, .8, .25, 1.1) 2.1s both; }
  html.js .ls.is-go .pin--rti { animation: lsFade .5s ease 2.3s both; }
  html.js .ls.is-go .ls__sunsign { animation: lsPop .6s ease 1.7s both; }
  html.js .ls.is-go .ls__tag { animation: lsFade .5s ease .35s both; }
  html.js .ls.is-go .ls__tag[data-k="hub"] { animation-delay: .5s; }
  html.js .ls.is-go .ls__tag[data-k="solar"] { animation-delay: .65s; }
  html.js .ls.is-go .pins { animation: lsFade .5s ease .35s both; }
  html.js .ls.is-go .ls__dot { animation: lsFade .5s ease 2.6s both; }
  html.js .ls.is-go .ls__batt b { animation: lsBatt 1.8s ease-in-out 1.6s both; }
  html.js .ls.is-go .ls__st1 { animation: lsSt1 4.2s linear both; }
  html.js .ls.is-go .ls__st2 { animation: lsSt2 4.2s linear both; }
  /* while hero.js runs the street: power flows, panels catch the light, labels breathe, displays flip */
  html.js .ls.is-run .flow { animation: lsFade .6s ease 2.1s both, lsFlow .8s linear infinite; }
  html.js .ls.is-run .pv__hit { animation: lsPv 4s ease-in-out 1.9s infinite; }
  html.js .ls.is-run .pv--light .pv__hit { animation-delay: 2.9s; }
  html.js .ls.is-run .pv--totem .pv__hit { animation-delay: 3.4s; }
  html.js .ls.is-run .pv--bin .pv__hit { animation-delay: 3.9s; }
  html.js .ls.is-run .pv--hub .pv__hit { animation-delay: 4.4s; }
  html.js .ls.is-run .charge { animation: lsCharge 2.4s ease-in-out 2.8s infinite; }
  html.js .ls.is-run .pin__ring { transform-box: fill-box; transform-origin: center; animation: lsRing 2.6s ease-out 3s infinite; }
  html.js .ls.is-run .pin:nth-child(2) .pin__ring { animation-delay: 3.8s; }
  html.js .ls.is-run .pin:nth-child(3) .pin__ring { animation-delay: 4.6s; }
  html.js .ls.is-run .ls__dot::after { animation: lsRing 2.8s ease-out 3.2s infinite; }
  html.js .ls.is-run .ls__dot:nth-of-type(2n)::after { animation-delay: 4.6s; }
  html.js .ls__row.flip i { animation: lsFlip .5s steps(2, end); }
  html.js .ls.is-off .pv__hit, html.js .ls.is-off .charge, html.js .ls.is-off .pin__ring, html.js .ls.is-off .ls__dot::after,
  html.js .ls.is-off .flow { animation-play-state: running, paused; }   /* the intro fade finishes, the flow holds */
  html.js .ls.is-paused *, html.js .ls.is-paused *::before, html.js .ls.is-paused *::after { animation-play-state: paused !important; }
}
@keyframes lsPlan { 0% { opacity: 0; } 8%, 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lsDraw { to { stroke-dashoffset: 0; } }
@keyframes lsFade { from { opacity: 0; } }
@keyframes lsMark { 0% { transform: scaleX(0); opacity: 1; } 30%, 70% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes lsPulse { 0%, 100% { transform: none; opacity: 0; } 50% { transform: none; opacity: 1; } }
@keyframes lsDrop { 0% { opacity: 0; transform: translateY(-54px); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes lsLand { 0% { opacity: 0; transform: scaleX(.3); } 100% { opacity: .09; transform: none; } }
@keyframes lsBeam { 0% { opacity: 0; stroke-dashoffset: 0; } 20%, 70% { opacity: .95; } 100% { opacity: 0; stroke-dashoffset: -52; } }
@keyframes lsFlow { to { stroke-dashoffset: -24; } }
@keyframes lsPv { 0%, 55%, 100% { opacity: 0; } 22% { opacity: .62; } }
@keyframes lsLensOn { from { fill: #B9C4BE; } }
@keyframes lsCharge { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes lsWake { 0% { fill: #151816; } 50% { fill: #9DA59F; } 100% { fill: #E4E7E0; } }
@keyframes lsPop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes lsRing { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3); opacity: 0; } }
@keyframes lsFlip { 0% { color: var(--epaper); background: #151816; } 100% { color: inherit; background: transparent; } }
@keyframes lsBatt { 0% { transform: scaleX(.08); } 100% { transform: none; } }
@keyframes lsSt1 { 0%, 9% { opacity: 0; } 13%, 82% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes lsSt2 { 0%, 84% { opacity: 0; } 89%, 100% { opacity: 1; } }

/* narrower desktops and tablets: a slimmer copy column, so more room for the copy above the drawing */
@media (max-width: 1180px) and (min-width: 761px) {
  .ls__band { --ls-copy: 360px; }
  .ls__copy-in { max-width: min(560px, 56vw); }
}
@media (max-width: 900px) { .bh__news-s { display: none; } }

/* phones, and tablets held upright: a close crop of the stop (flag to display), then every part as a
   chip. The crop is 790 x 650 drawing units, so its height fills an upright tablet's fold. */
@media (max-width: 760px), (max-width: 1080px) and (orientation: portrait) {
  .ls__band { min-height: 0; }
  .ls__stage { position: relative; width: 100%; aspect-ratio: 790 / 650; overflow: hidden; margin-top: 2px; }
  .ls__scene { position: absolute; width: calc(1600 / 790 * 100%); left: calc(-584 / 790 * 100%); bottom: 0; }
  .ls__rti, .ls__tag[data-k="hub"], .ls__dot { display: none; }
  .ls .ls-vanlane { transform: translateX(-70px); }   /* the van parks out of the crop instead of peeking in */
  .ls__pause { top: auto; right: auto; left: 12px; bottom: calc(100vw * 650 / 790 - 48px); }   /* sky, top left of the crop */
  .ls__parts { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px var(--gutter) 18px; background: linear-gradient(#E9ECE4, #fff); }
  .ls__parts .chip { font-size: .82rem; padding: .4em .8em; }
}
@media (max-width: 760px) {
  .ls__copy { padding-top: 36px; padding-bottom: 14px; }
  .ls__copy-in { max-width: none; }
  .ls__lede { font-size: 1rem; }
  .ls__tag { font-size: 12px; }
  .ls__sunsign { font-size: 11px; }
  .ls__pause { width: 36px; height: 36px; }
  .ls__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
  .ls__facts > div { padding: 12px 14px; }
}