/* ==========================================================================
   LORQEN — SHARED PAGE CORE
   --------------------------------------------------------------------------
   Page-level compositions from the quick-quote panel onwards, shared by every
   theme that ships this file and driven entirely by tokens. The hero and the
   interior page hero are NOT here: those are the two places a theme has to
   speak in its own voice, so each one defines them in its signature.css.
   ========================================================================== */

/* ==========================================================================
   QUICK QUOTE PANEL
   ========================================================================== */

.quickbook { padding-block: var(--sp-7); }

.quickbook__panel {
  background: var(--limestone);
  border: var(--rule-w, 1px) solid var(--line-accent);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 0.75rem + 2.4vw, 2.5rem);
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 1080px) {
  .quickbook__panel { grid-template-columns: minmax(14rem, 1fr) 2.5fr; align-items: center; gap: var(--sp-7); }
}

.quickbook__title { font-size: var(--fs-h3); }

.quickbook__note {
  margin-top: 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-dim);
}

.quickbook__grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .quickbook__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .quickbook__grid { grid-template-columns: repeat(4, 1fr); align-items: end; } }

.quickbook__submit { justify-content: flex-end; }
.quickbook__submit .btn { width: 100%; white-space: nowrap; padding-inline: 1rem; }

/* ==========================================================================
   SPOTLIGHT — the wine-tour block, which in this theme is the home turf
   ========================================================================== */

.spotlight__grid { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .spotlight__grid { grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 1rem + 5vw, 6rem); } }

.spotlight__tags { margin: var(--sp-6) 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.spotlight__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7); }

@media (max-width: 420px) {
  .spotlight__actions { flex-direction: column; }
  .spotlight__actions .btn { width: 100%; }
}

/* ==========================================================================
   SERVICE ROWS
   ========================================================================== */

.service-row { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); border-top: var(--hair) solid var(--line); }
.service-row:first-child { border-top: 0; padding-top: 0; }

.service-row__index {
  display: block;
  font-family: var(--font-display);
    font-size: 1.6rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: var(--sp-4);
  }

.service-row .h2 { margin-bottom: var(--sp-5); }
.service-row .lead { margin-bottom: var(--sp-5); }
.service-row .ticks, .service-row .chips { margin-top: var(--sp-5); }
.service-row .btn { margin-top: var(--sp-6); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-teaser { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .faq-teaser { grid-template-columns: 1fr 1.25fr; gap: clamp(2.5rem, 1rem + 4vw, 5rem); } }
.faq-teaser .btn { margin-top: var(--sp-6); }

.faq-tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: var(--sp-7); padding-bottom: var(--sp-5); border-bottom: var(--hair) solid var(--line); }
.faq-panel[hidden] { display: none; }

/* ==========================================================================
   COVERAGE
   ========================================================================== */

.coverage { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .coverage { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 1rem + 4vw, 5rem); } }

.coverage__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: var(--sp-6); border-top: var(--hair) solid var(--line); }
@media (min-width: 620px) { .coverage__list { grid-template-columns: repeat(3, 1fr); } }

