/* ============================================================================
   Serramonte Subaru - Dealer City Pages
   (subaru-dealership-daly-city.htm / subaru-dealership-san-mateo.htm / burlingame ...)

   Design tokens and CMS-compat rules were copied from fairfieldsubaru-model-city.css
   (2026-09-09) but this is a separate file: the two retailers are maintained independently.

   Compared with the model-city pages, a dealer-city page is "one city x the whole lineup",
   so it adds .dealer-facts (contact bar) and .model-lineup (multi-model cards) and has no
   trim comparison table.

   Root scope is .dealer-city-page (not .model-page) so the two page types never bleed
   into each other on the same site.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. Neutralise the Dealer.com CMS wrappers so sections can go full-bleed
      (same overrides as serramontekia-model-city-pages.css)
   ------------------------------------------------------------------------ */
.container-max-md {
  max-width: 100% !important;
}

@media (min-width: 1200px) {
  .pl-xl-8,
  .px-xl-8 {
    padding-left: 0 !important;
  }

  .pr-xl-8,
  .px-xl-8 {
    padding-right: 0 !important;
  }
}

@media (min-width: 992px) {
  .pl-lg-6,
  .px-lg-6 {
    padding-left: 0 !important;
  }

  .pr-lg-6,
  .px-lg-6 {
    padding-right: 0 !important;
  }
}

@media (min-width: 768px) {
  .p-md-5 {
    padding: 0 !important;
  }
}

.p-4 {
  padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   2. Design tokens
      Taken from subaru.com and the dealer theme. --website-primary-theme-color is a
      variable the dealer site publishes; we consume it first and fall back to the measured
      #1971d4, so a theme refresh carries these pages along. The palette is declared here
      rather than relying on the client site defining the same names.
      Fonts deliberately follow the dealer theme (Arial / system stack); no brand webfont,
      which would break the OEM design system.
   ------------------------------------------------------------------------ */
.dealer-city-page {
  --subaru-blue: var(--website-primary-theme-color, #1971d4);
  --subaru-blue-dark: #051840;
  --hero-bg: #1d242d;            /* subaru.com model-page hero background, sampled rgb(29,36,45) */
  --hero-label: #acb2b9;         /* small labels and divider under the hero figures, also sampled from subaru.com */
  --ink: #111;
  --muted: #393937;
  --line: #e3e7ee;
  --paper: #ffffff;
  --white: #fff;
  --black: #051840;
  --gray-100: #fafafa;           /* 2026-09-30: match the light band colour on serramontesubaru.com (old #f8f5f7 leaned pink) */
  --gray-200: #e3e7ee;
  --gray-400: #b3b5b5;
  --gray-600: #393937;
  --radius-button: 0;            /* 2026-09-30: every button on the client site is square */
  --shell: min(1280px, calc(100vw - 64px));
  --font-stack:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-stack);
  line-height: 1.55;
}

.dealer-city-page,
.dealer-city-page * {
  box-sizing: border-box;
}

.dealer-city-page a {
  color: inherit;
}

.dealer-city-page img {
  max-width: 100%;
}

/* This used to be `.dealer-city-page section { padding: 0 }`. Its specificity (0,1,1) beats
   .dc-section (0,1,0), which zeroed the vertical padding of every block - no spacing between
   sections at all. Now it only neutralises sections that carry none of our classes. */
.dealer-city-page section:not([class]) {
  padding: 0;
}

/* The dealer theme underlines every <a> (with enough weight to beat our plain rules), which
   painted underlines across whole card / tile / badge links. Default to no underline inside
   our root, then re-enable it only for inline text links in running copy and on hover for
   the styled link lists. 2026-09-30 */
.dealer-city-page a,
.dealer-city-page a:hover,
.dealer-city-page a * {
  text-decoration: none !important;
}

.dealer-city-page :is(p, li, dd, td) > a:not([class]),
.dealer-city-page :is(p, li, dd, td) > a:not([class]):hover,
.dealer-city-page .faq-item__answer a,
.dealer-city-page .model-hero__specials-terms a,
.dealer-city-page .dc-section__intro a {
  text-decoration: underline !important;
}

.dealer-city-page .dc-feature__links a:hover,
.dealer-city-page .lineup-card__links a:hover,
.dealer-city-page .dc-card a:hover,
.dealer-city-page .dc-section__note a:hover,
.dealer-city-page .dc-callout__body a:hover,
.dealer-city-page .dc-reviews__points a:hover {
  text-decoration: underline !important;
}

.dealer-city-page .dc-shell {
  width: var(--shell);
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   3. HERO
   ------------------------------------------------------------------------ */
/* Layout and colours follow the subaru.com model-page hero: uniform #1D242D background, copy in
   the left third, vehicle filling the right, dots bottom-left. One offer per slide; the eight
   slides live in a native scroll container (mouse / trackpad / touch) with ::scroll-marker dots.
   No "pause" button like subaru.com: a native scroller has no pure-CSS autoplay to pause and
   CKEditor strips <script>, so a non-functional button would be worse than none. */
.dealer-city-page .model-hero {
  position: relative;
  background: var(--hero-bg);
  color: var(--white);
  padding: 0;
  overflow: hidden;
}

/* Page H1: the wordmark changes per slide, so it cannot be the H1. On desktop the H1 band is
   overlaid top-left (subaru.com leaves that space empty above the wordmark) and costs no height;
   __inner's padding-top reserves the room so the copy never collides. Below 860px the image sits
   on top and the band returns to normal flow. */
.model-hero__head {
  position: absolute;
  top: clamp(20px, 2.4vw, 32px);
  left: calc((100% - var(--shell)) / 2);
  width: var(--shell);
  z-index: 1;
  pointer-events: none;
}

.model-hero__head .model-hero__eyebrow {
  margin-bottom: 6px;
}

.model-hero__head .model-hero__title {
  margin: 0;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.2;
}

.model-hero__rail {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  anchor-name: --model-hero-rail;
}

.model-hero__rail:focus-visible {
  outline: 3px solid var(--subaru-blue);
  outline-offset: -3px;
}

.model-hero__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

.model-hero__inner {
  width: var(--shell);
  margin: 0 auto;
  /* the __head H1 band sits above, so this is a little shorter than the single-screen version */
  min-height: clamp(340px, 27vw, 420px);
  display: grid;
  grid-template-columns: minmax(250px, 33%) 1fr;
  align-items: center;
  gap: clamp(16px, 2.4vw, 36px);
  /* room above for the overlaid H1 band, extra room below for the dot row */
  padding-block: clamp(88px, 8vw, 112px) clamp(52px, 5vw, 62px);
}

/* Single-screen hero (no __rail, __inner is a direct child of the section; Burlingame since
   2026-09-24): the H1 is back in the copy column, so no top reserve and no dot row. */
.dealer-city-page .model-hero > .model-hero__inner {
  min-height: clamp(400px, 34vw, 540px);
  padding-block: clamp(26px, 2.8vw, 38px);
  /* copy column slightly wider than the carousel version: H1 + figure + terms + two buttons side by side */
  grid-template-columns: minmax(260px, 38%) 1fr;
}

/* secondary button on the dark ground: solid black muddies, use a white outline */
.dealer-city-page .model-hero .model-button--secondary,
.dealer-city-page .model-hero .model-button--secondary:hover {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  color: var(--white) !important;
}
.dealer-city-page .model-hero .model-button--secondary:hover {
  border-color: var(--white) !important;
}

.model-hero > .model-hero__inner .model-hero__title {
  font-size: clamp(26px, 3.2vw, 40px);
}

.model-hero__copy {
  min-width: 0;
}

.model-hero__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-400);
}

