/* ============================================================
   ev-page.css — rMAR eeVee division page
   ------------------------------------------------------------
   Built entirely on base.css's own tokens (--color-primary,
   --color-accent, --color-border, --color-sky, --r-lg, --elev,
   etc.) — no new colour or radius system introduced. Buttons
   reuse .btn-primary-premium / .btn-outline-premium / .btn-amber
   from base.css verbatim; nothing here redefines them.

   CONTENT INTEGRITY — read before editing:
   This page deliberately omits or reframes several things shown
   in the founder's own reference screenshot:
     - No prices. None are verified anywhere in this project.
       Cards show "Contact for Price" instead of a number.
     - No customer/vehicle/CO2 count statistics (the reference
       showed "500+ Happy Customers", "1,000+ Vehicles Sold",
       "950+ Tons CO2 Saved" etc.) — unverifiable, and this
       project has removed exactly this category of number twice
       already. The stats band below uses only company-wide
       figures already verified and shown elsewhere on the site.
     - No "Authorized Distributor" claim — the founder corrected
       this exact wording to "Partners & Brands We Work With" a
       few turns before this page was built, for the same reason.
     - The savings calculator computes live from user input; nothing
       is pre-filled with the reference's example output numbers.
   ============================================================ */

:root {
  --ev-r-sm: 10px;
  --ev-r-md: 18px;
  --ev-r-lg: 28px;
  --ev-elev: 0 18px 44px -28px rgba(6, 58, 120, 0.4);
}

.ev-page main { overflow-x: clip; }

/* ---------------------------------------------------------------
   SHARED SECTION SHELL
   --------------------------------------------------------------- */
.evp-sec { padding: clamp(3rem, 6vw, 6rem) 0; }

/* Why Choose EV runs a single row of six short items, so it is far shorter
   than the product and calculator sections the base padding was tuned for —
   at 1440px that clamp resolves to ~86px top AND bottom, which reads as dead
   space around a compact band. Roughly halved here, and scoped to this one
   section so nothing else on the page changes.

   Still a clamp, so it stays proportional on tablet and mobile rather than
   collapsing to a fixed value. */
.evp-sec--compact { padding: clamp(1.75rem, 3.2vw, 3rem) 0; }
/* Was var(--color-bg) = #F8FAFD, which is ~2% away from white — the eye
   cannot see a section boundary at that distance, which is a large part of
   the "everything looks like one flat page" problem. Deepened to a real but
   still-subtle tint, with a soft inner top edge so the section reads as a
   distinct plane rather than a slightly different white. */
.evp-sec--tint {
  background:
    linear-gradient(180deg, rgba(0, 42, 97, 0.045) 0%, transparent 180px),
    #EFF4FA;
  border-top: 1px solid rgba(0, 42, 97, 0.06);
  border-bottom: 1px solid rgba(0, 42, 97, 0.06);
}
.evp-sec--navy { background: linear-gradient(155deg, #063A78 0%, #0D4A96 65%, #2C6FC4 140%); color: #fff; }

.evp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.85rem;
}

.evp-eyebrow i { font-size: 0.9rem; }

.evp-title {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  margin: 0 0 0.75rem;
}

.evp-lede { font-size: 1rem; line-height: 1.7; color: var(--color-text-muted); max-width: 62ch; margin: 0; }

.evp-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

/* CASCADE FIX for "Why Choose EV". This rule previously sat BEFORE
   .evp-head-row above with equal specificity (one class each), so the base
   rule's align-items:flex-end and larger margin-bottom — appearing later in
   the file — silently won. text-align:left survived only because the base
   rule never sets text-align, but align-items:flex-end still pushed the
   column's items toward the right edge on the cross axis, which is the
   misalignment that remained visible even though "left-aligned" text was
   technically applied.

   Two changes fix this for good rather than depending on file order:
     1. moved to load after .evp-head-row
     2. selector is now .evp-head-row.evp-head-row--tight (two classes), so
        its specificity is strictly higher than the single-class base rule
        and it wins regardless of where either rule sits in the file. */
.evp-head-row.evp-head-row--tight {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-bottom: clamp(1.1rem, 1.8vw, 1.5rem);
}
.evp-head-row.evp-head-row--tight .evp-eyebrow { margin-bottom: 0.5rem; }

/* Centred variant. The base .evp-head-row is align-items:flex-end (correct
   for a heading sitting beside a right-hand link). An inline style that only
   set justify-content and flex-direction could not undo that — flex-end on
   the cross axis pushed the centred heading to the right edge, which is the
   misalignment visible in the current build. */
.evp-head-row--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */
.evp-hero {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
  background: linear-gradient(180deg, #EAF1F9 0%, #F4F7FB 60%, #FFFFFF 100%);
  overflow: hidden;
}

.evp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.62fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

.evp-hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.evp-hero-brand i { color: var(--color-accent); }

.evp-hero-title {
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  margin: 0 0 1.1rem;
}

.evp-hero-title em { font-style: normal; color: var(--color-accent); }

.evp-hero-copy {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
  max-width: 46ch;
}

/* Partner wordmark row — "Partners & Brands We Work With", not
   "Authorized Distributor", per the founder's own earlier correction. */
.evp-partners { margin-bottom: 1.5rem; }

.evp-partners-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.6rem;
}

.evp-partner-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

.evp-partner {
  display: flex;
  align-items: center;
  height: 26px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  opacity: 0.78;
}

.evp-hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Central hero visual: one real product photo, contained, not stretched. */
.evp-hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--ev-r-lg);
  overflow: hidden;
  background: linear-gradient(165deg, #FFFFFF 0%, #EAF1F9 100%);
  box-shadow: var(--ev-elev);
}

.evp-hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  box-sizing: border-box;
}

.evp-hero-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: 46%;
  height: 6%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(6, 58, 120, 0.18) 0%, transparent 72%);
  border-radius: 50%;
}

/* ---- photo variant of the hero visual ----
   The base .evp-hero-visual is built for a transparent PRODUCT CUTOUT:
   contain + 8% padding + a painted elliptical ground shadow, so a floating
   scooter reads as sitting on a surface. A real photograph already has its
   own ground, lighting and background, so all three of those work against
   it — contain letterboxes it, and the painted shadow lands on top of the
   scene. This variant switches to cover at the photo's own 3:2 ratio and
   removes the artificial shadow. */
