/* White theme (Slate palette) for jojismobiledetailing.com. Loads after styles.css.
   Built 2026-10-28 from the approved mockup: white.css + palette-slate.css + production additions. */
/* ===================================================================
   WHITE THEME — mockup overrides, loaded after /css/styles.css
   -------------------------------------------------------------------
   The base stylesheet names its tokens after the dark palette:
     --white  = primary text        --black  = page background + text-on-gold
     --silver = secondary text      --gold   = accent (text AND fills)
   This file keeps those names so every base rule still works, but
   points them at the light palette:
     --white  -> ink (text)         --black  -> stays ink (text-on-gold)
     --gold   -> a text-safe bronze (4.5:1 on white and cream)
   Fills that should stay champagne gold (buttons, handles) and text
   that sits on photos are re-pinned explicitly below.
   =================================================================== */
:root{
  --bg:#ffffff;
  --bg-alt:#f7f3ea;              /* cream for .section.alt */
  --card:#ffffff;
  --ink:#121214;
  --ink-2:#44464c;
  --ink-3:#6b6d74;

  --champagne:#cbb888;           /* brand gold, used for fills */
  --gold:#85692f;                /* brand gold as TEXT on white (5.2:1) / cream (4.7:1) */
  --gold-deep:#9a824c;           /* display-size accents (3.7:1, large text only) */
  --gold-light:#e4d7b6;
  --gold-dark:#a9925f;

  --black:var(--ink);
  --black-soft:var(--bg-alt);
  --charcoal:var(--card);
  --white:var(--ink);
  --silver:var(--ink-2);
  --silver-soft:var(--ink-3);

  --line:rgba(133,105,47,0.18);
  --line-strong:rgba(133,105,47,0.38);
  --line-ink:rgba(18,18,20,0.12);
  --shadow:0 20px 50px rgba(60,45,10,0.10);
  --shadow-soft:0 8px 24px rgba(60,45,10,0.08);
}
html{color-scheme:light;}
body{background:var(--bg);color:var(--ink);}
::selection{background:rgba(203,184,136,0.45);color:var(--ink);}

/* ===== Buttons ===== */
.btn-primary{
  background:var(--champagne);color:var(--ink);
  box-shadow:0 10px 30px rgba(133,105,47,0.22);
}
.btn-primary:hover{background:var(--gold-light);box-shadow:0 14px 36px rgba(133,105,47,0.28);}
.btn-outline{border-color:rgba(18,18,20,0.32);color:var(--ink);}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}
.skip-link{background:var(--champagne);color:var(--ink);}

/* ===== Header ===== */
.site-header{background:rgba(255,255,255,0.86);border-bottom:1px solid var(--line);}
.logo-img{border-radius:0;}
.nav-dropdown-menu-inner{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);}
.nav-dropdown-menu a:hover{background:rgba(133,105,47,0.08);}
.header-cta{animation:pulse-glow-light 2s infinite;}
@keyframes pulse-glow-light{
  0%{box-shadow:0 0 0 0 rgba(133,105,47,0.45);}
  70%{box-shadow:0 0 0 12px rgba(133,105,47,0);}
  100%{box-shadow:0 0 0 0 rgba(133,105,47,0);}
}
.header-book-btn{background:var(--champagne);color:var(--ink);}
.main-nav.open{background:#fff;border-bottom:1px solid var(--line);}

/* ===== Hero: photo fades into white from the left ===== */
.hero-with-video .hero-bg,.hero-with-image .hero-bg{
  background:
    linear-gradient(90deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.78) 30%, rgba(255,255,255,0.38) 54%, rgba(255,255,255,0.04) 76%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0.40) 100%);
}
/* No stat strip under the hero any more, so drop the 160px it was parked in (desktop only;
   the phone breakpoints already set their own bottom padding) */
