/* =========================================================
   Redline Motors · home-2026.css (home page only; tokens live in site-2026.css)
   ========================================================= */
.section { padding-block: var(--section); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-bottom: var(--s-7); }
.section-head .h2 { margin-top: var(--s-3); max-width: 16ch; }
.fine { font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted); max-width: var(--measure); }
.on-dark .fine { color: var(--night-dim); }
.pic-note { position: absolute; left: var(--s-3); bottom: var(--s-3); padding: var(--s-1) var(--s-2); border-radius: 2px; background: rgba(20, 23, 26, .86); color: #fff; font: 500 var(--t-meta)/1.3 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-areas: "copy" "media" "find"; background: var(--bg); }
.hero-copy { grid-area: copy; padding: var(--s-6) var(--margin) var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
.hero-copy .lede { margin-top: var(--s-1); }
.hero-media { grid-area: media; position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; --fade-size: 72px; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 12% 62%; }
.hero-find { grid-area: find; padding: var(--s-6) var(--margin) var(--s-7); display: grid; gap: var(--s-5); }
.search {
  --field-h: 52px;
  display: grid; gap: var(--s-4); padding: var(--s-5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-media); box-shadow: 0 1px 2px rgba(20, 23, 26, .05), 0 16px 32px -20px rgba(20, 23, 26, .28);
}
.search .btn { width: 100%; min-height: var(--field-h); }
.proof { display: grid; gap: var(--s-2); font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-soft); }
.proof li { display: flex; align-items: center; gap: var(--s-2); }
.proof svg { width: 16px; height: 16px; color: var(--success); flex: none; }

@media (min-width: 640px) {
  .search { grid-template-columns: 1fr 1fr 1fr; }
  .search .btn { grid-column: 1 / -1; }
  .proof { grid-auto-flow: column; justify-content: start; gap: var(--s-5); }
}
@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "copy media" "find media";
    min-height: min(calc(100svh - 112px), 760px);
  }
  .hero-copy { padding: var(--s-7) var(--s-7) 0 var(--margin); align-content: end; gap: var(--s-5); }
  .hero-find { padding: var(--s-6) var(--s-7) var(--s-7) var(--margin); align-content: start; }
  .hero-media { aspect-ratio: auto; min-height: 100%; }
  .hero-media { --fade-x: 112px; --fade-y: 96px; --fade-l: 1; --fade-t: 0; }
  .hero-media picture { position: absolute; inset: 0; }
  .hero-media img { object-position: 0% 60%; }
  .search { grid-template-columns: 1fr 1fr; }
  .search .field:nth-child(3) { grid-column: 1; }
  .search .btn { grid-column: 2; align-self: end; }
  .proof { grid-auto-flow: row; gap: var(--s-2); }
}
@media (min-width: 1280px) { .proof { grid-auto-flow: column; gap: var(--s-5); } }

/* ---------- four jobs ---------- */
.jobs { background: var(--surface); border-block: 1px solid var(--line); }
.jobs-list { display: grid; grid-template-columns: 1fr; padding: 0; margin: 0; list-style: none; }
.jobs-list li + li { border-top: 1px solid var(--line); }
.jobs-list a { position: relative; display: grid; gap: var(--s-2); padding: var(--s-5) 0; padding-right: var(--s-7); text-decoration: none; min-height: 44px; }
.jobs-list a > span:not(.meta) { color: var(--muted); max-width: 32ch; font-size: var(--t-body); line-height: var(--lh-small); }
.jobs-list .h3 { transition: color var(--dur) var(--ease); }
.jobs-list a:hover .h3 { color: var(--red-ink); }
.jobs-list svg { position: absolute; right: 0; top: var(--s-5); width: 22px; height: 22px; color: var(--red); transition: transform var(--dur) var(--ease); }
.jobs-list a:hover svg { transform: translateX(4px); }
@media (min-width: 720px) {
  .jobs-list { grid-template-columns: repeat(2, 1fr); }
  .jobs-list li + li { border-top: 0; }
  .jobs-list li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .jobs-list li:nth-child(even) a { padding-left: var(--s-6); }
  .jobs-list li:nth-child(even) { border-left: 1px solid var(--line); }
}
@media (min-width: 1100px) {
  .jobs-list { grid-template-columns: repeat(4, 1fr); }
  .jobs-list li:nth-child(n+3) { border-top: 0; }
  .jobs-list li { border-left: 1px solid var(--line); }
  .jobs-list li:first-child { border-left: 0; }
  .jobs-list a, .jobs-list li:nth-child(even) a { padding: var(--s-6) var(--s-6) var(--s-6) var(--s-6); padding-right: var(--s-7); }
  .jobs-list li:first-child a { padding-left: 0; }
  .jobs-list svg { right: var(--s-5); top: var(--s-6); }
}

