/* ============================================================
   subpage.css — Shared sub-page component styles
   ------------------------------------------------------------
   Extracted from the inline <style> blocks that were duplicated
   across automotive-tinting.html, residential-tinting.html, and
   commercial-tinting.html (and partially shared with the newer
   sub-pages). Moving these into an external, cacheable stylesheet
   lets the browser reuse them across page navigations instead of
   re-downloading ~350 lines of inline CSS on every page.

   Theme-aware: all colors reference CSS custom properties defined
   in styles.css (e.g. --primary, --accent, --service-card-bg).

   Loaded AFTER css/styles.css on every sub-page:
       <link rel="stylesheet" href="css/styles.css">
       <link rel="stylesheet" href="css/subpage.css">
   ============================================================ */

/* ---------- 3.0 .breadcrumb (visible counterpart of the BreadcrumbList JSON-LD) ----------
   Minimal single-line style (2026-09-03 redesign, replacing the banded look):
   no background surface, no borders, no full-width band — just one small
   muted text line directly above the .page-hero, visually part of the
   content flow. The inner .container gives the same horizontal alignment
   (90% width, 1200px max, centered) as every other page section.

   Header clearance: the breadcrumb nav is the first in-flow element on all
   9 sub-pages, so it owns the fixed-header clearance —
     - desktop (>1023px): margin-top: 0, because body { padding-top: 80px }
       in styles.css already pushes all body content below the 80px header;
     - ≤1023px: margin-top: 91px, because the mobile body padding resets to
       0 (styles.css) and the first in-flow element must clear the 90px
       mobile header + 1px border itself.
   The hero then sits flush against the line (no double clearance) via the
   .breadcrumb + .page-hero / main > .page-hero margin-top: 0 override below.
   The base .page-hero { margin-top: 81px/91px } rules are kept for any page
   that ever ships without a breadcrumb. Theme-aware: colors reference the
   same custom properties used across the site, so light and dark themes
   both render correctly on their respective page backgrounds. */
.breadcrumb {
    margin-top: 0; /* desktop: body padding-top (80px) already clears the header */
    padding: 10px 0; /* slim vertical breathing room around the text line */
}

.breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

/* "›" separator before every item except the first; color echoes the accent */
.breadcrumb li + li::before {
    content: '\203A'; /* single right-pointing angle quotation mark */
    color: var(--accent);
    font-weight: 600;
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: var(--accent);
    text-decoration: underline;
}

/* Current page (aria-current="page") is not a link — emphasize it */
.breadcrumb [aria-current="page"] {
    color: var(--secondary);
    font-weight: 600;
}

/* Hero sits flush directly under the breadcrumb line — its own header
   clearance (margin-top: 81px/91px below) must not open a second gap.
   Two selectors cover both markup variants:
   - .breadcrumb + .page-hero  -> the 6 sub-pages whose hero sits at body
     level, directly after the breadcrumb nav;
   - main > .page-hero         -> the 3 service pages whose hero is the first
     child of <main>, which itself directly follows the breadcrumb nav
     (the hero's margin collapses through <main> into the same gap).
   Both out-specify the plain `.page-hero` / media-query `margin-top` rules. */
.breadcrumb + .page-hero,
main > .page-hero {
    margin-top: 0;
}

@media (max-width: 1023px) {
    /* Mobile: body padding-top resets to 0, so the breadcrumb itself must
       clear the 90px fixed header + 1px border. */
    .breadcrumb { margin-top: 91px; }
}

@media (max-width: 576px) {
    .breadcrumb { padding: 8px 0; }
    .breadcrumb ol { font-size: 0.75rem; gap: 6px; }
    .breadcrumb li { gap: 6px; }
}

/* ---------- 3.1 .page-hero (service-page variant: 60vh + <img> bg) ---------- */
.page-hero {
    position: relative;
    min-height: 60vh;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--primary);
    overflow: hidden;
    margin-top: 81px;
}

