/**
 * Public site: single light appearance only (no dark mode branch).
 */
/* -------------------------------------------------------------------------- */
/* Document chrome — surfaces, text, accents (html scope)                      */
/* -------------------------------------------------------------------------- */
html {
  color-scheme: light;
  --color-bg: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-muted: #f1f5f9;
  --color-surface: #ffffff;
  --color-surface-2: #f0f3f6;
  --color-border: rgba(15, 23, 42, 0.12);
  --color-border-strong: rgba(15, 23, 42, 0.2);
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-subtle: #64748b;
  --color-heading: #0b1220;
  --color-link: var(--green-600);
  --color-link-hover: var(--green-500);
  --color-accent: var(--green-600);
  --color-accent-soft: rgba(234, 71, 4, 0.12);
  --color-focus-ring: rgba(234, 71, 4, 0.45);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
  --hero-overlay: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(240, 245, 250, 0.88) 50%,
    rgba(232, 240, 248, 0.9) 100%
  );
  --hero-text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);

  /* Legacy tokens.css aliases (nav/hero keep --text-on-dark*) */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-heading: #0b1220;
  --text-body: #334155;
  --body-bg-color: #ffffff;
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-elevated: #f8fafc;
  --border-color: #e2e8f0;
  --light: #f8fafc;
  --surface: #ffffff;
  --bg-main: #ffffff;
  --bg-light: #f1f5f9;
  --section-divider-line: rgba(15, 23, 42, 0.1);
  --strip-overlay: rgba(26, 82, 118, 0.07);
  --strip-overlay-strong: rgba(26, 82, 118, 0.12);
  /* Legacy strip-feedback tokens (home-feedback strip now uses the shared bg-secondary utility like get_booked). */
  --strip-feedback-bg: color-mix(in srgb, var(--color-surface-elevated) 88%, var(--primary) 9%);
  --strip-feedback-text: var(--color-heading);
  --strip-feedback-border: var(--color-border);
  --shadow-card: 0 2px 12px rgba(15, 23, 42, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(15, 23, 42, 0.1);
  --blog-preview-hover: rgba(15, 23, 42, 0.04);
}

/*
 * .btn-secondary uses near-black --secondary from tokens; default appearance maps --color-text-primary to
 * slate body type → dark label on dark fill (e.g. gallery show “Back to Gallery”). Keep light copy on the dark chip; hover uses primary fill + white.
 */
html .btn-secondary {
  color: var(--text-on-dark-strong);
}
html .btn-secondary:hover,
html .btn-secondary:focus-visible {
  color: var(--text-on-green);
}

/*
 * tokens.css scopes .faq-new with --color-text-primary: var(--text-on-green) (white) for dark UI.
 * On default appearance that makes headings/body that use --color-text-primary illegible on the pale gradient.
 */
html .faq-new,
html #faqpage-new {
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
}

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

/* Explicit body canvas for all public page-* shells (avoids edge cases where nested tokens lag). */
html body:is(.page-home, .page-services, .page-contact, .page-booking, .page-about, .page-blog-index, .page-blog-show, .page-gallery, .page-gallery-show, .page-areas-index, .page-areas-hub, .page-areas-show, .page-feedback, .page-faq, .page-training-index, .page-training-view, .page-careers-index, .page-careers-view, .page-careers-apply, .page-careers-thankyou, .page-error, .page-generic, .page-policy, .page-why-choose-us) {
  background: var(--body-bg-color);
  background-attachment: scroll;
}

/*
 * Default appearance: white-first shell; subtle primary-tint radial wash on gradient wrappers.
 */
html .page-inner__content-bg--gradient,
html .page-home__content-bg--gradient {
  background: #ffffff;
  background-attachment: scroll;
}

html .page-inner__content-bg--gradient::before,
html .page-home__content-bg--gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 120% 80% at 50% 0%,
    rgba(26, 82, 118, 0.06) 0%,
    transparent 55%
  );
}

html .page-inner__content-bg--gradient::after,
html .page-home__content-bg--gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 100% 60% at 50% 100%,
    rgba(26, 82, 118, 0.05) 0%,
    transparent 50%
  );
}

html .page-inner__content-bg--gradient #main-content,
html .page-home__content-bg--gradient #main-content {
  background-color: #ffffff;
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #fafbfc 45%,
    #f8fafc 100%
  );
  background-attachment: scroll;
}

/* Inner gradient pages: public.css forces .bg-light to green-900 — restore real light surfaces when theme is light */
html .page-inner__content-bg--gradient .bg-light,
html .page-home__content-bg--gradient .bg-light {
  background-color: var(--color-bg-muted) !important;
}

/*
 * public.css sets gradient main .text-muted / .lead.text-muted to --text-on-dark-muted (for green-900 .bg-light).
 * Default appearance restores real pale .bg-light / .bg-white — without this reset, muted copy is nearly white on gray (e.g. /quote “What to Expect”).
 */
html .page-inner__content-bg--gradient main .bg-light .text-muted,
html .page-inner__content-bg--gradient main .bg-light .lead.text-muted,
html .page-inner__content-bg--gradient main .bg-white .text-muted,
html .page-inner__content-bg--gradient main .bg-white .lead.text-muted,
html .page-home__content-bg--gradient main .bg-light .text-muted,
html .page-home__content-bg--gradient main .bg-light .lead.text-muted,
html .page-home__content-bg--gradient main .bg-white .text-muted,
html .page-home__content-bg--gradient main .bg-white .lead.text-muted {
  color: var(--color-text-muted) !important;
}

html .page-inner__content-bg--gradient .bg-white,
html .page-home__content-bg--gradient .bg-white {
  background-color: var(--color-surface) !important;
}

/*
 * Light canvas + gradient shell: public.css sets main links to --text-on-dark-strong (still pale in tokens).
 * Applies to every inner/home gradient layout (services, gallery, careers, training, errors, etc.).
 * More specific blocks below (FAQ, blog cards, showcase tiles) override where needed.
 * Exclude .page-link so Mirage pagination components keep their own colors; the main link
 * rule’s many :not() clauses otherwise out-specificity the pagination overrides.
 */
html .page-inner__content-bg--gradient main a:not(.btn):not(.quick-quote-btn):not(.blog-list-card__link):not(.blog-list-card__category-badge):not(.gallery-page__caption-link):not(.blog-posts-list__link):not(.page-link),
html .page-home__content-bg--gradient main a:not(.btn):not(.quick-quote-btn):not(.blog-list-card__link):not(.blog-list-card__category-badge):not(.gallery-page__caption-link):not(.blog-posts-list__link):not(.page-link) {
  color: var(--color-link) !important;
}
html .page-inner__content-bg--gradient main a:not(.btn):not(.quick-quote-btn):not(.blog-list-card__link):not(.blog-list-card__category-badge):not(.gallery-page__caption-link):not(.blog-posts-list__link):not(.page-link):hover,
html .page-home__content-bg--gradient main a:not(.btn):not(.quick-quote-btn):not(.blog-list-card__link):not(.blog-list-card__category-badge):not(.gallery-page__caption-link):not(.blog-posts-list__link):not(.page-link):hover {
  color: var(--color-link-hover) !important;
}

