/* ==========================================================================
   Lasco Auto Repair & Tire — lascograndblanc.com
   Single stylesheet. Static site, GoDaddy cPanel/Apache.

   Everything is scoped under .lgb so the whole document is ours but nothing
   leaks if a third-party widget (Podium, Dealer-FX) injects its own styles.

   READ BEFORE EDITING: project-docs/10-design-standards.md
   The tap-target block at the bottom of this file is a HARD RULE. It lives
   last so it wins the cascade. When you add a new button class, add it there.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand — black / white / red. Grand Blanc's colors.
     RED IS RATIONED: it marks the action. If it isn't tappable and isn't a
     safety warning, it isn't red — otherwise the call button loses its pull. */
  --brand:            #BA2319;   /* brand red — true red, hue 3.5° */
  --brand-bright:     #E74A40;   /* red on dark. 4.94:1 on --ink, so
                                    .eyebrow at 13px still passes AA. */
  --brand-deep:       #911912;

  --ink:              #101010;   /* true near-black, 19.03:1 on white */
  --ink-soft:         #242426;
  --ink-mute:         #5E5E63;   /* 6.45:1 on white — AA body text */

  --surface:          #F6F6F6;
  --surface-2:        #EBEBEC;
  --white:            #FFFFFF;
  --line:             #E2E2E4;

  --alert:            #BA2319;   /* the call button. Same red — one meaning. */
  --alert-deep:       #911912;
  --trust:            #BA2319;   /* links. On-palette; teal was orphaned. */
  --trust-deep:       #911912;
  --good:             #1E7A44;

  /* Type. Swap these two lines for self-hosted webfonts when ready —
     see 10-design-standards.md Part 4 (max 2 families, 4 weights, font-display:swap). */
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap:      1240px;
  --wrap-text: 760px;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 6px 22px rgba(0,0,0,.10);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.18);

  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2rem;   --sp-5: 3rem;   --sp-6: 4.5rem;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;         /* 17px base — this audience skews older, don't go smaller */
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, picture, video, svg { max-width: 100%; display: block; }
img { height: auto; }           /* never height:100% — see 10-design-standards.md Part 3 */

/* --------------------------------------------------------------------------
   3. TYPE + WORD WRAP (MANDATORY — see 10-design-standards.md Part 2)
   -------------------------------------------------------------------------- */
.lgb h1, .lgb h2, .lgb h3, .lgb h4,
.lgb .sec-title, .lgb .hero-title, .lgb .card-title,
.lgb .faq-q, .lgb .band-title, .lgb .tier-name {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 0 0 var(--sp-2);
  text-wrap: balance;           /* fixed 33 of 34 orphans in the 8/18 audit */
}

.lgb p, .lgb li,
.lgb .sec-sub, .lgb .hero-sub, .lgb .faq-a, .lgb .card-text {
  text-wrap: pretty;            /* stops single-word last lines */
}

