/* Velomar · page 09 */
@font-face { font-family: "Michroma"; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/velomar__fonts-michroma.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Red Hat Display"; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/velomar__fonts-red-hat-display.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Major Mono Display"; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/velomar__fonts-major-mono-display.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --volt: #CC00FF;     /* c1 · hero + footer field */
  --charge: #11D4A7;   /* c2 · spec field, trim, highlights */
  --ultra: #1118D4;    /* c3 · range field, CTAs */
  --night: #220066;    /* c4 · loader, exploded panel, modes field */
  --white: #FFFFFF;
  --black: #000000;
  --w60: rgba(255, 255, 255, .6);
  --w25: rgba(255, 255, 255, .25);
  --w12: rgba(255, 255, 255, .12);
  --k60: rgba(0, 0, 0, .6);
  --k20: rgba(0, 0, 0, .2);
  --f-title: "Michroma", "Arial Black", sans-serif;
  --f-ui: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Major Mono Display", "Courier New", monospace;
  --gut: clamp(16px, 2.6vw, 40px);
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--night); color: var(--black); font-family: var(--f-ui); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.is-gated { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 2px solid var(--charge); outline-offset: 3px; }

.label { font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em; text-transform: lowercase; line-height: 1.3; -webkit-text-stroke: .45px currentColor; }
.ln { display: block; overflow: hidden; padding-bottom: .06em; }
.ln > span { display: block; will-change: transform; }

.btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 26px; background: var(--ultra); color: var(--white); font-weight: 600; font-size: 16px; letter-spacing: .01em; transition: background .3s, color .3s, transform .3s; white-space: nowrap; }
.btn:hover { background: var(--black); }
.btn--sm { height: 38px; padding: 0 18px; font-size: 14px; }
.btn--green { background: var(--charge); color: var(--black); }
.btn--green:hover { background: var(--white); }
.btn--dark { background: var(--black); color: var(--white); }
.btn--dark:hover { background: var(--ultra); }
.link { font-weight: 600; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }

.mark { width: 34px; height: 22px; fill: currentColor; }
.mark .mark__cut { fill: var(--charge); }