/* Model wordmark. The official one is a chrome PNG; gradient text approximates it. When an
   official wordmark image is available, swap the h1 for an <img> - no other rule changes. */
.model-hero__wordmark {
  margin: 0 0 clamp(14px, 2vw, 22px);
  font-size: clamp(18px, 2.1vw, 27px);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    #fff 0%,
    #c6ccd3 45%,
    #8e959d 55%,
    #eef1f4 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Text headline (a landing-page H1 like "Subaru Dealer near {City}", not a model name) uses
   normal heading styling; __wordmark is reserved for a single model name. */
.model-hero__title {
  margin: 0 0 clamp(12px, 2vw, 18px);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--white);
}

.model-hero__specials {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2.5vw, 30px);
  margin-bottom: clamp(14px, 2vw, 22px);
}

.model-hero__specials-offer + .model-hero__specials-offer {
  padding-left: clamp(16px, 2.5vw, 30px);
  border-left: 1px solid var(--hero-label);
}

.model-hero__specials-figure {
  display: block;
  font-size: clamp(44px, 5.6vw, 70px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.model-hero__specials-label {
  display: block;
  margin-top: 9px;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-label);
}

.model-hero__specials-terms {
  margin: 0 0 clamp(20px, 3vw, 28px);
  max-width: 36ch;
  font-size: clamp(15px, 1.3vw, 18px);
  color: rgba(255, 255, 255, 0.86);
}

.model-hero__specials-terms a {
  color: inherit;
  text-decoration: underline;
}

.model-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.model-hero__media {
  min-width: 0;
}

/* Official transparent PNGs carry padding; scaling up lets the body fill the right side and
   .model-hero's overflow:hidden safely clips the transparent overflow. */
/* Cap the vehicle image's layout height so the hero height is driven by it, not by the full
   column width (a 1054x556 image in an 823px column grows to 434px and pushes the hero past
   600px). subaru.com's hero is ~2.7:1 with the car about 70% of the height. */
.model-hero__media {
  display: flex;
  justify-content: center;
}

.model-hero__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(300px, 26vw, 374px);
  transform: scale(1.12) translateX(3%);
  transform-origin: center;
}

/* ---- Dots (Chrome / Edge 135+): bottom-left, aligned to the content edge; white = other slides, blue = current ---- */
@supports selector(::scroll-marker) {
  .model-hero__rail {
    scrollbar-width: none;
    scroll-marker-group: after;
  }

  .model-hero__rail::-webkit-scrollbar { display: none; }

  .model-hero__rail::scroll-marker-group {
    position: absolute;
    left: calc((100% - var(--shell)) / 2);
    bottom: clamp(22px, 2.4vw, 30px);
    display: flex;
    gap: 14px;
    padding: 6px 0;
  }

  .model-hero__slide::scroll-marker {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--white);
    cursor: pointer;
  }

  .model-hero__slide::scroll-marker:hover { background: var(--hero-label); }

  .model-hero__slide::scroll-marker:target-current {
    background: var(--subaru-blue);
  }

  .model-hero__slide::scroll-marker:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
  }
}

/* ---- Safari / Firefox: no ::scroll-marker, keep a thin scrollbar as the "scrollable" hint ---- */
@supports not selector(::scroll-marker) {
  .model-hero__rail {
    scrollbar-width: thin;
    scrollbar-color: var(--hero-label) transparent;
  }
}

/* ---------------------------------------------------------------------------
   4. Dealer facts bar (dealer-city only)
      The location dot is a ::before, not an empty <span>: CKEditor 4 (Apollo) strips
      empty inline elements.
   ------------------------------------------------------------------------ */
.dealer-facts {
  background: var(--subaru-blue-dark);
  color: rgba(255, 255, 255, 0.88);
  font-size: 14.5px;
}

.dealer-facts__inner {
  width: var(--shell);
  margin: 0 auto;
  padding: 14px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
}

.dealer-facts__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.dealer-facts__item--address::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border: 3px solid var(--white);
  border-radius: 50%;
}

.dealer-facts strong {
  color: var(--white);
  font-weight: 600;
}

.dealer-facts a {
  color: var(--white);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   5. Section headings
   ------------------------------------------------------------------------ */
/* Section rhythm. The .dealer-city-page prefix raises specificity to (0,2,0), beating both the
   section reset above and the dealer theme. Gap between adjacent blocks = 2 x padding-block. */
.dealer-city-page .dc-section {
  padding-block: clamp(44px, 5.2vw, 76px);
  padding-inline: 0;
}

/* The CTA band and the footer small print are narrow closers and skip the full rhythm. */
.dealer-city-page .dc-section.dc-cta {
  padding-block: clamp(40px, 4.4vw, 60px);
}

.dealer-city-page .model-note {
  padding-block: clamp(20px, 2.4vw, 30px);
}

.dc-section--tint {
  background: var(--gray-100);
}

.dc-section__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--subaru-blue);
}

.dc-section__title {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.15;
}

.dc-section__intro {
  margin: 0 0 clamp(22px, 3vw, 32px);
  max-width: 68ch;
  color: var(--muted);
  font-size: clamp(15px, 1.4vw, 17px);
}

/* ---------------------------------------------------------------------------
   6. Offer cards
      .special-card__details uses dt/dd directly as grid children - no <div> wrappers:
      CKEditor 4 rejects <div> inside <dl> and destructively rewrites the block.
   ------------------------------------------------------------------------ */
.specials-grid {
  display: grid;
  /* four per row (eight offers = two rows): 1280 shell -> 4 columns, 1024 -> 3, tablet 2, phone 1 */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

/* ---- Offer card (final 2026-09-24, modelled on subaru.com's lineup card) ----
   The scene image (SOA scene7 604_background-*, inline background-image from the HTML) sits only
   behind the vehicle at the top and fades to white; the car is centred over the fade and the copy
   is centred on white below. Scene images use wid=1200 (the $300p$ preset is only 300px). */
.dealer-city-page .special-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  container-type: inline-size;
}

.special-card__poster {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: #dfe3e8;          /* colour shown until the image loads */
  background-position: center 28%;    /* horizon in the top third */
  background-size: cover;
  background-repeat: no-repeat;
}

/* fade to white; pure white by the wheels */
.special-card__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.55) 58%,
    rgba(255, 255, 255, 0.92) 80%,
    #fff 100%);
  pointer-events: none;
}

