/* =============================================
   TAYLOR AUTO SPA — Stylesheet
   Brand: Deep Teal #004C5A | Dark Teal #003946
   Soft Cream #F3F5E8 | White #FFFFFF | Charcoal #222222
   ============================================= */

/* ── Tokens ─────────────────────────────────── */
:root {
  --teal:          #004C5A;
  --teal-dark:     #003946;
  --teal-light:    #005f6e;
  --cream:         #F3F5E8;
  --white:         #ffffff;
  --charcoal:      #222222;
  --gray-bg:       #f4f5f0;
  --gray-light:    #e8e9e3;
  --gray-medium:   #999999;
  --text-dark:     #222222;
  --text-mid:      #444444;
  --text-light:    #777777;
  --separator:     #ddddd8;
  --surface:       rgba(255,255,255,.06);
  --surface-strong:rgba(255,255,255,.12);
  --surface-border:rgba(255,255,255,.14);
  --font-head:     'DM Sans', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --font-packages: 'Bebas Neue', sans-serif;
  --header-h:      72px;
  --r-sm:          0px;
  --r-md:          0px;
  --r-lg:          0px;
  --ease:          ease;
  --t1: 100ms; --t2: 150ms; --t3: 200ms; --t4: 300ms;
}

/* ── Reset ───────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font-body);background:linear-gradient(180deg,#f7f7f1 0%,#ecece6 100%);color:var(--charcoal);line-height:1.65;overflow-x:hidden}
section,header,footer{max-width:100vw}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── Utilities ───────────────────────────────── */
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.accent{color:var(--teal)}
.text-white{color:var(--white)}

.section-label{
  font-family:var(--font-head);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:10px;
  display:block;
}
.section-label.light{color:var(--cream)}

.section-title{
  font-family:var(--font-head);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;
  letter-spacing:.02em;margin-bottom:16px;text-align:center;color:var(--charcoal);
}
.section-title.light{color:var(--white)}
.section-subtitle{
  max-width:min(640px, calc(100vw - 48px));margin:0 auto 44px;text-align:center;
  color:var(--text-mid);font-size:.97rem;line-height:1.75;
}
.section-subtitle.light{color:rgba(255,255,255,.8)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.two-col.reverse{direction:rtl}.two-col.reverse>*{direction:ltr}

/* ── Buttons ─────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 32px;
  border-radius:0;
  font-family:var(--font-head);font-weight:700;
  font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;
  white-space:nowrap;position:relative;overflow:hidden;
  -webkit-tap-highlight-color:transparent;user-select:none;
  transition:background var(--t2) var(--ease), color var(--t2) var(--ease),
             border-color var(--t2) var(--ease), transform var(--t1) var(--ease);
  border:2px solid transparent;
}
.btn:active{transform:scale(.98)!important}
.btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.btn:disabled{opacity:.5;pointer-events:none}

.btn-primary{
  background:var(--teal);color:var(--white);border-color:var(--teal);
}
.btn-primary:hover{
  background:var(--teal-dark);border-color:var(--teal-dark);
}

.btn-primary[href*="fieldd.co"]{
  border-radius:8px;
  transition:background var(--t2) var(--ease), color var(--t2) var(--ease),
             border-color var(--t2) var(--ease), transform var(--t1) var(--ease),
             box-shadow .25s ease;
}
.btn-primary[href*="fieldd.co"]:hover{
  box-shadow:0 0 14px rgba(0,180,180,.34), 0 0 28px rgba(0,180,180,.18);
}

.btn-outline{
  background:transparent;color:var(--teal);border-color:var(--teal);
}
.btn-outline:hover{
  background:var(--teal);color:var(--white);
}

.quote-section .btn-outline,
.ready-cta .btn-outline{
  color:var(--white);
  border-color:rgba(255,255,255,.85);
  border-radius:999px;
}
.quote-section .btn-outline:hover,
.ready-cta .btn-outline:hover{
  background:rgba(255,255,255,.12);
  color:var(--white);
}

.quote-section .btn-primary,
.ready-cta .btn-primary{
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,.85);
  border-radius:999px;
}
.quote-section .btn-primary:hover,
.ready-cta .btn-primary:hover{
  background:rgba(255,255,255,.12);
}

.btn-outline-teal{
  background:transparent;color:var(--teal);border-color:var(--teal);
}
.btn-outline-teal:hover{
  background:var(--teal);color:var(--white);
}

.btn-dark{
  background:var(--charcoal);color:var(--white);border-color:var(--charcoal);
}
.btn-dark:hover{background:#333;border-color:#333}

.btn-outline-dark{
  background:transparent;color:var(--charcoal);border-color:var(--charcoal);
}
.btn-outline-dark:hover{background:var(--charcoal);color:var(--white)}

.btn-lg{padding:14px 32px;font-size:.82rem}
.btn-submit{width:100%;justify-content:center;padding:16px;font-size:.9rem;letter-spacing:.1em;margin-top:8px}

/* Glowing Book Now button */
.btn-glow,
.price-cta{
  border-radius:999px;
  transition:box-shadow .3s ease, background .2s ease, transform .1s ease;
}
.btn-glow:hover,
.price-cta:hover{
  box-shadow:0 0 14px rgba(0,180,180,.34), 0 0 28px rgba(0,180,180,.18);
}

/* ── Header ──────────────────────────────────── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--header-h);
  background:rgba(30,30,30,.95);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.12);
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header.scrolled{
  background:rgba(30,30,30,.95);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.site-header.scrolled .dropdown-menu{
  background:rgba(60,60,60,.98);
}

.header-inner{
  max-width:1280px;margin:0 auto;padding:0 24px;height:100%;
  display:flex;align-items:center;gap:20px;
}

.logo{flex-shrink:0;display:flex;align-items:center}
.logo img{height:46px;width:auto}
.logo-text{
  font-family:var(--font-head);font-weight:800;font-size:1.1rem;
  letter-spacing:.06em;color:var(--white);white-space:nowrap;text-transform:uppercase;
  margin-left:12px;display:block;
}

.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto}

.nav-link{
  position:relative;
  font-family:var(--font-head);font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.85);
  padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;
  transition:color var(--t1) var(--ease);
}
.nav-link::after{
  content:'';position:absolute;left:14px;right:14px;bottom:6px;height:2px;
  background:var(--white);opacity:.9;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t1) var(--ease);
}
.nav-link:hover,.nav-link--active{color:var(--white)}
.nav-link:hover::after{transform:scaleX(1)}

.nav-book-btn{margin-left:12px;white-space:nowrap;border-radius:8px;transition:box-shadow .25s ease, background .2s ease, transform .1s ease;font-size:.75rem;padding:8px 14px}
.nav-book-btn:hover{box-shadow:0 0 14px rgba(0,180,180,.34), 0 0 28px rgba(0,180,180,.18)}
.social-icons--nav{margin-left:0}

.lang-switcher{display:flex;align-items:center;gap:6px;margin-left:12px}
.lang-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);color:var(--white);font-size:.78rem;font-weight:700;letter-spacing:.02em;
  cursor:pointer;transition:background var(--t1) var(--ease), transform var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.lang-btn:hover,.lang-btn.active{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3);transform:translateY(-1px);box-shadow:0 0 10px rgba(255,255,255,.25), 0 0 20px rgba(255,255,255,.15)}
.lang-btn:focus-visible{outline:2px solid rgba(255,255,255,.4);outline-offset:2px}

/* ── French language text-overflow fixes ─────── */
.lang-fr .nav-book-btn{font-size:.78rem;padding:8px 16px;white-space:nowrap}
.lang-fr .nav-btn{font-size:.72rem;padding:10px 10px}
.lang-fr .pkg-badge{font-size:.58rem;padding:4px 8px}
.lang-fr .hero-badge{font-size:.58rem;padding:4px 8px}
.lang-fr .vtab{font-size:.78rem}
.lang-fr .pkg-toggle{font-size:.75rem}
.lang-fr .price-card .btn{font-size:.82rem;padding:12px 20px}
.lang-fr .step-flow-card h3{font-size:1.05rem}
.lang-fr .price-card h3{font-size:1.05rem}
.lang-fr .price{font-size:1.6rem}
.lang-fr .price span{font-size:.78rem}
.lang-fr .addon-name{font-size:.88rem}
.lang-fr .faq-question{font-size:.92rem}
.lang-fr .review-text{font-size:.88rem;line-height:1.55}
.lang-fr .location-card h3{font-size:1rem}
.lang-fr .footer-hours{font-size:.82rem}
.lang-fr .ready-cta h2{font-size:1.5rem}
.lang-fr .ready-cta p{font-size:.92rem}

@media(max-width:900px){
  .lang-fr .nav-book-btn{font-size:.78rem;padding:8px 16px}
  .lang-fr .nav-btn{font-size:.68rem;padding:8px 8px}
  .lang-fr .pkg-badge{font-size:.52rem;padding:3px 6px}
}

/* Dropdowns */
.nav-dropdown{position:relative}
.nav-btn{
  position:relative;
  font-family:var(--font-head);font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.85);
  padding:10px 14px;min-height:44px;display:flex;align-items:center;gap:5px;
  transition:color var(--t1) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.nav-btn::after{
  content:'';position:absolute;left:14px;right:14px;bottom:6px;height:2px;
  background:var(--white);opacity:.9;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t1) var(--ease);
}
.nav-btn:hover,.nav-btn[aria-expanded="true"],.nav-btn.nav-btn--active{color:var(--white)}
.nav-btn:hover::after,.nav-btn[aria-expanded="true"]::after{transform:scaleX(1)}

.caret{font-size:.52rem;opacity:.8;transition:transform var(--t1) var(--ease)}
.nav-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}

.dropdown-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:200px;
  background:var(--charcoal);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  overflow:hidden;z-index:200;
  opacity:0;transform:translateY(-8px);
  pointer-events:none;
  transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease);
}
.dropdown-menu.open{opacity:1;transform:translateY(0);pointer-events:auto}

