/* Light mode: every rule scoped to html[data-theme="light"].
       Dark (no attribute) is the site as shipped. */
    /* EXPERIMENT: cream page + cream cards with dark text. CTA buttons untouched.
       Page-local overrides on top of home.css. Delete this block to revert. */
    html[data-theme="light"]{
      --ink:#2A1D14;
      --ink-soft:#5B4636;
      --rust:#8C4128;
      /* same alpha and blur as .header__inner: rgba(...,0.55) + blur(6px) */
      --veil:rgba(255,252,246,0.55);
      --veil-solid:rgba(255,252,246,0.66);
      --edge:rgba(74,47,31,0.14);
      --lift:0 6px 24px rgba(74,47,31,0.10);
      --lift-hi:0 14px 34px rgba(74,47,31,0.18);
    }

    /* Page: the drifting cream gradient. Reuses home.css's bcc-bg-drift animation. */
    html[data-theme="light"] body{
      background:
        radial-gradient(ellipse 70% 55% at 15% 8%, rgba(211,168,124,0.34) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 100%, rgba(185,120,79,0.26) 0%, transparent 65%),
        linear-gradient(160deg, #F7F2E8 0%, #F0E8DA 45%, #E7DCC9 100%) !important;
      background-size:200% 200%, 200% 200%, 140% 140% !important;
      background-attachment:fixed !important;
      color:var(--ink) !important;
    }

    /* Cards: translucent cream veils, so the page gradient drifts through them.
       Palette vars are flipped per card, which recolors every descendant at once. */
    html[data-theme="light"] .grid-header,
    html[data-theme="light"] .grid-card,
    html[data-theme="light"] .loc-card,
    html[data-theme="light"] .faq-item,
    html[data-theme="light"] .latte-right,
    html[data-theme="light"] .latte-callout,
    html[data-theme="light"] .map-region,
    html[data-theme="light"] .blog-card,
    html[data-theme="light"] .jrny-viewport,
    html[data-theme="light"] .trust-logo,
    html[data-theme="light"] .jrny-arrow,
    html[data-theme="light"] .grid-arrow,
    html[data-theme="light"] .footer-inner{
      --cream:var(--ink);
      --driftwood:var(--ink-soft);
      --peach:var(--rust);
      background:var(--veil) !important;
      background-image:none !important;
      border-color:var(--edge) !important;
      -webkit-backdrop-filter:blur(6px) !important;
      backdrop-filter:blur(6px) !important;
    }
    html[data-theme="light"] .grid-header,
    html[data-theme="light"] .grid-card,
    html[data-theme="light"] .loc-card,
    html[data-theme="light"] .faq-item,
    html[data-theme="light"] .latte-right,
    html[data-theme="light"] .map-region,
    html[data-theme="light"] .blog-card,
    html[data-theme="light"] .jrny-viewport,
    html[data-theme="light"] .footer-inner{ box-shadow:var(--lift) !important; }
    /* Service-area map: tiles are swapped in JS (Carto dark_all -> light_all).
       home.css lifts the dark tiles with brightness(1.8); on light tiles that
       clips them to white, so the native path clears the filter entirely. */
    html[data-theme="light"] .map-wrap:not([data-tiles="fallback"]) .leaflet-tile-pane{
      filter:none !important;
    }
    html[data-theme="light"] .map-wrap[data-tiles="fallback"] .leaflet-tile-pane{
      filter:invert(1) hue-rotate(180deg) brightness(1.15) saturate(.7) !important;
    }
    html[data-theme="light"] #bsm-map{ background:#EDE6DA !important; }
    html[data-theme="light"] .map-wrap{ border-color:var(--edge) !important; }
    html[data-theme="light"] .bsm-dot{ border-color:#FFFCF6 !important; }

    /* Footer map: home.css inverts the embed to fake a dark map. Drop the filter
       and Google's own light tiles show through. */
    html[data-theme="light"] .footer-map iframe{ filter:none !important; }
    html[data-theme="light"] .footer-map{
      border-color:var(--edge) !important;
      box-shadow:0 10px 28px rgba(74,47,31,0.14) !important;
    }
    /* small terracotta text that never cleared contrast on cream */
    html[data-theme="light"] .footer-heading,
    html[data-theme="light"] .fam-show,
    html[data-theme="light"] .grid-readmore,
    html[data-theme="light"] .faq-answer a{ color:var(--rust) !important; }
    /* sits over the photo band, needs a denser veil to stay readable */
    html[data-theme="light"] .grid-header{ background:var(--veil-solid) !important; }
    html[data-theme="light"] .grid-card:hover,
    html[data-theme="light"] .map-region:hover,
    html[data-theme="light"] .map-region.active,
    html[data-theme="light"] .blog-card:hover,
    html[data-theme="light"] .blog-card:focus-visible{
      background:var(--veil-solid) !important;
      border-color:rgba(140,65,40,0.34) !important;
      box-shadow:var(--lift-hi) !important;
    }
    html[data-theme="light"] .latte-callout{ box-shadow:none !important; }
    html[data-theme="light"] .jrny-arrow{ border-color:var(--edge) !important; color:var(--ink) !important; }
    html[data-theme="light"] .jrny-arrow:hover{ background:rgba(185,120,79,0.16) !important; }
    html[data-theme="light"] .grid-arrow{ color:var(--ink) !important; }
    html[data-theme="light"] .grid-arrow:hover{ background:var(--terracotta) !important; color:#fff !important; }

    /* Journey section defines its own palette vars: flip them at the section level,
       which covers both its header (on cream) and its slides (inside the card). */
    html[data-theme="light"] #bcc-journey{
      --jr-cream:var(--ink) !important;
      --jr-drift:var(--ink-soft) !important;
      --jr-peach:var(--rust) !important;
    }
    html[data-theme="light"] .jrny-slide-num{ color:rgba(74,47,31,0.14) !important; }

    /* Bits that used the old cream palette for fills, borders and rails */
    html[data-theme="light"] .loc-tag{ background:rgba(74,47,31,0.05) !important; border-color:rgba(74,47,31,0.18) !important; }
    html[data-theme="light"] .latte-feat-icon{ background:rgba(140,65,40,0.10) !important; color:var(--rust) !important; }
    html[data-theme="light"] .grid-photo{ background:#E7DCC9 !important; }
    html[data-theme="light"] .faq-item .faq-question{ border-bottom-color:rgba(74,47,31,0.12) !important; }
    html[data-theme="light"] .latte-progress,
    html[data-theme="light"] .jrny-progress{ background:rgba(74,47,31,0.14) !important; }
    html[data-theme="light"] .latte-dot:not(.active)::after,
    html[data-theme="light"] .jrny-dot:not(.is-active)::after{ background:rgba(74,47,31,0.24) !important; }
    /* Active step reads terracotta, same as the section nav dot */
    html[data-theme="light"] .latte-dot.active::after,
    html[data-theme="light"] .jrny-dot.is-active::after{ background:var(--terracotta) !important; }
    html[data-theme="light"] .map-region-label::after{ background:linear-gradient(to right, rgba(140,65,40,0.4), transparent) !important; }
    /* Logo tiles: the marks are light monotone PNGs, so on cream they get refilled
       brown through an SVG alpha filter. Same monotone treatment, opposite value. */
    html[data-theme="light"] .trust-logo .tl-mono{ opacity:1 !important; filter:url(#logoBrown) !important; }
    html[data-theme="light"] .trust-logo .tl-color{ opacity:0 !important; }
    html[data-theme="light"] .trust-logo:hover .tl-mono{ opacity:1 !important; filter:url(#logoBrownDeep) !important; }
    html[data-theme="light"] .trust-logo:hover .tl-color{ opacity:0 !important; }
    html[data-theme="light"] .trust-logo{ background:rgba(255,252,246,0.55) !important; }
    html[data-theme="light"] .trust-logo:hover{ background:var(--veil-solid) !important; }
    /* review pill repeats inside the Client Stories card, where its dark panel no longer fits */
    html[data-theme="light"] .grid-header .hero-stars{ background:var(--veil-solid) !important; border-color:var(--edge) !important; }
    html[data-theme="light"] .grid-header .hero-stars:hover,
    html[data-theme="light"] .grid-header .hero-stars:focus-visible{
      background:#FFFCF6 !important; border-color:rgba(140,65,40,0.34) !important;
    }

    /* Photo band at the top of Client Stories: cream veil instead of a dark scrim */
    html[data-theme="light"] .grid-sec::after{ background:rgba(247,242,232,0.5) !important; }

    /* Type sitting directly on the page, outside any card */
    html[data-theme="light"] .map-title,
    html[data-theme="light"] .faq-title,
    html[data-theme="light"] .trust-title,
    html[data-theme="light"] .locblog-title,
    html[data-theme="light"] .jrny-title,
    html[data-theme="light"] .map-eyebrow,
    html[data-theme="light"] .faq-eyebrow,
    html[data-theme="light"] .trust-eyebrow,
    html[data-theme="light"] .jrny-eyebrow,
    html[data-theme="light"] .faq-local-title{ color:var(--ink) !important; }
    html[data-theme="light"] .map-sub,
    html[data-theme="light"] .faq-sub,
    html[data-theme="light"] .trust-sub,
    html[data-theme="light"] .locblog-sub,
    html[data-theme="light"] .jrny-sub,
    html[data-theme="light"] .map-seo-note{ color:var(--ink-soft) !important; }
    html[data-theme="light"] .map-eyebrow::before,
    html[data-theme="light"] .map-eyebrow::after,
    html[data-theme="light"] .faq-eyebrow::before,
    html[data-theme="light"] .faq-eyebrow::after,
    html[data-theme="light"] .trust-eyebrow::before,
    html[data-theme="light"] .trust-eyebrow::after,
    html[data-theme="light"] .jrny-eyebrow::before,
    html[data-theme="light"] .jrny-eyebrow::after{ background:var(--ink) !important; opacity:.35 !important; }
    html[data-theme="light"] .map-italic-sub,
    html[data-theme="light"] .trust-sub em,
    html[data-theme="light"] .locblog-more{ color:var(--rust) !important; }
    html[data-theme="light"] .locblog-more:hover{ color:var(--ink) !important; }
    html[data-theme="light"] .faq-local-title{ border-bottom-color:rgba(42,29,20,0.18) !important; }
    html[data-theme="light"] .faq-sec .cta-btn--secondary{ color:var(--ink) !important; border-color:rgba(42,29,20,0.4) !important; }
    html[data-theme="light"] .faq-sec .cta-btn--secondary:hover,
    html[data-theme="light"] .faq-sec .cta-btn--secondary:focus-visible{
      color:#FFFCF6 !important; background:var(--ink) !important; border-color:var(--ink) !important;
    }


/* ==========================================================================
   HEADER, RAILS AND FOOTER
   The dark glass chrome, restated in cream. Palette vars are flipped on the
   chrome containers so descendants that use var(--cream) / var(--driftwood)
   recolour with them.
   ========================================================================== */
html[data-theme="light"] .header__inner{
  --cream:var(--ink);
  --driftwood:var(--ink-soft);
  --peach:var(--rust);
  background:rgba(255,252,246,0.72) !important;
  border-color:var(--edge) !important;
  box-shadow:0 8px 28px rgba(74,47,31,0.12) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  backdrop-filter:blur(8px) !important;
}
html[data-theme="light"] .header__logo-name,
html[data-theme="light"] .header__logo-tag{ color:var(--ink) !important; }
html[data-theme="light"] .header__logo-mark{ box-shadow:0 0 0 1.5px rgba(74,47,31,0.16), 0 2px 8px rgba(74,47,31,0.12) !important; }
html[data-theme="light"] .header__nav-link{ color:rgba(42,29,20,0.78) !important; }
html[data-theme="light"] .header__nav-link:hover{ color:var(--ink) !important; background:rgba(74,47,31,0.07) !important; }
html[data-theme="light"] .header__nav-link.is-active{ color:var(--rust) !important; }
html[data-theme="light"] .header__burger-bar{ background:var(--ink) !important; }
html[data-theme="light"] .header__burger:hover{ background:rgba(74,47,31,0.08) !important; }
html[data-theme="light"] .header__drawer{
  background:rgba(255,252,246,0.94) !important;
  border-color:var(--edge) !important;
  box-shadow:0 20px 44px rgba(74,47,31,0.18) !important;
}
html[data-theme="light"] .header__drawer-link{
  color:rgba(42,29,20,0.82) !important;
  border-bottom-color:rgba(74,47,31,0.12) !important;
}
html[data-theme="light"] .header__drawer-link:hover{ color:var(--ink) !important; background:rgba(74,47,31,0.06) !important; }
html[data-theme="light"] .header__drawer-link.is-active{ color:var(--rust) !important; }

/* Section rail on the right */
html[data-theme="light"] .scroll-dots,
html[data-theme="light"] .scroll-dots-restore,
html[data-theme="light"] .scroll-dots-toggle{
  background:rgba(255,252,246,0.72) !important;
  border-color:var(--edge) !important;
  color:var(--ink) !important;
  box-shadow:0 8px 28px rgba(74,47,31,0.12) !important;
}
html[data-theme="light"] .scroll-dots-restore:hover,
html[data-theme="light"] .scroll-dots-toggle:hover{ background:rgba(74,47,31,0.10) !important; }
html[data-theme="light"] .scroll-dot::before{
  background:rgba(74,47,31,0.26) !important;
  border-color:rgba(74,47,31,0.45) !important;
}
html[data-theme="light"] .scroll-dot:hover::before{ background:rgba(74,47,31,0.5) !important; }
html[data-theme="light"] .scroll-dot.active::before,
html[data-theme="light"] .scroll-dot[data-target="bcc-smap"].active::before,
html[data-theme="light"] .scroll-dot[data-target="bcc-faq"].active::before{
  background:var(--rust) !important; border-color:var(--rust) !important;
}
/* Label pill goes white in light mode with the rust accent for the type. */
html[data-theme="light"] .scroll-dot-label{
  color:var(--rust) !important;
  background:#FFFFFF !important;
}
html[data-theme="light"] .goo-blob{ background:var(--rust) !important; }

/* Footer type outside the flipped card vars */
html[data-theme="light"] .site-footer{ color:var(--ink) !important; }
html[data-theme="light"] .footer-area-list li,
html[data-theme="light"] .footer-area-list a{ color:var(--ink-soft) !important; }
html[data-theme="light"] .footer-area-list a:hover,
html[data-theme="light"] .footer-area-list a:focus-visible{ color:var(--rust) !important; }
html[data-theme="light"] .footer-area-more{ color:var(--rust) !important; border-bottom-color:rgba(140,65,40,0.45) !important; }

/* Pages whose dark styling comes from site-dark.css fall back to their native
   light CSS (a flat cream bar). Restate the glass-card header geometry so the
   chrome reads the same in light mode on every page. */
html[data-theme="light"] .header{ background:transparent !important; padding:0 24px !important; }
html[data-theme="light"] .header__inner{ border-radius:14px !important; padding:14px 28px !important; }
@media (max-width:480px){ html[data-theme="light"] .header__inner{ padding:10px 18px !important; } }
html[data-theme="light"] .site-footer{ background:transparent !important; }
html[data-theme="light"] .footer-inner{ border-radius:16px !important; }

/* Blog posts are inline-styled against the dark palette. Flipping the palette
   vars on the article wrapper recolours every inline var(--cream) /
   var(--driftwood) / var(--peach) inside it. */
html[data-theme="light"] .post-main{
  --cream:#2A1D14;
  --driftwood:#5B4636;
  --peach:#8C4128;
}
html[data-theme="light"] .post-card{
  background:rgba(255,252,246,0.55) !important;
  border-color:rgba(74,47,31,0.14) !important;
  box-shadow:0 6px 24px rgba(74,47,31,0.10) !important;
}
html[data-theme="light"] .post-card div[style*="height:1px"]{ background:rgba(74,47,31,0.14) !important; }
html[data-theme="light"] .post-main a:not(.faq-cta-btn):not(.cta-btn){ color:var(--rust); }
/* Solid "Get a Quote" button in the post body: keep cream type on terracotta. */
html[data-theme="light"] .post-main .faq-cta-btn:not([style*="transparent"]){
  color:#FFFCF6 !important; background:var(--terracotta-a11y, #96603C) !important;
}

/* ==========================================================================
   LIGHT OVERRIDES FOR THE site-dark.css PAGES
   Light mode does not depend on that sheet being switched off: every dark
   rule it sets has a cream counterpart here.
   ========================================================================== */
html[data-theme="light"] .menu-section-title,
html[data-theme="light"] .included-title,
html[data-theme="light"] .story-title,
html[data-theme="light"] .quote-form-title,
html[data-theme="light"] .drink-card-title,
html[data-theme="light"] .included-card-title,
html[data-theme="light"] .apart-card-title,
html[data-theme="light"] .sip-row-title,
html[data-theme="light"] .addon-card-title,
html[data-theme="light"] .custom-callout-title,
html[data-theme="light"] .faq-category h2,
html[data-theme="light"] .faq-item summary,
html[data-theme="light"] .faq-seo-block h2,
html[data-theme="light"] .faq-cta h2{ color:var(--ink) !important; }

html[data-theme="light"] .menu-section-note,
html[data-theme="light"] .drink-card-desc,
html[data-theme="light"] .sip-row-desc,
html[data-theme="light"] .included-sub,
html[data-theme="light"] .included-card-desc,
html[data-theme="light"] .story-text,
html[data-theme="light"] .apart-card-desc,
html[data-theme="light"] .quote-form-sub,
html[data-theme="light"] .custom-callout-desc,
html[data-theme="light"] .story-stat-label,
html[data-theme="light"] .faq-item-body-inner,
html[data-theme="light"] .faq-seo-block p,
html[data-theme="light"] .faq-cta p{ color:var(--ink-soft) !important; }

html[data-theme="light"] .included-closing,
html[data-theme="light"] .story-stat-num,
html[data-theme="light"] .drink-card-build,
html[data-theme="light"] .eyebrow-light,
html[data-theme="light"] .faq-eyebrow,
html[data-theme="light"] .faq-item summary:hover,
html[data-theme="light"] .faq-item-body-inner a,
html[data-theme="light"] .faq-item-body-inner a strong,
html[data-theme="light"] .drink-card-desc a,
html[data-theme="light"] .included-card-desc a,
html[data-theme="light"] .apart-card-desc a{ color:var(--rust) !important; }
html[data-theme="light"] .eyebrow-light::before,
html[data-theme="light"] .eyebrow-light::after,
html[data-theme="light"] .faq-eyebrow::before,
html[data-theme="light"] .faq-eyebrow::after{ background:var(--rust) !important; }
html[data-theme="light"] .faq-item-body-inner strong{ color:var(--ink) !important; }
html[data-theme="light"] .faq-item summary .faq-icon::before,
html[data-theme="light"] .faq-item summary .faq-icon::after{ background:var(--rust) !important; }

html[data-theme="light"] .drink-card,
html[data-theme="light"] .included-card,
html[data-theme="light"] .addon-card,
html[data-theme="light"] .apart-card,
html[data-theme="light"] .custom-callout,
html[data-theme="light"] .faq-seo-block{
  --cream:var(--ink);
  --driftwood:var(--ink-soft);
  --peach:var(--rust);
  background:var(--veil) !important;
  border-color:var(--edge) !important;
  box-shadow:var(--lift) !important;
}
html[data-theme="light"] .tea-tag{ background:rgba(74,47,31,0.08) !important; color:var(--ink) !important; }
html[data-theme="light"] .cta-btn--secondary{ color:var(--ink) !important; border-color:rgba(42,29,20,0.4) !important; }
html[data-theme="light"] .cta-btn--secondary:hover,
html[data-theme="light"] .cta-btn--secondary:focus-visible,
html[data-theme="light"] .cta-btn--secondary.is-pressed{
  background:var(--ink) !important; color:#FFFCF6 !important; border-color:var(--ink) !important;
}

/* Header "More" dropdown in light mode */
html[data-theme="light"] .header__more-menu{
  background:#FFFCF6 !important;
  border-color:var(--edge) !important;
  box-shadow:0 14px 34px rgba(74,47,31,0.16) !important;
}
html[data-theme="light"] .header__more-link{ color:rgba(42,29,20,0.80) !important; }
html[data-theme="light"] .header__more-link:hover{ color:var(--ink) !important; background:rgba(74,47,31,0.07) !important; }
html[data-theme="light"] .header__more-link.is-active{ color:var(--rust) !important; }

/* Icon tiles use var(--driftwood) as a FILL, so the card-level palette flip
   turns them dark. Give them their own cream-mode fill. */
html[data-theme="light"] .apart-icon,
html[data-theme="light"] .included-icon,
html[data-theme="light"] .addon-icon{
  background:rgba(140,65,40,0.10) !important;
  color:var(--rust) !important;
}

/* ==========================================================================
   LIGHT MODE ON THE menu / pricing / about / faq PAGES
   Their native light design paints opaque cream sections and two dark
   espresso bands (hero + closing CTA). In light mode every band goes
   transparent so the page gradient carries through, and the type that was
   written for the dark bands flips to ink.
   ========================================================================== */
html[data-theme="light"] .menu-hero,
html[data-theme="light"] .menu-cta-sec,
html[data-theme="light"] .specialty-sec,
html[data-theme="light"] .syrups-sec,
html[data-theme="light"] .sip-sec,
html[data-theme="light"] .price-hero,
html[data-theme="light"] .price-cta-sec,
html[data-theme="light"] .included-sec,
html[data-theme="light"] .addon-sec,
html[data-theme="light"] .quote-form-sec,
html[data-theme="light"] .about-hero,
html[data-theme="light"] .about-cta-sec,
html[data-theme="light"] .story-sec,
html[data-theme="light"] .apart-sec,
html[data-theme="light"] .faq-hero,
html[data-theme="light"] .faq-cta{
  background:transparent !important;
  --cream:var(--ink);
  --driftwood:var(--ink-soft);
  --peach:var(--rust);
}
html[data-theme="light"] .menu-hero-title,
html[data-theme="light"] .price-hero-title,
html[data-theme="light"] .about-hero-title,
html[data-theme="light"] .menu-cta-sec h2,
html[data-theme="light"] .price-cta-sec h2,
html[data-theme="light"] .about-cta-sec h2{ color:var(--ink) !important; }
html[data-theme="light"] .menu-hero-sub,
html[data-theme="light"] .price-hero-sub,
html[data-theme="light"] .about-hero-sub,
html[data-theme="light"] .price-hero p,
html[data-theme="light"] .menu-hero p,
html[data-theme="light"] .menu-cta-sec p,
html[data-theme="light"] .price-cta-sec p,
html[data-theme="light"] .about-cta-sec p{ color:var(--ink-soft) !important; }
html[data-theme="light"] .menu-hero-sub em,
html[data-theme="light"] .price-hero-sub em{ color:var(--rust) !important; }
/* menu.css gives the header/hero buttons a pale glass treatment; light mode
   keeps the same solid terracotta button the rest of the site uses. */
html[data-theme="light"] .cta-btn:not(.cta-btn--secondary){
  background:var(--terracotta-a11y, #96603C) !important;
  background-image:none !important;
  color:#fff !important;
  border:none !important;
}

/* Wave dividers between the old light sections: hidden in dark, hidden here too. */
html[data-theme="light"] .section-blend{ display:none !important; }

/* Add-on pill: its fill came from var(--peach), which the card palette flip
   darkens to rust, leaving dark text on a dark chip. */
html[data-theme="light"] .addon-tag{
  background:rgba(140,65,40,0.12) !important;
  color:var(--rust) !important;
}

/* Service-areas city cards (page-local dark styles) */
html[data-theme="light"] .area-card{
  --cream:var(--ink);
  --driftwood:var(--ink-soft);
  --peach:var(--rust);
  background:var(--veil) !important;
  border-color:var(--edge) !important;
  box-shadow:var(--lift) !important;
  color:var(--ink) !important;
  -webkit-backdrop-filter:blur(6px) !important;
  backdrop-filter:blur(6px) !important;
}
html[data-theme="light"] .area-card:hover,
html[data-theme="light"] .area-card:focus-visible{
  background:var(--veil-solid) !important;
  border-color:rgba(140,65,40,0.34) !important;
  box-shadow:var(--lift-hi) !important;
}
html[data-theme="light"] .area-region-label{ color:var(--rust) !important; }

/* Inline-styled page intros (service areas): flip the palette on the wrapper
   so inline var(--cream) / var(--driftwood) resolve to ink. */
html[data-theme="light"] .page-intro{
  --cream:var(--ink);
  --driftwood:var(--ink-soft);
  --peach:var(--rust);
}

/* Footer card padding: site-dark supplies it on the faq/menu/pricing/about
   pages, whose own sheets set none, so light mode restates it. */
html[data-theme="light"] .footer-inner{ padding:48px 56px !important; }
@media (max-width:480px){ html[data-theme="light"] .footer-inner{ padding:36px 24px !important; } }

/* FAQ toggle: site-dark turns faq.css's "+" glyph into a thin plus that
   rotates to a minus. Light mode needs the same construction. */
html[data-theme="light"] .faq-item summary .faq-icon{
  width:18px; height:18px; background:none !important; color:transparent !important;
  font-size:0 !important; border-radius:0 !important; box-shadow:none !important;
  transform:none; position:relative; flex-shrink:0;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
html[data-theme="light"] .faq-item summary .faq-icon::before,
html[data-theme="light"] .faq-item summary .faq-icon::after{
  content:''; position:absolute; background:var(--rust); border-radius:1px;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
html[data-theme="light"] .faq-item summary .faq-icon::before{ top:50%; left:0; width:100%; height:2px; transform:translateY(-50%); }
html[data-theme="light"] .faq-item summary .faq-icon::after{ left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
html[data-theme="light"] .faq-item[open] summary .faq-icon{ transform:rotate(225deg); }

/* Legal pages (privacy, terms) carry their own page-local dark styles. */
html[data-theme="light"] .legal-hero,
html[data-theme="light"] .legal-card{
  --cream:var(--ink);
  --driftwood:var(--ink-soft);
  --peach:var(--rust);
  --terracotta:var(--rust);
}
html[data-theme="light"] .legal-hero h1{ color:var(--ink) !important; }
html[data-theme="light"] .legal-card{
  background:var(--veil-solid, rgba(255,252,246,0.78)) !important;
  border-color:var(--edge) !important;
  box-shadow:var(--lift) !important;
}
html[data-theme="light"] .legal-section h2{ color:var(--ink) !important; }
html[data-theme="light"] .legal-section p,
html[data-theme="light"] .legal-section li,
html[data-theme="light"] .legal-intro{ color:var(--ink-soft) !important; }
html[data-theme="light"] .legal-section strong{ color:var(--ink) !important; }
html[data-theme="light"] .legal-card a{ color:var(--rust) !important; }
html[data-theme="light"] .legal-card .faq-cta-btn{ color:#FFFCF6 !important; background:var(--rust) !important; }
html[data-theme="light"] .legal-section h2{ border-bottom-color:var(--edge) !important; }

/* Header parity: the non-home page sheets style a flat full-width bar with
   smaller nav type and two decorative overlays. Match the home header. */
html[data-theme="light"] .header::before,
html[data-theme="light"] .header::after{ display:none !important; }
html[data-theme="light"] .header__nav-link{ font-size:18px !important; padding:10px 18px !important; }
html[data-theme="light"] .header__logo-tag{ color:var(--rust) !important; }
html[data-theme="light"] .header__more-menu{
  background:#FFFCF6 !important; border-color:var(--edge) !important;
  box-shadow:0 14px 34px rgba(74,47,31,0.16) !important;
}
html[data-theme="light"] .header__more-link{ color:rgba(42,29,20,0.82) !important; }
html[data-theme="light"] .header__more-link:hover{ color:var(--ink) !important; background:rgba(74,47,31,0.07) !important; }
html[data-theme="light"] .header__more-link.is-active{ color:var(--rust) !important; }

/* The full-width header bar carries a 1px hairline in the page sheets; with a
   transparent bar it reads as a stray line across the top. */
html[data-theme="light"] .header{ box-shadow:none !important; }

/* Thanks-for-reaching-out confirmation card (inline-styled dark) */
html[data-theme="light"] .thanks-card{
  --cream:var(--ink);
  --driftwood:var(--ink-soft);
  --peach:var(--rust);
  background:rgba(255,252,246,0.66) !important;
  border-color:var(--edge) !important;
  box-shadow:0 10px 30px rgba(74,47,31,0.12) !important;
}
html[data-theme="light"] .thanks-card .faq-eyebrow{ color:var(--rust) !important; }

/* Footer type on the pricing.css-family pages (get-a-quote, pricing): these
   sheets colour it with var(--cream)/var(--driftwood) directly, so name the
   colours explicitly rather than relying on the palette flip. */
html[data-theme="light"] .footer-email,
html[data-theme="light"] .footer-phone{ color:var(--ink) !important; }
html[data-theme="light"] .footer-links a,
html[data-theme="light"] .footer-area-list a,
html[data-theme="light"] .footer-area-list li{ color:var(--ink-soft) !important; }
html[data-theme="light"] .footer-email:hover,
html[data-theme="light"] .footer-phone:hover,
html[data-theme="light"] .footer-links a:hover,
html[data-theme="light"] .footer-area-list a:hover{ color:var(--rust) !important; }