.lgb h1, .lgb .hero-title { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
.lgb h2, .lgb .sec-title  { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
.lgb h3, .lgb .card-title { font-size: clamp(1.2rem, 2.1vw, 1.45rem); }
.lgb h4                   { font-size: 1.0625rem; }

.lgb .eyebrow {
  font-family: var(--font-display);
  font-size: .8125rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0 0 var(--sp-1);
}
.lgb .on-dark .eyebrow { color: var(--brand-bright); }

.lgb .sec-sub, .lgb .hero-sub {
  font-size: 1.125rem; color: var(--ink-mute); max-width: 62ch;
  margin: 0 0 var(--sp-3);
}
.lgb .on-dark .sec-sub, .lgb .on-dark .hero-sub { color: rgba(255,255,255,.82); }

.lgb .accent      { color: var(--brand-deep); }
.lgb .on-dark .accent { color: var(--brand-bright); }
.lgb .nowrap      { white-space: nowrap; }

.lgb a { color: var(--trust-deep); text-underline-offset: .18em; }
.lgb a:hover { color: var(--trust); }
/* Body links keep an underline: red-vs-black is a hue difference, and hue alone
   must never be the only cue that something is a link (WCAG 1.4.1). Buttons,
   nav and cards are exempt — their shape already says "interactive". */
.lgb .wrap-text p a, .lgb .faq-a a, .lgb .sec-sub a { text-decoration: underline; }
.lgb a:focus-visible,
.lgb button:focus-visible {
  outline: 3px solid var(--trust);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.lgb .wrap      { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-3); }
.lgb .wrap-text { width: 100%; max-width: var(--wrap-text); margin-inline: auto; padding-inline: var(--sp-3); }

.lgb section { padding-block: var(--sp-6); }
.lgb section.tight { padding-block: var(--sp-5); }

.lgb .bg-surface { background: var(--surface); }
.lgb .bg-ink     { background: var(--ink); color: #fff; }
.lgb .bg-ink h1, .lgb .bg-ink h2, .lgb .bg-ink h3 { color: #fff; }

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

/* Skip link — accessibility, and free */
.lgb .skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .85rem 1.25rem;
}
.lgb .skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.lgb .hdr {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.lgb .hdr-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); min-height: 72px;
}
.lgb .logo {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 900; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; line-height: 1.1;
}
.lgb .logo span { color: var(--brand-deep); }
.lgb .logo small {
  display: block; font-size: .625rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
}

.lgb .nav { display: flex; align-items: center; gap: var(--sp-3); }
.lgb .nav a {
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--ink); text-decoration: none;
}
.lgb .nav a:hover { color: var(--brand-deep); }

.lgb .hdr-phone {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.lgb .hdr-phone small {
  display: block; font-size: .625rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 700;
}

.lgb .nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .6rem .8rem; cursor: pointer;
  font-size: 1.1rem; min-height: 46px; min-width: 46px;
}
@media (max-width: 980px) {
  .lgb .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .lgb .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md); padding: var(--sp-2) var(--sp-3);
  }
  .lgb .nav[data-open="true"] { display: flex; }
  .lgb .nav a { padding: .9rem 0; border-bottom: 1px solid var(--line); min-height: 52px;
                display: flex; align-items: center; }
  .lgb .nav a:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   Sizes/type scale are enforced in the HARD RULE block at the bottom.
   -------------------------------------------------------------------------- */