.dropdown-menu a{
  display:block;padding:12px 18px;font-family:var(--font-head);
  font-size:.8rem;font-weight:600;letter-spacing:.06em;color:#ffffff;
  text-transform:uppercase;
  transition:background var(--t1) var(--ease),color var(--t1) var(--ease);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.dropdown-menu li:last-child a{border-bottom:none}
.dropdown-menu a:hover{background:var(--teal);color:var(--white)}

/* Split dropdown: label link + arrow toggle */
.nav-dropdown--split{display:flex;align-items:stretch}
.nav-dropdown-label{
  position:relative;
  font-family:var(--font-head);font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.85);
  padding:10px 4px 10px 14px;min-height:44px;display:flex;align-items:center;
  transition:color var(--t1) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.nav-dropdown-label::after{
  content:'';position:absolute;left:14px;right:4px;bottom:6px;height:2px;
  background:var(--white);opacity:.9;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t1) var(--ease);
}
.nav-dropdown-label:hover,.nav-dropdown-label.nav-link--active{color:var(--white)}
.nav-dropdown-label:hover::after{transform:scaleX(1)}
.nav-dropdown-toggle.nav-btn{padding:10px 14px 10px 4px}
.nav-dropdown-toggle.nav-btn::after{left:4px;right:14px}

@media(min-width:1200px){
  .nav-dropdown--split:hover .dropdown-menu,
  .nav-dropdown--split:focus-within .dropdown-menu{
    opacity:1;transform:translateY(0);pointer-events:auto;
  }
  .nav-dropdown--split:hover .caret,
  .nav-dropdown--split:focus-within .caret{transform:rotate(180deg)}
}

/* Social */
.social-icons{display:flex;gap:8px;align-items:center;margin-left:10px}
.social-icon{
  color:rgba(255,255,255,.7);min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  transition:color var(--t1) var(--ease);
}
.social-icon svg{width:18px;height:18px}
.social-icon:hover{color:var(--white)}
.social-icon--yelp{min-width:44px;min-height:44px}
.social-icon--yelp img{width:20px;height:20px;object-fit:contain}

/* Hamburger */
.hamburger{
  display:none;align-items:center;justify-content:center;padding:8px;
  margin-left:auto;-webkit-tap-highlight-color:transparent;
  min-width:44px;min-height:44px;color:var(--white);
}
.hamburger:focus-visible{outline:3px solid var(--cream);outline-offset:2px}

.hamburger-icon{display:block;width:26px;height:26px}
.hamburger-icon line{transform-origin:center;
  transition:transform var(--t2) var(--ease),opacity var(--t2) var(--ease)}
.hamburger.active .hamburger-icon line:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.active .hamburger-icon line:nth-child(2){opacity:0}
.hamburger.active .hamburger-icon line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── Hero ────────────────────────────────────── */
.hero{
  position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;
  justify-content:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.45) 40%,rgba(0,0,0,.55) 100%);
}

#hero-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0}

.hero-video-wrap{
  position:absolute;inset:0;z-index:0;
  background:url('https://images.unsplash.com/photo-1601362840469-51e4d8d58785?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
}
.hero-video{
  display:block;
  width:100%;height:100%;object-fit:cover;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.45) 40%,rgba(0,0,0,.65) 100%);
}

.hero-shimmer{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.32) 0%, transparent 18%),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,.22) 0%, transparent 20%);
  filter:blur(20px);
  opacity:.75;
  mix-blend-mode:screen;
}

.hero-content{
  position:relative;z-index:2;text-align:center;
  padding:120px 24px 60px;max-width:900px;
}

.hero-headline{
  font-family:var(--font-head);
  font-size:clamp(1.4rem,4vw,2.4rem);
  padding: 20px 36px 10px;
  display:inline-block;
  font-weight:800;letter-spacing:0.02em;line-height:1.15;
  color:var(--white);margin-bottom:12px;
}

.hero-city-word{
  display:inline;color:var(--cream);
  transition:color var(--t1) var(--ease);
}

.hero-ctas{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:24px;
}
.hero-ctas .btn{
  padding:16px 36px;
  font-size:.85rem;
  letter-spacing:.1em;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  font-family:var(--font-head);
  font-weight:700;
  text-transform:uppercase;
}
.hero-ctas .btn-primary{
  background:var(--teal);
  color:var(--white);
  border-color:var(--teal);
  border-radius:6px;
  transition:background var(--t2) var(--ease), color var(--t2) var(--ease),
             border-color var(--t2) var(--ease), transform var(--t1) var(--ease),
             box-shadow .25s ease;
}
.hero-ctas .btn-primary:hover{
  background:var(--teal-dark);
  border-color:var(--teal-dark);
  color:var(--white);
  box-shadow:0 0 20px rgba(0,180,180,.5), 0 0 40px rgba(0,180,180,.3);
}
.hero-ctas .btn-outline{
  background:var(--teal);
  color:var(--white);
  border-color:var(--teal);
  border-radius:6px;
  transition:background var(--t2) var(--ease), color var(--t2) var(--ease),
             border-color var(--t2) var(--ease), transform var(--t1) var(--ease),
             box-shadow .25s ease;
}
.hero-ctas .btn-outline:hover{
  background:var(--teal-dark);
  border-color:var(--teal-dark);
  color:var(--white);
  box-shadow:0 0 20px rgba(0,180,180,.5), 0 0 40px rgba(0,180,180,.3);
}

/* Hero Google badge — clean inline style like reference */
.hero-google{
  display:inline-flex;align-items:center;gap:14px;
  color:var(--white);
  padding:0;
  font-size:1.25rem;font-weight:600;
  background:none;
  border:none;
  backdrop-filter:none;
  margin-top:16px;
  cursor:pointer;
  transition:transform .25s ease;
}
.hero-google:hover{
  transform:translateY(-6px);
}
.hero-google .google-text{font-weight:700;font-size:1.8rem;letter-spacing:-.02em}
.hero-google .g-blue{color:#4285F4 !important}
.hero-google .g-red{color:#EA4335 !important}
.hero-google .g-yellow{color:#FBBC05 !important}
.hero-google .g-green{color:#34A853 !important}
.hero-google .stars{color:#fbbc04;font-size:1.7rem;letter-spacing:3px}
.hero-google .google-rating{font-weight:800;font-size:1.45rem}
.hero-google .google-count{color:rgba(255,255,255,.9);font-size:1.2rem;font-weight:700}

/* Scroll indicator */
.scroll-indicator{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:.45;
}
.scroll-indicator span{font-family:var(--font-head);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--white);font-weight:600}
.scroll-line{width:1.5px;height:40px;background:var(--white);
  animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(1);opacity:.3}50%{transform:scaleY(1.3);opacity:1}}

/* ── Popular Services ────────────────────────── */
.popular-services{
  padding:80px 0;background:var(--charcoal);
}
.popular-services .container{
  max-width:1280px;padding:0;
}
.popular-services .section-label{
  color:var(--teal);text-align:left;display:block;margin-bottom:12px;padding:0 24px;
  font-size:1rem;letter-spacing:.18em;font-weight:700;text-transform:uppercase;
}
.popular-services .section-title{
  text-align:left;color:var(--teal);margin-bottom:0;padding:0 24px 40px;
  font-size:clamp(2rem,3.4vw,2.7rem);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
}
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.popular-services .service-card{
  position:relative;min-height:700px;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;text-decoration:none;
}
.popular-services .service-card-bg{
  position:absolute;inset:0;background:center/cover no-repeat;
  transition:transform .6s ease;
}
.popular-services .service-card:hover .service-card-bg{transform:scale(1.04)}
.popular-services .service-card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.7) 100%);
  transition:background .4s ease;
}
.popular-services .service-card:hover .service-card-overlay{
  background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.82) 100%);
}
.popular-services .service-card-content{
  position:relative;z-index:2;padding:48px 42px;
  background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.78) 100%);
  border-top:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.popular-services .service-card-num{
  display:block;font-family:var(--font-head);font-size:1rem;font-weight:700;
  color:#fffdf6;margin-bottom:14px;letter-spacing:.02em;
  text-shadow:0 2px 14px rgba(0,0,0,.95);
}
.popular-services .service-card h3{
  font-family:var(--font-head);font-size:clamp(1.6rem,2.5vw,2.2rem);
  font-weight:800;color:#fffdf6;line-height:1.1;margin-bottom:12px;
  text-shadow:0 2px 18px rgba(0,0,0,.95);
}
.popular-services .service-card p{
  color:#fefcf3;font-size:1rem;line-height:1.6;
  text-shadow:0 2px 14px rgba(0,0,0,.95);
}

@media(max-width:900px){
  .services-grid{grid-template-columns:1fr}
  .popular-services .service-card{min-height:460px}
}

/* ── Doorstep Section ────────────────────────── */
.doorstep{
  padding:108px 24px;background:#3a3a3a;
}
.doorstep .two-col{
  align-items:center;gap:64px;
}
.doorstep-text h2{
  font-family:var(--font-head);font-size:clamp(1.7rem,3.5vw,2.6rem);
  font-weight:800;line-height:1.15;color:var(--white);margin-bottom:22px;
}
.doorstep-text p{
  color:rgba(255,255,255,.85);font-size:1.05rem;line-height:1.8;margin-bottom:32px;
}
.doorstep-image img{
  width:100%;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.4);
}
@media(max-width:900px){
  .doorstep .two-col{grid-template-columns:1fr;gap:40px}
  .doorstep-text{text-align:center}
  .doorstep-text .btn{margin:0 auto;display:inline-flex}
}

/* ── Why Trust Us ────────────────────────────── */
.why-trust{
  padding:0;background:var(--teal-dark);
  overflow:hidden;
}
.why-trust .container{
  display:grid;
  grid-template-columns:1fr minmax(360px, 34%);
  gap:64px;
  align-items:stretch;
  max-width:1400px;
  margin:0 auto;
  padding:0 48px;
}
.why-trust-text{
  padding:120px 0;
  text-align:left;
}
.why-trust .section-label{
  color:var(--cream);margin-bottom:16px;font-size:.85rem;letter-spacing:.18em;
}
.why-trust .section-title{
  color:var(--white);margin-bottom:32px;font-size:clamp(2rem, 3.6vw, 3rem);line-height:1.1;text-align:left;
}
.why-trust-image{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100%;
}
.why-trust-image img{
  width:100%;
  height:100%;
  max-height:560px;
  object-fit:cover;
  object-position:center;
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.4);
}
.trust-content{
  max-width:720px;
}
.trust-content p{
  font-size:1.15rem;line-height:1.9;
}
.trust-content p{
  color:rgba(255,255,255,.92);font-size:1.05rem;line-height:1.85;margin-bottom:18px;
}
.trust-content .loc-city{color:var(--cream);font-weight:600}
.trust-short{display:none}