/* Mirage pagination: active page uses primary fill - keep label white on primary background. */
html .page-inner__content-bg--gradient main .pagination .page-item.active .page-link,
html .page-inner__content-bg--gradient main .pagination .page-item.active a.page-link,
html .page-home__content-bg--gradient main .pagination .page-item.active .page-link,
html .page-home__content-bg--gradient main .pagination .page-item.active a.page-link {
  color: var(--text-on-green, #fff) !important;
}
html .page-inner__content-bg--gradient main .pagination .page-item.active a.page-link:hover,
html .page-home__content-bg--gradient main .pagination .page-item.active a.page-link:hover {
  color: var(--text-on-green, #fff) !important;
}

/* Dark strips inside main (default appearance canvas): keep links legible on green/dark sections */
html .page-inner__content-bg--gradient main .section--dark a:not(.btn),
html .page-home__content-bg--gradient main .section--dark a:not(.btn) {
  color: var(--text-on-dark-strong) !important;
}
html .page-inner__content-bg--gradient main .section--dark a:not(.btn):hover,
html .page-home__content-bg--gradient main .section--dark a:not(.btn):hover {
  color: var(--color-accent) !important;
}

/* Breadcrumbs in gradient main: keep slate on light #main-content (inner + home) */
html .page-inner__content-bg--gradient main .breadcrumb,
html .page-inner__content-bg--gradient main .breadcrumb-item,
html .page-home__content-bg--gradient main .breadcrumb,
html .page-home__content-bg--gradient main .breadcrumb-item {
  color: var(--text-muted) !important;
}
html .page-inner__content-bg--gradient main .breadcrumb-item a:not(.btn),
html .page-home__content-bg--gradient main .breadcrumb-item a:not(.btn) {
  color: var(--color-link) !important;
}
html .page-inner__content-bg--gradient main .breadcrumb-item a:not(.btn):hover,
html .page-home__content-bg--gradient main .breadcrumb-item a:not(.btn):hover {
  color: var(--color-link-hover) !important;
}
html .page-inner__content-bg--gradient main .breadcrumb-item.active,
html .page-home__content-bg--gradient main .breadcrumb-item.active {
  color: var(--text-muted) !important;
}
html .page-inner__content-bg--gradient main .breadcrumb-item + .breadcrumb-item::before,
html .page-home__content-bg--gradient main .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted) !important;
}

/*
 * Gradient inner pages: public.css forces .alert-* to dark-tinted panels + var(--color-text-primary).
 * In default appearance --color-text-primary resolves to dark slate while backgrounds stay dark-mixed → unreadable.
 */
html .page-inner__content-bg--gradient .alert-success,
html .page-home__content-bg--gradient .alert-success {
  color: color-mix(in srgb, var(--success) 30%, black) !important;
  background-color: color-mix(in srgb, var(--success) 15%, white) !important;
  border-color: color-mix(in srgb, var(--success) 35%, white) !important;
}
html .page-inner__content-bg--gradient .alert-danger,
html .page-home__content-bg--gradient .alert-danger {
  color: color-mix(in srgb, var(--error) 40%, black) !important;
  background-color: color-mix(in srgb, var(--error) 12%, white) !important;
  border-color: color-mix(in srgb, var(--error) 25%, white) !important;
}
html .page-inner__content-bg--gradient .alert-info,
html .page-home__content-bg--gradient .alert-info {
  color: color-mix(in srgb, var(--info) 35%, black) !important;
  background-color: color-mix(in srgb, var(--info) 15%, white) !important;
  border-color: color-mix(in srgb, var(--info) 30%, white) !important;
}
html .page-inner__content-bg--gradient .alert-warning,
html .page-home__content-bg--gradient .alert-warning {
  color: color-mix(in srgb, var(--warning) 35%, black) !important;
  background-color: color-mix(in srgb, var(--warning) 15%, white) !important;
  border-color: color-mix(in srgb, var(--warning) 30%, white) !important;
}

/*
 * Inner layouts that force a transparent .page-inner__content-bg--gradient (contact, services,
 * booking, estimator): suppress wrapper vignette so body / #main-content light canvas shows cleanly.
 */
html .page-contact .page-inner__content-bg--gradient::before,
html .page-contact .page-inner__content-bg--gradient::after,
html .page-services .page-inner__content-bg--gradient::before,
html .page-services .page-inner__content-bg--gradient::after,
html .page-booking .page-inner__content-bg--gradient::before,
html .page-booking .page-inner__content-bg--gradient::after,
html .vehicle-repair-estimator-page .page-inner__content-bg--gradient::before,
html .vehicle-repair-estimator-page .page-inner__content-bg--gradient::after {
  content: none !important;
  background: none !important;
}

/*
 * Full-page --hero-gradient shells (booking, contact, services listing/show, repair estimator):
 * Those views force a transparent header/nav and colour chrome from --color-text-primary.
 * In default appearance that token is slate while the body still used the dark green gradient,
 * so topbar, brand, links and toggler were effectively dark-on-dark. Match the white-first
 * inner canvas used elsewhere on public pages.
 */
html body:is(.page-booking, .page-contact, .page-services, .vehicle-repair-estimator-page) {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fafbfc 42%,
    #f2f8f5 100%
  );
  background-attachment: scroll;
}

/* Vehicle repair estimator: inputs and panels still mixed dark-glass + hardcoded on-dark bits */
html .vehicle-repair-estimator-page .estimator-select {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--color-border));
  background-color: var(--color-surface);
  color: var(--color-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  color-scheme: light;
}

html .vehicle-repair-estimator-page .estimator-select option {
  background: var(--color-surface);
  color: var(--color-text);
}

html .vehicle-repair-estimator-page .estimator-btn--secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

html .vehicle-repair-estimator-page .estimator-btn--outline {
  color: var(--color-text);
  border-color: var(--primary);
}

html .vehicle-repair-estimator-page .estimator-remove-panel {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  color: var(--color-text);
}

html .vehicle-repair-estimator-page .estimator-remove-panel:hover {
  background: color-mix(in srgb, var(--danger) 14%, var(--color-surface));
}

html .vehicle-repair-estimator-page .estimator-aside-details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

html .vehicle-repair-estimator-page .estimator-aside-inner {
  border-top-color: var(--color-border);
  color: var(--color-text-muted);
}

html .vehicle-repair-estimator-page .quick-quote-form-wrap {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-md) !important;
}

html .vehicle-repair-estimator-page .quick-quote-form-wrap .quick-quote-label {
  color: var(--color-text);
}

html .vehicle-repair-estimator-page .quick-quote-form-wrap .quick-quote-form select {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--color-border));
  color-scheme: light;
}

html .vehicle-repair-estimator-page .quick-quote-form-wrap .quick-quote-form select option {
  background: var(--color-surface);
  color: var(--color-text);
}

html .vehicle-repair-estimator-page .quick-quote-result .quick-quote-result-time {
  color: var(--color-text-muted) !important;
}

/*
 * Estimator disclaimer: base CSS uses pale yellow (#ffecb3) for on-dark gradient pages.
 * Default appearance uses a white-first canvas — same colours wash out on pale sections.
 */
html .vehicle-repair-estimator-page .estimator-disclaimer {
  background: color-mix(in srgb, var(--warning) 14%, var(--color-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--color-border)) !important;
  border-left: 4px solid var(--primary) !important;
  box-shadow: var(--shadow-sm);
}

html .vehicle-repair-estimator-page .estimator-disclaimer__icon-wrap {
  background: color-mix(in srgb, var(--primary) 14%, var(--color-surface));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--color-border));
  color: var(--primary);
}

html .vehicle-repair-estimator-page .estimator-disclaimer__inner,
html .vehicle-repair-estimator-page .estimator-disclaimer__inner * {
  color: var(--color-text) !important;
  font-weight: 600 !important;
}

html .vehicle-repair-estimator-page .estimator-disclaimer__inner > p:first-child > strong:first-child {
  color: var(--color-heading) !important;
}

html .vehicle-repair-estimator-page .estimator-disclaimer__inner a {
  color: var(--primary) !important;
}

/* -------------------------------------------------------------------------- */
/* Default appearance: image / overlay heroes — always light copy (ignore flipped --text-primary) */
/* -------------------------------------------------------------------------- */
html .services-hero__title {
  color: var(--text-on-dark-strong) !important;
}

html .hero-section:not(.hero-section--minimal) .hero-title,
html .hero-section:not(.hero-section--minimal) .hero-subtitle,
html .hero-section:not(.hero-section--minimal) .hero-slogan {
  color: var(--text-on-dark-strong) !important;
}

html .hero-section:not(.hero-section--minimal) .hero-trust-label,
html .hero-section:not(.hero-section--minimal) .hero-trust-value {
  color: var(--text-on-dark-strong) !important;
}