/* ---------- 0 · gate ---------- */
.gate { position: fixed; inset: 0; z-index: 100; background: var(--night); color: var(--white); display: grid; place-items: center; }
.gate.is-done { pointer-events: none; }
.gate__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.gate__inner { position: relative; text-align: center; width: min(440px, 80vw); display: grid; justify-items: center; }
.gate__mark { width: 62px; height: 40px; color: var(--white); }
.gate__word { font-family: var(--f-title); font-size: 15px; letter-spacing: .12em; margin-top: 12px; }
.gate__status { margin-top: 56px; display: grid; justify-items: center; gap: 12px; color: var(--charge); }
.gate__bar { width: 72px; height: 3px; background: var(--w12); border-radius: 2px; overflow: hidden; }
.gate__bar i { display: block; height: 100%; width: 100%; background: var(--charge); transform-origin: 0 50%; transform: scaleX(0); }
.gate__choice { display: none; margin-top: 44px; justify-items: center; }
.gate__title { font-family: var(--f-title); font-weight: 400; font-size: 24px; line-height: 1.25; color: var(--charge); letter-spacing: .02em; }
.gate__choice p { margin-top: 12px; font-size: 16px; color: var(--white); max-width: 30ch; }
.btn--hum { margin-top: 30px; background: var(--charge); color: var(--black); font-family: var(--f-mono); font-weight: 400; font-size: 14px; -webkit-text-stroke: .4px currentColor; padding: 0 22px 0 8px; }
.btn--hum:hover { background: var(--white); color: var(--black); }
.btn__dot { width: 36px; height: 36px; border-radius: 50%; background: var(--night); position: relative; }
.btn__dot::before, .btn__dot::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--charge); left: 11px; top: 15px; box-shadow: 9px -5px 0 var(--volt), 9px 6px 0 var(--charge); }
.btn__dot::after { display: none; }
.gate__quiet { margin-top: 20px; font-family: var(--f-mono); font-size: 14px; letter-spacing: .06em; color: var(--white); -webkit-text-stroke: .4px currentColor; text-decoration: underline; text-underline-offset: 5px; }
.gate__quiet:hover { color: var(--charge); }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gut); color: var(--black); transition: color .4s; }
.nav[data-theme="dark"] { color: var(--white); }
.nav { transition: color .4s, background-color .4s; }
.nav[data-bg="charge"] { background: var(--charge); }
.nav[data-bg="ultra"] { background: var(--ultra); }
.nav[data-bg="white"] { background: var(--white); }
.nav[data-bg="volt"] { background: var(--volt); }
.nav[data-bg="night"] { background: var(--night); }
.nav[data-bg="ultra"] .btn--sm { background: var(--white); color: var(--black); }
.nav__brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-title); font-size: 13px; letter-spacing: .12em; }
.nav__brand .mark { width: 30px; height: 19px; }
.nav__links { display: flex; gap: clamp(18px, 2.6vw, 40px); position: absolute; left: 50%; transform: translateX(-50%); }
.nav__links a { display: block; overflow: hidden; font-size: 15px; font-weight: 500; }
.nav__links a span { display: block; }
.nav__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav__right { display: flex; align-items: center; gap: 18px; }
.soc { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 13px; -webkit-text-stroke: .35px currentColor; }
.soc__cell { width: 30px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; padding: 1.5px; position: relative; }
.soc__cell::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: currentColor; border-radius: 0 1px 1px 0; }
.soc__cell i { display: block; height: 100%; width: 100%; background: currentColor; transform-origin: 0 50%; }
.soc__num { min-width: 4ch; }
.nav__hum { font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em; -webkit-text-stroke: .35px currentColor; }
.nav__hum[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 1 · machine ---------- */
.machine { position: relative; background: var(--volt); }
.machine__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.machine__panel { position: absolute; inset: 0; background: var(--night); clip-path: inset(100% 0 0 0); }
.machine__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.machine__scan { position: absolute; left: 0; right: 0; height: 1px; background: var(--charge); opacity: 0; pointer-events: none; }
.hero { position: absolute; left: var(--gut); top: 0; bottom: 0; width: min(52vw, 760px); display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav-h); }
.hero__eyebrow { margin-bottom: 26px; }
.hero__title { font-family: var(--f-title); font-weight: 400; font-size: clamp(34px, 5.1vw, 92px); line-height: 1.04; letter-spacing: -.02em; color: var(--white); }
.hero__copy { margin-top: 30px; max-width: 34em; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; }
.hero__cta { margin-top: 34px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero__stats { margin-top: 56px; display: flex; gap: clamp(22px, 3.4vw, 54px); }
.hero__stats dd { font-family: var(--f-title); font-size: clamp(16px, 1.45vw, 22px); margin-top: 6px; }
.explode { position: absolute; left: var(--gut); top: 0; width: min(36vw, 520px); color: var(--white); will-change: transform; }
.explode__item { padding: 0 0 18vh; opacity: .4; transition: opacity .45s; }
.explode__item.is-on { opacity: 1; }
.explode__item .label { color: var(--charge); margin-bottom: 14px; }
.explode__item h3 { font-family: var(--f-title); font-weight: 400; font-size: clamp(20px, 1.9vw, 32px); line-height: 1.22; letter-spacing: -.01em; }
.explode__item p:last-child { margin-top: 16px; font-size: 16px; line-height: 1.55; max-width: 32em; color: var(--white); }
.machine__cue { position: absolute; right: var(--gut); bottom: 28px; }

/* ---------- 2 · spec ---------- */
.spec { background: var(--charge); padding: 18vh var(--gut) 10vh; position: relative; }
.spec__head { margin-left: 22vw; margin-bottom: 12vh; }
.spec__head .label { margin-bottom: 22px; }
.spec__title { font-family: var(--f-title); font-weight: 400; font-size: clamp(28px, 4vw, 70px); line-height: 1.08; letter-spacing: -.02em; }
.spec__grid { display: grid; grid-template-columns: 18vw 1fr; gap: 4vw; }
.spec__idx { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; display: grid; gap: 18px; }
.idx { display: grid; gap: 8px; }
.idx__track { display: block; height: 2px; background: var(--k20); position: relative; }
.idx__track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--black); }
.block { padding-bottom: 16vh; }
.block__st { font-weight: 300; font-size: clamp(26px, 3.6vw, 62px); line-height: 1.08; letter-spacing: -.025em; max-width: 18em; }
.block__body { margin-top: 6vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4vw; align-items: start; }
.block__p { font-size: clamp(16px, 1.15vw, 18px); max-width: 30em; }
.rows { margin-top: 36px; }
.row { position: relative; display: flex; justify-content: space-between; gap: 18px; padding: 15px 0 13px; overflow: hidden; }
.row .rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--black); transform-origin: 0 50%; }
.row dt span, .row dd span { display: block; }
.row dt { font-family: var(--f-mono); font-size: 13px; letter-spacing: .04em; text-transform: lowercase; padding-top: 3px; -webkit-text-stroke: .45px currentColor; }
.row dd { font-weight: 600; font-size: 17px; text-align: right; }
.block__fig { aspect-ratio: 4 / 3; overflow: hidden; background: var(--night); }
.block__fig img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 3 · range ---------- */
.range { background: var(--ultra); color: var(--white); display: grid; grid-template-columns: minmax(0, 34vw) minmax(0, 1fr); gap: 4vw; padding: 16vh var(--gut) 14vh; align-items: center; }
.range__ctrl .label { color: var(--charge); }
.range__title { margin-top: 20px; font-family: var(--f-title); font-weight: 400; font-size: clamp(30px, 3.9vw, 66px); line-height: 1.08; letter-spacing: -.02em; }
.range__copy { margin-top: 22px; max-width: 32em; }
.field { margin-top: 30px; }
.field__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.field output { font-weight: 600; font-size: 17px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; margin: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--charge) var(--p, 25%), var(--w25) var(--p, 25%)); border-radius: 2px; }
input[type="range"]::-moz-range-track { height: 3px; background: var(--w25); border-radius: 2px; }
input[type="range"]::-moz-range-progress { height: 3px; background: var(--charge); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9.5px; border-radius: 50%; background: var(--white); border: 5px solid var(--charge); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 5px solid var(--charge); }
.modes-switch { display: inline-grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--w25); border-radius: 22px; padding: 3px; }
.modes-switch button { height: 36px; padding: 0 22px; border-radius: 18px; font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em; transition: background .3s, color .3s; }
.modes-switch button[aria-checked="true"] { background: var(--charge); color: var(--black); }
.readout { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--w25); }
.readout__big { display: flex; align-items: baseline; gap: 14px; }
.readout__big span { font-family: var(--f-title); font-size: clamp(54px, 6.4vw, 110px); line-height: 1; letter-spacing: -.03em; }
.readout__big small { font-family: var(--f-mono); font-size: 13px; color: var(--charge); }
.readout__sub { margin-top: 12px; color: var(--white); max-width: 34em; }
.range__map { position: relative; }
#cityMap { width: 100%; height: auto; display: block; overflow: hidden; }
#mapBlocks rect { fill: var(--w12); }
#mapBlocks rect.park { fill: rgba(17, 212, 167, .28); }
#mapRiver { fill: none; stroke: rgba(17, 212, 167, .45); stroke-width: 34; stroke-linecap: round; }
#mapLabels text { font-family: var(--f-mono); font-size: 15px; fill: var(--white); stroke: var(--white); stroke-width: .4px; letter-spacing: .06em; }
#routeGhost { fill: none; stroke: var(--w25); stroke-width: 2; stroke-dasharray: 3 7; }
#routeLine { fill: none; stroke: var(--charge); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
#routeTicks circle { fill: var(--ultra); stroke: var(--w25); stroke-width: 2; transition: stroke .3s, fill .3s; }
#routeTicks circle.on { fill: var(--white); stroke: var(--white); }
#routeTicks rect.lock { fill: var(--night); stroke: var(--white); stroke-width: 1.5; }
#mapHome circle { fill: var(--white); }
#mapHome circle.ring { fill: none; stroke: var(--white); stroke-width: 2; }
.end__dot { fill: var(--volt); stroke: var(--white); stroke-width: 3; }
.end__pulse { fill: none; stroke: var(--volt); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.end__tag rect { fill: var(--white); }
.end__tag text { font-family: var(--f-ui); font-weight: 700; font-size: 14px; fill: var(--black); text-anchor: middle; }
.range__legend { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--white); }
.lg { display: inline-block; width: 12px; height: 12px; margin-right: -6px; vertical-align: middle; }
.lg--home { border-radius: 50%; background: var(--white); }
.lg--line { width: 18px; height: 4px; background: var(--charge); border-radius: 2px; }
.lg--tick { border-radius: 50%; border: 2px solid var(--white); }
.lg--lock { background: var(--night); border: 1.5px solid var(--white); }

