/* EEV-BUILD: v10-2026-09-04 — search this string in the served file to confirm which build is live. */
/* Reset. The Next.js build got this from Tailwind's preflight; a WordPress theme
   has to bring its own, so only the parts this site actually relies on are here. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:root { --font-geist-sans: system-ui, -apple-system, sans-serif; --font-geist-mono: ui-monospace, SFMono-Regular, Menlo, monospace; }
body { -webkit-font-smoothing: antialiased; }

@font-face {
  font-family: "Castledown";
  src: url("../fonts/castledown-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Castledown";
  src: url("../fonts/castledown-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Castledown";
  src: url("../fonts/castledown-heavy.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Two brand colours, one value each. Every blue is --blue and every dark
     surface or dark text is --navy; the aliases below point at the same value so
     older rules stay consistent. --sky, --ice and --paper are separate tints, not
     variants of the blue. */
  --blue: #1964ff;
  --navy: #010219;
  --navy-2: #010219;
  --ink: #010219;
  --sky: #70c5ff;
  --ice: #d5eeff;
  --paper: #f7f9fc;
  --white: #fff;
  --muted: #5d6c82;
  --line: rgba(1, 2, 25, .15);
  --font-castledown: "Castledown", Arial, Helvetica, sans-serif;
  --motion-natural: cubic-bezier(.16, 1, .3, 1);
  --motion-balanced: cubic-bezier(.65, 0, .35, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 0; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-castledown); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.shell { width: min(1240px, calc(100% - 56px)); margin-inline: auto; }

/* Reversible scroll motion */
.motion-ready .scroll-reveal, .motion-ready .scroll-reveal-fade, .motion-ready .scroll-reveal-arc { opacity: 0; transition: opacity .82s var(--motion-natural), translate .82s var(--motion-natural), scale .82s var(--motion-natural); transition-delay: var(--reveal-delay, 0ms); }
.motion-ready .scroll-reveal { translate: 0 52px; scale: .975; }
.motion-ready .news-card.scroll-reveal { translate: 0 88px; scale: 1; transition: opacity .96s var(--motion-natural), translate .96s var(--motion-natural), scale .96s var(--motion-natural), transform .58s var(--motion-natural), box-shadow .58s var(--motion-natural); transition-delay: 0ms; }
.motion-ready .find-ev-card.scroll-reveal { transition: opacity .88s var(--motion-natural), translate .88s var(--motion-natural), scale .88s var(--motion-natural), transform .52s var(--motion-natural), box-shadow .52s var(--motion-natural); transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms; }
.motion-ready .scroll-reveal.is-in-view { opacity: 1; translate: 0 0; scale: 1; }
.motion-ready .scroll-reveal-fade.is-in-view { opacity: 1; }
.motion-ready .myths-heading.scroll-reveal-fade { opacity: 1; transform: none; scale: 1; }
.motion-ready .myths-heading.scroll-reveal-fade > p,
.motion-ready .myths-heading.scroll-reveal-fade > h2,
.motion-ready .myths-heading.scroll-reveal-fade > span { opacity: 0; transform: translateY(46px); transition: opacity .82s cubic-bezier(.16,1,.3,1), transform .82s cubic-bezier(.16,1,.3,1); }
.motion-ready .myths-heading.scroll-reveal-fade > h2 { transition-delay: 110ms; }
.motion-ready .myths-heading.scroll-reveal-fade > span { transition-delay: 220ms; }
.motion-ready .myths-heading.scroll-reveal-fade.is-reversing > span { transition-delay: 50ms; }
.motion-ready .myths-heading.scroll-reveal-fade.is-reversing > h2 { transition-delay: 160ms; }
.motion-ready .myths-heading.scroll-reveal-fade.is-reversing > p { transition-delay: 270ms; }
.motion-ready .myths-heading.scroll-reveal-fade.is-in-view > p,
.motion-ready .myths-heading.scroll-reveal-fade.is-in-view > h2,
.motion-ready .myths-heading.scroll-reveal-fade.is-in-view > span { opacity: 1; transform: translateY(0); }
.motion-ready .myths-carousel.scroll-reveal-fade { transform: translateY(104px); scale: 1; transition-duration: 1.05s; }
.motion-ready .myths-dots.scroll-reveal-fade { transform: translateY(42px); scale: 1; transition-duration: .88s; }
.motion-ready .myths-carousel.scroll-reveal-fade.is-in-view,
.motion-ready .myths-dots.scroll-reveal-fade.is-in-view { transform: translateY(0); scale: 1; }
.motion-ready .scroll-reveal-arc { translate: -50% 190px; scale: 1; transition-duration: 1.05s; transition-timing-function: cubic-bezier(.16,1,.3,1); }
.motion-ready .scroll-reveal-arc.is-in-view { opacity: 1; translate: -50% 0; scale: 1; }
.motion-ready .find-ev-blue-arc.scroll-reveal-arc.is-reversing { transition-duration: .82s; transition-timing-function: var(--motion-natural); }
.motion-ready .electric-answers-copy.scroll-reveal { translate: -58px 0; }
.motion-ready .evie-chat.scroll-reveal { translate: 58px 0; }
.motion-ready .electric-answers-copy.scroll-reveal.is-in-view, .motion-ready .evie-chat.scroll-reveal.is-in-view { translate: 0 0; }

.nav { position: fixed; z-index: 50; top: 30px; left: clamp(42px, 6.5vw, 88px); right: clamp(42px, 6.5vw, 88px); height: 52px; display: grid; grid-template-columns: 190px minmax(500px, 630px) 190px; align-items: center; justify-content: space-between; color: white; }
/* Light logo sits underneath; .brand-dark is the dark copy, clipped by JS to the
   slice of the logo currently sitting over a light section. See use-nav-split.ts. */