html .hero-section:not(.hero-section--minimal) .hero-logo-signature {
  color: var(--text-on-dark-strong) !important;
}

/* Home #main-content: sections.css forces white link colour for dark strips — restore for light canvas */
html .page-home #main-content .section a:not(.btn) {
  color: var(--color-link) !important;
}

html .page-home #main-content .section a:not(.btn):hover {
  color: var(--color-link-hover) !important;
}

html .page-home #main-content .section .section-title-accent,
html .page-home #main-content .section-title-accent {
  border-bottom-color: color-mix(in srgb, var(--primary) 55%, var(--color-border)) !important;
}

/* Contact: title band + breadcrumb on light #main-content */
html .page-contact .contact-page__title-band .breadcrumb {
  color: var(--color-text-muted);
}

html .page-contact .contact-page__title-band .breadcrumb a {
  color: var(--color-link);
}

html .page-contact .contact-page__title-band .breadcrumb a:hover {
  color: var(--color-link-hover);
}

html .page-contact .contact-page__title-band h1 {
  color: var(--color-heading) !important;
}

html .page-contact .contact-page__breadcrumb {
  color: var(--color-text-muted);
}

html .page-contact .contact-page__breadcrumb a {
  color: var(--color-link);
}

html .page-contact .contact-page__breadcrumb a:hover {
  color: var(--color-link-hover);
}

html .page-contact .contact-page__subtitle {
  color: var(--color-text-muted) !important;
}

/* About: hero on light #main-content (same contract as Contact) */
html .page-about .page-about-hero__breadcrumb {
  color: var(--color-text-muted);
}

html .page-about .page-about-hero__breadcrumb a {
  color: var(--color-link);
}

html .page-about .page-about-hero__breadcrumb a:hover {
  color: var(--color-link-hover);
}

html .page-about .page-about-hero__title {
  color: var(--color-heading) !important;
}

html .page-about .page-about-hero__subtitle {
  color: var(--color-text-muted) !important;
}

/* Why Choose GARAGE widget: light media split, so keep light-surface contrast. */
html .why-choose-garage {
  --why-choose-garage-text: #0f172a;
  --why-choose-garage-muted: #4b5563;
  --why-choose-garage-accent-text: color-mix(in srgb, var(--primary, #b33f00) 70%, #111827);
}

/* About page FAQ accordion on light canvas */
html .page-about #main-content .faq-new__title,
html .page-about #main-content .faq-new__q,
html .page-about #main-content .faq-new__subtitle,
html .page-about #main-content .faq-new__a {
  color: var(--text-primary) !important;
}

html .page-about #main-content .accordion-item.faq-new__item {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

html .page-about #main-content .accordion-item.faq-new__item .faq-new__q,
html .page-about #main-content .accordion-item.faq-new__item .faq-new__a {
  color: var(--text-primary) !important;
}

html .page-about #main-content .accordion-item.faq-new__item summary::before,
html .page-about #main-content .accordion-item.faq-new__item .accordion-trigger::before {
  color: var(--text-primary) !important;
}

/* Inner gradient pages: dotted section accent readable on light #main-content (FAQ/widgets override with higher specificity) */
html .page-inner__content-bg--gradient #main-content .section-title-accent {
  border-bottom-color: color-mix(in srgb, var(--primary) 55%, var(--color-border)) !important;
}

html .page-contact .contact-map-address__subtitle {
  color: var(--color-text-muted) !important;
}

html .page-inner__content-bg--solid,
html .page-home__content-bg--solid {
  background: var(--color-bg);
}

html .page-inner__content-bg--solid::before,
html .page-home__content-bg--solid::before {
  background: radial-gradient(
    ellipse 120% 80% at 50% 0%,
    rgba(26, 82, 118, 0.05) 0%,
    transparent 55%
  );
}

html .page-inner__content-bg--solid::after,
html .page-home__content-bg--solid::after {
  background: radial-gradient(
    ellipse 100% 60% at 50% 100%,
    rgba(26, 82, 118, 0.03) 0%,
    transparent 50%
  );
}

/* -------------------------------------------------------------------------- */
/* Default appearance: home #main-content strips (override dark-glass !important)       */
/* -------------------------------------------------------------------------- */
html .page-home #main-content .home-services-new__title,
html .page-home #main-content .home-services-new__subtitle,
html .page-home #main-content .home-services-new__eyebrow,
html .page-home #main-content .home-services-new__eyebrow-text {
  color: var(--text-primary) !important;
  text-shadow: none;
}
html .page-home #main-content .home-services-new__eyebrow-square {
  background: var(--text-primary) !important;
  opacity: 0.35;
}
html .page-home #main-content .showcase-svc-card__media,
html .page-blog-index #main-content .showcase-svc-card__media,
html .page-blog-show #main-content .showcase-svc-card__media {
  box-shadow: var(--shadow-md);
}
html .page-home #main-content .showcase-svc-card__panel,
html .page-blog-index #main-content .showcase-svc-card__panel,
html .page-blog-show #main-content .showcase-svc-card__panel {
  box-shadow: var(--shadow-lg);
}
html .page-home #main-content .home-areas-new__title,
html .page-home #main-content .home-areas-new__card {
  color: var(--text-primary) !important;
}
html .page-home #main-content .home-areas-new__card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--border-color) !important;
}
html .page-home #main-content .home-areas-new__card:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: var(--primary) !important;
}
/* Why Choose: section header sits on light canvas; cards stay dark green (sections.css) — card copy must stay light */
html .page-home__content-bg--gradient #main-content .why-choose-wf .why-choose-wf__header .why-choose-wf__title,
html .page-inner__content-bg--gradient #main-content .why-choose-wf .why-choose-wf__header .why-choose-wf__title,
html .page-home #main-content .why-choose-wf .why-choose-wf__header .why-choose-wf__title {
  color: var(--text-primary) !important;
}
html .page-home__content-bg--gradient #main-content .why-choose-wf .why-choose-wf__header .why-choose-wf__subtitle,
html .page-inner__content-bg--gradient #main-content .why-choose-wf .why-choose-wf__header .why-choose-wf__subtitle,
html .page-home #main-content .why-choose-wf .why-choose-wf__header .why-choose-wf__subtitle {
  color: var(--text-secondary) !important;
}
html .page-home__content-bg--gradient #main-content .why-choose-wf .why-choose-wf__item .why-choose-wf__heading,
html .page-inner__content-bg--gradient #main-content .why-choose-wf .why-choose-wf__item .why-choose-wf__heading,
html .page-home #main-content .why-choose-wf .why-choose-wf__item .why-choose-wf__heading {
  color: var(--text-on-dark-strong) !important;
}
html .page-home__content-bg--gradient #main-content .why-choose-wf .why-choose-wf__item .why-choose-wf__desc,
html .page-inner__content-bg--gradient #main-content .why-choose-wf .why-choose-wf__item .why-choose-wf__desc,
html .page-home #main-content .why-choose-wf .why-choose-wf__item .why-choose-wf__desc {
  color: var(--text-on-dark-muted) !important;
}
html .page-home__content-bg--gradient #main-content .why-choose-wf .why-choose-wf__icon-wrap,
html .page-inner__content-bg--gradient #main-content .why-choose-wf .why-choose-wf__icon-wrap,
html .page-home #main-content .why-choose-wf .why-choose-wf__icon-wrap {
  background: color-mix(in srgb, var(--primary) 32%, var(--surface-dark-soft)) !important;
  border-color: var(--border-on-dark-18) !important;
  color: var(--text-on-dark-strong) !important;
}
html .page-home__content-bg--gradient #main-content .why-choose-wf .why-choose-wf__icon-svg,
html .page-inner__content-bg--gradient #main-content .why-choose-wf .why-choose-wf__icon-svg,
html .page-home #main-content .why-choose-wf .why-choose-wf__icon-svg {
  color: var(--text-on-dark-strong) !important;
  fill: currentColor;
}
html .page-home__content-bg--gradient #main-content .why-choose-wf .why-choose-wf__label,
html .page-inner__content-bg--gradient #main-content .why-choose-wf .why-choose-wf__label {
  color: var(--text-on-dark-strong) !important;
}
html .page-home #main-content .voice-nl-band__voice {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: var(--border-color) !important;
}
html .page-home #main-content .voice-nl-band__heading,
html .page-home #main-content .voice-nl-band__message {
  color: var(--text-primary) !important;
}
html .page-home #main-content .voice-nl-band__cite,
html .page-home #main-content .voice-nl-band__empty,
html .page-home #main-content .voice-nl-band__nl-lead,
html .page-home #main-content .voice-nl-band__hint {
  color: var(--text-secondary) !important;
}
html .page-home #main-content .voice-nl-band__voice .voice-nl-band__text-link {
  color: var(--color-link) !important;
  text-decoration: underline;
}
html .page-home #main-content .voice-nl-band__voice .voice-nl-band__text-link:hover {
  color: var(--color-link-hover) !important;
}
html .page-home #main-content .voice-nl-band__nl {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--primary) 10%, var(--color-surface-2)) 0%,
    rgba(255, 255, 255, 0.97) 100%
  ) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
}
html .page-home #main-content .voice-nl-band__kicker--nl {
  color: var(--primary) !important;
}
html .page-home #main-content .voice-nl-band__heading--nl {
  color: var(--text-primary) !important;
}
html .page-home #main-content .voice-nl-band__field {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--border-color);
}
html .page-home #main-content .voice-nl-band__input {
  color: var(--text-primary) !important;
}
html .page-home #main-content .voice-nl-band__input::placeholder {
  color: var(--text-muted);
}
html .page-home #main-content .voice-nl-band .feedback-carousel__btn.voice-nl-band__carousel-btn {
  background: var(--surface);
  border-color: var(--border-color);
  color: var(--text-primary);
}
html .page-home #main-content .faq-new__title,
html .page-home #main-content .faq-new__q,
html .page-home #main-content .faq-new__subtitle,
html .page-home #main-content .faq-new__a,
html .page-home #main-content .faq-new__breadcrumb,
html .page-home #main-content .faq-new__breadcrumb span {
  color: var(--text-primary) !important;
}
html .page-home #main-content .faq-new__breadcrumb a {
  color: var(--primary) !important;
}
/* Inner gradient + FAQ: sections-surface / FAQ rules use --text-on-dark-muted on breadcrumb (!important) — invisible on default appearance (about / contact / FAQ page). #main-content beats .page-faq #main-content .section … !important. Home keeps stricter #main-content rules above. */
html .page-inner__content-bg--gradient #main-content .faq-new .faq-new__breadcrumb,
html .page-inner__content-bg--gradient #main-content .faq-new .faq-new__breadcrumb span {
  color: var(--text-muted) !important;
}
html .page-inner__content-bg--gradient #main-content .faq-new .faq-new__breadcrumb a {
  color: var(--color-link) !important;
}
html .page-inner__content-bg--gradient #main-content .faq-new .faq-new__breadcrumb a:hover {
  color: var(--color-link-hover) !important;
}
html .page-home #main-content .accordion-item.faq-new__item {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}
html .page-home #main-content .accordion-item.faq-new__item .faq-new__q,
html .page-home #main-content .accordion-item.faq-new__item .faq-new__a {
  color: var(--text-primary) !important;
}