/* ---------- 4 · modes ---------- */
.modes { background: var(--night); color: var(--white); position: relative; }
.modes__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.bubbles { position: absolute; inset: 0; }
.bub { position: absolute; left: var(--x); top: var(--y); will-change: transform; animation: drift var(--dur, 7s) ease-in-out var(--del, 0s) infinite alternate; }
@keyframes drift { from { translate: 0 -12px; } to { translate: 0 12px; } }
.is-static .bub { animation: none; }
.bub--img, .bub--disc { width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; }
.bub--img img { width: 100%; height: 100%; object-fit: cover; }
.bub--disc { display: grid; place-items: center; }
.bub--disc svg { width: 32%; height: 32%; fill: none; stroke: var(--black); stroke-width: 2; }
.bub--charge { background: var(--charge); }
.bub--volt { background: var(--volt); }
.bub--ultra { background: var(--ultra); }
.bub--ultra svg { stroke: var(--white); }
.bub--pill { font-family: var(--f-mono); font-size: 13px; -webkit-text-stroke: .4px currentColor; letter-spacing: .05em; padding: 8px 16px; border-radius: 20px; background: var(--w12); color: var(--white); white-space: nowrap; }
.bub--pillc { background: var(--charge); color: var(--black); }
.bub--pillv { background: var(--volt); color: var(--black); }
.bub--stack { width: 13vw; aspect-ratio: 4 / 5; }
.bub--stack img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.bub--stack::before, .bub--stack::after { content: ""; position: absolute; inset: 0; transform: translate(-10px, 10px); background: var(--volt); }
.bub--stack::after { transform: translate(-20px, 20px); background: var(--charge); z-index: -1; }
.bub--stack::before { z-index: 0; }
.bub--stack img { z-index: 1; }
.bub--note { width: 15vw; min-width: 200px; padding: 14px 16px; background: var(--ultra); font-size: 14px; line-height: 1.4; }
.modes__title { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; pointer-events: none; }
.modes__title h2 { font-family: var(--f-title); font-weight: 400; font-size: clamp(26px, 4.4vw, 76px); line-height: 1.12; letter-spacing: -.02em; }
.modes__eyebrow { color: var(--charge); margin-bottom: 26px; }
.mt { display: block; white-space: nowrap; }
.mt--2 { display: flex; justify-content: center; gap: .5em; }
.mt__w { display: inline-block; will-change: transform; }
.modes__cta { margin-top: 40px; pointer-events: auto; }
.modes__photo { position: absolute; left: 23vw; top: 23vh; width: 54vw; height: 54vh; margin: 0; overflow: hidden; clip-path: inset(50% 50% 50% 50%); background: var(--ultra); }
.modes__photo img { width: 100%; height: 100%; object-fit: cover; }
.modes__photo figcaption { position: absolute; left: 14px; bottom: 12px; color: var(--white); opacity: 0; }
.mosaic { position: absolute; inset: 0; pointer-events: none; }
.tile { position: absolute; margin: 0; overflow: hidden; opacity: 0; }
.tile img { width: 100%; height: calc(100% - 26px); object-fit: cover; }
.tile figcaption { margin-top: 8px; color: var(--white); }
.tile--l1 { left: var(--gut); top: 12vh; width: 15vw; height: 26vh; }
.tile--l2 { left: var(--gut); top: 41vh; width: 15vw; height: 26vh; }
.tile--r1 { right: var(--gut); top: 12vh; width: 15vw; height: 26vh; }
.tile--r2 { right: var(--gut); top: 41vh; width: 15vw; height: 26vh; }
.tile--b1 { left: 20vw; top: 71vh; width: 24vw; height: 25vh; }
.tile--b2 { right: 20vw; top: 71vh; width: 33vw; height: 25vh; }
.tile--txt { background: var(--volt); color: var(--black); padding: 18px 20px; display: flex; align-items: flex-end; }
.tile--txt p { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.35; }
.tile--txt b { font-family: var(--f-mono); font-weight: 400; color: var(--black); -webkit-text-stroke: .5px currentColor; }