.site-brand { position: relative; display: block; width: 103px; height: 50px; }
.site-brand img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.brand-dark { position: absolute; inset: 0; pointer-events: none; -webkit-clip-path: inset(var(--split-top, 101%) 0 var(--split-bottom, 0px) 0); clip-path: inset(var(--split-top, 101%) 0 var(--split-bottom, 0px) 0); }
.brand-dark::before, .brand-dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; -webkit-mask: url("../img/electric-evidence-logo.svg") left center / contain no-repeat; mask: url("../img/electric-evidence-logo.svg") left center / contain no-repeat; }
.brand-dark::before { background: #010219; }
.brand-dark::after { background: #1964ff; -webkit-clip-path: inset(49% 66% 0 0); clip-path: inset(49% 66% 0 0); }
.brand-symbol { display: grid; place-items: center; width: 33px; height: 33px; background: var(--sky); color: var(--navy); border-radius: 10px 3px 10px 3px; font-size: 11px; letter-spacing: -.04em; }
.liquid-filter-defs { position: fixed; width: 0; height: 0; pointer-events: none; }
.nav-links { position: relative; isolation: isolate; height: 52px; padding: 0 27px; display: flex; align-items: center; justify-content: center; gap: clamp(21px, 2vw, 34px); border: 0; border-radius: 999px; background: rgba(0,0,0,.4); box-shadow: 0 12px 34px rgba(0,0,0,.14); backdrop-filter: url("#liquid-refraction") blur(2px) saturate(116%) contrast(110%); font-family: var(--font-castledown); font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.nav-links::before { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(100deg, rgba(255,255,255,.5) 0 7%, transparent 18% 68%, rgba(255,255,255,.2) 82% 91%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .72; pointer-events: none; }
.nav-links::after { content: ""; position: absolute; z-index: 0; inset: -10px -5px; border-radius: inherit; background: radial-gradient(ellipse 28% 185% at 12% 48%, rgba(255,255,255,.11) 0 14%, transparent 66%), radial-gradient(ellipse 36% 205% at 38% 54%, rgba(0,0,0,.2) 0 13%, transparent 68%), radial-gradient(ellipse 30% 190% at 67% 44%, rgba(255,255,255,.09) 0 12%, transparent 66%), radial-gradient(ellipse 34% 200% at 91% 55%, rgba(0,0,0,.19) 0 13%, transparent 69%); filter: blur(3px); opacity: .88; pointer-events: none; }
.nav-links a { position: relative; z-index: 2; transition: color .25s ease, text-shadow .25s ease; }
.nav-links a:hover, .nav-links a.active { color: #1964ff; text-shadow: 0 0 18px rgba(25,100,255,.38); }
.nav-on-light .nav-links { background: rgba(0,0,0,.2); }
.nav-on-light .nav-links a.active { text-shadow: 0 0 12px rgba(25,100,255,.58); }
.mobile-menu-button { display: none; }
/* Same two-layer treatment as the brand: both copies stack in one grid cell and
   the dark one is clipped to whatever sits over a light section. */
/* pointer-events was off while this was decoration. It is a link to olxgroup.com
   now, so it has to be clickable — and only over its own small box, which sits in
   the top-right corner and covers nothing else. */
.powered { position: relative; justify-self: end; display: grid; font-size: 12px; pointer-events: auto; transition: opacity .2s ease; }
.powered:hover { opacity: .78; }
.powered-layer { grid-area: 1 / 1; display: flex; align-items: center; gap: 9px; color: white; }
.powered-layer-dark { color: #010219; -webkit-clip-path: inset(var(--split-top, 101%) 0 var(--split-bottom, 0px) 0); clip-path: inset(var(--split-top, 101%) 0 var(--split-bottom, 0px) 0); }
.powered-mark { width: 46px; height: 21px; background: currentColor; -webkit-mask: url("../img/header-olx.png") center / contain no-repeat; mask: url("../img/header-olx.png") center / contain no-repeat; }
.olx-lockup strong { color: var(--navy); font-size: 18px; margin-left: 4px; letter-spacing: -.06em; }

.hero-story { height: 320svh; min-height: 2040px; }
.hero-sticky { position: sticky; top: 0; height: 100svh; min-height: 680px; overflow: hidden; background: #010219; }
.hero-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translateZ(0) scale(1.002); will-change: transform; backface-visibility: hidden; }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1,7,18,.42) 0%, rgba(2,10,25,.16) 38%, rgba(2,10,25,0) 58%); }
.hero-content { height: 100%; position: relative; z-index: 2; display: flex; align-items: center; padding-top: 38px; }
.hero-copy { width: min(540px, 47%); margin-top: 20px; }
.eyebrow, .section-kicker { font: 700 10px/1 var(--font-geist-mono), monospace; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { display: flex; gap: 9px; align-items: center; color: var(--sky); }
.eyebrow span { display: block; width: 28px; height: 2px; background: var(--sky); }
.hero-copy h1 { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--font-castledown); font-size: clamp(64px, 7.15vw, 96px); font-weight: 400; line-height: .885; letter-spacing: -.018em; margin: 0 0 25px; color: white; }
.hero-copy h1 b, .hero-copy h1 strong { color: #1964ff; font-weight: 900; }
.hero-copy .hero-supporting { margin: 0; max-width: 510px; color: #f7f7f7; font-size: clamp(18px, 1.68vw, 23px); line-height: 1.27; }
.primary-button { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 16px; height: 46px; padding: 0 22px; margin-top: 27px; background: transparent; color: white; border: 1px solid white; border-radius: 999px; font-size: 15px; font-weight: 700; transition: color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease; }
.primary-button::before { content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: inherit; background: #1964ff; transform: scaleX(0); transform-origin: left center; transition: transform .42s cubic-bezier(.22,1,.36,1); }
.primary-button:hover { color: white; border-color: #1964ff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(25,100,255,.34); }
.primary-button:hover::before { transform: scaleX(1); }
.primary-button .button-label { position: relative; top: -2px; display: flex; align-items: center; height: 18px; font-size: 15px; line-height: 1; }
.primary-button .button-arrow { position: relative; top: -3px; display: grid; place-items: center; width: 14px; height: 18px; font-size: 17px; line-height: 1; transform-origin: center; transition: transform .35s ease; }
.primary-button:hover .button-arrow { transform: scale(1.12); }
.story-progress { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.45); }.story-progress span { display: block; height: 100%; background: var(--blue); }

.proof-strip { background: var(--navy); color: white; }
.proof-inner { height: 85px; display: flex; gap: 20px; align-items: center; font-size: 12px; }
.proof-inner > span { color: #b6c9df; }.proof-inner strong { color: var(--sky); font-size: 15px; }.proof-line { height: 1px; flex: 1; background: rgba(255,255,255,.18); }

.facts-section { background: var(--navy-2); color: white; padding: 115px 0 125px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 50px; }
.section-kicker { color: #6683a9; margin: 0 0 25px; }
.section-head h2, .ask-copy h2, .ecosystem-head h2, .trust-grid h2 { margin: 0; font: 700 clamp(44px, 5.3vw, 72px)/.98 var(--font-castledown); letter-spacing: -.035em; }
.section-head > p { width: 370px; color: #96a8be; font-size: 16px; line-height: 1.55; margin: 0 0 6px; }
.filters { display: flex; gap: 8px; margin: 50px 0 26px; flex-wrap: wrap; }
.filters button { border: 1px solid #284369; background: transparent; color: #a9bdd7; border-radius: 99px; padding: 10px 17px; font-size: 11px; cursor: pointer; }
.filters button.active { background: var(--sky); color: var(--navy); border-color: var(--sky); font-weight: 800; }
.facts-stage { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; gap: clamp(42px, 7vw, 100px); }
.facts-visual { position: sticky; top: 94px; height: calc(100vh - 145px); min-height: 560px; margin: 0; overflow: hidden; border-radius: 34px; background: #010219; }
.facts-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(3,12,28,.78)); pointer-events: none; }
.facts-visual img { width: 100%; height: 112%; object-fit: cover; object-position: center; scale: 1.04; translate: 0 -5%; will-change: translate, scale; }
.facts-visual figcaption { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 27px; display: flex; justify-content: space-between; align-items: end; color: white; font-size: 18px; font-weight: 700; }
.facts-visual figcaption span { color: var(--sky); font: 700 10px/1 var(--font-geist-mono); letter-spacing: .14em; }
.fact-grid { display: flex; flex-direction: column; }
.fact-card { background: transparent; border: 0; border-top: 1px solid #355071; min-height: 0; transition: background .25s; }
.fact-card:last-child { border-bottom: 1px solid #355071; }
.fact-card:hover { background: rgba(112,197,255,.045); }
.fact-trigger { border: 0; background: none; color: white; text-align: left; padding: 30px 18px 28px; width: 100%; cursor: pointer; display: flex; flex-direction: column; }
.fact-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }.fact-top span { border: 1px solid #476488; border-radius: 99px; padding: 7px 10px; font-size: 9px; color: #a8bbd2; }.fact-top b { color: var(--sky); font-size: 23px; font-weight: 300; }
.fact-trigger small { color: #6982a4; font: 700 8px/1 var(--font-geist-mono); letter-spacing: .15em; }
.fact-trigger > strong { font: 700 clamp(27px, 2.5vw, 38px)/1.08 var(--font-castledown); letter-spacing: -.025em; margin: 10px 0 28px; }
.fact-trigger > p { color: var(--sky); font-size: 15px; line-height: 1.4; margin: 9px 0 0; }
.fact-detail { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .3s; }.fact-card.open .fact-detail { grid-template-rows: 1fr; }
.fact-detail-inner { min-height: 0; overflow: hidden; margin: 0 18px; border-top: 1px solid #345078; }
.fact-detail-inner > p { color: #b2c2d6; font-size: 13px; line-height: 1.55; margin: 20px 0 0; }
.number { display: flex; align-items: baseline; gap: 9px; margin-top: 15px; }.number strong { font-size: 30px; }.number span { color: #8ba2be; font-size: 10px; }
.fact-detail a { display: inline-block; color: var(--sky); font-size: 10px; margin: 14px 0 25px; }

.facts-section { height: clamp(820px, 83.84vw, 1126px); min-height: 0; padding: 0; background: #010219; color: white; }
.facts-sticky { position: relative; height: 100%; min-height: 0; overflow: hidden; isolation: isolate; background: #010219; }
.facts-sticky::after { content: ""; position: absolute; z-index: -1; inset: 63.9% 0 0; background: rgba(30,46,65,.72); border-top: 3px solid rgba(241,241,241,.28); }
.facts-road-scene { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .25; }
.facts-scene-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(127deg, rgba(30,46,65,.9), rgba(7,17,29,.96)); }
.facts-heading { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 708px) 351px; justify-content: space-between; gap: 60px; padding-top: 8.8%; }
.facts-heading h2 { margin: 0; max-width: 708px; font: 900 clamp(50px, 5.45vw, 73px)/.91 var(--font-castledown); letter-spacing: -.02em; background: linear-gradient(142deg, #70c5ff 9%, #eaf6ff 114%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.facts-heading > p { width: 351px; margin: 20px 0 0; color: white; font-size: clamp(17px, 1.68vw, 23px); line-height: 1.27; }
.facts-carousel { position: absolute; z-index: 4; top: 31%; left: 0; right: 0; height: 41.13%; }
.fact-slide { position: absolute; left: 50%; top: 0; width: min(80.99vw, 1088px); height: 100%; overflow: hidden; border-radius: 20px; color: var(--navy); background: linear-gradient(128deg, #70c5ff 9%, #eaf6ff 114%); box-shadow: 0 7px 98px rgba(0,0,0,.37); transform-origin: center; transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .55s ease; will-change: transform, opacity; }
.fact-slide-index { position: absolute; top: 24px; left: 37px; font: 900 12px/1 var(--font-castledown); text-transform: uppercase; }
.fact-slide-copy { height: 100%; padding: 79px clamp(58px, 6.45vw, 87px) 48px; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(70px, 9.1vw, 122px); }
.fact-slide small { display: block; font-size: 12px; font-weight: 700; line-height: 1; }
.fact-slide h3 { margin: 31px 0 0; max-width: 434px; font: 900 clamp(38px, 4.32vw, 58px)/.91 var(--font-castledown); letter-spacing: -.018em; }
.fact-slide-reality > p { margin: 31px 0 18px; max-width: 449px; font-size: clamp(20px, 1.99vw, 27px); font-weight: 700; line-height: 1.09; }
.fact-slide-reality > div:not(.fact-stat) { max-width: 449px; font-size: clamp(14px, 1.35vw, 18px); line-height: 1.09; }
.fact-stat { display: flex; align-items: baseline; gap: 18px; margin-top: 21px; }
.fact-stat strong { font-size: clamp(30px, 2.67vw, 36px); line-height: 1; }
.fact-stat span { font-size: clamp(13px, 1.35vw, 18px); }
.facts-arrow { position: absolute; z-index: 20; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border: 0; background: transparent; color: rgba(255,255,255,.72); font-size: 52px; line-height: 1; cursor: pointer; transition: opacity .2s, color .2s, transform .2s; }
.facts-arrow:not(:disabled):hover { color: white; transform: scale(1.08); }
.facts-arrow:disabled { opacity: .16; cursor: default; }
.facts-arrow-prev { left: 6.5%; }.facts-arrow-next { right: 6.5%; }
.facts-journey { position: absolute; z-index: 3; left: 0; right: 0; top: 70.25%; height: 234px; pointer-events: none; }
.journey-line { position: absolute; z-index: 1; top: 47.4%; height: 1px; border-radius: 99px; background: #1fc7ff; box-shadow: 0 0 8px rgba(31,199,255,.7), 0 0 22px rgba(13,173,255,.38); transition: left .55s cubic-bezier(.22,1,.36,1), width .55s cubic-bezier(.22,1,.36,1); will-change: left, width; }
.journey-car { position: absolute; z-index: 5; top: 0; width: clamp(230px, 26.06vw, 350px); translate: -50% 0; transition: left .55s cubic-bezier(.22,1,.36,1); will-change: left; filter: drop-shadow(0 7px 9px rgba(0,0,0,.55)); }
.journey-car img { display: block; width: 100%; height: 234px; object-fit: contain; }
.journey-charging-point { position: absolute; z-index: 2; top: 22%; right: .8%; width: 19.5%; height: 47%; }
.journey-charging-glow { position: absolute; z-index: 2; left: 0; top: 10%; width: 67%; height: 82%; display: grid; place-items: center; border: 1px solid #1fc7ff; border-radius: 11px; box-shadow: 0 0 8px rgba(13,173,255,.65), inset 0 0 20px rgba(13,173,255,.22), 0 0 38px rgba(13,173,255,.2); background: rgba(7,44,71,.16); }
.journey-charging-glow img { position: absolute; object-fit: contain; }
.journey-charge-circle { width: 58px; height: 58px; }
.journey-charge-bolt { z-index: 1; width: 44px; height: 36px; }
.journey-charger { position: absolute; z-index: 3; right: 0; top: 0; width: 42%; height: 100%; object-fit: contain; transform: rotate(90deg); }

.ask-section { margin-block: 70px; padding: clamp(55px, 7vw, 95px); width: min(1320px, calc(100% - 56px)); display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 100px; border-radius: 48px; background: white; }
.ask-copy h2 { color: var(--navy); }
.ask-copy > p:not(.section-kicker) { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 430px; }
.suggestions { margin-top: 34px; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.suggestions button { background: transparent; border: 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; text-align: left; padding: 15px 0; color: #263d5d; cursor: pointer; font-size: 14px; }.suggestions button span { color: var(--blue); }
.assistant-panel { min-height: 505px; padding: 28px; display: flex; flex-direction: column; background: linear-gradient(145deg, #010219, #0d3873); color: white; border-radius: 32px; box-shadow: 0 30px 75px rgba(10,35,79,.16); }
.assistant-head { font: 700 9px/1 var(--font-geist-mono); letter-spacing: .14em; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.16); }.assistant-head b { float: right; color: #9db5d0; }
.online-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 11px var(--sky); margin-right: 8px; }
.conversation { flex: 1; padding: 25px 0; max-height: 355px; overflow: auto; }
.assistant-message { display: flex; align-items: flex-start; gap: 12px; max-width: 90%; font-size: 15px; line-height: 1.55; margin: 0 0 20px; }.assistant-message span { flex: 0 0 29px; height: 29px; display: grid; place-items: center; border-radius: 8px 3px 8px 3px; background: var(--sky); color: var(--navy); font-size: 9px; font-weight: 900; }
.user-message { margin: 0 0 22px auto; max-width: 75%; background: rgba(255,255,255,.1); padding: 12px 14px; font-size: 14px; }.response { margin-top: 20px; }
.question-field { display: flex; padding: 6px; background: white; }.question-field input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 12px; color: var(--ink); font-size: 15px; }.question-field button { border: 0; width: 48px; background: var(--sky); color: var(--navy); font-size: 20px; cursor: pointer; }
.verified { color: #95aac4; margin-top: 12px; font-size: 11px; }

.ecosystem { position: relative; isolation: isolate; overflow: hidden; padding: 115px 0 125px; background: var(--ice); }
.ecosystem::before { content: ""; position: absolute; z-index: -1; width: 52vw; aspect-ratio: 1; right: -16vw; top: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(112,197,255,.38), rgba(112,197,255,0) 68%); pointer-events: none; }
.ecosystem-head { display: grid; grid-template-columns: 1fr 1fr; column-gap: 70px; align-items: end; }
.ecosystem-head .section-kicker { grid-column: 1/-1; }.ecosystem-head h2 { color: var(--navy); }.ecosystem-head > p { color: #526982; font-size: 16px; line-height: 1.55; max-width: 440px; margin: 0 0 5px; }
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 38px; margin-top: 65px; border-top: 1px solid rgba(10,35,79,.18); }
.market-card { min-height: 230px; background: transparent; padding: 26px 4px; display: flex; flex-direction: column; border: 0; border-bottom: 1px solid rgba(10,35,79,.18); transition: transform .3s, opacity .3s; }.market-card:hover { transform: translateX(8px); opacity: .72; }
.market-top { display: flex; justify-content: space-between; color: #7d94ac; font: 700 9px/1 var(--font-geist-mono); }.market-top b { color: var(--blue); font-size: 17px; }
.brand-logo-wrap { height: 72px; display: flex; align-items: center; margin-top: 29px; }
.brand-logo { display: block; width: auto; height: auto; max-width: 185px; max-height: 58px; object-fit: contain; object-position: left center; }
.market-card > strong { color: var(--navy); font: 700 27px/1 var(--font-castledown); letter-spacing: -.025em; margin-top: 47px; }.market-card p { color: #52657d; font-size: 14px; margin: 9px 0; }.market-card small { color: #8ca0b6; margin-top: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .11em; }

.trust-section { padding: 115px 0; background: white; }
.trust-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; }
.trust-grid h2 { color: var(--navy); }
.principles { border-top: 1px solid var(--line); }
.principles article { display: grid; grid-template-columns: 42px 1fr; column-gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }.principles span { grid-row: 1/3; color: var(--blue); font: 700 10px/1 var(--font-geist-mono); }.principles strong { color: var(--navy); font-size: 17px; }.principles p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 8px 0 0; }

footer { padding: 48px 0; background: var(--navy-2); color: white; }
.footer-grid { display: grid; grid-template-columns: 1fr 1.4fr .7fr .8fr; align-items: start; gap: 35px; }.footer-brand .brand-symbol { background: var(--sky); color: var(--navy); }.footer-grid > p { color: #8ea4bf; margin: 4px 0; font-size: 14px; }.footer-grid > div:not(.site-brand):not(.olx-lockup) { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }.olx-lockup { color: #8198b4; font-size: 12px; text-align: right; }.olx-lockup strong { color: white; }.footer-grid > small { grid-column: 1/-1; border-top: 1px solid #243b5d; padding-top: 22px; color: #607794; font-size: 11px; }

@keyframes scroll-rise {
  from { opacity: .18; translate: 0 72px; scale: .97; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes scroll-slide-left {
  from { opacity: .1; translate: -90px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes scroll-slide-right {
  from { opacity: .1; translate: 90px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes scroll-orb {
  from { translate: 0 130px; scale: .82; opacity: .2; }
  to { translate: -8vw -90px; scale: 1.14; opacity: .8; }
}

@keyframes image-parallax {
  from { translate: 0 -7%; scale: 1.08; }
  to { translate: 0 1%; scale: 1.02; }
}

@supports (animation-timeline: view()) {
  .section-head > *,
  .filters,
  .ecosystem-head > *,
  .principles article,
  .proof-inner > * {
    animation: scroll-rise linear both;
    animation-timeline: view();
    animation-range: entry 2% cover 34%;
  }

  .fact-card,
  .market-card {
    animation: scroll-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 31%;
  }

  .fact-card:nth-child(even),
  .market-card:nth-child(3n + 2) {
    animation-range: entry 8% cover 38%;
  }

  .ask-copy {
    animation: scroll-slide-left linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }

  .assistant-panel,
  .trust-grid > .principles {
    animation: scroll-slide-right linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }

  .ecosystem::before {
    animation: scroll-orb linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  .facts-visual img {
    animation: image-parallax linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@media (max-width: 950px) {
  .nav { grid-template-columns: 1fr auto auto; gap: 18px; }
  .site-brand, .powered, .mobile-menu-button { z-index: 3; }
  .mobile-menu-button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.4); color: white; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .mobile-menu-button span { position: absolute; width: 18px; height: 1.5px; border-radius: 99px; background: currentColor; transition: transform .42s var(--motion-natural), opacity .28s ease, top .42s var(--motion-natural); }
  .mobile-menu-button span:nth-child(1) { top: 15px; }.mobile-menu-button span:nth-child(2) { top: 21px; }.mobile-menu-button span:nth-child(3) { top: 27px; }
  .nav.mobile-open .mobile-menu-button span:nth-child(1) { top: 21px; transform: rotate(45deg); }.nav.mobile-open .mobile-menu-button span:nth-child(2) { opacity: 0; }.nav.mobile-open .mobile-menu-button span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
  .nav-links { position: fixed; z-index: 2; inset: 0; height: 100svh; padding: 112px 30px 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; border-radius: 0; background: #010219; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-18px); transition: opacity .5s var(--motion-natural), transform .5s var(--motion-natural), visibility 0s linear .5s; }
  .nav-links::before, .nav-links::after { display: none; }
  .nav-links a { color: white; font: 700 clamp(27px, 5vw, 36px)/1 var(--font-castledown); opacity: 0; transform: translateY(22px); transition: color .25s ease, opacity .45s var(--motion-natural), transform .45s var(--motion-natural); }
  .nav.mobile-open .nav-links { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
  .nav.mobile-open .nav-links a { opacity: 1; transform: translateY(0); }
  .nav.mobile-open .nav-links a:nth-child(1) { transition-delay: 90ms; }.nav.mobile-open .nav-links a:nth-child(2) { transition-delay: 140ms; }.nav.mobile-open .nav-links a:nth-child(3) { transition-delay: 190ms; }.nav.mobile-open .nav-links a:nth-child(4) { transition-delay: 240ms; }.nav.mobile-open .nav-links a:nth-child(5) { transition-delay: 290ms; }
  /* The open menu paints its own dark backdrop, so force the light copy.
     useNavSplit also disables itself while the menu is open. */
  .nav.mobile-open .brand-dark, .nav.mobile-open .powered-layer-dark { -webkit-clip-path: inset(101% 0 0 0); clip-path: inset(101% 0 0 0); }
  .nav.mobile-open .mobile-menu-button { color: white; }
  .hero-wash { background: linear-gradient(90deg, rgba(1,7,18,.86), rgba(2,10,25,.52) 40%, rgba(2,10,25,.06) 62%); }
  .hero-copy { width: 55%; }
  .facts-heading { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
  .facts-heading h2 { font-size: 50px; }
  .ask-section, .trust-grid { gap: 55px; }
}

@media (max-width: 720px) {
  .shell { width: min(100% - 30px, 1240px); }
  .nav { top: 20px; left: 20px; right: 20px; height: 44px; }.site-brand { width: 78px; height: 38px; }.powered-text { display: none; }.powered-mark { width: 42px; }
  .hero-story { height: 300svh; min-height: 1950px; }.hero-sticky { height: 100svh; min-height: 650px; }
  .hero-frame { object-position: 66% center; }.hero-wash { background: linear-gradient(180deg, rgba(1,7,18,.34) 0%, rgba(1,7,18,.10) 26%, rgba(1,7,18,.16) 46%, rgba(1,7,18,.70) 72%, rgba(1,7,18,.90) 100%); }
  .hero-content { align-items: flex-end; padding: 100px 0 72px; }.hero-copy { width: 100%; margin: 0; }.hero-copy h1 { font-size: clamp(50px, 15vw, 68px); }.hero-copy .hero-supporting { max-width: 92%; font-size: 17px; }.primary-button { margin-top: 22px; }
  .proof-inner { height: auto; min-height: 86px; padding-block: 18px; flex-wrap: wrap; }.proof-line { display: none; }
  .facts-section { height: 880px; min-height: 0; padding: 0; }.facts-sticky { min-height: 0; }.facts-sticky::after { inset: 70% 0 0; }.facts-heading { display: block; padding-top: 62px; }.facts-heading h2 { font-size: 41px; max-width: 430px; }.facts-heading > p { width: min(90%, 380px); margin-top: 14px; font-size: 15px; }.facts-carousel { top: 285px; height: 375px; }.fact-slide { width: calc(100% - 42px); border-radius: 16px; }.fact-slide-index { top: 18px; left: 22px; }.fact-slide-copy { padding: 54px 24px 24px; display: block; }.fact-slide h3 { margin-top: 15px; font-size: 32px; max-width: 330px; }.fact-slide-reality { margin-top: 22px; }.fact-slide-reality > p { margin: 11px 0 10px; font-size: 17px; }.fact-slide-reality > div:not(.fact-stat) { display: none; }.fact-stat { margin-top: 12px; }.facts-arrow { display: block; top: 48%; width: 36px; height: 46px; font-size: 42px; }.facts-arrow-prev { left: 0; }.facts-arrow-next { right: 0; }.facts-journey { top: 675px; height: 150px; }.journey-line { top: 48%; }.journey-car { width: 170px; }.journey-car img { height: 150px; }.journey-charging-point { top: 17%; right: -2%; width: 28%; height: 54%; }.journey-charge-circle { width: 42px; height: 42px; }.journey-charge-bolt { width: 31px; height: 25px; }
  .section-head, .ecosystem-head { display: block; }.section-head > p, .ecosystem-head > p { width: auto; margin-top: 25px; }
  .fact-grid, .brand-grid { grid-template-columns: 1fr; }
  .ask-section, .ecosystem, .trust-section { padding-block: 80px; }
  .ask-section, .trust-grid { grid-template-columns: 1fr; }.ask-section { margin-block: 35px; padding-inline: 22px; border-radius: 28px; }.assistant-panel { min-height: 470px; border-radius: 24px; box-shadow: 0 22px 55px rgba(10,35,79,.14); }
  .brand-grid { margin-top: 40px; }.market-card { min-height: 190px; }.market-card > strong { margin-top: 32px; }
  .footer-grid { grid-template-columns: 1fr; }.olx-lockup { text-align: left; }.footer-grid > small { grid-column: auto; }
}

/* Electric Answers — Figma section */
.electric-answers-section { min-height: 800px; padding: 95px 0 100px; display: flex; align-items: center; background: #eae4dd; color: #010219; }
.electric-answers-inner { width: min(1087px, calc(100% - 64px)); margin: 0 auto; display: grid; grid-template-columns: 433px minmax(0, 577px); justify-content: space-between; gap: 70px; align-items: start; }
.electric-answers-copy { padding-top: 29px; font-family: var(--font-castledown); }
.electric-answers-kicker { margin: 0 0 14px; color: #1964ff; font-size: 17.4px; line-height: 21px; letter-spacing: 8.7px; }
.electric-answers-copy h2 { margin: 0; color: #010219; font: 400 96px/.793 var(--font-castledown); letter-spacing: -.02em; }
.electric-answers-copy h2 strong { color: #1964ff; font-weight: 900; }
.electric-answers-intro { width: 387px; margin: 28px 0 20px; font: 400 clamp(18px, 1.68vw, 23px)/1.27 var(--font-castledown); }
.electric-question-list { width: 366px; border-top: 1px solid rgba(1,2,25,.12); }
.electric-question-list button { width: 100%; min-height: 42px; padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 0; border-bottom: 1px solid rgba(1,2,25,.12); background: transparent; color: #010219; text-align: left; font: 400 16.6px/1.27 var(--font-castledown); cursor: pointer; }
.electric-question-list button b { color: #1964ff; font-size: 17px; font-weight: 400; transition: transform .25s ease; }.electric-question-list button:hover b { transform: translate(3px,-3px); }
.evie-chat { height: 605px; overflow: hidden; border-radius: 29px 29px 22px 22px; background: #f3f3f3; box-shadow: 0 20px 42px rgba(42,36,30,.12); display: grid; grid-template-rows: 76px 1fr 70px; }
.evie-header { padding: 15px 18px 15px 23px; display: flex; align-items: center; justify-content: space-between; background: #1964ff; color: white; }
.evie-header > span:last-child { font: 400 11.5px/1 var(--font-castledown); }
.evie-identity { display: flex; align-items: center; gap: 12px; }.evie-identity > span:last-child { display: flex; flex-direction: column; }
.evie-identity strong { font: 900 19.2px/1.1 var(--font-castledown); }.evie-identity small { margin-top: 1px; font: italic 11.5px/1.1 Arial, sans-serif; }
.evie-avatar, .evie-message-avatar { position: relative; display: block; width: 38px; height: 38px; overflow: visible; border-radius: 50%; background: #e0e7ff; }
.evie-avatar > img:first-child, .evie-message-avatar > img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center; }
.evie-avatar .evie-status, .evie-message-avatar > img:last-child { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; }
.evie-conversation { padding: 25px 23px 20px; overflow-y: auto; background: #f3f3f3; }
.evie-today { width: 78%; margin: 0 auto 24px; display: flex; align-items: center; gap: 8px; color: #6b7280; font-size: 11.7px; font-weight: 600; }.evie-today span { flex: 1; height: 1px; background: #e0e1e4; }
.evie-bot-row { display: grid; grid-template-columns: 38px 1fr; align-items: start; gap: 12px; max-width: 417px; }
/* The bubble is the container, not the paragraph, so an answer and its buttons
   read as one message instead of the buttons looking like a second reply. */
.evie-bubble { padding: 12px 15px; border-radius: 4px 17px 17px 17px; background: white; color: #1f2937; font: 400 13.5px/1.5 var(--font-castledown); animation: evie-bubble-in .34s var(--motion-natural) both; }
.evie-bubble p { margin: 0; }
@keyframes evie-bubble-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .evie-bubble { animation: none; } }
.evie-bot-row small, .evie-user-row small { display: block; margin-top: 4px; color: #6b7280; font-size: 10.6px; }
.evie-user-row { width: min(296px, 72%); margin: 31px 0 0 auto; text-align: right; }.evie-user-row p { margin: 0; padding: 12px 15px; border-radius: 17px 4px 17px 17px; background: #1964ff; color: white; text-align: left; font: 400 13.5px/1.5 var(--font-castledown); }
.evie-response { margin-top: 24px; }

/* The call to action lives inside the bubble: a lead-in line, then one small blue
   button per link. Every answer that leans on something carries its source. */
/* Scoped through .evie-bubble to outrank `.evie-bubble p { margin: 0 }`. */
.evie-bubble .evie-cta-lead { margin-top: 10px; color: #4b5563; font-size: 12.5px; }
.evie-cta-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.evie-cta { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--blue); border-radius: 999px; background: var(--blue); color: white; font: 700 11.5px/1 var(--font-castledown); overflow-wrap: anywhere; transition: transform .2s ease, box-shadow .2s ease; }
.evie-cta:hover, .evie-cta:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(25,100,255,.32); }
.evie-cta b { font-size: 12px; }
/* External sources are outlined rather than filled, so the article button stays
   the primary action. Host names come from a provider, hence the truncation. */
.evie-cta-external { max-width: 100%; background: transparent; color: var(--blue); }
.evie-cta-external:hover, .evie-cta-external:focus-visible { box-shadow: 0 6px 16px rgba(25,100,255,.18); }

/* Three dots while EVie is composing. */
.evie-typing { display: inline-flex; gap: 4px; padding: 2px 4px; }
.evie-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); animation: evie-typing 1s ease-in-out infinite; }
.evie-typing i:nth-child(2) { animation-delay: .15s; }
.evie-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes evie-typing { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .evie-typing i { animation: none; opacity: .6; } }
.evie-composer { padding: 16px 23px; display: flex; align-items: center; gap: 12px; border-top: 1px solid #e5e7eb; background: white; }
.evie-composer input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #010219; font: 400 14.4px/1 var(--font-castledown); }.evie-composer input::placeholder { color: #6b7280; }
.evie-composer button { flex: none; width: 37px; height: 37px; padding: 10px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #1964ff; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }.evie-composer button:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(25,100,255,.32); }.evie-composer button img { width: 16px; height: 16px; }

@media (max-width: 1050px) {
  .electric-answers-inner { grid-template-columns: minmax(330px, .8fr) minmax(480px, 1.2fr); gap: 42px; }
  .electric-answers-copy h2 { font-size: 78px; }
  .electric-answers-intro, .electric-question-list { width: 100%; }
}

@media (max-width: 820px) {
  .electric-answers-section { padding: 72px 0; }
  .electric-answers-inner { width: min(100% - 36px, 620px); grid-template-columns: 1fr; gap: 56px; }
  .electric-answers-copy { padding-top: 0; }
  .electric-answers-kicker { font-size: 13px; letter-spacing: 6px; }
  .electric-answers-copy h2 { font-size: clamp(68px, 17vw, 88px); }
  .electric-answers-intro { max-width: 430px; }
  .electric-question-list { max-width: 430px; }
  .evie-chat { height: 600px; }
}

@media (max-width: 520px) {
  .electric-answers-copy h2 { font-size: 66px; }
  .evie-chat { height: 620px; border-radius: 24px 24px 20px 20px; }
  .evie-conversation { padding-inline: 15px; }
  .evie-bot-row { grid-template-columns: 34px 1fr; gap: 9px; }.evie-message-avatar { width: 34px; height: 34px; }
  .evie-user-row { width: 82%; }
}

@media (max-width: 720px) {
  .electric-answers-intro { font-size: 17px; }
}

/* Find your EV + final footer — Figma section */
.find-ev-section { position: relative; min-height: 877px; padding-bottom: 58px; overflow: hidden; isolation: isolate; background: #010219; color: white; }
.find-ev-content { position: relative; z-index: 3; padding-top: 120px; }
.find-ev-heading { width: min(991px, calc(100% - 40px)); margin: 0 auto; text-align: center; font-family: var(--font-castledown); }
.find-ev-heading > p { margin: 0 0 14px; color: #1964ff; font-size: 16px; line-height: 23px; letter-spacing: 8px; }
.find-ev-heading h2 { margin: 0; color: white; font-size: 53.9px; font-weight: 400; line-height: 53px; }.find-ev-heading h2 strong { font-weight: 900; }
.find-ev-heading > div { margin-top: 28px; color: white; font-size: clamp(18px, 1.68vw, 23px); line-height: 1.27; }
.find-ev-marketplaces { width: 810px; margin: 39px auto 0; display: grid; grid-template-columns: repeat(3, 250px); gap: 25px 30px; }
.find-ev-card { position: relative; isolation: isolate; height: 96px; padding: 20px 23px 12px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border-radius: 12px; background: white; box-shadow: 0 3px 13px rgba(0,0,0,.14); transition: transform .52s var(--motion-natural), box-shadow .52s var(--motion-natural); will-change: transform, translate, opacity; backface-visibility: hidden; }
.find-ev-card:hover, .find-ev-card:focus-visible { z-index: 2; transform: translateY(-7px) scale(1.04); box-shadow: 0 18px 32px rgba(0,0,0,.25); }
.find-ev-card > img { width: 205px; height: 32px; object-fit: contain; transform-origin: center; filter: brightness(0) saturate(100%) invert(5%) sepia(31%) saturate(1915%) hue-rotate(195deg) brightness(81%) contrast(112%); }
.find-ev-card:hover > img, .find-ev-card:focus-visible > img { filter: none; }
.find-ev-card[data-brand="AutoTraderSA"] > img { transform: scale(1.75); }
.find-ev-card[data-brand="Autovit.ro"] > img { transform: scale(1.24); }
.find-ev-card[data-brand="La Centrale"] > img { transform: none; }
.find-ev-card[data-brand="OLX"] > img { width: 88px; height: 40px; transform: translateY(-7px) scale(1.28); }
.find-ev-card[data-brand="OLX"] > span { max-width: 224px; padding-inline: 4px 7px; gap: 4px; font-size: 8px; letter-spacing: .15px; white-space: nowrap; }
.find-ev-card[data-brand="OLX"] > span img { flex: none; width: 11px; height: 11px; }
.find-ev-card[data-brand="OTOMOTO"] > img { transform: scale(1.78); }
.find-ev-card[data-brand="Standvirtual"] > img { transform: scale(1.88); }
.find-ev-card > span { min-height: 18px; padding: 3px 8px 3px 4px; display: flex; align-items: center; gap: 5px; border-radius: 12px; background: #d7e4ff; color: #1964ff; font: 700 8px/1 var(--font-castledown); letter-spacing: .2px; text-transform: uppercase; }.find-ev-card > span img { width: 12px; height: 12px; object-fit: contain; }
.find-ev-blue-arc { position: absolute; z-index: 1; top: 404px; left: 50%; translate: -50% 0; width: 2221px; height: 2221px; border-radius: 50%; background: #1964ff; transform: translate3d(0, var(--arc-parallax, 0), 0); will-change: transform, translate, opacity; backface-visibility: hidden; }
.final-footer { position: relative; z-index: 2; width: min(990px, calc(100% - 64px)); margin: 95px auto 0; padding: 0; background: transparent; color: white; font-family: var(--font-castledown); }
.final-footer-main { min-height: 103px; display: grid; grid-template-columns: 281px 156px 219px; align-items: start; justify-content: space-between; }
.final-footer-logo { display: block; width: 134px; height: 50px; object-fit: contain; object-position: left center; }.final-footer-brand p { margin: 15px 0 0; font-size: 11.7px; line-height: 1.5; }.final-footer-brand p strong { font-weight: 900; }.final-footer-brand small { display: block; margin-top: 1px; font-size: 10.2px; }
.final-footer h3 { margin: 0 0 10px; color: #f3f5f4; font: 900 11px/1 var(--font-castledown); letter-spacing: .8px; text-decoration: underline; text-transform: uppercase; }
.final-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }.final-footer-links a { font-size: 11.7px; line-height: 1.1; transition: opacity .2s; }.final-footer-links a:hover { opacity: .7; }
.final-footer-social p { margin: 0; font-size: 11px; line-height: 1.4; }.final-footer-social > div { display: flex; gap: 9px; margin-top: 12px; }/* These sat on #131916/#1e2522, a green-tinted near-black. On the brand dark they
   would disappear, so the fill is the token and the ring is a white alpha. */
.final-footer-social > div a { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: var(--navy); }.final-footer-social img { width: 16px; height: 16px; }
.final-footer-bottom { height: 35px; margin-top: 25px; padding-top: 19px; display: flex; align-items: flex-start; justify-content: space-between; border-top: 1px solid rgba(1,2,25,.35); font: 400 10.2px/1 var(--font-geist-sans), sans-serif; }

/* Cookie preferences */
.cookie-overlay { position: fixed; z-index: 100; inset: 0; padding: 24px; display: grid; place-items: center; overflow-y: auto; background: rgba(1,2,25,.58); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.cookie-modal { position: relative; width: min(960px, 100%); padding: 48px 52px; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 36px 54px; overflow: hidden; border-radius: 26px; background: #f5f0e9; color: #010219; box-shadow: 0 28px 80px rgba(0,0,0,.3); font-family: var(--font-castledown); animation: cookie-modal-in .3s cubic-bezier(.22,1,.36,1); }
@keyframes cookie-modal-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.cookie-close { position: absolute; top: 18px; right: 20px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0 0 3px; border: 0; border-radius: 50%; background: rgba(1,2,25,.08); color: #010219; font-size: 26px; line-height: 1; cursor: pointer; }
.cookie-brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 25px; }.cookie-brand img { width: 92px; height: 45px; object-fit: contain; object-position: left center; filter: brightness(0) saturate(100%); }.cookie-brand h2 { margin: 0; color: #1964ff; font: 900 43px/.95 var(--font-castledown); }
.cookie-welcome p { margin: 0 0 14px; font-size: 20px; line-height: 1.38; }.cookie-welcome p:last-child { margin-bottom: 0; }
.cookie-actions { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.cookie-primary, .cookie-secondary { min-height: 52px; padding: 0 22px; border-radius: 999px; font: 900 15px/1 var(--font-castledown); cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
/* The hover used to darken to #0d54ea. With a single brand blue it only lifts. */
.cookie-primary { border: 1px solid var(--blue); background: var(--blue); color: white; }.cookie-primary:hover { transform: translateY(-2px); }
.cookie-secondary { border: 1px solid rgba(1,2,25,.32); background: transparent; color: #010219; }.cookie-secondary:hover { transform: translateY(-2px); border-color: #1964ff; color: #1964ff; }
.cookie-modal-settings { display: block; width: min(1040px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; }
.cookie-settings-heading > p { margin: 0 0 14px; color: #1964ff; font-size: 12px; font-weight: 700; letter-spacing: 5px; }.cookie-settings-heading h2 { max-width: 760px; margin: 0; font: 900 clamp(38px, 4.5vw, 58px)/.96 var(--font-castledown); }.cookie-settings-heading > span { display: block; margin-top: 22px; font-size: 19px; line-height: 1.35; }
.cookie-options { margin-top: 36px; border-top: 1px solid rgba(1,2,25,.14); }.cookie-option { min-height: 120px; padding: 26px 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px; border-bottom: 1px solid rgba(1,2,25,.14); }.cookie-option h3 { margin: 0 0 8px; font: 900 24px/1 var(--font-castledown); }.cookie-option p { max-width: 710px; margin: 0; color: #4d5261; font-size: 15px; line-height: 1.45; }.cookie-always { color: #1964ff; font-size: 13px; font-weight: 900; text-transform: uppercase; }
.cookie-toggle { position: relative; width: 58px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: #bcc1c8; cursor: pointer; transition: background .25s ease; }.cookie-toggle span { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: translate .25s ease; }.cookie-toggle.active { background: #1964ff; }.cookie-toggle.active span { translate: 26px 0; }
.cookie-settings-actions { margin-top: 34px; display: flex; justify-content: flex-end; gap: 14px; }.cookie-settings-actions button { min-width: 170px; }

@media (max-width: 900px) {
  .find-ev-section { min-height: 970px; }
  .find-ev-heading h2 { font-size: 48px; }
  .find-ev-marketplaces { width: 744px; grid-template-columns: repeat(3, 232px); gap: 22px 24px; }.find-ev-card { width: 232px; }
  .final-footer { margin-top: 96px; }.final-footer-main { grid-template-columns: 250px 130px 210px; }
}

@media (max-width: 720px) {
  .find-ev-section { min-height: 1250px; }
  .find-ev-content { padding-top: 90px; }
  .find-ev-heading > p { font-size: 11px; letter-spacing: 5px; }.find-ev-heading h2 { font-size: 40px; line-height: 1; }.find-ev-heading > div { font-size: 17px; line-height: 1.27; }
  .find-ev-marketplaces { width: min(468px, calc(100% - 32px)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.find-ev-card { width: auto; }
  .find-ev-card > img { max-width: 90%; }
  .find-ev-blue-arc { top: 470px; }
  .final-footer { width: calc(100% - 40px); margin-top: 96px; }.final-footer-main { grid-template-columns: 1fr 1fr; gap: 40px 24px; }.final-footer-brand { grid-column: 1 / -1; }.final-footer-social { justify-self: end; }.final-footer-bottom { margin-top: 40px; }
  .cookie-overlay { padding: 12px; place-items: start center; }.cookie-modal { margin: 20px 0; padding: 42px 24px 28px; grid-template-columns: 1fr; gap: 25px; border-radius: 20px; }.cookie-brand { display: block; }.cookie-brand img { width: 82px; }.cookie-brand h2 { margin-top: 17px; font-size: 36px; }.cookie-welcome p { font-size: 17px; }.cookie-modal-settings { max-height: none; }.cookie-settings-heading h2 { font-size: 38px; }.cookie-option { grid-template-columns: 1fr auto; gap: 16px; }.cookie-option p { font-size: 14px; }.cookie-settings-actions { flex-direction: column-reverse; }.cookie-settings-actions button { width: 100%; }
}

@media (max-width: 460px) {
  .find-ev-section { min-height: 1510px; }
  .find-ev-marketplaces { width: min(280px, calc(100% - 40px)); grid-template-columns: 1fr; }.find-ev-card { height: 78px; }
  .find-ev-blue-arc { top: 690px; }
  .final-footer { margin-top: 90px; }.final-footer-main { grid-template-columns: 1fr; }.final-footer-brand { grid-column: auto; }.final-footer-social { justify-self: start; }.final-footer-bottom { gap: 20px; }
}

/* News & Stories — Figma section */
.news-section { position: relative; min-height: 919px; padding: 108px max(7.4vw, 36px) 92px; overflow: hidden; background: #010219; color: white; }
.news-heading { text-align: center; font-family: var(--font-castledown); }
.news-heading > p { margin: 0 0 14px; color: white; font-size: 16px; line-height: 23px; letter-spacing: 8px; }
.news-heading h2 { margin: 0; color: #1964ff; font-size: clamp(66px, 6.58vw, 88px); font-weight: 900; line-height: .91; }
.news-heading h2 strong { font-weight: 900; }
.news-heading > span { display: block; margin-top: 28px; color: #f7f7f7; font-size: clamp(18px, 1.68vw, 23px); line-height: 1.27; }
.news-controls { width: min(1244px, 100%); margin: 42px auto 18px; display: flex; justify-content: flex-end; gap: 11px; }
.news-controls button { position: relative; isolation: isolate; display: grid; place-items: center; width: 35px; height: 35px; padding: 0 0 3px; overflow: hidden; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); box-shadow: 0 9px 22px rgba(0,0,0,.18); color: white; font: 300 30px/1 var(--font-castledown); cursor: pointer; backdrop-filter: url(#liquid-refraction) blur(2px) saturate(108%) contrast(107%); -webkit-backdrop-filter: url(#liquid-refraction) blur(2px) saturate(108%) contrast(107%); transition: background .25s, color .25s, transform .25s, opacity .25s; }
.news-controls button::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, rgba(255,255,255,.55) 0 16%, transparent 31% 65%, rgba(255,255,255,.2) 80% 90%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .72; pointer-events: none; }
.news-controls button:not(:disabled):hover { background: #1964ff; color: white; transform: scale(1.06); }
.news-controls button:disabled { opacity: .28; cursor: default; }
.news-cards { width: min(1244px, 100%); margin: 46px auto 0; display: flex; gap: 27px; transform: translateX(var(--news-shift-desktop)); transition: transform .78s var(--motion-natural); will-change: transform; touch-action: pan-y; }
.news-card { position: relative; flex: 0 0 calc((100% - 54px) / 3); height: 411px; padding: 20px 20px 32px; overflow: hidden; border-radius: 12px; color: white; transition: transform .58s var(--motion-natural), box-shadow .58s var(--motion-natural), opacity .48s var(--motion-natural); will-change: transform, translate, opacity; backface-visibility: hidden; user-select: text; -webkit-user-select: text; -webkit-user-drag: none; }
.news-card:hover, .news-card:focus-visible { z-index: 2; transform: translateY(-18px); box-shadow: 0 30px 58px rgba(0,0,0,.5); }
.news-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .76s var(--motion-natural); }
.news-card:hover > img, .news-card:focus-visible > img { transform: scale(1.085); }
.news-card-shade { position: absolute; inset: 0; background: linear-gradient(179deg, rgba(1,2,25,0) 25%, rgba(1,2,25,.75) 84%); }
.news-card > img, .news-card-shade { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.news-card-meta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.news-card-meta b, .news-card-meta time { padding: 4px 10px; border-radius: 6px; background: rgba(1,2,25,.35); backdrop-filter: blur(4px); text-transform: uppercase; white-space: nowrap; }
.news-card-meta b { font: 700 11px/normal var(--font-castledown); }.news-card-meta time { color: rgba(255,255,255,.85); font: 700 12px/normal var(--font-castledown); }
.news-card-copy { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 32px; }
.news-card-copy h3 { margin: 0 0 12px; max-width: 358px; font: 700 32px/.96 var(--font-castledown); letter-spacing: -.01em; }
.news-card-copy p { width: 100%; max-width: 340px; margin: 0; font: 400 14px/1.04 var(--font-castledown); }
.news-card-meta b, .news-card-meta time, .news-card-copy h3, .news-card-copy p { position: relative; z-index: 2; user-select: text; -webkit-user-select: text; cursor: text; }
.news-actions { width: min(1244px, 100%); margin: 25px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.news-actions .news-controls { width: auto; margin: 0; }
.news-view-all { position: relative; isolation: isolate; display: grid; place-items: center; height: 46px; padding: 0 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 999px; color: white; font: 700 15px/1 var(--font-castledown); transition: border-color .35s ease, box-shadow .35s ease; }
.news-view-all::before { content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: inherit; background: #1964ff; transform: scaleX(0); transform-origin: left center; transition: transform .42s cubic-bezier(.22,1,.36,1); }
.news-view-all:hover, .news-view-all:focus-visible { border-color: #1964ff; box-shadow: 0 8px 22px rgba(25,100,255,.3); }
.news-view-all:hover::before, .news-view-all:focus-visible::before { transform: scaleX(1); }

/* All News & Stories */
.all-news-page { min-height: 100vh; padding-bottom: 110px; background: #010219; color: white; }
.page-motion-ready .page-scroll-reveal { opacity: 0; translate: 0 54px; scale: .985; transition: opacity .88s var(--motion-natural), translate .88s var(--motion-natural), scale .88s var(--motion-natural); transition-delay: var(--page-reveal-delay, 0ms); will-change: opacity, translate, scale; }
.page-motion-ready .page-scroll-reveal.is-in-view { opacity: 1; translate: 0 0; scale: 1; }
.page-motion-ready .all-news-card.page-scroll-reveal { translate: 0 78px; transition: opacity .94s var(--motion-natural), translate .94s var(--motion-natural), scale .94s var(--motion-natural), transform .58s var(--motion-natural), box-shadow .58s var(--motion-natural); transition-delay: var(--page-reveal-delay, 0ms), var(--page-reveal-delay, 0ms), var(--page-reveal-delay, 0ms), 0ms, 0ms; }
.page-motion-ready .all-news-card.page-scroll-reveal.is-in-view { translate: 0 0; scale: 1; }
.page-motion-ready .article-hero.page-scroll-reveal { translate: 0 72px; scale: .965; transition-duration: 1.05s; }
.page-motion-ready .article-hero.page-scroll-reveal.is-in-view { translate: 0 0; scale: 1; }
.page-motion-ready .article-body > .page-scroll-reveal { translate: 0 44px; }
.page-motion-ready .article-body > .page-scroll-reveal.is-in-view { translate: 0 0; scale: 1; }
.page-motion-ready .article-body-feature > .article-lead.page-scroll-reveal { translate: 0 0; }
.all-news-intro { width: min(1000px, calc(100% - 40px)); margin: 0 auto; padding: 145px 0 65px; text-align: center; font-family: var(--font-castledown); }
.all-news-intro > p { margin: 0 0 14px; font-size: 14px; line-height: 1; letter-spacing: 8px; }
.all-news-intro h1 { margin: 0; color: #1964ff; font: 900 clamp(68px, 8vw, 112px)/.88 var(--font-castledown); }
.all-news-intro > span { display: block; margin-top: 28px; font-size: clamp(18px, 1.68vw, 23px); line-height: 1.27; }
.all-news-discovery { position: relative; z-index: 8; width: min(1244px, calc(100% - 72px)); margin: -18px auto 48px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; font-family: var(--font-castledown); }
.all-news-search { position: relative; display: flex; align-items: center; width: min(360px, 48%); height: 48px; margin: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.all-news-search:focus-within { border-color: #1964ff; background: rgba(255,255,255,.14); box-shadow: 0 0 0 4px rgba(25,100,255,.18); }
.all-news-search input { width: 100%; height: 100%; padding: 0 22px 0 49px; border: 0; outline: 0; background: transparent; color: white; font: 400 15px/1 var(--font-castledown); }
.all-news-search input::placeholder { color: rgba(255,255,255,.58); }
.all-news-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .65; cursor: pointer; }
.all-news-search-icon { position: absolute; left: 20px; width: 15px; height: 15px; border: 1.5px solid white; border-radius: 50%; pointer-events: none; }
.all-news-search-icon::after { content: ""; position: absolute; right: -6px; bottom: -4px; width: 7px; height: 1.7px; border-radius: 999px; background: white; rotate: 45deg; }
.all-news-filter-menu { position: relative; width: 205px; }
.all-news-filter-menu summary { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 20px; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; background: rgba(255,255,255,.1); color: white; font: 700 14px/1 var(--font-castledown); cursor: pointer; list-style: none; backdrop-filter: blur(10px); }
.all-news-filter-menu summary::-webkit-details-marker { display: none; }
.all-news-filter-menu summary i { width: 8px; height: 8px; border-right: 1.5px solid white; border-bottom: 1.5px solid white; rotate: 45deg; translate: 0 -2px; transition: rotate .25s ease, translate .25s ease; }
.all-news-filter-menu[open] summary { border-color: #1964ff; }
.all-news-filter-menu[open] summary i { rotate: 225deg; translate: 0 2px; }
.all-news-filter-dropdown { position: absolute; top: 58px; left: 0; width: 245px; padding: 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; background: rgba(10,19,50,.96); box-shadow: 0 24px 50px rgba(0,0,0,.42); backdrop-filter: blur(16px); }
.all-news-filter-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: white; font: 700 13px/1 var(--font-castledown); text-align: left; cursor: pointer; transition: background .2s ease, color .2s ease; }
.all-news-filter-dropdown button:hover { background: rgba(255,255,255,.09); }
.all-news-filter-dropdown button b { position: relative; width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.5); border-radius: 5px; }
.all-news-filter-dropdown button.active b { border-color: #1964ff; background: #1964ff; }
.all-news-filter-dropdown button.active b::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border-right: 1.5px solid white; border-bottom: 1.5px solid white; rotate: 45deg; }
.all-news-grid { width: min(1244px, calc(100% - 72px)); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row; align-items: start; gap: 27px; }
.all-news-empty { grid-column: 1 / -1; padding: 90px 24px; text-align: center; font-family: var(--font-castledown); }
.all-news-empty strong { display: block; color: #1964ff; font-size: clamp(34px, 4vw, 54px); }
.all-news-empty p { margin: 12px 0 24px; color: rgba(255,255,255,.72); font-size: 18px; }
.all-news-empty button { height: 42px; padding: 0 20px; border: 1px solid white; border-radius: 999px; background: transparent; color: white; font: 700 14px/1 var(--font-castledown); cursor: pointer; }
.all-news-card { width: auto; min-width: 0; height: 430px; flex: none; }
.all-news-card:nth-child(7n + 1) { grid-column: span 7; }
.all-news-card:nth-child(7n + 2) { grid-column: span 5; }
.all-news-card:nth-child(7n + 3) { grid-column: span 5; }
.all-news-card:nth-child(7n + 4) { grid-column: span 7; }
.all-news-card:nth-child(7n + 5), .all-news-card:nth-child(7n + 6), .all-news-card:nth-child(7n + 7) { grid-column: span 4; }
.all-news-card .news-card-shade { background: linear-gradient(179deg, rgba(1,2,25,0) 18%, rgba(1,2,25,.84) 84%); }
.all-news-card .news-card-copy h2 { margin: 0 0 16px; max-width: 560px; font: 700 clamp(28px, 2.65vw, 40px)/.98 var(--font-castledown); }
.all-news-card .news-card-copy p { width: 100%; max-width: 560px; font-size: 14px; line-height: 1.14; }
.all-news-card:nth-child(7n + 1), .all-news-card:nth-child(7n + 2) { height: 500px; }
.all-news-card:nth-child(7n + 3), .all-news-card:nth-child(7n + 4) { height: 440px; }
.all-news-card:nth-child(7n + 5), .all-news-card:nth-child(7n + 6), .all-news-card:nth-child(7n + 7) { height: 390px; }
.all-news-pagination { width: min(1244px, calc(100% - 72px)); margin: 54px auto 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-castledown); }
.all-news-pagination button, .all-news-pagination .page-numbers { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: rgba(255,255,255,.08); color: white; font: 700 15px/1 var(--font-castledown); cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; }
.all-news-pagination button:hover:not(:disabled), .all-news-pagination button.active,
.all-news-pagination a.page-numbers:hover, .all-news-pagination .page-numbers.current { border-color: #1964ff; background: #1964ff; }
.all-news-pagination button:hover:not(:disabled), .all-news-pagination a.page-numbers:hover { transform: translateY(-2px); }
.all-news-pagination button:disabled, .all-news-pagination .page-numbers.is-disabled { opacity: .28; cursor: default; }
.all-news-pagination .all-news-pagination-arrow { font-size: 25px; font-weight: 400; padding-bottom: 3px; }
.all-news-pagination a.page-numbers { text-decoration: none; }
.all-news-pagination a.page-numbers:hover { color: white; }
/* The gap marker in a long list of pages is not a place you can go, so it does
   not get a circle. */
.all-news-pagination .page-numbers.dots { width: auto; border: 0; background: none; opacity: .5; }

/* News article */
.article-page { position: relative; min-height: 100vh; background: #010219; color: #010219; }
.article-page > article { position: relative; background: #f5f3ef; }

/* Dark header. Its padding-bottom reserves exactly half the hero height, so the
   box ends at the photo's midline; --article-hero-half is half of the
   .article-hero height below and must be kept in step with it. A real element
   rather than a pseudo, so useNavSplit can measure where dark turns to light. */
.article-page { --article-hero-half: min(29vw, 310px); }
.article-header { position: relative; z-index: 1; padding-bottom: var(--article-hero-half); background: #010219; color: white; }
/* Sits on the same line as the .article-meta pills: same top as .article-intro's
   padding, and the same 32px box with centred content, so the two read as one row. */
.article-back { position: absolute; z-index: 2; top: 172px; left: clamp(24px, 6vw, 88px); display: inline-flex; align-items: center; min-height: 28px; color: white; font-size: 12px; transition: color .25s ease, transform .25s ease; }
.article-back:hover, .article-back:focus-visible { color: #1964ff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transform: translateX(-3px); }
.article-intro { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 172px 0 45px; text-align: center; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 28px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
/* Solid pills. The border is kept and coloured to match each fill so the boxes
   keep the exact metrics they had while outlined. */
.article-meta > * { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 6px 13px; border: 1px solid white; border-radius: 999px; background: white; color: var(--navy); font-style: normal; }
.article-meta > :first-child { border-color: var(--blue); background: var(--blue); color: white; }
.article-intro h1 { margin: 0 auto; max-width: none; color: #1964ff; font: 900 clamp(54px, 6vw, 82px)/.94 var(--font-castledown); letter-spacing: -.025em; }
.article-intro > p { max-width: none; margin: 28px auto 0; color: white; font: 400 clamp(20px, 2vw, 26px)/1.2 var(--font-castledown); }
/* Pulled up by half its own height so the photo crosses the header's bottom edge. */
.article-hero-wrap { position: relative; z-index: 2; isolation: isolate; contain: paint; width: min(1120px, calc(100% - 40px)); margin: calc(-1 * var(--article-hero-half)) auto 0; overflow: hidden; border-radius: 24px; -webkit-clip-path: inset(0 round 24px); clip-path: inset(0 round 24px); transform: translateZ(0); }
.article-hero { display: block; width: 100%; height: min(58vw, 620px); margin: 0; border-radius: 24px; -webkit-clip-path: inset(0 round 24px); clip-path: inset(0 round 24px); object-fit: cover; }
.article-body { width: min(720px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0 110px; color: #383838; font-size: 18px; line-height: 1.65; }
.article-body .article-lead { color: #010219; font: 700 27px/1.25 var(--font-castledown); }
.article-body .article-lead strong, .article-copy-section p strong, .article-split p strong { font-family: var(--font-castledown); font-weight: 900; }
.article-body h2 { margin: 52px 0 12px; color: #010219; font: 900 38px/1 var(--font-castledown); }
.article-body-feature { width: min(1120px, calc(100% - 40px)); padding-top: 45px; padding-bottom: 0; }
.article-body-feature > .article-lead, .article-copy-section { width: 100%; margin-left: auto; margin-right: auto; }
.short-charge { margin: 66px 0 92px; padding: clamp(36px, 4vw, 52px); border: 0; border-radius: 28px; background: #1964ff; color: #010219; box-shadow: 0 20px 50px rgba(25,100,255,.2); }
.short-charge-heading { display: flex; flex-direction: column; align-items: center; margin-bottom: 34px; text-align: center; }
.short-charge-heading > span, .article-kicker, .article-qa-heading > span, .reality-charge-title > span, .article-source > span { color: #1964ff; font: 700 12px/1 var(--font-castledown); letter-spacing: .13em; text-transform: uppercase; }
.short-charge-heading h2 { margin: 0; color: white; font-size: clamp(48px, 5vw, 70px); }
.short-charge-heading p { max-width: none; margin: 14px 0 0; color: rgba(1,2,25,.78); font-size: 15px; line-height: 1.35; }
.short-charge ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.short-charge li { min-height: 185px; padding: 24px 20px; border: 1px solid white; border-radius: 18px; background: white; box-shadow: none; transition: background-color .42s var(--motion-natural), border-color .42s var(--motion-natural), transform .42s var(--motion-natural), box-shadow .42s var(--motion-natural); }
.short-charge li:hover { border-color: #010219; background: #010219; transform: translateY(-7px); box-shadow: 0 22px 42px rgba(1,2,25,.22); }
.short-charge li strong { display: block; margin-bottom: 14px; color: #1964ff; font: 900 clamp(25px, 2.4vw, 35px)/.95 var(--font-castledown); transition: color .32s ease; }
.short-charge li span { display: block; color: #010219; font-size: 14px; line-height: 1.35; transition: color .32s ease; }
.short-charge li:hover strong { color: white; }
.short-charge li:hover span { color: white; }
.article-copy-section h2:first-child { margin-top: 0; }
.article-copy-section p + p { margin-top: 22px; }
.article-copy-section a { color: #1964ff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.maintenance-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 96px; }
.maintenance-points article { position: relative; padding: 0 24px 8px; }
.maintenance-points article:first-child { padding-left: 0; }
.maintenance-points article:last-child { padding-right: 0; }
.maintenance-points article + article::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: rgba(1,2,25,.16); }
.maintenance-points h3 { margin: 0 0 14px; color: #1964ff; font: 900 24px/1.02 var(--font-castledown); }
.maintenance-points p { margin: 0; color: #383838; font-size: 16px; line-height: 1.5; }
.maintenance-needs-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); margin: 38px 0 100px; }
.maintenance-needs-columns > div + div { padding-left: 0; }
.maintenance-needs-columns article + article { margin-top: 42px; }
.maintenance-needs-columns h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: #1964ff; font: 900 28px/1 var(--font-castledown); }
.maintenance-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #1964ff; color: white; font: 700 21px/1 Arial, sans-serif; }
.maintenance-icon img { display: block; width: 21px; height: 21px; object-fit: contain; filter: brightness(0) invert(1); }
.maintenance-needs-columns p { margin: 0; color: #383838; font-size: 16px; line-height: 1.55; }
.maintenance-needs-columns p + p { margin-top: 14px; }
.article-checklist { margin: 22px 0 28px; padding: 0; color: #010219; list-style: none; }
.article-checklist li { position: relative; min-height: 28px; padding: 7px 0 7px 38px; }
.article-checklist li::before { content: "✓"; position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #1964ff; border-radius: 50%; background: transparent; color: #1964ff; font-size: 11px; font-weight: 700; line-height: 1; transform: translateY(-50%); }
.rain-safety-list { display: grid; gap: 10px; }
.rain-safety-list li { display: flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid rgba(1,2,25,.28); border-radius: 999px; line-height: 1; transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease; }
.rain-safety-list li:hover { border-color: #1964ff; background: #1964ff; color: white; transform: translateY(-2px); }
.rain-safety-list li::before { display: none; }
.article-split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); align-items: stretch; gap: clamp(32px, 5vw, 72px); margin: 100px 0; }
.article-split img { width: 100%; height: 100%; min-height: 520px; border-radius: 24px; object-fit: cover; }
.article-split img.maintenance-battery-image { height: auto; min-height: 0; aspect-ratio: 1 / 1; object-position: center 58%; }
.article-split > div { align-self: center; padding-right: clamp(0px, 2vw, 24px); }
.article-split h2 { margin-top: 18px; font-size: clamp(40px, 4.2vw, 58px); }
.article-split p { margin-top: 20px; }
.article-qa { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: clamp(44px, 7vw, 100px); margin: 108px 0 84px; padding: clamp(30px, 5vw, 64px); border-radius: 28px; background: #1964ff; color: white; }
.article-qa-heading { align-self: center; }
.article-qa-heading > span { color: #010219; }
.article-qa-heading h2 { margin: 18px 0 18px; color: white; font-size: clamp(44px, 4.7vw, 64px); }
.article-qa-heading p { margin: 0; color: white; font-size: 16px; }
.article-qa-list { align-self: center; border-top: 1px solid rgba(255,255,255,.38); }
.article-qa-item { border-bottom: 1px solid rgba(255,255,255,.38); }
.article-qa-item summary { display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 24px; padding: 22px 0; color: white; font: 700 21px/1.15 var(--font-castledown); cursor: pointer; list-style: none; }
.article-qa-item summary::-webkit-details-marker { display: none; }
.article-qa-item summary i { position: relative; width: 34px; height: 34px; border-radius: 50%; background: #010219; transition: transform .32s var(--motion-natural), background-color .25s ease; }
.article-qa-item summary i::before, .article-qa-item summary i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; border-radius: 2px; background: white; transform: translate(-50%, -50%); }
.article-qa-item summary:hover i { background: white; }
.article-qa-item summary:hover i::before, .article-qa-item summary:hover i::after { background: #010219; }
.article-qa-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .25s ease; }
.article-qa-item[open] summary i { transform: rotate(180deg); }
.article-qa-item[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }

/* Open, at rest: the circle stays light, so an open row reads as open from
   across the page rather than only by its content being visible. */
.article-qa-item[open] summary i { background: white; }
.article-qa-item[open] summary i::before, .article-qa-item[open] summary i::after { background: #010219; }

/* Open, hovered: straight back to dark. Hover always flips whatever it finds,
   which is what makes the control feel like a switch rather than a lamp. */
.article-qa-item[open] summary:hover i { background: #010219; }
.article-qa-item[open] summary:hover i::before, .article-qa-item[open] summary:hover i::after { background: white; }
.article-qa-item > p { margin: -5px 58px 24px 0; color: white; font-size: 16px; line-height: 1.55; }
.reality-source-panel { width: 100%; margin: 96px auto 0; background: #010219; color: white; box-shadow: 0 0 0 100vmax #010219; clip-path: inset(0 -100vmax); }
.reality-charge { width: 100%; margin: 0 auto; padding: clamp(54px, 6vw, 82px) 0; background: transparent; color: white; }
.reality-charge-title { text-align: center; }
.reality-charge-title > span { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; color: white; }
.reality-charge h2 { max-width: none; margin: 20px auto 42px; color: #1964ff; font-size: clamp(42px, 4.6vw, 62px); }
.reality-charge-copy { max-width: 920px; margin: 0 auto; color: white; text-align: center; }
.reality-charge-copy p { margin: 0; }
.reality-charge-copy p + p { margin-top: 22px; }
.article-source { position: relative; width: 100%; margin: 0 auto; padding: 34px 0 78px; border-top: 0; background: transparent; color: white; }
.article-source::before { content: ""; position: absolute; top: 0; left: 50%; width: min(920px, 100%); height: 1px; background: rgba(255,255,255,.65); transform: translateX(-50%); }
.article-source > span { display: block; max-width: 920px; margin: 0 auto; }
.article-source p { max-width: 920px; margin: 14px auto 0; color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.55; }
.article-source p + p { margin-top: 0; }
.article-source a { color: #1964ff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.chinese-market-grid { display: grid; gap: clamp(78px, 9vw, 128px); margin: 104px 0; }
.chinese-market-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(42px, 6vw, 82px); }
.chinese-market-card:nth-child(even) .chinese-market-image { order: 2; }
.chinese-market-image { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 24px; object-fit: cover; }
.market-story { align-self: center; padding: 0; }
.market-story > span, .marketplace-links > div:first-child > span { color: #1964ff; font: 700 12px/1 var(--font-castledown); letter-spacing: .13em; text-transform: uppercase; }
.market-story h2 { margin: 18px 0 22px; color: #010219; font: 900 clamp(38px, 4vw, 56px)/.98 var(--font-castledown); }
.market-story p { margin: 0; font-size: 16px; line-height: 1.55; }
.market-story p + p { margin-top: 16px; }
.market-story strong { font-family: var(--font-castledown); font-weight: 900; }
.marketplace-links { margin: 110px 0 88px; padding: clamp(34px, 5vw, 60px); border-radius: 28px; background: #c0d4ff; }
.marketplace-links h2 { margin: 16px 0 12px; font-size: clamp(44px, 5vw, 66px); }
.marketplace-links > div:first-child > p { margin: 0; }
.marketplace-link-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 40px; }
.marketplace-link-grid a { display: flex; min-width: 0; height: 116px; padding: 18px; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-radius: 18px; background: white; color: #010219; box-shadow: 0 12px 28px rgba(1,2,25,.08); transition: transform .35s var(--motion-natural), box-shadow .35s var(--motion-natural); }
.marketplace-link-grid a:hover { transform: translateY(-6px); box-shadow: 0 20px 36px rgba(1,2,25,.15); }
.marketplace-link-grid img { max-width: 100%; max-height: 30px; }
.marketplace-link-grid span { font: 700 10px/1 var(--font-castledown); letter-spacing: .08em; text-transform: uppercase; }
.marketplace-links-dark { margin: 64px auto 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
.marketplace-links-dark > div:first-child > span { display: block; color: #1964ff; font: 900 clamp(22px, 2.35vw, 31px)/1.1 var(--font-castledown); letter-spacing: 0; text-align: center; text-transform: none; }
.marketplace-links-dark .marketplace-link-grid { margin-top: 28px; }
.marketplace-links-dark .marketplace-link-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.marketplace-links-dark .marketplace-link-grid img { width: 132px; height: auto; max-width: 100%; max-height: none; }
.marketplace-links-dark .marketplace-link-grid a { display: grid; grid-template-rows: 1fr auto; justify-items: center; }
.marketplace-links-dark .marketplace-link-grid img { align-self: center; }
.marketplace-links-dark .marketplace-link-grid img[alt="OLX"] { width: 84px; }
.marketplace-links-dark .marketplace-link-grid img[alt="Standvirtual"],
.marketplace-links-dark .marketplace-link-grid img[alt="OTOMOTO"],
.marketplace-links-dark .marketplace-link-grid img[alt="AutoTrader"] { width: 148px; }
.off-grid-marketplace { display: grid; grid-template-columns: 194.4px 216px; align-items: center; gap: 39.6px; width: min(519.3px, 100%); height: 108px; margin: 54px auto 0; padding: 19.8px 27px 19.8px 42.3px; border-radius: 999px; background: #1964ff; color: white; text-align: left; box-shadow: none; }
.off-grid-marketplace > strong { width: 194.4px; font: 700 23.4px/1.03 var(--font-castledown); letter-spacing: -.01em; transform: translateY(-1px); }
.off-grid-marketplace > a { display: grid; place-items: center; width: 216px; height: 72px; padding: 0; border-radius: 999px; background: white; box-shadow: 0 7px 18px rgba(1,2,25,.12); transition: transform .38s var(--motion-natural), box-shadow .38s var(--motion-natural); }
.off-grid-marketplace > a:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 15px 30px rgba(1,2,25,.2); }
.off-grid-marketplace img { display: block; width: 176.2px; height: auto; }
@media (max-width: 640px) {
  .off-grid-marketplace { margin-top: 48px; }
  /* The base rule pins height: 108px for the one-row desktop layout. Stacking it
     into two rows without releasing that height is what pushed the logo out of
     the pill and over the sources below. */
  .off-grid-marketplace { grid-template-columns: 1fr; gap: 16px; height: auto; min-height: 0; padding: 26px; border-radius: 34px; text-align: center; }
  /* Both children carry fixed widths for the desktop two-column pill — 194.4px and
     216px. In a single 1fr column a fixed-width item is not stretched, it is
     parked at the start, which is what left the button hanging off to the left.
     Each one releases its own width and centres itself. */
  .off-grid-marketplace > strong { width: auto; max-width: 280px; margin: 0 auto; font-size: 24px; }
  .off-grid-marketplace > a { width: min(216px, 100%); height: auto; min-height: 64px; margin: 0 auto; padding: 14px 28px; }
  .off-grid-marketplace img { width: min(180px, 100%); }
}

@media (max-width: 950px) {
  .news-section { min-height: auto; }
  .news-cards { transform: translateX(var(--news-shift-tablet)); }
  .news-card { flex-basis: calc((100% - 27px) / 2); }
  .all-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .all-news-card, .all-news-card:nth-child(n) { grid-column: span 1; height: 450px; }
  .marketplace-link-grid, .marketplace-links-dark .marketplace-link-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .news-section { padding: 42px 20px 70px; }
  .news-heading > p { font-size: 11px; line-height: 32px; letter-spacing: 5px; }
  .news-heading h2 { margin-top: 0; font-size: 60px; }
  .news-heading > span { margin: 28px auto 0; max-width: 330px; font-size: 17px; }
  .news-controls { margin-top: 32px; }
  .news-cards { transform: translateX(var(--news-shift-mobile)); }
  .news-card { flex-basis: 100%; }
  .news-actions { align-items: flex-end; }
  .news-view-all { max-width: 190px; text-align: center; }
  .all-news-intro { padding: 70px 0 48px; }
  .all-news-intro h1 { font-size: 64px; }
  .all-news-intro > span { font-size: 17px; }
  .all-news-discovery { width: calc(100% - 40px); margin: -8px auto 36px; gap: 10px; }
  .all-news-search { width: calc(100% - 155px); height: 46px; }
  .all-news-search input { padding-left: 46px; font-size: 14px; }
  .all-news-search-icon { left: 18px; }
  .all-news-filter-menu { width: 145px; }
  .all-news-filter-menu summary { height: 46px; padding: 0 15px; font-size: 13px; }
  .all-news-filter-dropdown { width: min(245px, calc(100vw - 40px)); }
  .all-news-grid { width: calc(100% - 40px); grid-template-columns: 1fr; }
  .all-news-pagination { width: calc(100% - 40px); margin-top: 40px; gap: 8px; }
  .all-news-pagination button, .all-news-pagination .page-numbers { width: 38px; height: 38px; }
  .all-news-card, .all-news-card:nth-child(n) { height: 430px; }
  .news-card { height: 420px; }
  .news-card-copy h3 { font-size: 30px; }
  /* The offset that clears the nav belongs to the dark header here, not to the
     light article, or a pale strip would appear above the header. */
  .article-header { padding-top: 132px; }
  .article-page { --article-hero-half: 34vw; }   /* half of the 68vw hero below */
  .chinese-market-grid { gap: 72px; margin: 72px 0; }
  .chinese-market-card { grid-template-columns: 1fr; gap: 28px; }
  .chinese-market-card:nth-child(even) .chinese-market-image { order: 0; }
  .chinese-market-image { aspect-ratio: 4 / 3; border-radius: 18px; }
  .marketplace-link-grid, .marketplace-links-dark .marketplace-link-grid { grid-template-columns: repeat(2, 1fr); }
  .article-back { position: static; display: block; width: max-content; margin-left: 20px; }
  .article-intro { padding-top: 48px; padding-bottom: 45px; }
  .article-hero-wrap { border-radius: 16px; -webkit-clip-path: inset(0 round 16px); clip-path: inset(0 round 16px); }
  .article-hero { height: 68vw; border-radius: 16px; -webkit-clip-path: inset(0 round 16px); clip-path: inset(0 round 16px); }
  .article-body { padding-top: 48px; }
  .article-body-feature { width: calc(100% - 32px); padding-top: 45px; }
  .short-charge { margin: 44px 0 64px; padding: 28px 20px; border-radius: 22px; }
  .short-charge-heading { display: block; }
  .short-charge-heading h2 { margin-top: 12px; font-size: 49px; }
  .short-charge-heading p { margin-top: 14px; }
  .short-charge ul { grid-template-columns: 1fr; }
  .short-charge li { min-height: 0; padding: 19px; }
  .short-charge li strong { margin-bottom: 8px; }
  .article-split { grid-template-columns: 1fr; gap: 30px; margin: 68px 0; }
  .article-split img { min-height: 0; height: 88vw; border-radius: 18px; }
  .article-split h2 { font-size: 42px; }
  .maintenance-points { grid-template-columns: 1fr; margin: 22px 0 68px; }
  .maintenance-points article, .maintenance-points article:first-child, .maintenance-points article:last-child { padding: 18px 0; }
  .maintenance-points article + article::before { top: 0; right: 0; bottom: auto; width: auto; height: 1px; }
  .maintenance-needs-columns { grid-template-columns: 1fr; gap: 38px; margin: 28px 0 68px; }
  .maintenance-needs-columns > div + div { padding: 0; }
  .article-qa { grid-template-columns: 1fr; gap: 28px; margin: 72px 0; padding: 28px 20px; border-radius: 20px; }
  .article-qa-heading h2 { font-size: 46px; }
  .article-qa-item summary { grid-template-columns: 1fr 30px; gap: 14px; font-size: 19px; }
  .article-qa-item summary i { width: 30px; height: 30px; }
  .article-qa-item > p { margin-right: 0; }
  .reality-source-panel { margin-top: 72px; }
  .reality-charge { padding: 48px 0; }
  .reality-charge h2 { font-size: 42px; }
  .reality-charge-copy p + p { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-scroll-reveal { opacity: 1 !important; translate: none !important; scale: 1 !important; transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-sequence { transform: none !important; }
  .hero-frame, .find-ev-blue-arc { transform: none !important; }
  .scroll-reveal, .scroll-reveal-fade, .scroll-reveal-arc { opacity: 1 !important; translate: none !important; scale: 1 !important; transition: none !important; }
  .section-head > *, .filters, .ecosystem-head > *, .principles article,
  .proof-inner > *, .fact-card, .market-card, .ask-copy, .assistant-panel,
  .trust-grid > .principles, .ecosystem::before, .facts-visual img { animation: none !important; }
}

/* Myths & Facts — Figma section */
.myths-facts-section { height: min(68.8vw, 924px); min-height: 760px; padding: 0; background: #efebe5; color: #010219; }
.myths-scene { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: #f3f0eb; }
.myths-background { position: absolute; z-index: -2; left: 50%; width: max(100%, 1416px); translate: -50% 0; object-fit: cover; pointer-events: none; }
.myths-background-upper { top: auto; bottom: 26.41%; height: 87.34%; object-position: center bottom; }
.myths-background-lower { top: 73.6%; height: 41.13%; }
.myths-heading { position: absolute; z-index: 2; top: 5.1%; left: 50%; translate: -50% 0; width: min(753px, 72vw); text-align: center; font-family: var(--font-castledown); }
.myths-heading > p { margin: 0 0 14px; color: var(--blue); font-size: 16px; line-height: 23px; letter-spacing: 8px; }
.myths-heading h2 { margin: 0; color: #010219; font-size: clamp(43px, 4vw, 54px); font-weight: 400; line-height: .985; letter-spacing: -.015em; }
.myths-heading h2 > span { display: block; }
.myths-heading h2 strong { font-weight: 900; }
.myths-heading > span { display: block; margin-top: 28px; color: #010219; font-size: clamp(18px, 1.68vw, 23px); line-height: 1.27; }
.myths-carousel { position: absolute; z-index: 4; top: 32.58%; left: 50%; translate: -50% 0; width: min(695px, 58vw); height: 274px; touch-action: pan-y; }
.myths-card { position: absolute; inset: 0 45px; padding: 30px 28px 22px 41px; overflow: hidden; border: 1px solid rgba(255,255,255,.58); border-radius: 30px; background: rgba(255,255,255,.2); box-shadow: 0 4px 30px rgba(0,0,0,.1); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); will-change: transform, opacity; }
.myths-card-in { z-index: 4; }.myths-card-out { z-index: 5; pointer-events: none; }
.myths-card-in-next { animation: myths-card-enter-next .75s cubic-bezier(.4,0,.2,1) both; }.myths-card-out-next { animation: myths-card-exit-next .75s cubic-bezier(.4,0,.2,1) both; }
.myths-card-in-prev { animation: myths-card-enter-prev .75s cubic-bezier(.4,0,.2,1) both; }.myths-card-out-prev { animation: myths-card-exit-prev .75s cubic-bezier(.4,0,.2,1) both; }
@keyframes myths-card-enter-next { 0%, 4% { opacity: 0; transform: translateX(105%) scale(.8); } 100% { opacity: 1; transform: none; } }
@keyframes myths-card-exit-next { 0% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateX(-105%) scale(.8); } }
@keyframes myths-card-enter-prev { 0%, 4% { opacity: 0; transform: translateX(-105%) scale(.8); } 100% { opacity: 1; transform: none; } }
@keyframes myths-card-exit-prev { 0% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateX(105%) scale(.8); } }
.myths-card-top { display: flex; align-items: center; justify-content: space-between; height: 40px; font: 400 14px/1 var(--font-castledown); }
.myths-tag { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 8px; border-radius: 999px; background: #d7e4ff; color: var(--blue); font: 900 14px/1 var(--font-castledown); }
.myths-tag b { position: relative; display: block; width: 24px; height: 24px; flex: none; overflow: hidden; border-radius: 50%; background: var(--blue); color: transparent; }
.myths-tag b::before, .myths-tag b::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; border-radius: 999px; background: white; transform-origin: center; }
.myths-tag b::before { transform: translate(-50%, -50%) rotate(45deg); }
.myths-tag b::after { transform: translate(-50%, -50%) rotate(-45deg); }
.myths-tag-fact b { background: url("../img/fact-icon-circle.svg") center / contain no-repeat; }
.myths-tag-fact b::before, .myths-tag-fact b::after { display: none; }
.myths-card h3 { width: calc(100% - 14px); margin: 15px 0 13px; color: #010219; font: 700 45px/.981 var(--font-castledown); letter-spacing: -.01em; }
.myths-card > p { width: calc(100% - 14px); margin: 0; color: #595959; font: 400 18px/1.15 var(--font-castledown); }
.myths-arrow { position: absolute; z-index: 3; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 35px; height: 35px; padding: 0; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(255,255,255,.28); color: transparent; font-size: 0; cursor: pointer; backdrop-filter: blur(5px); transition: opacity .2s, transform .2s, background .2s; }
.myths-arrow::before { content: ""; position: absolute; top: calc(50% - 1px); left: 50%; display: block; width: 8px; height: 8px; border-right: 1px solid #606060; border-bottom: 1px solid #606060; transform-origin: center; }
.myths-arrow-prev::before { left: calc(50% + 1px); transform: translate(-50%, -50%) rotate(135deg); }
.myths-arrow-next::before { left: calc(50% - 1px); transform: translate(-50%, -50%) rotate(-45deg); }
.myths-arrow:not(:disabled):hover { transform: scale(1.08); background: rgba(255,255,255,.52); }
.myths-arrow:disabled { opacity: .28; cursor: default; }
.myths-arrow-prev { left: 0; }.myths-arrow-next { right: 0; }
.myths-dots { position: absolute; z-index: 5; top: 62.75%; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 7px; }
.myths-dots button { width: 4px; height: 4px; padding: 0; border: 0; border-radius: 50%; background: #cfd1d4; cursor: pointer; transition: width .25s, background .25s; }
.myths-dots button.active { width: 7px; height: 7px; background: var(--blue); }
.myths-car { position: absolute; z-index: 12; top: auto; bottom: 6.9%; left: var(--car-left-default); width: min(47.65vw, 640px); height: auto; object-fit: contain; object-position: center bottom; transition: left .75s cubic-bezier(.22,1,.36,1); filter: drop-shadow(0 14px 10px rgba(31,30,28,.14)); will-change: left; }
.myths-charger { position: absolute; z-index: 2; top: auto; bottom: 22.5%; right: 2.08%; width: min(12.51vw, 168px); height: auto; object-fit: contain; object-position: center bottom; }

@media (min-width: 951px) {
  .myths-charger { right: calc(25% - min(173.75px, 14.5vw) - min(84px, 6.255vw)); transform: translateX(-20%); }
  .myths-car { left: var(--car-left-desktop); }
  .myths-dots { top: calc(32.58% + 286px); }
}

@media (max-width: 950px) {
  .myths-facts-section { min-height: 760px; height: 82vw; }
  .myths-carousel { width: min(695px, 82vw); }
  .myths-heading { width: 82vw; }
  .myths-card h3 { font-size: 39px; }
  .myths-car { top: auto; bottom: 13.5%; width: 54vw; }
  .myths-charger { top: auto; bottom: 22.5%; width: 15vw; }
}

@media (max-width: 720px) {
  .myths-facts-section { height: 760px; min-height: 760px; }
  .myths-heading { top: 8%; width: calc(100% - 36px); }
  .myths-heading > p { font-size: 11px; letter-spacing: 5px; }
  /* The heading was capped at 72vw with the lines set to nowrap, so on a phone
     "Separating myths from facts," ran straight off the right edge — which also
     made the centred block look off-centre. It wraps now. */
  .myths-heading { width: calc(100% - 40px); }
  .myths-heading h2 { font-size: clamp(24px, 7vw, 31px); }
  .myths-heading h2 > span { white-space: normal; }
  .myths-heading > span { margin-top: 18px; font-size: 17px; }
  /* Card metrics measured against the longest fact in Castledown: at 32px/16px in
     a 250px box the copy overflowed by 34px on a 390px screen and 84px on a 320px
     one, and the card clips. These sizes leave the worst case ~20px of headroom. */
  .myths-carousel { top: 30%; width: calc(100% - 20px); height: 264px; }
  .myths-card { inset-inline: 38px; padding: 22px 20px; border-radius: 24px; }
  .myths-card h3 { width: calc(100% - 10px); margin: 12px 0 11px; font-size: 27px; }
  .myths-card > p { width: calc(100% - 10px); font-size: 15px; }
  .myths-arrow { width: 31px; height: 31px; font-size: 28px; }
  .myths-dots { top: calc(30% + 276px); }
}

/* On a narrow phone the arrows cost 76px of card width that the copy needs more.
   Swiping already moves the carousel and the dots still show where you are, so
   the arrows step aside rather than the text shrinking further. */
@media (max-width: 480px) {
  .myths-arrow { display: none; }
  .myths-card { inset-inline: 14px; padding: 20px 18px; }
  .myths-card h3 { font-size: 26px; }
  .myths-card > p { font-size: 15px; }
  .myths-car { top: auto; bottom: 15%; left: var(--car-left-mobile); width: 62vw; }
  .myths-charger { top: auto; bottom: 22.5%; right: 4%; width: 21vw; }
}

@media (min-width: 721px) and (max-width: 1199px) {
  .myths-car { bottom: 13.5%; }
}

/* Keep every main chapter at least as tall as the visible screen. */
.hero-story,
.myths-facts-section,
.news-section,
.electric-answers-section,
.find-ev-section {
  min-height: 100svh;
}

/* ============================================================================
   Block editor markup
   ----------------------------------------------------------------------------
   The article layouts above were written for hand-authored HTML. Inside the
   WordPress editor the same layouts are produced by the block patterns in
   /patterns, and the editor's markup differs in three ways it will not let a
   pattern avoid:

     · the kicker is a paragraph with .article-kicker, not a bare <span>
     · a list item is plain text after its <strong>, with no <span> around it
     · <details> has no inner <i>, so the open/close circle has to be drawn
       on the <summary> itself

   These rules make the block version land on the same design. Nothing here
   changes the hand-written markup, which still matches the selectors above.
   ========================================================================= */

/* --- kickers ------------------------------------------------------------- */

.article-qa-heading > .article-kicker { margin: 0; color: #010219; }
.article-source > .article-kicker { display: block; max-width: 920px; margin: 0 auto; }
.reality-charge-title > .article-kicker {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.45); border-radius: 999px; color: white;
}

/* --- the short charge ---------------------------------------------------- */

/* The figure line carries the body style on the <li> itself, so the text after
   <strong> is styled whether or not it is wrapped. The transition list repeats
   the one above in full: a second `transition` declaration replaces the first
   outright rather than adding to it, and dropping the others made the cards
   snap on hover instead of lifting. */
.short-charge li {
  color: #010219; font-size: 14px; line-height: 1.35;
  transition: background-color .42s var(--motion-natural), border-color .42s var(--motion-natural),
              transform .42s var(--motion-natural), box-shadow .42s var(--motion-natural),
              color .32s ease;
}
.short-charge li:hover { color: white; }
.short-charge-heading > h2 { margin: 0; }
.short-charge ul.wp-block-list { display: grid; margin: 0; padding: 0; list-style: none; }

/* --- Quick Q&A ----------------------------------------------------------- */

.article-qa > .wp-block-group { margin: 0; }
.article-qa-heading > h2 { margin: 18px 0; }
.article-qa-heading > p:not(.article-kicker) { margin: 0; }
.article-qa-list > .wp-block-details { border-bottom: 1px solid rgba(255,255,255,.38); }

/* Draws the circle the hand-written markup gets from <i>. */
.article-qa-item > summary { position: relative; padding-right: 58px; }
.article-qa-item > summary::after {
  content: ""; position: absolute; top: 50%; right: 0;
  width: 34px; height: 34px; margin-top: -17px;
  border-radius: 50%; background: #010219;
  background-image:
    linear-gradient(white, white),
    linear-gradient(white, white);
  background-size: 12px 1.5px, 1.5px 12px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform .32s var(--motion-natural), background-color .25s ease, background-size .25s ease;
}
/* The plus is not a character — it is two bars painted as background gradients,
   which is the only way to get a shape this crisp out of a pseudo-element. The
   catch is that a gradient's colour cannot be changed by setting `color`: the
   whole background-image has to be redeclared. The original hover rule changed
   only background-color, so a white circle ended up carrying white bars and the
   plus vanished at exactly the moment the reader pointed at it.
   Four states, and each one names both colours. */

/* Closed and hovered, and open at rest: light circle, dark bars. */
.article-qa-item > summary:hover::after,
.article-qa-item[open] > summary::after {
  background-color: white;
  background-image: linear-gradient(#010219, #010219), linear-gradient(#010219, #010219);
}

.article-qa-item[open] > summary::after { transform: rotate(180deg); background-size: 12px 1.5px, 1.5px 0; }

/* Open and hovered: flipped back to dark, so hover always inverts. */
.article-qa-item[open] > summary:hover::after {
  background-color: #010219;
  background-image: linear-gradient(white, white), linear-gradient(white, white);
}

/* --- closing panel ------------------------------------------------------- */

.reality-source-panel > .wp-block-group { margin: 0; }
.reality-charge-title > h2 { margin: 20px auto 42px; }
.article-source > p:not(.article-kicker) { max-width: 920px; margin: 14px auto 0; color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.55; }

/* --- text and image side by side ----------------------------------------- */

.article-split { margin: 56px 0; gap: clamp(28px, 4vw, 56px); }
.article-split h2 { margin-top: 0; }
.article-split-image img { width: 100%; height: auto; border-radius: 22px; }
.article-split-image figcaption { margin-top: 12px; color: rgba(1,2,25,.6); font-size: 13px; line-height: 1.45; }

@media (max-width: 900px) {
  /* Picture first, so the reader sees it before the copy that explains it.
     `order` and not `flex-direction`: this block is a grid, and grid ignores
     flex-direction entirely — the rule that used to be here read plausibly and
     did nothing at all, which is the worst kind of CSS. Naming the media column
     also means the writer can put the image on either side on a wide screen
     without the phone layout following it around. */
  .article-split > .article-split-media { order: -1; }
  .article-split > .wp-block-column { flex-basis: 100% !important; }
  .article-qa-item > summary { padding-right: 44px; }
  .article-qa-item > summary::after { width: 30px; height: 30px; margin-top: -15px; }
}

/* --- two-column blocks, made independent of child order -------------------

   .article-qa and .article-split are two-column grids that relied on having
   exactly two children. Content coming from the editor cannot promise that:
   anything empty that WordPress leaves between the two takes a cell of its own
   and pushes the second column down onto the next row, which is what collapsed
   both of them into a single column.

   So: empty children stop being grid items, and the two that matter are placed
   by name instead of by counting. */

.article-qa > :empty,
.article-split > :empty { display: none; }

/* Both grids are declared again here, further down the sheet. The elements now
   also carry .wp-block-group, which has the same specificity as .article-qa, so
   whichever rule comes last wins — and core's stylesheet is not ours to order.
   Repeating them settles it. */
.article-qa {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
}
.article-split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
  align-items: stretch;
}

@media (max-width: 900px) {
  .article-qa, .article-split { grid-template-columns: 1fr; }
}

.article-qa > .article-qa-heading { grid-column: 1; grid-row: 1; }
.article-qa > .article-qa-list { grid-column: 2; grid-row: 1; }

/* The image in a split used to be a bare <img>, and the editor's image block
   wraps it in a <figure>. The height rules were written for the image, so they
   are handed to the figure as well — without this the picture keeps its natural
   height and the column beside it no longer lines up. */
.article-split > .wp-block-image {
  height: 100%; margin: 0;
  grid-column: 1; grid-row: 1;
}
.article-split > .wp-block-image img { width: 100%; height: 100%; min-height: 520px; border-radius: 24px; object-fit: cover; }
.article-split > .wp-block-group { grid-column: 2; grid-row: 1; align-self: center; }

/* Reversed splits — the ones whose picture sits on the right — keep their order. */
.article-split > .wp-block-group:first-child { grid-column: 1; }
.article-split > .wp-block-group:first-child ~ .wp-block-image { grid-column: 2; }

@media (max-width: 900px) {
  .article-qa > .article-qa-heading,
  .article-qa > .article-qa-list,
  .article-split > .wp-block-image,
  .article-split > .wp-block-group,
  .article-split > .wp-block-group:first-child,
  .article-split > .wp-block-group:first-child ~ .wp-block-image {
    grid-column: 1; grid-row: auto;
  }
  .article-split > .wp-block-image img { min-height: 0; height: 88vw; border-radius: 18px; }
}

/* Filtering on News & Stories hides cards outright. */
.news-card[hidden] { display: none; }

/* --- if the legacy group wrapper ever comes back ---------------------------

   functions.php removes the filter that inserts
   `<div class="wp-block-group__inner-container">` inside every group block. If a
   future WordPress renames that function the removal quietly stops working, and
   the two-column layouts would collapse again — so these rules make the wrapper
   harmless rather than relying on it never returning.

   `display: contents` takes the wrapper out of the layout entirely: its children
   become items of the grid above it, which is all the grids need. Selectors are
   a separate matter — the wrapper is still there in the document, so the few
   rules written with `>` are repeated here with it in the path. */

.wp-block-group__inner-container { display: contents; }

.short-charge > .wp-block-group__inner-container > .short-charge-heading > span,
.article-qa > .wp-block-group__inner-container > .article-qa-heading > span,
.article-qa-heading > .wp-block-group__inner-container > span,
.reality-charge-title > .wp-block-group__inner-container > span,
.article-source > .wp-block-group__inner-container > span {
  color: #1964ff; font: 700 12px/1 var(--font-castledown);
  letter-spacing: .13em; text-transform: uppercase;
}
.article-qa-heading > .wp-block-group__inner-container > span { color: #010219; }
.article-source > .wp-block-group__inner-container > span { display: block; max-width: 920px; margin: 0 auto; }
.reality-charge-title > .wp-block-group__inner-container > span {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; color: white;
}
.article-source > .wp-block-group__inner-container > p { max-width: 920px; margin: 14px auto 0; }
.article-split > .wp-block-group__inner-container > div { align-self: center; padding-right: clamp(0px, 2vw, 24px); }

/* ============================================================================
   Rodapé — redes sociais
   ----------------------------------------------------------------------------
   Uma coluna "Follow us" antes de Explore, com as redes da Electric EVidence, e
   a coluna da OLX Group reduzida a texto. As duas marcas deixam de disputar o
   mesmo espaço com o mesmo peso.
   ========================================================================= */

/* --- Follow us: coluna própria, antes de Explore ------------------------ */
.has-follow-col .final-footer-main { grid-template-columns: 281px 110px 156px 219px; }
.final-footer-follow-col > div { display: flex; gap: 8px; }

.final-footer-follow-col > div a {
  width: 31px; height: 31px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: #ffffff;
  transition: background-color .22s ease, transform .22s ease;
}
.final-footer-follow-col > div a:hover { background: var(--navy); transform: translateY(-1px); }

/* Os SVG das redes trazem o branco escrito lá dentro, por isso não obedecem à
   cor. Usados como máscara, o ficheiro passa a dar só a forma e a cor vem do
   background — que é o que permite escurecer a caixa e clarear o símbolo ao
   mesmo tempo. */
.eev-ico {
  display: block; width: 16px; height: 16px;
  background-color: var(--navy);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain;    mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: background-color .22s ease;
}
.final-footer-follow-col > div a:hover .eev-ico { background-color: #ffffff; }
.eev-ico-linkedin  { -webkit-mask-image: url("../img/footer-linkedin.svg"); mask-image: url("../img/footer-linkedin.svg"); }
.eev-ico-instagram { -webkit-mask-image: url("../img/footer-instagram.svg"); mask-image: url("../img/footer-instagram.svg"); }

/* --- coluna da OLX Group ------------------------------------------------ */
.final-footer h3 a { transition: opacity .2s; }
.final-footer h3 a:hover { opacity: .7; }
.final-footer-social > .final-footer-social-text { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.final-footer-social > .final-footer-social-text a {
  width: auto; height: auto; display: inline; padding: 0;
  border: 0; border-radius: 0; background: none;
  font-size: 11.7px; line-height: 1.1;
  text-decoration: underline; text-underline-offset: 3px; transition: opacity .2s;
}
.final-footer-social > .final-footer-social-text a:hover { opacity: .7; }
.final-footer-social > .final-footer-social-text .final-footer-divider { flex: none; width: 1px; height: 12px; background: rgba(255,255,255,.45); }

@media (max-width: 1120px) { .has-follow-col .final-footer-main { grid-template-columns: 250px 96px 130px 210px; } }
@media (max-width: 950px)  { .has-follow-col .final-footer-main { grid-template-columns: 1fr 1fr; } }

/* ============================================================================
   O still por trás do vídeo do topo
   ----------------------------------------------------------------------------
   Mesmo enquadramento do vídeo, por baixo dele. Só desaparece quando o vídeo
   tiver mesmo desenhado um fotograma — e se isso nunca acontecer, que é o que
   sucede em alguns browsers dentro de aplicações no iOS, fica ele.
   ========================================================================= */

.hero-poster {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* O vídeo fica por cima, mas invisível até ter mesmo um fotograma.
   Um <video> sem fotograma não é transparente: pinta um retângulo preto opaco,
   e tapava o still exatamente nos casos em que o still é preciso. Esconder o
   vídeo em vez de esconder o still resolve isso — e se o vídeo nunca chegar a
   correr, o que fica à vista é a fotografia, não um vazio. */
.hero-frame { z-index: 1; opacity: 0; }
.hero-sticky.has-video-frame .hero-frame { opacity: 1; transition: opacity .45s ease; }

/* A ordem de pintura tem de ficar declarada por inteiro.
   Dar z-index ao vídeo tirou-o do empilhamento por ordem do documento, e o
   gradiente — que não tinha z-index — passou a ficar por baixo dele: aparecia
   enquanto o vídeo estava invisível e desaparecia mal ele surgia. Com quatro
   camadas, deixar três ao critério da ordem do HTML é frágil. */
.hero-wash { z-index: 2; }
.hero-content { z-index: 3; }

@media (max-width: 720px) {
  .hero-poster { object-position: 66% center; }
}

/* ---------------------------------------------------------------------------
   The "Lead paragraph" block style.

   Two class names, one appearance. The eleven migrated articles carry
   `article-lead`, written in by the conversion script. Anything composed in the
   editor from now on carries `is-style-lead`, which is the name WordPress
   generates from a registered block style and is not ours to choose.

   Teaching the stylesheet both names costs four lines. The alternative — a
   migration that rewrites the class in eleven published posts — costs an
   afternoon and puts live content at risk to change nothing a reader can see.

   Kept at the end of the file so it lands after the rules it mirrors, which
   makes the pair behave identically regardless of how either is reached.
   --------------------------------------------------------------------------- */

.article-body .is-style-lead { color: #010219; font: 700 27px/1.25 var(--font-castledown); }
.article-body .is-style-lead strong { font-family: var(--font-castledown); font-weight: 900; }
.article-body-feature > .is-style-lead { width: 100%; margin-left: auto; margin-right: auto; }
.page-motion-ready .article-body-feature > .is-style-lead.page-scroll-reveal { translate: 0 0; }

/* ---------------------------------------------------------------------------
   The "Kicker" block style — the small blue line above a heading.

   Same two-names arrangement as the lead: `article-kicker` in the migrated
   articles, `is-style-kicker` from the block style. The declarations mirror the
   shared kicker rule higher up the sheet.
   --------------------------------------------------------------------------- */

.article-body .is-style-kicker {
	margin-bottom: 0;
	color: #1964ff;
	font: 700 12px/1 var(--font-castledown);
	letter-spacing: .13em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Colours and text sizes chosen in the editor.

   WordPress writes these as single classes — `.has-blue-color`. That is one
   class, and almost every rule in this stylesheet that sets a colour or a size
   is worth more than one class, so a writer's explicit choice would lose to the
   theme's default and appear to do nothing at all.

   The fix is to name each class twice. `.has-blue-color.has-blue-color` matches
   exactly the same elements — an element either carries the class or it does
   not — but counts as two classes, which is enough to win. It costs nothing at
   runtime and needs no `!important`, which would win too but would then be
   unwinnable by anything later.

   These sit at the very end of the file deliberately. Against the few theme
   rules that also weigh two classes, such as the lead paragraph, whichever
   comes last wins — and the one the writer picked by hand should be the one
   that survives.
   --------------------------------------------------------------------------- */

.has-blue-color.has-blue-color   { color: #1964ff; }
.has-navy-color.has-navy-color   { color: #010219; }
.has-grey-color.has-grey-color   { color: #383838; }
.has-beige-color.has-beige-color { color: #f5f3ef; }
.has-white-color.has-white-color { color: #ffffff; }

.has-blue-background-color.has-blue-background-color   { background-color: #1964ff; }
.has-navy-background-color.has-navy-background-color   { background-color: #010219; }
.has-grey-background-color.has-grey-background-color   { background-color: #383838; }
.has-beige-background-color.has-beige-background-color { background-color: #f5f3ef; }
.has-white-background-color.has-white-background-color { background-color: #ffffff; }

.has-kicker-font-size.has-kicker-font-size   { font-size: 12px; }
.has-small-font-size.has-small-font-size     { font-size: 14px; }
.has-normal-font-size.has-normal-font-size   { font-size: 18px; }
.has-lead-font-size.has-lead-font-size       { font-size: 27px; }
.has-heading-font-size.has-heading-font-size { font-size: 38px; }
.has-display-font-size.has-display-font-size { font-size: 58px; }

/* The larger two are article-heading sizes, and a heading set in the body font
   weight reads as a mistake. Line height has to come down with them too — 1.65
   is right for 18px prose and far too airy at 58. */
.has-heading-font-size.has-heading-font-size,
.has-display-font-size.has-display-font-size { font-weight: 900; line-height: 1.02; }

@media (max-width: 720px) {
	.has-display-font-size.has-display-font-size { font-size: 40px; }
	.has-heading-font-size.has-heading-font-size { font-size: 30px; }
}

/* ---------------------------------------------------------------------------
   Image and text side by side: the picture takes its height from the copy.

   The text column decides how tall the row is. The picture then fills whatever
   that turns out to be, cropping from its centre rather than letterboxing — so
   writing another paragraph makes the image taller, cutting one makes it
   shorter, and the two edges always line up.

   Why it did not already work: the pattern marked both columns as vertically
   centred, and WordPress implements that as `align-items: center` on a rule
   worth two classes. The `align-items: stretch` further up this sheet is worth
   one, and lost. The alignment is now gone from the patterns, and these rules
   are written to outweigh core's anyway — blocks somebody already inserted
   still carry the old classes, and they should heal on update rather than have
   to be rebuilt by hand.

   `.article-split.article-split` repeats the class only to raise the weight;
   it matches exactly the same elements.
   --------------------------------------------------------------------------- */

.wp-block-columns.article-split.article-split { align-items: stretch; }
.article-split > .wp-block-column.wp-block-column { align-self: stretch; }

/* The floor lives on the column, not on the picture. A minimum on the picture
   is a number the picture then contributes back to the row, which is how a
   floor quietly becomes a height. */
.article-split > .article-split-media {
	display: flex;
	flex-direction: column;
	min-height: 260px;
}

/* Two rules that look fussy and are the whole trick.
 *
 * `flex: 1 1 0` — not `1 1 auto`. With `auto`, a flex item starts from its own
 * natural size, and an image's natural size is its real proportions: a 2:3
 * photograph in a 485px column asks for 726px and gets it, so the picture ends
 * up setting the height it was supposed to be receiving. Starting from 0 means
 * it has no opinion, and grows into whatever the copy beside it leaves.
 *
 * `minmax(0, 1fr)` — not `1fr`. A plain `1fr` track refuses to shrink below its
 * content's minimum, and for an image that minimum is, again, its real height.
 * The explicit zero minimum is what lets the crop actually happen.
 *
 * Both are the same mistake in two different layout systems: an image will
 * quietly insist on its own proportions unless it is told, twice, that it may
 * not. */
.article-split > .article-split-media > .wp-block-image {
	flex: 1 1 0;
	min-height: 0;
	margin: 0;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
}

.article-split > .article-split-media > .wp-block-image > img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	object-position: center;
	border-radius: 22px;
}

/* Stacked on a phone there is no second column to match, so the picture goes
   back to a shape of its own — and, importantly, the whole flex arrangement is
   dismantled rather than half-dismantled.
 *
 * The bug this replaces is worth writing down. An earlier version set the
 * figure back to `display: block` here but left the column as a flex container,
 * so the figure kept the `flex: 1 1 0` it is given above. A flex-basis of zero
 * in an auto-height container means the item contributes no height at all, and
 * `flex-grow` then has no free space to distribute — so the column collapsed to
 * literally zero pixels. The picture spilled out of it and the copy, being next
 * in the flow, began at the top of the picture and ran straight over it.
 *
 * On a wide screen the same collapse happens and is invisible, because the
 * column beside it sets the row height. That is why this only ever showed up on
 * a phone, and why `display: block` on the column — not just on the figure — is
 * the actual fix. */
@media (max-width: 900px) {
	/* The container stops being a grid. A grid can put two things in one cell;
	   a column flex container cannot, whatever else goes wrong above. `order`
	   still works here, which is why this is flex rather than block — the
	   picture goes on top in both variants of the pattern.

	   Scoped to `.wp-block-columns` so it reaches only the blocks built from the
	   patterns. The eleven migrated articles use a group for the same layout and
	   have their own mobile rules further down; they are not part of this. */
	.wp-block-columns.article-split.article-split {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.article-split > .wp-block-column.wp-block-column {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		align-self: auto;
	}

	.article-split > .article-split-media {
		order: -1;
		display: block;
		min-height: 0;
	}

	/* Every one of these undoes something set for the two-column case. Left
	   half-undone, the figure keeps `flex: 1 1 0`, contributes no height to a
	   container that has no height of its own, and collapses to nothing — the
	   picture then spills out and the copy runs straight over it. */
	.article-split > .article-split-media > .wp-block-image {
		display: block;
		flex: none;
		min-height: 0;
		margin: 0;
	}

	.article-split > .article-split-media > .wp-block-image > img {
		display: block;
		width: 100%;
		height: 78vw;
		min-height: 0;
		object-fit: cover;
	}
}

/* --- deliberately NOT touching the migrated articles ------------------------

   An earlier version of this file extended the rules above to the layout the
   eleven launch articles use, where the image is a direct child of the split
   rather than inside a column. That was overreach: those articles were not what
   anybody complained about, they had been published and checked, and changing
   them turned a request about new posts into an edit of live pages.

   Their own rules, further up the sheet, stand untouched. If the height should
   follow the copy there too, that is a separate change, made on purpose, after
   the reason the grid stopped applying is actually understood rather than
   guessed at.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Short charge: the description text, with or without its <span>.

   The eleven migrated articles wrap each card's sentence in a <span>, and the
   rules higher up style that span. A card written in the editor may not have
   one — the pattern was missing it, and even with the pattern corrected the
   editor's rich text can drop a bare <span> when somebody retypes the line.

   A text node with no element around it cannot be selected by CSS at all. So
   the type is set on the <li> itself and the number overrides it. Whether the
   span survives or not, the card now reads the same.
   --------------------------------------------------------------------------- */

.short-charge li {
	color: #010219;
	font-size: 14px;
	line-height: 1.35;
}

.short-charge li strong {
	font-size: clamp(25px, 2.4vw, 35px);
	line-height: .95;
}

.short-charge li:hover { color: white; }