.dealer-city-page .special-card__car {
  position: relative;
  z-index: 1;
  width: 88%;
  height: auto;
  margin-bottom: -2%;
  filter: drop-shadow(0 16px 14px rgba(0, 0, 0, 0.22));
}

.special-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 6px 20px 20px;
}

.special-card__copy {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.special-card__year {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.dealer-city-page .special-card__vehicle {
  margin: 0;
  font-size: clamp(28px, 9cqi, 38px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.special-card__trim {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
}

/* "Hot Deal!": the reference uses a red script face. No webfont (see section 2), so bold italic approximates it */
.dealer-city-page .trim-tag {
  display: block;
  margin: 8px 0 0;
  padding: 0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  background: none;
}

.dealer-city-page .trim-tag--hot { color: #c8102e; }
.dealer-city-page .trim-tag--holiday { color: var(--subaru-blue); }

.dealer-city-page .special-price {
  display: block;
  margin: 12px 0 0;
}

.special-price__lead {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
  color: var(--muted);
}

.dealer-city-page .special-price__figure {
  font-size: clamp(30px, 8cqi, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.dealer-city-page .special-price__unit {
  margin-left: 4px;
  font-size: 14px;
  color: var(--muted);
}

.special-card__due {
  margin: 12px 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.special-card__details {
  margin: 0 0 16px;
  display: grid;
  /* 2026-10-01: four rows (residual, stock, VIN, mileage) as label left / value right at every width */
  grid-template-columns: auto 1fr;
  grid-auto-flow: row;
  column-gap: 14px;
  row-gap: 4px;
  font-size: 12.5px;
}

.special-card__details dt {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
}

.special-card__details dd {
  margin: 0;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;                /* stock numbers and VINs never split at the hyphen */
}

.special-card__actions {
  margin: auto 0 0;
}

/* card narrower than 340px (four columns): the three-column Stock/VIN row does not fit, switch to label / value */
@container (max-width: 340px) {
  .special-card__details {
    grid-template-columns: auto 1fr;
    grid-auto-flow: row;
    column-gap: 14px;
    text-align: left;
  }
  .special-card__details dd { text-align: right; }
}

/* ---------------------------------------------------------------------------
   8. why-us / route / FAQ
   ------------------------------------------------------------------------ */
.why-us__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(24px, 4vw, 44px);
}

.why-card__title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 600;
}

.why-card__body {
  margin: 0 0 14px;
  color: var(--muted);
}

.why-card__list {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--muted);
}

.why-card__list li {
  margin-bottom: 7px;
}

.route-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(24px, 4vw, 44px);
}

.route-points {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--muted);
}

.route-points li {
  margin-bottom: 8px;
}

.route-points strong {
  color: var(--ink);
}

.model-faq__list {
  max-width: 80ch;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 400;
  color: var(--subaru-blue);
}

.faq-item[open] .faq-item__question::after {
  content: "\2013";
}

.faq-item__answer {
  padding: 0 0 18px;
  color: var(--muted);
}

.faq-item__answer p {
  margin: 0 0 10px;
}

.faq-item__answer p:last-child {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   9. Disclaimer
   ------------------------------------------------------------------------ */
.model-note {
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 12px;
  line-height: 1.6;
}

.model-note__inner {
  width: var(--shell);
  margin: 0 auto;
  padding: 26px 0;
}

.model-note p {
  margin: 0 0 10px;
}

.model-note p:last-child {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   10. Buttons
   ------------------------------------------------------------------------ */
.model-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-decoration: none;
}

.model-button--primary {
  background: var(--subaru-blue);
  color: var(--white);
}

.model-button--secondary {
  background: var(--ink);
  color: var(--white);
}

.model-button--outline {
  background: transparent;
  border-color: var(--ink);       /* client-site outline button: thin dark border + dark text */
  color: var(--ink);
}

.model-button:focus-visible {
  outline: 3px solid var(--subaru-blue);
  outline-offset: 3px;
}

/* Button colour lock. !important is deliberate: these pages are pasted into the dealer CMS,
   whose theme stylesheet loads after ours, so equal-weight rules lose on cascade order. This is
   the only reliable way to hold the colours. :focus-visible is left alone - keyboard focus, not hover. */
.dealer-city-page .model-button,
.dealer-city-page .special-card__button,
.dealer-city-page .model-button:hover,
.dealer-city-page .special-card__button:hover {
  text-decoration: none !important;
  transition: none !important;
  transform: none !important;
}

.dealer-city-page .model-button--primary,
.dealer-city-page .special-card__button,
.dealer-city-page .model-button--primary:hover,
.dealer-city-page .special-card__button:hover {
  background: var(--subaru-blue) !important;
  color: #ffffff !important;
}

.dealer-city-page .model-button--secondary,
.dealer-city-page .model-button--secondary:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #ffffff !important;
}

.dealer-city-page .model-button--outline,
.dealer-city-page .model-button--outline:hover {
  background: transparent !important;
  color: var(--ink) !important;
}

/* ---------------------------------------------------------------------------
   11. Responsive (breakpoints aligned with fairfieldsubaru-model-city.css)
   ------------------------------------------------------------------------ */
/* Around 1280px the copy column is just narrow enough for the terms to wrap one more line and the
   hero grows 50px taller than at 1440. Three extra percent on the copy column wins that line back
   and keeps the wide-and-short banner ratio. */
@media (max-width: 1280px) and (min-width: 1041px) {
  .model-hero__inner {
    grid-template-columns: minmax(250px, 36%) 1fr;
  }
}

@media (max-width: 1040px) {
  .dealer-city-page {
    --shell: calc(100vw - 40px);
  }

  /* still two columns; the copy column gives up a little width to the vehicle */
  .model-hero__inner {
    grid-template-columns: minmax(230px, 38%) 1fr;
    min-height: clamp(340px, 34vw, 420px);
  }

  .model-hero__media img {
    transform: scale(1.08) translateX(2%);
  }

  .model-hero__specials-terms {
    max-width: none;
  }
}

/* only here is the copy column too narrow for two figures side by side, so stack image over copy */
@media (max-width: 860px) {
  .model-hero__head {
    position: static;
    margin: 0 auto;
    padding-top: 22px;
  }

  .model-hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: clamp(18px, 4vw, 28px);
    padding-block: 16px 60px;
  }

  .model-hero__media {
    order: -1;
  }

  .model-hero__media img {
    transform: none;
  }
}

@media (max-width: 680px) {
  .dealer-city-page {
    --shell: calc(100vw - 32px);
  }

  .model-hero__actions .model-button,
  .special-card__actions .model-button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .dealer-city-page {
    --shell: calc(100vw - 24px);
  }

  .model-hero__specials {
    gap: 14px;
  }

  .model-hero__specials-offer + .model-hero__specials-offer {
    padding-left: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dealer-city-page * {
    transition: none !important;
    animation: none !important;
  }
}

/* ===========================================================================
   12. Landing-page blocks (added 2026-09-18)
   Following huntingtonbeachford-dealer-city.css / orange-county.html: a city page is not just a
   directions page but a full-funnel long page - offers > lineup > map > why us > service >
   financing > FAQ > CTA. These are the components sections 1-11 do not have.
   ======================================================================== */

/* ---- Credential badge row ---- */
.dc-trust {
  margin: 0 0 clamp(20px, 3vw, 28px);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.dc-trust li {
  padding: 7px 14px;
  border: 1px solid currentColor;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Dark band (service section) ---- */
.dc-section--navy {
  background: var(--black);
  color: var(--white);
}

.dc-section--navy .dc-section__eyebrow { color: #9cc3ff; }
.dc-section--navy .dc-section__intro,
.dc-section--navy .why-card__body,
.dc-section--navy .why-card__list { color: rgba(255, 255, 255, 0.84); }
.dc-section--navy .why-card__list strong,
.dc-section--navy .why-card__title { color: var(--white); }

/* ---- Photo band (Getting Here) ----
   background-image is set inline so a different city needs no stylesheet change.
   iOS ignores background-attachment:fixed, so phones fall back to normal scrolling. */
.dc-photoband {
  position: relative;
  background-color: var(--black);
  background-position: center;
  background-size: cover;
  color: var(--white);
}

.dc-photoband::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 24, 64, 0.94) 0%, rgba(5, 24, 64, 0.78) 55%, rgba(5, 24, 64, 0.5) 100%);
}

.dc-photoband > * { position: relative; }
.dc-photoband .dc-section__eyebrow { color: #9cc3ff; }
.dc-photoband .dc-section__intro,
.dc-photoband .why-card__body,
.dc-photoband .route-points { color: rgba(255, 255, 255, 0.86); }
.dc-photoband .route-points strong { color: var(--white); }

.dc-photoband .why-card {
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
}

/* ---- Map ---- */
.dc-map {
  margin-top: clamp(20px, 3vw, 28px);
  border-radius: 6px;
  overflow: hidden;
  background: var(--gray-200);
}

.dc-map iframe {
  display: block;
  width: 100%;
  height: clamp(260px, 34vw, 400px);
  border: 0;
}

.dc-map__cta {
  padding: 14px;
  background: var(--paper);
  text-align: center;
}

/* ---- Photo tiles (Why us) ----
   Descriptions stay in the DOM (crawlable) and appear on hover / keyboard focus. */
.dc-tiles {
  display: grid;
  /* fixed two per row (changed 2026-09-24); auto-fill packed three into a 1280 shell */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

@media (max-width: 640px) {
  .dc-tiles { grid-template-columns: 1fr; }
}

/* The .dealer-city-page prefix raises specificity: the tile is an <a>, and section 2's
   .dealer-city-page a{color:inherit} (0,1,1) would otherwise beat .dc-tile (0,1,0) and knock the
   white title back to --ink, invisible on navy. Verified 2026-09-18. */
.dealer-city-page .dc-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--black);
  color: var(--white);
  text-decoration: none;
}

/* height:auto is required - the presentational hint from <img height="556"> beats aspect-ratio and
   would otherwise produce a 556px-tall column. Verified 2026-09-18. */
.dc-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.dc-tile:hover img,
.dc-tile:focus-visible img {
  transform: scale(1.04);
}

.dc-tile__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--black);
}

.dc-tile__h {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.dc-tile__go {
  flex: 0 0 auto;
  color: #9cc3ff;
  transition: transform 0.25s ease;
}

.dc-tile:hover .dc-tile__go { transform: translateX(4px); }

/* Description: hidden by default; on hover / keyboard focus a translucent navy overlay covers the
   image area and the text floats on it (no longer expands below). The overlay covers only the
   image; the title bar stays put. */
.dc-tile__desc {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: 22px 20px;
  /* image height = width x 9/16; leave room for the title bar via bottom */
  bottom: calc(1.3em * 1 + 28px);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--white);
  background: linear-gradient(180deg, rgba(5, 24, 64, 0.55) 0%, rgba(5, 24, 64, 0.88) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* The title may wrap to two lines and the overlay edge would not line up with the bar, so the
   overlay simply runs to the bottom: the bar is an opaque z-index:2 layer and covers it. */
.dc-tile__desc { bottom: 0; padding-bottom: calc(1.3em + 28px + 26px); }

.dc-tile:hover .dc-tile__desc,
.dc-tile:focus-visible .dc-tile__desc {
  opacity: 1;
}

/* touch devices have no hover: skip the overlay, show the description under the title bar */
@media (hover: none) {
  .dc-tile__desc {
    position: static;
    inset: auto;
    display: block;
    padding: 0 18px 16px;
    background: none;
    opacity: 1;
    color: rgba(255, 255, 255, 0.85);
  }
  .dc-tile:hover img { transform: none; }
}

/* ---- Service icon list ---- */
.dc-svc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 9px 20px;
}

.dc-svc__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14.5px;
}

.dc-svc__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: #9cc3ff;
}