/* ---------- 5 · colours ---------- */
.colours { background: var(--white); color: var(--black); padding: 16vh 0 0; }
.colours__head { padding: 0 var(--gut); display: grid; grid-template-columns: 1fr minmax(0, 30vw); gap: 4vw; align-items: end; margin-bottom: 8vh; }
.colours__title { font-family: var(--f-title); font-weight: 400; font-size: clamp(28px, 4.2vw, 72px); line-height: 1.1; letter-spacing: -.02em; }
.wipe { display: block; overflow: hidden; padding-bottom: .08em; }
.wipe__in { display: block; transform-origin: 0 100%; will-change: transform; }
.colours__head p { max-width: 30em; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); }
.card { border-right: 1px solid var(--black); }
.card:last-child { border-right: 0; }
.card__link { display: block; }
.card__media { position: relative; height: clamp(260px, 26.1vw, 460px); background: var(--card); overflow: hidden; }
.card__img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.card__hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s; }
.card__add { position: absolute; right: 14px; bottom: 14px; height: 38px; padding: 0 16px; border-radius: 19px; display: inline-flex; align-items: center; background: var(--black); color: var(--white); font-family: var(--f-mono); font-size: 12px; letter-spacing: .05em; transform: translateY(70px); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.card__badge { position: absolute; left: 14px; top: 14px; z-index: 2; background: var(--white); padding: 6px 10px; border-radius: 14px; }
.card:hover .card__hover, .card.is-touch .card__hover { opacity: 1; }
.card:hover .card__add, .card.is-touch .card__add { transform: none; }
.card:hover .card__img { transform: scale(1.04); }
.card__meta { padding: 16px 18px 22px; border-top: 1px solid var(--black); }
.card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.card__row h3 { font-family: var(--f-title); font-weight: 400; font-size: 17px; letter-spacing: .02em; }
.card__row p { font-weight: 600; }
.ticker { background: var(--charge); overflow: hidden; border-bottom: 1px solid var(--black); }
.ticker__track { display: flex; width: max-content; }
.ticker__track span { font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em; padding: 16px 28px; white-space: nowrap; display: flex; align-items: center; gap: 56px; }
.ticker__track span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--black); margin-left: 28px; }

