:root {
  --ink: #111827;
  --muted: #6b7280;
  --brand: #111827;
  --accent: #dc2626;
  --line: #e5e7eb;
  --premium-dark: #0f172a;
  --premium-gold: #fbbf24;
  --premium-blue: #1e40af;
  --premium-light: #f8fafc;
  --bg: #ffffff;
}

body {
  background-color: var(--bg);
}

.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 40px;
}

.breadcrumb {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 24px;
  text-align: center;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: var(--premium-blue);
}

/* ── TRUST CARD ──────────────────────────────────────────────
   65 Google reviews is the strongest asset this business has and
   visitors were missing it. It reads as one object, not page text.
   No entrance animation on purpose: motion is for feedback, not for
   making static content loud. Prominence comes from hierarchy.
   The whole card is one tap target to the real Google listing. ── */
.trust-card {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 540px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  background: #fff;
  border: 2px solid var(--premium-dark);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  text-align: left;
  text-decoration: none;
  transition:
    transform 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out);
}

.trust-card:active {
  transform: scale(0.985);
}

@media (hover: hover) and (pointer: fine) {
  .trust-card:hover {
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
  }
  .trust-card:hover .trust-card__cta {
    color: var(--premium-dark);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-card { transition: none; }
  .trust-card:active { transform: none; }
}

.trust-card__score {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding-right: 16px;
  border-right: 1px solid var(--line);
}

.trust-card__number {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--premium-dark);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.trust-card__stars {
  color: var(--premium-gold);
  font-size: 13px;
  letter-spacing: 1px;
}

.trust-card__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.trust-card__count {
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--premium-dark);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.trust-card__cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--premium-blue);
  transition: color 160ms var(--ease-out);
}

@media (min-width: 768px) {
  .trust-card { gap: 22px; padding: 16px 24px; max-width: 600px; margin-bottom: 28px; }
  .trust-card__score { padding-right: 22px; }
  .trust-card__number { font-size: 46px; }
  .trust-card__stars { font-size: 16px; }
  /* Desktop has room to breathe: let the line wrap instead of forcing
     nowrap (which is only needed to save vertical space on mobile) and
     pushing "us" past the card's edge. */
  .trust-card__count { font-size: 19px; white-space: normal; }
  .trust-card__cta { font-size: 14px; }
}

@media (max-width: 360px) {
  .trust-card { gap: 11px; padding: 9px 12px; }
  .trust-card__score { padding-right: 11px; }
  .trust-card__number { font-size: 28px; }
  .trust-card__count { font-size: 12.5px; }
}

/* ── SUPERIOR HERO HEADER (CENTERED) ── */
.case-header {
  max-width: 900px;
  margin: 0 auto 32px;
  text-align: center;
}

.case-header h1 {
  font-size: 28px;
  line-height: 1.25;
  margin: 0 0 20px;
  color: var(--premium-dark);
  font-weight: 800;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .case-header h1 {
    font-size: 44px;
    line-height: 1.15;
  }
}

/* ── VERIFIED REVIEW PROOF — top of page, right after the hero. PPI's
   page puts its strongest proof here, not mid-article; this mirrors
   that pattern with the real Chris Gaal review already on this page
   (moved from the mid-article testimonial box, which is removed to
   avoid showing the same quote twice). No profile photo/review-count
   shown for him: his real Google profile has neither, and inventing
   either would be a fabricated trust signal. ── */
.case-review-proof {
  max-width: 640px;
  margin: 0 auto 24px;
}

.case-review-proof__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.case-review-proof__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.case-review-proof__avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--premium-dark);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
}

.case-review-proof__name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--premium-dark);
}

.case-review-proof__badge {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--premium-blue);
  background: rgba(30, 64, 175, 0.08);
  padding: 4px 8px;
  border-radius: 6px;
}

.case-review-proof__stars {
  color: var(--premium-gold);
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.case-review-proof__quote {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #334155;
  font-style: italic;
}

.case-review-proof__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--premium-blue);
  text-decoration: none;
}

.case-review-proof__link:hover { text-decoration: underline; }

@media (min-width: 1024px) {
  .case-review-proof { max-width: none; margin: 0 0 40px; }
  .case-review-proof__card { max-width: 640px; margin-left: 0; }
}

/* ── DIFFERENTIATOR CALLOUT — one bolded sentence, same pattern as
   PPI's "Our biggest difference: we go to the car." A single memorable
   line does more than the 4 value-strip bullets spread out below it;
   this doesn't replace those, it leads with the sharpest one. Reuses
   facts already stated elsewhere on this page (pressure test, on-site,
   FAQ's coolant-overheat explanation) rather than adding new claims. ── */
.case-differentiator {
  max-width: 640px;
  margin: 0 auto 24px;
  padding: 16px 20px;
  background: #fef2f2;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #7f1d1d;
}