/* ── Why Choose Us ───────────────────────────── */
.why-choose{
  padding:108px 24px;background:var(--teal-dark);
}

.why-text .section-label{color:var(--cream);margin-bottom:14px}
.why-text h2{
  font-family:var(--font-head);font-size:clamp(1.7rem,3.5vw,2.5rem);
  font-weight:800;line-height:1.18;margin-bottom:22px;color:var(--white);
}
.why-text p{
  color:rgba(255,255,255,1);
  margin-bottom:16px;font-size:1rem;line-height:1.8;
}
.why-text .accent-word{color:var(--cream);font-weight:700}
.why-text .btn{margin-top:28px}

.why-features{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:28px 0;
}
.why-feature{
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:var(--white);
  font-size:.95rem;
  line-height:1.7;
}
.why-feature svg{
  flex-shrink:0;
  margin-top:2px;
  color:var(--cream);
}
.why-feature strong{
  color:var(--cream);
  font-weight:700;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:28px 0;
  max-width:520px;
}
.stat-item{
  text-align:center;
  padding:16px 12px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
}
.stat-number{
  font-family:var(--font-head);
  font-size:1.8rem;
  font-weight:800;
  color:var(--white);
  line-height:1.2;
  margin-bottom:4px;
}
.stat-label{
  font-family:var(--font-head);
  font-size:.72rem;
  font-weight:600;
  color:rgba(255,255,255,.85);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.why-image img{
  width:100%;object-fit:cover;aspect-ratio:4/3;border-radius:8px;min-height:380px;
}

/* ── Steps ───────────────────────────────────── */
.easy-steps{padding:108px 24px;background:var(--white)}

.easy-steps .section-title{
  font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800;
  text-transform:none;letter-spacing:0;color:var(--charcoal);
}
.easy-steps .section-title .accent{color:var(--teal)}

.steps-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;
}

.step-card{
  background:var(--gray-bg);
  padding:36px 28px;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;
  border:1px solid var(--gray-light);
  border-radius:24px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.step-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 72px rgba(0,0,0,.08);
}

.step-icon{
  width:56px;height:56px;
  background:var(--teal);
  display:flex;align-items:center;justify-content:center;color:var(--white);
  border-radius:18px;
  font-family:var(--font-head);font-weight:800;font-size:1.1rem;
}
.step-card h3{
  font-family:var(--font-head);font-size:1.15rem;font-weight:800;
  color:var(--charcoal);
}
.step-card p{color:var(--text-mid);font-size:.95rem;line-height:1.8}
.step-num{
  display:inline-block;
  font-family:var(--font-head);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);margin-bottom:8px;
}

/* ── Popular Services ────────────────────────── */
.popular-services{background:var(--white);padding-bottom:108px}

.popular-services-banner{
  background:var(--teal-dark);
  padding:28px 24px;
  margin-bottom:48px;
}
.banner-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.banner-title{
  font-family:var(--font-head);
  font-size:clamp(1.3rem,2.5vw,1.8rem);
  font-weight:800;
  color:var(--white);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0;
}
.banner-link{
  font-family:var(--font-head);
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:2px;
  transition:border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.banner-link:hover{
  border-color:var(--white);
}

.popular-services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.service-cards{
  padding:108px 0;
  background:rgba(255,255,255,.04);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.service-cards-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:40px;
}

@media(max-width:960px){
  .service-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:640px){
  .service-cards-grid{grid-template-columns:1fr;}
}

.service-card{
  display:block;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  overflow:hidden;
  text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.16);
}

.service-card-img{
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  position:relative;
}
.service-card-img::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.35),transparent 60%);
  opacity:0;
  transition:opacity .3s ease;
}
.service-card:hover .service-card-img::after{
  opacity:1;
}
.service-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.service-card:hover .service-card-img img{
  transform:scale(1.05);
}

.service-card-banner{
  padding:18px 22px 22px;
  font-family:var(--font-head);
  font-size:1.05rem;
  font-weight:700;
  color:var(--white);
  background:rgba(0,0,0,.45);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.service-card-body{
  padding:24px;
}

.service-card-body h3{
  font-family:var(--font-head);
  font-size:1.15rem;
  font-weight:700;
  color:var(--charcoal);
  margin-bottom:10px;
}

.service-card-popular{
  display:block;
  background:var(--white);
  border:1px solid var(--gray-light);
  overflow:hidden;
  text-decoration:none;
  transition:box-shadow .3s ease;
}
.service-card-popular:hover{
  box-shadow:0 12px 40px rgba(0,0,0,.12);
}

.service-card-popular:hover .service-card-img::after{
  opacity:1;
}
.service-card-popular:hover .service-card-img img{
  transform:scale(1.08);
}

.service-card-body{
  padding:24px;
}
.service-card-body h3{
  font-family:var(--font-head);
  font-size:1.15rem;
  font-weight:700;
  color:var(--charcoal);
  margin-bottom:10px;
}
.service-card-cta{
  font-family:var(--font-head);
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--teal);
  transition:color .2s ease;
}
.service-card-popular:hover .service-card-cta{
  color:var(--teal-dark);
}

/* ── Reviews ─────────────────────────────────── */
.reviews{padding:80px 24px;background:var(--charcoal);overflow:hidden}

.reviews-layout{display:flex;align-items:center;gap:40px;max-width:1200px;margin:0 auto}

/* Left: Rating Summary */
.reviews-summary{
  flex-shrink:0;width:220px;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.excellent-label{font-family:var(--font-head);font-weight:800;font-size:1.4rem;text-transform:uppercase;letter-spacing:.06em;color:var(--white);margin:0}
.stars.large{color:#fbbc04;font-size:2.2rem;letter-spacing:3px;display:block;margin:0;font-weight:700}
.review-count{font-size:.95rem;color:rgba(255,255,255,.7);margin:0;font-weight:500}
.review-count strong{color:var(--white);text-decoration:underline;font-weight:600}
.google-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--white);margin-top:4px}
.google-badge svg{width:22px;height:22px}

/* Right: Carousel */
.reviews-carousel-wrap{flex:1;display:flex;align-items:center;gap:16px;position:relative;overflow:hidden}
.reviews-carousel{display:flex;gap:20px;overflow-x:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:8px 0;touch-action:pan-x}

.carousel-arrow{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.15);color:var(--white);font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--t2) var(--ease),border-color var(--t2) var(--ease),transform var(--t1) var(--ease);
  flex-shrink:0;z-index:10;position:relative;
}
.carousel-arrow:hover{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.6);transform:scale(1.1)}
.carousel-arrow:active{transform:scale(.95)}

/* Dark Review Cards */
.review-card-dark{
  background:#1a1a1a;border:1px solid rgba(255,255,255,.08);
  padding:24px;width:300px;min-height:260px;flex-shrink:0;
  border-radius:12px;scroll-snap-align:start;
  transition:box-shadow var(--t3) var(--ease),transform var(--t3) var(--ease);
}
.review-card-dark:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  transform:translateY(-2px);
}

.review-card-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.reviewer-info{flex:1}
.reviewer-name{font-weight:700;font-size:.95rem;color:var(--white);margin:0}
.review-date{font-size:.78rem;color:rgba(255,255,255,.5);margin:0}
.review-google-icon{margin-left:auto;opacity:.8}
.review-google-icon svg{width:18px;height:18px}

.review-stars-dark{color:#fbbc04;font-size:1rem;margin-bottom:10px;font-weight:700;display:flex;align-items:center;gap:6px}
.verified-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:#4285F4;
  color:var(--white);font-size:.65rem;font-weight:700;
}

.review-text-dark{font-size:.88rem;color:rgba(255,255,255,.75);line-height:1.6;margin-bottom:10px}
.read-more{color:rgba(255,255,255,.5);font-size:.82rem;text-decoration:none;transition:color var(--t1) var(--ease)}
.read-more:hover{color:rgba(255,255,255,.8)}

.reviews-footer{text-align:center;margin-top:48px;padding-top:32px;border-top:1px solid rgba(255,255,255,.08)}
.reviews-footer-text{color:rgba(255,255,255,.6);margin-bottom:16px;font-size:.95rem}

/* Responsive */
@media(max-width:900px){
  .reviews-layout{flex-direction:column;align-items:center;gap:32px}
  .reviews-summary{align-items:center;text-align:center;width:auto}
  .reviews-carousel-wrap{width:100%}
  .review-card-dark{width:280px}
}
@media(max-width:640px){
  .review-card-dark{width:260px;min-height:240px}
  .carousel-arrow{display:none}
  .reviews-carousel-wrap{overflow:visible}
  .reviews-carousel{
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    scroll-snap-type:x mandatory;
  }
  .reviews-carousel::-webkit-scrollbar{display:none}
}

/* ── Local Trust ─────────────────────────────── */
.local-trust{padding:108px 24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:28px}

.trust-text h2{font-family:var(--font-head);font-size:clamp(1.7rem,3.5vw,2.5rem);font-weight:800;line-height:1.18;margin-bottom:22px;color:var(--charcoal)}
.trust-text p{color:var(--text-mid);margin-bottom:16px;font-size:1rem;line-height:1.8}
.trust-text .btn{margin-top:28px}

.trust-image img{
  width:100%;object-fit:cover;aspect-ratio:4/3;
}
.trust-image.no-image{background:var(--gray-light);aspect-ratio:4/3}

/* ── Serving Areas ───────────────────────────── */
.serving-areas {
  background:rgba(255,255,255,.04);
  padding:80px 0;
}
.serving-areas .section-title{color:var(--charcoal)}
.serving-areas .section-subtitle{color:var(--text-mid)}