@media (min-width:961px){.hero{padding-bottom:80px;}}
.hero-bg-img{filter:saturate(1.05);}
.hero-rating{background:rgba(255,255,255,0.82);border-color:var(--line-strong);}
.hero-rating:hover{background:#fff;border-color:var(--gold);}
.hero-rating-stars{color:var(--gold-deep);}
.hero h1{color:var(--ink);}
/* Soft white halo so the text stays readable where it crosses the car or the technician */
.hero h1,.hero-sub,.hero-custom-link{text-shadow:0 0 14px rgba(255,255,255,0.9), 0 0 30px rgba(255,255,255,0.7);}
.hero .accent{color:var(--gold-deep);}
.hero-sub{color:var(--ink-2);}
.hero-custom-link{color:var(--ink-2);}
.hero-custom-link a:hover{color:var(--gold-deep);}
.hero-badge{background:rgba(133,105,47,0.08);color:var(--gold);}

/* Stat strip */
.strip-inner{
  background:rgba(255,255,255,0.74);
  border:1px solid rgba(133,105,47,0.3);
  box-shadow:var(--shadow);
}
.strip-item{border-left-color:var(--line);}
.strip-item strong{color:var(--gold);}
.strip-item span{color:var(--ink-3);}

/* ===== Sections ===== */
.section.alt{background:var(--bg-alt);}
.section-title{color:var(--ink);}
.section-sub{color:var(--ink-2);}
.section-sub a,.hero-sub a{text-decoration-color:rgba(133,105,47,0.45);}
.section-sub a:hover,.hero-sub a:hover{color:var(--gold-deep);text-decoration-color:var(--gold-deep);}

/* ===== Service photo tiles: text sits on the photo, stays white ===== */
.service-photo-icon,.service-photo-card strong{color:#fff;}
.service-photo-card{box-shadow:var(--shadow-soft);}
.service-photo-card:hover{box-shadow:0 16px 40px rgba(60,45,10,0.22);}
.gallery-tile span{color:#fff;}

/* ===== About / pillars ===== */
.about-visual,.area-visual{
  background:
    radial-gradient(circle at 30% 30%, rgba(203,184,136,0.35), transparent 60%),
    linear-gradient(135deg, #efe7d6, #f7f3ea);
  box-shadow:var(--shadow);
}
.value-card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-soft);}
.value-card h3{color:var(--gold);}

/* ===== Process steps ===== */
.step-card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-soft);--icon-knockout:#fff;}
.step-number{box-shadow:0 4px 12px rgba(60,45,10,0.25);}
.step-icon-svg{color:var(--gold-deep);}
.step-card p{color:var(--ink-2);}

/* ===== Before / after ===== */
.ba-slider{border:1px solid var(--line);box-shadow:var(--shadow);}
.ba-slider-divider{background:var(--champagne);box-shadow:0 0 12px rgba(203,184,136,0.7);}
.ba-slider-handle{background:var(--champagne);color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,0.3);}
.ba-slider-label{color:#fff;background:rgba(18,18,20,0.62);border-color:rgba(203,184,136,0.4);}

/* ===== Add-ons ===== */
.addon-item{background:var(--card);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-soft);}
.addon-item:hover{border-color:var(--gold);color:var(--gold);}

/* ===== Map ===== */
.map-widget{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;}