.lgb .btn,
.lgb .btn-primary, .lgb .btn-outline, .lgb .btn-alert, .lgb .btn-sched {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; text-align: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1rem; letter-spacing: .02em; text-transform: uppercase;
  padding: .95rem 1.6rem; border-radius: var(--r-md);
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.lgb .btn:hover, .lgb .btn-primary:hover, .lgb .btn-outline:hover,
.lgb .btn-alert:hover, .lgb .btn-sched:hover { transform: translateY(-1px); }

/* Schedule = ink, Call = red. Side by side in every hero, so they must not
   both be red. Red consistently means "reach us right now". */
.lgb .btn-primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.lgb .btn-primary:hover { background: var(--ink-soft); color: #fff; }
.lgb .on-dark .btn-primary { background: #fff; color: var(--ink); }
.lgb .on-dark .btn-primary:hover { background: var(--surface); color: var(--ink); }

.lgb .btn-alert { background: var(--alert); color: #fff; }
.lgb .btn-alert:hover { background: var(--alert-deep); color: #fff; }
.lgb .on-dark .btn-alert { background: var(--brand-bright); color: #fff; }
.lgb .on-dark .btn-alert:hover { background: var(--brand); color: #fff; }

.lgb .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.lgb .btn-outline:hover { background: var(--ink); color: #fff; }
.lgb .on-dark .btn-outline { color: #fff; border-color: rgba(255,255,255,.7); }
.lgb .on-dark .btn-outline:hover { background: #fff; color: var(--ink); }

/* Full-width primary conversion CTA. Red on the dark band — highest contrast
   element on the page, which is what it should be. */
.lgb .btn-sched { background: var(--brand); color: #fff; width: 100%; }
.lgb .btn-sched:hover { background: var(--brand-bright); color: #fff; }
.lgb .on-dark .btn-sched { background: var(--brand-bright); }
.lgb .on-dark .btn-sched:hover { background: var(--brand); }

.lgb .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* NEVER flex-direction: column on hero CTAs. Row + wrap. See 10-design-standards.md. */

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.lgb .hero {
  position: relative; background: var(--ink); color: #fff;
  padding-block: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}
.lgb .hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
      rgba(16,16,16,.96) 0%,
      rgba(16,16,16,.90) 34%,
      rgba(16,16,16,.64) 62%,
      rgba(16,16,16,.40) 100%);
  z-index: 1;
}
.lgb .hero-bgimg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 1; z-index: 0;
}
.lgb .hero .wrap { position: relative; z-index: 2; }
/* max-width here is load-bearing. At 18ch the second sentence wrapped and
   stranded "Is." alone on a fourth line at every width from 390 to 1600 —
   caught by qa/wrapcheck.js, confirmed by screenshot. Each sentence of a
   two-sentence headline must FIT on its own line; text-wrap:balance cannot
   rescue a line that doesn't fit. */
.lgb .hero-title { max-width: 26ch; }
.lgb .hero-sub   { max-width: 54ch; }

.lgb .hero-trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .95rem; color: rgba(255,255,255,.85);
}
.lgb .hero-trust span { display: flex; align-items: center; gap: .45rem; }

@media (max-width: 900px) {
  .lgb .hero::after {
    background: linear-gradient(180deg, rgba(16,16,16,.91) 0%, rgba(16,16,16,.84) 100%);
  }
}

/* --------------------------------------------------------------------------
   8. OFFER BAND — the free-inspection mechanic, above the fold
   -------------------------------------------------------------------------- */
.lgb .offer-band {
  background: var(--ink); color: #fff;
  border-top: 4px solid var(--brand);
  padding-block: var(--sp-3);
}
.lgb .offer-band .btn-outline { color: #fff; border-color: rgba(255,255,255,.7); }
.lgb .offer-band .btn-outline:hover { background: #fff; color: var(--ink); }
.lgb .offer-band .wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-2);
}
.lgb .offer-band .band-title { font-size: clamp(1.15rem, 2.4vw, 1.6rem); margin: 0; }
.lgb .offer-band .fine { font-size: .8125rem; opacity: .75; margin: .25rem 0 0; }

/* --------------------------------------------------------------------------
   9. JUMP NAV
   -------------------------------------------------------------------------- */
.lgb .jump { background: var(--surface); border-block: 1px solid var(--line);
             padding-block: var(--sp-2); position: sticky; top: 72px; z-index: 90; }
.lgb .jump-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.lgb .jump-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.lgb .jump-pill:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

@media (max-width: 900px) {
  /* One line, swipe sideways. NEVER let this wrap -- it is position:sticky,
     so every extra row is permanently subtracted from the viewport. */
  .lgb .jump-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .lgb .jump-row::-webkit-scrollbar { display: none; }
  .lgb .jump-pill { flex: 0 0 auto; }

  /* Fade on the right edge so it reads as scrollable rather than cut off. */
  .lgb .jump {
    position: sticky;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
}

/* Anchor targets must clear the sticky header + sticky jump bar, or the thing
   you jumped to lands underneath them.
   .card[id] is NOT optional here: every "Learn more" link on the homepage
   points at /services/#<slug>, and those slugs are on the service CARDS
   (<article class="card" id="brakes">), not on the group sections. With only
   section[id] covered, tapping "Learn more" put the card title at y=25px --
   behind a 155px sticky stack. Anything that can be an anchor target needs
   this. */
.lgb section[id],
.lgb .card[id] { scroll-margin-top: 185px; }
@media (max-width: 900px) {
  .lgb section[id],
  .lgb .card[id] { scroll-margin-top: 190px; }
}

/* --------------------------------------------------------------------------
   10. CARDS / GRIDS
   -------------------------------------------------------------------------- */
.lgb .card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.lgb .card-title { margin-bottom: .5rem; }
.lgb .card-text  { color: var(--ink-mute); margin: 0 0 var(--sp-2); flex: 1; }
.lgb .card-cta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-display); font-weight: 800; font-size: .95rem;
  color: var(--trust-deep); text-decoration: none; margin-top: auto;
}
.lgb .card-cta:hover { color: var(--trust); }

/* Symptom checklist */
.lgb .symptom-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .lgb .symptom-grid { grid-template-columns: 1fr; } }
.lgb .svc-link {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem; background: var(--white);
  border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--r-sm); text-decoration: none; color: var(--ink);
  font-weight: 600;
}
.lgb .svc-link:hover { background: var(--surface); border-left-color: var(--alert); }

/* Tier cards — the Pep Boys "I'm Not Sure" pattern */
.lgb .tier-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .lgb .tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .lgb .tier-grid { grid-template-columns: 1fr; } }
.lgb .tier {
  background: var(--white); border: 2px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-3);
  display: flex; flex-direction: column;
}
.lgb .tier.featured { border-color: var(--brand); box-shadow: var(--shadow-md); }
.lgb .tier-name  { font-size: 1.15rem; margin-bottom: .35rem; }
.lgb .tier-price { font-family: var(--font-display); font-weight: 900;
                   font-size: 1.9rem; color: var(--ink); margin: .25rem 0; }
.lgb .tier-price small { display: block; font-size: .75rem; font-weight: 700;
                         color: var(--ink-mute); text-transform: uppercase; letter-spacing: .08em; }
.lgb .tier ul { margin: var(--sp-2) 0; padding-left: 1.1rem; color: var(--ink-mute); font-size: .95rem; }
.lgb .tier li { margin-bottom: .4rem; }

/* Process steps */
.lgb .process-steps { counter-reset: step; display: grid; gap: var(--sp-2); }
.lgb .step { display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-2); align-items: start; }
.lgb .step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--font-display); font-weight: 900; font-size: 1.25rem;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); color: var(--brand-bright);
  display: flex; align-items: center; justify-content: center;
}
.lgb .step h3 { margin-bottom: .25rem; }
.lgb .step p  { margin: 0; color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   11. PRICE TABLE — "per axle" is mandatory on brakes. See 08-compliance-rules.md
   -------------------------------------------------------------------------- */
.lgb .price-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.lgb .price-table caption {
  text-align: left; font-family: var(--font-display); font-weight: 800;
  font-size: 1.15rem; padding-bottom: var(--sp-2);
}
.lgb .price-table th, .lgb .price-table td {
  text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--line);
}
.lgb .price-table thead th {
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .09em;
}
.lgb .price-table tbody tr:nth-child(even) { background: var(--surface); }
.lgb .price-table td.price { font-family: var(--font-display); font-weight: 800; white-space: nowrap; }
@media (max-width: 640px) {
  .lgb .price-table thead { position: absolute; left: -9999px; }
  .lgb .price-table tr { display: block; border: 1px solid var(--line);
                         border-radius: var(--r-md); margin-bottom: var(--sp-2); padding: .5rem; }
  .lgb .price-table td { display: flex; justify-content: space-between;
                         gap: var(--sp-2); border: 0; padding: .55rem .5rem; }
  .lgb .price-table td::before { content: attr(data-label); font-weight: 700; color: var(--ink-mute); }
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.lgb .faq { display: grid; gap: .75rem; }
.lgb .faq details {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
.lgb .faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 1.25rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  min-height: 56px;
}
.lgb .faq summary::-webkit-details-marker { display: none; }
.lgb .faq summary::after { content: "+"; font-size: 1.5rem; color: var(--brand-deep); line-height: 1; }
.lgb .faq details[open] summary::after { content: "\2013"; }
.lgb .faq .faq-a { padding: 0 1.25rem 1.25rem; margin: 0; color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   13. BANDS — area coverage, CTA, vehicle bridge
   -------------------------------------------------------------------------- */
.lgb .area-band { background: var(--surface); }
.lgb .area-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-2); }
.lgb .area-chip {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: .4rem .9rem;
  font-size: .875rem; font-weight: 600; white-space: nowrap;
}