/* Modifier for the 6 subpages (about, contact, faq, privacy, service-areas,
    warranty) that use a shorter 40vh hero instead of the <img>-based 60vh
    hero. Placed immediately after the base .page-hero rule so source order
    keeps it winning where needed; .page-hero-bg-img /
    .page-hero-overlay rules below still apply on the <img> variant pages.

    Fix 1: the former background-image url('../images/hero/background.jpg')
    (+ -size / -position / -repeat companions) was removed. Verified before
    removing: every page that carries this class (all 9 sub-pages with a
    hero — about, automotive, commercial, contact, faq, privacy, residential,
    service-areas, warranty) ALSO contains a .page-hero-bg-img <img> child
    (absolute; inset:0; z-index:0) that fully covers the section and paints
    above any element background, so the CSS background was 100% occluded at
    every breakpoint and was pure download waste. 404.html was checked too:
    it has NO .page-hero at all (hero-less .page-section layout), so nothing
    depends on this background. The class remains in the HTML (harmless
    without the background declarations) to avoid touching markup in this
    package. NOTE: the 768px media-query `background-size: contain`
    companion below was removed for the same reason (dead without a
    background-image); its min-height: 35vh survives there. */
.page-hero--bg-image {
    min-height: 40vh;
}

/* Fix 9: the service-page hero image is always dark, so hero text must
   ALWAYS be light/white regardless of the active theme (overrides the
   theme-variable-based color so light mode doesn't render black text over
   the dark hero image). The dark overlay (.page-hero-overlay) is already
   fixed in css/subpage.css so it stays dark in both themes. */
.page-hero .cta-button { color: #ffffff; }

/* Hero <img> as LCP element (replaces CSS background-image to fix CLS + image SEO) */
.page-hero-bg-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 100%);
    z-index: 1;
}

.page-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 60px 20px;
}

.page-hero h1 {
    /* Fix 7b: former fixed 3rem + 2-step media-query ladder (2.2rem
       <=768px, 1.8rem <=576px), replaced with a single fluid clamp().
       Endpoints exactly reproduce the ladder's min/max: 1.8rem floor
       (former 576px step) and 3rem ceiling (former desktop size, reached
       at ~914px viewport width). The MQ font-size overrides were removed
       above; other properties in those MQs are untouched. */
    font-size: clamp(1.8rem, 1rem + 3.5vw, 3rem);
    color: #ffffff;
    margin: 0 0 15px;
    line-height: 1.2;
}