/* Home blog posts list: inset panel (not full-bleed); beat gradient-main link/heading leaks */
html .page-home #main-content .blog-posts-list__eyebrow {
  color: var(--text-primary) !important;
}
html .page-home #main-content .blog-posts-list__title,
html .page-home #main-content .blog-posts-list__item-title {
  color: var(--text-heading) !important;
}
html .page-home #main-content .blog-posts-list__subtitle,
html .page-home #main-content .blog-posts-list__item-excerpt {
  color: var(--text-secondary) !important;
}
html .page-home #main-content .blog-posts-list__view-all {
  color: var(--text-primary) !important;
}
html .page-home #main-content .blog-posts-list__view-all:hover {
  color: var(--primary-hover) !important;
}
html .page-home #main-content .blog-posts-list__view-more {
  color: var(--text-primary) !important;
}
html .page-home #main-content .blog-posts-list__link:hover .blog-posts-list__item-title {
  color: var(--text-primary) !important;
}

/* Blog index: main column is light canvas in default appearance — breadcrumb / meta used dark-canvas colours in base CSS */
html .page-blog-index .blog-index__main .blog-index__breadcrumb {
  color: var(--color-text-muted) !important;
}
html .page-blog-index .blog-index__main .blog-index__breadcrumb a {
  color: var(--color-link) !important;
}
html .page-blog-index .blog-index__main .blog-index__breadcrumb a:hover {
  color: var(--color-link-hover) !important;
}
html .page-blog-index .blog-index__main .blog-index__breadcrumb [aria-current="page"] {
  color: var(--color-text) !important;
}
html .page-blog-index .blog-index__main .blog-index__results,
html .page-blog-index .blog-index__main .blog-index__view-label {
  color: var(--color-text-muted) !important;
}
html .page-blog-index .blog-index__main .blog-index__results strong {
  color: var(--color-text) !important;
}
html .page-blog-index .blog-index__main .blog-index__empty {
  color: var(--color-text-muted) !important;
}