.areas-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:40px;
}
.area-card{
  text-decoration:none;
  color:var(--charcoal);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.area-img-wrap{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:10px;
}
.area-img-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease;
}
.area-card:hover .area-img-wrap img{transform:scale(1.05)}
.area-name{
  font-family:var(--font-head);
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  text-align:center;
  margin:0;
}
@media(max-width:640px){
  .areas-grid{grid-template-columns:repeat(2,1fr)}
}

/* Location cards grid */
/* ===================== ROUNDED LOCATION CARDS ===================== */
.location-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 48px;
}

@media (max-width: 992px) {
    .location-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .location-cards-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-top: 20px;
    padding-bottom: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .location-cards-grid::-webkit-scrollbar { display: none; }
  .location-cards-grid .location-card {
    flex: 0 0 auto;
    width: min(220px, 72vw);
    scroll-snap-align: start;
  }
}

.location-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    display: block;
    text-decoration: none;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.location-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
}

.location-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.location-card-body {
    padding: 14px 4px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location-card-body h3 {
    color: #111111;
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
}

.location-card-body span {
    color: var(--teal);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.location-card:hover {
    transform: translateY(-6px);
    box-shadow: none;
}

.location-card:hover .location-card-img img {
    transform: scale(1.05);
}

/* ── Quote Form ──────────────────────────────── */
.quote-section{padding:108px 24px;background:var(--teal);color:var(--white)}
.quote-section .section-title{color:var(--white)}
.quote-section .section-subtitle{color:rgba(255,255,255,.85)}


.form-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:0}
.form-or{text-align:center;font-family:var(--font-head);font-weight:700;font-size:1rem;color:rgba(255,255,255,.8);margin-bottom:8px;text-transform:uppercase;letter-spacing:.1em}
.form-subtext{text-align:center;color:var(--white);font-size:1rem;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}

.quote-form{
  background:var(--white);padding:48px;
  max-width:820px;margin:0 auto;
  box-shadow:0 16px 64px rgba(0,0,0,.2);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group.full{grid-column:1/-1}

.form-group label{
  font-family:var(--font-head);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--charcoal);
}
.req{color:var(--teal);font-weight:700}

.form-group input,.form-group textarea,.form-group select{
  padding:14px 16px;border:1px solid #ccc;
  font-family:var(--font-body);font-size:1rem;color:var(--charcoal);
  background:var(--white);outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease);
}
.form-group input:focus,.form-group textarea:focus{
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,76,90,.1);
}
.form-group textarea{resize:vertical;min-height:120px}
.form-group input.error,.form-group textarea.error{
  border-color:#d93025;box-shadow:0 0 0 3px rgba(217,48,37,.12);
}
.form-success{
  text-align:center;font-weight:700;margin-top:14px;min-height:24px;font-size:1rem;
  color:#1a6b2e;text-transform:uppercase;letter-spacing:.05em;
}
.form-error{
  text-align:center;font-weight:600;margin-top:10px;min-height:24px;font-size:.9rem;
  color:#d93025;
}

/* ── FAQ ─────────────────────────────────────── */
.faq{padding:108px 24px;background:rgba(255,255,255,.04);color:var(--charcoal);border:1px solid rgba(255,255,255,.08);border-radius:28px}

.faq-header{text-align:center;margin-bottom:16px}
.faq-header h2{
  font-family:var(--font-head);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;
  color:var(--charcoal);margin-bottom:16px;
}
.faq-header p{color:var(--text-mid);font-size:.97rem;line-height:1.75;max-width:580px;margin:0 auto 48px}

/* Full-width accordion — Archer's style */
.faq-list{
  max-width:820px;margin:0 auto;
  display:flex;flex-direction:column;
  gap:16px;
}
.faq-item{
  background:var(--white);
  border:1px solid var(--gray-light);
  border-radius:12px;
  padding:0 24px;
  overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-item:hover{
  border-color:var(--teal);
  box-shadow:0 4px 16px rgba(0,76,90,.08);
}
.faq-item.open{
  border-color:var(--teal);
}

.faq-question{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:20px 0;font-family:var(--font-head);font-weight:700;font-size:1rem;
  color:var(--charcoal);text-align:left;gap:16px;
  transition:color var(--t1) var(--ease);-webkit-tap-highlight-color:transparent;
  background:none;border:none;cursor:pointer;
}
.faq-question:hover{color:var(--teal)}
.faq-item.open .faq-question{color:var(--teal)}
.faq-question-text{flex:1;min-width:0;display:inline-flex;flex-wrap:wrap;gap:.15em;align-items:center;text-align:left;}
.faq-question-text .loc-city{white-space:nowrap;}
.faq-icon{
  flex-shrink:0;width:26px;height:26px;
  position:relative;display:flex;align-items:center;justify-content:center;
  color:var(--teal);
}
.faq-icon::before,.faq-icon::after{
  content:'';position:absolute;background:currentColor;border-radius:2px;
  transition:transform var(--t2) var(--ease),opacity var(--t2) var(--ease);
}
.faq-icon::before{width:14px;height:1.5px}
.faq-icon::after {width:1.5px;height:14px}
.faq-item.open .faq-icon::after{transform:rotate(90deg);opacity:0}

.faq-answer{
  overflow:hidden;max-height:0;padding:0;opacity:0;
  transition:max-height .36s cubic-bezier(.22,1,.36,1),padding .28s ease,opacity .28s ease;
}
.faq-item.open .faq-answer{max-height:600px;padding:0 0 20px;opacity:1}
.faq-answer p{font-size:.95rem;color:var(--text-mid);line-height:1.8}

/* ── Gift Cards ──────────────────────────────── */
.gift-cards{
  padding:72px 24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:28px;
}
.gift-inner{display:flex;align-items:center;gap:48px;max-width:800px;margin:0 auto}
.gift-text h2{font-family:var(--font-head);font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:800;margin-bottom:14px;color:var(--charcoal)}
.gift-text p{color:var(--text-mid);margin-bottom:24px;font-size:.96rem;line-height:1.7}
.gift-icon{flex-shrink:0;color:var(--teal);opacity:.75}

/* ── Footer ──────────────────────────────────── */
.site-footer{background:var(--teal-dark);padding:60px 24px 0;color:rgba(255,255,255,.9);font-size:.86rem}

.footer-inner{
  display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:40px;align-items:start;padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-logo{display:inline-block}
.footer-logo img{height:44px;margin-bottom:16px;filter:brightness(0) invert(1)}
.footer-logo .logo-text{display:none;font-size:.95rem;margin-bottom:14px;color:var(--white)}
.footer-tagline{font-size:.84rem;line-height:1.7;margin-bottom:20px;color:rgba(255,255,255,.85);max-width:340px}
.footer-social{display:flex;gap:10px;flex-wrap:wrap}

.footer-contact h4,.footer-hours h4,.footer-areas h4,.footer-brand h4{
  font-family:var(--font-head);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--white);margin-bottom:16px;
}
.footer-brand h4{margin-bottom:8px}
.footer-brand .footer-logo img{margin-bottom:8px}
.footer-contact p,.footer-hours p{margin-bottom:6px;color:rgba(255,255,255,.85)}
.footer-contact a{color:rgba(255,255,255,.85);transition:color var(--t1) var(--ease)}
.footer-contact a:hover{color:var(--white)}

.footer-areas ul{display:flex;flex-direction:column;gap:8px}
.footer-areas a{color:rgba(255,255,255,.85);transition:color var(--t1) var(--ease)}
.footer-areas a:hover{color:var(--white)}

.footer-social .social-icon{color:rgba(255,255,255,.8)}
.footer-social .social-icon:hover{color:var(--white)}

.footer-bottom{padding:18px 24px;text-align:center;font-size:.78rem;color:rgba(255,255,255,.6)}

/* ── Section dividers ────────────────────────── */
.section-divider{
  width:100%;height:1px;background:var(--gray-light);
}
.section-divider.dark{background:rgba(255,255,255,.1)}

/* ── Scroll-reveal ───────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal-stagger>*{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal-stagger.visible>*{opacity:1;transform:none}

/* ── Mobile nav backdrop ─────────────────────── */
.nav-backdrop{
  position:fixed;inset:var(--header-h) 0 0 0;z-index:840;
  background:rgba(0,0,0,.45);border:none;cursor:pointer;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;
}
.nav-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}
body.menu-open{overflow:hidden}

/* ── Floating CTA ────────────────────────────── */
.floating-cta{
  position:fixed;bottom:24px;right:24px;z-index:500;
  background:var(--teal);color:var(--white);
  padding:14px 22px;font-family:var(--font-head);font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 4px 20px rgba(0,76,90,.35);
  opacity:0;pointer-events:none;transform:translateY(16px);
  transition:opacity .3s ease,transform .3s ease,background .15s ease;
}
.floating-cta--visible{opacity:1;pointer-events:auto;transform:none}
.floating-cta:hover{background:var(--teal-dark)}

/* ── Btn ripple ──────────────────────────────── */
.btn-ripple{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.4);transform:translate(-50%,-50%) scale(0);
  animation:rippleOut .5s ease-out forwards;
  pointer-events:none;
}
@keyframes rippleOut{to{transform:translate(-50%,-50%) scale(60);opacity:0}}

/* ── Image fade-in ───────────────────────────── */
img{opacity:0;transition:opacity .4s ease}
img.img-loaded,img[src*="data:"]{opacity:1}

/* ── Page transition ─────────────────────────── */
body.page-leaving{opacity:0;transition:opacity .25s ease}

/* ── Service detail sections (shared with services page) ── */
.service-detail{
  padding:100px 24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
}
.service-detail--dark{
  background:rgba(255,255,255,.05);
}
.service-text h2{
  font-family:var(--font-head);
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  font-weight:800;
  line-height:1.18;
  margin-bottom:20px;
  color:var(--charcoal);
}
.service-text p{
  color:var(--text-mid);
  margin-bottom:16px;
  font-size:1rem;
  line-height:1.8;
}
.service-text .btn{margin-top:20px}
.service-img img{
  width:100%;
  object-fit:cover;
  aspect-ratio:4/3;
}
.service-img.no-image{
  background:var(--gray-light);
  aspect-ratio:4/3;
}