/* ---- Generic card grid (financing) ---- */
.dc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  gap: 18px;
}

.dc-card {
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.dc-card__title {
  margin: 0 0 8px;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.3;
}

.dc-card p { margin: 0 0 10px; color: var(--muted); font-size: 14.5px; }
.dc-card p:last-child { margin: 0; }
.dc-card a { color: var(--subaru-blue); font-weight: 600; text-decoration: none; }
.dc-card a:hover { text-decoration: underline; }

/* ---- Closing CTA ---- */
.dc-cta {
  background: var(--subaru-blue);
  color: var(--white);
  text-align: center;
}

.dc-cta .dc-section__eyebrow { color: rgba(255, 255, 255, 0.82); }
.dc-cta .dc-section__title { color: var(--white); }
.dc-cta .dc-section__intro {
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.9);
}

.dc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.dealer-city-page .dc-cta .model-button--primary,
.dealer-city-page .dc-cta .model-button--primary:hover {
  background: var(--white) !important;
  color: var(--black) !important;
}

.dealer-city-page .dc-cta .model-button--outline,
.dealer-city-page .dc-cta .model-button--outline:hover {
  background: transparent !important;
  border-color: var(--white) !important;
  color: var(--white) !important;
}

@media (max-width: 680px) {
  .dc-cta__actions .model-button { width: 100%; }
  .dc-svc__list { grid-template-columns: 1fr; }
}

/* Section 13 (hero specials rail) was removed: the hero went back to a single offer and the eight
   specials moved to .specials-grid after the intro. Numbering kept as-is. 2026-09-18 */

/* ---------------------------------------------------------------------------
   14. Intro two-column (copy + map), 2026-09-18
   The map moved here from Getting Here: one map per page, Getting Here keeps the route list.
   ------------------------------------------------------------------------ */
.dc-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 44px);
}

.dc-intro__copy { min-width: 0; }
.dc-intro__map  { min-width: 0; }

/* in two columns the map has its own column and needs no top spacing */
.dc-intro__map .dc-map { margin-top: 0; }

.dc-intro__map .dc-map iframe {
  height: clamp(280px, 30vw, 360px);
}