.page-hero-subtitle {
    font-size: 1.25rem;
    color: #f5f5f5;
    margin: 0 0 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.page-hero-ctas {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.page-hero-ctas .cta-button {
    margin-top: 0; /* override default .cta-button margin-top:10px */
}

/* 1023px breakpoint: the header switches to the mobile (90px) layout at
   1023px, but .page-hero was only adjusting margin-top at 768px, leaving
   an 11px gap between 769-1023px where the hero slipped under the mobile
   header. This rule closes that gap; the 768px block below still applies
   its own margin-top: 91px override. */
@media (max-width: 1023px) {
    .page-hero { margin-top: 91px; aspect-ratio: auto; }
}

@media (max-width: 768px) {
    .page-hero { min-height: 50vh; margin-top: 91px; aspect-ratio: auto; }
    /* Fix 1: `background-size: contain` dropped along with the base
       .page-hero--bg-image background-image it modified (dead without it);
       the min-height override survives. */
    .page-hero--bg-image { min-height: 35vh; }
    /* Fix 7b: .page-hero h1 font-size override removed — the base
       .page-hero h1 rule now uses a fluid clamp() (see above). */
    .page-hero-subtitle { font-size: 1.05rem; }
}
/* Fix 7b: the former <=576px media query here contained ONLY the
   .page-hero h1 { font-size: 1.8rem } override, which is now covered by
   the fluid clamp() on the base .page-hero h1 rule (1.8rem floor).
   With nothing left to declare, the empty block was removed entirely. */

/* ---------- 3.2 .benefit-card ---------- */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* ---------- 3.4 .stat-band ---------- */
/* NOTE: .benefit-card / .benefit-icon / .benefit-card:hover / .benefit-card h3 /
   .benefit-card p and the .stat-band / .stat-grid / .stat-item / .stat-number /
   .stat-label rules previously lived here. They have been consolidated into
   css/styles.css (loaded on every page, including sub-pages) so they are
   cacheable across navigations. See the "Consolidated from index.html inline
   styles" block at the end of css/styles.css. */

/* ---------- 3.5 .faq-item (details/summary) ---------- */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    background: var(--service-card-bg);
    border: 1px solid var(--accent-border-tint);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.faq-item[open] {
    border-color: var(--accent);
}

.faq-question {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

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

.faq-question::after {
    content: '\f078'; /* fa-chevron-down */
    /* Fix 2: 'Font Awesome 7 Free' now leads the stack — it is the ONLY
       family actually declared on this site (fonts/fontawesome/f2b-icons.css,
       @font-face weight 900 solid). The previous FA6/FA5/FontAwesome-only
       stack matched no declared family at all, so every browser fell through
       to the generic fallback font for U+F078 (cross-browser tofu risk).
       The old names are kept as harmless fallbacks for any future build
       that ships the full Font Awesome CSS. font-weight: 900 below is
       correct and unchanged — it matches the solid face's 900. */
    font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    color: var(--accent);
    transition: transform 0.3s ease;
    font-size: 0.85rem;
}

.faq-item[open] .faq-question::after {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 22px 20px;
    color: var(--service-text);
    line-height: 1.6;
}

.faq-answer p { margin: 0; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer strong { color: var(--secondary); }

/* ---------- 3.6 .cta-band ---------- */
.cta-band {
    background-color: var(--primary);
    padding: 70px 0;
    text-align: center;
    transition: background-color 0.3s ease;
}

.cta-band h2 {
    font-size: 2.25rem;
    color: var(--secondary);
    margin: 0 0 12px;
}

.cta-band p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 30px;
}

.cta-band-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-band-actions .cta-button { margin-top: 0; }

/* Vertically center text in ALL .cta-button anchors */
.page-hero-ctas .cta-button,
.cta-band-actions .cta-button,
.cta-button.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

@media (max-width: 576px) {
    .cta-band h2 { font-size: 1.8rem; }
}

/* ---------- 3.7 .trust-band ---------- */
.trust-band {
    background-color: var(--section-alt);
    padding: 40px 0;
    border-top: 1px solid var(--accent-border-tint);
    transition: background-color 0.3s ease;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.trust-item i {
    font-size: 1.8rem;
    color: var(--accent);
}

.trust-item span {
    font-size: 0.92rem;
    color: var(--section-alt-text-strong);
    font-weight: 600;
}

@media (max-width: 768px) {
    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

/* ---------- 3.8 .feature-image ---------- */
.feature-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 12px;
    margin: 40px 0 0;
    display: block;
    border: 1px solid var(--accent-border-tint);
}

/* ---------- 3.9 .intro-lead ---------- */
.intro-lead {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.1rem;
    color: var(--service-text);
    line-height: 1.7;
}

/* ---------- 3.10 Page section spacing (sub-page sections) ---------- */
.page-section {
    padding: 60px 0;
    background-color: var(--primary);
    transition: background-color 0.3s ease;
}

.page-section.alt {
    background-color: var(--section-alt);
}

.page-intro,
.page-benefits,
.page-faq,
.page-related {
    padding: 60px 0;
    background-color: var(--primary);
    transition: background-color 0.3s ease;
}

/* ---------- 3.10b .auto-pricing (service-page pricing list) ---------- */
/* Section hidden by default (hidden attribute); shown by js/pricing.js
   when priced automotive services exist. */
.auto-pricing {
    padding: 60px 0;
    background-color: var(--primary);
    transition: background-color 0.3s ease;
}
.auto-pricing[hidden] { display: none; }

.auto-pricing-list {
    max-width: 640px;
    margin: 30px auto 0;
    padding: 0;
    list-style: none;
}

.auto-pricing-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--accent-border-tint);
    color: var(--secondary);
    font-size: 1.05rem;
}
.auto-pricing-item:last-child { border-bottom: none; }

.auto-pricing-name {
    font-weight: 500;
}

.auto-pricing-value {
    font-weight: 600;
    /* Owner request (2026-08-27): plain text, NO red pill — removed the
       background/border/border-radius/padding chrome from the prior
       white-on-accent pill. Text color is var(--secondary) (the theme's
       primary body-text token), which flips with the theme: white (#ffffff)
       on this section's black var(--primary) background in dark mode, black
       (#000000) on the #e8e8e8 var(--primary) background in light mode. A
       hardcoded #ffffff (literal owner request) would be INVISIBLE in light
       mode against the light --primary surface, so --secondary is the
       owner-intent-respecting fallback that keeps the text readable in BOTH
       themes; the explicit [data-theme="light"] override below documents the
       exact resolution for clarity. */
    color: var(--secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
/* Explicit light-theme resolution: --secondary is #000000 in light mode
   (white text would be unreadable on the #e8e8e8 --primary section bg). */
[data-theme="light"] .auto-pricing-value { color: #000000; }

.auto-pricing-fallback {
    text-align: center;
    color: var(--service-text);
    font-size: 1.05rem;
}
.auto-pricing-fallback a { color: var(--accent); }

@media (max-width: 576px) {
    .auto-pricing-item { font-size: 0.95rem; padding: 12px 0; }
    .auto-pricing-fallback { font-size: 0.95rem; }
}

/* ---------- 3.11 .map-placeholder (click-to-load Google Map) ----------
   Reusable placeholder shown inside .map-wrap until the user opts in to
   loading the (heavy) third-party Maps iframe. The inline page script
   swaps the placeholder for the real <iframe> on click / Enter / Space.
   The element is a <button> in the markup, so the button-reset properties
   (`padding: inherit; font: inherit; appearance: none; ...`) neutralize
   the user-agent button defaults. Formerly-duplicated declarations
   (`cursor` twice, `border: none` overridden by the dashed border,
   `background: inherit` overridden by the --section-alt fill) are
   consolidated to single final-value declarations; computed styles are
   unchanged. */
.map-placeholder {
    /* Button reset (neutralizes user-agent <button> defaults). */
    padding: inherit;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    text-align: inherit;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 360px;
    background-color: var(--section-alt);
    color: var(--secondary);
    cursor: pointer;
    border: 2px dashed rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    font-size: 1.1rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.map-placeholder i { font-size: 2rem; color: var(--accent); }
.map-placeholder:hover,
.map-placeholder:focus {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: var(--accent);
    outline: none;
}

/* ---------- Related Services ---------- */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}
.related-card {
    background: var(--service-card-bg);
    border: 1px solid var(--accent-border-tint);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: var(--service-card-shadow);
}
/* Fix 7a: .related-card:hover removed — consolidated into the
   :is(.benefit-card, .related-card):hover rule in css/styles.css (the
   hover bodies were identical). The base .related-card rule above stays
   here untouched (its non-hover styling is unique). */
.related-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.related-card-body {
    padding: 24px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}
.related-card h3 {
    font-size: 1.25rem;
    color: var(--accent);
    margin: 0;
}
.related-card p {
    color: var(--service-text);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
}
.related-card .cta-button {
    margin-top: 4px;
    align-self: center;
}

/* =========================================================================
   === Consolidated from subpage inline <style> blocks ===
   ------------------------------------------------------------------------
   Page-specific rules extracted from the inline <style> blocks in each
   sub-page's <head>. Moving them into this external, cacheable stylesheet
   lets the browser reuse them across navigations. The inline blocks are
   NOT removed from the HTML files in this task — that is handled
   separately. Selectors that already existed in subpage.css (e.g.
   .page-intro, .page-benefits, .page-faq, .page-related) are NOT
   duplicated here; only NEW, page-specific selectors are included.
   ========================================================================= */

/* === Consolidated from about.html inline styles === */
.page-story {
    padding: 60px 0;
    background-color: var(--primary);
    transition: background-color 0.3s ease;
}
.page-story .container { max-width: 860px; }
.page-story h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.9rem;
    color: var(--accent);
    margin: 0 0 18px;
    line-height: 1.3;
}
.page-story p {
    color: var(--service-text);
    line-height: 1.8;
    font-size: 1.05rem;
    margin: 0 0 18px;
}

/* === Consolidated from automotive-tinting.html inline styles === */
/* automotive-tinting.html has no page-specific inline <style> block beyond
   the shared sub-page component styles already in subpage.css. */

/* === Consolidated from commercial-tinting.html inline styles === */
/* Fix 6: .intro-note (commercial page) and .intro-uv-note (residential
   page) had character-identical rule bodies (verified line-by-line before
   merging — every declaration matched). They are now one selector group;
   the duplicate .intro-uv-note rules that lived in the
   residential-tinting section below were removed and point here. The
   .intro-note a rules further below stay scoped to .intro-note only (the
   UV note contains no links). */
.intro-note,
.intro-uv-note {
    max-width: 820px;
    margin: 22px auto 0;
    background: var(--service-card-bg);
    border: 1px solid var(--accent-border-tint);
    border-radius: 12px;
    padding: 18px 24px;
    color: var(--service-text);
    font-size: 0.98rem;
    line-height: 1.6;
    text-align: left;
}
.intro-note strong,
.intro-uv-note strong { color: var(--accent); }
/* Keep "Beyond Sun Control" intro-note links red in ALL states (link, visited, hover, active)
   so browsers never render them in the default visited-link purple. */
.intro-note a,
.intro-note a:visited,
.intro-note a:hover,
.intro-note a:active {
    color: var(--secondary);
}

/* === Consolidated from contact.html inline styles === */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 768px) {
    .contact-layout { grid-template-columns: 1fr; }
}
.contact-info {
    background: var(--service-card-bg);
    border: 1px solid var(--accent-border-tint);
    border-radius: 12px;
    padding: 30px 28px;
    box-shadow: var(--service-card-shadow);
}
.contact-info h2 {
    font-family: 'Playfair Display', serif;
    color: var(--accent);
    font-size: 1.6rem;
    margin: 0 0 20px;
}
.contact-info ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 18px;
}
.contact-info li {
    color: var(--service-text);
    display: flex;
    gap: 14px;
    align-items: flex-start;
    line-height: 1.5;
}
.contact-info li i {
    color: var(--accent);
    font-size: 1.2rem;
    margin-top: 3px;
    flex-shrink: 0;
}
.contact-info li a { color: var(--accent); }
.contact-info .label {
    display: block;
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 2px;
}
.contact-info .value { color: var(--service-text); }
.contact-quick-actions {
    display: flex; gap: 14px; flex-wrap: wrap;
    margin-top: 24px;
}
.contact-quick-actions .cta-button {
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1.2; margin-top: 0;
}

/* `.map-wrap` is shared by contact.html and service-areas.html. The base
   rule below (from contact.html) applies to both; service-areas.html adds
   max-width + centered margin and a fixed iframe height, scoped to
   `#visit-shop` so it only affects the service-areas map without requiring
   HTML changes. */
.map-wrap {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--accent-border-tint);
    box-shadow: var(--service-card-shadow);
    height: 100%;
    min-height: 360px;
}
.map-wrap iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }

/* === Consolidated from faq.html inline styles === */
/* faq.html's inline block only re-declares .page-faq (already in subpage.css)
   and a global `.section-title h2 { color: var(--secondary); }` override that
   is intentionally NOT consolidated here to avoid affecting other pages. */

/* === Consolidated from privacy.html inline styles === */
.privacy-section {
    padding: 40px 0 60px;
}
.privacy-section .container { max-width: 860px; }
.privacy-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: var(--accent);
    margin: 36px 0 12px;
    line-height: 1.3;
}
.privacy-section h2:first-child { margin-top: 0; }
.privacy-section h3 {
    font-size: 1.1rem;
    color: var(--service-text);
    margin: 18px 0 8px;
}
.privacy-section p,
.privacy-section li {
    color: var(--service-text);
    line-height: 1.7;
    font-size: 1rem;
}
.privacy-section p { margin: 0 0 14px; }
.privacy-section ul { margin: 0 0 14px 0; padding-left: 22px; }
.privacy-section li { margin-bottom: 6px; }
.privacy-section a { color: var(--accent); }
.privacy-section .effective-date {
    font-style: italic;
    margin-bottom: 24px;
}
.toc {
    background: var(--service-card-bg);
    border: 1px solid var(--accent-border-tint);
    border-radius: 12px;
    padding: 22px 26px;
    margin: 24px 0 36px;
}
.toc h2 { margin: 0 0 10px; font-size: 1.25rem; }
.toc ol { margin: 0; padding-left: 22px; }
.toc li { margin-bottom: 4px; }