/* ---------- 6 · footer ---------- */
.ride { background: var(--volt); color: var(--black); padding: 18vh var(--gut) 28px; overflow: hidden; }
.ride__top { display: grid; grid-template-columns: 1.3fr minmax(0, 1fr); gap: 4vw; align-items: end; }
.ride__title { font-family: var(--f-title); font-weight: 400; font-size: clamp(32px, 5.6vw, 100px); line-height: 1.04; letter-spacing: -.02em; color: var(--white); }
.cov { position: relative; display: table; }
.cov i { position: absolute; inset: 0 -.1em .02em 0; background: var(--black); transform-origin: 100% 50%; }
.ride__cta p { max-width: 30em; font-size: 18px; }
.ride__cta .btn { margin-top: 26px; }
.ride__mail { display: inline-block; margin-left: 22px; font-weight: 600; border-bottom: 1.5px solid currentColor; }
.ride__svc { margin-top: 14vh; display: grid; grid-template-columns: 18vw 1fr; gap: 4vw; border-top: 1px solid var(--black); padding-top: 22px; }
.svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 3vw; font-size: clamp(16px, 1.4vw, 22px); font-weight: 500; }
.svc .ch { display: inline; }
.dotword { width: 100%; height: auto; display: block; margin-top: 12vh; overflow: visible; }
.dotword circle { fill: var(--black); }
.dotword circle.c { fill: var(--white); }
.ride__base { margin-top: 6vh; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; font-size: 14px; border-top: 1px solid var(--black); padding-top: 18px; }
.ride__base .label { margin-left: auto; }
.ride__base a:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .nav__links { display: none; }
  .hero { width: auto; right: var(--gut); }
  .spec__head { margin-left: 0; }
  .spec__grid { grid-template-columns: 1fr; }
  .spec__idx { grid-template-columns: repeat(4, 1fr); gap: 10px; top: var(--nav-h); background: var(--charge); padding: 10px 0; z-index: 2; }
  .block__body { grid-template-columns: 1fr; }
  .range { grid-template-columns: 1fr; }
  .range__map { order: -1; }
  .colours__head { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card:nth-child(2) { border-right: 0; }
  .card:nth-child(-n+2) { border-bottom: 1px solid var(--black); }
  .card__media { height: 46vw; }
  .ride__top, .ride__svc { grid-template-columns: 1fr; }
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  :root { --nav-h: 56px; }
  .soc__label, .nav__hum { display: none; }
  .nav__right { gap: 12px; }
  .hero { justify-content: flex-end; padding-bottom: 6vh; }
  .hero__eyebrow { margin-bottom: 16px; }
  .hero__copy { margin-top: 16px; font-size: 15px; }
  .hero__cta { margin-top: 20px; gap: 18px; }
  .hero__stats { margin-top: 24px; }
  .explode { width: auto; right: var(--gut); }
  .explode__item { padding-bottom: 12vh; }
  .explode__item h3 { font-size: 20px; }
  .explode__item p:last-child { font-size: 15px; }
  .machine__cue { display: none; }
  .spec { padding-top: 12vh; }
  .block__st { font-size: 28px; }
  .bub:nth-child(5), .bub:nth-child(6), .bub:nth-child(8), .bub:nth-child(10), .bub:nth-child(11), .bub:nth-child(12) { display: none; }
  .bub:nth-child(1) { --x: 5vw; --y: 11vh; --s: 26vw; }
  .bub:nth-child(2) { --x: 40vw; --y: 15vh; --s: 14vw; }
  .bub:nth-child(3) { --x: 62vw; --y: 8vh; --s: 32vw; }
  .bub:nth-child(4) { --x: 74vw; --y: 71vh; --s: 18vw; }
  .bub:nth-child(7) { --x: 5vw; --y: 72vh; --s: 30vw; }
  .bub:nth-child(9) { --x: 42vw; --y: 80vh; --s: 22vw; }
  .modes__photo { left: 7vw; width: 86vw; top: 30vh; height: 40vh; }
  .modes__title h2 { font-size: 7.4vw; }
  .mosaic { position: relative; inset: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 var(--gut) 12vh; pointer-events: auto; }
  .tile { position: relative; left: auto !important; right: auto !important; top: auto !important; width: auto !important; height: auto !important; opacity: 1; }
  .tile img { height: auto; aspect-ratio: 1; }
  .tile--b2 { grid-column: 1 / -1; }
  .colours { padding-top: 12vh; }
  .card__media { height: 58vw; }
  .card__meta { padding: 12px 12px 16px; }
  .card__row { flex-direction: column; gap: 2px; }
  .card__row h3 { font-size: 14px; }
  .card .label { font-size: 12px; }
  .ride { padding-top: 12vh; }
  .ride__mail { margin: 18px 0 0; display: table; }
  .ride__base .label { margin-left: 0; }
}

