/* ==========================================================================
   GM Light 2026 — canonical light photo-led redesign layer
   Source of truth: 01-BRAND/design-systems/GM-Car-AC-Service-Website-design-system-2026.md
   Interaction & a11y rules: ui-ux-pro-max (44px targets, focus-visible,
   150-300ms transitions, prefers-reduced-motion, contrast >= 4.5:1 body text).
   Load LAST (after typography-align.css). Never hides .quick-action-bar,
   .whatsapp-float or .call-float; never touches the gm-2026 declutter block.
   ========================================================================== */

/* ---- 1. Tokens: redefine legacy cosmic/glass vars to the light system ---- */
:root{
  /* GM canonical tokens */
  --gm-white:#ffffff;
  --gm-ink:#102033;
  --gm-navy:#173a61;
  --gm-navy-deep:#102a49;
  --gm-coral:#ef4c3d;          /* action/urgency — buttons & badges only, never body text */
  --gm-coral-ink:#b3271b;      /* darker coral for small text on white (4.5:1+) */
  --gm-green:#127f43;          /* WhatsApp only. 5.07:1 on white; the old #1fae5b was 2.89:1 and failed AA on every WhatsApp CTA */
  --gm-green-deep:#0b6134;
  --gm-muted:#62748a;          /* muted text on white: 4.6:1 */
  --gm-soft:#f3f6f8;
  --gm-line:#dce4ea;
  --gm-radius:14px;
  --gm-btn-radius:8px;
  --gm-maxw:1180px;

  /* Legacy cosmic vars mapped to light (style.css/design-enhancements.css consumers) */
  --cosmic-darkest:#eef3f7;
  --cosmic-navy:var(--gm-soft);
  --cosmic-nebula:var(--gm-navy);
  --cosmic-stellar:var(--gm-navy);
  --cosmic-celestial:var(--gm-navy);
  --cosmic-ice:var(--gm-navy);
  --cosmic-glow:var(--gm-muted);
  --cosmic-starlight:var(--gm-ink);
  --cosmic-card-bg:var(--gm-white);
  --cosmic-body-bg:var(--gm-soft);
  --text-color:var(--gm-muted);
  --glass-bg:rgba(255,255,255,.88);
  --glass-border:1px solid var(--gm-line);
  --glass-shadow:0 6px 24px rgba(16,32,51,.08);
  --glass-backdrop:blur(6px);
  --primary-gradient:linear-gradient(135deg,var(--gm-navy) 0%,var(--gm-navy-deep) 100%);
  --secondary-gradient:linear-gradient(135deg,var(--gm-soft) 0%,var(--gm-white) 100%);
  --surface:var(--gm-white);

  /* z-index scale (skill: z-index-management) */
  --gm-z-bar:30; --gm-z-sticky:40; --gm-z-float:45; --gm-z-nav:50; --gm-z-modal:60;
}