.lgb .cta-band { background: var(--ink); color: #fff; }
.lgb .cta-band .wrap { display: grid; gap: var(--sp-3); align-items: center;
                       grid-template-columns: 1.4fr 1fr; }
@media (max-width: 860px) { .lgb .cta-band .wrap { grid-template-columns: 1fr; } }

/* The vehicle bridge. Footer band, never body. 74% of owners buy from the
   dealer that services their car — this band is why the site links both stores.
   Replaced the standalone bridge page, which was dropped 2026-08-20. */
.lgb .bridge-band { background: var(--surface-2); border-top: 4px solid var(--brand); }
.lgb .bridge-band.on-dark {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
}
.lgb .bridge-band.on-dark::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(16,16,16,.92) 0%, rgba(16,16,16,.72) 38%, rgba(16,16,16,.42) 100%);
}
.lgb .bridge-band-bg { position: absolute; inset: 0; z-index: 0; }
.lgb .bridge-band-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.lgb .bridge-band .wrap { position: relative; z-index: 2; }
.lgb .bridge-card { color: var(--ink); }
.lgb .bridge-card .btn-outline { color: var(--ink); border-color: var(--ink); }
.lgb .bridge-card .btn-outline:hover { background: var(--ink); color: #fff; }

/* Full-bleed editorial break between Why Us and What to Expect -- one
   centered line over an already-shot shop photo. No cards, no CTA. The point
   is pacing between two content-dense sections, not another conversion push. */
.lgb .interlude {
  position: relative; overflow: hidden;
  color: #fff; text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.lgb .interlude::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(16,16,16,.66);
}
.lgb .interlude-bg { position: absolute; inset: 0; z-index: 0; }
.lgb .interlude-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.lgb .interlude .wrap { position: relative; z-index: 2; }
.lgb .interlude-line {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  line-height: 1.35; letter-spacing: -.01em;
  max-width: 46ch; margin: 0 auto;
  text-wrap: balance;
}

/* Quick-scan services index on /services/ -- added 2026-08-21. Jay looked at
   Midas's services page and wanted the same fast "is my problem even on the
   menu" scan, using our own real 25-service catalog and our own icons. This
   sits ABOVE the existing banner+description group sections, which keep
   their photos and SEO copy unchanged below -- this is a find-it layer, not
   a replacement. Links are plain (no underline) the same way jump-pills and
   nav links are exempt from the WCAG 1.4.1 underline rule elsewhere on the
   site: this is a navigation list, not body copy. */
.lgb .svc-index-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4); margin-top: var(--sp-3);
}
@media (max-width: 1000px) { .lgb .svc-index-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .lgb .svc-index-grid { grid-template-columns: 1fr; } }