@media (max-width: 767px) { .explode__item.is-past { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bub { animation: none; }
  .btn, .nav, .explode__item, .card__img, .card__hover, .card__add, .modes-switch button { transition-duration: .01ms; }
}

/* WordPress / Elementor compatibility: the active WordPress theme styles <body> and every heading as well
   (Twenty Twenty-Five sets body weight 300 and -0.1px tracking, h1-h6 weight 400, -0.1px tracking,
   line-height 1.125 and preset sizes, and text-wrap: pretty on headings, paragraphs and captions). This page's class rules set size, weight and line-height where it
   cares and rely on browser defaults for the rest, so restore those defaults at element level: every class
   rule above still wins (0,1,0 beats 0,0,3). Elementor's own element resets (img, a, video/iframe,
   figure) outrank single-class rules, so every source rule that sets those properties on those elements is
   repeated below one specificity step higher, in source order. The page's Elementor container is also held at zero
   padding and gap (the kit default applies when the page's generated Elementor CSS is missing). The container's display is held at block as well: the generated post CSS makes it a wrapping flex column,
   which can squeeze a section shorter than its content. Inert in a plain browser. */
html body { font-weight: 400; letter-spacing: normal; }
html body :is(h1, h2, h3, h4, h5, h6) { font-weight: bold; letter-spacing: normal; line-height: inherit; }
html body h1 { font-size: 2em; }
html body h2 { font-size: 1.5em; }
html body h3 { font-size: 1.17em; }
html body :is(h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p) { text-wrap: wrap; }
html body .elementor .e-con.e-parent:has(> .elementor-element [class^="uichemy-"]) { --display: block; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --row-gap: 0px; --column-gap: 0px; --gap: 0px 0px; }
.elementor.elementor img { max-width: 100%; }
.elementor.elementor a { text-decoration-line: none; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; }
.elementor.elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) figure { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }
.elementor.elementor :is(.block__fig img):is(img) { height: 100%; }
.elementor.elementor :is(.bub--img img):is(img) { height: 100%; }
.elementor.elementor :is(.bub--stack img):is(img) { height: 100%; }
.elementor.elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) :is(.modes__photo):is(figure) { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }
.elementor.elementor :is(.modes__photo img):is(img) { height: 100%; }
.elementor.elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) :is(.tile):is(figure) { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }
.elementor.elementor :is(.tile img):is(img) { height: calc(100% - 26px); }
.elementor.elementor :is(.card__img):is(img) { height: 84%; }
.elementor.elementor :is(.card__hover):is(img) { height: 100%; }
@media (max-width: 767px) { .elementor.elementor :is(.tile img):is(img) { height: auto; } }