/* ===== Reviews ===== */
.review-card{background:var(--card);border:1px solid var(--line-ink);box-shadow:var(--shadow-soft);}
.review-photo{background:var(--bg-alt);border-bottom:1px solid var(--line);}
.review-avatar{background:var(--bg-alt);border-color:var(--line);}
.review-name{color:var(--ink);}
.review-stars{color:var(--gold-deep);}
.review-text{color:var(--ink-2);}
.review-arrow{background:#fff;border:1px solid var(--line-strong);color:var(--gold);box-shadow:var(--shadow-soft);}
.review-arrow:hover{background:var(--bg-alt);border-color:var(--gold);}
.review-card.expanded .review-text{scrollbar-color:var(--gold-dark) transparent;}
.review-card.expanded .review-text::-webkit-scrollbar-thumb{background:var(--gold-dark);}
.reviews-placeholder{background:var(--card);border:1px dashed var(--line-strong);}

/* ===== Service area ===== */
.area-list li{color:var(--ink);border-bottom:1px solid var(--line);}
.area-list li::before{background:var(--gold-deep);}

/* ===== Gift cards ===== */
.gift-visual img{box-shadow:0 24px 60px rgba(60,45,10,0.18);}
.gift-visual img:hover{box-shadow:0 30px 70px rgba(60,45,10,0.24);}
.gift-amounts span{border:1px solid var(--line-strong);color:var(--gold);}

/* ===== FAQ ===== */
.faq-item{background:var(--card);border:1px solid var(--line-strong);box-shadow:var(--shadow-soft);}
.section.alt .faq-item{background:#fff;}
.faq-item summary{color:var(--ink);}
.faq-item p{color:var(--ink-2);}

/* ===== Pricing / tier / blog cards (other pages) ===== */
.price-card,.tier-card,.blog-card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-soft);}
.section.alt .tier-card{background:#fff;}
.price-card.featured{border-color:var(--gold-dark);background:linear-gradient(180deg, rgba(203,184,136,0.18), #fff 40%);}
.tier-card.featured{border-color:var(--gold-dark);}
.ribbon{background:var(--champagne);color:var(--ink);}
.price-card-head h3,.tier-card h3,.blog-card h3{color:var(--ink);}
.feature-list li{color:var(--ink-2);}
.feature-list li::before{background:var(--gold-deep);}
.size-tab{border-color:var(--line-strong);color:var(--ink-2);}
.size-tab.active{background:var(--champagne);border-color:var(--champagne);color:var(--ink);}
.blog-hero-img{box-shadow:var(--shadow);}

/* ===== CTA band: the gold band stays, the form card goes white ===== */
.cta-band{background:linear-gradient(135deg, var(--gold-dark), var(--gold-light));}
.cta-band h2,.cta-band p{color:var(--ink);}
.cta-band .btn-primary{background-color:var(--ink);color:var(--gold-light);box-shadow:0 10px 30px rgba(0,0,0,0.22);}
.cta-band .btn-outline{border-color:rgba(18,18,20,0.5);color:var(--ink);}
.quote-form-card{
  background:#fff;
  border:1px solid rgba(18,18,20,0.12);
  box-shadow:0 24px 60px rgba(60,45,10,0.22);
}
.quote-form{color:var(--ink);}
.quote-form label,.quote-form legend{color:var(--ink);}
.quote-form .qf-req{color:var(--gold);}
.quote-form input[type="text"],.quote-form input[type="tel"],.quote-form input[type="email"]{
  border:1.5px solid rgba(18,18,20,0.22);background:#fff;color:var(--ink);
}
.quote-form input::placeholder{color:#7a7c83;}
.quote-form input[type="text"]:focus-visible,.quote-form input[type="tel"]:focus-visible,.quote-form input[type="email"]:focus-visible{
  outline:3px solid var(--gold);border-color:var(--gold);
}
.quote-form input[aria-invalid="true"]{border-color:#d93025;box-shadow:0 0 0 1px #d93025;}
.quote-form .qf-error{color:#b3261e;}
.quote-form .qf-check input{accent-color:var(--gold);}
.quote-form .qf-check input:focus-visible{outline:3px solid var(--gold);}
.quote-form .qf-consent-note{color:var(--ink-3);}
.quote-form .qf-submit{background:var(--champagne);color:var(--ink);}
.quote-form .qf-submit:hover{background:var(--gold-light);}
.quote-form .qf-status{color:var(--ink);}
.quote-form .qf-status[data-tone="error"]{color:#b3261e;}
.quote-form .qf-legal{color:var(--ink-3);}
.quote-form .qf-legal a{color:var(--ink-2);}
.quote-form .qf-success-title{color:var(--gold);}
.quote-form .qf-success p{color:var(--ink);}

/* ===== Footer ===== */
.site-footer{background:var(--bg-alt);border-top:1px solid var(--line);}
.footer-top{border-bottom:1px solid var(--line);}
.footer-tagline{color:var(--ink);}
.footer-tagline .accent{color:var(--gold-deep);}
.footer-col h3{color:var(--gold);}
.footer-col a,.footer-col p{color:var(--ink-2);}
.footer-col a:hover,.footer-col a.footer-view-all{color:var(--gold);}
.footer-legal{border-top:1px solid var(--line);color:var(--ink-3);}
.footer-legal-links a{color:var(--ink-3);}

/* ===== Article pages (other pages) ===== */
.article-body{color:var(--ink-2);}
.article-body h2{color:var(--ink);}
.article-body img{border:1px solid var(--line);}

/* ===== Mobile hero: vertical white wash instead of the dark one ===== */
@media (max-width:520px){
  .hero-with-video .hero-bg,.hero-with-image .hero-bg{
    background:linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.72) 45%, rgba(255,255,255,0.90) 100%);
  }
}

/* ===== Quote form under the hero (layout, mockup) =====
   The form card moved out of the bottom CTA band into its own cream section:
   copy on the left (sticky while the tall form scrolls), card on the right. */
.quote-inner{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start;}
.quote-copy{position:sticky;top:110px;}
.quote-copy .section-sub{margin-left:0;margin-right:0;margin-bottom:28px;}
.quote-points{display:flex;flex-direction:column;gap:12px;}
.quote-points li{position:relative;padding-left:22px;font-weight:600;color:var(--ink);font-size:0.95rem;}
.quote-points li::before{
  content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:2px;background:var(--gold-deep);transform:rotate(45deg);
}
.quote-section .quote-form-card{margin:0;}
.quote-section + #explore-services{padding-top:84px;}
@media (max-width:960px){
  .quote-inner{grid-template-columns:1fr;gap:32px;}
  .quote-copy{position:static;}
}

/* ===== CTA pulse (from lp/book-online): breathing gold halo + a sheen that sweeps across =====
   Applied with .cta-pulse to the header button, the hero Book Online Now, Request My Quote and
   the bottom band's Book Online Now. Replaces the header's ring pulse on those buttons. */
.cta-pulse{position:relative;isolation:isolate;animation:none;}
.cta-pulse::before,.cta-pulse::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
}
.cta-pulse::before{
  box-shadow:0 0 12px 2px rgba(203,184,136,.75), 0 0 30px 8px rgba(169,146,95,.35);
  opacity:.5;animation:lp-glow 1.8s ease-in-out infinite;
}
.cta-pulse::after{
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%) no-repeat;
  background-size:250% 100%;background-position:200% 0;
  animation:lp-sheen 3.6s ease-in-out infinite;
}
/* On the gold band the button is black, so the halo goes white and the sheen goes gold */
.cta-band .cta-pulse::before{box-shadow:0 0 12px 3px rgba(255,255,255,.55), 0 0 28px 6px rgba(255,255,255,.25);}
.cta-band .cta-pulse::after{background-image:linear-gradient(110deg, transparent 30%, rgba(228,215,182,.35) 50%, transparent 70%);}
@keyframes lp-glow{0%,100%{opacity:.15}50%{opacity:.85}}
@keyframes lp-sheen{0%,50%{background-position:200% 0}100%{background-position:-100% 0}}
/* styles.css stops all animation for reduced-motion visitors; the halo only fades brightness
   (nothing moves) so it keeps running, the sheen stops. */
@media (prefers-reduced-motion: reduce){
  .cta-pulse::before{animation-duration:1.8s !important;animation-iteration-count:infinite !important;}
}

/* ===== 3 steps moved under the hero (mockup) ===== */
#process .section-sub{margin-bottom:56px;font-size:1.15rem;font-weight:600;color:var(--ink);}
#process .steps-grid{margin-top:0;}

/* ===== Rating fixes (mockup) ===== */
/* 1. Header button rests while the hero button is on screen (class set by the inline script) */
.hero-cta-visible .site-header .cta-pulse::before,
.hero-cta-visible .site-header .cta-pulse::after{animation:none;opacity:0;}

/* 2. Compact quote form: contact details on two rows, choices as pill toggles,
      extra services folded away, tighter spacing */
.quote-section{padding:80px 24px;}
.quote-form-card{padding:28px 28px 24px;}
.quote-form .qf-grid-3{grid-template-columns:1fr 1fr 1.35fr;}
@media (max-width:600px){.quote-form .qf-grid-3{grid-template-columns:1fr;}}
.quote-form .qf-field{margin-bottom:14px;}
.quote-form label,.quote-form legend{margin-bottom:6px;}
.quote-form .qf-group{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;}
.quote-form .qf-group legend{margin-bottom:8px;}
.quote-form .qf-group .qf-check{
  position:relative;display:inline-flex;align-items:center;margin:0;padding:8px 14px;
  border-radius:999px;border:1.5px solid rgba(18,18,20,0.22);background:#fff;
  font-size:0.9rem;font-weight:600;line-height:1.2;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.quote-form .qf-group .qf-check input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;}
.quote-form .qf-group .qf-check:hover{border-color:var(--gold);}
.quote-form .qf-group .qf-check:has(input:checked){background:var(--champagne);border-color:var(--champagne);}
.quote-form .qf-group .qf-check:has(input:checked)::before{content:"✓";margin-right:7px;font-size:0.8rem;}
.quote-form .qf-group .qf-check:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px;}
.quote-form .qf-other{flex-basis:100%;display:none;margin-top:2px;}
.quote-form .qf-group:has(input[value="Other"]:checked) .qf-other{display:block;}
.quote-form .qf-more{margin:2px 0 18px;}
.quote-form .qf-more summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:0.92rem;color:var(--gold);
}
.quote-form .qf-more summary::-webkit-details-marker{display:none;}
.quote-form .qf-more summary::before{content:"+";font-size:1.15rem;line-height:1;}
.quote-form .qf-more[open] summary::before{content:"–";}
.quote-form .qf-more summary span{font-weight:500;color:var(--ink-3);}
.quote-form .qf-more .qf-group{margin-top:12px;}
.quote-form .qf-more legend{position:absolute;left:-10000px;}
.quote-form .qf-submit{margin-top:12px;}

/* ===== Round 3 (mockup): centered quote, compact reviews, merged service area ===== */
.quote-inner{display:block;max-width:840px;margin:0 auto;text-align:center;}
.quote-copy{position:static;margin-bottom:28px;}
.quote-copy .section-sub{margin:0 auto 18px;}
.quote-points{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px 28px;}
.quote-form-card{text-align:left;}

#explore-services{padding:84px 24px 90px;}

.reviews-badge{
  display:flex;width:max-content;max-width:100%;align-items:center;gap:12px;
  margin:0 auto 36px;padding:10px 18px;border:1px solid var(--line-strong);border-radius:999px;
  background:#fff;box-shadow:var(--shadow-soft);transition:border-color .15s ease;
}
.reviews-badge:hover{border-color:var(--gold);}
.reviews-badge-score{font-family:var(--ff-display);font-size:1.5rem;line-height:1;color:var(--ink);letter-spacing:.02em;}
.reviews-badge-stars{color:var(--gold-deep);letter-spacing:.08em;font-size:1rem;}
.reviews-badge-text{font-weight:700;font-size:.9rem;color:var(--ink);white-space:nowrap;}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.reviews-grid .review-card{flex:none;padding:24px;gap:14px;}
.reviews-grid .review-card > .review-card-head:first-child{padding:0;}
.reviews-grid .review-text{padding:0;display:block;-webkit-line-clamp:unset;max-height:none;}
.reviews-grid .review-readmore{padding:0;}
@media (max-width:960px){.reviews-grid{grid-template-columns:1fr;}}
@media (max-width:520px){.reviews-badge{gap:8px;padding:9px 14px;}.reviews-badge-text{white-space:normal;}}

.area-combo{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;margin-top:40px;}
.area-combo .map-widget{max-width:none;margin:0;}
.area-combo .map-widget iframe{height:460px;}
.area-combo .area-list{grid-template-columns:repeat(2,1fr);max-width:none;margin:0;}
@media (max-width:960px){
  .area-combo{grid-template-columns:1fr;gap:28px;}
  .area-combo .area-list{grid-template-columns:repeat(3,1fr);}
  .area-combo .map-widget iframe{height:360px;}
}
@media (max-width:520px){.area-combo .area-list{grid-template-columns:repeat(2,1fr);}}

/* ===== Live service-area map on the white theme ===== */
.sam-card{box-shadow:var(--shadow);border-color:rgba(133,105,47,0.4);}
.sam-badge{filter:drop-shadow(0 18px 30px rgba(50,38,10,0.32));}
.sam-cta{background:#fff;color:var(--ink-2);border:1px solid var(--line-strong);box-shadow:var(--shadow-soft);}
.sam-cta a{background:var(--champagne);color:var(--ink);}
.sam-cta a:hover{background:var(--gold-light);}
.sam-pins .is-current .sam-label{background:var(--ink);color:#e4d7b6;}
.area-list-under-map{margin-top:12px;}
@media (max-width:700px){.sam-cta{background:#fff;}}


/* ===== Hero slider (mockup) ===== */
.hero-slides{position:absolute;inset:0;z-index:-1;}
.hero-slide{opacity:0;transition:opacity 1.2s ease;}
.hero-slide.is-active{opacity:1;}
/* styles.css zeroes every transition for reduced-motion devices; the crossfade only changes opacity, so it keeps its fade */
@media (prefers-reduced-motion: reduce){.hero-slide{transition-duration:1.2s !important;}}

/* ===== Compact 3-steps strip: icon left, words right, roughly half the old height ===== */
#process{padding:56px 24px 60px;}
#process .section-title{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:8px;}
#process .section-sub{margin:0 auto 30px;font-size:1.05rem;}
#process .steps-grid{gap:18px;margin-top:0;}
#process .step-card{
  display:grid;grid-template-columns:44px 1fr;align-items:center;column-gap:16px;
  padding:20px 20px 18px;text-align:left;
}
#process .step-number{top:-11px;left:18px;transform:none;width:24px;height:24px;font-size:0.9rem;}
#process .step-icon{margin:0;}
#process .step-icon-svg{width:44px;height:44px;margin:0;}
#process .step-card p{font-size:0.92rem;line-height:1.5;}
@media (max-width:960px){#process .steps-grid{gap:20px;max-width:560px;margin:0 auto;}}
@media (max-width:520px){#process{padding:44px 20px 48px;}}

/* ===== Reviews inside the quote section ===== */
.quote-reviews{margin-top:64px;padding-top:56px;border-top:1px solid var(--line);text-align:center;scroll-margin-top:100px;}
.quote-reviews-title{font-size:clamp(1.5rem,2.6vw,1.95rem);color:var(--ink);margin:0 0 16px;}
.quote-reviews .reviews-grid{text-align:left;}
.quote-reviews .reviews-badge{margin-bottom:28px;}
.quote-reviews .reviews-badge .g-icon{width:18px;height:18px;padding-left:10px;border-left:1px solid var(--line);box-sizing:content-box;}
.quote-reviews-cta{margin-top:28px;}
.reviews-google-btn{gap:10px;background:#fff;}
.reviews-google-btn .g-icon{width:18px;height:18px;flex:none;}
.reviews-google-ext{font-size:.85em;opacity:.7;}
/* The hero's review pill now scrolls down the page, so its corner arrow points down */
.hero-rating::after{content:"\2193";top:50%;right:11px;transform:translateY(-50%);font-size:.85rem;}
@media (max-width:520px){
  .quote-reviews{margin-top:48px;padding-top:40px;}
  .hero-rating::after{top:50%;right:8px;font-size:.75rem;}
}

/* ===== Old hero arrows: the homepage now uses dots. Kept so a browser holding the old cached homepage
   still shows small arrows instead of unstyled buttons; safe to delete once that cache has expired. ===== */
.hero-arrows{position:absolute;right:24px;bottom:22px;z-index:2;display:flex;gap:10px;}
.hero-arrow{width:46px;height:46px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,0.92);color:var(--ink);border:1.5px solid var(--ink);box-shadow:var(--shadow-soft);
  transition:background .15s ease,color .15s ease,transform .15s ease;}
.hero-arrow svg{width:20px;height:20px;display:block;}
.hero-arrow:hover{background:var(--ink);color:#fff;}
.hero-arrow:active{transform:scale(.95);}
.hero-arrow:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
@media (max-width:520px){.hero-arrows{right:16px;bottom:16px;gap:8px;}.hero-arrow{width:40px;height:40px;}}

/* ===== Hero photo dots (replace the arrows) ===== */
/* Small see-through white dots centered at the bottom of the hero; the current photo's dot is solid white.
   Each dot's tap area is larger than the dot itself and fills the gap to its neighbours. */
.hero-dots{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:10px;}
.hero-dot{position:relative;width:7px;height:7px;margin:0;padding:0;border:0;border-radius:50%;cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  background:rgba(255,255,255,.5);box-shadow:0 1px 3px rgba(15,22,35,.3);transition:background-color .3s ease;}
.hero-dot::before{content:"";position:absolute;inset:-10px -5px;}
.hero-dot.is-active{background:#fff;}
.hero-dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
@media (max-width:520px){.hero-dots{bottom:18px;}}

/* ===== Reviews row: drifts on its own, drag or swipe to move it ===== */
/* Full-bleed row; the section clips the extra so the page never scrolls sideways */
#quote{overflow-x:clip;}
.rv-marquee{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;padding:6px 0 16px;
  touch-action:pan-y;cursor:grab;
  /* faded cards at both edges show there is more to swipe */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.22) 5%,#000 17%,#000 83%,rgba(0,0,0,.22) 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.22) 5%,#000 17%,#000 83%,rgba(0,0,0,.22) 95%,transparent 100%);}
.rv-marquee.is-dragging{cursor:grabbing;}
.rv-track{display:flex;gap:20px;width:max-content;text-align:left;will-change:transform;user-select:none;-webkit-user-select:none;}
.rv-track img{-webkit-user-drag:none;pointer-events:none;}
@media (max-width:520px){
  .rv-track{gap:14px;}
  .rv-marquee{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 4%,#000 13%,#000 87%,rgba(0,0,0,.25) 96%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 4%,#000 13%,#000 87%,rgba(0,0,0,.25) 96%,transparent 100%);}
}

/* Reviews without the 5.0 badge: a little more room under the heading; wider cards on phones */
.quote-reviews-title{margin-bottom:22px;}
@media (max-width:520px){.rv-track .review-card{flex-basis:280px;}}

/* ===== Gift cards: no ghost frame behind the card, a bigger card, tighter copy ===== */
/* The column box around the card carried the shared .area-visual shadow, which drew a pale frame
   wider than the card itself */
.area-visual.gift-visual{box-shadow:none;border-radius:0;}
.gift-visual img{max-width:520px;box-shadow:0 26px 60px rgba(15,22,35,0.28);}
.gift-visual img:hover{box-shadow:0 32px 70px rgba(15,22,35,0.32);}
#giftcards .area-copy .section-sub{margin-bottom:28px;}
/* Phones and tablets: show the card first, then the words and the button */
@media (max-width:960px){
  #giftcards .area-inner{gap:30px;}
  #giftcards .gift-visual{order:-1;}
  #giftcards .gift-visual img{max-width:440px;margin:0 auto;}
}

/* ===== Reviews as their own section (sub pages) ===== */
section#reviews{overflow-x:clip;}
.quote-reviews.quote-reviews-standalone{margin-top:0;padding-top:0;border-top:0;}


/* ===== PALETTE: Slate (mockup variant, loads after white.css) =====
   A cool light gray in place of the cream. Cream, champagne and gold are all warm yellows, so
   they blur together; against cool gray the gold reads as gold. The gold buttons stay, edged in
   a darker gold so they hold their shape. */
:root{
  --bg-alt:#edf0f4;
  --ink:#0f1623;
  --ink-2:#344054;
  --ink-3:#556075;
  --gold:#7a5f24;
  --gold-deep:#8d6e2a;
  --line:rgba(15,22,35,0.12);
  --line-strong:rgba(15,22,35,0.3);
  --line-ink:rgba(15,22,35,0.14);
  --shadow:0 20px 50px rgba(15,22,35,0.12);
  --shadow-soft:0 8px 24px rgba(15,22,35,0.08);
}
.btn-primary,.header-book-btn,.quote-form .qf-submit{background:#d3bc7f;color:#0f1623;border:1.5px solid #8a6d2c;box-shadow:0 10px 26px rgba(15,22,35,0.16);}
.btn-primary:hover,.quote-form .qf-submit:hover{background:#e0cd98;color:#0f1623;}
.btn-outline{border:1.5px solid #0f1623;color:#0f1623;}
.btn-outline:hover{background:rgba(15,22,35,0.05);border-color:#0f1623;color:#0f1623;}
.cta-band .btn-primary{background:#0f1623;color:#e4d7b6;border-color:#0f1623;}
.quote-form input[type="text"],.quote-form input[type="tel"],.quote-form input[type="email"],
.quote-form .qf-group .qf-check{border-color:rgba(15,22,35,0.3);}
.quote-form .qf-group .qf-check:has(input:checked){background:#d3bc7f;border-color:#8a6d2c;}
.site-header{border-bottom-color:rgba(15,22,35,0.1);}


/* ===== Production additions (2026-10-28 rollout) ===== */
/* Two-column service-area sections that now hold the new map: stack the copy above it */
.area-inner.area-inner--map{grid-template-columns:1fr;gap:28px;}
.area-inner--map .sam{margin:0;}
.area-inner--map .area-copy{text-align:center;}
.area-inner--map .area-copy .section-sub{margin-left:auto;margin-right:auto;}
.area-inner--map > .area-list{margin-top:4px;}
.quote-reviews-cta{text-align:center;}
/* 15% pop-up: its card and the Reach form inside it stay dark, so its own controls keep their dark-theme colors */
.jmd-promo .jmd-promo__close{color:#c8c9cc;}
.jmd-promo .jmd-promo__close:hover,.jmd-promo .jmd-promo__close:focus-visible{color:#f7f6f3;}
.jmd-promo .jmd-promo__skip{color:#e4e5e8;}
.jmd-promo .jmd-promo__btn{color:#0c0c0d;background:#cbb888;}
.jmd-promo .jmd-promo__btn:hover,.jmd-promo .jmd-promo__btn:focus-visible{background:#e4d7b6;}

/* The about photo is square by its own height; when the text beside it runs tall it outgrew its column (30px sideways scroll on /inside-and-out-detailing/). Give it the column width and let the photo crop. */
.about-inner > .about-visual{width:100%;min-width:0;}

/* ===== Black top bar (Jordan, 2026-10-28): the header points the theme tokens at the dark palette ===== */
.site-header{
  --ink:#f4efe3; --ink-2:#d6d7db; --ink-3:#a3a5ac;
  --gold:#d9c590; --gold-deep:#cbb888;
  --line:rgba(203,184,136,0.22); --line-strong:rgba(203,184,136,0.5); --line-ink:rgba(255,255,255,0.14);
  --white:var(--ink); --silver:var(--ink-2); --silver-soft:var(--ink-3);
  --black:#0c0c0d; --black-soft:#18181b; --charcoal:#18181b; --card:#18181b;
  --shadow:0 20px 50px rgba(0,0,0,0.5); --shadow-soft:0 8px 24px rgba(0,0,0,0.4);
  background:rgba(12,12,13,0.94);border-bottom:1px solid rgba(203,184,136,0.22);
}
.site-header .btn-primary,.site-header .header-book-btn{background:var(--champagne);color:#111113;border-color:var(--champagne);}
.site-header .btn-primary:hover,.site-header .header-book-btn:hover{background:#e4d7b6;color:#111113;}
.site-header .nav-dropdown-menu-inner{background:#18181b;border-color:rgba(203,184,136,0.25);}
.site-header .nav-dropdown-menu a:hover{background:rgba(203,184,136,0.1);}
.site-header .main-nav.open{background:#111113;}
.site-header .header-call-btn{border-color:rgba(203,184,136,0.5);color:#d9c590;}