.lgb .svc-index-icon { color: var(--brand); width: 30px; height: 30px; margin-bottom: .6rem; }
.lgb .svc-index-icon svg { width: 100%; height: 100%; display: block; }

.lgb .svc-index-title {
  font-size: 1.0625rem;
  padding-bottom: .65rem; margin-bottom: .65rem;
  border-bottom: 2px solid var(--line);
}
.lgb .svc-index-list { list-style: none; margin: 0; padding: 0; }
.lgb .svc-index-list li { margin-bottom: .6rem; }
.lgb .svc-index-list a {
  color: var(--ink-soft); text-decoration: none; font-size: .9375rem; line-height: 1.4;
}
.lgb .svc-index-list a:hover { color: var(--brand-deep); text-decoration: underline; }
.lgb .bridge-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .lgb .bridge-grid { grid-template-columns: 1fr; } }
.lgb .bridge-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-3);
  display: flex; flex-direction: column; gap: .5rem;
}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.lgb .ftr { background: var(--ink); color: rgba(255,255,255,.78); padding-block: var(--sp-5) var(--sp-3); }
.lgb .ftr a { color: rgba(255,255,255,.85); text-decoration: none; }
.lgb .ftr a:hover { color: var(--brand-bright); text-decoration: underline; }
.lgb .ftr-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .lgb .ftr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lgb .ftr-grid { grid-template-columns: 1fr; } }
.lgb .ftr h4 {
  color: #fff; font-size: .8125rem; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: var(--sp-2);
}
.lgb .ftr ul { list-style: none; margin: 0; padding: 0; }
.lgb .ftr li { margin-bottom: .55rem; }
.lgb .ftr-legal {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .8125rem; color: rgba(255,255,255,.6);
}
.lgb .ftr-legal p { margin: 0 0 .5rem; }