/* ── Trusted Local Detailing ── */
.trusted-local{
  padding:100px 24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  margin:24px 0;
}
.trusted-local .section-title{color:var(--white)}
.trusted-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:48px;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}
.trusted-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:36px 28px;
  text-align:center;
  transition:transform var(--t1) var(--ease),background var(--t1) var(--ease),border-color var(--t1) var(--ease);
}
.trusted-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
}
.trusted-icon{
  width:56px;height:56px;
  border-radius:14px;
  background:var(--teal);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
  color:var(--white);
}
.trusted-card h3{
  font-family:var(--font-head);
  font-size:1.15rem;
  font-weight:700;
  color:var(--white);
  margin-bottom:12px;
}
.trusted-card p{
  font-size:.9rem;
  color:var(--text-mid2);
  line-height:1.6;
}

@media(max-width:900px){
  .trusted-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .trusted-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}
}

/* ── Add-on services (shared with services page) ── */
.addons-section{
  padding:100px 24px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(34,34,34,.08);
  border-radius:28px;
}
.addons-section .section-title{color:var(--charcoal)}
.addons-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:48px;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}
.addon-tag{
  background:rgba(255,255,255,.98);
  color:var(--charcoal);
  font-family:var(--font-head);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.04em;
  padding:24px 22px;
  text-align:center;
  border:1px solid rgba(34,34,34,.08);
  border-radius:18px;
  transition:background var(--t2) var(--ease),color var(--t2) var(--ease),
             border-color var(--t2) var(--ease),transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease);
  cursor:default;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:84px;
}
.addon-tag:hover{
  background:var(--teal);
  border-color:var(--teal);
  color:var(--white);
  transform:translateY(-3px);
  box-shadow:0 20px 60px rgba(0,76,90,.18);
}

/* ── Responsive ──────────────────────────────── */
@media(max-width:1024px){
  .two-col{gap:44px}
  .addons-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── Brand text: first header element to hide on smaller screens ───── */
@media(max-width:1400px){
  .logo .logo-text,
  #logo-text { display: none; }
}

/* ── Priority + hamburger panel navigation ───── */
@media(max-width:1199px){
  :root{--header-h:68px}

  /* Overflow items hidden in the top bar, visible in the panel */
  .main-nav:not(.open) > .nav-item--overflow{display:none}

  .hamburger{
    display:flex;align-items:center;justify-content:center;
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    z-index:950;
    min-width:44px;min-height:44px;padding:8px;
    color:var(--white);background:transparent;border:none;
    -webkit-tap-highlight-color:transparent;cursor:pointer;
  }
  .hamburger:focus-visible{outline:3px solid var(--cream);outline-offset:2px}

  /* Reserve space for the absolute hamburger so nav items never collide with it */
  .header-inner{position:relative;padding-right:56px}

  /* Closed: act as the priority top-bar */
  .main-nav{
    display:flex;flex-direction:row;align-items:center;gap:4px;
    margin-left:auto;
    position:static;width:auto;height:auto;
    opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;backdrop-filter:none;box-shadow:none;
    padding:0;overflow:visible;transform:none;
  }

  /* Open: compact scrollable panel on the right */
  .main-nav.open{
    position:fixed;top:var(--header-h);right:0;z-index:850;
    width:40vw;height:37vh;
    min-width:260px;min-height:280px;max-width:380px;
    display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;
    margin:0;padding:16px 0;
    background:rgba(30,30,30,.98);
    backdrop-filter:blur(20px);
    box-shadow:-8px 8px 32px rgba(0,0,0,.4);
    overflow-y:auto;
    opacity:1;visibility:visible;pointer-events:auto;
  }

  /* Visible scrollbar hint */
  .main-nav.open::-webkit-scrollbar{width:8px}
  .main-nav.open::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
  .main-nav.open::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:4px}
  .main-nav.open::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4)}
  .main-nav.open{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) rgba(255,255,255,.06)}

  /* Overflow items hidden in the top bar, visible in the panel */
  
  .main-nav.open > .social-icons--nav{
    display:flex;justify-content:flex-start;flex-wrap:wrap;gap:12px;
    margin:0;padding:0 20px;width:100%
  }
  .main-nav.open > .social-icons--nav .social-icon{
    color:rgba(255,255,255,.75);min-width:40px;min-height:40px
  }
  .main-nav.open > .social-icons--nav .social-icon:hover{color:var(--white)}

  /* Panel item styling */
  .main-nav.open > .nav-link,
  .main-nav.open > .nav-btn{
    display:flex;align-items:center;justify-content:flex-start;
    box-sizing:border-box;margin:0;
    padding:14px 20px;width:100%;
    font:700 1rem/1.2 var(--font-head);
    text-align:left;text-transform:uppercase;
    color:var(--white);
    min-height:48px;border-bottom:1px solid rgba(255,255,255,.08);
    transition:background .15s ease,color .15s ease;
  }
  .main-nav.open > .nav-link:hover,
  .main-nav.open > .nav-btn:hover{background:rgba(255,255,255,.08);color:var(--white)}
  .main-nav.open > .nav-link,
  .main-nav.open > .nav-btn{position:relative}
  .main-nav.open > .nav-link::after,
  .main-nav.open > .nav-btn::after{display:none}
  .main-nav.open > .nav-link:hover,
  .main-nav.open > .nav-btn:hover{
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:4px;
  }

  .main-nav.open > .nav-btn{
    appearance:none;-webkit-appearance:none;border:none;background:none;cursor:pointer;gap:12px;
  }
  .main-nav.open > .nav-btn .caret{
    margin-left:auto;font-size:.55rem;opacity:.55;
    transition:transform .2s ease;
  }
  .main-nav.open > .nav-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}

  /* Normal dropdown toggle inside the panel (e.g. Service Areas) should match nav-link sizing */
  .main-nav.open > .nav-dropdown:not(.nav-dropdown--split) > .nav-btn{
    display:flex;align-items:center;justify-content:flex-start;
    box-sizing:border-box;margin:0;
    padding:14px 20px;width:100%;
    font:700 1rem/1.2 var(--font-head);
    text-align:left;text-transform:uppercase;
    color:var(--white);
    min-height:48px;border-bottom:1px solid rgba(255,255,255,.08);
    transition:background .15s ease,color .15s ease;
    appearance:none;-webkit-appearance:none;border:none;background:none;cursor:pointer;gap:12px;
  }
  .main-nav.open > .nav-dropdown:not(.nav-dropdown--split) > .nav-btn:hover{
    background:rgba(255,255,255,.08);color:var(--white);
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  }
  .main-nav.open > .nav-dropdown:not(.nav-dropdown--split) > .nav-btn .caret{
    margin-left:auto;font-size:.55rem;opacity:.55;
    transition:transform .2s ease;
  }
  .main-nav.open > .nav-dropdown:not(.nav-dropdown--split) > .nav-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}

  .main-nav.open > .nav-dropdown{width:100%;display:flex;flex-direction:column;align-items:stretch}

  .main-nav.open > .nav-dropdown > .dropdown-menu{
    position:static;transform:none;opacity:1;pointer-events:auto;
    background:transparent;border:none;box-shadow:none;
    display:block;width:100%;
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .main-nav.open > .nav-dropdown > .dropdown-menu.open{max-height:300px}
  .main-nav.open > .nav-dropdown > .dropdown-menu a{
    display:flex;align-items:center;justify-content:flex-start;
    font-size:.9rem;font-weight:600;color:rgba(255,255,255,.85);
    padding:10px 20px 10px 40px;min-height:40px;
    border-bottom:1px solid rgba(255,255,255,.06);
    transition:background .15s ease,color .15s ease;
  }
  .main-nav.open > .nav-dropdown > .dropdown-menu a:hover{background:rgba(255,255,255,.06);color:var(--white)}

  .main-nav.open > .nav-dropdown--split{flex-direction:row;align-items:stretch;flex-wrap:wrap}
  .main-nav.open > .nav-dropdown--split > .nav-dropdown-label{flex:1;justify-content:flex-start;border-bottom:1px solid rgba(255,255,255,.08)}
  .main-nav.open > .nav-dropdown--split > .nav-dropdown-toggle{justify-content:center;min-width:48px;border-left:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
  .main-nav.open > .nav-dropdown--split > .nav-dropdown-toggle .caret{margin-left:0}

  .main-nav.open > .nav-book-btn{
    display:flex;margin:16px 20px 0;width:auto;justify-content:center;
    padding:12px 20px;font-size:.95rem;min-height:44px;
    border-radius:8px;
  }
  .main-nav.open > .lang-switcher{
    display:flex;justify-content:flex-start;gap:10px;width:100%;
    margin:16px 20px 0;padding:0;width:auto
  }
  .main-nav.open > .lang-switcher .lang-btn{width:36px;height:36px;font-size:.7rem}
}

@media(max-width:767px){
  :root{--header-h:64px}

  .hero-content{padding:80px 24px 48px}
  .hero-headline{font-size:clamp(1.6rem,4.5vw,2.8rem);padding:40px 36px;display:inline-block;}
  .hero-ctas{gap:12px}

  .two-col,.two-col.reverse{grid-template-columns:1fr;gap:32px;direction:ltr}
  .two-col.reverse>*{direction:ltr}
  .trust-image{order:-1}

  .steps-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}

  .popular-services-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}
  .banner-inner{flex-direction:column;align-items:flex-start}

  .reviews-wrap{flex-direction:column}
  .reviews-summary{min-width:unset;width:100%}

  .service-detail .two-col{grid-template-columns:1fr;gap:28px}
  .service-detail--dark .service-img{order:-1}
  .addons-grid{grid-template-columns:repeat(2,1fr);gap:8px;max-width:100%;margin-left:auto;margin-right:auto}
  .addon-tag{font-size:.72rem;padding:8px 10px;min-height:36px}

  .faq-inner{grid-template-columns:1fr}
  .faq-image{display:none}

  .footer-inner{grid-template-columns:1fr 1fr;gap:32px;align-items:start}
  .quote-form{padding:32px 20px}
  .form-row{grid-template-columns:1fr}

  .gift-inner{flex-direction:column;text-align:center}
  .gift-icon{display:none}
}