/* ---- 2. Base ---- */
html{scroll-behavior:smooth}
body{
  background:var(--gm-soft) !important;
  color:var(--gm-ink);
  font-size:16px;
  line-height:1.65;
}
body, .gm-light h1,h2,h3,h4,h5,h6, .section-title h2, .section-title span{
  color:var(--gm-ink);
}
h1,h2,h3,h4{font-family:'Lexend','Inter',system-ui,sans-serif;letter-spacing:-.01em;text-wrap:balance}
p,li{color:var(--gm-muted)}
p.lead, .hero-description{color:var(--gm-muted)}
a{color:var(--gm-navy)}
a:hover{color:var(--gm-navy-deep)}
::selection{background:var(--gm-navy);color:#fff}

.container-xl{max-width:var(--gm-maxw)}

/* content sections: default light band */
section{
  background:transparent;
  color:var(--gm-ink);
}
img{max-width:100%;height:auto}

/* Focus visibility (skill: focus-states) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible{
  outline:3px solid var(--gm-navy);
  outline-offset:2px;
  border-radius:6px;
}
:root{--bs-body-color:var(--gm-muted)}

/* Motion discipline (skill: reduced-motion, duration-timing) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
.gm-icon{width:24px;height:24px;display:inline-block;vertical-align:-.35em}

/* ---- 3. Buttons: coral primary, green WhatsApp-only, navy secondary ---- */
.btn, .slider-cta-btn, .slider-cta-btn-outline, .gm-btn, .gm-btn-outline{
  border-radius:var(--gm-btn-radius) !important;
  font-weight:700;
  font-family:'Lexend','Inter',sans-serif;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease;
  min-height:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  cursor:pointer !important;
}
.btn:active, .slider-cta-btn:active{transform:translateY(1px)}
.btn-primary, .slider-cta-btn, .gm-btn-primary{
  background:var(--gm-coral) !important;
  border:1px solid var(--gm-coral) !important;
  color:#fff !important;
  box-shadow:0 2px 10px rgba(239,76,61,.28);
}
.btn-primary:hover, .slider-cta-btn:hover, .gm-btn-primary:hover{
  background:#d93b2c !important;border-color:#d93b2c !important;color:#fff !important;
  box-shadow:0 4px 16px rgba(239,76,61,.34);
}
.btn-success{
  background:var(--gm-green) !important;border:1px solid var(--gm-green) !important;color:#fff !important;
}
.btn-success:hover{background:var(--gm-green-deep) !important;border-color:var(--gm-green-deep) !important}
.btn-outline-primary, .slider-cta-btn-outline, .gm-btn-outline{
  background:var(--gm-white) !important;
  border:1px solid var(--gm-line) !important;
  color:var(--gm-ink) !important;
}
.btn-outline-primary:hover, .slider-cta-btn-outline:hover, .gm-btn-outline:hover{
  border-color:var(--gm-navy) !important;color:var(--gm-navy) !important;background:var(--gm-soft) !important;
}
.btn-whatsapp, a[href*="wa.me"] .btn, .gm-btn-wa{
  background:var(--gm-green) !important;border:1px solid var(--gm-green) !important;color:#fff !important;
}
.btn-link{color:var(--gm-navy) !important}

/* ---- 4. Navbar / header (white, ink links, one coral action) ---- */
.navbar, .review-nav, header.navbar{
  background:var(--gm-white) !important;
  border-bottom:1px solid var(--gm-line);
  min-height:76px;
}
.navbar .nav-link, .navbar-brand, .navbar .dropdown-item{
  color:var(--gm-ink) !important;
}
.navbar .nav-link:hover, .navbar .dropdown-item:hover{
  color:var(--gm-navy) !important;background:var(--gm-soft);
}
.navbar .dropdown-menu{
  background:var(--gm-white);border:1px solid var(--gm-line);border-radius:12px;
  box-shadow:0 12px 32px rgba(16,32,51,.12);
}
.navbar .dropdown-header{color:var(--gm-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.navbar .dropdown-divider{border-color:var(--gm-line)}

/* ---- 5. Announcement + sticky bars ---- */
.gm-announce-bar{background:var(--gm-navy) !important;color:#dbe7f3}
.gm-announce-bar a{color:#fff}
#gm-sticky-bar{
  background:rgba(255,255,255,.95) !important;
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gm-line);
  color:var(--gm-ink);
}

/* ---- 6. Section bands & heroes (photo-led, no gradients) ---- */
.gm-band-soft{background:var(--gm-soft)}
.gm-band-white{background:var(--gm-white)}
.gm-band-navy{background:var(--gm-navy);color:#e8eff6}
.gm-band-navy h2,.gm-band-navy h3,.gm-band-navy p{color:#dbe7f3}
.gm-band-hero{
  background:var(--gm-soft);
  border-bottom:1px solid var(--gm-line);
}
.gm-hero-band{
  background:var(--gm-soft) !important;
  color:var(--gm-ink);
}
/* Photo-led hero: two columns on desktop, stacked on mobile */
@media (min-width: 992px){
  .gm-hero-band-inner{
    display:grid !important;
    grid-template-columns:1.15fr .85fr;
    gap:44px;
    align-items:center;
  }
}
.gm-hero-media img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--gm-radius);
  border:1px solid var(--gm-line);
  box-shadow:0 14px 40px rgba(16,32,51,.14);
}
.gm-hero-media-caption{
  font-size:.8rem;
  color:var(--gm-muted);
  margin-top:8px;
  text-align:center;
}
.gm-hero-band h1{color:var(--gm-ink)}
.gm-trust-strip{
  background:var(--gm-white);
  border-block:1px solid var(--gm-line);
}
.gm-trust-item{color:var(--gm-muted)}
.gm-trust-item b{color:var(--gm-ink)}

/* ---- 7. Cards ---- */
.glass-card-2026, .contact-info-card, .gm-svc-card, .vehicle-card, .cta-section,
.p-4.rounded-4[style*="background"]{
  background:var(--gm-white) !important;
  border:1px solid var(--gm-line) !important;
  border-radius:var(--gm-radius) !important;
  box-shadow:0 1px 3px rgba(16,32,51,.05);
  color:var(--gm-ink);
  backdrop-filter:none;
  transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease;
}
.glass-card-2026:hover, .contact-info-card:hover, .gm-svc-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(16,32,51,.12);
  border-color:#c4d2de;
}
.gm-svc-ic{color:var(--gm-navy)}
.gm-svc-go{color:var(--gm-coral-ink)}
.icon-circle{
  background:var(--gm-soft) !important;
  border:1px solid var(--gm-line);
  color:var(--gm-navy) !important;
  border-radius:12px;
}
.cta-section{background:var(--gm-navy) !important;color:#e8eff6}
.cta-section h2,.cta-section h3,.cta-section p{color:#dbe7f3}
.cta-section .slider-cta-btn-outline{
  background:transparent !important;border-color:rgba(255,255,255,.5) !important;color:#fff !important;
}
.cta-section .slider-cta-btn-outline:hover{background:rgba(255,255,255,.12) !important}

/* ---- 8. Stats, pills, tags ---- */
.stat-item{background:var(--gm-white);border:1px solid var(--gm-line);border-radius:var(--gm-radius);padding:18px}
.stat-number{color:var(--gm-navy) !important;font-family:'Lexend',sans-serif;font-weight:800}
.stat-label{color:var(--gm-muted)}
.stat-icon{color:var(--gm-coral)}
.brand-pill{
  background:var(--gm-white);border:1px solid var(--gm-line);color:var(--gm-muted);
  border-radius:999px;padding:6px 14px;font-size:.82rem;font-weight:600;
}
.vehicle-card{padding:14px}
.vehicle-name{color:var(--gm-ink);font-weight:600}

/* ---- 9. Section titles ---- */
.section-title span{
  color:var(--gm-coral-ink);
  text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700;
  border-bottom:2px solid var(--gm-coral);
  padding-bottom:4px;
}
.section-title h2{color:var(--gm-ink);font-weight:700}
.section-title p{color:var(--gm-muted)}

/* ---- 10. Call assist / symptom selector (index) ---- */
.gm-call-assist{background:var(--gm-white);border:1px solid var(--gm-line);border-radius:var(--gm-radius)}
.gm-call-assist-option{
  background:var(--gm-white);border:1px solid var(--gm-line);border-radius:10px;
  color:var(--gm-ink);font-weight:600;min-height:48px;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,transform .15s ease;
}
.gm-call-assist-option:hover{
  border-color:var(--gm-navy);background:var(--gm-soft);transform:translateY(-1px);
}

/* ---- 11. Forms ---- */
.form-control, .form-select, .gm-fld-input{
  background:var(--gm-white) !important;
  border:1px solid var(--gm-line) !important;
  color:var(--gm-ink) !important;
  border-radius:10px !important;
  min-height:50px;
  font-size:16px;
}
.form-control:focus, .form-select:focus, .gm-fld-input:focus{
  border-color:var(--gm-coral) !important;
  box-shadow:0 0 0 3px rgba(239,76,61,.18) !important;
}
.form-control::placeholder{color:#8a9aad}
.gm-fld-lbl{color:var(--gm-muted);font-weight:600;font-size:.85rem}
.gm-cc-preview-price{color:var(--gm-ink);font-weight:800;font-family:'Lexend',sans-serif}

/* ---- 12. FAQ accordion (classes feed schema-local.js — keep names) ---- */
.accordion-item{
  background:var(--gm-white);border:1px solid var(--gm-line);border-radius:12px !important;
  margin-bottom:10px;overflow:hidden;
}
.accordion-button{
  background:var(--gm-white) !important;color:var(--gm-ink) !important;font-weight:600;
  box-shadow:none;
}
.accordion-button:not(.collapsed){color:var(--gm-navy) !important;background:var(--gm-soft) !important}
.accordion-button::after{filter:none}
.accordion-body, .faq-answer{color:var(--gm-muted);background:var(--gm-white)}
.accordion-collapse{background:var(--gm-white)}

/* ---- 13. Footer (ink) ---- */
footer{
  background:var(--gm-ink) !important;
  color:#c6d2df;
  border-top:1px solid #22364d;
}
footer h4, .footer-heading{color:#fff}
footer a, .footer-links a{color:#c6d2df}
footer a:hover, .footer-links a:hover{color:#fff}
.footer-desk-note{color:#93a5b8}

/* ---- 14. Persistent contact elements — keep visible, on-brand ---- */
.quick-action-bar{
  background:var(--gm-white) !important;
  border-top:1px solid var(--gm-line);
  box-shadow:0 -6px 20px rgba(16,32,51,.12);
}
.quick-action-bar a{min-height:48px}
.whatsapp-float{
  background:var(--gm-green) !important;color:#fff !important;
  box-shadow:0 8px 24px rgba(31,174,91,.4);
}
.whatsapp-float:hover{background:var(--gm-green-deep) !important}
.call-float{
  background:var(--gm-coral) !important;color:#fff !important;
  box-shadow:0 8px 24px rgba(239,76,61,.4);
}
.call-float:hover{background:#d93b2c !important}
#backToTop{background:var(--gm-navy);color:#fff}

/* ---- 15. Utility ---- */
.text-white-50{color:#c6d2df !important}      /* only valid on ink/navy surfaces */
.text-muted{color:var(--gm-muted) !important}
.text-success{color:var(--gm-green-deep) !important}
.text-primary{color:var(--gm-navy) !important}
.bg-primary{background:var(--gm-navy) !important}
.bg-dark{background:var(--gm-ink) !important}
.badge.bg-primary{background:var(--gm-navy) !important}
.btn-sm{min-height:44px}

/* Ensure clickables announce themselves (skill: cursor-pointer) */
a[href^="tel:"], a[href^="https://wa.me"], .dropdown-item, .accordion-button, .clickable{cursor:pointer}

/* ---- 16. Auto-convert legacy dark hero/section gradients (inline styles) ----
   Attribute-scoped: only sections carrying the old cosmic hexes flip to light,
   and their descendant text utilities are re-inked. No markup edits required. */
section[style*="#0a1628"], section[style*="#0A1628"],
section[style*="#0d2d5e"], section[style*="#0D2D5E"],
section[style*="#0d1f3c"], section[style*="#0D1F3C"],
section[style*="#060e1a"], section[style*="#060E1A"]{
  background:var(--gm-soft) !important;
  border-bottom:1px solid var(--gm-line);
}
section[style*="#0a1628"] h1, section[style*="#0a1628"] h2, section[style*="#0a1628"] h3,
section[style*="#0d2d5e"] h1, section[style*="#0d2d5e"] h2, section[style*="#0d2d5e"] h3,
section[style*="#0d1f3c"] h1, section[style*="#0d1f3c"] h2, section[style*="#0d1f3c"] h3,
section[style*="#060e1a"] h1, section[style*="#060e1a"] h2, section[style*="#060e1a"] h3{
  color:var(--gm-ink) !important;
}
section[style*="#0a1628"] .text-white, section[style*="#0A1628"] .text-white,
section[style*="#0d2d5e"] .text-white, section[style*="#0D2D5E"] .text-white,
section[style*="#0d1f3c"] .text-white, section[style*="#0D1F3C"] .text-white,
section[style*="#060e1a"] .text-white, section[style*="#060E1A"] .text-white{
  color:var(--gm-ink) !important;
}
section[style*="#0a1628"] .text-white-50, section[style*="#0d2d5e"] .text-white-50,
section[style*="#0d1f3c"] .text-white-50, section[style*="#060e1a"] .text-white-50{
  color:var(--gm-muted) !important;
}

/* ---- 17. Responsive ---- */
@media (max-width: 768px){
  body{font-size:16px}
  .container-xl{padding-inline:16px}
  .navbar{min-height:64px}
  h1{font-size:clamp(1.7rem,6vw,2.4rem)}
  h2{font-size:clamp(1.4rem,4.5vw,1.9rem)}
}

/* ==========================================================================
   12. Contrast repair — light layer vs. legacy dark theme
   --------------------------------------------------------------------------
   Three root causes, all fixed at source rather than per element:

   1. The surface classifier in chatbot.js never measured white cards that sit
      inside a dark band, so they inherited the band's white text and rendered
      as blank white boxes. Fixed in the JS by listing those card classes.
   2. The same classifier read a 5%-white veil as a light surface, which
      painted the Google review quotes near-black on navy. Fixed in the JS by
      requiring an opaque background before a colour defines the tone.
   3. The rules below: legacy dark panels that the light layer converted only
      halfway — a dark FAQ body inside a white card, dark form fields on a
      light form, an outline-light button on a light band, white on gold.
   ========================================================================== */

/* 12.1 FAQ answers kept a translucent navy panel inside a now-white card. */
main .accordion-item .accordion-body,
main .accordion-item .faq-answer{
  background:transparent !important;
  color:var(--gm-muted) !important;
}
main .accordion-item .accordion-body :is(strong,b){color:var(--gm-ink) !important}
main .accordion-item .accordion-body a:not(.btn){
  color:var(--gm-navy) !important;text-decoration:underline;text-underline-offset:2px;
}
main .accordion-item .accordion-body a:not(.btn):hover{color:var(--gm-coral-ink) !important}

/* 12.2 The estimate form is a light card, so its labels and helper text are
   ink — not the white they inherited from the dark section behind it. */
main .cta-section .gm-fld,
main .cta-section .gm-idx-fld{background:transparent}
main .gm-fld-lbl{color:var(--gm-ink) !important;font-weight:600}
main .gm-fld-input,
main .cta-section :is(input,select,textarea):not([type=hidden]){
  background:var(--gm-white) !important;
  color:var(--gm-ink) !important;
  border:1px solid var(--gm-line) !important;
}
main .cta-section :is(input,select,textarea)::placeholder{color:var(--gm-muted) !important;opacity:1}

/* 12.3 `.btn-outline-light` is only legible on a dark band. On a light one it
   painted navy text on a transparent background over pale grey. */
main .gm-surface-light .btn-outline-light{
  color:var(--gm-navy) !important;border-color:var(--gm-navy) !important;
}
/* The dark rule comes last on purpose: a light island can sit inside a dark
   band, and in that case the band wins for a button that has no fill. */
main .gm-surface-dark .btn-outline-light,
main .gm-surface-dark .gm-surface-light .btn-outline-light{
  color:#fff !important;border-color:rgba(255,255,255,.6) !important;
}
main .gm-surface-dark .btn-outline-light:hover{background:rgba(255,255,255,.14) !important}

/* 12.4 Gold is a surface colour here, never a text colour: white on #d4af37
   is 2.1:1. The Master plan badge and CTA take ink instead. */
/* Repeated class and the dark-band ancestor, so this clears the specificity of
   the `.gm-surface-dark :is(...)` rule in typography-align.css. */
main .gm-cc-preview-badge--master.gm-cc-preview-badge--master,
main .gm-surface-dark .gm-cc-preview-badge--master.gm-cc-preview-badge--master,
main .gm-surface-dark .gm-cc-preview-badge--master span,
main .gm-cc-preview-cta--master.gm-cc-preview-cta--master,
main .gm-surface-dark .gm-cc-preview-cta--master.gm-cc-preview-cta--master{
  color:#0a1628 !important;-webkit-text-fill-color:#0a1628 !important;
}

/* 12.5 `.gm-surface-light` marks an island of light inside a dark band, so it
   needs the light background it promises — it only carried the text colour. */
main .gm-surface-dark .gm-surface-light:not(.btn):not(.badge){
  background:var(--gm-white);
  border:1px solid var(--gm-line);
  border-radius:var(--gm-radius);
}

/* ==========================================================================
   13. Hero — mobile fold and canonical CTA colours
   --------------------------------------------------------------------------
   The hero is photo-led from 992px up, but on a 375px screen the copy block
   ran 1,014px before the photo, so the first screen was an empty grey band:
   no picture, no proof, and the Call button below the fold. The block below
   compacts the copy so both CTAs and the top of the workshop photo land on
   the first screen, and moves the buttons onto the brand tokens — the call
   button was still a legacy #2563eb gradient.
   ========================================================================== */

@media (max-width: 991.98px){
  .gm-hero-band{padding:22px 16px 26px !important}
  .gm-hero-band-inner{display:flex;flex-direction:column;gap:16px}
  .gm-hero-copy{display:flex;flex-direction:column;gap:10px}

  /* Uppercase plus letter-spacing pushed the branch line onto two rows at
     375px. Sentence case fits it on one without cutting either branch name. */
  .gm-hero-eyebrow{
    font-size:.78rem;letter-spacing:0;text-transform:none;line-height:1.3;
    padding:7px 14px;margin:0;align-self:center;max-width:100%;
  }
  .gm-hero-title{font-size:clamp(1.55rem,7vw,2rem) !important;line-height:1.15;margin:0}
  .gm-hero-support{font-size:.95rem;line-height:1.5;margin:0}
  .gm-hero-note{font-size:.82rem !important;line-height:1.45;margin:0 !important}

  .gm-hero-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 0;order:2}
  .gm-hero-cta{
    min-height:50px;font-size:.94rem;padding:12px 10px;
    white-space:nowrap;letter-spacing:-.01em;
  }

  /* `display:contents` lifts the copy's children into the hero flex container
     so the photo can be ordered ahead of the secondary links, which are not
     worth fold space on a phone. */
  .gm-hero-copy{display:contents}
  .gm-hero-eyebrow{order:0}
  .gm-hero-title{order:1}
  .gm-hero-support,.gm-hero-note{order:1}
  .gm-hero-link-row{order:4;font-size:.85rem;gap:12px 16px;flex-wrap:wrap;justify-content:center}

  .gm-hero-media{order:3;margin:0}
  .gm-hero-media img{aspect-ratio:16/10}
  .gm-hero-media-caption{font-size:.75rem}
}

/* Canonical CTA colours. Coral is the action colour; WhatsApp keeps its own
   green because users recognise it as the channel, not as our brand. */
.gm-hero-cta-call,
.gm-hero-cta.gm-hero-cta-call{
  background:var(--gm-coral) !important;
  background-image:none !important;
  color:#fff !important;
  border:1px solid var(--gm-coral) !important;
  box-shadow:0 6px 18px rgba(239,76,61,.28);
}
.gm-hero-cta-call:hover{background:var(--gm-coral-ink) !important;border-color:var(--gm-coral-ink) !important}
.gm-hero-cta-wa,
.gm-hero-cta.gm-hero-cta-wa{
  background:var(--gm-green) !important;
  background-image:none !important;
  color:#fff !important;
  border:1px solid var(--gm-green) !important;
  box-shadow:0 6px 18px rgba(31,174,91,.26);
}
.gm-hero-cta-wa:hover{background:var(--gm-green-deep) !important;border-color:var(--gm-green-deep) !important}
.gm-hero-cta{border-radius:var(--gm-btn-radius);font-weight:700;transition:background .18s ease,box-shadow .2s ease}
.gm-hero-cta:focus-visible{outline:3px solid var(--gm-navy);outline-offset:2px}

/* ==========================================================================
   14. /pricing — the page the ads land on
   --------------------------------------------------------------------------
   Someone arriving from an ad clicked because of a price, so the price has to
   be the first thing on the screen. It was 1,250px down behind a breadcrumb,
   a badge, a display heading, a lead paragraph and two stacked full-width
   buttons. The peek list puts the three numbers that matter above the fold,
   and the table stops being a table on a phone: three columns at 375px
   wrapped "AC Gas Filling — Single Module" onto three lines and broke the
   alignment between a service and its price.
   ========================================================================== */

.gm-price-peek{
  list-style:none;margin:20px 0 10px;padding:0;
  display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.gm-price-peek li{
  background:var(--gm-white);
  border:1px solid var(--gm-line);
  border-left:4px solid var(--gm-coral);
  border-radius:var(--gm-radius);
  padding:12px 14px;
  display:flex;flex-direction:column;gap:2px;
}
.gm-price-peek-val{
  font-family:'Lexend',system-ui,sans-serif;
  font-size:1.5rem;font-weight:800;line-height:1.1;color:var(--gm-navy);
}
.gm-price-peek-lbl{font-size:.83rem;line-height:1.4;color:var(--gm-muted)}
.gm-price-peek-note{font-size:.83rem;line-height:1.55;color:var(--gm-muted);margin:6px 0 0;max-width:62ch}

/* The price table, as a light surface rather than the legacy dark one. */
main .table-responsive{border-color:var(--gm-line) !important;background:var(--gm-white)}
main table.table-dark{
  background:var(--gm-white) !important;
  color:var(--gm-ink) !important;
  --bs-table-bg:transparent;--bs-table-color:var(--gm-ink);
  --bs-table-border-color:var(--gm-line);--bs-table-striped-color:var(--gm-ink);
}
main table.table-dark :is(th,td){
  background:transparent !important;color:var(--gm-ink) !important;
  border-color:var(--gm-line) !important;vertical-align:top;
}
main table.table-dark thead th{
  background:var(--gm-soft) !important;
  font-weight:700;letter-spacing:.01em;white-space:nowrap;
}
main table.table-dark td.text-danger,
main table.table-dark td .text-danger{color:var(--gm-coral-ink) !important;font-weight:800}
main table.table-dark td em{color:var(--gm-muted) !important;font-style:normal;display:block;margin-top:4px;font-size:.85em}

/* Below 768px each row becomes a card: service name, then price, then scope,
   each labelled by the header it came from. */
@media (max-width: 767.98px){
  main table.table-dark,
  main table.table-dark tbody,
  main table.table-dark tr,
  main table.table-dark td{display:block;width:100%}
  main table.table-dark thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  main table.table-dark tr{
    border:1px solid var(--gm-line);border-radius:var(--gm-radius);
    padding:12px 14px;margin-bottom:10px;background:var(--gm-white);
  }
  main table.table-dark td{border:0 !important;padding:4px 0}
  main table.table-dark td[data-label]::before{
    content:attr(data-label);
    display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
    font-weight:700;color:var(--gm-muted);margin-bottom:2px;
  }
  main table.table-dark td[data-label="Price"]{font-size:1.25rem}
  .gm-price-peek-val{font-size:1.35rem}
}

/* 14.1 Ad traffic reads the number, then acts. On a phone the price cards move
   above the buttons, and the hero stops spending 400px on a breadcrumb, a
   display heading and a five-line lead before the first rupee sign. */
@media (max-width: 767.98px){
  body[data-gm-page="pricing"] .breadcrumb{margin-bottom:.25rem;font-size:.8rem}
  .gm-price-hero{display:flex;flex-direction:column}
  .gm-price-hero > h1{order:1;font-size:clamp(1.5rem,6.4vw,1.95rem) !important;line-height:1.18;margin-bottom:.5rem !important}
  .gm-price-hero > .badge{order:0;align-self:flex-start}
  .gm-price-hero > .lead{order:2;font-size:.95rem !important;line-height:1.5;margin-bottom:.85rem !important}
  .gm-price-hero > .gm-price-peek{order:3;margin:0 0 12px}
  .gm-price-hero > .d-flex{order:4}
  .gm-price-hero > .gm-price-peek-note{order:5;margin-top:10px}
  .gm-price-hero .btn-lg{width:100%;font-size:1rem;padding:12px 16px}
}

/* ==========================================================================
   16. 3D scroll
   --------------------------------------------------------------------------
   Cards arrive with a small rotation and a push back in Z, then settle flat as
   they cross into view. `.gm-3d-on` is set by interactive.js only when the
   visitor has not asked for reduced motion, so the resting state below is the
   plain, flat page for everyone else — nothing is hidden without the JS.
   ========================================================================== */

.gm-3d-on .gm-px-section,
.gm-3d-on .gm-locations,
.gm-3d-on .gm-hero-photo-band,
.gm-3d-on #workshop-photos,
.gm-3d-on .gm-price-peek,
.gm-3d-on .table-responsive{
  perspective:1200px;
  perspective-origin:50% 40%;
}

.gm-3d-on .gm-3d{
  opacity:0;
  transform:translate3d(0,34px,-60px) rotateX(7deg) scale(.985);
  transform-origin:50% 100%;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1);
  will-change:transform,opacity;
}
.gm-3d-on .gm-3d.gm-3d-in{
  opacity:1;
  transform:translate3d(0,0,0) rotateX(0) scale(1);
}
/* Release the compositor hint once the element has landed. */
.gm-3d-on .gm-3d.gm-3d-in{will-change:auto}

/* Depth on hover, only where a pointer can actually hover. */
@media (hover: hover) and (pointer: fine){
  .gm-3d-on .gm-svc-card.gm-3d-in:hover,
  .gm-3d-on .gm-cc-preview-card.gm-3d-in:hover,
  .gm-3d-on .glass-card-2026.gm-3d-in:hover{
    transform:translate3d(0,-6px,26px) rotateX(-1.5deg);
  }
}

@media (prefers-reduced-motion: reduce){
  .gm-3d-on .gm-3d,
  .gm-3d-on .gm-3d.gm-3d-in{opacity:1;transform:none;transition:none}
  [data-gm-parallax]{transform:none !important}
}

/* ==========================================================================
   18. BRAND DARK BANDS ON A LIGHT CANVAS
   Requested direction: dark blue / black chrome and bands, white canvas for
   reading, blue accents, green + red calls to action.

   The canvas stays white because 01-BRAND/BRAND-GUIDE.md defines
   --gm-white as the primary background. What changes is the chrome and the
   bands: header, hero, CTA sections and footer become the brand's darkest
   navy so the page reads as GM's colours rather than as a plain white page.

   This section deliberately runs LAST and reverses part of section 16 above.
   Section 16 flipped every legacy `section[style*="#0a1628"]` to --gm-soft so
   those bands would re-ink themselves with no markup edits. That was the right
   move for a fully light site; for a banded site those sections are exactly
   the bands we want, and their markup already carries the correct hex.

   Contrast, measured, white on the band colours below: #0a0f16 19.22:1,
   #0a1628 18.13:1, muted #c7d6e5 on #0a1628 12.24:1, accent #8ec5ff 10:1.
   ========================================================================== */
:root{
  --gm-black:#0a0f16;          /* header and footer — the darkest step */
  --gm-band:#0a1628;           /* section bands; matches the hex already in the markup */
  --gm-band-2:#0d2d5e;         /* second gradient stop, also already in the markup */
  --gm-on-dark:#ffffff;
  --gm-on-dark-muted:#c7d6e5;  /* 12.24:1 on --gm-band */
  --gm-accent-blue:#8ec5ff;    /* links on dark: 10:1 on --gm-band */
  --gm-coral-btn:#d13122;      /* filled red CTA. Brand --gm-coral #ef4c3d carries
                                  white text at only 3.64:1; this is 5.03:1 and
                                  keeps the same hue family. */
}

/* -- 18.1 Header: dark chrome -------------------------------------------- */
.navbar, .navbar.nav-2026, .navbar.review-nav, .review-nav, header.navbar{
  background:var(--gm-black) !important;
  border-bottom:1px solid #1c2a3a !important;
}
/* Three classes deep: gm-2026.css pins `.navbar .nav-link` to --gm-text and
   typography-align.css redefines --gm-text to #111111, so a two-class rule
   ties and the links stay near-black on the dark header. */
.navbar .navbar-nav .nav-link, .navbar .navbar-nav .nav-link span,
.navbar .navbar-nav .dropdown-toggle, .navbar > .container-xl .navbar-brand{
  color:var(--gm-on-dark) !important;
  -webkit-text-fill-color:var(--gm-on-dark) !important;
}
/* typography-align.css pins the brand wordmark and `.navbar .nav-link span`
   to #111111; on dark chrome that is the wordmark invisible against its own
   header. One extra class clears it. */
.navbar .navbar-brand .navbar-brand-name, header .navbar-brand .navbar-brand-name{color:var(--gm-on-dark) !important;-webkit-text-fill-color:var(--gm-on-dark) !important;}
.navbar .nav-link span, .navbar .navbar-brand span{color:inherit !important;-webkit-text-fill-color:inherit !important;}
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover span, .navbar .navbar-nav .nav-link.active span{
  color:var(--gm-accent-blue) !important;
  -webkit-text-fill-color:var(--gm-accent-blue) !important;
  background:transparent !important;
}
/* The dropdown is a light island deliberately — a long menu is easier to read
   on white, and it sits over page content rather than over the header. */
.navbar .dropdown-menu{background:var(--gm-white) !important;border:1px solid var(--gm-line) !important;}
.navbar .dropdown-menu .dropdown-item, .navbar .dropdown-menu .dropdown-item span{
  color:var(--gm-ink) !important;-webkit-text-fill-color:var(--gm-ink) !important;}
.navbar .dropdown-item:hover{color:var(--gm-navy) !important;background:var(--gm-soft) !important;}
.navbar .dropdown-header{color:var(--gm-muted) !important;}
.navbar-toggler{border-color:#2c3e52 !important;}
.navbar-toggler-icon, .nav-toggler-icon{
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff) !important;
}

/* -- 18.2 The bands ------------------------------------------------------- */
/* Reverses 16's flip: these sections keep the dark gradient their markup
   already declares. `background` is restated rather than removed so the rule
   wins wherever an inline style is absent. */
section[style*="#0a1628"], section[style*="#0A1628"],
section[style*="#0d2d5e"], section[style*="#0D2D5E"],
section[style*="#0d1f3c"], section[style*="#0D1F3C"],
section[style*="#060e1a"], section[style*="#060E1A"],
.gm-hero-band, .gm-band-hero{
  background:linear-gradient(135deg, var(--gm-band) 0%, var(--gm-band-2) 100%) !important;
  border-bottom:0 !important;
}

/* Text on the bands. These selectors carry one class more than
   typography-align.css section 43 (`main h1`, `main p`, …), which forces
   #111111 with -webkit-text-fill-color on everything inside main — without the
   extra class the bands would render near-black on near-black. */
main section[style*="#0a1628"] :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,strong,em,td,th,blockquote,figcaption),
main section[style*="#0d2d5e"] :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,strong,em,td,th,blockquote,figcaption),
main section[style*="#0d1f3c"] :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,strong,em,td,th,blockquote,figcaption),
main section[style*="#060e1a"] :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,strong,em,td,th,blockquote,figcaption),
main .gm-hero-band :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,em),
main .gm-band-hero :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,em){
  color:var(--gm-on-dark) !important;
  -webkit-text-fill-color:var(--gm-on-dark) !important;
}
main .gm-hero-band .text-muted,
main section[style*="#0a1628"] .text-muted, main section[style*="#0a1628"] small,
main .gm-hero-band small{
  color:var(--gm-on-dark-muted) !important;
  -webkit-text-fill-color:var(--gm-on-dark-muted) !important;
}
/* Plain links on a band, excluding anything shaped like a button. */
main section[style*="#0a1628"] a:not([class*="btn"]):not([class*="cta"]),
main .gm-hero-band a:not([class*="btn"]):not([class*="cta"]){
  color:var(--gm-accent-blue) !important;
  -webkit-text-fill-color:var(--gm-accent-blue) !important;
}

/* An island of light inside a band keeps its own dark ink (section 12.5). */
/* -- 18.3 Calls to action: red primary, green WhatsApp -------------------- */
.btn-primary, .btn.btn-primary, .cta-btn, .slider-cta-btn, .gm-submit-btn,
.navbar .btn-primary, .navbar .btn.btn-primary{
  background:var(--gm-coral-btn) !important;
  border-color:var(--gm-coral-btn) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.btn-primary:hover, .btn.btn-primary:hover, .cta-btn:hover,
.navbar .btn-primary:hover{background:#b3271b !important;border-color:#b3271b !important;}

.btn-success, a.btn-success, a[href*="wa.me"].btn, .qab-whatsapp{
  background:var(--gm-green) !important;
  border-color:var(--gm-green) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.btn-success:hover, a[href*="wa.me"].btn:hover{background:var(--gm-green-deep) !important;border-color:var(--gm-green-deep) !important;}

/* Outline buttons sitting on a band need a light edge, not the ink one. */
main section[style*="#0a1628"] .btn-outline-light,
main .gm-hero-band .btn-outline-light,
main section[style*="#0a1628"] .slider-cta-btn-outline,
main .gm-hero-band .slider-cta-btn-outline{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.6) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* -- 18.4 Footer: darkest step ------------------------------------------- */
footer, .footer-2026{
  background:var(--gm-black) !important;
  border-top:1px solid #1c2a3a !important;
}
footer :is(p,li,span,td,th,small){color:var(--gm-on-dark-muted) !important;-webkit-text-fill-color:var(--gm-on-dark-muted) !important;}
footer :is(h4,h5,.footer-heading){color:var(--gm-on-dark) !important;-webkit-text-fill-color:var(--gm-on-dark) !important;}
footer a, .footer-links a{color:var(--gm-on-dark-muted) !important;-webkit-text-fill-color:var(--gm-on-dark-muted) !important;}
footer a:hover, .footer-links a:hover{color:var(--gm-accent-blue) !important;-webkit-text-fill-color:var(--gm-accent-blue) !important;}

/* -- 18.5 Light islands and controls sit ABOVE the band rules -------------
   Specificity matters more than order here. A band rule reads
   `main section[attr] :is(h1,…)` = (0,1,3). An override written as
   `main :is(label,…)` is only (0,1,1) and loses, which painted form labels
   white on their own white chips. Repeating the band ancestor lifts these to
   (0,2,3) so anything drawing its own light surface — a white card, a glass
   card, a form control — keeps ink text on it. */
main :is(section[style*="#0a1628"],section[style*="#0A1628"],section[style*="#0d2d5e"],section[style*="#0D2D5E"],section[style*="#0d1f3c"],section[style*="#060e1a"],.gm-hero-band,.gm-band-hero)
  :is(.gm-surface-light,.glass-card-2026,.cta-section,.card,.gm-svc-card,label,.gm-fld-lbl,.form-label,.form-control,.form-select,.gm-fld-input,input,textarea,select,option),
main :is(section[style*="#0a1628"],section[style*="#0A1628"],section[style*="#0d2d5e"],section[style*="#0D2D5E"],section[style*="#0d1f3c"],section[style*="#060e1a"],.gm-hero-band,.gm-band-hero)
  :is(.gm-surface-light,.glass-card-2026,.cta-section,.card,.gm-svc-card,label,.gm-fld-lbl)
  :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,strong,em,b,small,label,td,th,figcaption){
  color:var(--gm-ink) !important;
  -webkit-text-fill-color:var(--gm-ink) !important;
}
/* Muted copy inside those islands stays muted rather than full ink. */
main :is(section[style*="#0a1628"],section[style*="#0d2d5e"],.gm-hero-band,.gm-band-hero)
  :is(.gm-surface-light,.glass-card-2026,.cta-section,.card,.gm-svc-card)
  :is(.text-muted,.text-white-50,small){
  color:var(--gm-muted) !important;
  -webkit-text-fill-color:var(--gm-muted) !important;
}
/* Required-field marker keeps the action red on its white chip. */
main .gm-fld-req{color:var(--gm-coral-btn) !important;-webkit-text-fill-color:var(--gm-coral-btn) !important;}
main :is(.form-control,.form-select,.gm-fld-input)::placeholder{color:var(--gm-muted) !important;-webkit-text-fill-color:var(--gm-muted) !important;}

/* Cards outside any band keep ink too — typography-align.css already inks
   them, this only guards the ones the card rules paint white. */
main :is(.gm-surface-light,.glass-card-2026) :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,label){
  color:var(--gm-ink) !important;
  -webkit-text-fill-color:var(--gm-ink) !important;
}

/* -- 18.6 Light chips inside a JS-classified dark surface -----------------
   chatbot.js adds .gm-surface-dark to any section it measures as dark, and
   typography-align.css then paints that section's text white. Elements that
   draw their own light background inside such a section — floating form
   labels, white cards — were left white-on-white. Measured on the homepage
   before this rule: 35 elements below 4.5:1, most of them this one bug.
   (0,1,2) clears the (0,1,1) surface rules it has to beat. */
main .gm-surface-dark :is(label,.gm-fld-lbl,.form-label,.form-control,.form-select,.gm-fld-input,input,textarea,select,option,.gm-surface-light,.glass-card-2026,.card,.gm-svc-card),
main .gm-surface-dark :is(label,.gm-fld-lbl,.gm-surface-light,.glass-card-2026,.card,.gm-svc-card) :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,strong,em,b,small,label,td,th){
  color:var(--gm-ink) !important;
  -webkit-text-fill-color:var(--gm-ink) !important;
}
main .gm-surface-dark :is(.gm-surface-light,.glass-card-2026,.card) :is(.text-muted,small){
  color:var(--gm-muted) !important;
  -webkit-text-fill-color:var(--gm-muted) !important;
}

/* -- 18.7 Nav link colour, last word --------------------------------------
   typography-align.css carries `body header .navbar .nav-link.active` (0,3,2)
   and a stack of two-class nav rules that pin link text to #111111 through
   --gm-text. Repeating .navbar lifts these to (0,4,x) so the header links are
   legible on the dark chrome without touching that file. */
.navbar.navbar .navbar-nav .nav-link,
.navbar.navbar .navbar-nav .nav-link span,
body header .navbar.navbar .nav-link,
body header .navbar.navbar .nav-link span,
body header .navbar.navbar .nav-link.active,
body header .navbar.navbar .nav-link.active span{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
body header .navbar.navbar .nav-link:hover,
body header .navbar.navbar .nav-link:hover span,
body header .navbar.navbar .nav-link.active,
body header .navbar.navbar .nav-link.active span{
  color:var(--gm-accent-blue) !important;
  -webkit-text-fill-color:var(--gm-accent-blue) !important;
}
/* The dropdown panel stays a light island, so its items stay ink. */
.navbar.navbar .dropdown-menu .dropdown-item,
.navbar.navbar .dropdown-menu .dropdown-item span{
  color:var(--gm-ink) !important;-webkit-text-fill-color:var(--gm-ink) !important;
}

/* -- 18.8 Remaining CTA classes ------------------------------------------
   The locations pages use .gm-btn-primary rather than .btn-primary, so they
   kept the old coral at 3.64:1 with white text. */
.gm-btn-primary, a.gm-btn-primary{
  background:var(--gm-coral-btn) !important;
  border-color:var(--gm-coral-btn) !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
.gm-btn-primary:hover, a.gm-btn-primary:hover{background:#b3271b !important;border-color:#b3271b !important;}

/* `.btn-outline-light` means "light text on a dark surface". Outside a dark
   band that reads as white on white, so it flips to the ink treatment. */
main .btn-outline-light:not(.gm-surface-dark .btn-outline-light){
  color:var(--gm-ink) !important;-webkit-text-fill-color:var(--gm-ink) !important;
  border-color:var(--gm-line) !important;
}
main :is(.gm-surface-dark,.gm-hero-band,.gm-band-hero,section[style*="#0a1628"],section[style*="#0d2d5e"]) .btn-outline-light{
  color:#fff !important;-webkit-text-fill-color:#fff !important;
  border-color:rgba(255,255,255,.6) !important;
}

/* -- 18.9 Nav and CTA card, markup-independent ---------------------------
   18.7 leaned on .navbar-nav and a <header> ancestor; not every template has
   both, so non-active links stayed near-black on the dark chrome. Keying only
   off .navbar (doubled for weight) reaches every template. */
.navbar.navbar .nav-link, .navbar.navbar a.nav-link,
.navbar.navbar .nav-link span, .navbar.navbar .navbar-brand{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
.navbar.navbar .dropdown-menu .dropdown-item,
.navbar.navbar .dropdown-menu .dropdown-item span,
.navbar.navbar .dropdown-menu .dropdown-header{
  color:var(--gm-ink) !important;-webkit-text-fill-color:var(--gm-ink) !important;
}
.navbar.navbar .dropdown-menu .dropdown-header{color:var(--gm-muted) !important;-webkit-text-fill-color:var(--gm-muted) !important;}

/* Section 7 styles .cta-section as a white card. Its copy was still being
   painted white — the card and the text disagreed about which surface it was.
   The card wins: ink on white. */
main .cta-section.cta-section,
main .cta-section.cta-section :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,em,b,label,td,th){
  color:var(--gm-ink) !important;
  -webkit-text-fill-color:var(--gm-ink) !important;
}
main .cta-section.cta-section :is(.text-muted,.text-white-50,small){
  color:var(--gm-muted) !important;-webkit-text-fill-color:var(--gm-muted) !important;
}
main .cta-section.cta-section :is(.btn,.cta-btn,.gm-btn-primary,a[href*="wa.me"]),
main .cta-section.cta-section :is(.btn,.cta-btn,.gm-btn-primary) span{
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}

/* -- 18.10 .btn-danger is a red CTA too ----------------------------------
   Several pages call the phone button .btn-danger rather than .btn-primary,
   so it kept Bootstrap's/the brand's lighter red at 3.64:1 with white text. */
.btn-danger, a.btn-danger, .btn.btn-danger{
  background:var(--gm-coral-btn) !important;
  border-color:var(--gm-coral-btn) !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
.btn-danger:hover, a.btn-danger:hover{background:#b3271b !important;border-color:#b3271b !important;}

/* -- 18.11 The hero estimate form's floating labels -----------------------
   gm-2026.css:1077 gives every .gm-fld-lbl `background:#fff` — a floating
   label needs an opaque chip to notch the input's border, and on a white page
   white is the right chip. The hero form sits inside
   .cta-section.gm-surface-dark, where the contextual system correctly paints
   label text with var(--gm-on-dark): white text on a white chip, so the Name
   and Phone labels vanished. The Service and Symptom labels in the same form
   were always fine because they carry no chip.

   Dropping the chip inside a dark surface fixes it at the cause and makes all
   four labels match, instead of forcing ink onto a chip that should not be
   there. The input keeps its own white field, so its text is inked explicitly. */
main .gm-surface-dark .gm-fld-lbl.gm-fld-lbl,
main .cta-section .gm-fld-lbl.gm-fld-lbl{
  background:transparent !important;
}
main .gm-surface-dark .gm-fld-input.gm-fld-input,
main .cta-section .gm-fld-input.gm-fld-input{
  color:#102033 !important;
  -webkit-text-fill-color:#102033 !important;
}
main .gm-surface-dark .gm-fld-input.gm-fld-input::placeholder,
main .cta-section .gm-fld-input.gm-fld-input::placeholder{
  color:#5b6a75 !important;
  -webkit-text-fill-color:#5b6a75 !important;
}

/* -- 18.12 A light card is light, including its own text ------------------
   .gm-svc-card carries .gm-surface-light, so the card is white — but the
   earlier island rules only re-inked its descendants, never the element
   itself, and the card's text lives directly on the <a>. Doubling the class
   clears the (0,2,3) band rules above. */
main .gm-surface-light.gm-surface-light.gm-surface-light,
main .gm-surface-light.gm-surface-light.gm-surface-light :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,em,b,small,label,td,th,div){
  color:#102033 !important;
  -webkit-text-fill-color:#102033 !important;
}
main .gm-surface-light.gm-surface-light.gm-surface-light :is(.text-muted,.text-white-50,small,.gm-svc-card-desc){
  color:#5b6a75 !important;
  -webkit-text-fill-color:#5b6a75 !important;
}