@media (max-width: 900px) {
  .dc-intro { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   15. Lineup display (reworked 2026-09-18)
   Modelled on the subaru.com lineup carousel: white, no frame, model name above the image,
   large centred image, generous whitespace. The old card style (dark image ground + border +
   name below) was removed.

   The prev / next arrows in the screenshot are subaru.com JS. Pure CSS cannot express
   "relative to the current position", so fake arrows could only jump to the first or last
   item; six models fit an auto-wrapping grid anyway, so no arrows here.
   ------------------------------------------------------------------------ */
.model-lineup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 36px) clamp(16px, 2.5vw, 28px);
}

.lineup-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: center;
  background: transparent;
  border: 0;
}

.lineup-card__name {
  margin: 0 0 6px;
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.lineup-card__media {
  padding: 0;
  background: transparent;
}

.lineup-card__media img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

.lineup-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 10px 6px 0;
}

.lineup-card__lede {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.lineup-card__trims {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gray-600);
}

.lineup-card__trims strong {
  color: var(--ink);
  font-weight: 700;
}

.lineup-card__links {
  margin: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  font-size: 14.5px;
}

.dealer-city-page .lineup-card__links a {
  color: var(--subaru-blue);
  font-weight: 600;
  text-decoration: none;
}

.dealer-city-page .lineup-card__links a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   16. Feature cards (image on top, copy below, H2 title), 2026-09-18
   Modelled on the subaru.com homepage cards ("Love Promise Retailer of the Year" /
   "Limited-time offers"): white card, landscape image on top, bold title + copy + blue text
   link below. Replaces the old text-only .why-card / .route-section__copy columns.

   __media is optional - a card without a suitable photo yet can omit it and the layout holds.
   ------------------------------------------------------------------------ */
.dc-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(22px, 3vw, 34px);
}

.dc-feature {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.dc-feature__media {
  background: var(--gray-100);
}

.dc-feature__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.dc-feature__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 32px) clamp(22px, 2.6vw, 30px);
}

.dc-feature__title {
  margin: 0 0 14px;
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 700;
  line-height: 1.22;
  color: var(--ink);
}

.dc-feature__body p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.dc-feature__list {
  margin: 0 0 14px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.dc-feature__list li { margin-bottom: 6px; }

.dc-feature__links {
  margin: auto 0 0;
  padding-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 15px;
}

.dealer-city-page .dc-feature__links a {
  color: var(--subaru-blue);
  font-weight: 600;
  text-decoration: none;
}

.dealer-city-page .dc-feature__links a:hover { text-decoration: underline; }

/* feature cards inside the dark band (service) are inverted */
.dc-section--navy .dc-feature {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}

.dc-section--navy .dc-feature__title { color: var(--white); }
.dc-section--navy .dc-feature__body p,
.dc-section--navy .dc-feature__list { color: rgba(255, 255, 255, 0.84); }
.dc-section--navy .dc-feature__media { background: rgba(255, 255, 255, 0.1); }

/* ---------------------------------------------------------------------------
   17. Lineup carousel (native scrolling, rewritten 2026-09-24)

   The previous version used hidden radios + <label for> driving translateX. Buttons worked,
   but the track was a transform, so mouse, trackpad and touch could not drag it - exactly what
   the user reported. It is now a real scroll container: overflow-x:auto, so swipe, shift+wheel,
   touch drag and arrow keys all work in every browser.

   Arrows use CSS Overflow 5 ::scroll-button(), dots use ::scroll-marker: pure CSS, no JS
   (CKEditor 4 strips <script>), and the browser manages :disabled at the ends and
   :target-current for the active item. Chrome / Edge 135+ support them; Safari / Firefox do
   not yet and fall back to a thin scrollbar + direct swiping (which is why the scrollbar is
   shown when @supports fails).

   Not anchor links: tested <a href="#page-2"> - no horizontal movement in any of the three
   scroll-snap modes, and the anchor also realigned the whole page (a 480px jump).
   ------------------------------------------------------------------------ */
.lineup-rail {
  position: relative;
  /* room for the arrows on both sides; collapses to 0 when the window is too narrow */
  padding-inline: clamp(0px, 3vw, 52px);
}

.lineup-rail__viewport {
  display: flex;
  gap: var(--lineup-gap, clamp(16px, 2.5vw, 28px));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  anchor-name: --lineup-rail;
}

.lineup-rail__viewport:focus-visible {
  outline: 3px solid var(--subaru-blue);
  outline-offset: 4px;
}

/* the original track / page wrappers stay (HTML unchanged) but no longer take part in layout;
   every .lineup-card becomes a direct flex item of the scroll container */
.lineup-rail__track,
.lineup-page {
  display: contents;
}

.lineup-rail .lineup-card {
  flex: 0 0 calc((100% - 2 * var(--lineup-gap, clamp(16px, 2.5vw, 28px))) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

/* ---- Arrows (Chrome / Edge 135+) ---- */
@supports selector(::scroll-button(*)) {
  .lineup-rail__viewport {
    scrollbar-width: none;
    /* dot row below the track */
    scroll-marker-group: after;
  }

  .lineup-rail__viewport::-webkit-scrollbar { display: none; }

  .lineup-rail__viewport::scroll-button(*) {
    position: fixed;
    position-anchor: --lineup-rail;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--gray-400);
    border-radius: 50%;
    background: var(--paper);
    color: var(--gray-600);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  .lineup-rail__viewport::scroll-button(*):hover {
    border-color: var(--ink);
    color: var(--ink);
  }

  /* the browser sets :disabled at the start / end; no state to manage */
  .lineup-rail__viewport::scroll-button(*):disabled {
    opacity: 0.32;
    cursor: default;
  }

  /* the second part of content is the alternative text for assistive tech */
  .lineup-rail__viewport::scroll-button(left) {
    content: "\2039" / "Previous models";
    position-area: center left;
  }

  .lineup-rail__viewport::scroll-button(right) {
    content: "\203A" / "Next models";
    position-area: center right;
  }

  /* ---- Dots ---- */
  .lineup-rail__viewport::scroll-marker-group {
    display: flex;
    justify-content: center;
    gap: 9px;
    padding-top: 18px;
  }

  .lineup-rail .lineup-card::scroll-marker {
    content: "";
    width: 9px;
    height: 9px;
    border: 1px solid var(--gray-400);
    border-radius: 50%;
    cursor: pointer;
  }

  .lineup-rail .lineup-card::scroll-marker:target-current {
    background: var(--subaru-blue);
    border-color: var(--subaru-blue);
  }
}

/* ---- Safari / Firefox: no native arrows, keep the scrollbar as the swipe hint ---- */
@supports not selector(::scroll-button(*)) {
  .lineup-rail { padding-inline: 0; }

  .lineup-rail__viewport {
    padding-bottom: 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-400) transparent;
  }
}

@media (max-width: 900px) {
  /* phones: show one card and a bit, hide the arrows, just swipe */
  .lineup-rail { padding-inline: 0; }
  .lineup-rail .lineup-card {
    flex: 0 0 min(78%, 320px);
    scroll-snap-align: center;
  }
  .lineup-rail__viewport::scroll-button(*) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lineup-rail__viewport { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   18. Split band (.dc-split, 2026-09-24)
   Dark copy panel + full-bleed photo, each half of the desktop width flush to the viewport
   edge, so this section does not use .dc-section (no outer padding); padding lives on
   .dc-split__copy. The photo is an <img>, not a background-image: the right half should carry
   alt text and loading="lazy" only works on <img>. Phones stack, photo on top.
   --------------------------------------------------------------------------- */
.dc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--black);
  color: var(--white);
}

.dc-split__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5.5vw, 96px) clamp(24px, 4.5vw, 84px);
}