/* ---------- new in ---------- */
.newin-grid { display: grid; gap: var(--s-7); }
.feature { display: grid; gap: var(--s-5); align-content: start; }
.feature-media { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; --fade-x: 14%; --fade-y: 22%; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.feature-media:hover img { transform: scale(1.03); }
.flag { position: absolute; left: var(--s-3); top: var(--s-3); padding: var(--s-1) var(--s-2); border-radius: 2px; background: var(--ink); color: #fff; font: 500 var(--t-meta)/1.3 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; }
.feature-body { display: grid; gap: var(--s-4); }
.feature-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); }
.feature-title .h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); }
.feature-title .h2 a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.feature-title .h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.price-big { font: 700 clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem)/1.1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price-sub { color: var(--muted); font-size: var(--t-small); line-height: var(--lh-small); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); padding: var(--s-3) 0; border-block: 1px solid var(--line); font: 500 var(--t-small)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); list-style: none; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.save-btn { gap: var(--s-2); }
.save-btn svg { width: 18px; height: 18px; transition: none; }
.save-btn:hover svg { transform: none; }
.save-btn[aria-pressed="true"] { background: var(--red-tint); border-color: var(--red); color: var(--red-ink); }
.save-btn[aria-pressed="true"] svg path { fill: currentColor; }

.rows { padding: 0; margin: 0; list-style: none; display: grid; align-content: start; border-top: 1px solid var(--ink); }
.row { display: grid; grid-template-columns: 112px 1fr; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); position: relative; }
.row-media { overflow: hidden; aspect-ratio: 3 / 2; display: block; --fade-x: 14%; --fade-y: 22%; }
.row-media img { width: 100%; height: 100%; object-fit: cover; }
.row-body { display: grid; gap: var(--s-1); min-width: 0; }
.row-body .h3 { font-size: 1.125rem; }
.row-body .h3 a { text-decoration: none; }
.row-body .h3 a::after { content: ""; position: absolute; inset: 0; }
.row-meta { font: 500 var(--t-meta)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); letter-spacing: .02em; display: flex; flex-wrap: wrap; column-gap: var(--s-2); }
.row-meta span { white-space: nowrap; }
.row-meta span:not(:last-child)::after { content: "·" / ""; margin-left: var(--s-2); }
.row-price { font: 600 1.125rem/1.2 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: var(--s-1); }
.row-price small { font: 400 var(--t-small)/1.2 var(--font-text); color: var(--muted); letter-spacing: 0; margin-left: var(--s-2); }
.row .save-btn { position: relative; z-index: 1; }
@media (max-width: 639px) {
  .row { padding-right: var(--s-6); }
  .row-save { position: absolute; top: var(--s-2); right: -10px; z-index: 1; }
  .row-save .save-btn { min-width: 44px; padding: 0; border-color: transparent; }
  .row-save .save-btn span { display: none; }
}
@media (min-width: 640px) {
  .row { grid-template-columns: 160px 1fr auto; }
  .row .row-save { grid-column: 3; }
  .row-price { margin-top: 0; }
}
@media (min-width: 960px) {
  .newin-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
  .rows { grid-template-columns: 1fr; align-self: stretch; grid-auto-rows: 1fr; }
  .row { grid-template-columns: 160px 1fr; padding: var(--s-5) 0; }
  .row-save { display: none; }
}
@media (min-width: 1200px) { .row { grid-template-columns: 200px 1fr; gap: var(--s-5); } .row-body .h3 { font-size: 1.375rem; } .row-price { font-size: 1.375rem; } }