/* Blog index light: modern elevated cards + sidebar (dark-glass copy was tuned for green canvas; pale #main-content needs dark type + light surfaces) */
html .page-blog-index .blog-index__main .blog-list-card {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
}
html .page-blog-index .blog-index__main .blog-list-card:hover {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border-color)) !important;
  box-shadow: var(--shadow-lg) !important;
}
html .page-blog-index .blog-list-card__link {
  color: var(--text-primary) !important;
}
html .page-blog-index .blog-list-card__title {
  color: var(--text-heading) !important;
}
html .page-blog-index .blog-list-card:hover .blog-list-card__title,
html .page-blog-index .blog-list-card__link:hover .blog-list-card__title {
  color: var(--primary) !important;
}
html .page-blog-index .blog-list-card__excerpt {
  color: var(--text-secondary) !important;
}
html .page-blog-index .blog-list-card__footer,
html .page-blog-index .blog-list-card__comments {
  color: var(--text-muted) !important;
}
html .page-blog-index .blog-list-card__expert {
  color: var(--text-muted) !important;
}
html .page-blog-index .blog-list-card__author {
  color: var(--text-secondary) !important;
}
html .page-blog-index .blog-list-card__comments::before {
  color: var(--text-muted) !important;
}
html .page-blog-index .blog-list-card__categories,
html .page-blog-index .blog-list-card__footer {
  border-top-color: var(--color-border) !important;
}
html .page-blog-index .blog-list-card__category-badge {
  background: var(--color-accent-soft) !important;
  color: var(--color-link) !important;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border-color)) !important;
}
html .page-blog-index .blog-list-card__category-badge:hover {
  background: color-mix(in srgb, var(--primary) 14%, var(--color-surface-2)) !important;
  border-color: var(--primary) !important;
  color: var(--color-link-hover) !important;
}
html .page-blog-index .blog-list-card__date {
  background: var(--color-surface-elevated) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
}
html .page-blog-index .blog-list-card__date-day,
html .page-blog-index .blog-list-card__date-month {
  color: var(--text-heading) !important;
}
html .page-blog-index .blog-list-card__img-wrap {
  background: var(--color-bg-muted) !important;
}
html .page-blog-index .blog-list-card__img-placeholder {
  background: var(--color-bg-muted) !important;
  border-color: var(--color-border) !important;
  color: var(--primary) !important;
}
html .page-blog-index .blog-list-card__img-placeholder-icon {
  color: var(--primary) !important;
}
html .page-blog-index .blog-index__view-toggle {
  background: var(--color-surface) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
}
html .page-blog-index .blog-index__view-btn {
  color: var(--text-primary) !important;
}
html .page-blog-index .blog-index__view-btn:hover {
  background: var(--color-bg-muted) !important;
  color: var(--text-heading) !important;
}
html .page-blog-index .blog-index__view-btn + .blog-index__view-btn {
  border-left-color: var(--border-color) !important;
}
html .page-blog-index .blog-index__view-btn[aria-pressed="true"] {
  color: var(--text-on-green) !important;
}
html .page-blog-index .blog-index__pagination .blog-index__page-prev,
html .page-blog-index .blog-index__pagination .blog-index__page-next,
html .page-blog-index .blog-index__pagination a.blog-index__page,
html .page-blog-index .blog-index__pagination span.blog-index__page {
  background: var(--color-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
html .page-blog-index .blog-index__pagination a.blog-index__page-prev,
html .page-blog-index .blog-index__pagination a.blog-index__page-next,
html .page-blog-index .blog-index__pagination a.blog-index__page {
  color: var(--color-link) !important;
}
html .page-blog-index .blog-index__pagination a:hover {
  background: var(--color-bg-muted) !important;
  border-color: var(--primary) !important;
  color: var(--color-link-hover) !important;
}
html .page-blog-index .blog-index__pagination .blog-index__page--current {
  background: var(--primary) !important;
  color: var(--text-on-green) !important;
  border-color: var(--primary) !important;
}
html .page-blog-index .blog-index__sidebar .blog-index__search-heading {
  color: var(--text-heading) !important;
}
html .page-blog-index .blog-index__search-input {
  background: var(--color-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
html .page-blog-index .blog-index__search-input::placeholder {
  color: var(--text-muted) !important;
}
html .page-blog-index .blog-aside-categories__heading,
html .page-blog-index .blog-aside-tags__heading {
  color: var(--text-heading) !important;
}
html .page-blog-index .blog-aside-categories__link {
  background: var(--color-surface-elevated) !important;
  border-color: var(--border-color) !important;
}
html .page-blog-index .blog-aside-categories__link:hover {
  background: var(--color-accent-soft) !important;
  border-color: var(--primary) !important;
}
html .page-blog-index .blog-aside-categories__link-name {
  color: var(--text-heading) !important;
}
html .page-blog-index .blog-aside-categories__link-count {
  color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 20%, var(--color-surface-elevated)) !important;
}
html .page-blog-index .blog-aside-categories__link-arrow {
  color: var(--text-muted) !important;
}
html .page-blog-index .blog-aside-tags__link {
  background: var(--color-surface-elevated) !important;
  border-color: var(--border-color) !important;
}
html .page-blog-index .blog-aside-tags__link:hover {
  background: var(--color-accent-soft) !important;
  border-color: var(--primary) !important;
}
html .page-blog-index .blog-aside-tags__link-name {
  color: var(--text-heading) !important;
}
html .page-blog-index .blog-aside-tags__link-arrow {
  color: var(--text-muted) !important;
}
html .page-blog-index .blog-index__sidebar a[href]:not(.recent-posts-widget__card):not(.showcase-svc-card__link):not(.other-service-card-link):not(.blog-aside-tags__link):not(.blog-aside-categories__link):not(.blog-show-new__article-card-link):not(.btn) {
  color: var(--color-link) !important;
}
html .page-blog-index .blog-index__sidebar a[href]:not(.recent-posts-widget__card):not(.showcase-svc-card__link):not(.other-service-card-link):not(.blog-aside-tags__link):not(.blog-aside-categories__link):not(.blog-show-new__article-card-link):not(.btn):hover {
  color: var(--color-link-hover) !important;
}
html .page-blog-index .blog-index__sidebar .other-services-widget.blog-related-services-widget {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
}
html .page-blog-index .blog-index__sidebar .other-services-widget.blog-related-services-widget .other-services-widget__title {
  color: var(--text-heading) !important;
}
html .page-blog-index .blog-index__sidebar .other-services-widget.blog-related-services-widget .other-service-card {
  background: var(--color-surface-elevated) !important;
  border-color: var(--border-color) !important;
}
html .page-blog-index .blog-index__sidebar .other-services-widget.blog-related-services-widget .other-service-card-title {
  color: var(--text-heading) !important;
}
html .page-blog-index .blog-index__sidebar .other-services-widget.blog-related-services-widget .other-service-card-desc {
  color: var(--text-secondary) !important;
}
html .page-blog-index .blog-index__sidebar .other-services-widget.blog-related-services-widget .other-service-card-image-wrap {
  background: var(--color-bg-muted) !important;
}
html .page-blog-index .blog-index__sidebar .blog-show-new__card {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
}
html .page-blog-index .blog-index__sidebar .blog-show-new__card--categories,
html .page-blog-index .blog-index__sidebar .blog-show-new__card--tags {
  background: var(--color-surface-elevated) !important;
}
html .page-blog-index .blog-index__sidebar .blog-show-new__card-title {
  color: var(--text-heading) !important;
}
html .page-blog-index .blog-index__sidebar .blog-show-new__card-desc {
  color: var(--text-secondary) !important;
}
html .page-blog-index .blog-index__sidebar .blog-show-new__article-card {
  background: var(--color-surface-elevated) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
}
html .page-blog-index .blog-index__sidebar .blog-show-new__article-card-title {
  color: var(--text-heading) !important;
}
html .page-blog-index .blog-index__sidebar .blog-show-new__article-card-excerpt {
  color: var(--text-secondary) !important;
}
html .page-blog-index .blog-index__sidebar .blog-show-new__article-card-img-wrap,
html .page-blog-index .blog-index__sidebar .blog-show-new__article-card-placeholder {
  background: var(--color-bg-muted) !important;
}
html .page-blog-index .blog-index__sidebar .blog-show-new__article-card-img-wrap .blog-show-new__article-card-placeholder,
html .page-blog-index .blog-index__sidebar .blog-show-new__article-card-placeholder-icon {
  color: var(--primary) !important;
}
html .page-blog-index .blog-index__sidebar .blog-show-new__card .text-muted {
  color: var(--text-secondary) !important;
}
html .page-blog-index .blog-index__sidebar .blog-aside-cta.card {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
}
html .page-blog-index .blog-index__sidebar .blog-aside-cta .service-sidebar-title {
  color: var(--text-heading) !important;
}
html .page-blog-index .blog-index__sidebar .blog-aside-cta .text-muted {
  color: var(--text-secondary) !important;
}
html .page-blog-index .blog-index__pagination .blog-index__page--disabled {
  color: var(--text-muted) !important;
  background: var(--color-bg-muted) !important;
}
html .page-blog-index .blog-index__pagination .blog-index__page--ellipsis {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}

html .page-areas-hub .areas-hub__pagination .areas-hub__page-prev,
html .page-areas-hub .areas-hub__pagination .areas-hub__page-next,
html .page-areas-hub .areas-hub__pagination a.areas-hub__page,
html .page-areas-hub .areas-hub__pagination span.areas-hub__page {
  background: var(--color-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
html .page-areas-hub .areas-hub__pagination a.areas-hub__page-prev,
html .page-areas-hub .areas-hub__pagination a.areas-hub__page-next,
html .page-areas-hub .areas-hub__pagination a.areas-hub__page {
  color: var(--color-link) !important;
}
html .page-areas-hub .areas-hub__pagination a:hover {
  background: var(--color-bg-muted) !important;
  border-color: var(--primary) !important;
  color: var(--color-link-hover) !important;
}
html .page-areas-hub .areas-hub__pagination .areas-hub__page--current {
  background: var(--primary) !important;
  color: var(--text-on-green) !important;
  border-color: var(--primary) !important;
}
html .page-areas-hub .areas-hub__pagination .areas-hub__page--disabled {
  color: var(--text-muted) !important;
  background: var(--color-bg-muted) !important;
}
html .page-areas-hub .areas-hub__pagination .areas-hub__page--ellipsis {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}

html .page-home #main-content .contact-form-new__title,
html .page-contact #main-content .contact-form-new__title {
  color: var(--text-primary) !important;
}
html .page-home #main-content .contact-form-new__subtitle,
html .page-contact #main-content .contact-form-new__subtitle {
  color: var(--text-secondary) !important;
}
html .page-home #main-content #home-repair-booking-new {
  background-color: transparent !important;
}
html .page-home #main-content #home-repair-booking-new .fw-bold,
html .page-home #main-content #home-repair-booking-new .lead {
  color: var(--text-primary) !important;
}
html .page-home #main-content #home-repair-booking-new .showcase-booking__title {
  color: var(--text-primary) !important;
}
html .page-home #main-content #home-repair-booking-new .showcase-booking__lead {
  color: var(--text-secondary) !important;
}
/* Sidebar: same light card as /booking (booking.css). Do not force --text-on-green here — it washed copy to white on pale panels. */
html .page-home #main-content #home-repair-booking-new .removals-quote-new__title,
html .page-home #main-content #home-repair-booking-new .removals-quote-new__aside-title,
html .page-home #main-content #home-repair-booking-new .removals-quote-new__label {
  color: var(--text-primary) !important;
}
html .page-home #main-content #home-repair-booking-new .removals-quote-new__subtitle,
html .page-home #main-content #home-repair-booking-new .removals-quote-new__aside,
html .page-home #main-content #home-repair-booking-new .removals-quote-new__feature-text {
  color: var(--text-secondary) !important;
}
html .page-home #main-content #home-repair-booking-new .removals-quote-new__form,
html .page-home #main-content #home-repair-booking-new .removals-quote-new__input {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  color-scheme: light !important;
}
html .page-home #main-content #home-repair-booking-new .removals-quote-new__input[type="date"]::-webkit-calendar-picker-indicator,
html .page-home #main-content #home-repair-booking-new .removals-quote-new__input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none !important;
}