.dc-split__media {
  position: relative;
  min-height: 320px;
}

.dc-split__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dc-split .dc-section__eyebrow { color: rgba(255, 255, 255, 0.72); }

.dc-split__title {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.dc-split__body {
  margin: 0 0 20px;
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
}

/* service list: two columns when the panel is wide enough, so one long column does not stretch the band */
.dc-split__list {
  margin: 0 0 22px;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.6;
}

.dc-split__list li { margin-bottom: 6px; }

@media (min-width: 1100px) {
  .dc-split__list {
    columns: 2;
    column-gap: 34px;
  }
  .dc-split__list li { break-inside: avoid; }
}

.dc-split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* buttons on the dark ground: primary becomes white with navy text, outline gets a white border */
.dealer-city-page .dc-split .model-button--primary,
.dealer-city-page .dc-split .model-button--primary:hover {
  background: var(--white) !important;
  border-color: var(--white) !important;
  color: var(--subaru-blue-dark) !important;
}

.dealer-city-page .dc-split .model-button--outline,
.dealer-city-page .dc-split .model-button--outline:hover {
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: var(--white) !important;
}

.dc-split a:not(.model-button) { color: #7cb8ff; font-weight: 600; }

@media (max-width: 900px) {
  .dc-split { grid-template-columns: 1fr; }
  .dc-split__media { order: -1; min-height: 240px; }
}

/* ---------------------------------------------------------------------------
   19. Centred section-closing button row (.dc-section__actions--center, 2026-09-24)
   --------------------------------------------------------------------------- */
.dc-section__actions--center {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: clamp(26px, 3.4vw, 40px);
}

/* ---------------------------------------------------------------------------
   20. Boxed FAQ accordion (.model-faq__list--boxed, 2026-09-24)
   subaru.com's treatment: one outer frame, hairline between questions, regular-weight
   question, wide side padding, thin blue plus on the right. Modifier only; pages without
   it keep the old look.
   --------------------------------------------------------------------------- */
.model-faq__list--boxed {
  max-width: 900px;
  margin-inline: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.model-faq__list--boxed .faq-item {
  border-bottom: 1px solid var(--line);
}

.model-faq__list--boxed .faq-item:last-child {
  border-bottom: 0;
}

.model-faq__list--boxed .faq-item__question {
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 3vw, 40px);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 400;
  line-height: 1.4;
  align-items: flex-start;
}

.model-faq__list--boxed .faq-item__question::after {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.model-faq__list--boxed .faq-item__answer {
  padding: 0 clamp(22px, 3vw, 40px) clamp(20px, 2.4vw, 28px);
}

/* ---------------------------------------------------------------------------
   21. Intro map stretched to column height (.dc-intro--tall-map, 2026-09-24)
   Burlingame's left column gained a route list; a fixed-height map would leave a gap on the
   right, so this modifier lets the map column stretch with the copy and the iframe fill the
   remaining height. Single column on phones returns to the normal height.
   --------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .dc-intro--tall-map { align-items: stretch; }

  .dc-intro--tall-map .dc-intro__map { display: flex; }

  .dc-intro--tall-map .dc-map {
    display: flex;
    width: 100%;
    flex-direction: column;
  }

  .dc-intro--tall-map .dc-map iframe {
    flex: 1 1 auto;
    height: auto;
    min-height: clamp(320px, 32vw, 460px);
  }
}

/* ---------------------------------------------------------------------------
   20. "Reasons" feature grid (.dc-reasons, 2026-09-24)
   After Fairfield Subaru davis-subaru.html .feature-grid: equal-width cells with no gap,
   hairline grid lines, tall cards showing only a large title and a round chevron badge
   bottom-left; on hover / keyboard focus a blue gradient wipes up from the bottom, the title
   turns white and lifts, the description fades in and the badge hides. When nothing in the
   grid is hovered the first card is active so the row is never blank. Touch devices show the
   descriptions inline with no animation. Burlingame's financing section uses it (4 cards ->
   4 desktop columns).
   --------------------------------------------------------------------------- */
.dc-reasons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--gray-200);
  border-left: 1px solid var(--gray-200);
}

.dealer-city-page .dc-reason {
  position: relative;
  isolation: isolate;                 /* ::before uses z-index:-1, so the card needs its own stacking context */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;        /* 2026-10-01: titles line up across the row; centering moved them by paragraph length */
  min-height: clamp(360px, 30vw, 460px);
  padding: clamp(34px, 3.4vw, 56px) clamp(22px, 2.4vw, 36px) clamp(96px, 8vw, 118px);
  background: var(--paper);
  border-right: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  overflow: hidden;
  color: var(--ink);
}

/* blue gradient wiping up from the bottom */
.dc-reason::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--subaru-blue) 0%, var(--subaru-blue-dark) 100%);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.48s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dealer-city-page .dc-reason__title {
  margin: 0 0 16px;
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color 0.28s ease, transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dc-reason p {
  margin: 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--white);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.28s ease 0.08s, transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s;
}

/* round chevron badge bottom-left: link text stays for screen readers, visually only the arrow */
/* the .dc-reason prefix raises specificity to (0,2,0): the badge is also a <p> and would otherwise pick up .dc-reason p opacity:0 */
.dc-reason .dc-reason__badge {
  position: absolute;
  left: clamp(22px, 2.4vw, 36px);
  bottom: clamp(30px, 2.8vw, 40px);
  margin: 0;
  opacity: 1;
  transform: none;
  transition: opacity 0.22s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.22s ease;
}

.dealer-city-page .dc-reason__badge a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  font-size: 0;
  text-decoration: none;
}

/* 2026-10-01: the round arrow is a bare <a> inside a <p>, so the inline-link underline rule hit it */
.dealer-city-page .dc-reason .dc-reason__badge a { text-decoration: none !important; }

.dc-reason__badge a::before {
  content: "\203A";
  font-size: 38px;
  line-height: 1;
  transform: translateY(-2px);
}

/* ---- Active state: hover / focus, or the first card when nothing in the grid is hovered ---- */
.dc-reason:hover::before,
.dc-reason:focus-within::before,
.dc-reasons:not(:hover):not(:focus-within) .dc-reason:first-child::before {
  transform: scaleY(1);
}

.dealer-city-page .dc-reason:hover .dc-reason__title,
.dealer-city-page .dc-reason:focus-within .dc-reason__title,
.dealer-city-page .dc-reasons:not(:hover):not(:focus-within) .dc-reason:first-child .dc-reason__title {
  color: var(--white);
  transform: translateY(-8px);
}

