/* ==========================================================================
   Shreenath Kia — homepage
   White-first. One family (Archivo), navy actions, soft tint for cards.
   ========================================================================== */

/* Kia Signature: Kia's own typeface, set the way kia.com/in sets it: Bold for headings and names, Regular for text. */
@font-face { font-family: "Kia Signature"; src: url("../fonts/KiaSignatureLight.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Kia Signature"; src: url("../fonts/KiaSignatureRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Kia Signature"; src: url("../fonts/KiaSignatureBold.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }

:root {
  --white: #ffffff;
  --tint: #f3f4f5;
  --rule: #e1e3e6;
  --ink: #14171a;
  --graphite: #5a6067;
  --navy: #14171a;
  --navy-2: #41464c;
  --error: #b3261e;
  --midnight: #05141f;

  --font: "Kia Signature", "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 2.4vw, 32px);
  --max: 1320px;
  --pad: var(--gutter);
  --section: clamp(100px, 8vw, 132px);
  --nav-h: 72px;

  --shadow: 0 20px 50px -24px rgba(20, 23, 26, .28);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --r: 4px;
  --r-lg: 5px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
button, input, select { font: inherit; color: inherit; }
address { font-style: normal; }
small { font-size: inherit; }

:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; }
.skip:focus { top: 12px; }

/* ---------- Shared pieces ---------- */

.ico {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.label {
  font-size: .9rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--graphite); line-height: 1.3;
}
.h2 {
  font-stretch: 108%; font-weight: 500;
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  line-height: 1.12; letter-spacing: -.015em;
  margin-top: 10px; text-wrap: balance;
}
.h2--xl { font-weight: 600; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -.02em; }
.note { font-size: .78rem; color: var(--graphite); line-height: 1.5; }

.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px;
  background: var(--navy); color: #fff;
  font-size: .92rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid var(--navy); border-radius: var(--r); cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn:hover .ico { transform: translateX(3px); }
.btn--small { min-height: 44px; padding: 0 18px; font-size: .86rem; }
.btn--outline {
  min-height: 40px; padding: 0 14px; gap: 8px;
  background: var(--white); color: var(--ink); border-color: var(--rule);
  font-size: .84rem; font-weight: 500;
}
.btn--outline .ico { width: 16px; height: 16px; }
.btn--outline:hover { background: var(--white); border-color: var(--navy); color: var(--navy); }
.btn--outline:hover .ico { transform: none; }

.more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1.02rem; font-weight: 600; padding: 8px 0;
  transition: color .25s var(--ease);
}
.more .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.more:hover { color: var(--navy-2); }
.more:hover .ico { transform: translateX(3px); }

.round {
  width: 44px; height: 44px; flex: none; padding: 0;
  display: inline-grid; place-items: center;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r); cursor: pointer; font-size: 1.2rem; line-height: 1;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.round .ico { width: 18px; height: 18px; }
.round--small { width: 36px; height: 36px; }
.round--small .ico { width: 16px; height: 16px; }
.round--light { background: #fff; border-color: #fff; }
button.round:hover, a:hover > .round, button:hover > .round { background: var(--navy); border-color: var(--navy); color: #fff; }
a:hover > .round--light { background: #fff; border-color: #fff; color: var(--navy); }

.stars { color: var(--navy); letter-spacing: .14em; font-size: .95rem; }

.ph {
  background: var(--tint); border: 1px dashed #c2c6cb; border-radius: var(--r);
  display: grid; place-items: center; text-align: center; padding: 12px;
}
.ph span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.4; }

/* Boxed form field with a leading icon */
.field {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 14px;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field > .ico { color: var(--graphite); }
.field input, .field select {
  flex: 1; min-width: 0; height: 48px; padding: 0;
  background: transparent; border: 0; border-radius: 0; appearance: none; outline: none;
  font-size: .96rem;
}
.field input::placeholder { color: #8b9096; }
.field select:invalid { color: #8b9096; }
.field--select::after {
  content: ""; width: 10px; height: 6px; flex: none; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2314171a' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center;
}
.field--select select { cursor: pointer; }
.field:focus-within { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(20, 23, 26, .12); }
.field.is-invalid { border-color: var(--error); }
.form__status { font-weight: 500; }
.form__status:empty { display: none; }

/* ---------- Motion ---------- */

.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   NAV
   ========================================================================== */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; color: #fff;
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav::before {
  content: ""; position: absolute; inset: 0 0 -56px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  transition: opacity .3s var(--ease);
}
.nav.is-scrolled, .nav.is-open { background: var(--white); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }
.nav.is-scrolled::before, .nav.is-open::before { opacity: 0; }
.nav:not(.is-scrolled):not(.is-open) .btn { background: #fff; border-color: #fff; color: var(--ink); }
.nav__inner { height: var(--nav-h); padding: 0 var(--pad); display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.brand { font-stretch: 122%; font-weight: 700; font-size: 1.02rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.brand span { font-weight: 800; }
/* Three zones: brand left, links in the true centre, contact right */
.nav .brand { flex: 1 1 0; }
.nav__right { flex: 1 1 0; display: flex; justify-content: flex-end; align-items: center; gap: clamp(16px, 2vw, 28px); }
.nav__links { display: flex; gap: clamp(22px, 2.8vw, 44px); margin: 0; }
.nav__links a { font-size: 1.02rem; font-weight: 500; padding: 12px 0; position: relative; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-current::after { transform: scaleX(1); }

/* Showroom: a small menu of the three locations, opened on hover or keyboard focus */
.nav__links { align-items: center; }
.nav__drop { position: relative; }
.nav__drop > a { display: inline-flex; align-items: center; gap: 6px; }
.nav__drop > a .ico { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .25s var(--ease); }
.nav__drop:hover > a .ico, .nav__drop:focus-within > a .ico { transform: rotate(-90deg); }
.nav__menu {
  position: absolute; left: -18px; top: 100%; min-width: 180px; padding: 8px;
  display: grid; background: var(--white); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s var(--ease), visibility .2s;
}
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a { padding: 10px 12px; border-radius: var(--r); transition: background .2s var(--ease); }
.nav__menu a::after { display: none; }
.nav__menu a:hover { background: var(--tint); }
.nav__phone { display: inline-flex; align-items: center; gap: 8px; font-size: .96rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.nav__phone .ico { width: 16px; height: 16px; }

.nav__toggle { display: none; width: 48px; height: 48px; margin-left: auto; margin-right: -12px; background: none; border: 0; cursor: pointer; position: relative; }
.nav__toggle span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.nav__toggle span:first-child { top: 19px; }
.nav__toggle span:last-child { top: 28px; }
.nav__toggle[aria-expanded="true"] span:first-child { top: 23px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { top: 23px; transform: rotate(-45deg); }
.nav__mobile { padding: 4px var(--gutter) 24px; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.nav__mobile[hidden] { display: none; }
.nav__mobile a { font-stretch: 108%; font-weight: 500; font-size: 1.3rem; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.nav__mobile a:last-child { border-bottom: 0; color: var(--navy-2); }
.nav__mobile a.nav__sub { font-size: 1.05rem; font-weight: 400; padding: 11px 0 11px 18px; color: var(--graphite); }

/* ==========================================================================
   01 · HERO — dark photograph, one sales message per slide, enquiry bar on the edge
   ========================================================================== */

.hero {
  position: relative; isolation: isolate; color: #fff;
  height: calc(100svh - 40px); min-height: 640px; max-height: 940px;
  margin-bottom: 44px;
  padding: var(--nav-h) var(--pad) clamp(150px, 19vh, 190px);
  display: flex; align-items: flex-end;
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0e0f11; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0; object-position: var(--pos, 50% 60%);
  transition: opacity 1.1s ease;
}
.hero__slide.is-active { opacity: 1; animation: settle 8s ease-out both; }
@keyframes settle { from { transform: scale(1.05); } to { transform: scale(1); } }
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 9, 10, .78) 0%, rgba(8, 9, 10, .46) 32%, rgba(8, 9, 10, 0) 60%),
    linear-gradient(0deg, rgba(8, 9, 10, .7) 0%, rgba(8, 9, 10, 0) 38%);
}

.hero__inner { max-width: 720px; transition: opacity .35s ease; }
.hero__inner.is-swapping { opacity: 0; }
.hero__title {
  font-stretch: 104%; font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.12; letter-spacing: -.025em;
}
.hero__lede { margin-top: 26px; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, .82); max-width: 44ch; }
.hero__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: clamp(32px, 4.6vh, 46px); }
.hero__actions .btn { background: #fff; border-color: #fff; color: var(--ink); min-height: 54px; padding: 0 28px; }
.hero__actions .btn:hover { background: var(--tint); border-color: var(--tint); }
.hero__actions .more:hover { color: #fff; opacity: .8; }

/* Slider control: bare, bottom right */
.hero__controls {
  position: absolute; right: var(--pad); bottom: 124px;
  display: flex; align-items: center; gap: 14px;
}
.hero__controls .round { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.hero__controls button.round:hover { background: #fff; border-color: #fff; color: var(--ink); }
.hero__count { font-size: .84rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero__count span { opacity: .6; }
.hero__bar { width: 44px; height: 2px; background: rgba(255, 255, 255, .3); position: relative; overflow: hidden; }
.hero__bar::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero.is-running .hero__bar::after { animation: fill var(--slide-ms, 7000ms) linear infinite; }
@keyframes fill { to { transform: scaleX(1); } }

/* Enquiry bar: one flat bar with a hairline outline; each field is a small caption over its value */
.enq {
  position: absolute; left: var(--pad); right: var(--pad); bottom: -44px; z-index: 2; color: var(--ink);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: stretch;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg);
}
.enq .field { border: 0; border-radius: 0; background: none; min-height: 86px; padding: 0 clamp(16px, 1.8vw, 26px); }
.enq .field + .field { border-left: 1px solid var(--rule); }
/* Focus: the whole cell lifts to a soft grey and its caption darkens; no underline */
/* Hover: only the caption and icon darken. Focus: one clean ring inside the cell. Nothing fills or jumps. */
.enq .field { cursor: text; transition: box-shadow .18s var(--ease); }
.enq .field--select { cursor: pointer; }
.enq .field > .ico { transition: color .18s var(--ease); }
.enq .field:hover label, .enq .field:focus-within label { color: var(--ink); }
.enq .field:focus-within { background: none; box-shadow: inset 0 0 0 2px var(--ink); border-radius: var(--r); }
.enq .field.is-invalid { background: none; box-shadow: inset 0 0 0 1px var(--error); border-radius: var(--r); }
.enq .field.is-invalid label { color: var(--error); }
/* A filled field reads as done: its value in ink, medium weight */
.enq .field input:not(:placeholder-shown), .enq .field select:valid { color: var(--ink); font-weight: 500; }
.enq .field:first-of-type { border-radius: calc(var(--r-lg) - 1px) 0 0 calc(var(--r-lg) - 1px); }
.enq__submit { min-height: 0; height: auto; padding: 0 clamp(24px, 2.6vw, 40px); margin: 10px; font-size: .96rem; }
@media (min-width: 860px) {
  /* Caption on top, then one row: icon, value, caret, all on the same line */
  .enq .field { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-content: center; align-items: center; }
  .enq .field label {
    grid-area: 1 / 1 / 2 / 4; position: static; width: auto; height: auto; overflow: visible; clip: auto;
    font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.4;
    transition: color .2s var(--ease);
  }
  .enq .field > .ico { grid-area: 2 / 1; width: 20px; height: 20px; color: var(--ink); }
  .enq .field input, .enq .field select { grid-area: 2 / 2; height: 28px; font-size: 1rem; }
  .enq .field--select::after { grid-area: 2 / 3; }
}
.enq .form__status { grid-column: 1 / -1; }
.enq.is-done > :not(.form__status) { display: none; }
.enq.is-done .form__status { padding: 18px 16px; font-size: 1.02rem; text-align: center; }

/* ==========================================================================
   02 · ACTION STRIP
   ========================================================================== */

.strip {
  position: relative; z-index: 2;
  width: min(calc(100% - 2 * var(--gutter)), var(--max)); margin: 0 auto;
  padding-top: clamp(64px, 5.4vw, 92px);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.strip__item {
  display: flex; align-items: center; gap: 16px; text-align: left;
  padding: 20px clamp(14px, 1.8vw, 26px);
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  position: relative;
}
.strip__item:first-child { padding-left: 0; }
.strip__item:last-child { padding-right: 0; }
/* Drawn as a border, not a 1px box: borders snap to whole screen pixels, so all three render the same at any zoom */
.strip__item + .strip__item::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 0; border-left: 1px solid #c9ccd1; }
.strip__icon { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; }
.strip__item .round { border-radius: 50%; }
.strip__icon .ico { width: 24px; height: 24px; }
.strip__text { display: grid; gap: 2px; margin-right: auto; }
.strip__text strong { font-size: .98rem; font-weight: 600; line-height: 1.25; }
.strip__text small { font-size: .82rem; color: var(--graphite); line-height: 1.4; max-width: 24ch; }

/* ==========================================================================
   03 · THE RANGE — pill tabs, an open row of cars, one quiet help link
   ========================================================================== */

.range { --ctl-w: 148px; padding: var(--section) var(--pad); }

.range__bar { display: flex; justify-content: space-between; align-items: center; gap: 14px 32px; flex-wrap: wrap; margin-top: clamp(18px, 2vw, 26px); }
/* Tabs: one light track with a raised white segment for the current category.
   Substantial, but never the solid black of the action buttons below. */
.tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--tint); border-radius: var(--r-lg); }
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 clamp(18px, 2vw, 28px);
  background: transparent; border: 0; border-radius: var(--r); cursor: pointer;
  font-stretch: 104%; font-size: 1.02rem; font-weight: 500; color: var(--graphite); white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.is-active { background: var(--white); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 23, 26, .1), 0 6px 16px -8px rgba(20, 23, 26, .3); }

/* Help for the undecided: one line beside the tabs, not a block of its own */
.range__help { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .94rem; color: var(--graphite); }
.range__help b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.range__help .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.range__help:hover .ico { transform: translateX(3px); }

.models {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 40px);
  margin-top: clamp(22px, 2.6vw, 34px);
  animation: panel .5s var(--ease) both;
}
.models--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.models[hidden] { display: none; }
@keyframes panel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.model__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-lg); background: var(--tint); }
.model__img img { transition: transform .9s var(--ease); }
.model:hover .model__img img { transform: scale(1.04); }
.model__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 18px; }
.model__name { font-stretch: 106%; font-weight: 500; font-size: clamp(1.25rem, 1.7vw, 1.6rem); letter-spacing: -.015em; line-height: 1.2; }
.model__price { font-size: .96rem; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.model__type { margin-top: 4px; font-size: .92rem; color: var(--graphite); }
.model__links { display: grid; grid-template-columns: repeat(2, minmax(0, var(--ctl-w))); gap: 10px; margin-top: 18px; }
.model__links .btn { min-height: 48px; padding: 0 12px; font-size: .92rem; }
.btn--ghost { background: transparent; color: var(--ink); border-color: #b3b7bc; }
.btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.models--4 .model__row { align-items: flex-end; gap: 12px; }
.models--4 .model__name { font-size: clamp(1.1rem, 1.4vw, 1.45rem); }
.models--4 .model__price { text-align: right; line-height: 1.25; }
.models--4 .model__price small { display: block; font-size: .78rem; font-weight: 400; color: var(--graphite); }
.range__note { margin-top: clamp(24px, 3vw, 36px); }

/* ==========================================================================
   04 · CURRENT OFFERS — one hero offer, three quiet rows, a live deadline, a one-field claim
   ========================================================================== */

.offers { padding: clamp(40px, 4vw, 72px) var(--pad) var(--section); }

/* Deadline: the real end date, counted down live */
/* Deadline: three large figures on hairlines, each over its unit */
.timer { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.timer__label { max-width: 9ch; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); line-height: 1.5; text-align: right; }
.timer__clock { display: flex; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; font-size: 1.05rem; }
.timer__clock span { display: grid; justify-items: center; gap: 4px; min-width: clamp(64px, 5.4vw, 84px); padding: 2px 0; border-left: 1px solid var(--rule); }
.timer__clock b { font-stretch: 104%; font-weight: 500; font-size: clamp(1.7rem, 2.5vw, 2.3rem); line-height: 1; letter-spacing: -.02em; }
.timer__clock i { font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }

/* Claim dialog */
.claimbox__benefit { margin-top: 6px; font-weight: 300; font-size: clamp(1.8rem, 4.4vw, 2.3rem); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.claimbox__benefit small { display: block; font-weight: 400; font-size: .9rem; letter-spacing: 0; color: var(--graphite); margin-bottom: 2px; }
.claimbox__benefit b { font-weight: 300; }
#claim-form { display: grid; gap: 10px; margin-top: 22px; }
#claim-form .field { min-height: 56px; border-radius: var(--r); padding: 0 22px; }
#claim-form .field input { height: 54px; }
#claim-form .btn { min-height: 56px; width: 100%; }
#claim-form.is-done > :not(.form__status) { display: none; }
#claim-form.is-done .form__status { font-size: 1.1rem; line-height: 1.45; padding: 4px 0; }
.claimbox .note { margin-top: 14px; }
.claimbox__wa { margin-top: 6px; }

/* ==========================================================================
   05 · MODEL SPOTLIGHT
   ========================================================================== */

/* The photograph fills the section: the car stands in the right half, and one block of words sits in the open left third */
.spot { position: relative; isolation: isolate; display: grid; color: #fff; background: #0e0f11; }
.spot__media { grid-area: 1 / 1; position: relative; z-index: -1; overflow: hidden; min-height: clamp(500px, 42vw, 720px); }
.spot__media img { position: absolute; inset: 0; object-position: 50% 68%; }
.spot__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 9, 10, .9) 0%, rgba(8, 9, 10, .72) 24%, rgba(8, 9, 10, 0) 48%);
}
.spot__panel {
  grid-area: 1 / 1; align-self: center; display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(40px, 4vw, 64px) var(--pad);
}
.spot__panel > * { max-width: min(560px, 36vw); }
.spot__panel .highlights { max-width: min(560px, 36vw); }
.spot__panel .h2 { max-width: none; white-space: nowrap; }
.spot__panel .label { color: rgba(255, 255, 255, .78); }
.spot__lede { margin-top: 14px; font-size: clamp(1.05rem, 1.45vw, 1.3rem); color: rgba(255, 255, 255, .88); }
.spot__lede b { font-weight: 600; color: #fff; white-space: nowrap; }
.spot__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: clamp(22px, 2.2vw, 30px); }
.spot__actions .btn { min-height: 54px; padding: 0 28px; background: #fff; border-color: #fff; color: var(--ink); }
.spot__actions .btn:hover { background: var(--tint); border-color: var(--tint); }
.spot__actions .more:hover { color: #fff; opacity: .8; }

/* Four short reasons, directly under the buttons: same block, no separate strip */
.highlights {
  width: 100%; display: grid; grid-template-columns: auto auto; justify-content: start; gap: 22px clamp(18px, 2vw, 36px);
  margin-top: clamp(24px, 2.4vw, 34px); padding-top: clamp(20px, 2vw, 26px); border-top: 1px solid rgba(255, 255, 255, .2);
}
.highlights li { display: inline-flex; align-items: center; gap: 12px; font-size: 1.06rem; font-weight: 500; white-space: nowrap; }
.highlights .ico { width: 22px; height: 22px; color: rgba(255, 255, 255, .7); }

/* ==========================================================================
   06 · SHOWROOMS
   ========================================================================== */

/* ==========================================================================
   07 · HAPPY CUSTOMERS — two columns: words and review left, delivery photos right
   ========================================================================== */

.why {
  padding: var(--section) var(--pad);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
}
.why__rating { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.why__rating .g { width: 40px; height: 40px; flex: none; }
.why__rating > span { display: grid; gap: 4px; }
.why__rating strong { display: flex; align-items: baseline; gap: 10px; font-weight: 400; }
.why__rating b { font-stretch: 106%; font-weight: 500; font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.why__rating small { font-size: .9rem; color: var(--graphite); line-height: 1.4; }

.review { display: grid; margin-top: clamp(28px, 3.4vw, 44px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--rule); }
.quote { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
.quote.is-active { opacity: 1; visibility: visible; }
.quote p { font-stretch: 104%; font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.35; letter-spacing: -.01em; text-wrap: pretty; }
.quote footer { margin-top: 22px; display: flex; align-items: center; gap: 14px; line-height: 1.4; }
.quote footer > span:last-child { display: grid; gap: 2px; }
.avatar { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--graphite); }
.avatar .ico { width: 22px; height: 22px; }
.quote cite { font-style: normal; font-weight: 600; font-size: .96rem; }
.quote small { display: flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--graphite); }
.quote small .g { width: 14px; height: 14px; flex: none; }
.review__nav { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.review__nav .more { margin-left: auto; }

/* One delivery photo at a time, captioned; the others wait in a rail down its side */
.gallery { display: grid; grid-template-columns: minmax(0, 1fr) clamp(72px, 6.6vw, 100px); gap: 10px; }
.gallery__main { position: relative; isolation: isolate; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); background: var(--tint); color: #fff; }
.gallery__img { position: absolute; inset: 0; z-index: -2; opacity: 0; transform: scale(1.03); transition: opacity .6s ease, transform 1.2s var(--ease); }
.gallery__img.is-active { opacity: 1; transform: none; }
.gallery__main::after { content: ""; position: absolute; inset: 55% 0 0 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 9, 10, .72), rgba(8, 9, 10, 0)); }
.gallery__bar { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 12px; padding: clamp(14px, 1.6vw, 22px); }
.gallery__cap { display: grid; gap: 2px; margin-right: auto; line-height: 1.35; }
.gallery__cap strong { font-weight: 600; font-size: 1rem; }
.gallery__cap small { font-size: .84rem; color: rgba(255, 255, 255, .8); }
.gallery__count { font-size: .84rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: 4px; }
.gallery__count span { opacity: .6; }
.gallery__bar .round { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.gallery__bar button.round:hover { background: #fff; border-color: #fff; color: var(--ink); }
.gallery__thumbs { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 10px; min-height: 0; }
.thumb {
  position: relative; min-height: 0; padding: 0; border: 0; overflow: hidden; cursor: pointer;
  border-radius: var(--r); background: var(--tint); opacity: .5;
  transition: opacity .25s var(--ease);
}
.thumb img { position: absolute; inset: 0; }
.thumb::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: inherit; opacity: 0; transition: opacity .25s var(--ease); }
.thumb:hover, .thumb.is-active { opacity: 1; }
.thumb.is-active::after { opacity: 1; }

/* ==========================================================================
   08 · FAQ — two columns: heading and contact left, a plain list of questions right
   ========================================================================== */

.faqs {
  padding: clamp(48px, 5vw, 80px) var(--pad) var(--section);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
/* One rhythm down the column: label, heading, line, button */
.faqs__intro { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 24px; justify-items: start; }
.faqs__intro .h2 { margin-top: 0; }
.contact { display: grid; gap: 24px; justify-items: start; }
.contact p { color: var(--graphite); max-width: 34ch; }
.contact strong { color: var(--ink); font-weight: 600; }

.faqs__list { display: grid; gap: 18px; }
.faq { border: 1px solid var(--rule); border-radius: var(--r); background: var(--white); transition: border-color .25s var(--ease); }
.faq:hover, .faq[open] { border-color: #b3b7bc; }
.faq summary {
  list-style: none; cursor: pointer; min-height: 56px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 18px 22px; font-stretch: 104%; font-size: clamp(1rem, 1.2vw, 1.12rem); font-weight: 500; line-height: 1.35;
  transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { width: 20px; height: 20px; color: var(--graphite); transition: transform .3s var(--ease); }
.faq[open] summary .ico { transform: rotate(180deg); }
.faq summary:hover { color: var(--graphite); }
.faq p { padding: 0 56px 20px 22px; max-width: 66ch; color: var(--graphite); }

/* ==========================================================================
   09 · FINAL CTA
   ========================================================================== */

.close {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--midnight);
  padding: clamp(64px, 8vw, 120px) var(--pad);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px clamp(24px, 4vw, 56px); align-items: center;
}
/* The driver's seat, darkened so the words and the form read clearly */
.close__media { position: absolute; inset: 0; z-index: -1; }
.close__media img { object-position: 50% 6%; }
.close__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5, 20, 31, .84) 0%, rgba(5, 20, 31, .66) 46%, rgba(5, 20, 31, .5) 100%);
}
.close__text .h2 { margin-top: 0; }
.close__text p { margin-top: 12px; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.5; color: rgba(255, 255, 255, .84); }
/* One white bar, fields divided by hairlines, the same control as the hero enquiry bar */
.close__form { display: grid; gap: 16px; }
.close__bar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center;
  background: var(--white); color: var(--ink); border-radius: var(--r-lg); padding: 8px;
}
.close__bar .field { border: 0; border-radius: 0; background: none; min-height: 56px; padding: 0 16px; }
.close__bar .field + .field { border-left: 1px solid var(--rule); }
.close__bar .field { cursor: text; transition: box-shadow .18s var(--ease); }
.close__bar .field--select { cursor: pointer; }
.close__bar .field:hover > .ico, .close__bar .field:focus-within > .ico { color: var(--ink); }
.close__bar .field:focus-within { box-shadow: inset 0 0 0 2px var(--ink); border-radius: var(--r); }
.close__bar .field.is-invalid { box-shadow: inset 0 0 0 1px var(--error); border-radius: var(--r); }
.close__bar .field input:not(:placeholder-shown), .close__bar .field select:valid { color: var(--ink); font-weight: 500; }
.close__bar .btn { min-height: 56px; padding: 0 28px; margin-left: 8px; }
.close__notes { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: .86rem; color: rgba(255, 255, 255, .82); }
.close__notes li, .close__notes a { display: inline-flex; align-items: center; gap: 8px; }
.close__notes .ico { width: 16px; height: 16px; }
.close__notes a { font-weight: 600; color: #fff; }
.close__wa { margin-left: auto; }
.close__notes a .ico { transition: transform .25s var(--ease); }
.close__notes a:hover .ico { transform: translateX(3px); }
.close__form.is-done > :not(.form__status) { display: none; }
.close__form.is-done .form__status { font-size: 1.1rem; line-height: 1.45; }

/* ---------- EMI calculator ---------- */
.emi {
  width: min(540px, calc(100vw - 32px)); border: 0; border-radius: var(--r);
  padding: clamp(24px, 3vw, 36px); color: var(--ink);
  box-shadow: 0 40px 90px -30px rgba(20, 23, 26, .5);
}
.emi::backdrop { background: rgba(20, 23, 26, .45); }
.emi__close { position: absolute; top: 14px; right: 14px; margin: 0; }
.emi__title { font-stretch: 108%; font-weight: 600; font-size: 1.5rem; line-height: 1.15; margin-top: 8px; padding-right: 48px; }
.emi__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.emi__field { display: grid; gap: 6px; }
.emi__field label { font-size: .78rem; font-weight: 500; color: var(--graphite); }
.emi__field input, .emi__field select {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); font-size: 1rem;
}
.emi__field input:focus, .emi__field select:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(20, 23, 26, .12); }
.emi__result { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 24px 0 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.emi__result span { flex-basis: 100%; font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.emi__result strong { font-stretch: 108%; font-weight: 600; font-size: clamp(2rem, 5vw, 2.5rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.emi__result small { color: var(--graphite); font-size: .92rem; }
.emi__cta { width: 100%; }
.emi .note { margin-top: 12px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* Footer: how to reach us first, then where, what and the rest. Four even columns, one quiet legal line. */
.footer { padding: clamp(56px, 6vw, 88px) var(--pad) 28px; background: var(--midnight); color: #fff; }
.footer__main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .8fr); gap: 40px clamp(32px, 5vw, 80px); }
.footer__brand { display: grid; gap: 16px; justify-items: start; align-content: start; }
.footer__tag { font-size: .96rem; line-height: 1.6; color: rgba(255, 255, 255, .64); max-width: 34ch; }
.footer__phone { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; font-weight: 500; font-size: 1.5rem; letter-spacing: -.01em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.footer__phone .ico { width: 20px; height: 20px; color: rgba(255, 255, 255, .6); }
.footer__ways { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.footer__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .34); border-radius: var(--r); font-size: .92rem; font-weight: 600; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.footer__btn:hover { border-color: #fff; }
.footer__btn--solid { background: #fff; border-color: #fff; color: var(--midnight); }
.footer__btn--solid:hover { background: var(--tint); border-color: var(--tint); }
.footer h4 { font-size: .9rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 20px; }
.footer__col li { margin-bottom: 12px; font-size: .98rem; line-height: 1.45; }
.footer__col a { color: rgba(255, 255, 255, .82); transition: color .2s var(--ease); }
.footer__col a:hover { color: #fff; }
.footer__rooms li { display: grid; gap: 2px; margin-bottom: 18px; }
.footer__room { display: grid; gap: 2px; }
.footer__room b { font-weight: 600; font-size: 1rem; color: #fff; }
.footer__room span { font-size: .9rem; color: rgba(255, 255, 255, .6); }
.footer__col .footer__tel { font-size: .9rem; color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums; }
.footer__hours { margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .88rem; color: rgba(255, 255, 255, .56); }
.footer__col .footer__all { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 2px; }
.footer__legal {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; justify-content: space-between; align-items: center; gap: 12px 32px; flex-wrap: wrap;
  font-size: .84rem; color: rgba(255, 255, 255, .5);
}
.footer__legal a { transition: color .2s var(--ease); }
.footer__legal a:hover { color: #fff; }
.footer__social { display: inline-flex; gap: 22px; margin-left: auto; }
.footer__social a { color: rgba(255, 255, 255, .78); font-weight: 600; }

.dock { display: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199px) {
  .nav__phone { display: none; }
  .hero { margin-bottom: 126px; padding-bottom: 212px; }
  .hero__controls { bottom: 212px; }
  .enq { bottom: -126px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; }
  .enq .field { min-height: 78px; }
  .enq .field:nth-of-type(3) { border-left: 0; }
  .enq .field:nth-of-type(-n+2) { border-bottom: 1px solid var(--rule); }
  .enq__submit { grid-column: 1 / -1; margin: 10px; min-height: 56px; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip__item:nth-child(3)::before { display: none; }
  .strip__item:nth-child(odd) { padding-left: 0; }
  .strip__item:nth-child(even) { padding-right: 0; }
  .models, .models--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deals { grid-template-columns: 1fr; }
  .spot__media { z-index: 0; min-height: 0; aspect-ratio: 16 / 9; }
  .spot__media::after { background: linear-gradient(0deg, #0e0f11 0%, rgba(14, 15, 17, 0) 28%); }
  .spot__panel { grid-area: 2 / 1; padding: 8px var(--gutter) clamp(40px, 6vw, 60px); }
  .spot__panel > * { max-width: none; }
  .spot__panel .h2 { white-space: normal; }
  .rooms__grid { grid-template-columns: 1fr; }
  .room__img { width: 30%; min-height: 150px; }
  .close { grid-template-columns: 1fr; }
  .footer__main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 859px) {
  :root { --nav-h: 64px; --section: 64px; }
  body { padding-bottom: 60px; }

  .nav__links, .nav .btn--small { display: none; }
  .nav__toggle { display: block; }

  /* Hero: the photograph leads, the message sits on a dark panel beneath it, then the form */
  .hero { display: flex; flex-direction: column; align-items: stretch; height: auto; min-height: 0; max-height: none; padding: 0; margin-bottom: 0; background: #0e0f11; }
  .hero__media { position: relative; inset: auto; z-index: 0; height: min(54svh, 440px); }
  .hero__slide { object-position: var(--pos-m, 50% 60%); }
  .hero__veil { background: linear-gradient(0deg, #0e0f11 0%, rgba(14, 15, 17, .55) 18%, rgba(14, 15, 17, 0) 44%), linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 22%); }
  .hero__inner { position: relative; z-index: 1; max-width: none; padding: 0 var(--gutter); }
  .hero__title { font-size: clamp(1.6rem, 7.3vw, 2.2rem); }
  .hero__lede { font-size: .98rem; margin-top: 12px; }
  .hero__actions { gap: 14px 22px; margin-top: 20px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__controls { position: static; padding: 18px var(--gutter) 26px; gap: 10px; }
  .hero__controls .round { width: 40px; height: 40px; }
  .hero__bar { flex: 1; width: auto; }
  .enq {
    position: static; margin: 0; border-radius: 0; padding: 18px var(--gutter) 6px;
    box-shadow: none; background: var(--white);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
  }
  .enq .field, .enq .field + .field { border: 1px solid var(--rule); border-radius: var(--r); min-height: 54px; padding: 0 16px; }
  .enq .field:nth-of-type(-n+2) { grid-column: 1 / -1; }
  .enq .field .ico { display: none; }
  .enq__submit { grid-column: 1 / -1; margin: 0; min-height: 54px; }

  /* Action strip: 2 x 2 tiles */
  .strip { width: auto; margin: 20px var(--gutter) 0; padding-top: 0; border: 1px solid var(--rule); border-radius: var(--r); }
  .strip__item, .strip__item:first-child, .strip__item:last-child, .strip__item:nth-child(odd), .strip__item:nth-child(even) { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 16px; }
  .strip__item:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .strip__icon { width: 44px; height: 44px; }
  .strip__icon .ico { width: 20px; height: 20px; }
  .strip__text small, .strip__item .round { display: none; }
  .strip__item + .strip__item::before { top: 0; bottom: 0; }
  .strip__item:nth-child(3)::before { display: none; }

  /* Range: swipe through the cars */
  .range { padding-left: 0; padding-right: 0; }
  .range > .label, .range > .h2, .range__bar, .range__note { padding-left: var(--gutter); padding-right: var(--gutter); }
  .tabs { width: 100%; }
  .tabs { display: flex; }
  .tab { flex: 1; padding: 0 8px; font-size: .94rem; gap: 6px; }
  .models, .models--4 {
    display: flex; gap: 16px; overflow-x: auto;
    padding: 0 var(--gutter) 6px; scroll-padding-left: var(--gutter);
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .models::-webkit-scrollbar { display: none; }
  .model { flex: 0 0 80%; scroll-snap-align: start; }
  .model__links { grid-template-columns: 1fr 1fr; }

  /* Offers: hero offer first, then the rows */
  .offers .head { display: block; }
  .timer { margin-top: 18px; gap: 14px; }
  .timer__label { text-align: left; }
  .timer__clock span { min-width: 60px; }
  .feature { min-height: 0; aspect-ratio: 4 / 5; border-radius: var(--r); }
  .feature__foot .pill { flex: 1 1 100%; justify-content: center; }
  /* Rows keep to one line: the pill shrinks to a round arrow */
  .row .pill { width: 46px; min-height: 46px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  .row__img { width: 84px; }
  .tip { max-width: 220px; }

  /* Spotlight: words, car, highlights */
  .spot__media { aspect-ratio: 4 / 3; }
  .spot__media img { object-position: 58% 70%; }
  .spot__actions .btn { flex: 1 1 100%; }

  /* Showrooms */
  .room__img { width: 32%; min-height: 0; }
  .room__body { padding: 16px; }
  .room .btn--outline { min-height: 44px; }

  /* Customers */
  .why { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; gap: 8px; }
  .gallery__thumbs { grid-template-rows: none; grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .thumb { aspect-ratio: 4 / 3; }
  .gallery__cap small { display: none; }
  .review__nav .more { margin-left: auto; }

  /* FAQ */
  .faqs { grid-template-columns: 1fr; }
  .faqs__intro { position: static; }
  .faq p { padding-right: 22px; }
  .contact .btn { width: 100%; }

  /* Final CTA */
  .close__bar { grid-template-columns: 1fr; padding: 6px 8px 8px; }
  .close__bar .field + .field { border-left: 0; border-top: 1px solid var(--rule); }
  .close__bar .btn { margin: 8px 0 0; }
  .close__wa { margin-left: 0; }

  .footer__main { grid-template-columns: 1fr; }
  .emi__grid { grid-template-columns: 1fr; }

  .dock {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; inset: auto 0 0 0; z-index: 60;
    background: var(--white); border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform .3s var(--ease);
  }
  .dock a { min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .92rem; font-weight: 600; }
  .dock__wa { color: #0b6b3a; border-right: 1px solid var(--rule); }
  .is-typing .dock { transform: translateY(100%); }
}

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

/* ==========================================================================
   EDITORIAL SECTIONS — Why Kia, finder, the month's offer, showrooms
   ========================================================================== */

/* Pan: the photograph sits further right so the car clears the words; a mirrored copy continues the scene to the left edge */
.pan { overflow: hidden; }
.pan img { position: absolute; top: 0; left: var(--shift); width: 100%; height: 100%; object-position: 50% var(--y, 60%); }
.pan img + img { left: calc(var(--shift) - 100% + 1px); transform: scaleX(-1); }
.spot__media::after { background: linear-gradient(90deg, rgba(8, 9, 10, .7) 0%, rgba(8, 9, 10, .4) 26%, rgba(8, 9, 10, 0) 46%); }
.hero__veil { background: linear-gradient(90deg, rgba(8, 9, 10, .66) 0%, rgba(8, 9, 10, .36) 30%, rgba(8, 9, 10, 0) 52%), linear-gradient(0deg, rgba(8, 9, 10, .6) 0%, rgba(8, 9, 10, 0) 34%); }

/* Why Kia: four words carry the argument; the photograph does the rest */
/* The next step: one solid button, three quiet routes beside it */

/* Range: three large photographs to a row */
/* Frames taller than Kia's 800x520 shots: the scene loses a little at the sides, the car never does */
.model__img { aspect-ratio: 4 / 3; }
#panel-suv .model__img { aspect-ratio: 5 / 4; }

/* Finder: one question, one answer */
.finder { padding: var(--section) var(--pad); background: var(--tint); }
.finder__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; max-width: 1316px; margin: 0 auto; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: var(--white); border-radius: var(--r-lg); }
.chip {
  min-height: 46px; padding: 0 clamp(14px, 1.6vw, 22px); background: transparent; border: 0; border-radius: var(--r); cursor: pointer;
  font-stretch: 104%; font-size: .98rem; font-weight: 500; color: var(--graphite); white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.chip:hover { color: var(--ink); }
.chip.is-active { background: var(--ink); color: #fff; }
/* The answer is one card, centred on the page: the photograph fills its left part, the words sit in the right */
.finder__result { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); max-width: 1316px; margin: clamp(24px, 3vw, 40px) auto 0; overflow: hidden; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.finder__img { aspect-ratio: 20 / 13; overflow: hidden; background: var(--rule); }
.finder__img img { transition: opacity .3s ease; }
.finder__result.is-swapping .finder__img img, .finder__result.is-swapping .finder__text { opacity: 0; }
.finder__text { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(22px, 2.4vw, 32px) clamp(24px, 3.2vw, 48px); transition: opacity .3s ease; }
/* Two tones, clear contrast: the name and the price in ink, the label and the sentence in grey; sizes step by ~1.25 */
.finder__text .label { font-size: .8rem; color: var(--graphite); }
.finder__text .h2 { margin-top: 12px; font-weight: 600; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.025em; color: var(--ink); }
.finder__line { margin-top: 14px; font-size: clamp(1.05rem, 1.3vw, 1.15rem); line-height: 1.5; color: var(--graphite); max-width: 36ch; }
.finder__price { margin-top: 22px; font-stretch: 104%; font-weight: 500; font-size: clamp(1.2rem, 1.5vw, 1.35rem); letter-spacing: -.015em; color: var(--ink); font-variant-numeric: tabular-nums; }
.finder__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 26px; }
.finder__actions .btn { min-height: 52px; padding: 0 26px; }

/* The month's offer: a campaign, not a card. The photograph runs to the page edge. */
.offers { padding: var(--section) var(--pad) var(--section) 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.promo__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0 var(--r-lg) var(--r-lg) 0; background: var(--tint); }
.promo__body .h2 sup { font-size: .4em; font-weight: 400; vertical-align: top; position: relative; top: .3em; margin-left: 2px; color: var(--graphite); }
.promo__lede { margin-top: 16px; font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: var(--graphite); max-width: 34ch; }
/* Label and deadline share one line; the deadline is a sentence, not a scoreboard */
.promo__media { display: block; cursor: pointer; }
.promo__media img { transition: transform 1.2s var(--ease); }
.promo__media:hover img { transform: scale(1.03); }
.promo__top { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.promo__top .timer { gap: 8px; font-size: .9rem; color: var(--graphite); }
.promo__top .timer__label { max-width: none; font-size: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; }
.promo__top .timer__clock { gap: 10px; font-size: inherit; font-weight: 600; color: var(--ink); }
.promo__top .timer__clock span { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; padding: 0; border: 0; }
.promo__top .timer__clock b { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.promo__top .timer__clock i { font-size: .84rem; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* The action is the offer: one field, and the button says what you get */
.reveal-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-top: clamp(24px, 2.6vw, 36px); border: 1px solid var(--ink); border-radius: var(--r-lg); }
.reveal-bar .field { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-content: center; min-height: 76px; padding: 0 20px; border: 0; background: none; }
.reveal-bar .field label { grid-column: 1 / -1; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.4; }
.reveal-bar .field input { height: 28px; font-size: 1.05rem; }
.reveal-bar .field:focus-within { box-shadow: none; background: var(--tint); }
.reveal-bar .field.is-invalid { background: #fdf3f2; }
.reveal-bar .btn { min-height: 0; height: auto; margin: 8px; padding: 0 clamp(20px, 2.2vw, 32px); }
.reveal-bar .form__status { grid-column: 1 / -1; }
.reveal-bar.is-done > :not(.form__status) { display: none; }
.reveal-bar.is-done .form__status { padding: 22px 20px; font-size: 1.05rem; line-height: 1.45; }
.promo__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap; margin-top: 14px; }

/* Showrooms: three to a row, each led by a large photograph */
.rooms { padding: var(--section) var(--pad) clamp(32px, 3.6vw, 52px); }
.rooms__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin-top: clamp(22px, 2.6vw, 34px); }
.room__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); background: var(--tint); }
.room__img img { transition: transform .9s var(--ease); }
.room:hover .room__img img { transform: scale(1.04); }
.room__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 18px; }
.room h3 { font-stretch: 106%; font-weight: 500; font-size: clamp(1.25rem, 1.7vw, 1.6rem); letter-spacing: -.015em; line-height: 1.2; }
.room address { margin-top: 4px; font-size: .92rem; color: var(--graphite); }
.room__hours { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.room__hours .ico { width: 18px; height: 18px; color: var(--graphite); }
.room__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 168px)); gap: 10px; margin-top: 18px; }
.room__actions .btn { min-height: 48px; padding: 0 12px; font-size: .92rem; }
.room__actions .btn--ghost:hover .ico { transform: none; }

@media (max-width: 1199px) {
  .models { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .model__links { grid-template-columns: 1fr; }
  .finder__result { grid-template-columns: 1fr; max-width: none; }
  .offers { grid-template-columns: 1fr; padding-right: 0; }
  .promo__media { border-radius: 0; }
  .promo__body { padding: 0 var(--gutter); }
  .rooms__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .room__actions { grid-template-columns: 1fr; }
  .spot__media.pan img { left: 0; }
  .spot__media.pan img + img { display: none; }
  .spot__media::after { background: linear-gradient(0deg, #0e0f11 0%, rgba(14, 15, 17, 0) 28%); }
}
@media (max-width: 859px) {
  .hero .pan img { left: 0; }
  .hero .pan img + img { display: none; }
  .hero__veil { background: linear-gradient(0deg, #0e0f11 0%, rgba(14, 15, 17, .55) 18%, rgba(14, 15, 17, 0) 44%), linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 22%); }
  .model__links { grid-template-columns: 1fr 1fr; }
  .finder { overflow-x: clip; }
  .finder__head { display: block; }
  .chips { display: flex; flex-wrap: nowrap; overflow-x: auto; margin: 18px calc(-1 * var(--gutter)) 0; padding: 5px var(--gutter); background: none; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { background: var(--white); flex: none; }
  .finder__actions .btn { flex: 1 1 100%; }
  .promo__media { aspect-ratio: 4 / 3; }
  .rooms__grid { grid-template-columns: 1fr; gap: 32px; }
  .room__actions { grid-template-columns: 1fr 1fr; }
  .promo__body .timer { flex-wrap: wrap; }
}
@media (max-width: 859px) {
  .highlights { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 859px) {
  .reveal-bar { grid-template-columns: 1fr; }
  .reveal-bar .btn { min-height: 54px; }
}

/* ==========================================================================
   WHY KIA — four numbered reasons beside one photograph that follows them; the four quick actions in one row beneath
   ========================================================================== */
.kia { padding: var(--section) var(--pad) 0; }
.kia__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: stretch; }
.kia__text { display: flex; flex-direction: column; }
.kia__list { margin-top: clamp(30px, 3.2vw, 46px); }
.kia__list li + li { border-top: 1px solid var(--rule); }
.reason {
  position: relative; width: 100%; display: grid; grid-template-columns: 60px minmax(0, 4fr) minmax(0, 7fr); align-items: baseline; gap: 16px; text-align: left;
  padding: clamp(13px, 1.4vw, 18px) 0; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink);
}
/* The number: bold and a size up, like a chapter mark; light grey until its turn */
.reason i { font-style: normal; font-stretch: 104%; font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; line-height: 1; color: #c9ccd1; font-variant-numeric: tabular-nums; transition: color .25s var(--ease); }
.reason b { font-stretch: 106%; font-weight: 500; font-size: clamp(1.2rem, 1.7vw, 1.55rem); letter-spacing: -.02em; line-height: 1.15; color: #8b9096; transition: color .25s var(--ease); }
.reason span { font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.5; color: #9a9ea4; transition: color .3s var(--ease); }
.reason:hover b, .reason.is-active b { color: var(--ink); }
.reason:hover span, .reason.is-active span { color: var(--graphite); }
.reason.is-active i { color: #8b9096; }
/* The photograph names what it shows, and four dots say where in the sequence we are */
.kia__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; color: #fff; background: linear-gradient(0deg, rgba(8, 9, 10, .6), rgba(8, 9, 10, 0)); font-size: .9rem; font-weight: 600; }
.kia__dots { display: inline-flex; gap: 6px; }
.kia__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: background .3s var(--ease), transform .3s var(--ease); }
.kia__dots i.is-active { background: #fff; transform: scale(1.25); }
.kia__media { position: relative; min-height: 320px; overflow: hidden; border-radius: var(--r-lg); background: var(--tint); }
.kia__img { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.kia__img.is-active { opacity: 1; }
/* The actions: the same four as before, one hairline row, no block of their own */
.kia .strip { width: auto; margin: clamp(36px, 4.6vw, 72px) 0 0; padding-top: 0; }
.kia .strip__item { padding: 8px clamp(16px, 2vw, 28px); }
.kia .strip__item:first-child { padding-left: 0; }
.kia .strip__item:last-child { padding-right: 0; }
.kia .strip__item .round { margin-left: auto; }
.kia .strip__text { margin-right: 16px; }
.kia .strip__item + .strip__item::before { top: 0; bottom: 0; }
.kia .strip__icon { width: 46px; height: 46px; }
.kia .strip__icon .ico { width: 22px; height: 22px; }
.kia .strip__text { gap: 7px; }
.kia .strip__text strong { font-size: 1.1rem; }
.kia .strip__text small { font-size: .92rem; }
@media (max-width: 1199px) {
  .kia__grid { grid-template-columns: 1fr; }
  .kia__media { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .kia .strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 859px) {
  .kia__media { aspect-ratio: 4 / 3; }
  .reason { grid-template-columns: 52px 1fr; gap: 2px 12px; }
  .reason span { grid-column: 2; }
  .kia .strip { margin: 28px 0 0; }
}

/* The month's offer, told in order: the car and the saving, the one action, then what happens next */
.offers { padding: var(--section) var(--pad); align-items: stretch; gap: clamp(28px, 4vw, 72px) clamp(32px, 5vw, 80px); }
.promo__media { aspect-ratio: auto; min-height: clamp(360px, 36vw, 560px); border-radius: var(--r-lg); position: relative; }
.promo__media img { position: absolute; inset: 0; object-position: 50% 60%; }
.promo__body { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(24px, 3vw, 40px); padding: 6px 0; }
.promo__top { padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.reveal-bar { margin-top: 0; }
.promo__steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; }
.promo__steps li { display: grid; gap: 6px; align-content: start; padding-top: 18px; border-top: 1px solid var(--rule); }
.promo__steps i { font-style: normal; font-size: .78rem; font-weight: 500; letter-spacing: .08em; color: var(--graphite); font-variant-numeric: tabular-nums; }
.promo__steps b { font-stretch: 106%; font-weight: 500; font-size: clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing: -.015em; line-height: 1.2; }
.promo__steps span { font-size: .96rem; line-height: 1.45; color: var(--graphite); max-width: 36ch; }
@media (max-width: 1199px) {
  .offers { padding: var(--section) var(--gutter); }
  .promo__media { min-height: 0; aspect-ratio: 16 / 9; border-radius: var(--r-lg); }
  .promo__body { padding: 0; }
}
@media (max-width: 859px) {
  .promo__media { aspect-ratio: 4 / 3; }
  .promo__steps { grid-template-columns: 1fr; gap: 0; }
  .promo__steps li { padding: 16px 0; }
}

/* ==========================================================================
   THE OFFER — one outlined box: the photograph fills its left half uncropped; the message sits in its tinted right half
   ========================================================================== */
.offers { display: block; padding: var(--section) var(--pad); }
.deal {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); overflow: hidden;
  margin-top: clamp(22px, 2.6vw, 34px);
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg);
}
/* The photograph fills its column centred; the box is only a little taller than the shot, so only sky and road edges go */
.deal__photo { position: relative; min-height: clamp(360px, 30vw, 440px); background: var(--tint); }
.deal__photo img { position: absolute; inset: 0; object-position: 50% 50%; }
.deal__text { display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 2.1vw, 27px); padding: clamp(28px, 3vw, 40px) clamp(26px, 3vw, 44px); background: var(--tint); }
.deal__text > * { margin: 0; }
.deal__tag { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; color: var(--graphite); }
.deal__tag .ico { width: 20px; height: 20px; }
/* One thing is loud: the saving. Everything else is quieter, by size, weight or colour. */
.deal__title { display: grid; gap: 8px; }
.deal__title b { font-stretch: 104%; font-weight: 600; font-size: clamp(1.9rem, 2.7vw, 2.7rem); line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.deal__title span { font-size: clamp(.98rem, 1.15vw, 1.08rem); line-height: 1.5; color: var(--graphite); }
.deal__title sup { font-size: .4em; font-weight: 400; vertical-align: top; position: relative; top: .3em; margin-left: 2px; letter-spacing: 0; color: var(--graphite); }
/* The price, before and after, on one line */
.deal__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; font-variant-numeric: tabular-nums; }
.deal__price small { font-size: .9rem; color: var(--graphite); }
.deal__price b { font-stretch: 104%; font-weight: 500; font-size: clamp(1.25rem, 1.6vw, 1.6rem); letter-spacing: -.02em; line-height: 1.1; }
.deal__price s { font-size: .94rem; color: #9a9ea4; }
.deal__price sup { font-size: .5em; font-weight: 400; vertical-align: top; position: relative; top: .3em; color: var(--graphite); }
.deal__price small { flex-basis: 100%; font-size: .8rem; color: var(--graphite); }
/* The deadline: one quiet line on hairlines */
.deal__ends { padding: 10px 0; border-top: 1px solid #d4d7db; border-bottom: 1px solid #d4d7db; }
.deal__ends .timer { gap: 12px; font-size: .88rem; color: var(--graphite); }
.deal__ends .timer__label { max-width: none; font-size: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left; }
.deal__ends .timer__clock { gap: 12px; font-size: inherit; font-weight: 600; color: var(--ink); }
.deal__ends .timer__clock span { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; padding: 0; border: 0; }
.deal__ends .timer__clock b { font-stretch: 104%; font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; }
.deal__ends .timer__clock i { font-size: .82rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--graphite); }
.deal__act { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.deal__act .btn { min-height: 48px; padding: 0 22px; }
.deal__act .more { font-size: 1rem; }
.deal .note { font-size: .76rem; color: #8b9096; }
@media (max-width: 1199px) {
  .deal { grid-template-columns: 1fr; }
  .deal__photo { min-height: 0; aspect-ratio: 2 / 1; }
}
@media (max-width: 859px) {
  .deal__text { padding: 22px 18px 24px; }
  .deal__act .btn { width: 100%; }
}
@media (max-width: 1199px) { .finder__text { padding: 0; } }
@media (max-width: 859px) { .nav__right { display: none; } .nav .brand { flex: none; } }

/* ==========================================================================
   TYPE, AS KIA SETS IT — Bold headings with slightly tight tracking; Regular text and navigation with a hair of tracking
   ========================================================================== */
/* These apply to the Kia Signature page only. The Archivo page keeps the weights it was designed with. */
html:not(.font-archivo) body { letter-spacing: .01em; }
html:not(.font-archivo) .h2, html:not(.font-archivo) .h2--xl, html:not(.font-archivo) .hero__title, html:not(.font-archivo) .emi__title { font-weight: 700; letter-spacing: -.02em; }
/* The four reason names in Why Kia are Regular: the section heading above them is the bold line, not these */
html:not(.font-archivo) .reason b { font-weight: 400; }
html:not(.font-archivo) .nav__links a, html:not(.font-archivo) .nav__phone, html:not(.font-archivo) .nav__mobile a { font-weight: 400; letter-spacing: .01em; }
html:not(.font-archivo) .tab, html:not(.font-archivo) .chip { font-weight: 400; }
html:not(.font-archivo) .tab.is-active, html:not(.font-archivo) .chip.is-active { font-weight: 700; }
html:not(.font-archivo) .room__hours, html:not(.font-archivo) .hero__count, html:not(.font-archivo) .gallery__count, html:not(.font-archivo) .range__help, html:not(.font-archivo) .kia__cap { font-weight: 400; }
html:not(.font-archivo) .reason i { font-weight: 700; }
html:not(.font-archivo) .deal__title b, html:not(.font-archivo) .finder__text .h2 { font-weight: 700; }
html:not(.font-archivo) .more { font-weight: 700; }

/* Nav: no underline, and every item at full strength. Hovering dims the item slightly as feedback. */
.nav__links a::after { display: none; }
.nav__links a { opacity: 1; transition: opacity .2s var(--ease); }
.nav__links > a:hover, .nav__drop > a:hover { opacity: .62; }
.nav__menu a { opacity: 1; }

/* Font variant B: the same page set in Archivo. Nothing else changes. */
.font-archivo { --font: "Archivo", "Helvetica Neue", Arial, sans-serif; }

/* Browser autofill: keep the field white with ink text instead of the browser's tinted fill */
.field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus, .field select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--white) inset; box-shadow: 0 0 0 1000px var(--white) inset;
  caret-color: var(--ink); transition: background-color 9999s ease-out;
}
/* The field's own outline is replaced by the cell ring above */
.enq .field input:focus-visible, .enq .field select:focus-visible, .close__bar .field input:focus-visible, .close__bar .field select:focus-visible { outline: none; }
@media (max-width: 859px) {
  .enq .field:focus-within, .enq .field.is-invalid { border-radius: var(--r); }
}

/* ==========================================================================
   HERO WITHOUT A FORM — the enquiry form now opens in a dialog from any enquiry button
   ========================================================================== */
@media (min-width: 860px) {
  .hero { margin-bottom: 0; padding-bottom: clamp(72px, 10vh, 104px); }
  .hero__controls { bottom: clamp(72px, 10vh, 104px); }
}
@media (min-width: 860px) and (max-width: 1199px) {
  /* iPad landscape and small laptops: smaller headline, car further right */
  .hero .pan { --shift: 27% !important; }
  .hero__inner { max-width: 400px; }
  .hero__title { font-size: 2.15rem; }
  .hero__lede { max-width: 32ch; margin-top: 18px; }
}
/* The enquiry dialog: same sheet as the EMI and claim dialogs, four boxed fields and one button */
.enquiry { width: min(480px, calc(100vw - 32px)); }
#quick-form { display: grid; gap: 10px; margin-top: 22px; }
#quick-form .field { min-height: 56px; padding: 0 18px; }
#quick-form .field input, #quick-form .field select { height: 54px; }
#quick-form .btn { min-height: 56px; width: 100%; margin-top: 4px; }
#quick-form.is-done > :not(.form__status) { display: none; }
#quick-form.is-done .form__status { font-size: 1.1rem; line-height: 1.45; padding: 4px 0; }
.enquiry .note { margin-top: 14px; }
/* With no form on its edge, the hero fills the whole first screen */
@media (min-width: 860px) { .hero { height: 100svh; min-height: 680px; max-height: 1040px; } }

/* ==========================================================================
   LAPTOP AND SAFARI HARDENING
   ========================================================================== */
/* Header: nothing wraps onto a second line; the phone number steps aside before it would */
.nav__links a, .nav__phone, .nav .btn { white-space: nowrap; }
@media (max-width: 1359px) { .nav__phone { display: none; } }
@media (min-width: 860px) and (max-width: 1023px) { .nav__links { gap: 18px; } .nav__links a { font-size: .95rem; } }
/* Older Safari: native select and input chrome off, and a hero height it understands */
.field input, .field select, .emi__field input, .emi__field select { -webkit-appearance: none; }
@media (min-width: 860px) {
  @supports not (height: 100svh) { .hero { height: 100vh; } }
}

/* ==========================================================================
   HERO — a fixed headline for the dealership; the rotating banner sits beneath it as one line and its two buttons
   ========================================================================== */
.hero__banner { margin-top: clamp(22px, 3vh, 32px); padding-top: clamp(18px, 2.6vh, 26px); border-top: 1px solid rgba(255, 255, 255, .3); transition: opacity .35s ease; }
.hero__banner.is-swapping { opacity: 0; }
.hero__now { display: grid; gap: 6px; }
.hero__now b { font-size: clamp(1.2rem, 1.7vw, 1.55rem); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.hero__now span { font-size: clamp(.98rem, 1.15vw, 1.1rem); line-height: 1.5; color: rgba(255, 255, 255, .84); }
.hero__banner .hero__actions { margin-top: clamp(20px, 3vh, 28px); }
.hero__lede { margin-top: 20px; }
html:not(.font-archivo) .hero__now b { font-weight: 700; }
@media (max-width: 859px) { .hero__banner { margin-top: 18px; padding-top: 16px; } .hero__banner .hero__actions { margin-top: 16px; } }

/* Range: a short description under the heading; cards carry name, tagline, price, one line, then Explore and Get Price */
.range__lede { margin-top: 14px; max-width: 78ch; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.6; color: var(--graphite); }
.model__name { margin-top: 18px; }
.model__name a { transition: color .2s var(--ease); }
.model__name a:hover { color: var(--navy-2); }
.model__tag { margin-top: 6px; font-size: 1rem; color: var(--ink); }
.model__price { display: block; margin-top: 10px; font-size: 1.02rem; font-weight: 600; white-space: normal; }
.model__line { margin-top: 8px; font-size: .92rem; line-height: 1.5; color: var(--graphite); max-width: 44ch; }
.model__links { grid-template-columns: repeat(2, minmax(0, 190px)); }
html:not(.font-archivo) .model__price { font-weight: 700; }
@media (max-width: 859px) { .range > .range__lede { padding-left: var(--gutter); padding-right: var(--gutter); } .model__links { grid-template-columns: 1fr 1fr; } }

/* 7-Seaters has four cars: four to a row on wide screens, two on laptops and tablets */
.models--4 { gap: clamp(18px, 2vw, 30px); }
.models--4 .model__name { font-size: clamp(1.15rem, 1.5vw, 1.5rem); }
.models--4 .model__price { text-align: left; }
.models--4 .model__links { grid-template-columns: 1fr 1fr; }
.models--4 .model__links .btn { padding: 0 8px; font-size: .88rem; gap: 6px; }
@media (min-width: 860px) and (max-width: 1279px) { .models.models--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The dealership headline holds two lines */
@media (min-width: 860px) { .hero__title { font-size: clamp(2rem, 3.3vw, 3.1rem); white-space: nowrap; } }
@media (max-width: 859px) { .hero__title br { display: none; } }
/* Range cards: the starting price sits on the name's line, at the right */
@media (min-width: 1200px) {
  .models:not(.models--4) .model { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; }
  .models:not(.models--4) .model > * { grid-column: 1 / -1; }
  .models:not(.models--4) .model__img { grid-row: 1; }
  .models:not(.models--4) .model__name { grid-column: 1; grid-row: 2; }
  .models:not(.models--4) .model__price { grid-column: 2; grid-row: 2; margin-top: 18px; text-align: right; white-space: nowrap; }
  .models:not(.models--4) .model__tag { grid-row: 3; }
  .models:not(.models--4) .model__line { grid-row: 4; }
  .models:not(.models--4) .model__links { grid-row: 5; }
}
.model__price small { font-weight: 400; color: var(--graphite); }
.model__price b { font-weight: inherit; }
@media (min-width: 1200px) {
  .models:not(.models--4) .model__price { align-self: start; line-height: 1.25; }
  .models:not(.models--4) .model__price small { display: block; font-size: .8rem; }
  .models:not(.models--4) .model__price b { font-size: 1.15rem; }
}
/* Range cards: more air between tagline, description and buttons; buttons line up across the row; a larger price */
.model__tag { margin-top: 8px; }
.model__line { margin-top: 14px; }
.model__links { margin-top: 24px; }
.model__price b { font-size: 1.15rem; }
@media (min-width: 860px) {
  .models .model { display: grid; grid-template-rows: auto auto auto 1fr auto; }
  .models--4 .model { grid-template-rows: auto auto auto auto 1fr auto; }
  .models .model__links { align-self: end; }
}
@media (min-width: 1200px) {
  .models:not(.models--4) .model__price b { font-size: 1.45rem; letter-spacing: -.01em; }
  .models:not(.models--4) .model__price small { font-size: .84rem; }
}
/* Range header: heading left, description right on the same baseline; the tabs sit clear beneath */
.range__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px clamp(32px, 6vw, 96px); }
.range__head .h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.1; }
.range__head .range__lede { margin: 0 0 4px; max-width: 58ch; flex: 0 1 46%; font-size: clamp(1rem, 1.15vw, 1.08rem); }
.range__bar { margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 1023px) { .range__head { display: block; } .range__head .range__lede { margin-top: 14px; max-width: 70ch; } }
@media (max-width: 859px) { .range__head { padding-left: var(--gutter); padding-right: var(--gutter); } .range > .range__lede { padding: 0; } }

/* ==========================================================================
   HERO, LIGHTER — left: the headline, one quiet line, one button. Right, by the arrows: the current banner as a caption.
   ========================================================================== */
.hero__lede { max-width: 46ch; margin-top: 18px; font-size: clamp(1rem, 1.2vw, 1.12rem); color: rgba(255, 255, 255, .8); }
.hero__inner .hero__actions { margin-top: clamp(26px, 3.6vh, 36px); }
.hero__caption { display: grid; gap: 4px; margin: 0; transition: opacity .35s ease; }
.hero__caption.is-swapping { opacity: 0; }
.hero__caption b { font-size: clamp(1.05rem, 1.3vw, 1.25rem); font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
.hero__caption span { font-size: .95rem; line-height: 1.45; color: rgba(255, 255, 255, .78); }
html:not(.font-archivo) .hero__caption b { font-weight: 700; }
@media (min-width: 860px) {
  .hero__caption { position: absolute; right: var(--pad); bottom: calc(clamp(72px, 10vh, 104px) + 66px); max-width: 340px; text-align: right; }
}
@media (max-width: 859px) {
  .hero__caption { position: relative; z-index: 1; padding: 20px var(--gutter) 0; }
  .hero__inner .hero__actions { margin-top: 20px; }
}
.range__head .range__lede { max-width: 62ch; flex-basis: 50%; }
@media (min-width: 1024px) and (max-width: 1399px) { .range__head .range__lede { flex-basis: 54%; max-width: none; font-size: 1rem; } .range__head { gap: 20px 40px; } }
.model__line { margin-top: 10px; }
/* Slide caption: clear of the arrows, lines balanced so no word is left alone */
.hero__caption { gap: 8px; }
.hero__caption span { text-wrap: balance; }
@media (min-width: 860px) {
  .hero__caption { bottom: calc(clamp(72px, 10vh, 104px) + 84px); max-width: 420px; }
  .hero__caption b { font-size: clamp(1.15rem, 1.45vw, 1.4rem); }
  .hero__caption span { font-size: 1rem; }
}

/* ==========================================================================
   HOMEPAGE ON A PHONE — a mobile-first pass over five sections (2026-10-13)
   ========================================================================== */
@media (max-width: 859px) {
  /* WHY CHOOSE US — heading first, then the photograph, then four titles of which one is open at a time.
     All four titles are readable at once (no greyed-out rows); the open one shows its line, and the block keeps
     one height as it changes so the page never jumps. */
  .kia__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kia__text { display: contents; }
  .kia__text > .label { order: 1; }
  .kia__text > .h2 { order: 2; }
  .kia__media { order: 3; margin-top: 20px; aspect-ratio: 16 / 10; min-height: 0; }
  .kia__list { order: 4; margin-top: 6px; }
  .reason { grid-template-columns: 30px minmax(0, 1fr) 24px; align-items: center; gap: 0 10px; min-height: 56px; padding: 14px 0; }
  .reason i { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: #8b9096; }
  .reason b, .reason:hover b { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
  .reason span, .reason:hover span { grid-column: 2 / 4; grid-row: 2; max-height: 0; overflow: hidden; opacity: 0; font-size: .98rem; line-height: 1.5; color: var(--graphite); transition: max-height .35s var(--ease), opacity .3s ease, margin-top .35s var(--ease); }
  .reason.is-active span { max-height: 7.5em; min-height: 4.5em; margin-top: 6px; opacity: 1; }
  .reason.is-active i { color: var(--ink); }
  /* + opens, − is the open one */
  .reason::after { content: ""; grid-column: 3; grid-row: 1; justify-self: end; width: 12px; height: 12px; background: linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat; opacity: .55; transition: opacity .2s ease; }
  .reason.is-active::after { background: linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat; opacity: 1; }
  html:not(.font-archivo) .reason b { font-weight: 700; }

  /* QUICK ACTIONS — four equal tiles, each one row: icon then label. Same padding on every tile, no dividers. */
  .kia .strip, .kia .kia__strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 24px 0 0; padding: 0; border: 0; border-radius: 0; }
  .kia .strip__item, .kia .strip__item:first-child, .kia .strip__item:last-child, .kia .strip__item:nth-child(odd), .kia .strip__item:nth-child(even) { flex-direction: row; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; background: var(--tint); border: 0; border-radius: var(--r-lg); text-align: left; }
  .kia .strip__item:nth-child(n+3) { border-top: 0; }
  .kia .strip__item + .strip__item::before, .kia .strip__item::before { display: none; }
  .kia .strip__icon { width: 38px; height: 38px; border-width: 1px; background: var(--white); border-color: var(--white); }
  .kia .strip__icon .ico { width: 19px; height: 19px; }
  .kia .strip__text { margin-right: 0; min-width: 0; }
  .kia .strip__text strong { font-size: .95rem; line-height: 1.25; }

  /* RANGE CARDS — the two buttons are the same width and height, edge to edge under the card */
  .models .model__links, .models--4 .model__links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 18px; }
  .models .model__links .btn { min-height: 48px; padding: 0 8px; gap: 8px; font-size: .92rem; }
  .model__price { margin-top: 10px; }

  /* FIND YOUR KIA — the words sit inside the card, not against its edge */
  .finder__text { padding: 18px 16px 20px; }
  .finder__text .h2 { margin-top: 8px; }
  .finder__line { margin-top: 10px; }
  .finder__price { margin-top: 16px; }
  .finder__actions { gap: 14px; margin-top: 18px; }

  /* SPOTLIGHT — a shorter photograph cropped to the car, and the words begin straight beneath it */
  .spot__media { aspect-ratio: 3 / 2; }
  .spot__media img { object-position: 58% 38%; }
  .spot__media::after { background: linear-gradient(0deg, #0e0f11 0%, rgba(14, 15, 17, 0) 16%); }
  .spot__panel { padding-top: 18px; }

  /* SHOWROOMS — the photograph runs the full width of the card, uncropped in shape, with the details beneath */
  .rooms__grid { gap: 36px; }
  .room__img { width: 100%; aspect-ratio: 16 / 10; }
  .room__row { margin-top: 16px; align-items: center; }
  .room h3 { font-size: 1.35rem; }
  .room__hours { font-size: .95rem; }
  .room address { margin-top: 6px; font-size: .95rem; }
  .room__actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 16px; }
  .room__actions .btn { min-height: 48px; }
}
@media (max-width: 859px) {
  /* Spotlight: the words rise over the dark road at the photograph's foot, so nothing empty sits between car and title */
  .spot__media::after { background: linear-gradient(0deg, #0e0f11 0%, rgba(14, 15, 17, .86) 14%, rgba(14, 15, 17, 0) 40%); }
  .spot__panel { position: relative; z-index: 1; margin-top: -52px; padding-top: 0; }
}
@media (max-width: 859px) {
  /* Hero on a phone: a shorter photograph, and the headline laid over its dark foot, so the message is in the
     first look on any phone height (and the button follows within the first screen) */
  .hero__media { height: min(46svh, 400px); min-height: 230px; }
  .hero__veil { background: linear-gradient(0deg, #0e0f11 0%, rgba(14, 15, 17, .9) 16%, rgba(14, 15, 17, .5) 34%, rgba(14, 15, 17, 0) 56%), linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 22%); }
  .hero__inner { margin-top: -76px; }
  .hero__lede { margin-top: 10px; }
  .hero__inner .hero__actions { margin-top: 18px; }
}
@media (max-width: 859px) {
  /* Hero on a phone, decluttered: the headline, one button, and one quiet line naming the car in the photograph
     beside the slide arrows. The paragraph and the second line about the car are left to larger screens. */
  .hero__lede { display: none; }
  .hero__inner .hero__actions { margin-top: 16px; }
  .hero__caption { margin: 0; padding: 20px var(--gutter) 0; }
  .hero__caption span { display: none; }
  .hero__caption b { font-size: .95rem; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, .78); }
  html:not(.font-archivo) .hero__caption b { font-weight: 400; }
  .hero__controls { padding: 8px var(--gutter) 22px; }
  .hero__controls .round { width: 38px; height: 38px; }
}

/* Why choose us: each row carries its own photograph, used only by the phone accordion */
.reason__img { display: none; }
@media (max-width: 859px) {
  /* The shared photograph above the list is not used on a phone: each row opens with its own picture and its line,
     so what is read and what is seen are in the same place. The list does not advance by itself. */
  .kia__media { display: none; }
  .kia__list { margin-top: 14px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .reason { row-gap: 0; }
  .reason__img { display: block; grid-column: 1 / -1; grid-row: 2; width: 100%; height: 0; opacity: 0; object-fit: cover; border-radius: var(--r-lg); transition: height .4s var(--ease), opacity .35s ease, margin .4s var(--ease); }
  .reason.is-active .reason__img { height: calc((100vw - 2 * var(--gutter)) * .56); margin-top: 12px; opacity: 1; }
  .reason span, .reason:hover span { grid-column: 1 / -1; grid-row: 3; }
  .reason.is-active span { min-height: 0; max-height: 9em; margin-top: 12px; padding-bottom: 6px; }
}
@media (max-width: 859px) {
  /* Range cards: every card is the same height and its two buttons sit on the card's foot, so the buttons line up
     from one card to the next whatever the length of the description */
  .models, .models--4 { align-items: stretch; }
  .models .model, .models--4 .model { display: flex; flex-direction: column; }
  .models .model__links, .models--4 .model__links { margin-top: auto; padding-top: 18px; }

  /* Find your Kia: room between the choices */
  .chips { gap: 10px; margin-top: 20px; }
  .chips .chip { min-height: 46px; padding: 0 18px; }
}
@media (max-width: 859px) {
  /* Range cards: a measured gap above the buttons on the card with the longest text */
  .models .model__links, .models--4 .model__links { padding-top: 16px; }
  .models .model__line { margin-bottom: 0; }
}
@media (max-width: 859px) {
  /* Range cards: the spare room sits inside the text rows (a tagline is given two lines, a description three),
     so name, price, description and buttons line up from card to card and the gap above the buttons stays small */
  .models .model__tag { min-height: 2.9em; line-height: 1.45; }
  .models .model__line { min-height: 4.5em; }
}
@media (max-width: 859px) {
  /* Why choose us: no rule under the heading, and room before the first row */
  .kia__list { margin-top: 22px; border-top: 0; }
  .kia__list li:first-child .reason { padding-top: 4px; }
}
@media (max-width: 859px) {
  /* Range cards: descriptions hold to three lines, so the gap above the buttons is the same small one on every card */
  .models .model__line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 4.5em; }
  .models .model__links, .models--4 .model__links { padding-top: 20px; }
}
@media (max-width: 859px) {
  /* Range cards: descriptions are shown whole (no cutting); cards share a height and the buttons sit on the foot */
  .models .model__line { display: block; -webkit-line-clamp: unset; overflow: visible; min-height: 0; }
  .models .model__tag { min-height: 0; }

  /* HERO ON A PHONE — one picture, one message. The photograph fills the hero; everything is read in one block on
     its dark foot, top to bottom: which car this is (small tag), the headline, the button, then a slim progress
     line with the slide number. The arrows sit on the photograph's edges, where a thumb expects them. */
  .hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: min(86svh, 680px); min-height: 500px; padding: 0 0 22px; overflow: hidden; }
  .hero__media { position: absolute; inset: 0; height: auto; min-height: 0; }
  .hero__veil { background: linear-gradient(0deg, rgba(10, 11, 13, .96) 0%, rgba(10, 11, 13, .82) 24%, rgba(10, 11, 13, .3) 46%, rgba(10, 11, 13, 0) 62%), linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 20%); }
  .hero__caption { order: 1; position: relative; z-index: 1; margin: 0; padding: 0 var(--gutter); }
  .hero__caption b { display: inline-block; padding: 6px 10px; background: rgba(255, 255, 255, .14); border-radius: var(--r); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
  html:not(.font-archivo) .hero__caption b { font-weight: 700; }
  .hero__inner { order: 2; margin-top: 12px; }
  .hero__title { font-size: clamp(1.75rem, 8vw, 2.3rem); line-height: 1.1; }
  .hero__inner .hero__actions { margin-top: 18px; }
  .hero__controls { order: 3; position: static; z-index: 1; padding: 18px var(--gutter) 0; gap: 12px; }
  .hero__bar { order: 1; flex: 1; height: 2px; }
  .hero__count { order: 2; font-size: .8rem; }
  .hero__controls .round { position: absolute; top: 38%; width: 40px; height: 40px; background: rgba(10, 11, 13, .38); border-color: rgba(255, 255, 255, .5); border-radius: 50%; color: #fff; }
  .hero__controls #hero-prev { left: 12px; }
  .hero__controls #hero-next { right: 12px; }
}
@media (max-width: 859px) {
  /* HERO ON A PHONE, FINAL — the car is the hero. The photograph shows the whole car; beneath it, on its dark foot,
     one block read top to bottom: who we are (a small line), THE CAR'S NAME as the headline, its one-line promise,
     the button, and a slim progress line. Each slide changes the name and the promise with the photograph. */
  .hero { display: flex; flex-direction: column; justify-content: flex-start; height: auto; min-height: 0; padding: 0 0 22px; }
  .hero__media { position: relative; inset: auto; height: min(50svh, 430px); min-height: 250px; }
  .hero__veil { background: linear-gradient(0deg, #0e0f11 0%, rgba(14, 15, 17, .7) 14%, rgba(14, 15, 17, 0) 38%), linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 22%); }
  .hero__inner { display: contents; }
  .hero__title { order: 1; position: relative; z-index: 1; margin: -18px 0 0; padding: 0 var(--gutter); font-size: .74rem; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
  html:not(.font-archivo) .hero__title { font-weight: 700; letter-spacing: .12em; }
  .hero__caption { order: 2; display: grid; gap: 8px; margin: 10px 0 0; padding: 0 var(--gutter); }
  .hero__caption b, html:not(.font-archivo) .hero__caption b { display: block; padding: 0; background: none; border-radius: 0; font-size: clamp(1.9rem, 8.6vw, 2.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; text-transform: none; color: #fff; }
  .hero__caption span { display: block; font-size: 1.02rem; line-height: 1.45; color: rgba(255, 255, 255, .82); }
  .hero__inner .hero__actions, .hero__actions { order: 3; margin: 20px 0 0; padding: 0 var(--gutter); }
  .hero__controls { order: 4; padding: 20px var(--gutter) 0; }
  .hero__controls .round { top: calc(min(50svh, 430px) / 2 - 20px); }
}
@media (max-width: 859px) {
  /* Why choose us: clear room between the heading and the first row */
  .kia__list { margin-top: 30px; }
  /* Hero: the slide title keeps to one or two balanced lines */
  .hero__caption b { text-wrap: balance; }
}
@media (max-width: 859px) {
  /* Range cards, compact: a shorter photograph so the whole card (buttons included) fits one screen; the spare
     room is taken up inside the text rows, and only a small gap is left above the buttons */
  .models .model__img, #panel-suv .model__img { aspect-ratio: 3 / 2; }
  .models .model__name { margin-top: 14px; }
  .models .model__tag { min-height: 2.9em; margin-top: 4px; }
  .models .model__price { margin-top: 6px; }
  .models .model__line { margin-top: 8px; }
  .models .model__links, .models--4 .model__links { padding-top: 12px; }
}
@media (max-width: 859px) {
  /* HERO ON A PHONE — WORDS FIRST. The message opens the page, directly under the header, so it is read in the
     first look on any screen height: the dealer line, the car's name, its promise. The photograph of that car
     follows, whole, and the button and slide controls sit on its dark foot. */
  .hero { padding: calc(var(--nav-h) + 22px) 0 22px; }
  .hero__title { order: 1; margin: 0; }
  .hero__caption { order: 2; margin-top: 10px; }
  .hero__media { order: 3; margin-top: 18px; height: min(44svh, 380px); min-height: 220px; }
  .hero__veil { background: linear-gradient(180deg, #0e0f11 0%, rgba(14, 15, 17, 0) 22%), linear-gradient(0deg, #0e0f11 0%, rgba(14, 15, 17, .6) 16%, rgba(14, 15, 17, 0) 40%); }
  .hero__inner .hero__actions, .hero__actions { order: 4; position: relative; z-index: 1; margin-top: -30px; }
  .hero__controls { order: 5; padding-top: 16px; gap: 10px; }
  .hero__controls .round { position: static; width: 38px; height: 38px; background: transparent; border-radius: var(--r); }
  .hero__bar { order: 0; }
  .hero__count { order: 0; }
}
@media (max-width: 859px) {
  /* HERO ON A PHONE — ONE PICTURE, WORDS ON IT. No separate black block: the photograph runs up behind the words
     and fades into the dark at its top, so the headline reads as part of the picture and is in the first look;
     the car sits whole in the lower half; the button and controls are on its dark foot. */
  .hero { padding-top: calc(var(--nav-h) + 18px); background: #0b0c0e; }
  .hero__title, .hero__caption { position: relative; z-index: 2; }
  .hero__media { margin-top: -150px; height: min(62svh, 500px); min-height: 330px; border: 0; z-index: 0; }
  .hero__slide, .hero__slide img { object-position: var(--pos-m, 60% 100%); }
  .hero__veil { background: linear-gradient(180deg, #0b0c0e 0%, rgba(11, 12, 14, .94) 16%, rgba(11, 12, 14, .55) 34%, rgba(11, 12, 14, 0) 54%), linear-gradient(0deg, #0b0c0e 0%, rgba(11, 12, 14, .7) 14%, rgba(11, 12, 14, 0) 36%); }
  .hero__inner .hero__actions, .hero__actions { z-index: 2; margin-top: -34px; }
}
@media (max-width: 859px) {
  /* Hero photograph on a phone: wide enough that every car is whole, placed per slide */
  .hero__media { margin-top: -96px; height: min(47svh, 372px); min-height: 300px; }
  .hero .pan img { object-position: 62% 60%; }
  .hero__slide:nth-child(2) img { object-position: 30% 60%; }
  .hero__media > img.hero__slide:nth-child(3) { object-position: 60% 60%; }
  .hero__media > img.hero__slide:nth-child(4) { object-position: 26% 62%; }
  .hero__veil { background: linear-gradient(180deg, #0b0c0e 0%, rgba(11, 12, 14, .9) 14%, rgba(11, 12, 14, .4) 30%, rgba(11, 12, 14, 0) 46%), linear-gradient(0deg, #0b0c0e 0%, rgba(11, 12, 14, .7) 12%, rgba(11, 12, 14, 0) 32%); }
}
@media (max-width: 859px) { .hero__slide:nth-child(1) img { object-position: 74% 60%; } }
@media (max-width: 859px) { .hero__slide:nth-child(1) img { object-position: 46% 60%; } }
@media (max-width: 859px) {
  /* HERO ON A PHONE — the photograph opens the page from the very top (no band, no line above it); the words sit
     lower, over the photograph's dark foot, close enough to the top to be read in the first look; then the button. */
  .hero { padding-top: 0; }
  .hero__media { order: 1; margin-top: 0; height: min(41svh, 340px); min-height: 270px; }
  .hero__veil { background: linear-gradient(0deg, #0b0c0e 0%, rgba(11, 12, 14, .88) 16%, rgba(11, 12, 14, .35) 36%, rgba(11, 12, 14, 0) 54%), linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 24%); }
  .hero__title { order: 2; margin-top: -58px; }
  .hero__caption { order: 3; }
  .hero__inner .hero__actions, .hero__actions { order: 4; margin-top: 20px; }
  .hero__controls { order: 5; }
  .hero .pan img, .hero__slide:nth-child(1) img { object-position: 46% 78%; }
  .hero__slide:nth-child(2) img { object-position: 30% 70%; }
  .hero__media > img.hero__slide:nth-child(3) { object-position: 60% 72%; }
  .hero__media > img.hero__slide:nth-child(4) { object-position: 26% 74%; }
}

@media (max-width: 859px) {
  /* CONTACT ON A PHONE — two round floating buttons in the lower right corner (WhatsApp above, Call below),
     in place of the fixed strip across the foot of the screen */
  body { padding-bottom: 0; }
  .dock, .dock.dock--car { display: flex; flex-direction: column; gap: 12px; position: fixed; inset: auto 14px calc(16px + env(safe-area-inset-bottom)) auto; z-index: 60; padding: 0; background: none; border: 0; }
  .dock a, .dock--car .dock__call { width: 52px; min-height: 0; height: 52px; padding: 0; border: 0; border-radius: 50%; font-size: 0; gap: 0; box-shadow: 0 4px 14px rgba(20, 23, 26, .22); }
  .dock__wa { background: #25d366; color: #fff; }
  .dock__wa svg { width: 26px; height: 26px; }
  .dock__call { background: var(--white); color: var(--ink); }
  .dock__call .ico { width: 22px; height: 22px; }
  .dock--car .dock__go { display: none; }
  .is-typing .dock { transform: translateX(90px); }

  /* HERO — a calmer headline, and a compact outlined button with room around it */
  .hero__caption b, html:not(.font-archivo) .hero__caption b { font-size: clamp(1.55rem, 7vw, 1.95rem); line-height: 1.12; }
  .hero__caption span { font-size: .98rem; }
  .hero__inner .hero__actions, .hero__actions { margin-top: 24px; }
  .hero__actions .btn { flex: 0 0 auto; min-height: 48px; padding: 0 26px; background: transparent; border-color: rgba(255, 255, 255, .75); color: #fff; }
  .hero__controls { padding-top: 26px; }
  .hero { padding-bottom: 28px; }

  /* RANGE — two cars to a row, nothing to slide. Each card is compact: photograph, name, price, and two stacked
     buttons with proper padding. The tagline and description are left to the car's own page. */
  .range { padding-left: var(--gutter); padding-right: var(--gutter); }
  .range > .label, .range > .h2, .range__bar, .range__note, .range > .range__lede { padding-left: 0; padding-right: 0; }
  .models, .models--4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 12px; overflow: visible; padding: 0; }
  .models .model, .models--4 .model { flex: none; }
  .models .model__img, #panel-suv .model__img { aspect-ratio: 4 / 3; }
  .models .model__name { margin-top: 12px; font-size: 1.08rem; }
  .models .model__tag, .models .model__line { display: none; }
  .models .model__price { margin-top: 4px; font-size: .9rem; }
  .models .model__price small { display: block; font-size: .78rem; }
  .models .model__price b { font-size: 1rem; }
  .models .model__links, .models--4 .model__links { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 14px; }
  .models .model__links .btn { min-height: 44px; padding: 0 12px; font-size: .88rem; white-space: nowrap; }
}
@media (max-width: 859px) {
  /* Range, two to a row: the first button reads "Explore" (the name is right above it), names hold two lines */
  .models .model__name { min-height: 2.5em; line-height: 1.25; }
  .models .model__links .btn:first-child { font-size: 0; gap: 0; }
  .models .model__links .btn:first-child::before { content: "Explore"; margin-right: 8px; font-size: .88rem; }
}
@media (max-width: 859px) {
  /* HERO — the photograph is the main event: taller, the car larger in it; the words keep to its dark foot */
  .hero__media { height: min(58svh, 480px); min-height: 330px; margin-bottom: -1px; }
  .hero__veil { background: linear-gradient(0deg, #0b0c0e 0%, #0b0c0e 2%, rgba(11, 12, 14, .82) 13%, rgba(11, 12, 14, .25) 30%, rgba(11, 12, 14, 0) 44%), linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 22%); }
  .hero__title { margin-top: -70px; }
  .hero .pan img, .hero__slide:nth-child(1) img { object-position: 50% 80%; }
  .hero__slide:nth-child(2) img { object-position: 34% 74%; }
  .hero__media > img.hero__slide:nth-child(3) { object-position: 62% 76%; }
  .hero__media > img.hero__slide:nth-child(4) { object-position: 30% 78%; }

  /* RANGE, two to a row — each card's rows (photograph, name, tagline, price, buttons) share lines with its
     neighbour, so nothing needs a reserved gap. The tagline is back; the long description stays on the car's page. */
  .models, .models--4 { grid-auto-rows: auto; row-gap: 0; }
  .models .model, .models--4 .model { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; margin-bottom: 30px; }
  .models .model__name { min-height: 0; margin-top: 12px; }
  .models .model__tag { display: block; min-height: 0; margin-top: 4px; font-size: .86rem; line-height: 1.4; color: var(--graphite); }
  .models .model__price { margin-top: 10px; }
  .models .model__links, .models--4 .model__links { margin-top: 0; padding-top: 14px; align-self: end; }
}
@media (max-width: 859px) {
  .hero__media { height: min(52svh, 420px); min-height: 310px; }
  .hero .pan img, .hero__slide:nth-child(1) img { object-position: 44% 80%; }
  .hero__media > img.hero__slide:nth-child(4) { object-position: 22% 78%; }
}
@media (max-width: 859px) { .hero__media > img.hero__slide:nth-child(4) { object-position: 44% 78%; } }

/* ==========================================================================
   HERO COPY — the legacy figure as the lead visual element, then the headline, one line and two actions
   ========================================================================== */
.hero__legacy { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(18px, 2.4vh, 26px); color: #fff; }
.hero__legacy b { font-size: clamp(3rem, 6vw, 5.2rem); font-weight: 700; line-height: .9; letter-spacing: -.04em; }
.hero__legacy span { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .5); font-size: clamp(.82rem, .95vw, .95rem); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__actions .btn--glass { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .7); color: #fff; }
.hero__actions .btn--glass:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
@media (min-width: 860px) {
  .hero__title { white-space: normal; max-width: 15ch; }
}

/* ==========================================================================
   FINANCE AND INSURANCE — plain information on the left, the EMI tool on the right
   ========================================================================== */
.fin { padding: var(--section) var(--pad) 0; }
.fin__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 104px); align-items: start; }
.fin__topics { display: grid; gap: clamp(26px, 3vw, 38px); margin-top: clamp(26px, 3vw, 40px); }
.fin__topic h3 { font-size: clamp(1.15rem, 1.4vw, 1.3rem); font-weight: 600; letter-spacing: -.01em; }
.fin__topic ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.fin__topic li { position: relative; padding-left: 20px; font-size: 1rem; line-height: 1.55; color: var(--graphite); max-width: 54ch; }
.fin__topic li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: #b3b7bc; }
.fin__topic .more { margin-top: 14px; }
.fin__note { margin-top: clamp(22px, 2.4vw, 30px); }
/* The tool */
.emit { padding: clamp(22px, 2.6vw, 36px); background: var(--tint); border-radius: var(--r-lg); }
.emit__cap { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.emit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 16px; }
.emit__f label { display: block; margin-bottom: 6px; font-size: .8rem; font-weight: 600; color: var(--graphite); }
.emit .field { min-height: 48px; background: var(--white); border-color: var(--white); }
.emit .field select, .emit .field input { height: 46px; font-size: .98rem; font-weight: 600; color: var(--ink); text-overflow: ellipsis; }
.emit .field.is-invalid { border-color: var(--error, #c0392b); }
.emit__price { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #dfe2e5; font-size: .95rem; color: var(--graphite); }
.emit__price b { font-size: 1.3rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.emit .slider { margin-top: 18px; }
.emit .slider input::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--tint); }
.emit__rate { margin-top: 18px; max-width: 220px; }
.emit__err { margin-top: 6px; font-size: .85rem; color: var(--error, #c0392b); }
.emit__err[hidden] { display: none; }
.emit__out { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #dfe2e5; }
.emit__out dt { font-size: .8rem; color: var(--graphite); }
.emit__out dd { margin: 4px 0 0; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.emit__out .emit__emi { grid-column: 1 / -1; }
.emit__out .emit__emi dd { font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; }
.emit__acts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; }
.emit__acts .btn { min-height: 50px; }
.emit > .note { margin-top: 14px; }
@media (max-width: 1099px) { .fin__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 859px) {
  .emit { margin: 0 calc(-1 * var(--gutter)); padding: 24px var(--gutter); border-radius: 0; }
  .emit__grid { grid-template-columns: 1fr; }
  .emit__acts .btn { flex: 1 1 100%; }
  .hero__legacy { gap: 12px; margin-bottom: 14px; }
  .hero__legacy b { font-size: 2.6rem; }
  .hero__legacy span { padding-left: 12px; font-size: .72rem; }
}
html:not(.font-archivo) .fin__topic h3, html:not(.font-archivo) .emit__out dd { font-weight: 700; }
@media (max-width: 859px) {
  /* Hero on a phone, with the legacy copy: photograph, the 40+ figure, the headline, two actions, the controls */
  .hero__legacy { order: 2; position: relative; z-index: 2; margin: -64px 0 0; padding: 0 var(--gutter); }
  .hero__title, html:not(.font-archivo) .hero__title { order: 3; margin: 12px 0 0; padding: 0 var(--gutter); font-size: clamp(1.6rem, 7.2vw, 2rem); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; text-transform: none; color: #fff; }
  .hero__caption { display: none; }
  .hero__inner .hero__actions, .hero__actions { order: 4; display: flex; gap: 10px; margin-top: 20px; }
  .hero__actions .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 12px; font-size: .9rem; }
  .hero__actions .btn:first-child { background: #fff; border-color: #fff; color: var(--ink); }
}

/* ==========================================================================
   HEADER, CENTRED — the Kia logo with the dealership's name in the middle; Showroom and Cars on the left;
   About, Contact and Download brochure on the right. The logo takes the header's colour (white over the hero).
   ========================================================================== */
.nav--c .nav__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; }
.nav--c .nav__links--l { justify-self: start; }
.nav--c .brand--kia { flex: none; justify-self: center; display: inline-flex; align-items: center; gap: 14px; }
.brand__kia { width: 64px; height: 32px; flex: none; }
.brand__dealer { padding-left: 14px; border-left: 1px solid currentColor; font-size: .86rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1; }
.nav--c .nav__right { justify-self: end; flex: none; gap: clamp(18px, 2.2vw, 32px); }
.nav--c .nav__right .nav__links { gap: clamp(22px, 2.6vw, 40px); }
.nav--c .nav__right .btn .ico { width: 16px; height: 16px; }
@media (max-width: 1099px) {
  .nav--c .nav__right .nav__links { display: none; }
}
@media (max-width: 859px) {
  .nav--c .nav__inner { display: flex; }
  .nav--c .brand--kia { margin-right: auto; }
  .brand__kia { width: 52px; height: 26px; }
  .brand__dealer { padding-left: 11px; font-size: .74rem; }
}

/* The brochure chooser */
.brochure { width: min(480px, calc(100vw - 32px)); }
.brochure__list { list-style: none; margin: 20px 0 16px; padding: 0; border-top: 1px solid var(--rule); }
.brochure__list a { display: flex; align-items: center; gap: 12px; min-height: 54px; border-bottom: 1px solid var(--rule); }
.brochure__list b { margin-right: auto; font-weight: 600; }
.brochure__list span { font-size: .8rem; color: var(--graphite); }
.brochure__list .ico { width: 18px; height: 18px; }
.brochure__list a:hover b { color: var(--navy-2); }

/* Homepage EMI tool: sliders and the reset link (the car page has its own copies in pages.css) */
.emit .slider__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.emit .slider label { font-size: .95rem; color: var(--graphite); }
.emit .slider output { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.emit .slider input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 4px 0 0; padding: 0; background: none; cursor: pointer; accent-color: var(--ink); }
.emit .slider input::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--ink) var(--fill, 0%), #c9ccd1 var(--fill, 0%)); }
.emit .slider input::-moz-range-track { height: 3px; border-radius: 2px; background: #c9ccd1; }
.emit .slider input::-moz-range-progress { height: 3px; background: var(--ink); }
.emit .slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border: 0; border-radius: 50%; background: var(--ink); }
.emit .slider input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--ink); }
.emit .stage__link { min-height: 32px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: .92rem; color: var(--graphite); text-decoration: underline; text-underline-offset: 5px; }
.emit .stage__link:hover { color: var(--ink); }
/* Model cut-outs (Sorento, Syros EV) sit on a tint stage like a photograph */
.model__img img[style*="contain"] { object-fit: contain; padding: 6% 4%; }
/* Hero: the mobile primary button never cuts its label */
@media (max-width: 859px) { .hero__actions .btn .ico { display: none; } }
@media (min-width: 860px) { .hero__title { max-width: 18ch; } }

/* HERO — the 40+ legacy as a seal of its own: a framed glass plate with an outlined numeral, set apart from the headline */
.hero__legacy { display: inline-flex; align-items: center; gap: 18px; margin-bottom: clamp(22px, 3vh, 32px); padding: 14px 22px 14px 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--r-lg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero__legacy b { font-size: clamp(3.2rem, 5.4vw, 4.8rem); font-weight: 800; line-height: .85; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.6px #fff; }
.hero__legacy span { display: grid; gap: 6px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .4); text-transform: none; letter-spacing: 0; }
.hero__legacy strong { font-size: clamp(.95rem, 1.1vw, 1.1rem); font-weight: 600; line-height: 1.25; letter-spacing: .02em; color: #fff; max-width: 14ch; }
.hero__legacy small { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
@media (min-width: 860px) { .hero__title { max-width: 14ch; } }
@media (max-width: 859px) {
  .hero__legacy { align-self: flex-start; margin: -80px var(--gutter) 0; padding: 10px 14px 10px 12px; gap: 12px; }
  .hero__legacy b { font-size: 2.6rem; -webkit-text-stroke-width: 1.3px; }
  .hero__legacy span { padding-left: 12px; gap: 3px; }
  .hero__legacy strong { font-size: .86rem; }
  .hero__legacy small { font-size: .64rem; }
  .hero__title, html:not(.font-archivo) .hero__title { margin-top: 16px; }
}
html.font-archivo .hero__legacy b { font-weight: 800; }
.hero__legacy strong { max-width: 15ch; }
@media (min-width: 860px) { .hero__legacy strong { max-width: none; white-space: nowrap; } }
.hero__title { text-wrap: balance; }

/* HERO — the legacy told in type, in the page's own language: a small label, the figure as the loudest line,
   then the rest of the sentence at headline size. No box, no frame. */
.hero__eyebrow { color: rgba(255, 255, 255, .78); margin: 0 0 clamp(12px, 1.8vh, 18px); }
.hero__title { max-width: 16ch; }
.hero__years { display: block; font-size: clamp(3.4rem, 6.6vw, 6.4rem); font-weight: 700; line-height: .95; letter-spacing: -.035em; color: #fff; }
.hero__of { display: block; margin-top: clamp(8px, 1.2vh, 14px); font-size: clamp(1.6rem, 2.5vw, 2.4rem); line-height: 1.15; letter-spacing: -.015em; color: rgba(255, 255, 255, .92); }
@media (min-width: 860px) { .hero__title { white-space: normal; max-width: 17ch; } }
@media (max-width: 859px) {
  .hero__eyebrow { order: 2; position: relative; z-index: 2; margin: -70px 0 0; padding: 0 var(--gutter); font-size: .72rem; }
  .hero__title, html:not(.font-archivo) .hero__title { margin-top: 10px; }
  .hero__years { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .hero__of { margin-top: 6px; font-size: clamp(1.15rem, 5vw, 1.4rem); }
}

/* RANGE — every car in one grid, three to a row; the tabs filter it */
.range__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.range__grid .model[hidden] { display: none; }
.range__tabs .tab { padding: 0 clamp(16px, 1.6vw, 24px); }
@media (max-width: 1199px) and (min-width: 860px) { .range__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 859px) {
  .range__tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .range__tabs::-webkit-scrollbar { display: none; }
  .range__tabs .tab { flex: 0 0 auto; padding: 0 16px; }
}
@media (max-width: 859px) { .range__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 860px) {
  /* Range cards, tighter: tagline close under the name, description close under it, a measured gap to the buttons */
  .range__grid .model__tag { margin-top: 6px; }
  .range__grid .model__line { margin-top: 6px; }
  .range__grid .model__links { margin-top: 18px; }
  .range__grid .model { grid-template-rows: auto auto auto auto auto; row-gap: 0; }
  .range__grid { row-gap: clamp(36px, 3.4vw, 52px); }
}

/* ==========================================================================
   HERO, LEGACY — from the user's references: a ruled eyebrow; "40+" heavy and "years" light on one line; a short
   promise; two buttons and a quiet brochure link; three proof points along the foot. Supersedes the earlier forms.
   ========================================================================== */
.hero__legacy { display: none; }
.hero__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 clamp(14px, 2vh, 22px); font-size: clamp(.72rem, .8vw, .8rem); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.hero__eyebrow::before { content: ""; width: 34px; height: 1px; background: rgba(255, 255, 255, .7); }
.hero__eyebrow span + span { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .45); }
.hero__title { max-width: none; }
.hero__years { display: block; font-size: clamp(3.6rem, 7.4vw, 7.2rem); font-weight: 300; line-height: .92; letter-spacing: -.035em; color: #fff; white-space: nowrap; }
.hero__years b { font-weight: 800; letter-spacing: -.045em; }
.hero__of { display: block; margin-top: clamp(10px, 1.4vh, 16px); font-size: clamp(1.6rem, 2.6vw, 2.5rem); font-weight: 400; line-height: 1.15; letter-spacing: -.015em; color: #fff; }
html:not(.font-archivo) .hero__of { font-weight: 400; }
.hero__lede { max-width: 44ch; }
.hero__actions { align-items: center; }
.hero__brochure { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-left: 6px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: .95rem; font-weight: 600; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 6px; }
.hero__brochure .ico { width: 16px; height: 16px; }
.hero__brochure:hover { text-decoration-color: #fff; }
.hero__proof { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 0; margin: clamp(26px, 4vh, 44px) 0 0; padding: 0; }
.hero__proof li { display: flex; align-items: center; gap: 12px; padding: 0 clamp(18px, 2vw, 30px); border-left: 1px solid rgba(255, 255, 255, .3); font-size: .9rem; line-height: 1.35; color: rgba(255, 255, 255, .88); }
.hero__proof li:first-child { padding-left: 0; border-left: 0; }
.hero__proof .ico { width: 24px; height: 24px; flex: none; stroke-width: 1.4; color: #fff; }
@media (max-width: 859px) {
  .hero__eyebrow { order: 2; position: relative; z-index: 2; margin: -76px 0 0; padding: 0 var(--gutter); gap: 6px 10px; font-size: .62rem; letter-spacing: .18em; }
  .hero__eyebrow::before { width: 20px; }
  .hero__eyebrow span + span { padding-left: 10px; }
  .hero__years { font-size: clamp(3rem, 15vw, 4rem); }
  .hero__of { margin-top: 6px; font-size: clamp(1.25rem, 5.6vw, 1.55rem); }
  .hero__actions .btn { flex: 1 1 0; }
  .hero__brochure { display: none; }
  .hero__proof { order: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 22px var(--gutter) 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); }
  .hero__proof li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 10px; font-size: .74rem; }
  .hero__proof li br { display: none; }
  .hero__proof .ico { width: 20px; height: 20px; }
  .hero__controls { order: 6; }
}
@media (max-width: 859px) {
  .hero__eyebrow { flex-wrap: nowrap; gap: 8px; font-size: .6rem; letter-spacing: .14em; white-space: nowrap; }
  .hero__eyebrow::before { display: none; }
  .hero__eyebrow span + span { padding-left: 8px; }
}
@media (max-width: 400px) { .hero__actions .btn { padding: 0 8px; font-size: .82rem; } }

/* HERO, CLEAN (from the user's mockup): eyebrow, 40+ years, the promise, a line about the car on screen, two buttons.
   No caption on the right, no proof row; the slide count, progress line and arrows stay. */
.hero__caption, .hero__proof { display: none !important; }
.hero__lede { transition: opacity .35s ease; }
.hero__lede.is-swapping { opacity: 0; }
.hero__actions .btn--glass .ico { width: 18px; height: 18px; }
/* Header: the brochure button is an outline, its icon first */
.nav__brochure { background: transparent !important; border-color: currentColor !important; color: inherit !important; gap: 10px; }
.nav__brochure:hover { background: rgba(255, 255, 255, .12) !important; }
.nav.is-scrolled .nav__brochure:hover, .nav.is-open .nav__brochure:hover { background: var(--tint) !important; }
.nav--c .nav__links--l, .nav--c .nav__right .nav__links { gap: clamp(20px, 2.2vw, 36px); }
@media (max-width: 1279px) { .nav--c .nav__links--l a[data-intent], .nav--c .nav__right .nav__links a[data-intent="careers"] { display: none; } }
@media (max-width: 859px) {
  .hero__lede { display: block; order: 4; position: relative; z-index: 2; margin-top: 12px; padding: 0 var(--gutter); font-size: .95rem; }
  .hero__inner .hero__actions, .hero__actions { order: 5; }
}

/* Hero: the car on screen is named in bold on its own line above its one-line promise; no ruled dash before the eyebrow */
.hero__eyebrow::before { display: none; }
.hero__lede { max-width: 46ch; }
.hero__car { display: block; margin: clamp(18px, 2.6vh, 28px) 0 6px; font-size: clamp(1.35rem, 1.9vw, 1.85rem); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #fff; }
@media (max-width: 859px) {
  .hero__car { margin: 10px 0 4px; font-size: 1.3rem; }
}

/* Why choose, desktop: more room for the words (user: titles crowded the lines beside them). The list takes the wider
   column, each title gets its own clear column with a wide gap, rows breathe; on narrower desktops the line sits
   under its title instead of beside it. */
@media (min-width: 1200px) {
  .kia__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(48px, 4.6vw, 88px); }
  .reason { grid-template-columns: 56px minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 2.4vw, 44px); padding: clamp(20px, 1.9vw, 28px) 0; }
  .reason b { line-height: 1.2; }
}
@media (min-width: 1200px) and (max-width: 1499px) {
  .reason { grid-template-columns: 56px minmax(0, 1fr); row-gap: 8px; }
  .reason span { grid-column: 2; max-width: 52ch; }
}

/* Hero, desktop: the car on screen (name + its line) sits at the right end, just above the slide controls, so the
   left column is the dealer story alone: eyebrow, 40+ years, the promise, two buttons. */
@media (min-width: 1200px) {
  .hero__lede { position: absolute; z-index: 2; right: var(--pad); bottom: calc(clamp(72px, 10vh, 104px) + 44px + clamp(22px, 3vh, 34px)); width: min(420px, 30vw); max-width: none; margin: 0; text-align: right; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
  .hero__car { margin: 0 0 8px; font-size: clamp(1.6rem, 2.1vw, 2.2rem); }
  .hero__inner .hero__actions { margin-top: clamp(30px, 4.4vh, 46px); }
}

/* Quick actions: no circles. A bare line icon level with the heading, and a bare arrow at the end of that line. */
.kia .strip__item { align-items: flex-start; gap: 14px; }
.kia .strip__icon { width: auto; height: auto; border: 0; border-radius: 0; background: none; }
.kia .strip__icon .ico { width: 24px; height: 24px; margin-top: -1px; }
.kia .strip__item .round { width: auto; height: auto; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); transition: transform .25s var(--ease); }
.kia .strip__item .round .ico { width: 18px; height: 18px; }
.kia .strip__item:hover .round { background: none; color: var(--ink); transform: translateX(4px); }
@media (max-width: 859px) {
  .kia .strip__icon { background: none; border: 0; width: auto; height: auto; }
  .kia .strip__icon .ico { width: 22px; height: 22px; margin-top: 0; }
  .kia .strip__item, .kia .strip__item:first-child, .kia .strip__item:last-child, .kia .strip__item:nth-child(odd), .kia .strip__item:nth-child(even) { align-items: center; }
}
@media (min-width: 1200px) { .hero__lede { width: min(400px, 28vw); } }

/* Range cards: the tagline and the description read as one block (user: the gap between them looked too big) */
@media (min-width: 860px) {
  .range__grid .model__tag { line-height: 1.35; }
  .range__grid .model__line { margin-top: 2px; }
}

/* Hero: the dealer's own line stays under the promise (the car's name and line sit separately, at the right) */
.hero__intro { max-width: 46ch; margin: clamp(16px, 2.2vh, 22px) 0 0; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; color: rgba(255, 255, 255, .82); }
@media (max-width: 859px) { .hero__intro { display: none; } }
@media (min-width: 860px) and (max-width: 1199px) { .hero__inner { width: min(600px, 62vw); max-width: none; } .hero__intro { margin-top: 12px; } }

/* Why choose: the photos are real customer deliveries at 680px wide, so the frame is drawn close to that size
   (16:10, at most 680px wide) instead of stretching them to the list's height, which made them soft. */
@media (min-width: 1200px) {
  .kia__media { align-self: center; justify-self: end; width: 100%; max-width: 680px; min-height: 0; aspect-ratio: 16 / 10; }
}
@media (min-width: 860px) and (max-width: 1199px) { .kia__media { max-width: 680px; } }

/* Range card buttons: sized by their label with real side padding (user: Explore Carens Clavis touched the edges) */
@media (min-width: 860px) {
  .range__grid .model__links { display: flex; flex-wrap: wrap; gap: 12px; }
  .range__grid .model__links .btn { flex: 0 0 auto; min-width: 168px; min-height: 50px; padding: 0 28px; gap: 10px; }
}

/* Finance follows the offer, whose own bottom padding already gives one section gap (user: the gap here was doubled) */
.offers + .fin { padding-top: 0; }

/* ==========================================================================
   FINANCE, LIGHTER (user: the EMI calculator was too big, too many options). Two topics side by side on the left;
   on the right a compact tool: model + version, two sliders, a small rate box, one EMI and three totals.
   ========================================================================== */
@media (min-width: 1100px) {
  .fin__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); align-items: center; }
}
@media (min-width: 1400px) {
  .fin__topics { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 3vw, 56px); }
}
.fin__topic li { max-width: 46ch; }
.emit--lite { padding: clamp(22px, 2.2vw, 32px); }
.emit--lite .emit__grid { margin-top: 14px; gap: 12px; }
.emit--lite .slider { margin-top: 16px; }
.emit--lite .slider input { height: 26px; }
.emit__rate { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: none; margin-top: 10px; }
.emit__rate label { margin: 0; font-size: .95rem; font-weight: 400; color: var(--graphite); }
.emit__rate .field { display: flex; align-items: center; width: 104px; min-height: 42px; padding-right: 12px; }
.emit__rate .field input { width: 100%; height: 40px; padding: 0 4px 0 12px; text-align: right; }
.emit__rate .field span { font-weight: 600; color: var(--graphite); }
.emit--lite .emit__err { text-align: right; }
.emit--lite .emit__out { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin-top: 18px; padding-top: 16px; }
.emit--lite .emit__emi { grid-column: 1 / -1; }
.emit--lite .emit__emi dd { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.emit--lite .emit__emi b { font-size: clamp(1.9rem, 2.6vw, 2.3rem); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.emit--lite .emit__emi small { font-size: .95rem; color: var(--graphite); }
.emit--lite.is-invalid .emit__emi small { display: none; }
.emit--lite .emit__out dd { font-size: .98rem; }
.emit--lite .emit__acts { margin-top: 18px; }
.emit--lite > .note { margin-top: 12px; }
@media (max-width: 859px) {
  .emit--lite .emit__grid { grid-template-columns: 1fr 1fr; }
  .emit--lite .emit__out dd { font-size: .92rem; }
}

/* Finance: its own bottom gap before the spotlight photo; on phones the two selects stack and Reset sits beside the button */
.fin { padding-bottom: var(--section); }
@media (max-width: 859px) {
  .emit--lite .emit__grid { grid-template-columns: minmax(0, 1fr); }
  .emit--lite .emit__acts { flex-wrap: nowrap; }
  .emit--lite .emit__acts .btn { flex: 1 1 auto; }
}

/* Finance topics, final: one column. Each topic = a near-square tint tile with its icon, then heading, checked
   points and the link; a hairline between the two. Supersedes the side-by-side columns. */
@media (min-width: 1400px) { .fin__topics { grid-template-columns: minmax(0, 1fr); } }
.fin__topics { gap: 0; max-width: 640px; }
.fin__topic { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; align-items: start; padding: clamp(22px, 2.4vw, 30px) 0; }
.fin__topic + .fin__topic { border-top: 1px solid var(--rule); }
.fin__topics .fin__topic:first-child { padding-top: 0; }
.fin__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r); background: var(--tint); color: var(--ink); }
.fin__ico .ico { width: 22px; height: 22px; }
.fin__body h3 { margin-top: 10px; }
.fin__topic ul { margin-top: 14px; gap: 10px; }
.fin__topic li { display: flex; gap: 12px; padding-left: 0; max-width: 56ch; }
.fin__topic li::before { display: none; }
.fin__topic li .ico { flex: none; width: 16px; height: 16px; margin-top: .28em; color: var(--ink); stroke-width: 2; }
.fin__topic .more { margin-top: 16px; }
@media (max-width: 859px) {
  .fin__topic { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  .fin__ico { width: 40px; height: 40px; }
  .fin__ico .ico { width: 19px; height: 19px; }
  .fin__body h3 { margin-top: 7px; }
}

/* Header brochure button: the label at the size of the nav links, more room inside, a clear filled hover */
.nav .nav__brochure { min-height: 50px; padding: 0 24px 0 20px; gap: 10px; font-size: 1.02rem; font-weight: 500; letter-spacing: 0; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.nav .nav__brochure .ico { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.nav .nav__brochure:hover .ico { transform: translateY(2px); }
.nav:not(.is-scrolled):not(.is-open) .nav__brochure:hover { background: #fff !important; border-color: #fff !important; color: var(--ink) !important; }
.nav.is-scrolled .nav__brochure:hover, .nav.is-open .nav__brochure:hover { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
@media (min-width: 860px) and (max-width: 1279px) { .nav .nav__brochure { min-height: 46px; padding: 0 18px 0 16px; font-size: .95rem; } }
.nav .btn.nav__brochure svg.ico { width: 18px; height: 18px; stroke-width: 1.8; }

/* Hero type, with contrast (user's reference): a high-contrast serif for the 40 and for the car's name, a thin plus,
   light sans for the rest; a quieter, wider-spaced eyebrow. No added rules or dashes. */
.hero__eyebrow { gap: 8px 14px; font-weight: 400; letter-spacing: .34em; color: rgba(255, 255, 255, .86); }
.hero__eyebrow span + span { padding-left: 0; border-left: 0; }
.hero__eyebrow span + span::before { content: "|"; margin-right: 14px; letter-spacing: 0; color: rgba(255, 255, 255, .5); }
.hero__years { font-weight: 300; letter-spacing: -.03em; }
.hero__years b { font-weight: inherit; letter-spacing: 0; }
.hero__num { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 500; font-size: 1.08em; letter-spacing: -.01em; line-height: .9; }
.hero__plus { margin: 0 .04em 0 .02em; font-weight: 200; }
html:not(.font-archivo) .hero__plus, html:not(.font-archivo) .hero__years { font-weight: 300; }
.hero__of { font-weight: 300; letter-spacing: -.01em; }
html:not(.font-archivo) .hero__of { font-weight: 300; }
.hero__intro { font-weight: 300; color: rgba(255, 255, 255, .86); }
.hero__car { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: 0; }
.hero__lede #hero-lede { font-weight: 300; }
.hero__num { font-size: 1.2em; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.hero__plus { font-weight: 200; opacity: .95; }
.hero__car { font-variant-numeric: lining-nums; }
@media (max-width: 859px) { .hero__eyebrow { letter-spacing: .2em; gap: 6px 10px; } .hero__eyebrow span + span::before { margin-right: 10px; } }

/* ==========================================================================
   HEADER + HERO, AFTER THE USER'S REFERENCE: light uppercase nav with wide tracking and a larger logo; a dominant serif
   40 with a thin plus and light 'years'; pill buttons (warm white, thin outline); round slide arrows; a quiet serif car
   name at the right. No decorative rules.
   ========================================================================== */
@media (min-width: 860px) {
  .nav--c .nav__links a { font-size: .8rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; }
  html:not(.font-archivo) .nav--c .nav__links a { font-weight: 400; }
  .nav--c .brand__kia { width: 86px; height: 43px; }
  .nav--c .brand__dealer { padding-left: 0; border-left: 0; font-size: .74rem; font-weight: 400; letter-spacing: .3em; }
  .nav .nav__brochure { min-height: 44px; padding: 0 20px 0 18px; border-width: 1px; border-radius: 999px; font-size: .8rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
  html:not(.font-archivo) .nav .nav__brochure { font-weight: 400; }
  .nav .btn.nav__brochure svg.ico { width: 16px; height: 16px; stroke-width: 1.6; }
}
.hero__eyebrow { font-weight: 300; letter-spacing: .38em; color: rgba(255, 255, 255, .9); }
html:not(.font-archivo) .hero__eyebrow { font-weight: 300; }
.hero__eyebrow span + span::before { margin: 0 18px 0 4px; }
.hero__num { font-size: 1.42em; font-weight: 500; letter-spacing: -.02em; }
.hero__plus { font-weight: 200; margin: 0 .02em; }
.hero__years { font-weight: 300; }
.hero__of { margin-top: 2px; font-weight: 300; }
.hero__intro { margin-top: clamp(22px, 3vh, 32px); color: rgba(255, 255, 255, .9); }
.hero__inner .hero__actions { gap: 20px; }
.hero__inner .hero__actions .btn { min-height: 54px; padding: 0 34px; border-radius: 999px; font-size: 1rem; font-weight: 400; letter-spacing: 0; }
html:not(.font-archivo) .hero__inner .hero__actions .btn { font-weight: 400; }
.hero__inner .hero__actions .btn:not(.btn--glass) { background: #f6f1ea; border-color: #f6f1ea; color: #17191b; }
.hero__inner .hero__actions .btn:not(.btn--glass):hover { background: #fff; border-color: #fff; }
.hero__inner .hero__actions .btn--glass { min-height: 50px; background: rgba(0, 0, 0, .12); border: 1px solid rgba(255, 255, 255, .7); color: #fff; font-size: .92rem; backdrop-filter: none; }
.hero__inner .hero__actions .btn--glass:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.hero__controls .round { border-radius: 50%; border-color: rgba(255, 255, 255, .6); }
.hero__controls .round:hover { background: #fff; color: var(--ink); }
.hero__count { font-weight: 400; }
@media (min-width: 1200px) {
  .hero__lede { width: min(340px, 24vw); text-align: left; }
  .hero__car { margin-bottom: 6px; font-size: clamp(1.3rem, 1.5vw, 1.6rem); letter-spacing: .01em; }
  .hero__lede #hero-lede { font-size: .95rem; }
}
@media (max-width: 859px) {
  .hero__inner .hero__actions .btn { min-height: 50px; padding: 0 18px; font-size: .92rem; }
  .hero__inner .hero__actions .btn--glass { min-height: 50px; }
}
@media (min-width: 860px) { .nav.nav--c .nav__links a { letter-spacing: .18em; } }
@media (min-width: 860px) and (max-width: 1499px) { .nav.nav--c .nav__links a { letter-spacing: .12em; } .nav--c .brand__kia { width: 72px; height: 36px; } .nav--c .brand__dealer { letter-spacing: .2em; font-size: .7rem; } .nav--c .brand--kia { gap: 10px; } .nav .nav__brochure { letter-spacing: .1em; padding: 0 16px 0 14px; } }
@media (max-width: 859px) { .hero__eyebrow { letter-spacing: .16em; font-size: .62rem; } .hero__eyebrow span + span::before { margin: 0 8px 0 2px; } }

/* EMI rate box: room for a rate like 10.25, and no spinner arrows eating into it (user: the figure was cut) */
.emit__rate .field { width: 132px; padding-right: 14px; }
.emit__rate .field input { min-width: 0; padding: 0 6px 0 14px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.emit__rate .field input::-webkit-outer-spin-button, .emit__rate .field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Hero, closer to the reference: a thin standing line beside the car's name; lighter sans (Archivo was near regular);
   buttons back to the site's near-square corners (user: no rounded pills). */
@media (min-width: 1200px) {
  .hero__lede { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .7); }
}
.font-archivo .hero__years, .font-archivo .hero__plus { font-weight: 200; }
.font-archivo .hero__of { font-weight: 250; }
.font-archivo .hero__eyebrow { font-weight: 300; }
.font-archivo .hero__intro, .font-archivo .hero__lede #hero-lede { font-weight: 300; }
.hero__car { font-weight: 400; letter-spacing: .02em; }
.hero__inner .hero__actions .btn, .nav .nav__brochure, .hero__controls .round { border-radius: var(--r); }

/* 40+ years, one size down (user: too big); the line beneath now says legacy */
.hero__years { font-size: clamp(2.9rem, 5.4vw, 5.4rem); }
.hero__num { font-size: 1.3em; }
.hero__of { font-size: clamp(1.4rem, 2.1vw, 2.1rem); }
@media (max-width: 859px) { .hero__years { font-size: clamp(2.6rem, 12vw, 3.3rem); } .hero__of { font-size: clamp(1.1rem, 4.8vw, 1.35rem); } }
.hero__intro { max-width: 52ch; }

/* iPhone: Safari zooms the page into any field set below 16px; every field is 16px on touch screens */
@media (max-width: 1024px) and (hover: none) { input, select, textarea { font-size: 16px !important; } }
/* Older Safari (before 16) has no overflow: clip; there the page falls back to hidden so nothing scrolls sideways */
@supports not (overflow: clip) { body.car, .finder, .versions, .vers { overflow-x: hidden; } }
@media (max-width: 360px) { .nav__inner { min-width: 0; } .nav--c .brand--kia { gap: 8px; } .brand__kia { width: 46px; height: 23px; } .brand__dealer { padding-left: 8px; font-size: .66rem; letter-spacing: .1em; } }
@media (max-width: 859px) { .nav--c .nav__right { display: none; } }
@media (max-width: 859px) { .nav--c .nav__links--l { display: none; } .nav.nav--c { max-width: 100vw; overflow-x: clip; } }

/* Header on laptop widths (and 125%% to 150%% display scaling): tighter links, a shorter brochure label, a smaller logo */
@media (min-width: 860px) and (max-width: 1439px) {
  .nav--c .nav__links--l, .nav--c .nav__right .nav__links { gap: 22px; }
  .nav--c .nav__right { gap: 22px; }
  .nav.nav--c .nav__links a { font-size: .74rem; letter-spacing: .1em; }
  .nav--c .brand__kia { width: 64px; height: 32px; }
  .nav--c .brand__dealer { font-size: .66rem; letter-spacing: .16em; }
  .nav__dl { display: none; }
  .nav .nav__brochure { min-height: 42px; padding: 0 16px 0 14px; font-size: .74rem; letter-spacing: .1em; }
}
@media (min-width: 860px) and (max-width: 1199px) { .nav.nav--c .nav__links a { letter-spacing: .06em; } .nav--c .brand__dealer { display: none; } }
/* Small laptops and tablets in landscape (860 to 1279px): some links are folded away, so the menu button appears
   beside Brochure and opens the full list */
@media (min-width: 860px) and (max-width: 1279px) {
  .nav--c .nav__toggle { display: block; grid-column: 3; grid-row: 1; justify-self: end; align-self: center; margin-right: -10px; }
  .nav--c .nav__right { grid-column: 3; grid-row: 1; padding-right: 50px; }
  .nav--c .nav__mobile { grid-column: 1 / -1; }
}
@media (max-width: 859px) { .hero__controls { padding-right: calc(var(--gutter) + 62px); } }

/* Header brand: the dealer wordmark, no Kia logo (user). "Shreenath Kia" over "Kia India Authorised Dealer", centred */
.nav--c .brand--kia { flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; line-height: 1; }
.brand__name { font-size: clamp(1.2rem, 1.5vw, 1.5rem); font-weight: 600; letter-spacing: -.005em; line-height: 1.1; white-space: nowrap; }
html:not(.font-archivo) .brand__name { font-weight: 700; }
.brand__tag { font-size: clamp(.62rem, .7vw, .72rem); font-weight: 400; letter-spacing: .04em; line-height: 1.2; white-space: nowrap; opacity: .78; }
@media (max-width: 859px) { .nav--c .brand--kia { align-items: flex-start; text-align: left; } .brand__name { font-size: 1.1rem; } .brand__tag { font-size: .6rem; } }
.nav--c .brand--kia, .brand__name, .brand__tag { text-transform: none; font-stretch: 100%%; }
.brand__name { letter-spacing: 0; }
.brand__tag { letter-spacing: .01em; }
html.font-archivo .brand__name, html.font-archivo .brand__tag { font-stretch: 100%%; font-variation-settings: "wdth" 100; }
html.font-archivo .brand__name { font-weight: 600; }
html.font-archivo .brand__tag { font-weight: 400; }

/* Showroom card with its own photographs: the first holds the frame, the others fade in over it in turn */
.room__img.is-cycle { position: relative; }
.room__img.is-cycle img { width: 100%; height: 100%; object-fit: cover; transition: opacity 1s ease, transform .9s var(--ease); }
.room__img.is-cycle img + img { position: absolute; inset: 0; }
.room__img.is-cycle img:not(.is-on) { opacity: 0; }

/* Header, wide screens: the wordmark sits midway between the two link groups (it read as pushed right when centred on the page, because the right group is the wider one) */
@media (min-width: 1280px) { .nav--c .nav__inner { display: flex; align-items: center; justify-content: space-between; } .nav--c .nav__links--l, .nav--c .nav__right { flex: none; } .nav--c .brand--kia { flex: none; } }

/* ==========================================================================
   HEADER, LOGO LEFT (client): the wordmark on the left, every link and the brochure button to its right
   ========================================================================== */
@media (min-width: 860px) {
  .nav--c .nav__inner { display: flex; align-items: center; justify-content: flex-start; gap: clamp(18px, 2vw, 36px); }
  .nav--c .brand--kia { order: -1; flex: none; margin-right: auto; align-items: flex-start; text-align: left; justify-self: auto; }
  .nav--c .nav__links--l { order: 0; flex: none; }
  .nav--c .nav__right { order: 1; flex: none; padding-right: 0; grid-column: auto; }
  .nav--c .nav__toggle { order: 2; grid-column: auto; margin-left: 0; }
}

/* ==========================================================================
   FINANCE AND INSURANCE, WHY US: reasons on the left, a photograph on the right; the calculator is a popup
   ========================================================================== */
.fin--why .fin__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.fin__lede { max-width: 54ch; margin-top: 14px; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.6; color: var(--graphite); }
.fin__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px; }
.fin__acts .btn { min-height: 48px; padding: 0 22px; }
.fin__acts .more { margin-top: 0; }
.fin__photo { position: relative; min-height: 360px; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--tint); }
.fin__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; filter: brightness(1.45) contrast(1.04); }
@media (max-width: 1099px) { .fin--why .fin__grid { grid-template-columns: minmax(0, 1fr); } .fin__photo { min-height: 0; aspect-ratio: 16 / 10; order: -1; } }
/* the service photographs from Kia carry a dark overlay; lift them where they show */
.kia__img[src*="care-"], .reason__img[src*="care-"] { filter: brightness(1.45) contrast(1.04); }

/* EMI popup: fits the screen; inputs on the left, the answer on the right */
.emipop { width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; padding: clamp(22px, 2.6vw, 34px); }
.emipop .emit--pop { margin-top: 16px; padding: 0; background: none; }
.emipop__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.emipop__out { padding: clamp(18px, 2vw, 26px); background: var(--tint); border-radius: var(--r-lg); }
.emipop .emit__out { margin-top: 0; padding-top: 0; border-top: 0; }
.emipop .emit__grid { margin-top: 0; }
.emipop .emit__rate label sup { margin-left: 1px; color: var(--ink); }
.emipop .emit__acts { margin-top: 18px; }
.emipop .emit__acts .btn { flex: 1 1 auto; }
@media (max-width: 859px) {
  .emipop { padding: 22px 18px; }
  .emipop__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .emipop .emit--lite .emit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1100px) { .fin--why .fin__grid { align-items: center; } .fin__photo { min-height: 0; aspect-ratio: 4 / 5; max-height: 680px; } }
.emipop .field { background: var(--tint); border-color: var(--tint); }
.emipop .emit__rate .field { background: var(--tint); }
@media (max-width: 859px) { .emipop .emit, .emipop .emit--lite { margin: 0; padding: 0; border-radius: 0; background: none; } .emipop .emipop__out { margin: 0 -2px; } }

/* Why choose, 27 Oct: the client's own photographs are 1600px wide, so the frame now runs the full height of the words beside it
   (label, heading and the four reasons; user: "adjust image size with respect to content"), instead of a 680px 16:10 box. */
@media (min-width: 860px) {
  .kia__media { align-self: stretch; justify-self: stretch; width: 100%; max-width: none; min-height: 440px; aspect-ratio: auto; }
}
.kia__img[src*="images/why/"], .reason__img[src*="images/why/"] { filter: none; }
.fin__photo img[src*="images/process/"] { filter: none; }

/* EMI calculator pop-up: larger type throughout, both columns share their top and bottom edges, a readable asterisk */
.emipop__grid { align-items: stretch; }
.emipop__in { display: flex; flex-direction: column; justify-content: space-between; }
.emipop__in .emit__rate { margin-top: 22px; }
.emipop__out { display: flex; flex-direction: column; }
.emipop .emit__acts { margin-top: 22px; }
.emipop .emit__f label { margin-bottom: 8px; font-size: .95rem; }
.emipop .emit .field select, .emipop .emit .field input { font-size: 1.05rem; }
.emipop .emit .slider { margin-top: 22px; }
.emipop .emit .slider label, .emipop .emit__rate label { font-size: 1.05rem; }
.emipop .emit .slider output { font-size: 1.12rem; }
.emipop .emit__out dt { font-size: .95rem; }
.emipop .emit__out dd { font-size: 1.2rem; }
.emipop .emit__out .emit__emi dd b { font-size: clamp(2.2rem, 3.4vw, 2.8rem); }
.emipop .emit__out .emit__emi small { font-size: 1.05rem; }
.emipop #et-note { margin-top: auto; padding-top: 16px; font-size: .92rem; line-height: 1.5; }
.emipop .emit__rate label sup, .emipop #et-note sup { font-size: 1.15em; font-weight: 700; line-height: 0; vertical-align: -.05em; margin: 0 2px 0 1px; color: var(--ink); }