/*
 * home-team: strip uses pale --strip-overlay with --text-on-dark (meant for dark glass); flip for light.
 */
html .page-home #main-content .home-team {
  color: var(--text-primary);
}
html .page-home #main-content .home-team__title {
  color: var(--text-heading) !important;
}
html .page-home #main-content .home-team__subtitle {
  color: var(--text-secondary) !important;
}
html .page-home #main-content .home-team__card-initial {
  color: var(--text-muted) !important;
}
html .page-home #main-content .home-team__card:focus-within .home-team__card-overlay,
html .page-home #main-content .home-team__card-image-wrap:focus-within .home-team__card-overlay {
  outline-color: var(--primary) !important;
}

html .page-home #main-content #home-repair-booking-new .showcase-booking__form-surface {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
}
/* Aside wraps the dark sidebar only — avoid a second white “mat” behind it */
html .page-home #main-content #home-repair-booking-new .showcase-booking__aside-surface {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html .page-services .services-listing__eyebrow-square {
  background: var(--text-primary);
  opacity: 0.35;
}
html .page-services .services-listing__eyebrow,
html .page-services .services-listing__eyebrow-text {
  color: var(--primary);
}
html .page-areas-index .areas-listing__eyebrow-accent {
  background: var(--text-primary);
  opacity: 0.35;
}
html .page-areas-index .areas-listing__eyebrow,
html .page-areas-index .areas-listing__eyebrow-text {
  color: var(--primary);
}
html .page-areas-index .areas-listing__breadcrumb {
  color: var(--text-muted) !important;
}
html .page-areas-index .areas-listing__breadcrumb a {
  color: var(--color-link) !important;
}
html .page-areas-index .areas-listing__breadcrumb a:hover {
  color: var(--color-link-hover) !important;
}
html .page-areas-index .areas-listing__pagination .page-link {
  border-color: var(--border-color);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-primary);
}
html .page-areas-index .areas-listing__pagination .page-item.active .page-link {
  color: var(--primary-foreground);
}
html .page-areas-hub .areas-hub-intro__eyebrow-accent {
  background: var(--text-primary);
  opacity: 0.35;
}
html .page-areas-hub .areas-hub-intro__eyebrow,
html .page-areas-hub .areas-hub-intro__eyebrow-text {
  color: var(--primary);
}

/* Areas hub: ratings block inside classic sidebar card (.card-body provides padding) */
html .page-areas-hub .areas-hub-sidebar--classic .transparent-feedback-block {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
html .page-areas-hub .areas-hub-sidebar--classic .transparent-feedback-block__title {
  color: var(--text-primary) !important;
}
html .page-areas-hub .areas-hub-sidebar--classic .transparent-feedback-block__score {
  color: var(--text-primary) !important;
}
html .page-areas-hub .areas-hub-sidebar--classic .transparent-feedback-block__score-label,
html .page-areas-hub .areas-hub-sidebar--classic .transparent-feedback-block__count,
html .page-areas-hub .areas-hub-sidebar--classic .transparent-feedback-block__sep,
html .page-areas-hub .areas-hub-sidebar--classic .transparent-feedback-block__placeholder {
  color: var(--text-muted) !important;
}
html .page-areas-hub .areas-hub-sidebar--classic .transparent-feedback-block__link {
  color: var(--color-link) !important;
  border-bottom-color: color-mix(in srgb, var(--color-link) 40%, transparent) !important;
}
html .page-areas-hub .areas-hub-sidebar--classic .transparent-feedback-block__link:hover {
  color: var(--color-link-hover) !important;
  border-bottom-color: color-mix(in srgb, var(--color-link-hover) 50%, transparent) !important;
}

html .page-services .services-listing__page-title {
  color: var(--text-primary);
}
html .page-services .services-listing__breadcrumb {
  color: var(--text-muted) !important;
}
html .page-services .services-listing__breadcrumb a {
  color: var(--color-link) !important;
}
html .page-services .services-listing__breadcrumb a:hover {
  color: var(--color-link-hover) !important;
}
html .page-services .services-listing__body {
  color: var(--text-secondary);
  border-color: var(--border-color);
  border-left-color: var(--primary);
  background-color: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-sm);
}
html .page-services .services-listing__body .services-listing__body-heading,
html .page-services .services-listing__body .services-listing__body-subheading,
html .page-services .services-listing__body h2,
html .page-services .services-listing__body h3 {
  color: var(--text-primary);
}
/* Gradient canvas FAQ (services, areas widget, hub, booking, FAQ page, etc.) — #main-content in selectors so specificity beats .page-faq #main-content … !important in sections.css. */
html .page-inner__content-bg--gradient #main-content .faq-new .faq-new__list {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--border-color);
  box-shadow: var(--shadow-md);
}
html .page-inner__content-bg--gradient #main-content .faq-new .accordion-item.faq-new__item {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html .page-inner__content-bg--gradient #main-content .faq-new .faq-new__title,
html .page-inner__content-bg--gradient #main-content .faq-new .faq-new__q {
  color: var(--text-primary) !important;
}
html .page-inner__content-bg--gradient #main-content .faq-new .faq-new__subtitle,
html .page-inner__content-bg--gradient #main-content .faq-new .faq-new__a {
  color: var(--text-secondary) !important;
}
html .page-inner__content-bg--gradient #main-content .faq-new .accordion-item.faq-new__item .faq-new__q {
  color: var(--text-primary) !important;
}
html .page-inner__content-bg--gradient #main-content .faq-new .accordion-item.faq-new__item .faq-new__a {
  color: var(--text-secondary) !important;
}
html .page-inner__content-bg--gradient #main-content .faq-new .accordion-item.faq-new__item .faq-new__a a {
  color: var(--color-link) !important;
}
html .page-inner__content-bg--gradient #main-content .faq-new .accordion-item.faq-new__item summary::before,
html .page-inner__content-bg--gradient #main-content .faq-new .accordion-item.faq-new__item .accordion-trigger::before {
  color: var(--primary) !important;
}
html .page-inner__content-bg--gradient #main-content .faq-new .section-title-accent {
  border-bottom-color: var(--primary) !important;
}
html .page-inner__content-bg--gradient #main-content .faq-new .text-muted {
  color: var(--text-muted) !important;
}

/*
 * FAQ page (faq.php + faq_new, why_choose_us_new, optional why_choose_us_garage):
 * sections.css uses #main-content + on-dark tokens for .section links and accents.
 * Shared quote CTA (cta_quote_strip) reuses .service-booking-cta glass panel — same as service detail.
 */