/* ---------- finance (dark band) ---------- */
.finance { background: var(--night); color: #fff; padding-block: var(--section); }
.finance-grid { display: grid; gap: var(--s-7); }
.finance-copy { display: grid; gap: var(--s-5); align-content: start; }
.finance-copy .h2 { max-width: 12ch; }
.calc { background: var(--surface); color: var(--ink); border-radius: var(--r-media); padding: var(--s-5); display: grid; gap: var(--s-5); box-shadow: var(--shadow-overlay); }
.calc-out { padding-top: var(--s-5); border-top: 1px solid var(--line); display: grid; gap: var(--s-4); }
.calc-monthly { font: 700 clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem)/1.1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--red-ink); }
.calc-monthly small { font: 400 var(--t-small)/1.2 var(--font-text); letter-spacing: 0; color: var(--muted); margin-left: var(--s-2); }
.calc-facts { display: grid; gap: 0; }
.calc-facts div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line); font-size: var(--t-small); line-height: var(--lh-small); font-variant-numeric: tabular-nums; }
.calc-facts dt { color: var(--muted); }
.calc-facts dd { font-weight: 600; }
@media (min-width: 960px) {
  .finance-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-9); align-items: center; }
  .calc { padding: var(--s-7); }
}

/* ---------- browse + reduced ---------- */
.browse-grid { display: grid; gap: var(--s-8); }
.browse-fuel .h2 { margin-top: var(--s-3); max-width: 14ch; }
.index { padding: 0; margin: var(--s-6) 0 0; list-style: none; border-top: 1px solid var(--ink); }
.index a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s-5); min-height: 64px; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding-left var(--dur) var(--ease); }
.index a:hover { padding-left: var(--s-3); }
.index .name { font: 600 1.375rem/1.2 var(--font-display); letter-spacing: -.02em; }
.index .from { font: 500 var(--t-small)/1.2 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.index .n { min-width: 2ch; text-align: right; font: 500 var(--t-small)/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.index svg { display: none; }
.budget { padding: 0; margin: var(--s-5) 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.budget a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--control-line); border-radius: 999px; font-size: var(--t-small); font-weight: 500; text-decoration: none; transition: border-color var(--dur), background-color var(--dur); }
.budget a:hover { border-color: var(--ink); background: var(--surface); }
.reduced { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media); padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
.reduced-title { margin-top: calc(var(--s-3) * -1); }
.rtable, .ctable, .htable { width: 100%; border-collapse: collapse; }
.rtable th, .ctable th { white-space: nowrap; text-align: left; font: 500 var(--t-meta)/1.3 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); padding: var(--s-2) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--ink); }
.rtable th:not(:first-child), .rtable td:not(:first-child) { text-align: right; padding-right: 0; padding-left: var(--s-3); }
.rtable td { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: baseline; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.rtable .car a { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--t-body)/1.25 var(--font-display); letter-spacing: -.01em; text-decoration: none; }
.rtable .car a:hover { text-decoration: underline; }
.rtable .car small { display: block; font: 500 var(--t-meta)/1.5 var(--font-mono); color: var(--muted); margin-top: 0; padding-bottom: var(--s-1); }
.rtable .save { display: inline-block; margin-top: var(--s-1); font: 600 var(--t-meta)/1.3 var(--font-mono); letter-spacing: .02em; color: var(--success); }
.rtable .was { color: var(--muted); text-decoration: line-through; white-space: nowrap; }
.rtable .now { font-weight: 600; white-space: nowrap; }
@media (min-width: 960px) {
  .browse-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-9); align-items: start; }
  .reduced { padding: var(--s-6); }
}