@media(max-width:480px){
  .footer-inner{grid-template-columns:1fr;align-items:start}
  .hero-headline{font-size:clamp(1.6rem,4.5vw,2.8rem);padding:40px 36px;display:inline-block;}
  .stats-grid{grid-template-columns:1fr;max-width:280px;margin-left:auto;margin-right:auto}
  .stat-number{font-size:1.5rem}
  .btn-lg{padding:12px 24px;font-size:.78rem}
}

/* =============================================
   REDESIGN ADDITIONS
   ============================================= */

/* ── Hero badges ─────────────────────────────── */
.hero-badges {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
  margin-bottom: 20px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--white);
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 10px;
  backdrop-filter: blur(4px);
}
.hero-badge::before {
  content: '✓';
  color: var(--cream);
  font-weight: 700;
}

/* ── Step flow ───────────────────────────────── */
.step-flow {
  padding: 100px 24px;
  background: var(--cream);
}
.step-flow .section-label {
  color: var(--teal);
}
.step-flow .section-title {
  color: var(--charcoal);
}

.step-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.step-flow-item {
  text-align: center;
  padding: 40px 28px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-flow-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.step-flow-item .step-flow-num {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  border-radius: 50%;
}
.step-flow-item .step-flow-num img {
  width: 40px;
  height: 40px;
}
.step-flow-item h3 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 12px;
}
.step-flow-item p {
  font-size: .92rem;
  color: var(--text-mid);
  line-height: 1.65;
}

/* ── Service packages (light theme) ──────────── */
.service-packages {
  padding: 120px 24px;
  background: var(--charcoal);
}
.service-packages .section-title {
  color: var(--teal);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.service-packages .section-subtitle {
  color: rgba(255,255,255,0.9);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.75;
  max-width: 850px;
  margin: 0 auto 48px;
}

.service-packages .vehicle-tabs {
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
}
.service-packages .vtab {
  color: rgba(255,255,255,0.8);
  border-right: 1px solid rgba(255,255,255,0.15);
}
.service-packages .vtab.active {
  background: var(--teal);
  color: var(--white);
}
.service-packages .vtab:hover:not(.active) {
  background: rgba(255,255,255,0.08);
  color: var(--white);
}

/* Hide default BEST VALUE pseudo-element on homepage cards */
.service-packages .price-card--featured::before { display: none; }

/* Package card positioning for badge */
.service-packages .price-card {
  position: relative;
  min-height: 620px;
  height: 620px;
  overflow: hidden;
}
@media(max-width:1024px){
  .service-packages .price-card{min-height:auto;height:auto}
}
.price-card[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* Ready CTA paragraph */
.ready-cta p {
  color: rgba(255,255,255,.9);
  font-size: 1.05rem;
  margin-bottom: 24px;
}

/* Package card image */
.pkg-img {
  width: calc(100% + 56px);
  aspect-ratio: 16/10;
  overflow: hidden;
  margin: -36px -28px 20px;
}
.pkg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "Most booked" badge */
.pkg-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 5px 12px;
  text-transform: uppercase;
  z-index: 2;
}

/* Link to services page */
.service-packages .pkg-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-light);
  margin-bottom: 12px;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease;
}
.service-packages .pkg-toggle:hover {
  color: var(--teal-dark);
}

/* ── Responsive additions ────────────────────── */
@media (max-width: 900px) {
  .step-flow-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .hero-badges { gap: 6px; margin-top: 12px; margin-bottom: 16px; }
  .hero-badge { font-size: .62rem; padding: 4px 8px; }
  .pkg-img { width: calc(100% + 40px); margin: -28px -20px 16px; }
}

@media (max-width: 768px) {
  .service-packages .vehicle-tabs { flex-direction: column; max-width: 340px; margin-left: auto; margin-right: auto; }
  .service-packages .vtab { border-right: none; border-bottom: 1px solid var(--gray-light); }
  .service-packages .vtab:last-child { border-bottom: none; }
}

.quote-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0;
}

.quote-service-col h4 {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.quote-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .84rem;
  color: var(--text-mid);
  margin-bottom: 8px;
  cursor: pointer;
}

.quote-checkbox input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
  cursor: pointer;
}

.quote-submit {
  width: 100%;
  padding: 14px;
  background: var(--teal);
  color: var(--white);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
  margin-top: 8px;
}

.quote-submit:hover {
  background: var(--teal-dark);
}

@media (max-width: 640px) {
  .quote-row,
  .quote-services {
    grid-template-columns: 1fr;
  }
  .quote-form {
    padding: 20px;
  }
  .quote-cta-top {
    flex-direction: column;
    align-items: center;
  }
  .quote-cta-top .btn {
    width: 100%;
    max-width: 320px;
  }
}

/* ── Quote Form (inside ready-cta) ──────────────────────── */
.quote-or {
  color: var(--white);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 16px 0 8px;
}

.quote-title {
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 28px;
}

.quote-form {
  background: var(--white);
  border-radius: 12px;
  padding: 32px;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
}

.quote-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.quote-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.quote-field label {
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.quote-field input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--gray-medium);
  border-radius: 8px;
  font-size: .9rem;
  transition: border-color .2s ease;
  background: var(--white);
}

.quote-field input:focus {
  outline: none;
  border-color: var(--teal);
}

.quote-field input.error {
  border-color: #d93025;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, .12);
}

.ready-cta .form-success,
.ready-cta .form-error {
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.quote-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0;
}

.quote-service-col h4 {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.quote-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .84rem;
  color: var(--text-mid);
  margin-bottom: 8px;
  cursor: pointer;
}

.quote-checkbox input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
  cursor: pointer;
}

.quote-submit {
  width: 100%;
  padding: 14px;
  background: var(--teal);
  color: var(--white);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
  margin-top: 8px;
}

.quote-submit:hover {
  background: var(--teal-dark);
}

@media (max-width: 640px) {
  .quote-row,
  .quote-services {
    grid-template-columns: 1fr;
  }
  .quote-form {
    width: 100%;
    max-width: 100%;
    padding: 20px;
  }
}

/* =============================================
   MOBILE OPTIMIZATIONS
   Added to fully optimize the site for mobile
   ============================================= */

/* Safe-area insets for notched devices */
html {
  -webkit-text-size-adjust: 100%;
}
html, body {
  padding: 0;
}

.site-header {
  padding-left: 0;
  padding-right: 0;
}

.hero-content {
  padding-left: 20px;
  padding-right: 20px;
}

.floating-cta {
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
}

.site-footer, .footer-bottom {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* Reduce heavy motion/effects on small screens and for reduced-motion preference */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .hero-shimmer { display: none; }
  .scroll-indicator { display: none; }
  .hero-video-wrap { transform: none !important; }
  #hero-canvas { display: none !important; }
}

/* iOS form input zoom fix: never go below 16px */
input, textarea, select {
  font-size: max(16px, 1rem);
}