.dc-reason:hover p,
.dc-reason:focus-within p,
.dc-reasons:not(:hover):not(:focus-within) .dc-reason:first-child p {
  opacity: 1;
  transform: translateY(0);
}

.dc-reason:hover .dc-reason__badge,
.dc-reason:focus-within .dc-reason__badge,
.dc-reasons:not(:hover):not(:focus-within) .dc-reason:first-child .dc-reason__badge {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}

/* whole card clickable: a transparent link covering the card (aria-hidden; screen readers use the badge link) */
.dc-reason__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-size: 0;
}

@media (max-width: 1100px) {
  .dc-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .dc-reasons { grid-template-columns: 1fr; }
  .dealer-city-page .dc-reason { min-height: 0; padding-bottom: 34px; }
}

/* touch devices: description always visible, no wipe or motion */
@media (hover: none) {
  .dc-reason p { opacity: 1; transform: none; color: var(--muted); }
  .dealer-city-page .dc-reason { padding-bottom: clamp(34px, 3.4vw, 56px); }
  .dc-reason .dc-reason__badge { position: static; margin-top: 18px; }
  .dc-reason:hover::before,
  .dc-reasons:not(:hover):not(:focus-within) .dc-reason:first-child::before { transform: scaleY(0); }
  .dealer-city-page .dc-reasons:not(:hover):not(:focus-within) .dc-reason:first-child .dc-reason__title { color: var(--ink); transform: none; }
  .dc-reasons:not(:hover):not(:focus-within) .dc-reason:first-child .dc-reason__badge { opacity: 1; visibility: visible; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-reason::before, .dc-reason__title, .dc-reason p, .dc-reason__badge { transition: none; }
}

/* ---------------------------------------------------------------------------
   21. Google reviews section (.dc-reviews, 2026-09-30)
   Copy on the left, a "Google reviews badge" card on the right. Pure CSS badge: stars are
   filled by a gradient driven by --rating; no third-party embed / script (CKEditor strips
   them). The figures are a snapshot - update 4.6 / 4,994 in the HTML and --rating here
   each season.
   --------------------------------------------------------------------------- */
.dc-reviews {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.dc-reviews__copy .dc-section__intro { margin-bottom: 18px; }

.dc-reviews__points {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 15px;
  color: var(--muted);
}

.dc-reviews__points li {
  padding-left: 26px;
  position: relative;
}

.dc-reviews__points li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--subaru-blue);
}

/* ---- Badge card ---- */
.dealer-city-page .g-badge {
  --rating: 4.6;                 /* star rating: change this together with the score in the HTML */
  display: block;
  padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 30px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(5, 24, 64, 0.08);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.dealer-city-page .g-badge:hover {
  box-shadow: 0 16px 40px rgba(5, 24, 64, 0.14);
  transform: translateY(-2px);
}

.dealer-city-page .g-badge,
.dealer-city-page .g-badge:hover,
.dealer-city-page .g-badge * {
  text-decoration: none !important;   /* dealer theme underlines every <a> */
  border-bottom: 0 !important;
}

.g-badge__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* Google "G" logo: SVG served from the same Cloudflare site (/google-g.svg) via <img>,
   not inline <svg> (CKEditor strips it). */
.g-badge__g {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.g-badge__name {
  display: block;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.g-badge__sub {
  display: block;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.g-badge__rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
}

.g-badge__score {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* five stars: grey underneath, yellow on top, yellow width = rating / 5 */
.g-badge__stars {
  position: relative;
  display: inline-block;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 2px;
  color: #d9dde3;
}

.g-badge__stars::before { content: "\2605\2605\2605\2605\2605"; }

.g-badge__stars::after {
  content: "\2605\2605\2605\2605\2605";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--rating) / 5 * 100%);
  overflow: hidden;
  white-space: nowrap;
  color: #fbbc05;
}

.g-badge__count {
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--subaru-blue);
}

.g-badge__count span { color: var(--muted); font-weight: 400; }

.g-badge__foot {
  display: block;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .dc-reviews { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   22. Incentive callout (.dc-callout, 2026-09-30)
   One row, three cells: big figure | copy | button. Kept for reuse (Burlingame no longer uses it).
   --------------------------------------------------------------------------- */
.dealer-city-page .dc-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  margin: 0 0 clamp(26px, 3.4vw, 40px);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 36px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.dc-callout__figure {
  margin: 0;
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--subaru-blue);
  white-space: nowrap;
}

.dc-callout__figure small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.dc-callout__title {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}

.dc-callout__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.dc-callout__body a { color: var(--subaru-blue); font-weight: 600; text-decoration: none; }
.dc-callout__body a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .dealer-city-page .dc-callout { grid-template-columns: 1fr; gap: 14px; }
}

/* section footnote (small print such as the hybrid note in the EV section) */
.dealer-city-page .dc-section__note {
  margin: clamp(20px, 3vw, 28px) 0 0;
  max-width: 70ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.dealer-city-page .dc-section__note a { color: var(--subaru-blue); font-weight: 600; text-decoration: none; }
.dealer-city-page .dc-section__note a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   23. "Dealer facts" hero variant (2026-09-30, Burlingame)
   The figure slot holds the Google rating instead of a lease payment: 4.6 + stars + review
   count, the whole group linking to Google. Star technique as .g-badge__stars (grey base,
   yellow width = --rating/5). A row of selling-point chips below.
   --------------------------------------------------------------------------- */
.dealer-city-page .model-hero__rating {
  --rating: 4.6;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(14px, 2vw, 20px);
  color: var(--white);
  text-decoration: none;
}

.dealer-city-page .model-hero__rating,
.dealer-city-page .model-hero__rating:hover,
.dealer-city-page .model-hero__rating * {
  text-decoration: none !important;   /* the dealer theme underlines every <a>; keep the rating clean */
  border-bottom: 0 !important;
}
.dealer-city-page .model-hero__rating:hover .model-hero__rating-count { text-decoration: underline; }

.model-hero__rating-score {
  font-size: clamp(44px, 5.6vw, 70px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.model-hero__rating-stars {
  position: relative;
  display: block;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.28);
}

.model-hero__rating-stars::before { content: "\2605\2605\2605\2605\2605"; }

.model-hero__rating-stars::after {
  content: "\2605\2605\2605\2605\2605";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--rating) / 5 * 100%);
  overflow: hidden;
  white-space: nowrap;
  color: #fbbc05;
}

.model-hero__rating-count {
  display: block;
  margin-top: 6px;
  font-size: clamp(12px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-label);
}

/* selling-point chips */
.model-hero__points {
  margin: 0 0 clamp(20px, 3vw, 28px);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.model-hero__points li {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

/* "Scene" variant of the card image: SOA scene7 background (inline background-image) with the
   transparent vehicle PNG centred low over it, same construction as the offer cards. Used on
   Burlingame's CPO / used-Subaru cards. */
.dealer-city-page .dc-feature__media--scene {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: #dfe3e8;
  background-position: center 35%;
  background-size: cover;
  background-repeat: no-repeat;
}

.dealer-city-page .dc-feature__media--scene img {
  width: 84%;
  height: auto;
  max-height: none;
  object-fit: contain;
  margin-bottom: 4%;
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.3));
}

/* ---------------------------------------------------------------------------
   24. Photo-background hero (.model-hero--photo, 2026-09-30, Burlingame)
   No vehicle image on the right; the whole hero carries a photo (inline background-image)
   with a dark-to-clear gradient on the left for legibility. __inner is just the copy column,
   capped at 560px.
   --------------------------------------------------------------------------- */
.dealer-city-page .model-hero--photo {
  background-position: center 45%;
  background-size: cover;
  background-repeat: no-repeat;
}

.model-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 2026-09-30: lighter than the first cut - the photo was reading too dim. The dark side only
     needs to hold the copy column; the right half shows the photo almost untouched. */
  background: linear-gradient(90deg,
    rgba(29, 36, 45, 0.86) 0%,
    rgba(29, 36, 45, 0.74) 30%,
    rgba(29, 36, 45, 0.28) 56%,
    rgba(29, 36, 45, 0.0) 80%);
}