.evp-hero-visual--photo { aspect-ratio: 3 / 2; background: none; }
.evp-hero-visual--photo img { object-fit: cover; padding: 0; }
.evp-hero-visual--photo::after { display: none; }

/* Right-hand quick-fact rail — general EV facts, not TAAMSI-specific
   performance claims. */
.evp-facts { display: flex; flex-direction: column; gap: 0.75rem; }

.evp-fact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--ev-r-md);
  padding: 0.85rem 1rem;
  box-shadow: 0 8px 22px -16px rgba(6, 58, 120, 0.28);
}

.evp-fact-ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-sky);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  font-size: 1rem;
}

.evp-fact-k { display: block; font-size: 0.86rem; font-weight: 800; color: var(--color-primary); line-height: 1.25; }
.evp-fact-v { display: block; font-size: 0.74rem; color: var(--color-text-muted); }

@media (max-width: 1199.98px) {
  .evp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .evp-facts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .evp-fact { flex: 1 1 220px; }
}

@media (max-width: 767.98px) {
  .evp-hero-grid { grid-template-columns: 1fr; }
  .evp-hero-visual { order: -1; aspect-ratio: 4 / 3; max-width: 420px; margin: 0 auto 1.5rem; }
  /* The photo keeps its own 3:2 ratio on mobile and is not capped at 420px —
     forcing it to 4:3 would crop the motorcycle, and the cap would shrink the
     page's main focal point on exactly the screens where it matters most. */
  .evp-hero-visual--photo { aspect-ratio: 3 / 2; max-width: none; }
}

/* ---------------------------------------------------------------
   ABOUT STRIP
   --------------------------------------------------------------- */
.evp-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.evp-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.evp-service {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--ev-r-md);
  padding: 0.9rem 1rem;
}

.evp-service i { color: var(--color-primary); font-size: 1.1rem; flex: none; }
.evp-service span { font-size: 0.86rem; font-weight: 700; color: var(--color-primary); line-height: 1.25; }

@media (max-width: 991.98px) { .evp-about-grid { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .evp-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------
   PRODUCT RANGE — filter tabs + grid
   --------------------------------------------------------------- */
.evp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.evp-filter {
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  color: var(--color-primary);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.evp-filter[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
  box-shadow: 0 6px 16px -8px rgba(0, 42, 97, 0.55);
}

.evp-filter:hover:not([aria-pressed="true"]) { border-color: var(--color-primary); }

.evp-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.3vw, 1.15rem);
}

.evp-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid rgba(0, 42, 97, 0.07);
  border-radius: var(--ev-r-md);
  overflow: hidden;
  /* Two-layer shadow: a tight contact shadow plus a wide soft one. A single
     flat shadow is the main reason cards read as stickers on a background
     rather than objects sitting above it. */
  box-shadow: 0 1px 2px rgba(6, 58, 120, 0.06), 0 10px 24px -16px rgba(6, 58, 120, 0.22);
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms cubic-bezier(.22, 1, .36, 1), border-color 260ms cubic-bezier(.22, 1, .36, 1);
}

/* Each card now carries `reveal` directly (see the HTML comment above the
   grid for why). .reveal's own transition — opacity/transform/filter, 0.8s —
   lives in base.css, which loads BEFORE this file. Because .evp-card and
   .reveal have equal specificity (one class each) and this file loads later,
   .evp-card's transition here would otherwise win outright and silently
   replace .reveal's list, not merge with it: the card would still become
   visible, but opacity and filter would have no transition at all (an
   instant snap) and transform would use the 260ms hover timing instead of
   the intended 0.8s reveal fade. This union rule restores every property
   from both, so the hover feel and the reveal feel are each exactly what
   they were before. */
.evp-card.reveal {
  transition:
    transform 260ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 260ms cubic-bezier(.22, 1, .36, 1),
    border-color 260ms cubic-bezier(.22, 1, .36, 1),
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.8s ease;
}

.evp-card:hover { transform: translateY(-5px); border-color: rgba(0, 42, 97, 0.14); box-shadow: 0 2px 4px rgba(6, 58, 120, 0.07), 0 26px 46px -22px rgba(6, 58, 120, 0.42); }

.evp-card-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  /* Radial pool of light rather than a flat vertical ramp — gives the
     vehicle a surface to sit on instead of floating on a tinted panel. */
  background:
    radial-gradient(ellipse 70% 55% at 50% 78%, rgba(0, 42, 97, 0.09) 0%, transparent 70%),
    linear-gradient(180deg, #FCFDFE 0%, #EFF4FA 100%);
  border-bottom: 1px solid rgba(0, 42, 97, 0.06);
  overflow: hidden;
}

.evp-card-shot img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: none;
  object-fit: contain;
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

/* PER-IMAGE SCALE, SOLVED BY MEASUREMENT — not tuned by eye.
   The three sample photos have very different subject aspect ratios:
       bike1  trike, upright   subject aspect 0.52, fills 72%w x 94%h of canvas
       bike2  motorcycle, wide subject aspect 1.72, fills 98%w x 86%h
       bike3  scooter          subject aspect 1.32, fills 90%w x 68%h
   Matching their HEIGHTS (the previous approach) therefore made the wide
   motorcycle look enormous next to the narrow trike — which is exactly the
   "one vehicle tiny, another huge" defect. These widths were solved so each
   VEHICLE occupies ~34% of the card's image box by AREA, which is what the
   eye actually compares. Verified: 35% / 34% / 34%. */
.evp-card-shot[data-img="1"] img { width: 51%; height: auto; }
.evp-card-shot[data-img="2"] img { width: 67%; height: auto; }
.evp-card-shot[data-img="3"] img { width: 65%; height: auto; }

.evp-card:hover .evp-card-shot img { transform: translate(-50%, -50%) scale(1.045); }