/* Prevent double-tap zoom on buttons */
button, .btn, .nav-link, .nav-btn, .vtab, .faq-question, .carousel-arrow, .social-icon, .addon-tag, .pkg-toggle, .hero-google {
  touch-action: manipulation;
}
.hero-google:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  /* General spacing and typography */
  .container { padding: 0 20px; }
  section, header, footer { max-width: 100%; }

  /* Header / Nav */
  .header-inner { padding: 0 16px; gap: 8px; }
  .logo img { height: 40px; }

  /* Hero */
  .hero { min-height: 92vh; }
  .hero-video { display: none; }
  .hero-video-wrap {
    background-position: center;
    background-size: cover;
    background-image: url('https://images.unsplash.com/photo-1601362840469-51e4d8d58785?auto=format&fit=crop&w=800&q=70');
  }
  .hero-content {
    padding-top: calc(var(--header-h) + 32px);
    padding-bottom: 48px;
    max-width: 100%;
  }
  .hero-headline {
    display: block;
    padding: 12px 0 8px;
    font-size: clamp(1.55rem, 6.5vw, 2.2rem);
    line-height: 1.12;
    margin-bottom: 18px;
  }
  .hero-ctas {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 20px;
  }
  .hero-ctas .btn {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: 16px 24px;
    font-size: .86rem;
  }
  .hero-google {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    font-size: .95rem;
  }
  .hero-google .google-text { font-size: 1.3rem; }
  .hero-google .stars { font-size: 1.15rem; letter-spacing: 2px; }
  .hero-google .google-rating { font-size: 1.1rem; }
  .hero-google .google-count { font-size: .95rem; }

  /* Sections */
  .why-choose, .why-trust, .doorstep, .step-flow,
  .service-packages, .addons-section, .serving-areas,
  .faq, .ready-cta-section, .pricing-section, .service-promo,
  .trust-reviews, .reviews {
    padding: 64px 0;
  }

  /* Why trust: show short paragraph on mobile/tablet */
  .why-trust .trust-content .trust-full {
    display: none;
  }
  .why-trust .trust-content .trust-short {
    display: block;
  }

  /* Two-column layouts */
  .two-col, .two-col.reverse {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* Match why-choose image height to its text column on mobile */
  .why-choose .two-col {
    align-items: stretch;
  }
  .why-choose .why-image {
    display: flex;
    height: 100%;
  }
  .why-choose .why-image img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 6px;
  }

  /* Compact why-choose text so image crop stays reasonable */
  .why-choose .why-text h2 {
    font-size: clamp(1.1rem, 3.2vw, 1.5rem);
    line-height: 1.15;
    margin-bottom: 12px;
  }
  .why-choose .why-text p {
    font-size: .82rem;
    line-height: 1.45;
    margin-bottom: 10px;
  }
  .why-choose .why-text p:nth-of-type(2) {
    display: none;
  }
  .why-choose .why-features {
    gap: 8px;
    margin: 14px 0;
  }
  .why-choose .why-feature {
    font-size: .78rem;
    line-height: 1.35;
    gap: 8px;
  }
  .why-choose .why-feature strong + span {
    display: none;
  }
  .why-choose .why-feature svg {
    width: 18px;
    height: 18px;
  }
  .why-choose .why-text .btn {
    margin-top: 14px;
  }

  .why-text, .doorstep-text, .service-promo-text {
    text-align: left;
  }
  .why-text .btn, .doorstep-text .btn, .service-promo-text .btn {
    margin: 0;
    display: inline-flex;
  }
  .why-image { order: 0; }
  .service-promo-image { order: 0; }

  /* Optimize container padding for mobile */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Why features */
  .why-feature {
    text-align: left;
    gap: 14px;
  }
  .why-feature svg {
    width: 26px;
    height: 26px;
  }

  /* Step flow */
  .step-flow-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 36px;
  }
  .step-flow-item {
    padding: 28px 22px;
  }
  .step-flow-item .step-flow-num {
    width: 64px;
    height: 64px;
  }
  .step-flow-item .step-flow-num img {
    width: 34px;
    height: 34px;
  }

  /* Reviews carousel */
  .reviews-layout {
    flex-direction: column;
    gap: 28px;
  }
  .reviews-summary {
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .excellent-label { font-size: 1.15rem; }
  .stars.large { font-size: 1.7rem; }
  .reviews-carousel-wrap {
    width: 100%;
    gap: 10px;
    overscroll-behavior-x: contain;
  }
  .reviews-carousel {
    overscroll-behavior-x: contain;
  }
  .review-card-dark {
    width: min(300px, 84vw);
    min-height: auto;
    padding: 20px;
  }
  .carousel-arrow {
    width: 40px;
    height: 40px;
  }

  /* Homepage service packages */
  .service-packages .pricing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 420px;
    margin: 0 auto;
  }
  .service-packages .price-card {
    height: auto;
    min-height: auto;
    padding: 28px 20px 24px;
  }
  .service-packages .pkg-img {
    width: calc(100% + 40px);
    margin: -28px -20px 18px;
  }
  .pkg-badge {
    top: 12px;
    right: 12px;
    font-size: .62rem;
    padding: 5px 10px;
  }
  .price-card-title { font-size: 1.25rem; }
  .price-amount { font-size: 2.4rem; }
  .price-desc { font-size: .9rem; }
  .service-packages .pkg-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 10px 0;
  }
  .price-cta {
    min-height: 48px;
    padding: 14px;
    font-size: .86rem;
  }

  /* Vehicle tabs */
  .vehicle-tabs {
    flex-direction: column;
    max-width: 340px;
    margin: 28px auto 36px;
  }
  .vtab {
    min-height: 48px;
    padding: 14px 16px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.15);
    font-size: .82rem;
  }
  .service-packages .vtab {
    border-bottom: 1px solid var(--gray-light);
  }
  .vtab:last-child { border-bottom: none; }

  /* Add-ons */
  .addons-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-width: 100%;
    margin: 32px auto 0;
  }
  .addon-tag {
    min-height: 36px;
    padding: 8px 10px;
    font-size: .72rem;
    border-radius: 8px;
  }

  /* Serving areas */
  .areas-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 28px;
  }
  .location-card-body h3 { font-size: 1rem; }
  .location-card-body span { font-size: .82rem; }

  /* FAQ */
  .faq-header h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
  .faq-list { gap: 12px; }
  .faq-item { padding: 0 18px; }
  .faq-question {
    min-height: 56px;
    padding: 16px 0;
    font-size: .95rem;
    gap: 14px;
  }
  .faq-icon {
    width: 36px;
    height: 36px;
  }
  .faq-answer p { font-size: .92rem; }

  /* Quote form */
  .quote-form {
    width: 100%;
    max-width: 100%;
    padding: 24px 18px 88px;
    border-radius: 12px;
  }
  .ready-cta {
    padding-bottom: 88px;
  }
  .quote-row, .quote-services {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .quote-field input {
    padding: 14px 12px;
    font-size: 16px;
  }
  .quote-field label { font-size: .84rem; }
  .quote-checkbox {
    font-size: .88rem;
    margin-bottom: 10px;
  }
  .quote-checkbox input {
    width: 20px;
    height: 20px;
  }
  .quote-submit {
    min-height: 52px;
    font-size: .92rem;
  }
  .ready-cta h2 { font-size: clamp(1.4rem, 5vw, 1.9rem); }
  .quote-title { font-size: 1.05rem; }
  .ready-btns { flex-direction: column; align-items: stretch; }
  .ready-btns .btn {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    min-height: 48px;
  }

  /* Footer */
  .site-footer { padding-top: 48px; padding-bottom: 0; }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
    padding-bottom: 36px;
  }
  .footer-logo img { height: 40px; filter: brightness(0) invert(1); }
  .footer-tagline { font-size: .88rem; max-width: 100%; }
  .footer-contact p, .footer-hours p { font-size: .88rem; }

  /* Floating CTA */
  .floating-cta {
    padding: 12px 18px;
    font-size: .78rem;
    bottom: 16px;
    right: 16px;
  }
}

@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .carousel-arrow { display: none; }
  .reviews-carousel {
    gap: 12px;
    scroll-snap-type: x mandatory;
  }

  .hero-headline {
    font-size: clamp(1.45rem, 7vw, 1.8rem);
  }
  .hero-ctas .btn {
    padding: 14px 18px;
    font-size: .82rem;
  }

  .section-title {
    font-size: clamp(1.35rem, 5.5vw, 1.7rem);
  }
  .section-subtitle {
    font-size: .9rem;
    margin-bottom: 32px;
  }

  .review-card-dark {
    width: min(280px, 82vw);
  }

  .areas-grid, .location-cards-grid {
    grid-template-columns: 1fr;
  }

  .service-packages .section-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .faq-question { font-size: .9rem; }

  .footer-inner { gap: 24px; align-items: start; }
}

/* =============================================
   SMALL PHONE OPTIMIZATIONS (≤480 px)
   Tight spacing, smaller type, compact cards
   so the site fits tiny screens without
   excessive scrolling.
   ============================================= */

