/* Shreenath Kia — homepage refinements. Loaded on index.html only, after every other stylesheet.
   1. Finance and insurance: all widths.
   2. Everything else: phones only (< 860px); the desktop homepage is untouched. */

/* =====================================================================
   1. FINANCE AND INSURANCE — no photograph; a full-width heading row,
      then two equal panels, each ending in its call to action.
   ===================================================================== */
#finance .fin__grid { display: block; }
#finance .fin__info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; }
#finance .fin__info > .label { grid-column: 1; }
#finance .fin__info > .h2 { grid-column: 1; max-width: 24ch; }
#finance .fin__lede { grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: 52ch; margin: 0; }
#finance .fin__topics { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); max-width: none; margin-top: clamp(28px, 3.4vw, 48px); }
#finance .fin__topics .fin__topic,
#finance .fin__topics .fin__topic:first-child,
#finance .fin__topics .fin__topic + .fin__topic { display: flex; flex-direction: column; gap: 0; padding: clamp(26px, 2.6vw, 40px); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--tint); }
#finance .fin__ico { width: 48px; height: 48px; background: var(--white); }
#finance .fin__topics .fin__topic { align-items: stretch; }
#finance .fin__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
#finance .fin__body h3 { margin-top: 18px; font-size: clamp(1.2rem, 1.5vw, 1.4rem); }
#finance .fin__topic ul { margin-top: 14px; }
#finance .fin__topic li { max-width: none; }
#finance .fin__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 26px; }
#finance .fin__acts .btn { min-height: 50px; padding: 0 22px; }
#finance .fin__note { grid-column: 1 / -1; }

@media (max-width: 859px) {
  #finance .fin__info { display: block; }
  #finance .fin__info > .h2 { max-width: none; }
  #finance .fin__lede { margin-top: 12px; }
  #finance .fin__topics { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 22px; }
  #finance .fin__topics .fin__topic,
  #finance .fin__topics .fin__topic:first-child,
  #finance .fin__topics .fin__topic + .fin__topic { padding: 20px 18px; }
  #finance .fin__ico { width: 40px; height: 40px; }
  #finance .fin__body h3 { margin-top: 14px; font-size: 1.12rem; }
  #finance .fin__topic ul { gap: 8px; }
  #finance .fin__topic li { font-size: .95rem; line-height: 1.5; }
  #finance .fin__acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 18px; }
  #finance .fin__acts .btn { width: 100%; min-height: 48px; padding: 0 14px; font-size: .95rem; }
}

/* =====================================================================
   2. PHONES ONLY
   ===================================================================== */