/* ---------- checks ---------- */
.checks { background: var(--surface); border-block: 1px solid var(--line); }
.checks-grid { display: grid; gap: var(--s-7); }
.checks-media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; --fade-x: 14%; --fade-y: 20%; }
.checks-media img { width: 100%; height: 100%; object-fit: cover; }
.checks-copy { display: grid; gap: var(--s-5); align-content: start; }
.checks-copy .h2 { margin-top: calc(var(--s-3) * -1); max-width: 18ch; }
.steps { counter-reset: s; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--ink); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 500 var(--t-meta)/1.9 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--red-ink); letter-spacing: .04em; }
.cover { display: grid; gap: var(--s-3); margin-top: var(--s-4); background: var(--bg); border-radius: var(--r-media); }
.ctable td { padding: var(--s-3) var(--s-3) var(--s-3) 0; vertical-align: top; border-bottom: 1px solid var(--line); font-size: var(--t-small); line-height: var(--lh-small); font-variant-numeric: tabular-nums; }
.ctable td:first-child { font-weight: 600; }
.ctable td:last-child { padding-right: 0; }
.ctable td:nth-child(2), .ctable td:nth-child(3) { white-space: nowrap; }
.cover { padding: var(--s-4); }
@media (min-width: 640px) { .cover { padding: var(--s-5); } }
@media (min-width: 960px) {
  .checks-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-9); align-items: start; }
  .checks-media { position: sticky; top: calc(var(--header-h) + var(--s-6)); aspect-ratio: 4 / 5; }
}

/* ---------- part-exchange + test drive ---------- */
.visit-jobs { padding-block: var(--section); }
.px-grid { display: grid; gap: var(--s-7); }
.px-copy { display: grid; gap: var(--s-5); align-content: center; }
.px-copy .h2 { margin-top: calc(var(--s-3) * -1); }
.px-actions { display: grid; border-top: 1px solid var(--ink); margin-top: var(--s-3); }
.px-link { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.px-link > span { display: grid; gap: var(--s-2); color: var(--muted); max-width: 48ch; }
.px-link .h3 { color: var(--ink); }
.px-link svg { width: 24px; height: 24px; color: var(--red); transition: transform var(--dur) var(--ease); }
.px-link:hover svg { transform: translateX(4px); }
.px-link:hover .h3 { color: var(--red-ink); }
.px-media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; --fade-x: 14%; --fade-y: 20%; }
.px-media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
  .px-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-9); align-items: center; }
  .px-media { aspect-ratio: 4 / 5; order: 2; }
}

/* ---------- guides ---------- */
.guides { background: var(--surface); border-top: 1px solid var(--line); }
.guides-grid { display: grid; gap: var(--s-7); }
.guides-head { display: grid; gap: var(--s-4); align-content: start; }
.guides-head .h2 { margin-top: calc(var(--s-1) * -1); max-width: 14ch; }
.g-list { padding: 0; margin: 0; list-style: none; display: grid; border-top: 1px solid var(--ink); }
.g-list a { display: grid; gap: var(--s-2); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.g-list a > span:not(.meta):not(.read) { color: var(--muted); max-width: 52ch; }
.g-list .h3 { transition: color var(--dur) var(--ease); }
.g-list a:hover .h3 { color: var(--red-ink); }
.g-feature .h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); }
.g-feature a { padding-block: var(--s-6); }
.read { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--red-ink); margin-top: var(--s-2); }
.read svg { width: 16px; height: 16px; }
@media (min-width: 960px) {
  .guides-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-9); align-items: start; }
}

/* ---------- visit ---------- */
.visit-grid { display: grid; gap: var(--s-7); }
.visit-grid > div:first-child { display: grid; gap: var(--s-5); align-content: start; }
.visit-grid .h2 { margin-top: calc(var(--s-3) * -1); }
.addr { font: 500 var(--t-h3)/1.35 var(--font-display); font-style: normal; letter-spacing: -.01em; }
.visit-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.hours-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media); padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
.hours-box .status { color: var(--ink); }
.hours-box .dot { background: var(--muted); }
.hours-box .status[data-open="true"] .dot { background: var(--success); }
.htable th { text-align: left; font-weight: 400; color: var(--muted); }
.htable th, .htable td { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.htable td { text-align: right; font: 500 var(--t-body)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
@media (min-width: 960px) {
  .visit-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-9); align-items: start; }
  .hours-box { padding: var(--s-6); }
}
.f-hours li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; max-width: 288px; white-space: nowrap; }

/* ---------- scroll-driven reveal (enhancement only) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    @keyframes reveal { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
  }
}