@media (max-width: 480px) {
  :root { --header-h: 56px; }

  html { font-size: 15px; }

  .container { padding: 0 12px; }

  .section-label {
    font-size: .6rem;
    letter-spacing: .12em;
    margin-bottom: 6px;
  }
  .section-title {
    font-size: clamp(1.1rem, 5.2vw, 1.45rem);
    margin-bottom: 8px;
  }
  .section-subtitle {
    font-size: .82rem;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  /* Header */
  .site-header { height: var(--header-h); }
  .header-inner { padding: 0 12px; }
  .logo img { height: 32px; }
  .hamburger {
    min-width: 38px;
    min-height: 38px;
    padding: 6px;
    right: 6px;
    left: auto;
  }
  .hamburger-icon { width: 22px; height: 22px; }
  .header-inner { padding-right: 44px; }

  /* Mobile nav drawer styles are in the < 991px media query above */

  /* Hero – fit small viewport */
  .hero { min-height: 100svh; }
  .hero-content {
    padding: calc(var(--header-h) + 14px) 12px 20px;
    max-width: 100%;
  }
  .hero-headline {
    display: block;
    padding: 0;
    font-size: clamp(1.15rem, 6.2vw, 1.5rem);
    line-height: 1.08;
    margin-bottom: 10px;
  }
  .hero-ctas {
    gap: 8px;
    margin-bottom: 12px;
  }
  .hero-ctas .btn {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding: 9px 14px;
    min-height: 38px;
    font-size: .7rem;
  }
  .hero-google {
    gap: 5px 8px;
    font-size: .78rem;
    margin-top: 6px;
  }
  .hero-google .google-text { font-size: 1.05rem; }
  .hero-google .stars { font-size: .9rem; letter-spacing: 1px; }
  .hero-google .google-rating { font-size: .9rem; }
  .hero-google .google-count { font-size: .78rem; }

  /* Sections */
  .why-choose, .why-trust, .doorstep, .step-flow,
  .service-packages, .addons-section, .serving-areas,
  .faq, .ready-cta-section, .pricing-section, .service-promo,
  .trust-reviews, .reviews, .popular-services {
    padding: 24px 0;
  }

  .two-col, .two-col.reverse {
    gap: 20px;
  }

  /* Enhanced mobile buttons for better touch targets */
  .btn {
    min-height: 48px;
    padding: 12px 24px;
  }

  .hero-ctas .btn, .quote-submit, .price-cta, .btn-leave-review, .ready-btns .btn {
    min-height: 48px;
  }

  .why-trust .container{
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding:0 24px;
  }
  .why-trust-text{
    text-align:left;
    padding:0;
  }
  .why-trust-image{
    order:0;
    justify-content:center;
  }
  .why-trust-image img{
    max-height:300px;
    width:auto;
    max-width:100%;
    object-fit:contain;
    border-radius:12px;
  }
  .why-trust .trust-content .trust-full {
    display: none;
  }
  .why-trust .trust-content .trust-short {
    display: block;
  }
  .why-trust .section-title{
    margin-bottom:12px;
    font-size: clamp(1rem, 4vw, 1.4rem);
  }
  .trust-banner h2, .why-trust-text .section-title,
  .faq-header h2, .ready-cta h2 {
    font-size: clamp(1.1rem, 5.5vw, 1.45rem);
    line-height: 1.12;
    margin-bottom: 10px;
  }

  .why-text p, .doorstep-text p, .service-promo-text p,
  .trust-content p, .trust-banner p {
    font-size: .85rem;
    line-height: 1.5;
    margin-bottom: 10px;
  }

  .why-features { gap: 10px; margin: 18px 0; }
  .why-feature {
    gap: 8px;
    font-size: .8rem;
    line-height: 1.4;
  }
  .why-feature svg { width: 18px; height: 18px; }
  .why-text .btn { margin-top: 16px; }

  .why-choose .two-col {
    align-items: stretch;
  }
  .why-choose .why-image {
    display: flex;
    height: 100%;
  }
  .why-choose .why-image img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
  }

  /* Very small screens: hide why-choose image */
  @media (max-width: 400px) {
    .why-choose .why-image {
      display: none;
    }
    .why-choose .why-text {
      grid-column: 1 / -1;
    }
  }
  .why-choose .why-text h2 {
    font-size: clamp(.95rem, 5vw, 1.15rem);
    margin-bottom: 8px;
  }
  .why-choose .why-text p {
    font-size: .75rem;
    line-height: 1.35;
    margin-bottom: 8px;
  }
  .why-choose .why-text p:nth-of-type(2) {
    display: none;
  }
  .why-choose .why-features {
    gap: 6px;
    margin: 10px 0;
  }
  .why-choose .why-feature {
    font-size: .72rem;
    line-height: 1.25;
    gap: 6px;
  }
  .why-choose .why-feature strong + span {
    display: none;
  }
  .why-choose .why-feature svg {
    width: 14px;
    height: 14px;
  }
  .why-choose .why-text .btn {
    margin-top: 10px;
  }
  .doorstep-image img, .service-promo-image img {
    aspect-ratio: 1/1;
    border-radius: 6px;
    min-height: 200px;
    max-height: 300px;
  }

  /* Step flow */
  .step-flow-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
  }
  .step-flow-item {
    padding: 14px 12px;
    border-radius: 8px;
  }
  .step-flow-item .step-flow-num {
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
  }
  .step-flow-item .step-flow-num img { width: 24px; height: 24px; }
  .step-flow-item h3 {
    font-size: .94rem;
    margin-bottom: 5px;
  }
  .step-flow-item p {
    font-size: .78rem;
    line-height: 1.45;
  }

  /* Reviews */
  .reviews-layout { gap: 16px; }
  .reviews-summary { gap: 6px; }
  .excellent-label { font-size: .9rem; }
  .stars.large { font-size: 1.25rem; letter-spacing: 2px; }
  .review-count { font-size: .78rem; }
  .google-badge { font-size: .78rem; margin-top: 2px; }
  .google-badge svg { width: 16px; height: 16px; }

  .reviews-carousel-wrap { gap: 8px; overflow: visible; }
  .reviews-carousel {
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
  }
  .reviews-carousel::-webkit-scrollbar { display: none; }
  .review-card-dark {
    width: min(200px, 70vw);
    min-height: auto;
    padding: 12px;
    border-radius: 6px;
    scroll-snap-align: start;
  }
  .review-card-header { margin-bottom: 6px; gap: 8px; }
  .reviewer-name { font-size: .82rem; }
  .review-date { font-size: .7rem; }
  .review-google-icon svg { width: 16px; height: 16px; }
  .review-stars-dark { font-size: .84rem; margin-bottom: 6px; gap: 4px; }
  .verified-badge { width: 14px; height: 14px; font-size: .6rem; }
  .review-text-dark { font-size: .76rem; line-height: 1.4; }

  .reviews-footer { margin-top: 22px; padding-top: 16px; }
  .reviews-footer-text { font-size: .8rem; margin-bottom: 8px; }
  .btn-leave-review { padding: 10px 14px; font-size: .76rem; }
  .btn-leave-review svg { width: 14px; height: 14px; }

  /* Service packages / pricing */
  .service-packages .section-title {
    font-size: clamp(1.15rem, 5.5vw, 1.5rem);
    margin-bottom: 10px;
  }
  .service-packages .section-subtitle {
    font-size: .82rem;
    margin-bottom: 20px;
  }

  .service-packages .pricing-grid {
    gap: 10px;
    max-width: 100%;
  }
  .service-packages .price-card {
    padding: 14px 12px 12px;
    border-radius: 8px;
  }
  .service-packages .pkg-img {
    width: calc(100% + 28px);
    margin: -14px -12px 10px;
    aspect-ratio: 1/1;
    max-height: 180px;
  }
  .pkg-badge {
    top: 10px;
    right: 10px;
    font-size: .52rem;
    padding: 3px 7px;
  }
  .price-card-title { font-size: 1.05rem; margin-bottom: 2px; }
  .price-starting { font-size: .68rem; }
  .price-amount { font-size: 1.85rem; margin-bottom: 8px; }
  .price-desc { display: none; }
  .service-packages .pkg-toggle {
    font-size: .7rem;
    margin-bottom: 6px;
    padding: 6px 0;
  }
  .price-cta {
    min-height: 36px;
    padding: 8px;
    font-size: .7rem;
  }

  /* Vehicle tabs */
  .vehicle-tabs {
    margin: 14px auto 20px;
    max-width: 260px;
  }
  .vtab {
    min-height: 34px;
    padding: 7px 10px;
    font-size: .66rem;
  }

  /* Add-ons */
  .addons-section { padding: 36px 0; border-radius: 16px; }
  .addons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-top: 14px;
    max-width: 100%;
  }
  .addon-tag {
    min-height: 32px;
    padding: 6px 8px;
    font-size: .68rem;
    border-radius: 6px;
  }

  /* Serving areas */
  .serving-areas .section-title { margin-bottom: 6px; }
  .areas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-top: 12px;
  }
  .area-card {
    width: auto;
    scroll-snap-align: none;
  }
  .area-img-wrap {
    aspect-ratio: 1/1;
    border-radius: 6px;
    max-height: 160px;
  }
  .area-name { font-size: .72rem; }

  /* Location cards: horizontal scroll on small screens */
  .location-cards-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-top: 12px;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .location-cards-grid::-webkit-scrollbar { display: none; }
  .location-card {
    flex: 0 0 auto;
    width: min(200px, 72vw);
    scroll-snap-align: start;
  }
  .location-card-img {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    max-height: 160px;
  }
  .location-card-body { padding: 10px 2px 0; }
  .location-card-body h3 { font-size: .9rem; }
  .location-card-body span { font-size: .72rem; }

  /* FAQ */
  .faq { padding: 36px 0; border-radius: 14px; }
  .faq-header { margin-bottom: 6px; }
  .faq-header p { font-size: .82rem; margin-bottom: 18px; }
  .faq-list { gap: 8px; }
  .faq-item { padding: 0 12px; border-radius: 8px; }
  .faq-question {
    min-height: 44px;
    padding: 10px 0;
    font-size: .82rem;
    gap: 10px;
  }
  .faq-icon { width: 24px; height: 24px; }
  .faq-icon::before { width: 12px; }
  .faq-icon::after { height: 12px; }
  .faq-answer p { font-size: .78rem; line-height: 1.45; }

  /* Quote form */
  .ready-cta { padding: 28px 12px 72px; }
  .ready-cta p { font-size: .88rem; margin-bottom: 14px; }
  .quote-title {
    font-size: .88rem;
    margin-bottom: 12px;
  }
  .quote-or { font-size: .84rem; margin: 8px 0 4px; }
  .quote-form {
    width: 100%;
    padding: 14px 12px 18px;
    border-radius: 8px;
    max-width: 100%;
  }
  .quote-row {
    gap: 10px;
    margin-bottom: 10px;
  }
  .quote-field label {
    font-size: .72rem;
    margin-bottom: 3px;
  }
  .quote-field input {
    padding: 9px 10px;
    font-size: 16px;
    border-radius: 6px;
  }
  .quote-services {
    gap: 12px;
    margin: 12px 0;
  }
  .quote-service-col h4 {
    font-size: .74rem;
    margin-bottom: 6px;
  }
  .quote-checkbox {
    font-size: .74rem;
    margin-bottom: 5px;
    gap: 5px;
  }
  .quote-checkbox input {
    width: 15px;
    height: 15px;
    margin-top: 1px;
  }
  .quote-submit {
    min-height: 38px;
    padding: 8px;
    font-size: .74rem;
    margin-top: 4px;
  }
  .ready-btns { gap: 8px; }
  .ready-btns .btn {
    width: 100%;
    max-width: 280px;
    min-height: 36px;
    font-size: .7rem;
    padding: 8px;
  }

  /* Footer */
  .site-footer { padding-top: 28px; padding-bottom: 0; font-size: .76rem; }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
    padding-bottom: 20px;
  }
  .footer-logo img { height: 30px; margin-bottom: 8px; filter: brightness(0) invert(1); }
  .footer-logo .logo-text { font-size: .86rem; margin-bottom: 8px; }
  .footer-tagline { font-size: .74rem; margin-bottom: 10px; max-width: 100%; }
  .footer-social { gap: 5px; }
  .footer-social .social-icon {
    min-width: 34px;
    min-height: 34px;
  }
  .footer-social .social-icon svg { width: 15px; height: 15px; }
  .footer-social .social-icon--yelp img { width: 16px; height: 16px; }
  .footer-contact h4, .footer-hours h4, .footer-areas h4 {
    font-size: .66rem;
    margin-bottom: 8px;
  }
  .footer-contact p, .footer-hours p {
    font-size: .74rem;
    margin-bottom: 3px;
  }
  .footer-areas ul { gap: 3px; }
  .footer-bottom { padding: 10px; font-size: .68rem; }

  /* Floating CTA */
  .floating-cta {
    padding: 9px 13px;
    font-size: .7rem;
    bottom: 10px;
    right: 10px;
    gap: 5px;
  }
  .floating-cta svg { width: 14px; height: 14px; }
}

/* =============================================
   TINY PHONE OPTIMIZATIONS (≤360 px)
   Extra-tight adjustments for very small screens
   ============================================= */

@media (max-width: 360px) {
  html { font-size: 14px; }

  .hero-headline { font-size: 1.1rem; }
  .hero-ctas .btn { font-size: .68rem; padding: 8px 12px; min-height: 36px; }
  .hero-google .google-text { font-size: .95rem; }

  .section-title { font-size: 1.05rem; }
  .section-subtitle { font-size: .78rem; }

  .price-amount { font-size: 1.7rem; }
  .price-card-title { font-size: .98rem; }

  .vtab { font-size: .62rem; padding: 7px 8px; }

  .review-card-dark { width: min(200px, 70vw); padding: 12px; }

  .addon-tag { font-size: .68rem; padding: 7px 8px; min-height: 32px; }

  .area-card, .location-card { width: auto; }

  .ready-btns .btn { min-height: 34px; font-size: .68rem; }
  .quote-submit { min-height: 36px; font-size: .7rem; }
}