.evp-card-body { padding: 0.95rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.evp-card-name { font-size: 0.92rem; font-weight: 800; color: var(--color-primary); margin: 0 0 0.15rem; line-height: 1.25; }
.evp-card-kind { font-size: 0.74rem; color: var(--color-text-muted); margin: 0 0 0.7rem; }

.evp-card-specs {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--color-border);
  margin-bottom: 0.7rem;
  color: var(--color-text-muted);
}

.evp-card-specs b { display: block; font-size: 0.86rem; color: var(--color-primary); }

.evp-card-cta {
  margin-top: auto;
  text-align: center;
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--ev-r-sm);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  transition: background 220ms ease, color 220ms ease;
}

.evp-card-cta:hover { background: var(--color-primary); color: #FFFFFF; }

@media (max-width: 1199.98px) { .evp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .evp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .evp-grid { grid-template-columns: 1fr; } }


/* ---------------------------------------------------------------
   SAVINGS CALCULATOR — 3-column horizontal: INPUT → SAVINGS → ACTION
   ---------------------------------------------------------------
   Column 2 is the hero: it carries the largest type, the donut and the
   comparison bars, and it is the only column on a dark ground — so the
   eye lands on the savings figure first.

   Semantic colour is unchanged from the previous version:
     fuel  = #A71501 (red)   electric = #1677FF (blue)
     savings/CO2 = #159447 (green)
   --------------------------------------------------------------- */
.evc {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  /* Was a pure cool-blue wash (#F7FAFD -> #EAF3FF), designed for the earlier
     all-navy Card 2. Now that Card 1 (blush) and Card 2 (navy-to-red) both
     carry a red accent, that backdrop read as unrelated to what sits on it —
     blue behind, red inside, no connection between the two. A third stop
     added at the far corner, a barely-there warm off-white, so the page
     surface itself echoes the same warmth the cards introduce. All three
     stops measured within 1.1x of pure white, so this can never affect any
     card's own text contrast — every card paints its own opaque surface
     regardless of what sits behind it. */
  background: linear-gradient(135deg, #F7FAFD 0%, #EAF3FF 55%, #FBF1EF 100%);
}

/* One soft light source — not a grid, not scattered icons. */
.evc-glow {
  position: absolute;
  top: -30%; right: -8%;
  width: 55%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 119, 255, 0.16) 0%, transparent 66%);
  pointer-events: none;
  animation: evcDrift 20s ease-in-out infinite alternate;
}

/* Companion glow — much fainter, warm, positioned lower-left. Card 2's own
   135deg gradient turns red toward its bottom-right corner; this echoes that
   same warmth in the ambient light of the page itself, so the red inside the
   card reads as lit by its surroundings rather than arriving out of nowhere.
   Kept at roughly a third the strength of the blue glow above it — it should
   register as atmosphere, not as a second focal point. */
.evc-glow--warm {
  position: absolute;
  bottom: -22%; left: -6%;
  width: 46%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 30, 45, 0.06) 0%, transparent 70%);
  pointer-events: none;
  animation: evcDrift 26s ease-in-out infinite alternate-reverse;
}
@keyframes evcDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-5%, 7%, 0) scale(1.14); }
}

.evc-head { position: relative; z-index: 1; text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.evc-eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 0.5rem;
}
.evc-title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800;
  letter-spacing: -0.03em; color: var(--color-primary); margin: 0 0 0.35rem;
}
/* .evc-sub removed — the subtitle line it styled is gone from the markup,
   see the note above .evc-head in the HTML. */

/* 3 columns, centre widest — it is the hero. */
.evc-grid {
  position: relative; z-index: 1;
  display: grid;
  /* Rebalanced: column 3 now carries the booking form rather than three
     buttons, so it needs comparable width to the other two. */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.06fr) minmax(0, 1.02fr);
  gap: clamp(0.85rem, 1.4vw, 1.15rem);
  align-items: stretch;
}

.evc-col {
  display: flex; flex-direction: column;
  border-radius: 18px;
  padding: clamp(1.1rem, 1.9vw, 1.5rem);
  transition: transform 300ms cubic-bezier(.22,1,.36,1), box-shadow 300ms cubic-bezier(.22,1,.36,1);
}
.evc-col:hover { transform: translateY(-3px); }

/* Card 1 — background darkened ~30% on request. A literal 30%-lightness
   reduction on the previous near-white stops (L=0.98/0.95) lands on fully
   saturated red (#FF5F5F territory) — that math is correct but contradicts
   "a little bit dark" in the same instruction. Interpreted as 30% of the
   way toward a "still reads as a light card" floor (L=0.65) instead, which
   gives a real, clearly deeper blush without crossing into bold red.
   Existing navy text re-checked against the new stops: 8.5-9.1:1, still
   comfortably passes — no text-colour change needed. */
/* --ar-turmeric-soft / --ar-clay-soft / --ar-paper are declared in
   css/aram.css, which this page does not load — used bare, the gradient
   would resolve to nothing and the card would lose its background
   entirely. Declared here instead, scoped to the card, at the same values
   Swapped with Card 3, on request — this card now takes the soft amber
   Card 3 previously used. Existing navy/red text still passes (5.26:1 /
   4.66:1), checked before applying. The one element that did NOT survive
   the swap unchanged is .evc-hint below (was #4C5A70, tuned for the old
   light-blue background; failed at 4.27:1 on amber) — darkened to
   #42506A, 4.95:1. Nothing else on this card changes. */