/* === Consolidated from residential-tinting.html inline styles === */
/* Fix 6: the former .intro-uv-note / .intro-uv-note strong rules here were
   character-identical to the .intro-note rules in the
   commercial-tinting section above and have been merged into the
   `.intro-note, .intro-uv-note` selector group there. */

/* === Consolidated from service-areas.html inline styles === */
/* The "Areas We Serve" grid sits on .page-section.alt (always-light
   --section-alt band), but its .area-card text uses --service-text
   (light gray in dark mode) and the .section-title h2 uses
   --secondary (white in dark mode) — both unreadable on the light
   band in dark mode. Override #areas to use the theme-flipping
   --primary surface (dark in dark mode, light in light mode) so the
   existing --service-card-bg / --service-text / --secondary
   variables flip correctly and the cards stay readable in BOTH
   themes. (The map section below keeps the .alt light band.) */
#areas.page-section { background-color: var(--primary); }
/* The map section uses .page-section.alt, whose --section-alt band is
   always light (even in dark mode). The .section-title h2 below it uses
   --secondary (white in dark mode), producing white-on-light-gray. Flip
   this section to the theme-aware --primary surface (dark in dark mode,
   light in light mode) so the heading stays readable in BOTH themes —
   the same fix applied to #areas above. The section stays visually
   distinct from its primary-surface neighbors via the bordered/shadowed
   .map-wrap card. */
#visit-shop.page-section { background-color: var(--primary); }