@media (max-width: 859px) {
  /* Hero: the photograph gets a taller block of its own, clear of the text, and slides
     change without two half-faded cars showing through each other. */
  /* A landscape banner, as on desktop: 16:9 below the header bar */
  .hero:not(.hero--car) .hero__media { height: calc(var(--nav-h, 64px) + 56.25vw); max-height: 440px; }
  .hero:not(.hero--car) .hero__slide { z-index: 0; transition: opacity .7s ease; }
  .hero:not(.hero--car) .hero__slide:not(.is-active) { transition: opacity 0s .75s; }
  .hero:not(.hero--car) .hero__slide.is-active { z-index: 1; }
  /* Each slide cropped in on its car, so the car fills most of the banner instead of a third of it.
     object-position centres the car; transform-origin sits on the car, so the zoom grows it in place;
     translateY drops it clear of the header bar. */
  .hero:not(.hero--car) .hero__slide:nth-child(3), .hero:not(.hero--car) .hero__slide:nth-child(4) { animation: none; }
  .hero:not(.hero--car) .hero__slide:nth-child(1) img { object-position: 30% 50%; transform-origin: 50% 46%; transform: translateY(6%) scale(1.08); }
  .hero:not(.hero--car) .hero__slide:nth-child(2) img { object-position: 49% 50%; transform-origin: 50% 49%; transform: translateY(13%) scale(1.6); }
  .hero:not(.hero--car) .hero__slide:nth-child(3) { object-position: 90% 50%; transform-origin: 54% 47%; transform: translateY(13%) scale(1.55); }
  .hero:not(.hero--car) .hero__slide:nth-child(4) { object-position: 44% 50%; transform-origin: 50% 58%; transform: translateY(4%) scale(1.38); }
  .hero:not(.hero--car) .hero__veil { z-index: 2; background: linear-gradient(0deg, #0e0f11 0%, rgba(14, 15, 17, .7) 20%, rgba(14, 15, 17, 0) 46%), linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 20%); }
  /* The text starts over the bottom of the photograph, and every line is a size smaller, so the hero fits one screen */
  .hero:not(.hero--car) .hero__eyebrow { margin-top: -46px; font-size: .56rem; letter-spacing: .14em; }
  .hero:not(.hero--car) .hero__title { margin-top: 14px; }
  .hero:not(.hero--car) .hero__years { font-size: clamp(1.9rem, 9vw, 2.4rem); }
  .hero:not(.hero--car) .hero__of { margin-top: 8px; font-size: clamp(.88rem, 3.8vw, 1rem); }
  .hero:not(.hero--car) .hero__lede { margin-top: 22px; font-size: .82rem; line-height: 1.45; }
  .hero:not(.hero--car) .hero__lede .hero__car { margin: 0 0 6px; font-size: .98rem; }
  .hero:not(.hero--car) .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
  .hero:not(.hero--car) .hero__actions .btn { min-height: 42px; padding: 0 8px; font-size: .8rem; white-space: nowrap; }
  .hero:not(.hero--car) .hero__actions .btn .ico { display: none; }
  .hero:not(.hero--car) .hero__controls { padding: 20px var(--gutter) 20px; }
  .hero:not(.hero--car) .hero__controls .round { width: 36px; height: 36px; }
  .hero:not(.hero--car) .hero__count { font-size: .76rem; }

  /* Why choose us: one photograph above a slim list, instead of a large photo inside the open row */
  /* Each reason opens as: heading, then its line, then its photograph */
  #why-kia .kia__media { display: none; }
  #why-kia .kia__list { margin-top: 28px; border-bottom: 0; }
  #why-kia .kia__list li:first-child .reason { padding-top: 0; }
  #why-kia .reason { min-height: 0; padding: 13px 0; row-gap: 0; }
  #why-kia .reason b { font-size: 1.05rem; }
  #why-kia .reason span, #why-kia .reason:hover span { grid-column: 1 / -1; grid-row: 2; }
  #why-kia .reason.is-active span { min-height: 0; max-height: 6em; margin-top: 6px; padding-bottom: 0; font-size: .95rem; }
  #why-kia .reason__img { display: block; grid-column: 1 / -1; grid-row: 3; }
  #why-kia .reason.is-active .reason__img { height: calc((100vw - 2 * var(--gutter)) * .5); margin-top: 12px; opacity: 1; }
  #why-kia .kia__strip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 32px 0 0; padding: 0; border: 0; border-radius: 0; }
  #why-kia .strip__item,
  #why-kia .strip__item:first-child,
  #why-kia .strip__item:last-child,
  #why-kia .strip__item:nth-child(odd),
  #why-kia .strip__item:nth-child(even),
  #why-kia .strip__item:nth-child(n+3) { flex-direction: row; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--white); }
  #why-kia .strip__item + .strip__item::before { display: none; }
  #why-kia .strip__icon { width: 34px; height: 34px; border-width: 1px; }
  #why-kia .strip__icon .ico { width: 17px; height: 17px; }
  #why-kia .strip__text { margin: 0; }
  #why-kia .strip__text strong { font-size: .88rem; line-height: 1.25; }

  /* Car cards: a compact two-up grid. Shorter photographs, name and price, two small buttons side by side. */
  #range .range__head, #range .range__head > *, #range > .range__lede, #range .range__bar, #range .range__note { padding-left: 0; padding-right: 0; }
  #range .range__lede { font-size: .98rem; }
  #range .range__tabs { overflow-x: auto; scrollbar-width: none; }
  #range .range__tabs::-webkit-scrollbar { display: none; }
  #range .range__tabs .tab { flex: 0 0 auto; padding: 0 14px; }
  #range .range__help { min-height: 36px; font-size: .9rem; }
  #range .models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; overflow: visible; padding: 0; margin-top: 16px; }
  #range .model { display: flex; flex-direction: column; min-width: 0; margin: 0; }
  #range .model[hidden] { display: none; }
  #range .model__img { aspect-ratio: 4 / 3; border-radius: var(--r); }
  #range .model__name { margin-top: 10px; font-size: 1rem; line-height: 1.25; }
  #range .model__line { display: none; }
  /* Name, a short line about the car, then the price: no empty gap between them */
  #range .model__tag { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; margin-top: 4px; font-size: .78rem; line-height: 1.35; color: var(--graphite); }
  #range .model__price { margin-top: 8px; font-size: .95rem; }
  #range .model__price small { display: block; font-size: .74rem; font-weight: 400; color: var(--graphite); }
  #range .model__links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-self: stretch; width: 100%; margin-top: auto; padding-top: 10px; }
  #range .model__links .btn { min-width: 0; min-height: 40px; padding: 0 6px; font-size: .8rem; gap: 4px; border-radius: 8px; white-space: nowrap; }
  #range .model__links .btn:first-child { font-size: 0; gap: 0; }
  #range .model__links .btn:first-child::before { content: "Explore"; margin: 0; font-size: .8rem; }
  #range .model__name { min-height: 0; }
  #range .model__links .btn .ico { display: none; }
  #range .range__note { margin-top: 20px; }

}

/* Very narrow phones: the eyebrow line fits on one row */
@media (max-width: 359px) {
  .hero:not(.hero--car) .hero__eyebrow { letter-spacing: .1em; font-size: .58rem; }
}

/* Small tablets: three cars to a row */
@media (min-width: 600px) and (max-width: 859px) {
  #range .models { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =====================================================================
   3. TEST DRIVE BAR (desktop): the form stays inside its column. With the
      date and time showing, the six controls sit in two rows of three.
   ===================================================================== */
@media (min-width: 860px) {
  #enquire .close__form { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  #enquire .close__bar:has(.td-only:not([hidden])) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  #enquire .close__bar:has(.td-only:not([hidden])) .field:nth-of-type(4) { border-left: 0; }
  #enquire .close__bar:has(.td-only:not([hidden])) .field:nth-of-type(n+4) { border-top: 1px solid var(--rule); }
  #enquire .close__bar:has(.td-only:not([hidden])) .btn { min-height: 0; margin: 8px 0 0 8px; }
}

/* Test drive form on phones: room between the white card and the consent line below it */
@media (max-width: 859px) {
  #enquire .close__form { row-gap: 18px; }
  #enquire .close__form .consent { margin-top: 10px; }
}

/* =====================================================================
   4. CAR LIST ON PHONES (< 600px): one car per row, photograph on the left,
      details on the right; the category tabs stay pinned under the header.
   ===================================================================== */
@media (max-width: 599px) {
  @supports (overflow: clip) { body { overflow-x: clip; } } /* "hidden" would stop the tabs from pinning */

  /* Tabs pinned below the fixed header while the list scrolls past */
  #range .range__bar { display: contents; }
  #range .range__tabs { position: sticky; top: calc(var(--nav-h, 64px) + 8px); z-index: 6; margin-top: 18px; box-shadow: 0 0 0 8px var(--white), 0 12px 16px -12px rgba(14, 15, 17, .35); }
  #range .range__help { display: inline-flex; margin-top: 14px; }

  #range .models { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
  #range .model { position: relative; display: grid; grid-template-columns: minmax(0, 48%) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 14px; padding: 10px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--white); }
  #range .model > * { grid-column: 2; }
  /* The photo keeps its own landscape shape so the whole car shows; the buttons run full width beneath */
  #range .model__img { grid-column: 1; grid-row: 1 / 4; align-self: start; aspect-ratio: 800 / 520; min-height: 0; height: auto; border-radius: var(--r); }
  #range .model__img img { width: 100%; height: 100%; object-fit: cover; }
  /* The car's category, from the card's own data, as a small tag on the photograph */
  #range .model::after { content: attr(data-cat); position: absolute; top: 16px; left: 16px; padding: 3px 7px; border-radius: 4px; background: rgba(14, 15, 17, .78); color: #fff; font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; pointer-events: none; }
  #range .model__name { grid-row: 1; margin-top: 2px; font-size: 1rem; }
  #range .model__tag { grid-row: 2; min-height: 0; margin-top: 3px; font-size: .76rem; }
  #range .model__price { grid-row: 3; align-self: end; margin-top: 8px; font-size: .95rem; }
  #range .model__links { grid-column: 1 / -1; grid-row: 4; padding-top: 10px; }
  #range .model__links .btn { min-height: 38px; font-size: .78rem; }
  #range .model__links .btn:first-child::before { font-size: .78rem; }
}


/* Offer banner, narrow layout only (the wide creative takes over at 960px) */
@media (max-width: 959px) {
  /* This month's offer: the car in a square of its own, the offer beneath it, even spacing throughout */
  #offers .ob { grid-template-columns: minmax(0, 1fr); background: var(--tint); }
  #offers .ob__bg { grid-area: 1 / 1; aspect-ratio: 16 / 9; }
  #offers .ob__bg img { object-position: 50% 57%; }
  #offers .ob__bg::after { background: linear-gradient(180deg, rgba(8, 12, 16, .5) 0%, rgba(8, 12, 16, 0) 22%, rgba(8, 12, 16, 0) 80%, rgba(11, 13, 16, .6) 100%); }
  #offers .ob__brand { grid-area: 1 / 1; margin: 12px 14px; gap: 10px; }
  #offers .ob__brand img { height: 20px; }
  #offers .ob__brand .ob__sep { height: 16px; }
  #offers .ob__brand span:last-child { font-size: 11px; }
  #offers .ob__offer { grid-area: auto; align-self: auto; margin: 0; padding: 16px 18px 18px; background: #0b0d10; }
  #offers .ob .ob__kicker { margin: 0 0 10px; font-size: 13px; }
  #offers .ob .ob__lead { font-size: 17px; }
  #offers .ob .ob__amount { margin: 2px 0 0; font-size: 32px; }
  #offers .ob .ob__copy { margin: 8px 0 0; font-size: 13px; line-height: 1.45; }
  #offers .ob__model { padding-top: 20px; }
  #offers .ob__deal { padding-top: 14px; }
  #offers .ob .ob__price b { font-size: 22px; }
  #offers .ob .ob__ends { margin-top: 14px; padding-top: 14px; }
  #offers .ob__acts { display: grid; gap: 10px; padding-top: 18px; }
  #offers .ob__btn { width: 100%; height: 48px; font-size: 15px; }
  #offers .ob__note { padding-top: 14px; padding-bottom: 18px; }
}

/* Phones: the photo runs taller and the offer headline sits on its floor, over a dark fade */
@media (max-width: 599px) {
  #offers .ob__bg { aspect-ratio: 1 / 1; }
  #offers .ob__bg img { object-position: 50% 64%; }
  #offers .ob__bg::after { background: linear-gradient(180deg, rgba(8, 12, 16, .5) 0%, rgba(8, 12, 16, 0) 22%, rgba(8, 12, 16, 0) 58%, rgba(11, 13, 16, .85) 85%, #0b0d10 100%); }
  #offers .ob .timer__clock span { flex: 1 1 0; min-width: 0; } /* four equal cells that always fit, down to 320px */
  #offers .ob__offer { position: relative; z-index: 1; margin-top: -110px; background: linear-gradient(180deg, rgba(11, 13, 16, 0) 0, rgba(11, 13, 16, 0) 70px, #0b0d10 110px); }
}

/* Model spotlight below 1200px: the wide Sorento photo is centred so the whole car stays in frame */
@media (max-width: 1199px) {
  #spotlight .spot__media img { object-position: 51% 50%; }
}

/* =====================================================================
   5. OFFER BANNER, WIDE (960px+): white copy on the right over a dark shade,
      and a countdown whose numbers tick down
   ===================================================================== */
@media (min-width: 960px) {
  #offers .ob::before { background:
      linear-gradient(90deg, rgba(8,12,16,.88) 0%, rgba(8,12,16,.78) 13%, rgba(8,12,16,.40) 21%, rgba(8,12,16,0) 28%),
      linear-gradient(270deg, rgba(8,12,16,.88) 0%, rgba(8,12,16,.78) 21%, rgba(8,12,16,.42) 29%, rgba(8,12,16,0) 37%),
      linear-gradient(180deg, rgba(8,12,16,.28) 0%, rgba(8,12,16,0) 30%); }
  #offers .ob__deal, #offers .ob__acts, #offers .ob__note { color: #fff; }
  #offers .ob__price small, #offers .ob .timer__label, #offers .ob .timer__clock i, #offers .ob__note p, #offers .ob__tc { color: rgba(255, 255, 255, .8); }
  #offers .ob__ends { border-top-color: rgba(255, 255, 255, .35); }
  #offers .ob .timer__clock span + span { border-left-color: rgba(255, 255, 255, .35); }
  #offers .ob__btn--dark { background: #fff; color: var(--ink); }
  #offers .ob__btn--dark:hover { background: var(--tint); }
  #offers .ob__btn--line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .75); }
  #offers .ob__btn--line:hover { background: #fff; color: var(--ink); border-color: #fff; }
  /* The Sonet photo is 16:9 with the car right of centre: enlarged and moved left so the car sits between the copy */
  #offers .ob__bg img { left: -12%; top: -46%; width: 100%; -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 9%); mask-image: linear-gradient(270deg, transparent 0, #000 9%); }
}
/* Countdown: each number slides in as it changes */
#offers .ob .timer__clock b { display: inline-block; font-variant-numeric: tabular-nums; }
#offers .ob .timer__clock b.is-tick { animation: ob-tick .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes ob-tick { from { transform: translateY(-55%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #offers .ob .timer__clock b.is-tick { animation: none; } }

/* Narrow end of the wide banner: buttons and notes sit a little higher so "*T&C apply" stays inside */
@media (min-width: 960px) and (max-width: 1149px) {
  #offers .ob .ob__acts { top: calc(452 * var(--u)); }
  #offers .ob .ob__note { top: calc(528 * var(--u)); }
}

/* =====================================================================
   RANGE CARDS, DESKTOP (860px+, which includes laptops at 125-150% zoom):
   every card's rows line up with its neighbours (photo, name and price, tagline, description, buttons),
   and the two buttons sit side by side, sharing the card's width instead of wrapping onto two lines
   ===================================================================== */
@media (min-width: 860px) {
  #range .range__grid { grid-auto-rows: auto; row-gap: 0; }
  #range .range__grid .model { grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; margin-bottom: clamp(36px, 3.4vw, 52px); }
  #range .range__grid .model__links { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; align-self: end; margin-top: 0; padding-top: 20px; }
  #range .range__grid .model__links .btn { min-width: 0; min-height: 50px; padding: 0 14px; gap: 8px; white-space: nowrap; }
}
@media (min-width: 1200px) {
  /* Name and price share a row, so a card has five rows; both sit on the same last line */
  #range .range__grid .model { grid-row: span 5; }
  #range .range__grid .model__name,
  #range .range__grid .model__price { align-self: last baseline; }
}

/* Client's short lines under section headings, and the sign-off under "The Shreenath Kia advantage" */
.sec-sub { margin: 10px 0 0; max-width: 52ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.5; color: var(--graphite); }
.kia__sign { margin: 22px 0 0; font-size: .95rem; font-style: italic; color: var(--graphite); }
@media (max-width: 859px) {
  #why-kia .kia__text > .sec-sub { order: 2; }
  #why-kia .kia__text > .kia__sign { order: 5; }
}

/* Test drive bar: the bright showroom photograph, shaded only as much as the white words need */
#enquire .close__media img { object-position: 50% 62%; }
#enquire .close__media::after { background: linear-gradient(90deg, rgba(5, 20, 31, .78) 0%, rgba(5, 20, 31, .5) 34%, rgba(5, 20, 31, .22) 62%, rgba(5, 20, 31, .3) 100%); }
@media (max-width: 859px) { #enquire .close__media::after { background: linear-gradient(180deg, rgba(5, 20, 31, .55) 0%, rgba(5, 20, 31, .72) 100%); } }

/* Model spotlight on phones: the four highlights two to a row */
@media (max-width: 599px) {
  #spotlight .highlights { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 12px; width: 100%; max-width: none; }
  #spotlight .highlights li { white-space: normal; align-items: flex-start; gap: 8px; font-size: .92rem; line-height: 1.3; }
  #spotlight .highlights .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; }
}
/* Why choose: clear room between the subline and the list of reasons */
#why-kia .sec-sub + .kia__list, #why-kia .kia__list { margin-top: clamp(28px, 3vw, 44px); }

/* Finance and insurance cards: breathing space between the reasons (client, 2 Nov 2026) */
#finance .fin__topic ul { margin-top: 18px; gap: 16px; }
#finance .fin__topic li { line-height: 1.6; }
#finance .fin__acts { padding-top: 30px; }
@media (max-width: 859px) { #finance .fin__topic ul { margin-top: 14px; gap: 14px; } #finance .fin__acts { padding-top: 22px; } }