/* Disclaimer block */
.lgb .disclaimer {
  background: var(--surface); border-top: 1px solid var(--line);
  padding-block: var(--sp-3); font-size: .8125rem; color: var(--ink-mute);
}
.lgb .disclaimer p { margin: 0 0 .6rem; }

/* Breadcrumb — must be VISIBLE to match BreadcrumbList schema. Google requires it. */
.lgb .crumbs { padding-block: var(--sp-2); font-size: .875rem; color: var(--ink-mute); }
.lgb .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.lgb .crumbs li::after { content: "/"; margin-left: .4rem; color: var(--line); }
.lgb .crumbs li:last-child::after { content: ""; }

/* Utilities */
.lgb .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Map embed on /contact/. img{max-width:100%} doesn't cover iframes, and the
   background means a slow or blocked Google response looks like a loading
   panel rather than a broken element. */
.lgb iframe { max-width: 100%; border: 0; background: var(--surface-2); border-radius: var(--r-lg); }
/* Card image. Explicit pixel height + object-fit is safe here BECAUSE the
   height is a real value, not 100% -- see 10-design-standards.md Part 3, where
   height:100% without a sized parent was the single biggest source of broken
   builds on the old project. */
.lgb .card.has-img { padding: 0; overflow: hidden; position: relative; }
.lgb .card.has-img img { width: 100%; height: 190px; object-fit: cover; }
.lgb .card.has-img .card-title,
.lgb .card.has-img .card-text,
.lgb .card.has-img .card-cta { margin-inline: var(--sp-3); }
.lgb .card.has-img .card-title { margin-top: var(--sp-3); }
.lgb .card.has-img .card-cta { margin-bottom: var(--sp-3); }

/* Icon badge, one per homepage service card. Added 2026-08-21 -- Jay: the
   homepage "just seems so basic." A photo grid with plain text underneath is
   the exact template look of every aftermarket chain's site. A matched icon
   per category is a small production cost (six inline SVGs, ~1KB total, zero
   extra network requests) for a real signal: someone built a catalog here,
   they didn't drop in a stock card component. */
.lgb .card-icon-badge {
  position: absolute; top: .85rem; left: .85rem; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: var(--brand-bright);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.lgb .card-icon-badge svg { width: 24px; height: 24px; }

/* Diamond-plate texture — shop-floor reference, not a generic gray panel.
   Applied ONLY where explicitly opted in (.tex-plate), never globally on
   .bg-surface, which is the shared alternating-section background reused on
   every page in the project. The real background-color stays the flat,
   already-contrast-verified var(--surface); the pattern is a separate layer
   BEHIND the content (z-index 0 vs content's z-index 1), at 5% opacity, so
   it cannot meaningfully change text contrast — verified visually at
   /home/claude/shots after this shipped, not just asserted here. */
.lgb .tex-plate { position: relative; overflow: hidden; }
.lgb .tex-plate::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,  rgba(16,16,16,.05) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(-45deg, rgba(16,16,16,.05) 0 2px, transparent 2px 16px);
}
.lgb .tex-plate > .wrap { position: relative; z-index: 1; }

/* Offer band already runs var(--ink) black with a red top border (red is
   rationed to accents/CTAs, not full-bleed backgrounds — see the palette
   comment above). This adds a faint diagonal white-on-black hint on top of
   that black, site-wide on every page with an offer band, so it reads as a
   textured surface instead of a flat corporate block. Contrast is unaffected
   -- white text still sits at ~19:1 against --ink; the stripe opacity (7%)
   never gets anywhere near that. */
.lgb .offer-band { position: relative; overflow: hidden; }
.lgb .offer-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 10px, transparent 10px 22px);
}
.lgb .offer-band .wrap { position: relative; z-index: 1; }