.evc-col--input {
  background: #F4C35F;
  border: 1px solid rgba(0, 42, 97, 0.08);
  box-shadow: 0 1px 2px rgba(6,58,120,0.05), 0 14px 32px -24px rgba(6,58,120,0.28);
}
.evc-col--input .evc-hint { color: #42506A; }

/* Contrast checked against all three stops before applying, not assumed.
   Navy headings/labels pass everywhere (6.6-8.4:1). The muted hint text
   ("~1,200 km/month" etc.) measured 4.14:1 against the middle stop
   (--ar-clay-soft) — under the 4.5:1 minimum. Darkened for this card only;
   still reads as a quieter secondary colour, just no longer failing. */
.evc-col--input .evc-hint { color: #4C5A70; }

/* The site header is position:fixed, so a bare #book-ride jump from another
   page would land this panel with its top hidden behind the header. */
#book-ride { scroll-margin-top: 110px; }

/* #D89A2E is --ar-turmeric in css/aram.css (not loaded on this page, so
   used directly here rather than a var() that would resolve to nothing).
   That file's own note flags this exact colour as "fine for large
   decorative fills... NOT compliant as a text colour at any size" — which
   Swapped with Card 1, on request — this card now takes the soft
   warm blue-gray Card 1 previously used. Its own near-black heading/label
   colour (#2B1B12) and dark-red required-marker (#6B1100) were re-checked
   against this lighter background rather than left as-is: 14.65:1 and
   10.90:1 — both pass with more margin than before, so those two rules
   (further down this file) are kept unchanged. */
.evc-col--cta {
  background: #EAF2FA;
  border: 1px solid rgba(0, 42, 97, 0.08);
  box-shadow: 0 1px 2px rgba(6,58,120,0.05), 0 14px 32px -24px rgba(6,58,120,0.28);
}

/* #2B1B12 is --ar-ink in aram.css, whose own comment says it "replaces navy
   for this page's headings" — the exact situation here. 6.77:1 on #D89A2E. */
.evc-col--cta .evc-col-head h3 { color: #2B1B12; }
.evc-col--cta .evc-f label { color: #2B1B12; }
/* Darkened from --color-accent (#A71501, 3.12:1) to 5.03:1 on this
   background; still reads unmistakably as a red required-field marker. */
.evc-col--cta .req { color: #6B1100; }
.evc-col--input:hover,
.evc-col--cta:hover { box-shadow: 0 2px 4px rgba(6,58,120,0.07), 0 24px 44px -26px rgba(6,58,120,0.38); }

/* REDESIGNED: was a light blue-grey card (see the previous turn's note
   below, kept for history). Founder now wants navy+red premium gradient —
   dominant navy, red as a corner accent, matching the reference hex values
   given. Background only, per instruction — but two elements sit DIRECTLY
   on this background rather than inside their own white sub-card (the 4
   stat cards and both chart blocks all have background:#FFFFFF of their
   own, so they're unaffected either way): the heading and the disclaimer
   note. Measured before changing anything — the previous navy text on this
   new dark gradient comes out to 1.1-1.5:1 contrast, unreadable. Switched
   those two to white/light per the instruction's own "white/light text
   where required" allowance. Nothing else in the card touched. */
.evc-col--out {
  /* Solid deep EV blue, on request — replaces the earlier two-stop navy
     gradient. Every text element on this card was checked against it:
       - heading: already white via its own override two rules down -> 7.06:1
       - the 4 stat cards + both chart blocks: each has its own solid white
         background, independent of this card's colour -> unaffected
       - .evc-note: already translucent white, effective 4.96:1 on this
         exact background -> still passes
     Nothing needed to change beyond the background itself. */
  background: #1458A6;
  box-shadow: 0 20px 46px -24px rgba(20, 88, 166, 0.4);
}

.evc-col-head { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1rem; }
.evc-step {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 800;
  background: #FFFFFF; color: var(--color-primary);
}
.evc-col-head h3 { font-size: 0.98rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--color-primary); }
/* Readability fix, scoped to Card 2 only — see the comment above .evc-col--out. */
.evc-col--out .evc-col-head h3 { color: #FFFFFF; }

/* ---- column 1: inputs ---- */
.evc-in { margin-bottom: 0.7rem; }
.evc-in-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.evc-in label { display: block; font-size: 0.7rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.25rem; }
.evc-in input, .evc-in select {
  width: 100%; height: 38px; padding: 0 0.65rem;
  font-size: 0.83rem; font-family: inherit; color: var(--color-text);
  background: #FFFFFF; border: 1px solid rgba(0,42,97,0.14); border-radius: 9px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.evc-in input:focus, .evc-in select:focus {
  outline: none; border-color: #1677FF;
  box-shadow: 0 0 0 3px rgba(22,119,255,0.14);
}
.evc-hint { display: block; margin-top: 0.25rem; font-size: 0.68rem; color: var(--color-text-muted); }

/* ---- column 2: REDESIGNED — 2x2 stat grid, light throughout ----
   Replaces the previous single dark hero figure + donut + monthly/yearly
   split. Matches the reference: four white cards (Petrol Fuel Cost,
   Electricity Cost, Total Savings, CO2 Saved), icon-coded by colour, with
   the value text staying navy except Total Savings, which is green — the
   one figure the reference visually distinguishes from the rest. */
.evc-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; margin-bottom: 0.85rem; }
.evc-fig {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(0, 42, 97, 0.07);
  border-radius: 11px;
  padding: 0.7rem 0.8rem;
}
.evc-fig-ico {
  position: absolute; top: 0.55rem; right: 0.6rem;
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; font-size: 0.8rem;
}
.evc-fig-ico--red   { background: rgba(167, 21, 1, 0.09);   color: #A71501; }
.evc-fig-ico--blue  { background: rgba(22, 119, 255, 0.10); color: #1677FF; }
.evc-fig-ico--green { background: rgba(21, 148, 71, 0.10);  color: #159447; }
.evc-fig-k { display: block; font-size: 0.68rem; color: var(--color-text-muted); margin-bottom: 0.15rem; padding-right: 2rem; }
.evc-fig-v { display: block; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary); }
.evc-fig-v--green { color: #159447; }

/* Bar chart and donut now sit as two light cards, side by side. */
.evc-charts-row { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 0.65rem; margin-bottom: 0.85rem; }
.evc-chart-block {
  background: #FFFFFF;
  border: 1px solid rgba(0, 42, 97, 0.07);
  border-radius: 11px;
  padding: 0.7rem 0.75rem;
}
.evc-chart-block--donut { display: flex; flex-direction: column; align-items: center; text-align: center; }

.evc-bars-t { display: block; font-size: 0.68rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.55rem; }
.evc-bar-row { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.evc-bar-row:last-child { margin-bottom: 0; }
.evc-bar-lbl { font-size: 0.68rem; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 0.3rem; }
.evc-bar-lbl i { font-size: 0.72rem; }
.evc-bar-track { display: block; height: 9px; border-radius: 5px; background: rgba(0, 42, 97, 0.07); overflow: hidden; }
.evc-bar { display: block; height: 100%; width: 0; border-radius: 5px; transition: width 700ms cubic-bezier(.22,1,.36,1); }
.evc-bar--fuel { background: linear-gradient(90deg, #C4310F, #FF6A50); }
.evc-bar--ev   { background: linear-gradient(90deg, #1677FF, #6FB0FF); }

.evc-donut-wrap { position: relative; width: 92px; height: 92px; display: grid; place-items: center; margin: 0.15rem auto 0; }
.evc-donut { width: 92px; height: 92px; }
.evc-donut-bg { stroke: rgba(0, 42, 97, 0.08); }
.evc-donut-fg {
  stroke: #159447;
  stroke-dasharray: 327;      /* 2·π·52 */
  stroke-dashoffset: 327;
  transition: stroke-dashoffset 820ms cubic-bezier(.22,1,.36,1);
}
.evc-donut-mid { position: absolute; text-align: center; line-height: 1.1; }
.evc-donut-mid b { display: block; font-size: 0.95rem; font-weight: 800; color: #159447; }
.evc-donut-mid i { display: block; font-style: normal; font-size: 0.58rem; color: var(--color-text-muted); }

/* color/border-top adjusted for readability against Card 2's new dark
   background — same reasoning as the h3 fix above. Opacity measured, not
   guessed: at 0.62 the note's effective contrast against the gradient's
   reddest corner (where the note sits, since it's the last element and the
   gradient trends red toward bottom-right) came out to 4.37:1 — just under
   the 4.5:1 AA threshold for text this size. Raised to 0.68, which clears
   it at 4.95:1 even at that worst-case point. Size, spacing and position
   unchanged. */
/* Opacity re-measured against the NEW background, not left at its old
   value. It was tuned two turns ago for a much darker worst-case corner
   (#8B1E2D); at that same 0.68 it falls to 4.07:1 against this gradient's
   lighter stop (#1259AF) — below the 4.5:1 threshold. Raised to 0.78,
   which clears 4.5:1 at both new stops with margin (4.51 / 5.71). */
.evc-note { font-size: 0.62rem; line-height: 1.5; color: rgba(255,255,255,0.78); margin: 0; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.18); }

/* ---- column 3: booking form ---- */
.evc-form { display: block; }
.evc-f { margin-bottom: 0.6rem; }
.evc-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.evc-f label { display: block; font-size: 0.68rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.22rem; }
.evc-f label .req { color: var(--color-accent); }
.evc-f input, .evc-f select {
  width: 100%; height: 36px; padding: 0 0.6rem;
  font-size: 0.8rem; font-family: inherit; color: var(--color-text);
  background: #FFFFFF; border: 1px solid rgba(0,42,97,0.14); border-radius: 8px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.evc-f input:focus, .evc-f select:focus {
  outline: none; border-color: #1677FF; box-shadow: 0 0 0 3px rgba(22,119,255,0.14);
}
.evc-f input.is-bad, .evc-f select.is-bad { border-color: var(--color-accent); }

.evc-form-submit { width: 100%; margin-top: 0.35rem; border: none; cursor: pointer; font-family: inherit; }

.evc-form-ok {
  margin-top: 0.7rem; padding: 0.7rem 0.85rem; border-radius: 9px;
  background: #F1F8F3; border: 1px solid #CFE7D8; color: #159447;
  font-size: 0.76rem; font-weight: 600; line-height: 1.5;
}
.evc-form-ok[hidden] { display: none; }

/* Call / WhatsApp stay available, but secondary to the form now. */
.evc-alt {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  margin-top: 0.85rem; padding-top: 0.85rem;
  border-top: 1px solid rgba(0,42,97,0.08);
}
.evc-alt .evc-btn { height: 40px; font-size: 0.78rem; }
.evc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  height: 44px; border-radius: 10px; font-size: 0.85rem; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: background 240ms ease, color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}
.evc-btn i { transition: transform 240ms ease; }
.evc-btn--primary { background: var(--color-accent); color: #FFFFFF; border: 1px solid var(--color-accent); }
.evc-btn--primary:hover { background: #7E1001; border-color: #7E1001; color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(167,21,1,0.6); }
.evc-btn--primary:hover i { transform: translateX(3px); }
.evc-btn--ghost { background: #FFFFFF; color: var(--color-primary); border: 1px solid rgba(0,42,97,0.2); }
.evc-btn--ghost:hover { background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; transform: translateY(-2px); }
.evc-btn:focus-visible { outline: 2px solid #1677FF; outline-offset: 2px; }

/* HEADING SCOPE: the heading belongs to Card 1 + Card 2 (the calculator
   itself), not to Card 3 ("Ready to Go Electric?"), which is a separate CTA.
   Previously it was centred across the full section width, which read as a
   heading for all three cards.

   Constrained to exactly the combined width of columns 1 and 2 and
   left-aligned, so it sits directly above them as one unified heading.
   Width is derived from the grid, not guessed: columns are 0.92fr / 1.06fr /
   1.02fr (3.00fr total) with two gaps, so cards 1+2 span
   (1.98/3.00) x (100% - 2g) + g  =  66% - 0.32g.

   Only applies at >=1100px. Below that the grid drops to two columns with
   Card 3 spanning full width, so cards 1+2 already fill the row and the
   heading correctly returns to full width. Nothing inside any card changes. */
@media (min-width: 1100px) {
  .evc-head {
    text-align: left;
    max-width: calc(66% - (0.32 * clamp(0.85rem, 1.4vw, 1.15rem)));
    margin-right: auto;
  }
}

/* ---- responsive ---- */
@media (max-width: 1099.98px) {
  /* Tablet: input + output side by side, action full width beneath — keeps
     the calculator's own two halves together, which matters more than
     keeping all three in a row at this width. */
  .evc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .evc-col--cta { grid-column: 1 / -1; }
  .evc-alt { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  .evc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 479.98px) {
  /* .evc-split / .evc-hero no longer exist — replaced by .evc-figs (the 2x2
     stat grid) and .evc-charts-row (bar chart + donut), which need the same
     "stack on very small screens" treatment those two used to get. */
  .evc-in-row, .evc-figs, .evc-charts-row { grid-template-columns: 1fr; }
  .evc-bar-row { grid-template-columns: 58px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .evc-glow, .evc-glow--warm { animation: none; }
  .evc-col, .evc-bar, .evc-donut-fg, .evc-btn { transition: none; }
  .evc-col:hover, .evc-btn:hover { transform: none; }
}

/* ---------------------------------------------------------------
   WHY CHOOSE EV
   --------------------------------------------------------------- */
.evp-why-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.85rem; }

.evp-why-item { text-align: center; padding: 1.25rem 0.75rem; }
.evp-why-ico { width: 52px; height: 52px; margin: 0 auto 0.75rem; border-radius: 50%; background: var(--color-sky); color: var(--color-primary); display: grid; place-items: center; font-size: 1.3rem; }
.evp-why-item h4 { font-size: 0.86rem; font-weight: 800; color: var(--color-primary); margin: 0 0 0.25rem; }
.evp-why-item p { font-size: 0.76rem; color: var(--color-text-muted); margin: 0; }

@media (max-width: 991.98px) { .evp-why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .evp-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------
   CTA BAND
   --------------------------------------------------------------- */
.evp-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.evp-cta-row h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; color: #FFFFFF; margin: 0 0 0.35rem; }
.evp-cta-row p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.82); margin: 0; }
.evp-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.evp-cta-actions .btn-outline-premium { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF; }
.evp-cta-actions .btn-outline-premium:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--color-primary); }

/* ---------------------------------------------------------------
   STATS BAND — verified, company-wide figures only. See the file
   header comment for why the reference's per-division counts are
   not reproduced here.
   --------------------------------------------------------------- */
.evp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
.evp-stat { padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1rem, 1.5vw, 1.5rem) 0 0; }
.evp-stat + .evp-stat { padding-left: clamp(1rem, 1.5vw, 1.5rem); border-left: 1px solid var(--color-border); }
.evp-stat-n { display: block; font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; color: var(--color-primary); margin-bottom: 0.35rem; }
.evp-stat-n sup { font-size: 0.5em; color: var(--color-accent); }
.evp-stat-l { font-size: 0.82rem; color: var(--color-text-muted); }

@media (max-width: 767.98px) {
  .evp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
  .evp-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .evp-card, .evp-card-shot img, .evp-filter { transition: none; }
}

/* ---------------------------------------------------------------
   PRODUCT CARD PRICE
   --------------------------------------------------------------- */
.evp-card-price {
  display: flex; align-items: baseline; gap: 0.4rem;
  padding: 0.6rem 0 0.75rem; margin-bottom: 0.15rem;
  border-top: 1px solid rgba(0, 42, 97, 0.07);
}
.evp-price-v { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-accent); }
.evp-price-k { font-size: 0.66rem; color: var(--color-text-muted); }

/* Card CTA is a <button> now (it opens a dialog, not a page) — reset the
   UA button styling so it still matches the previous link exactly. */
button.evp-card-cta { width: 100%; cursor: pointer; font-family: inherit; background: #FFFFFF; }

/* ---------------------------------------------------------------
   PRODUCT MODAL
   ---------------------------------------------------------------
   Rebuilt to fix three real usability bugs reported from use:

   1. CLOSE BUTTON SCROLLED AWAY. The X was position:absolute inside
      .evm-panel, and .evm-panel was the scrolling element — so once
      you scrolled down, the close button was gone off the top with
      no way back. It now lives in .evm-bar, a fixed header OUTSIDE
      the scrolling region, so it is always reachable.

   2. CENTERED-OVERFLOW TRAP. .evm used display:grid + place-items:
      center with a max-height panel. When content is taller than the
      viewport, centring pushes the panel's top ABOVE the container
      and it cannot be scrolled to. Replaced with a scrollable
      overlay plus auto margins, which centres when there is room and
      degrades to top-aligned scrolling when there is not.

   3. STICKY GALLERY. .evm-gallery was position:sticky inside the
      scroller, so on stacked/mobile layouts it pinned over the
      details. Sticky is now applied only at desktop widths, where
      the two columns sit side by side and it actually helps.
   --------------------------------------------------------------- */
.evm {
  position: fixed;
  inset: 0;
  /* MUST sit above the site header. .nav-outer-wrap is position:fixed with
     z-index:1200 (see header.css), so the previous 1080 put the header ON TOP
     of this dialog — it covered the modal's close bar entirely, leaving no way
     to dismiss it. 1400 clears the header (1200), the mobile drawer (1200) and
     the drawer toggler (1300). A modal is the topmost surface on the page by
     definition, so it belongs above all of them. */
  z-index: 1400;
  overflow-y: auto;                 /* the overlay scrolls, never traps */
  -webkit-overflow-scrolling: touch;
  padding: clamp(0.5rem, 2.5vw, 2rem);
}
.evm[hidden] { display: none; }

.evm-backdrop { position: fixed; inset: 0; background: rgba(0, 20, 46, 0.55); backdrop-filter: blur(2px); animation: evmFade 220ms ease; }

.evm-panel {
  position: relative;
  z-index: 1;
  width: min(1060px, 100%);
  /* Auto margins centre it when it fits and simply top-align it when
     it does not — the safe alternative to place-items:center. */
  margin: auto;
  /* dvh, not vh: on mobile browsers 100vh is the EXPANDED viewport (toolbars
     hidden), so with the address bar visible a vh-sized panel extends past
     the bottom of the screen — the same class of bug as the header covering
     the top. vh stays first as the fallback for older engines. */
  max-height: calc(100vh - clamp(1rem, 5vw, 4rem));
  max-height: calc(100dvh - clamp(1rem, 5vw, 4rem));
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;                 /* clips children to the radius */
  box-shadow: 0 40px 90px -30px rgba(0, 20, 46, 0.55);
  animation: evmIn 300ms cubic-bezier(.22, 1, .36, 1);
}

@keyframes evmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes evmIn { from { opacity: 0; transform: translateY(14px) scale(0.975); } to { opacity: 1; transform: none; } }

/* ---- fixed bar: never scrolls ---- */
.evm-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.85rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: #FFFFFF;
}
.evm-bar-name { font-size: 0.9rem; font-weight: 800; color: var(--color-primary); letter-spacing: -0.01em; }

.evm-x {
  flex: none;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--color-border); background: #FFFFFF; color: var(--color-primary);
  display: grid; place-items: center;
  transition: background 200ms ease, color 200ms ease;
}
.evm-x:hover { background: var(--color-primary); color: #FFFFFF; }
.evm-x:focus-visible { outline: 2px solid #1677FF; outline-offset: 2px; }

/* ---- the ONLY scrolling region ---- */
.evm-body {
  flex: 1 1 auto;
  min-height: 0;                    /* required for flex children to scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ---- gallery ---- */
.evm-main {
  position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse 70% 55% at 50% 78%, rgba(0, 42, 97, 0.09) 0%, transparent 70%), linear-gradient(180deg, #FCFDFE 0%, #EFF4FA 100%);
  border: 1px solid rgba(0, 42, 97, 0.07); display: grid; place-items: center;
}
.evm-main img { width: 72%; height: auto; max-height: 84%; object-fit: contain; transition: opacity 260ms ease, transform 420ms cubic-bezier(.22,1,.36,1); }
.evm-main:hover img { transform: scale(1.04); }
.evm-main img.is-swapping { opacity: 0; }

.evm-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin-top: 0.55rem; }
.evm-thumb {
  aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; cursor: pointer; padding: 0;
  background: linear-gradient(180deg, #FCFDFE 0%, #EFF4FA 100%);
  border: 1.5px solid rgba(0, 42, 97, 0.08); display: grid; place-items: center;
  transition: border-color 200ms ease;
}
.evm-thumb img { width: 74%; height: auto; max-height: 82%; object-fit: contain; }
.evm-thumb[aria-current="true"] { border-color: #1677FF; }
.evm-thumb:focus-visible { outline: 2px solid #1677FF; outline-offset: 2px; }

/* ---- detail column ---- */
.evm-name { font-size: clamp(1.3rem, 2.1vw, 1.65rem); font-weight: 800; letter-spacing: -0.03em; color: var(--color-primary); margin: 0 0 0.2rem; }
.evm-kind { font-size: 0.86rem; color: var(--color-text-muted); margin: 0 0 0.8rem; }

.evm-price-lead { display: flex; align-items: baseline; gap: 0.5rem; padding-bottom: 0.8rem; margin-bottom: 0.8rem; border-bottom: 1px solid var(--color-border); }
.evm-price-v { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 800; letter-spacing: -0.03em; color: var(--color-accent); }
.evm-price-k { font-size: 0.72rem; color: var(--color-text-muted); }

.evm-desc { font-size: 0.86rem; line-height: 1.6; color: var(--color-text-muted); margin: 0 0 1rem; }

/* ---- tabs ---- */
.evm-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
  background: #F1F5FA;
  border: 1px solid rgba(0, 42, 97, 0.07);
  border-radius: 11px;
  padding: 0.28rem;
  margin-bottom: 1rem;
}
.evm-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  padding: 0.55rem 0.4rem; border-radius: 8px;
  font-size: 0.74rem; font-weight: 700; color: var(--color-text-muted);
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.evm-tab i { font-size: 0.82rem; }
.evm-tab:hover { color: var(--color-primary); }
.evm-tab[aria-selected="true"] {
  background: #FFFFFF; color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(6, 58, 120, 0.08), 0 4px 10px -6px rgba(6, 58, 120, 0.25);
}
.evm-tab:focus-visible { outline: 2px solid #1677FF; outline-offset: 1px; }

.evm-pane[hidden] { display: none; }

/* ---- tab 1: price ---- */
.evm-prices { display: grid; gap: 0.5rem; margin-bottom: 0.7rem; }
.evm-pr { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #F7FAFD; border: 1px solid rgba(0, 42, 97, 0.06); border-radius: 10px; padding: 0.65rem 0.85rem; }
.evm-pr-k { font-size: 0.78rem; color: var(--color-text-muted); }
.evm-pr-v { font-size: 0.95rem; font-weight: 800; color: var(--color-primary); }
.evm-pr-v--accent { color: #159447; }

.evm-note { font-size: 0.68rem; line-height: 1.5; color: var(--color-text-muted); margin: 0 0 1rem; }

.evm-cta {
  width: 100%; height: 46px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--color-accent); color: #FFFFFF; font-size: 0.9rem; font-weight: 700; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.evm-cta:hover { background: #7E1001; transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(167, 21, 1, 0.6); }
.evm-cta:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---- tab 2: specs ---- */
.evm-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.85rem; }
.evm-spec { display: flex; align-items: center; gap: 0.6rem; background: #F7FAFD; border: 1px solid rgba(0, 42, 97, 0.06); border-radius: 10px; padding: 0.55rem 0.7rem; }
.evm-spec i { color: #1677FF; font-size: 0.95rem; flex: none; }
.evm-spec-k { display: block; font-size: 0.66rem; color: var(--color-text-muted); line-height: 1.2; }
.evm-spec-v { display: block; font-size: 0.8rem; font-weight: 700; color: var(--color-primary); line-height: 1.25; }

/* ---- tab 3: test drive ---- */
.evm-td-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.evm-fld { margin-bottom: 0.7rem; }
.evm-fld label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.28rem; }
.evm-fld input, .evm-fld select {
  width: 100%; height: 40px; padding: 0 0.7rem; font-size: 0.85rem; font-family: inherit;
  color: var(--color-text); background: #FFFFFF; border: 1px solid rgba(0, 42, 97, 0.14); border-radius: 8px;
}
.evm-fld input:focus, .evm-fld select:focus { outline: 2px solid #1677FF; outline-offset: 1px; border-color: #1677FF; }
.evm-fld input.is-bad, .evm-fld select.is-bad { border-color: var(--color-accent); }

.evm-td-submit {
  width: 100%; height: 44px; margin-top: 0.35rem; border: none; border-radius: 8px; cursor: pointer;
  background: var(--color-primary); color: #FFFFFF; font-size: 0.88rem; font-weight: 700; font-family: inherit;
  transition: background 220ms ease;
}
.evm-td-submit:hover { background: #001A3D; }
.evm-td-submit:focus-visible { outline: 2px solid #1677FF; outline-offset: 2px; }

.evm-td-ok { margin-top: 0.85rem; padding: 0.8rem 0.95rem; border-radius: 10px; background: #F1F8F3; border: 1px solid #CFE7D8; color: #159447; font-size: 0.82rem; font-weight: 600; line-height: 1.5; }
.evm-td-ok[hidden] { display: none; }

/* Sticky only where the columns sit side by side — pinning it on a
   stacked layout would cover the details. */
@media (min-width: 862px) {
  .evm-gallery { position: sticky; top: 0; align-self: start; }
}

@media (max-width: 861.98px) {
  .evm-body { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .evm-panel { border-radius: 16px; max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
  .evm-specs, .evm-td-row { grid-template-columns: 1fr; }
  .evm-tab { font-size: 0.68rem; padding: 0.5rem 0.25rem; }
  .evm-tab i { display: none; }   /* label alone is clearer at this width */
}
@media (prefers-reduced-motion: reduce) {
  .evm-panel, .evm-backdrop { animation: none; }
  .evm-main img, .evm-cta, .evm-tab { transition: none; }
  .evm-main:hover img { transform: none; }
}


/* ============================================
   PREMIUM POLISH LAYER — rMAR eeVee
   ============================================
   ADDITIVE ONLY. Nothing here changes existing layout, content, section
   order or responsive behaviour — every rule either adds a transition to
   something that had none, or introduces a new opt-in class.

   This page inherits the .reveal / .reveal-scale system from js/site.js
   (it has no observer of its own). The layer below EXTENDS that
   with per-section motion character rather than replacing it, so the two
   cannot fight each other.

   Everything is disabled under prefers-reduced-motion at the end.
   ============================================ */

/* ---- 1. per-section reveal character ----
   Each section gets a different entrance so the page does not feel like
   one repeated animation. All share the site's existing easing. */
.rv-up    { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease-out, cubic-bezier(.22,1,.36,1)), transform .8s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.rv-fade  { opacity: 0; transition: opacity 1s ease; }
.rv-left  { opacity: 0; transform: translateX(-28px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.rv-right { opacity: 0; transform: translateX(28px);  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.rv-zoom  { opacity: 0; transform: scale(.94); filter: blur(6px); transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1), filter .85s ease; }
.rv-up.in, .rv-fade.in, .rv-left.in, .rv-right.in, .rv-zoom.in {
  opacity: 1; transform: none; filter: none;
}

/* staggered children — set --d per item in markup */
.rv-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.rv-stagger.in > * { opacity: 1; transform: none; }
.rv-stagger.in > *:nth-child(1) { transition-delay: .05s; }
.rv-stagger.in > *:nth-child(2) { transition-delay: .12s; }
.rv-stagger.in > *:nth-child(3) { transition-delay: .19s; }
.rv-stagger.in > *:nth-child(4) { transition-delay: .26s; }
.rv-stagger.in > *:nth-child(5) { transition-delay: .33s; }
.rv-stagger.in > *:nth-child(6) { transition-delay: .40s; }

/* ---- 2. image reveal — a wipe, not a plain fade ----
   The mask slides off the image as it enters, so photos "develop" rather
   than appearing inside a box. */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal > img { transform: scale(1.06); transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
.img-reveal.in > img { transform: scale(1); }
.img-reveal::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(110deg, var(--color-sky, #EAF1F9), #FFFFFF);
  transform: translateX(0);
  transition: transform 1s cubic-bezier(.76,0,.24,1);
}
.img-reveal.in::after { transform: translateX(101%); }

/* ---- 3. premium image hover ---- */
.img-hov { overflow: hidden; }
.img-hov img { transition: transform .8s cubic-bezier(.22,1,.36,1), filter .6s ease; }
.img-hov:hover img { transform: scale(1.05); filter: saturate(1.08); }

/* ---- 4. card hover lift — applied to existing cards, layout unchanged ---- */
.evp-card, .evp-hero-visual, .evp-fact, .evp-service, .evc-col {
  will-change: transform;
}
.lift { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1); }
.lift:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(6,58,120,.4); }

/* ---- 5. button shine — a light sweep on hover ---- */
.btn-primary-premium, .btn-outline-premium, .btn-amber {
  position: relative;
  overflow: hidden;
}
.btn-primary-premium::after, .btn-amber::after {
  content: ""; position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
  transition: left .65s cubic-bezier(.22,1,.36,1);
}
.btn-primary-premium:hover::after, .btn-amber:hover::after { left: 130%; }

/* ---- 6. section-to-section transitions ----
   A soft hairline + glow at the seam so bands hand off instead of butting
   together. Opt-in via .seam. */
.seam { position: relative; }
.seam::before {
  content: ""; position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: min(80%, 900px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(13,74,150,.16), transparent);
  pointer-events: none;
}

/* ---- 7. layered depth — soft coordinated colour washes ----
   Light theme, brand hues only: navy, a cooler sky blue, and a very low
   accent warmth. No new palette. */
.depth { position: relative; overflow: hidden; }
.depth::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(44,111,196,.10) 0%, transparent 66%);
  top: -18%; right: -8%;
  animation: floatSlow 22s ease-in-out infinite alternate;
}
.depth > * { position: relative; z-index: 1; }

@keyframes floatSlow {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-4%, 6%, 0) scale(1.1); }
}

/* ---- 8. subtle float for accent elements ---- */
.floaty { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-7px); }
}

/* ---- reduced motion: everything above becomes static ---- */
@media (prefers-reduced-motion: reduce) {
  .rv-up, .rv-fade, .rv-left, .rv-right, .rv-zoom,
  .rv-stagger > *, .img-reveal > img {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
  .img-reveal::after { display: none; }
  .lift, .img-hov img, .btn-primary-premium::after, .btn-amber::after { transition: none; }
  .lift:hover { transform: none; }
  .img-hov:hover img { transform: none; }
  .depth::after, .floaty { animation: none; }
}