html .page-faq #main-content .section a:not(.btn):not(.service-booking-cta__kicker) {
  color: var(--color-link) !important;
}
html .page-faq #main-content .section a:not(.btn):not(.service-booking-cta__kicker):hover {
  color: var(--color-link-hover) !important;
}
html body.page-faq #main-content .section .section-title-accent,
html body.page-faq #main-content .section-title-accent {
  border-bottom-color: color-mix(in srgb, var(--primary) 55%, var(--border-color)) !important;
}
html .page-faq #main-content .section.section--light-alt .text-muted,
html .page-faq #main-content .section.section--light .text-muted {
  color: var(--text-muted) !important;
}

/* Service single view: .section--dark assumes green canvas; light #main-content keeps white copy + dark rows with dark type — illegible. Elevate cards + use slate headings/body. */
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__page-title,
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__title,
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__features-heading,
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__features,
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__features li {
  color: var(--text-heading) !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__tagline,
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__lead,
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__body,
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__body p,
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__body li {
  color: var(--text-secondary) !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__body :where(h1, h2, h3, h4, h5, h6) {
  color: var(--text-heading) !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__breadcrumb {
  color: rgba(255, 255, 255, 0.88) !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__breadcrumb a {
  color: var(--text-on-dark-strong, #fff) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.2em !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__breadcrumb a:hover {
  color: var(--color-accent) !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-how-it-works__title,
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-how-it-works__step-title {
  color: var(--text-heading) !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-how-it-works__subtitle,
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-how-it-works__step-desc {
  color: var(--text-secondary) !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-how-it-works {
  border-top-color: transparent !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-how-it-works__panel {
  border-color: var(--border-color) !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .other-services-widget__title {
  color: var(--text-heading) !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .other-services-widget {
  background: var(--color-surface) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .other-service-card {
  background: var(--color-surface) !important;
  border-color: var(--border-color) !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .other-service-card:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border-color)) !important;
  box-shadow: var(--shadow-md) !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .other-service-card-title {
  color: var(--text-heading) !important;
}
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .other-service-card-desc {
  color: var(--text-secondary) !important;
}
html .page-services .service-single-new__card.service-single-new__details-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html .page-services .service-single-new__details-card .service-single-new__card-title {
  color: var(--text-heading) !important;
}
html .page-services .service-single-new__details-card .service-single-new__detail {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  border-bottom-color: var(--color-border) !important;
  box-shadow: none !important;
}
html .page-services .service-single-new__details-card .service-single-new__detail:nth-child(even) {
  background: var(--color-bg-muted) !important;
}
html .page-services .service-single-new__details-card .service-single-new__detail:has(.service-single-new__detail-value--price),
html .page-services .service-single-new__details-card .service-single-new__detail:has(.service-single-new__detail-value--quote) {
  background: color-mix(in srgb, var(--primary) 9%, var(--color-surface)) !important;
  border-color: color-mix(in srgb, var(--primary) 22%, var(--color-border)) !important;
}
html .page-services .service-single-new__details-card .service-single-new__detail:has(.service-single-new__detail-value--save) {
  background: color-mix(in srgb, var(--primary) 6%, var(--color-surface)) !important;
}
/* Sidebar detail rows: avoid --text-muted on #f1f5f9 stripes (fails 4.5:1 at small sizes). */
html .page-services .service-single-new__details-card .service-single-new__detail-label {
  color: var(--text-body) !important;
}
html .page-services .service-single-new__details-card .service-single-new__detail-label--muted {
  color: var(--text-secondary) !important;
}
html .page-services .service-single-new__details-card .service-single-new__detail-label--save {
  color: var(--primary) !important;
}
html .page-services .service-single-new__details-card .service-single-new__detail-value {
  color: var(--text-heading) !important;
}
html .page-services .service-single-new__details-card .service-single-new__detail-value--price {
  color: var(--primary) !important;
}
html .page-services .service-single-new__details-card .service-single-new__detail-value--quote {
  color: var(--text-heading) !important;
}
html .page-services .service-single-new__details-card .service-single-new__detail-value--strike {
  color: var(--text-secondary) !important;
}
html .page-services .service-single-new__details-card .service-single-new__detail-value--save {
  color: var(--primary) !important;
}
html .page-services .service-single-new__details-card .service-single-new__detail-icon {
  background: var(--color-accent-soft) !important;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--color-border)) !important;
  color: var(--primary) !important;
}
html :is(.page-services, .page-areas-show) .service-single-new .service-single-new__faq .faq-new__title {
  color: var(--text-heading) !important;
}
html :is(.page-services, .page-areas-show) .service-single-new .service-single-new__faq .faq-new__list {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html :is(.page-services, .page-areas-show) .service-single-new .service-single-new__faq .accordion-item.faq-new__item {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid var(--border-color) !important;
}
html :is(.page-services, .page-areas-show) .service-single-new .service-single-new__faq .faq-new__q,
html :is(.page-services, .page-areas-show) .service-single-new .service-single-new__faq .faq-new__a {
  color: var(--text-primary) !important;
}
html :is(.page-services, .page-areas-show) .service-single-new .service-single-new__faq .accordion-item.faq-new__item summary::before,
html :is(.page-services, .page-areas-show) .service-single-new .service-single-new__faq .accordion-item.faq-new__item .accordion-trigger::before {
  color: var(--primary) !important;
}
html :is(.page-services, .page-areas-show) .service-single-new__body a:not(.btn) {
  color: var(--color-link) !important;
}
html :is(.page-services, .page-areas-show) .service-single-new__body a:not(.btn):hover {
  color: var(--color-link-hover) !important;
}

/*
 * Service / area single hero CTAs: .section--dark + default appearance tokens can leave outline buttons with dark-on-dark
 * on hover (link inheritance vs. fill). Force standard primary fill + on-primary text (icon uses currentColor).
 */
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__actions .btn-outline-primary:hover,
html :is(.page-services, .page-areas-show) .section--dark.service-single-new .service-single-new__actions .btn-outline-primary:focus-visible {
  color: var(--primary-foreground) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Area single: CMS blocks use <p class="blog-post-heading"> — force dark headings on light canvas */
html .page-areas-show .section--dark.service-single-new .area-article-content .blog-post-heading {
  color: var(--text-heading) !important;
}
html .page-areas-show .section--dark.service-single-new .service-single-new__lead.text-muted {
  color: var(--text-muted) !important;
}
html .page-areas-show .section--dark.service-single-new .service-single-new__card:not(.service-single-new__details-card) {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
}
html .page-areas-show .section--dark.service-single-new .service-single-new__card:not(.service-single-new__details-card) .service-single-new__card-title {
  color: var(--text-heading) !important;
}
html .page-areas-show .section--dark.service-single-new .service-single-new__card .text-muted {
  color: var(--text-secondary) !important;
}
html .page-areas-show .section--dark.service-single-new .transparent-feedback-block__title,
html .page-areas-show .section--dark.service-single-new .transparent-feedback-block__score {
  color: var(--text-heading) !important;
}
html .page-areas-show .section--dark.service-single-new .transparent-feedback-block__score-label,
html .page-areas-show .section--dark.service-single-new .transparent-feedback-block__count,
html .page-areas-show .section--dark.service-single-new .transparent-feedback-block__sep,
html .page-areas-show .section--dark.service-single-new .transparent-feedback-block__placeholder {
  color: var(--text-muted) !important;
}
html .page-areas-show .section--dark.service-single-new .transparent-feedback-block__link {
  color: var(--color-link) !important;
}
html .page-areas-show .section--dark.service-single-new .faq-new__title {
  color: var(--text-heading) !important;
}
html .page-areas-show .section--dark.service-single-new .faq-new__subtitle {
  color: var(--text-secondary) !important;
}
html .page-areas-show .section--dark.service-single-new .faq-new__list {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html .page-areas-show .section--dark.service-single-new .accordion-item.faq-new__item {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid var(--border-color) !important;
}
html .page-areas-show .section--dark.service-single-new .faq-new__q,
html .page-areas-show .section--dark.service-single-new .faq-new__a {
  color: var(--text-primary) !important;
}
html .page-areas-show .section--dark.service-single-new .accordion-item.faq-new__item summary::before,
html .page-areas-show .section--dark.service-single-new .accordion-item.faq-new__item .accordion-trigger::before {
  color: var(--primary) !important;
}
html .page-areas-show .section--dark.service-single-new .faq-new .section-title-accent {
  border-bottom-color: var(--primary) !important;
}

/* Light inner pages: white header shell. Over-hero (home / services hero): transparent at top; scrolled state uses public.css dark strip — do not override here */
html .site-header:not(.site-header--over-hero) {
  background-color: var(--color-bg, #ffffff);
}

/* -------------------------------------------------------------------------- */
/* Default appearance: main-navbar — keep .header-top + .nav-logo-block as in public.css */
/* (dark strips); light canvas + dark text for links, toggler, dropdowns only.   */
/* -------------------------------------------------------------------------- */
html .site-header .main-navbar {
  background: var(--color-bg-elevated, #ffffff);
  border-bottom-color: var(--color-border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

/* ::before left gutter + .nav-logo-block stay default (dark green) — no overrides here */

html .site-header .main-navbar .navbar-toggler {
  color: var(--color-text, var(--text-heading));
  border-color: var(--color-border-strong, rgba(15, 23, 42, 0.22));
}

html .site-header .main-navbar .nav-menu .nav-link {
  color: var(--color-text, var(--text-heading));
}

html .site-header .main-navbar .nav-menu .nav-link:hover,
html .site-header .main-navbar .nav-menu .nav-link.active {
  color: var(--color-link, var(--primary));
}

html .site-header .main-navbar .nav-more-toggle {
  color: var(--color-text, var(--text-heading));
}

html .site-header .main-navbar .nav-more-toggle::after {
  color: var(--color-link, var(--primary));
}

html .site-header .main-navbar .nav-dropdown-menu {
  background: var(--color-bg-elevated, #ffffff);
  border-color: var(--color-border);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(15, 23, 42, 0.12));
}

html .site-header .main-navbar .nav-dropdown-link {
  color: var(--color-text, var(--text-heading));
}

html .site-header .main-navbar .nav-dropdown-link:hover,
html .site-header .main-navbar .nav-dropdown-link.active {
  color: var(--color-link, var(--primary));
}

html .site-header .main-navbar .nav-dropdown-divider {
  background: var(--color-border);
}

@media (max-width: 991px) {
  html .site-header .main-navbar .nav-menu.navbar-collapse {
    border-top-color: var(--color-border);
  }

  html .site-header .main-navbar .nav-menu .nav-dropdown-menu {
    background: var(--color-bg-muted, #f1f5f9);
    border-color: var(--color-border);
  }
}

/*
 * Public pagination contract: blog + services match the legacy Mirage accessible pattern.
 * Default pages are white with orange text/border; current page is orange with white text.
 */
html .page-blog-index .blog-index__pagination,
html .page-services .services-listing-pagination {
  --pagination-accent: var(--primary, #b33f00);
  --pagination-accent-hover: var(--primary-hover, #8f3200);
  --pagination-surface: #ffffff;
  --pagination-muted-surface: #f8fafc;
  --pagination-border: #dfb8a5;
  --pagination-disabled-text: #64748b;
}

html .page-blog-index .blog-index__pagination .pagination,
html .page-services .services-listing-pagination .pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.4rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

html .page-blog-index .blog-index__pagination .page-link,
html .page-blog-index .blog-index__pagination .blog-index__pagination-link,
html .page-blog-index .blog-index__pagination .blog-index__page-prev,
html .page-blog-index .blog-index__pagination .blog-index__page-next,
html .page-blog-index .blog-index__pagination a.blog-index__page,
html .page-blog-index .blog-index__pagination span.blog-index__page,
html .page-services .services-listing-pagination .services-listing-pagination__link,
html .page-services .services-listing-pagination .page-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  min-width: 2.625rem !important;
  min-height: 2.625rem !important;
  padding: 0.48rem 0.78rem !important;
  border: 1px solid var(--pagination-border) !important;
  border-radius: 0.55rem !important;
  background: var(--pagination-surface) !important;
  color: var(--pagination-accent) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
}

html .page-blog-index .blog-index__pagination a.page-link:hover,
html .page-blog-index .blog-index__pagination a.blog-index__pagination-link:hover,
html .page-blog-index .blog-index__pagination a.blog-index__page-prev:hover,
html .page-blog-index .blog-index__pagination a.blog-index__page-next:hover,
html .page-blog-index .blog-index__pagination a.blog-index__page:hover,
html .page-services .services-listing-pagination a.services-listing-pagination__link:hover,
html .page-services .services-listing-pagination a.page-link:hover {
  border-color: var(--pagination-accent) !important;
  background: #fff1eb !important;
  color: var(--pagination-accent-hover) !important;
  box-shadow: 0 2px 10px rgba(179, 63, 0, 0.14) !important;
}

html .page-blog-index .blog-index__pagination a.page-link:focus-visible,
html .page-blog-index .blog-index__pagination a.blog-index__pagination-link:focus-visible,
html .page-blog-index .blog-index__pagination a.blog-index__page-prev:focus-visible,
html .page-blog-index .blog-index__pagination a.blog-index__page-next:focus-visible,
html .page-blog-index .blog-index__pagination a.blog-index__page:focus-visible,
html .page-services .services-listing-pagination a.services-listing-pagination__link:focus-visible,
html .page-services .services-listing-pagination a.page-link:focus-visible {
  outline: 3px solid rgba(179, 63, 0, 0.35) !important;
  outline-offset: 2px !important;
}

html .page-blog-index .blog-index__pagination .page-item.active .page-link,
html .page-blog-index .blog-index__pagination .blog-index__pagination-link--current,
html .page-blog-index .blog-index__pagination .blog-index__page--current,
html .page-services .services-listing-pagination .services-listing-pagination__link--current,
html .page-services .services-listing-pagination .page-item.active .page-link {
  border-color: var(--pagination-accent) !important;
  background: var(--pagination-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(179, 63, 0, 0.24) !important;
}

html .page-blog-index .blog-index__pagination .page-item.active a.page-link:hover,
html .page-blog-index .blog-index__pagination .page-item.active .page-link:hover,
html .page-blog-index .blog-index__pagination .blog-index__pagination-link--current:hover,
html .page-blog-index .blog-index__pagination .blog-index__page--current:hover,
html .page-services .services-listing-pagination .services-listing-pagination__link--current:hover,
html .page-services .services-listing-pagination .page-item.active a.page-link:hover,
html .page-services .services-listing-pagination .page-item.active .page-link:hover {
  border-color: var(--pagination-accent-hover) !important;
  background: var(--pagination-accent-hover) !important;
  color: #ffffff !important;
}

html .page-blog-index .blog-index__pagination .page-item.disabled:not(.page-item--ellipsis) .page-link,
html .page-blog-index .blog-index__pagination .blog-index__pagination-link--disabled,
html .page-blog-index .blog-index__pagination .blog-index__page--disabled,
html .page-services .services-listing-pagination .services-listing-pagination__link--disabled,
html .page-services .services-listing-pagination .page-item.disabled:not(.page-item--ellipsis) .page-link {
  border-color: #d8dee7 !important;
  background: var(--pagination-muted-surface) !important;
  color: var(--pagination-disabled-text) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

html .page-blog-index .blog-index__pagination .page-item--ellipsis .page-link,
html .page-blog-index .blog-index__pagination .blog-index__pagination-link--ellipsis,
html .page-blog-index .blog-index__pagination .blog-index__page--ellipsis,
html .page-services .services-listing-pagination .services-listing-pagination__link--ellipsis,
html .page-services .services-listing-pagination .page-item--ellipsis .page-link {
  min-width: 2rem !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--pagination-disabled-text) !important;
  box-shadow: none !important;
}