/* Coupon cards on /specials/. Deliberately a "clip this out" ticket look —
   dashed border, oversized value, monospace code — NOT the same visual
   language as a plain .card. A coupon should not look like a service
   description; it should look like something you'd bring in. */
.lgb .coupon-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .lgb .coupon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .lgb .coupon-grid { grid-template-columns: 1fr; } }

.lgb .coupon-card {
  background: var(--white);
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  display: flex; flex-direction: column;
  position: relative;
}
.lgb .coupon-value {
  font-family: var(--font-display); font-weight: 900;
  font-size: 2.1rem; line-height: 1; color: var(--brand-deep);
  margin: 0 0 .35rem;
}
.lgb .coupon-name { margin-bottom: .4rem; }
.lgb .coupon-desc { color: var(--ink-mute); margin: 0 0 var(--sp-2); flex: 1; }
.lgb .coupon-expires {
  font-size: .8125rem; color: var(--ink-mute); font-style: italic;
  margin: 0 0 var(--sp-2);
  border-top: 1px dashed var(--line); padding-top: .6rem;
}
.lgb .coupon-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap;
}
.lgb .coupon-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .8125rem; letter-spacing: .04em;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; padding: .25rem .55rem; color: var(--ink-mute);
}

/* The tire price guarantee — a standing policy, not a coupon, so it gets its
   own full-width banner instead of a slot in the coupon grid. */
.lgb .tire-guarantee {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--sp-3);
  background: var(--ink); color: #fff;
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
}
.lgb .tire-guarantee .card-title,
.lgb .tire-guarantee .card-text { color: #fff; }
.lgb .tire-guarantee .card-text { color: rgba(255,255,255,.78); margin: 0; }
.lgb .tire-guarantee-value {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.6rem; color: var(--brand-bright);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .lgb .tire-guarantee { grid-template-columns: 1fr; text-align: left; }
}

/* Feature banner at the top of each service group on /services/. */
.lgb .group-banner {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-3);
  background: var(--surface-2);
}
.lgb .group-banner img { width: 100%; height: 230px; object-fit: cover; }
@media (max-width: 768px) { .lgb .group-banner img { height: 170px; } }

/* Compact hero — used on /schedule/, where the booking tool must sit above
   the fold rather than below a full-height hero. */
.lgb .hero.compact { padding-block: clamp(2rem, 4vw, 3.25rem); }
.lgb .hero.compact .hero-sub { margin-bottom: 0; }

/* Purpose-built banner for /schedule/ only — NOT the homepage hero pattern.
   The homepage clamp values (up to 3.4rem, 3 lines, generous padding-block)
   exist to carry a marketing statement. This page's only statement is "here
   is the tool"; a single short line at a fixed, modest size does that without
   the vertical cost. Do not reuse .compact here — .compact still scales off
   the same 3-line clamp and was still too tall on a 390px phone. */
.lgb .hero.schedule-hero {
  padding-block: 1.75rem;
}
.lgb .hero.schedule-hero .hero-title {
  font-size: clamp(1.5rem, 4.6vw, 2.1rem);
  max-width: none;
  margin-bottom: .4rem;
}
.lgb .hero.schedule-hero .hero-sub {
  font-size: 1rem;
  max-width: none;
  margin-bottom: 0;
}

/* The scheduler section carries almost no top padding: the tool should meet
   the breadcrumb, not sit under a section's worth of whitespace. */
.lgb .sched-section { padding-block: var(--sp-1) var(--sp-4); }
.lgb .sched-note {
  font-size: 1rem; color: var(--ink-mute);
  max-width: 66ch; margin: 0 0 .6rem;
}

.lgb .sched-embed {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  margin-top: var(--sp-3);
}
.lgb .sched-embed iframe {
  display: block;
  width: 100%;
  height: 1000px;
  border: 0;
}
@media (max-width: 768px) { .lgb .sched-embed iframe { height: 1150px; } }

.lgb .sched-fallback {
  margin-top: var(--sp-2);
  font-size: .9375rem;
  color: var(--ink-mute);
  text-align: center;
}
.lgb .sched-fallback a { text-decoration: underline; }