.coverage__list li {
  padding: 0.85rem 0.5rem 0.85rem 0;
  border-bottom: var(--hair) solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   ACCREDITATION BADGES — arched niches
   ========================================================================== */

.badges { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .badges { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .badges { grid-template-columns: repeat(4, 1fr); } }

.badge {
  text-align: center;
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.badge__mark {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  margin: 0 auto var(--sp-5);
  border: var(--rule-w, 1px) solid var(--line-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
    font-size: 1.15rem;
  color: var(--accent);
}

.badge__name { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.badge__text { color: var(--text-muted); font-size: var(--fs-xs); }

/* ==========================================================================
   CONTACT HIGHLIGHTS
   ========================================================================== */

.highlights { display: grid; gap: 0 var(--sp-6); grid-template-columns: 1fr; border-top: var(--rule-w, 1px) solid var(--line-accent); }
@media (min-width: 700px)  { .highlights { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .highlights { grid-template-columns: repeat(4, 1fr); } }

/* gap-based spacing, no nth-child divider math -- see .pillars for why
   that approach is fragile (it silently disagreed with itself across
   breakpoints). */
.highlight { position: relative; padding: var(--sp-6) 0; border-bottom: var(--hair) solid var(--line); }

.highlight__icon { width: 20px; height: 20px; color: var(--accent); margin-bottom: var(--sp-5); }

.highlight__label {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-3);
}

.highlight__value { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.3; margin-bottom: var(--sp-2); }
.highlight__value a:hover { color: var(--accent); }
.highlight__note { font-size: var(--fs-xs); color: var(--text-dim); }

/* ==========================================================================
   INTEGRATION SLOTS
   ========================================================================== */

.integration-slot, .map-slot {
  border: var(--rule-w, 1px) dashed var(--line-accent);
  border-radius: var(--radius);
  padding: clamp(2rem, 1rem + 3.5vw, 3.5rem) var(--sp-6);
  text-align: center;
  background: var(--bg-raised);
}

.map-slot { margin-block: var(--sp-6); aspect-ratio: 16 / 9; display: grid; place-items: center; }

.integration-slot__label {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

.integration-slot__note { color: var(--text-muted); font-size: var(--fs-sm); max-width: 52ch; margin-inline: auto; }

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */

.compare { width: 100%; min-width: 46rem; font-family: var(--font-ui); font-size: var(--fs-xs); }
.compare th, .compare td { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; text-align: left; border-bottom: var(--hair) solid var(--line); vertical-align: middle; }

.compare thead th {
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: var(--rule-w, 1px) solid var(--line-accent);
  white-space: nowrap;
}

.compare tbody th { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; white-space: nowrap; }
.compare td { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.compare tbody tr:hover td, .compare tbody tr:hover th { background: var(--surface); }

/* ==========================================================================
   VEHICLE SPECIFICATIONS
   ========================================================================== */

.vehicle-specs { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-4); }

.vehicle-specs li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.vehicle-specs .icon-svg { width: 14px; height: 14px; color: var(--accent); }

/* ==========================================================================
   USE CASES
   ========================================================================== */

.usecases { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .usecases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .usecases { grid-template-columns: repeat(3, 1fr); } }

.usecase { position: relative; padding-top: var(--sp-5); border-top: var(--rule-w, 1px) solid var(--line-accent); }
.usecase__icon { width: 22px; height: 22px; color: var(--accent); margin-bottom: var(--sp-5); }
.usecase__title { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.usecase__text { color: var(--text-muted); font-size: var(--fs-sm); }

/* ==========================================================================
   VEHICLE SELECTOR
   ========================================================================== */

.selector { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, 1fr); margin-top: var(--sp-7); }
@media (min-width: 900px) { .selector { grid-template-columns: repeat(4, 1fr); } }

.selector__card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  overflow: hidden;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.selector__card:hover { border-color: var(--line-accent); }
.selector__card[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.selector__card .media { border: 0; border-radius: 0; border-bottom: var(--hair) solid var(--line); aspect-ratio: 16 / 9; }
.selector__body { padding: var(--sp-4); }
.selector__name { display: block; font-family: var(--font-display); font-size: var(--fs-h4); }

.selector__spec {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ==========================================================================
   ASSURANCES
   ========================================================================== */

.assurances { display: grid; gap: 0; grid-template-columns: 1fr; border-top: var(--rule-w, 1px) solid var(--line-accent); }
@media (min-width: 760px) { .assurances { grid-template-columns: repeat(3, 1fr); } }

.assurance { padding: var(--sp-6) var(--sp-6) var(--sp-6) 0; border-bottom: var(--hair) solid var(--line); }
@media (min-width: 760px) { .assurance + .assurance { border-left: var(--hair) solid var(--line); padding-left: var(--sp-6); } }

.assurance__title { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.assurance__text { color: var(--text-muted); font-size: var(--fs-sm); }

/* ==========================================================================
   WINE TOURS — the pages this whole theme was drawn for
   ========================================================================== */

.region-nav { position: sticky; top: 0; z-index: 80; border-bottom: var(--hair) solid var(--line); background: var(--bg); }

.region-nav__list { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); padding-block: var(--sp-4); scrollbar-width: none; }
@media (min-width: 700px) { .region-nav__list { flex-wrap: nowrap; gap: var(--sp-4); overflow-x: auto; } }
.region-nav__list::-webkit-scrollbar { display: none; }

.region-nav__list a {
  white-space: nowrap;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  border: var(--hair) solid transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.region-nav__list a:hover { color: var(--text); border-color: var(--line-accent); }
.region-nav__list a.is-active { background: var(--btn-fill); color: var(--btn-fill-text); border-color: var(--btn-fill); }

.modes { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .modes { grid-template-columns: repeat(2, 1fr); } }

.mode { padding: var(--sp-7) var(--sp-6); border: var(--hair) solid var(--line); border-radius: var(--radius); background: var(--surface); }

.mode__badge {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  border: var(--hair) solid var(--line-accent);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-5);
}

.mode__title { margin-bottom: var(--sp-4); }
.mode__text { color: var(--text-muted); margin-bottom: var(--sp-5); max-width: var(--measure); }
.mode__foot { margin-top: var(--sp-6); }

.region { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); border-top: var(--hair) solid var(--line); }
.region:first-of-type { border-top: 0; }

.region__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) var(--sp-5);
  margin-block: var(--sp-5);
  padding-block: var(--sp-5);
  border-block: var(--hair) solid var(--line);
}

.region__meta dt {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
}

.region__meta dd { font-family: var(--font-display); font-size: var(--fs-h4); }
.region__text { color: var(--text-muted); max-width: var(--measure); }
.region__cellars { margin-top: var(--sp-5); }

/* Fix for region text visibility on ivory backgrounds */
.surface-ivory .region__meta dt { color: var(--ink); }
.surface-ivory .region__text { color: var(--ink); }

.packages { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; margin-top: var(--sp-8); }
@media (min-width: 760px)  { .packages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .packages { grid-template-columns: repeat(3, 1fr); } }

.package {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.package--featured { border-color: var(--line-accent); border-width: 2px; }

.package__flag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--btn-fill);
  color: var(--btn-fill-text);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

.package__name { font-size: var(--fs-h3); margin-bottom: var(--sp-3); text-align: center; }

.package__meta {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-5);
  text-align: center;
}

.package__price {
  font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem);
  line-height: 1.25;
  color: var(--accent);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: var(--hair) solid var(--line);
  text-align: center;
}

.package__summary { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.package__cta { margin-top: auto; }

/* ==========================================================================
   GALLERY — a row of openings
   ========================================================================== */

.gallery { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery__cell { position: relative; }
.gallery__btn { display: block; width: 100%; padding: 0; cursor: zoom-in; border: 0; background: none; }
.gallery__btn .media { aspect-ratio: var(--plate-ratio-tall, 4 / 3); padding: var(--sp-3); }

@media (max-width: 900px) { .gallery__btn .media__hint { display: none; } }

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */

.doc-notice {
  padding: var(--sp-5);
  border: var(--hair) solid var(--line);
  border-left: var(--rule-w-lg, 3px) solid var(--mark);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-8);
}

.legal { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .legal { grid-template-columns: 16rem 1fr; gap: var(--sp-9); } }

.toc { position: relative; }
@media (min-width: 960px) { .toc { position: sticky; top: calc(var(--header-h-stuck) + 2.5rem); } .toc__mobile { display: none; } }

.toc__title {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: var(--sp-3);
  border-bottom: var(--rule-w, 1px) solid var(--line-accent);
  margin-bottom: var(--sp-4);
}

@media (max-width: 959px) { .toc > .toc__title, .toc > .toc__list { display: none; } }

.toc__list { display: grid; gap: 0.15rem; }
.toc__link { display: flex; gap: 0.7rem; padding: 0.4rem 0; font-size: var(--fs-xs); color: var(--text-muted); transition: color var(--dur-fast) var(--ease); }
.toc__link:hover { color: var(--accent); }
.toc__num { font-family: var(--font-display); font-style: italic; color: var(--text-dim); flex: 0 0 auto; }

.toc__mobile summary {
  cursor: pointer;
  padding: var(--sp-4) 0;
  border-block: var(--hair) solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.prose { max-width: 68ch; }
.prose__section + .prose__section { margin-top: var(--sp-8); padding-top: var(--sp-7); border-top: var(--hair) solid var(--line); }
.prose__heading { display: flex; gap: 1rem; align-items: baseline; font-size: var(--fs-h3); margin-bottom: var(--sp-5); }
.prose__num { font-family: var(--font-display); font-style: italic; color: var(--accent); flex: 0 0 auto; }
.prose p { color: var(--text-muted); }
.prose p + p { margin-top: 1.1em; }
.prose ul { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.prose ul li { position: relative; padding-left: 1.7rem; color: var(--text-muted); }

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: var(--mark-w, 8px);
  height: var(--mark-h, 8px);
  border-radius: var(--mark-radius, 0);
  background: var(--mark);
}
.prose ul + p,
.prose p + ul { margin-top: 1.1em; }

.prose__table-wrap { margin-top: var(--sp-4); overflow-x: auto; }
.prose__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small, 0.9rem);
}
.prose__table th,
.prose__table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: var(--hair) solid var(--line);
  color: var(--text-muted);
  white-space: nowrap;
}
.prose__table thead th {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 2px solid var(--line-accent);
}
.prose__table tbody tr:last-child td { border-bottom: none; }

/* ==========================================================================
   THANK YOU
   ========================================================================== */

.thankyou { text-align: center; }
.thankyou .cta-band__actions { justify-content: center; }
.thankyou .eyebrow { justify-content: center; }

.thankyou__seal {
  width: 5.25rem;
  height: 5.25rem;
  margin: 0 auto var(--sp-6);
  border: var(--rule-w, 1px) solid var(--line-accent);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  color: var(--accent);
  position: relative;
}

.thankyou__seal::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: var(--hair) solid var(--line-accent);
  border-radius: var(--radius-pill);
  opacity: 0.55;
}

.thankyou__seal .icon-svg { width: 26px; height: 26px; }

/* ==========================================================================
   PILLARS--4 — CORPORATE "WHAT'S INCLUDED" (and any other 4-up pillar set)
   The shared core's nth-child divider math is written for a 3-column grid
   and only partially corrected for the 4-column variant: `.pillars--4`
   still inherits the base `.pillars` 3n+1 rules and layers its own 3n+1 /
   4n+1 rules on top at the SAME breakpoint, which is only self-consistent
   for a set that happens to fill exact rows. Anything else mis-places a
   divider or leaves one missing — the client-visible symptom being a
   heading or description that reads as cut off against a stray rule, or a
   column too narrow to hold real copy. Reset and rebuild the dividers here
   from 4-column math only, and give the grid a wider column before it goes
   four-up so client copy this length never feels cramped.
   ========================================================================== */

@media (min-width: 1080px) {
  .pillars--4 > .pillar:nth-child(n) { border-left: 0; padding-left: 0; }
}

@media (min-width: 1080px) and (max-width: 1279px) {
  .pillars--4 { grid-template-columns: repeat(2, 1fr); }
  .pillars--4 > .pillar:nth-child(2n) { border-left: var(--hair) solid var(--line); padding-left: var(--sp-6); }
}

@media (min-width: 1280px) {
  .pillars--4 { grid-template-columns: repeat(4, 1fr); }
  .pillars--4 > .pillar:nth-child(4n+2),
  .pillars--4 > .pillar:nth-child(4n+3),
  .pillars--4 > .pillar:nth-child(4n+4) { border-left: var(--hair) solid var(--line); padding-left: var(--sp-6); }
}

.pillars--4 .pillar__title,
.pillars--4 .pillar__text { overflow-wrap: break-word; }

/* ==========================================================================
   FLEET CARDS — larger photography, stronger names
   .fleet-grid and Render::fleetCards() are shared markup (home-page preview
   and the Fleet page grid both call it), so this is scoped to the class
   rather than to a page. The shared core packs four across at wide screens,
   which is right for the eight-vehicle catalogue some other themes carry
   but crowds Vantage's four real classes down to thumbnails and leaves the
   vehicle name competing with specs at the same small size and weight.
   Two cards a row gives each vehicle a properly-sized photograph; the name
   is set larger and heavier so it reads before the specs do, wherever the
   card sits (the dark fleet-preview band on the home page, or the ivory
   grid on the Fleet page — .card's colour already adapts to both).
   ========================================================================== */

@media (min-width: 1040px) {
  .fleet-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); }
}