.area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}
.area-card {
    background: var(--service-card-bg);
    border: 1px solid var(--accent-border-tint);
    border-radius: 12px;
    padding: 22px 22px;
    box-shadow: var(--service-card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Fix 7a: .area-card:hover removed — consolidated into the
   :is(.area-card, .coverage-card):hover rule in css/styles.css (the
   hover bodies were identical). The base .area-card rule above stays
   here untouched. */
.area-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--accent);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.area-card h3 i { color: var(--accent); font-size: 0.95rem; }
.area-card p {
    color: var(--service-text);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

/* Mobile / UV callout */
.callout {
    background: var(--service-card-bg);
    border: 1px solid var(--accent-border-tint);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 860px;
    margin: 30px auto 0;
}
.callout h3 {
    font-family: 'Playfair Display', serif;
    color: var(--accent);
    font-size: 1.3rem;
    margin: 0 0 10px;
    display: flex; align-items: center; gap: 10px;
}
.callout p {
    color: var(--service-text);
    line-height: 1.65;
    margin: 0;
}

/* Map (service-areas variant of `.map-wrap`; the base `.map-wrap` rule
   above came from contact.html. service-areas.html adds a centered
   max-width and a fixed iframe height — scoped to `#visit-shop` so the
   contact map keeps its fill-the-grid behavior without HTML changes.) */
#visit-shop .map-wrap {
    max-width: 1000px;
    margin: 30px auto 0;
}
#visit-shop .map-wrap iframe {
    height: 420px;
}
@media (max-width: 576px) { #visit-shop .map-wrap iframe { height: 320px; } }

/* === Consolidated from warranty.html inline styles === */
/* Dark-mode contrast fix: the .alt band uses the always-light --section-alt
   background, but its step cards / strong text use --secondary / --service-text
   which are light in dark mode (white-on-light-gray, unreadable). Flip this
   section to the theme-flipping --primary (dark in dark mode, light in light
   mode) so the existing light-text variables contrast correctly. A top/bottom
   border keeps it visually distinct from the neighboring --primary bands. */
.warranty-steps-section.page-section {
    background-color: var(--primary);
    border-top: 1px solid var(--accent-border-tint);
    border-bottom: 1px solid var(--accent-border-tint);
}

/* Coverage cards */
.coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}
.coverage-card {
    background: var(--service-card-bg);
    border: 1px solid var(--accent-border-tint);
    border-radius: 12px;
    padding: 30px 26px;
    box-shadow: var(--service-card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}
/* Fix 7a: .coverage-card:hover removed — consolidated into the
   :is(.area-card, .coverage-card):hover rule in css/styles.css (the
   hover bodies were identical). The base .coverage-card rule above stays
   here untouched. */
.coverage-icon {
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    margin: 0 0 16px; font-size: 1.5rem;
}
.coverage-card h3 {
    font-size: 1.3rem;
    color: var(--accent);
    margin: 0 0 6px;
    font-family: 'Playfair Display', serif;
}
.coverage-card .coverage-term {
    color: var(--secondary);
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 14px;
}
.coverage-card p {
    color: var(--service-text);
    line-height: 1.6;
    margin: 0 0 12px;
    font-size: 0.97rem;
}
.coverage-card p:last-child { margin-bottom: 0; }

/* Steps */
.steps-list {
    max-width: 760px;
    margin: 0 auto;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.step-item {
    background: var(--service-card-bg);
    border: 1px solid var(--accent-border-tint);
    border-radius: 12px;
    padding: 22px 26px 22px 80px;
    position: relative;
    box-shadow: var(--service-card-shadow);
}
.step-item::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 24px; top: 50%;
    transform: translateY(-50%);
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.step-item p {
    color: var(--service-text);
    line-height: 1.6;
    margin: 0;
}
.step-item strong { color: var(--secondary); }

/* Note callout */
.warranty-note {
    background: var(--service-card-bg);
    border: 1px solid var(--accent-border-tint);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 22px 26px;
    max-width: 860px;
    margin: 30px auto 0;
}
.warranty-note p {
    color: var(--service-text);
    line-height: 1.65;
    margin: 0;
}
.warranty-note strong { color: var(--secondary); }

/* Why-it-matters section */
.why-matters {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}
.why-matters h2 {
    font-family: 'Playfair Display', serif;
    color: var(--accent);
    font-size: 1.9rem;
    margin: 0 0 16px;
}
.why-matters p {
    color: var(--service-text);
    font-size: 1.08rem;
    line-height: 1.75;
    margin: 0 0 16px;
}