.lgb .center { text-align: center; }
.lgb .center .sec-sub { margin-inline: auto; }


/* ==========================================================================
   HARD RULE — MOBILE TAP TARGETS AND BUTTON TYPE SCALE
   Established 2026-08-19. See project-docs/10-design-standards.md Part 1.

   THIS BLOCK STAYS LAST so it wins the cascade.
   Sets min-height ONLY (never padding) so it doesn't fight the smaller
   breakpoint padding rules above.

   WHEN YOU ADD A NEW BUTTON CLASS, ADD IT HERE. The selector list only
   protects what it names. qa/tapcheck.js is the backstop.
   ========================================================================== */
@media (max-width: 768px) {

  /* --- Size floors --- */
  .lgb .btn,
  .lgb .btn-primary,
  .lgb .btn-outline,
  .lgb .btn-alert,
  .lgb .btn-sched,
  .lgb .card-cta,
  .lgb .bridge-card .btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .lgb .jump-pill {
    min-height: 46px;
    padding: .5rem 1rem;
    display: inline-flex;
    align-items: center;
  }
  .lgb .jump-row { gap: .6rem; }

  .lgb .svc-link,
  .lgb .area-chip {
    min-height: 46px;
    padding: .5rem .9rem;
    display: inline-flex;
    align-items: center;
  }

  .lgb .hdr-phone {
    min-height: 44px;
    padding: .5rem .35rem;
    display: inline-flex;
    align-items: center;
  }

  .lgb .ftr li a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* --- Type scale ---
     Font size must scale with button WIDTH, not exist in isolation.
     16px is the anchor: it's the size that measured correctly at 390px.
     Never below 14px on anything tappable. Uppercase + letter-spacing reads
     smaller than the same point size in sentence case, so these are floors. */
  .lgb .btn-sched {
    /* 1.0625rem = exactly 17px. The original spec said 1.06rem, which computes
       to 16.96px and fails its own 17px floor by 0.04px. qa/fontcheck.js caught
       it. These are floors, not targets to shave — land ON the number. */
    font-size: 1.0625rem;    /* 17px — full-width primary CTA */
    letter-spacing: .03em;
  }
  .lgb .btn-primary,
  .lgb .btn-alert,
  .lgb .btn-outline {
    font-size: 1rem;         /* 16px — the reference. Never below this on a real CTA. */
  }
  .lgb .card-cta {
    font-size: .95rem;       /* ~15px — content-width */
  }
  .lgb .jump-pill,
  .lgb .svc-link {
    font-size: .9rem;        /* ~14px — navigation, not conversion */
  }
  .lgb .hdr-phone {
    font-size: .9375rem;     /* 15px exactly — .92rem computes to 14.72 and fails */
  }

  /* Display type drops one notch at 480px — text-wrap:balance can't save a
     line that simply doesn't fit. This killed the last stubborn orphan. */
  .lgb .jump { top: 64px; }
}

/* Narrow phones: the header runs out of room and the logo compresses into a
   tall narrow column (measured 75x117 at 390px before this fix). Drop the
   phone's label and tighten the logo to give it back. */
@media (max-width: 620px) {
  .lgb .hdr-bar { gap: .65rem; }
  .lgb .logo { font-size: 1rem; }
  .lgb .logo small { font-size: .5625rem; }
  .lgb .hdr-phone small { display: none; }   /* number alone is self-explanatory */
}

@media (max-width: 480px) {
  .lgb h2, .lgb .sec-title { font-size: 1.75rem; }
  .lgb .hero-title { font-size: 1.8rem; }
  .lgb .area-chip { white-space: normal; }   /* release nowrap where it needs 2 lines */
}

/* Print — service pages get printed and brought in. Make that work. */
@media print {
  .lgb .hdr, .lgb .jump, .lgb .cta-band, .lgb .bridge-band, .lgb .nav-toggle { display: none; }
  .lgb .hero { background: #fff; color: #000; }
  .lgb .hero::after, .lgb .hero-bgimg { display: none; }
  .lgb a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75rem; }
}