.dealer-city-page .model-hero--photo > .model-hero__inner {
  position: relative;
  grid-template-columns: minmax(0, 560px);
  min-height: clamp(440px, 36vw, 580px);
}

.model-hero--photo .model-hero__specials-terms { max-width: 46ch; }

@media (max-width: 860px) {
  .model-hero--photo::before {
    background: linear-gradient(180deg, rgba(29, 36, 45, 0.25) 0%, rgba(29, 36, 45, 0.82) 42%, rgba(29, 36, 45, 0.92) 100%);
  }
  .dealer-city-page .model-hero--photo > .model-hero__inner { min-height: 0; padding-top: clamp(120px, 34vw, 200px); }
}

/* ---------------------------------------------------------------------------
   25. Generic two-column: copy + image (.dc-two, 2026-09-30). Burlingame's Grateful Dogs section.
   --------------------------------------------------------------------------- */
.dc-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.dc-two__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.dc-two--media-left .dc-two__media { order: -1; }

@media (max-width: 860px) {
  .dc-two { grid-template-columns: 1fr; }
  .dc-two--media-left .dc-two__media { order: 0; }
}

/* ---------------------------------------------------------------------------
   26. Single-row offer rail (.specials-grid--rail, 2026-09-30, Burlingame)
   Eight cards in one row; the overflow hides on the right and scrolls natively (mouse /
   trackpad / touch / arrow keys) with scroll-snap per card. Arrows and dots as in section 17
   (::scroll-button / ::scroll-marker, Chrome / Edge 135+; other browsers show a thin
   scrollbar). Desktop shows 4 cards, tablets 3 / 2, phones 1.15.
   --------------------------------------------------------------------------- */
.specials-rail {
  position: relative;
  padding-inline: clamp(0px, 3vw, 52px);
}

.dealer-city-page .specials-grid--rail {
  --sp-gap: clamp(14px, 1.6vw, 20px);
  --sp-cols: 4;
  display: flex;
  gap: var(--sp-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  anchor-name: --specials-rail;
  padding-bottom: 6px;                 /* keep card shadows from being clipped */
}

.dealer-city-page .specials-grid--rail:focus-visible {
  outline: 3px solid var(--subaru-blue);
  outline-offset: 4px;
}

.dealer-city-page .specials-grid--rail > .special-card {
  flex: 0 0 calc((100% - (var(--sp-cols) - 1) * var(--sp-gap)) / var(--sp-cols));
  min-width: 0;
  scroll-snap-align: start;
}

@media (max-width: 1100px) { .dealer-city-page .specials-grid--rail { --sp-cols: 3; } }
@media (max-width: 760px)  { .dealer-city-page .specials-grid--rail { --sp-cols: 2; } }
@media (max-width: 520px)  {
  .dealer-city-page .specials-grid--rail { --sp-cols: 1.15; }
  .specials-rail { padding-inline: 0; }
}

@supports selector(::scroll-button(*)) {
  .dealer-city-page .specials-grid--rail {
    scrollbar-width: none;
    scroll-marker-group: after;
  }
  .dealer-city-page .specials-grid--rail::-webkit-scrollbar { display: none; }

  .specials-grid--rail::scroll-button(*) {
    position: fixed;
    position-anchor: --specials-rail;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--gray-400);
    border-radius: 50%;
    background: var(--paper);
    color: var(--gray-600);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .specials-grid--rail::scroll-button(*):hover { border-color: var(--ink); color: var(--ink); }
  .specials-grid--rail::scroll-button(*):disabled { opacity: 0.32; cursor: default; }
  .specials-grid--rail::scroll-button(left)  { content: "\2039" / "Previous offers"; position-area: center left; }
  .specials-grid--rail::scroll-button(right) { content: "\203A" / "Next offers";     position-area: center right; }

  .specials-grid--rail::scroll-marker-group {
    display: flex;
    justify-content: center;
    gap: 9px;
    padding-top: 16px;
  }
  .specials-grid--rail > .special-card::scroll-marker {
    content: "";
    width: 9px;
    height: 9px;
    border: 1px solid var(--gray-400);
    border-radius: 50%;
    cursor: pointer;
  }
  .specials-grid--rail > .special-card::scroll-marker:target-current {
    background: var(--subaru-blue);
    border-color: var(--subaru-blue);
  }
  @media (max-width: 760px) { .specials-grid--rail::scroll-button(*) { display: none; } }
}

@supports not selector(::scroll-button(*)) {
  .specials-rail { padding-inline: 0; }
  .dealer-city-page .specials-grid--rail {
    padding-bottom: 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-400) transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dealer-city-page .specials-grid--rail { scroll-behavior: auto; }
}

/* "Scene" variant of the Why-us tile: scene7 background on the <a> (inline background-image)
   with a transparent vehicle PNG contained over it. Same construction as the offer cards. */
.dealer-city-page .dc-tile--scene {
  background-color: #dfe3e8;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

.dealer-city-page .dc-tile--scene img {
  object-fit: contain;
  padding: 7% 9% 3%;
  box-sizing: border-box;
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.3));
}

/* ---------------------------------------------------------------------------
   27. Service menu as H3s (2026-09-30)
   Each service line is an <h3> inside the existing bulleted .dc-split__list so the headings
   carry the keywords while the list looks exactly as before (no extra description).
   --------------------------------------------------------------------------- */
.dealer-city-page .dc-split__list h3 {
  display: inline;
  margin: 0;
  font: inherit;
  font-weight: 400;
  color: inherit;
}

/* Used-model links as H3s (keyword in the heading, same look as the plain list before) */
.dealer-city-page .dc-feature__list h3 {
  display: inline;
  margin: 0;
  font: inherit;
  font-weight: 400;
  color: inherit;
}

.dealer-city-page .dc-feature__list h3 > a {
  text-decoration: underline !important;
}