.case-differentiator strong { color: #991b1b; }

@media (min-width: 1024px) {
  .case-differentiator { max-width: none; margin: 0 0 32px; }
}

/* ── VALUE STRIP — replaces what used to be a one-line badge row that
   repeated the star rating (already big in the trust card above) and
   "Same day" (already stated in case-meta below). This is the space
   freed by cropping the portrait hero photo on mobile; it earns that
   space back with differentiators not said anywhere else on the page. ── */
.value-strip {
  max-width: 640px;
  margin: 0 auto 24px;
  display: grid;
  gap: 10px;
}

.value-strip__item {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--premium-dark);
  text-align: left;
}

.value-strip__mark {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--premium-blue);
}

@media (min-width: 768px) {
  .value-strip { grid-template-columns: repeat(2, 1fr); gap: 14px 32px; max-width: 560px; }
  .value-strip__item { font-size: 15px; justify-content: center; }
}

/* The viewport-fit hero (below) sits flush against the page edge with
   no bottom margin of its own, so the next section needs its own
   breathing room instead of touching the photo directly. Also: past
   1024px this becomes one left-aligned row spanning the page's real
   content width, instead of a small 2x2 box floating centered in the
   middle of a 1200px-wide page (which read as random/unaligned next
   to everything else). */
@media (min-width: 1024px) {
  .value-strip {
    margin-top: 48px;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
  }
  .value-strip__item { justify-content: flex-start; }
}

/* ── HERO SPLIT — desktop only. Photo fills one full-height column,
   breadcrumb/proof/headline fill the other, sized to fit inside the
   first screen with no scroll. Below 1024px this is a no-op: the
   block-level markup stacks exactly like it does on mobile.

   Earlier version gave the photo `grid-row: 1 / -1` across 4 separate
   text rows. A grid item spanning several "auto" rows forces the
   browser to distribute the container's full height across those
   rows to satisfy the span, no matter how little text each one
   actually holds — that's what stretched the headline row and left
   huge gaps around it. Fix: the grid now has exactly ONE row. The
   text pieces that need to move as a unit (breadcrumb, trust card,
   headline) are grouped into one flex column (`.hero-split__text`)
   that occupies that single row, so they stack and center as one
   natural group instead of each fighting over its own row. With only
   one row, the photo can go back to being a normal grid item (no
   positioning tricks needed). The byline is the one piece that isn't
   part of that group and doesn't need its own row: it's pinned to
   the bottom of the hero with `position: absolute`, in the space
   reserved by the hero's own bottom padding. ── */
@media (min-width: 1024px) {
  .hero-split {
    display: grid;
    position: relative;
    grid-template-columns: minmax(360px, 420px) 1fr;
    grid-template-rows: minmax(0, 1fr);
    column-gap: 48px;
    max-width: 1400px;
    margin: 0 auto;
    height: calc(100vh - 124px);
    max-height: 720px;
    padding-bottom: 56px;
    box-sizing: border-box;
  }

  .hero-split__text {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
  }

  .hero-split .breadcrumb { text-align: left; margin: 0 0 20px; }

  .hero-split .trust-card { max-width: none; margin: 0 0 24px; }

  .hero-split .case-header h1 {
    text-align: left;
    margin: 0;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.15;
  }

  .hero-split .case-photo--hero {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .hero-split .case-photo--hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-split .case-photo--hero figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, .82), transparent 70%);
    color: #fff;
    border: none;
    padding: 40px 24px 18px;
    font-size: 13px;
  }

  .hero-split .byline {
    /* Spans the full hero width (text column + photo) and centers,
       so it reads as one footer line under the whole block instead
       of a caption stuck under just the text side with dead space
       next to it under the photo. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    text-align: center;
    margin: 0 !important;
  }
}

.case-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

@media (min-width: 1024px) {
  .case-meta { justify-content: flex-start; }
}

.case-meta__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── 3-STEP PROCESS STRIP ── */
.case-process {
  max-width: 640px;
  margin: 0 auto 48px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--premium-light);
}

@media (min-width: 1024px) {
  /* Sits in the same right-hand column as the article's photos, so it
     shares one grid instead of floating centered on its own. */
  .story-row--intro .case-process { max-width: none; margin: 0; }
}

.case-process__kicker {
  color: var(--premium-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
  text-align: center;
}

.case-process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.case-process__step {
  text-align: center;
  display: grid;
  gap: 4px;
}

.case-process__node {
  width: 30px;
  height: 30px;
  margin: 0 auto 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--premium-dark);
  color: var(--premium-gold);
  font-size: 12px;
  font-weight: 700;
}

.case-process__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--premium-dark);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.case-process__copy {
  font-size: 12px;
  color: var(--muted);
}