.fleet-grid .card { padding: var(--sp-6); }
.fleet-grid .card .media { aspect-ratio: 16 / 9; }

@media (min-width: 1040px) {
  .fleet-grid .card .media { aspect-ratio: 16 / 8; }
}

.fleet-grid .card__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-top: var(--sp-1);
}

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

@media (max-width: 640px) {
  :root { --fs-body: 1rem; --measure: 100%; }
  .section-head { margin-bottom: var(--sp-7); }
  .compare { min-width: 40rem; }
  /* The contour rings are drawn at a scale that only reads on a large sheet;
     on a phone they turn into stripes. */
  .section::before, .hero::before, .page-hero::before, .cta-band::before,
  .footer > .container::before { opacity: 0.03; }
}

/* Ensure all region content text is visible on ivory backgrounds */
.surface-ivory .region .eyebrow {
  color: var(--ink) !important;
}

.surface-ivory .region__meta dt {
  color: var(--ink) !important;
}

.surface-ivory .region__meta dd {
  color: var(--ink) !important;
}

.surface-ivory .region__text {
  color: var(--ink) !important;
}

.surface-ivory .region .link {
  color: var(--ink) !important;
  border-bottom-color: var(--bronze) !important;
}


/* Allow sticky positioning for region nav within the wine-regions section */
#wine-regions {
  overflow: visible;
}


/* ==========================================================================
   AREA TAGS, GROUPED (content doc 2026-10-18, section 8)
   Regional towns are shown under their own small heading so they are not
   read as local service areas. A group heading spans the whole row.
   ========================================================================== */
.coverage__list .coverage__group {
  grid-column: 1 / -1;
  padding: 1.6rem 0 0.4rem;
  border-bottom: var(--hair) solid var(--line);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--accent, var(--text-muted));
}
.coverage__list .coverage__group:first-child { padding-top: 0.9rem; }