/* ── ARTICLE (SINGLE COLUMN, PHOTOS INLINE) ── */
.story-main {
  max-width: 720px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.8;
  color: #334155;
}

.story-main p {
  margin: 0 0 24px;
}

.story-section {
  margin: 40px 0;
}

.story-section h2 {
  font-size: 24px;
  margin: 0 0 18px;
  color: var(--premium-dark);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.case-photo {
  margin: 32px 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  background: #fff;
}

/* ── DESKTOP ARTICLE LAYOUT — text left, photo right (mobile stays a
   single narrow column, untouched: .story-row is a plain block below
   1024px, so section+figure just stack in DOM order like always).
   Each row is its own independent 1-row grid, so this doesn't hit the
   multi-row auto-sizing bug the hero had — there's only ever one row
   here, nothing for a spanning item to distort. ── */
@media (min-width: 1024px) {
  /* Matches the hero, case-meta, and CTA/map/footer sections below,
     which all fill .page's own content box (viewport minus its 40px
     padding). Before this, story-main centered its own narrower
     max-width *inside* that box, landing its left edge 40px further
     right than everything else on the page — the root of the
     "nothing lines up" problem. */
  .story-main { max-width: none; }

  .story-main > p,
  .story-main > .testimonial-box,
  .story-main > .cta-inline,
  .story-main > .story-section {
    max-width: 720px;
    margin-left: 0;
    margin-right: auto;
  }

  .story-row {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 400px;
    column-gap: 56px;
    align-items: start;
    margin: 56px 0;
  }

  .story-row--reverse {
    grid-template-columns: 400px 1fr;
  }

  .story-row--reverse .story-section { order: 2; }
  .story-row--reverse .case-photo { order: 1; }

  .story-row .story-section { margin: 0; }
  .story-row .case-photo { margin: 0; position: sticky; top: 24px; }

  /* FAQ paired with the compact service-details card instead of the
     card sitting alone on the left with the whole right side of the
     page empty beneath it. */
  .story-row--details { align-items: start; }
  .story-row--details .faq-section { margin: 0; max-width: none; }
  .story-row--details .faq-section h2 { text-align: left; }
  .story-row--details .vehicle-details {
    margin: 0;
    max-width: none;
    position: sticky;
    top: 24px;
  }
}

.case-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.case-photo figcaption {
  padding: 14px 18px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  background: var(--premium-light);
  border-top: 1px solid var(--line);
}

.case-photo--review img {
  max-width: 480px;
  margin: 0 auto;
  display: block;
}

.case-photo--hero {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* On phones the portrait hero eats the whole screen, pushing the H1 and
   the trust card out of view. Crop it to 4:3 so the card, the headline
   and the photo all land inside one iPhone screen. */
@media (max-width: 767px) {
  /* `main.page` matches the specificity used in service-tiles.css, which
     otherwise wins over a plain `.page` selector and keeps the old padding. */
  main.page { padding: 14px 16px 24px; }

  .breadcrumb { margin: 0 0 12px; font-size: 12px; }

  .case-header h1 { margin-bottom: 12px; }

  .case-photo--hero {
    margin-top: 16px;
    margin-bottom: 24px;
  }

  .case-photo--hero img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 42%;
  }

  .case-photo--hero figcaption {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* Findings Box */
.findings-box {
  background: var(--premium-light);
  border-radius: 16px;
  padding: 32px;
  margin: 40px 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.findings-box h3 {
  font-size: 18px;
  margin: 0 0 20px;
  color: var(--premium-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.findings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

.findings-list li {
  padding-left: 32px;
  position: relative;
}

.findings-list li::before {
  content: "⚠️";
  position: absolute;
  left: 0;
  font-size: 18px;
  top: 2px;
}

/* Vehicle details */
.vehicle-details {
  background: var(--premium-dark);
  color: #fff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
  text-align: center;
  max-width: 480px;
  margin: 64px auto 0;
}

@media (min-width: 1024px) {
  .vehicle-details { margin-left: 0; margin-right: auto; }
}

.vehicle-details h3 {
  font-size: 14px;
  color: var(--premium-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 16px;
}

.vehicle-details dl {
  margin: 0;
  text-align: center;
}

.vehicle-details dt {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 16px 0 4px 0;
}

.vehicle-details dd {
  margin: 0 0 16px 0;
  color: #fff;
  font-size: 15px;
}

/* Mid-article CTA */
.cta-inline {
  display: block;
  text-align: center;
  margin: 40px auto;
  padding: 18px 32px;
  border-radius: 12px;
  background: var(--premium-dark);
  color: #fff;
  text-decoration: none;
  max-width: 480px;
  transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.cta-inline:hover {
  background: var(--premium-blue);
}

.cta-inline:active {
  transform: scale(0.98);
}

.cta-inline__kicker {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 6px;
}

.cta-inline__number {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--premium-gold);
  letter-spacing: -0.01em;
}

.cta-inline__sub {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
}

/* FAQ */
.faq-section {
  max-width: 720px;
  margin: 64px auto 0;
}

.faq-section h2 {
  font-size: 26px;
  color: var(--premium-dark);
  margin: 0 0 24px;
  text-align: center;
}

@media (min-width: 1024px) {
  .faq-section { margin-left: 0; margin-right: auto; }
  .faq-section h2 { text-align: left; }
}

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

.faq-item h3 {
  font-size: 17px;
  color: var(--premium-dark);
  margin: 0 0 8px;
  font-weight: 700;
}

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

/* ── FINAL CTA BLOCK ──────────────────── */
.cta-block {
  background: var(--premium-dark);
  color: #fff;
  border-radius: 24px;
  padding: 64px 40px;
  margin-top: 80px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
}

@media (max-width: 640px) {
  .cta-block {
    padding: 40px 24px;
    margin-top: 56px;
  }
}

.cta-block h2 {
  color: #fff;
  font-size: 28px;
  margin: 0 0 16px;
  font-weight: 800;
}

@media (min-width: 768px) {
  .cta-block h2 {
    font-size: 36px;
  }
}

.cta-block p {
  color: #94a3b8;
  margin: 0 auto 32px;
  font-size: 18px;
  line-height: 1.6;
  max-width: 50ch;
}

.cta {
  display: inline-block;
  margin: 0;
  padding: 18px 40px;
  border-radius: 12px;
  background: var(--premium-gold);
  color: var(--premium-dark);
  text-decoration: none;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(251, 191, 36, 0.3);
  transition: all 0.3s ease;
}

.cta:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(255, 255, 255, 0.4);
}

@media (max-width: 640px) {
  .cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

.badges {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  color: #94a3b8;
  font-size: 14px;
  flex-wrap: wrap;
}

/* ── CTA MULTI-CHANNEL ── */
.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta--secondary {
  display: inline-block;
  padding: 18px 40px;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  transition: all 0.3s ease;
}

.cta--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .cta--secondary {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* ── Mobile CTA bar ── */
.mobile-cta-bar { display: none; }

@media (max-width: 767px) {
  .mobile-cta-bar {
    display: flex;
    align-items: center;
    gap: 0;
    position: sticky;
    top: 92px;
    z-index: 999;
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0f172a 100%);
    border-top: 1px solid rgba(251, 191, 36, .35);
    border-bottom: 1px solid rgba(251, 191, 36, .25);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .mobile-cta-bar a {
    color: #fff;
    font-family: "Inter", Arial, sans-serif;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .2px;
  }
  .mobile-cta-sms {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
    margin-right: 8px;
    padding: 6px 8px;
    min-height: 48px;
    border-radius: 12px;
    background: rgba(202, 138, 4, .12);
    box-shadow: inset 0 0 0 1.5px rgba(245, 183, 0, .55), 0 4px 12px -6px rgba(0, 0, 0, .55);
    transition: transform 140ms cubic-bezier(.23, 1, .32, 1), background 140ms ease-out;
  }
  .mobile-cta-sms:active {
    transform: scale(.98);
    background: rgba(202, 138, 4, .22);
  }
  .mobile-cta-sms::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(75deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
    transform: translateX(-140%);
    animation: ctaShimmerGMC 4.2s cubic-bezier(.23, 1, .32, 1) infinite;
  }
  @keyframes ctaShimmerGMC {
    0% { transform: translateX(-140%); }
    22% { transform: translateX(140%); }
    100% { transform: translateX(140%); }
  }
  .mobile-cta-sms-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
  }
  .mobile-cta-sms-text .cta-main-text {
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: #f5c451;
    text-shadow: 0 1px 10px rgba(245, 183, 0, .3);
  }
  .mobile-cta-bar-sub {
    color: #fff;
    opacity: .8;
    font-weight: 600;
    font-size: .75rem;
    white-space: nowrap;
  }
  .mobile-cta-tel {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    transition: transform 140ms cubic-bezier(.23, 1, .32, 1);
  }
  .mobile-cta-tel:active {
    transform: scale(.98);
  }
  .mobile-cta-tel-label {
    display: block;
    font-size: .6875rem;
    color: #e2e8f0;
    font-weight: 500;
    white-space: nowrap;
  }
  .mobile-cta-tel-number {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
  }
  .mobile-cta-bar svg { flex-shrink: 0; color: #f5c451; }
}
@media (max-width: 359px) {
  .mobile-cta-sms-text .cta-main-text { font-size: .8125rem; }
  .mobile-cta-bar-sub { font-size: .6875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-sms::after { animation: none; }
  .mobile-cta-sms { transition: none; }
}