:root {
  --bg:#fff8ef;
  --bg-2:#fff3e4;
  --panel:rgba(255,255,255,.82);
  --panel-strong:#fffdf9;
  --text:#201a15;
  --muted:#5e534b;
  --line:rgba(113,84,58,.18);
  --orange:#ef5a15;
  --orange-2:#ff7b20;
  --orange-3:#ff9d50;
  --shadow-lg:0 24px 60px rgba(50,26,9,.14);
  --shadow-md:0 14px 30px rgba(50,26,9,.10);
  --shadow-sm:0 8px 20px rgba(50,26,9,.08);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --container:min(1200px, calc(100% - 40px));
  --header-h:92px;
  --nav-w:min(1360px, calc(100% - 40px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--text);background:
 radial-gradient(circle at 8% 6%, rgba(255,196,132,.20), transparent 24%),
 radial-gradient(circle at 88% 12%, rgba(255,114,49,.13), transparent 26%),
 linear-gradient(180deg,#fff9f0 0%,#fff5ea 46%,#fff9f3 100%);} 
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
[hidden]{display:none!important}
.skip-link{position:absolute;left:-9999px}
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--orange-2));z-index:1000;width:0}
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding-top:18px;transition:padding .25s ease}
.site-header.is-scrolled{padding-top:10px}
.nav-shell{width:var(--nav-w);margin:0 auto;min-height:74px;padding:12px 20px;display:grid;grid-template-columns:230px 1fr 180px;align-items:center;gap:20px;border-radius:18px;background:linear-gradient(180deg,rgba(67,60,51,.78),rgba(18,17,14,.96));box-shadow:0 22px 44px rgba(9,8,7,.25),inset 0 1px 0 rgba(255,255,255,.22);backdrop-filter:blur(10px)}
.logo{width:208px}
.nav-links{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.nav-links a{position:relative;padding:10px 12px;color:#fff5ec;font-size:13px;font-weight:800;letter-spacing:.01em;border-radius:999px;opacity:.92}
.nav-links a.is-active::after{content:'';position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--orange-3),var(--orange))}
.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:14px;font-weight:900;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.nav-cta,.btn-primary{background:linear-gradient(180deg,var(--orange-2),var(--orange));color:#fff;box-shadow:0 14px 28px rgba(239,90,21,.26)}
.nav-cta{height:48px;padding:0 22px;color:white;font-size:13px}
.btn:hover,.nav-cta:hover{transform:translateY(-1px)}
.btn-light{background:rgba(255,251,245,.92);color:#2e2822;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.btn-sm{height:44px;padding:0 16px;font-size:14px}
.btn-md{height:50px;padding:0 22px;font-size:14px}
.btn-lg{height:58px;padding:0 22px;font-size:16px}
.icon,.icon-arrow{width:20px;height:20px;flex:0 0 auto}
.mobile-menu-button{display:none;border:none;background:none;padding:10px;flex-direction:column;gap:4px}
.mobile-menu-button span{display:block;width:22px;height:2px;border-radius:999px;background:#fff6ed}
.mobile-menu{width:var(--nav-w);margin:8px auto 0;padding:12px;background:rgba(23,19,16,.98);border-radius:18px;box-shadow:var(--shadow-md)}
.mobile-menu a{display:block;padding:12px 14px;color:#fff6ed;font-weight:800;border-radius:12px}
.mobile-menu a.is-active{background:rgba(255,255,255,.07)}
main{padding-top:var(--header-h)}
.section-shell,.hero-shell,.footer-inner,.page-hero-shell,.content-shell{width:var(--container);margin:0 auto}
.hero{padding:28px 0 0}
.hero-surface{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(420px,.78fr) minmax(0,1.22fr);min-height:540px;border-radius:30px;background:#fffaf4;border:1px solid rgba(113,84,58,.12);box-shadow:var(--shadow-lg);isolation:isolate}
.hero-copy{position:relative;z-index:3;padding:54px 24px 34px 38px;display:flex;flex-direction:column;justify-content:center}
.hero-copy h1{margin:0;font-size:clamp(42px,4.35vw,62px);line-height:.98;letter-spacing:-.055em;font-weight:950;max-width:620px}
.hero-copy h1 span{display:block;color:var(--orange);margin-top:8px}
.hero-lede{max-width:390px;margin:22px 0 0;color:#372f29;font-size:16px;line-height:1.6;font-weight:650}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px}
.call-btn span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.04}.call-btn small{font-size:14px;opacity:.96;margin-top:4px}
.trust-row{display:flex;align-items:center;gap:14px;margin-top:22px}
.avatar-stack{display:flex}.avatar-stack span{width:32px;height:32px;border-radius:50%;border:2px solid #fff7ef;background:radial-gradient(circle at 38% 32%,#f8efe7 0 28%,#d2b49a 62%,#8d6d58 100%);margin-left:-6px;box-shadow:0 2px 8px rgba(0,0,0,.08)}.avatar-stack span:first-child{margin-left:0}
.trust-stars{font-size:24px;line-height:1;color:#f5ab25;letter-spacing:.08em}.trust-row p{margin:4px 0 0;font-size:14px;color:#494039;font-weight:700}
.hero-media{position:relative;min-height:100%;overflow:hidden}
.hero-photo{position:absolute;inset:0;background-image:url('../assets/hero-service-scene-hq.png');background-size:cover;background-position:center center;filter:saturate(1.02) contrast(1.02)}
.hero-photo::before{content:'';position:absolute;inset:0;background:
 radial-gradient(ellipse 520px 300px at -3% 52%, rgba(255,251,245,.84) 0 16%, rgba(255,251,245,.55) 30%, rgba(255,251,245,.18) 47%, transparent 66%),
 linear-gradient(90deg, rgba(255,250,243,.78) 0 7%, rgba(255,250,243,.48) 17%, rgba(255,250,243,.16) 29%, transparent 43%)}
.hero-badge{position:absolute;right:30px;bottom:28px;z-index:3;display:flex;align-items:center;gap:14px;padding:16px 18px;background:rgba(48,28,16,.46);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);border-radius:18px;box-shadow:var(--shadow-md);color:#fff7ef}
.hero-badge strong{display:block;font-size:15px;line-height:1.25}.hero-badge span{color:#ff8a3a;font-weight:900;font-size:15px}
.badge-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.10)}
.benefits-wrap{margin-top:-28px;position:relative;z-index:4}
.benefits{display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:linear-gradient(180deg,rgba(50,37,28,.90),rgba(19,16,13,.98));border:1px solid rgba(255,255,255,.09);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg)}
.benefit{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:22px 18px;position:relative;color:#fff7ef}.benefit:not(:first-child)::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:1px;background:rgba(255,255,255,.10)}
.benefit strong{display:block;margin-top:4px;color:#ff8a3a;font-size:13px}.benefit p{margin:0;font-size:14px;line-height:1.28;font-weight:800}.icon-big{width:32px;height:32px;color:#fff5eb}
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px;align-items:start;margin-top:22px}
.left-stack{display:grid;gap:16px}
.panel{border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,250,244,.98));border:1px solid rgba(113,84,58,.12);box-shadow:var(--shadow-md)}
.section-title{margin:0;font-size:clamp(34px,3.2vw,48px);line-height:.98;letter-spacing:-.045em;font-weight:950}.section-title.compact{font-size:clamp(26px,2.3vw,36px)}
.accent-line{display:block;width:42px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--orange-3));margin:14px 0 16px}
.services-panel{display:grid;grid-template-columns:230px 1fr;gap:18px;padding:24px}.services-intro p{margin:0 0 18px;color:var(--muted);font-size:15px;line-height:1.55;font-weight:650}.services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.service-card{position:relative;display:flex;flex-direction:column;gap:14px;min-height:238px;padding:18px;border-radius:20px;background:linear-gradient(180deg,#fffefb,#fff6ea);border:1px solid rgba(113,84,58,.12);box-shadow:var(--shadow-sm)}
.service-visual{height:110px;border-radius:16px;background:radial-gradient(circle at 78% 22%, rgba(255,174,104,.35), transparent 28%),linear-gradient(135deg,#231b16,#403225);display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden}
.service-visual img{max-height:76px;max-width:76px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}
.service-content h3{margin:0 0 8px;font-size:20px;line-height:1.08;letter-spacing:-.03em}
.service-content p{margin:0;color:var(--muted);font-size:14px;line-height:1.5;font-weight:650}
.service-action{margin-top:auto;align-self:flex-start;width:42px;height:42px;border:none;border-radius:50%;background:linear-gradient(180deg,var(--orange-2),var(--orange));color:#fff;display:grid;place-items:center;box-shadow:0 12px 20px rgba(239,90,21,.24);cursor:pointer}
.quote-card{position:sticky;top:108px;padding:26px;border-radius:24px;background:linear-gradient(180deg,rgba(255,252,247,.98),rgba(255,247,236,.98));border:1px solid rgba(113,84,58,.14);box-shadow:var(--shadow-lg)}
.quote-card h2{margin:0;color:#de4e12;font-size:clamp(30px,3vw,42px);line-height:1;letter-spacing:-.04em;font-weight:950}.quote-card .subtitle{margin:10px 0 18px;color:#2f2925;font-size:16px;font-weight:800}
.form-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 18px}.form-step{position:relative;text-align:center;color:#8f8378;font-size:11px;font-weight:900}.form-step::before{content:'';position:absolute;top:15px;left:calc(-50% + 14px);right:calc(50% + 14px);height:2px;background:#dfd5c8}.form-step:first-child::before{display:none}.form-step .dot{display:grid;place-items:center;width:30px;height:30px;margin:0 auto 8px;border-radius:50%;background:#efe6db;color:#83786e;font-size:13px;font-weight:900}.form-step.is-active .dot,.form-step.is-complete .dot{background:linear-gradient(180deg,var(--orange-2),var(--orange));color:#fff}.form-step.is-active,.form-step.is-complete{color:#362e28}
.quote-form{display:grid;gap:12px}.wizard-panel{display:grid;gap:12px}.form-kicker{margin:0 0 2px;color:#6e6258;font-size:14px;line-height:1.5;font-weight:650}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-row.three{grid-template-columns:repeat(3,1fr)}.label{display:grid;gap:8px}.label span{font-size:12px;font-weight:900;color:#554a43;letter-spacing:.01em}.field,.select{width:100%;height:50px;padding:0 14px;border-radius:14px;border:1px solid #dccfbe;background:rgba(255,255,255,.82);color:#2b2520;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)} textarea.field{height:120px;padding:14px;resize:vertical}.select:disabled{color:#a09285;background:#f4ece0;border-style:dashed}.field.is-invalid,.select.is-invalid{border-color:#d55e30;box-shadow:0 0 0 3px rgba(239,90,21,.12)}
.wizard-actions{display:flex;justify-content:space-between;gap:10px;margin-top:4px}.quote-submit{width:100%;height:54px;text-transform:uppercase;letter-spacing:.02em}.privacy-note,.form-message{margin:4px 0 0;text-align:center;font-size:12px;font-weight:700;color:#8b8177}.location-callout{padding:16px;border-radius:18px;background:#fffdf8;border:1px solid var(--line)}.location-callout strong{display:block;color:var(--orange);font-size:16px;margin-bottom:6px}.location-callout p{margin:0;color:#5c534d;font-size:14px;line-height:1.5;font-weight:650}
.adas-banner{overflow:hidden;display:grid;grid-template-columns:1.06fr .94fr;min-height:250px;background:linear-gradient(130deg,#11100e,#211a13);border-radius:24px;box-shadow:var(--shadow-md)}
.adas-visual{position:relative;min-height:100%;background-image:url('../assets/adas-visual-clean-hq.png');background-size:cover;background-position:center left}.adas-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,16,14,.25),rgba(17,16,14,.45))}
.adas-copy{padding:26px;display:flex;flex-direction:column;justify-content:center;color:#fff7ee}.adas-copy h2{margin:0 0 10px;font-size:clamp(28px,2.5vw,38px);line-height:1.02;letter-spacing:-.04em}.adas-copy p{margin:0 0 16px;color:rgba(255,247,238,.84);font-size:15px;line-height:1.65;font-weight:600}.adas-caption{display:flex;align-items:center;gap:10px;margin-top:10px;color:#fff7ee;font-weight:900}.mini-shield{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.10);display:grid;place-items:center;color:#ff8a3a}
.locations-grid{display:grid;grid-template-columns:1.1fr repeat(3,1fr);gap:14px}.location-intro,.location-card{padding:20px;border-radius:20px;background:rgba(255,255,255,.86);border:1px solid rgba(113,84,58,.12);box-shadow:var(--shadow-sm)}.location-intro p,.location-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55;font-weight:650}.location-card{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:start}.location-card img{width:48px;height:48px;object-fit:contain}.location-card h3{margin:0 0 8px;color:var(--orange);font-size:18px;line-height:1.15;letter-spacing:-.02em}.location-card a{display:inline-block;margin-bottom:8px;color:#e45716;font-weight:900}
.reviews-panel{padding:22px}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.review-card{position:relative;min-height:180px;padding:24px 24px 24px 30px;border-radius:20px;background:linear-gradient(180deg,#fffaf2,#fff3e6);border:1px solid rgba(113,84,58,.12)}.review-card .quote{position:absolute;left:16px;top:6px;color:var(--orange);font-size:42px;font-weight:900;line-height:1}.review-card p{margin:0 0 14px;color:#433932;font-size:15px;line-height:1.6;font-weight:650}.review-meta{display:flex;align-items:center;justify-content:space-between;gap:14px}.review-name{font-size:14px;font-weight:900}.stars{color:#f4a520;letter-spacing:.08em;font-size:14px}.review-avatar{width:52px;height:52px;border-radius:50%;border:3px solid rgba(255,255,255,.85);background:radial-gradient(circle at 40% 32%,#f8eee7 0 26%,#d0b09a 60%,#7b614f 100%)}
.page-hero{padding:22px 0 0}.page-hero-card{overflow:hidden;display:grid;grid-template-columns:1.03fr .97fr;min-height:360px;border-radius:28px;background:linear-gradient(115deg,rgba(255,252,247,.98) 0 48%,rgba(26,23,19,.96) 48% 100%);border:1px solid rgba(113,84,58,.14);box-shadow:var(--shadow-lg)}.page-hero-copy{padding:42px 36px;display:flex;flex-direction:column;justify-content:center}.eyebrow{margin:0 0 10px;color:var(--orange);font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:900}.page-hero-card h1{margin:0;font-size:clamp(40px,4vw,60px);line-height:1;letter-spacing:-.05em;font-weight:950}.page-hero-card h1 span{display:block;color:var(--orange);margin-top:8px}.page-hero-card p{max-width:500px;color:#4d433c;font-size:16px;line-height:1.65;font-weight:600}.page-hero-visual{position:relative}.page-hero-visual img{width:100%;height:100%;object-fit:cover}
.content-two-col{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px;align-items:start;margin-top:22px}.content-stack{display:grid;gap:16px}.content-panel{padding:24px}.content-panel h2{margin:0;font-size:clamp(30px,2.7vw,42px);line-height:1;letter-spacing:-.04em}.content-panel p{color:#4d433c;font-size:15px;line-height:1.65;font-weight:600}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.detail-card{padding:20px;border-radius:20px;background:linear-gradient(180deg,#fffefb,#fff7ee);border:1px solid rgba(113,84,58,.12)}.detail-card-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}.detail-card-icon{width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,#201913,#443426);display:grid;place-items:center}.detail-card-icon img{width:36px;height:36px;object-fit:contain}.detail-card h3{margin:0;font-size:22px;line-height:1.05}.detail-card p{margin:0 0 16px}.feature-list{display:grid;gap:14px}.feature-item{display:grid;grid-template-columns:52px 1fr;gap:14px;padding:18px;border-radius:18px;background:linear-gradient(180deg,#fffefb,#fff7ee);border:1px solid rgba(113,84,58,.12)}.feature-icon{width:46px;height:46px;border-radius:16px;background:linear-gradient(180deg,var(--orange-2),var(--orange));color:#fff;display:grid;place-items:center}.feature-item h3{margin:0 0 6px;font-size:18px}.feature-item p{margin:0;font-size:14px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stat-card{padding:22px;border-radius:20px;background:linear-gradient(180deg,#fffefb,#fff7ee);border:1px solid rgba(113,84,58,.12);text-align:center}.stat-card strong{display:block;font-size:32px;line-height:1;color:var(--orange);margin-bottom:8px}.stat-card span{font-size:14px;color:#564c45;font-weight:800}
.footer{margin-top:30px;background:linear-gradient(180deg,#181512,#11110f);color:#f6efe8;border-top:1px solid rgba(255,255,255,.07)}.footer-inner{padding:28px 0 20px}.footer-grid{display:grid;grid-template-columns:180px 1.1fr 1fr 1fr 1fr 160px;gap:18px;align-items:start}.footer-logo{width:150px}.footer p,.footer a{color:rgba(246,239,232,.90);font-size:12px;line-height:1.6;font-weight:600}.footer h3{margin:0 0 8px;color:#fff;font-size:13px;font-weight:900}.footer a[href^="tel"]{color:#ff8226;font-weight:900}.socials{display:flex;gap:10px;margin-top:14px}.socials img{width:24px;height:24px;object-fit:contain}.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:20px;padding-top:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.mobile-call{display:none;position:fixed;left:14px;right:14px;bottom:14px;z-index:50;height:56px;border-radius:18px;background:linear-gradient(180deg,var(--orange-2),var(--orange));color:#fff;font-size:14px;font-weight:900;align-items:center;justify-content:center;gap:10px;box-shadow:0 18px 32px rgba(239,75,19,.34)}
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .42s ease,transform .42s ease}[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}[data-reveal]{opacity:1;transform:none}}
@media (max-width:1100px){.home-grid,.content-two-col{grid-template-columns:1fr}.quote-card{position:static}.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.locations-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr 1fr}.services-panel{grid-template-columns:1fr}.hero-surface,.page-hero-card,.adas-banner{grid-template-columns:1fr}.hero-media{min-height:360px}.page-hero-visual{min-height:260px}.adas-visual{min-height:240px}.benefits{grid-template-columns:repeat(2,1fr)}.benefit:nth-child(odd)::before{display:none}}
@media (max-width:820px){:root{--nav-w:calc(100% - 20px);--container:calc(100% - 20px);--header-h:86px}.nav-shell{grid-template-columns:1fr auto}.nav-links,.nav-cta{display:none}.mobile-menu-button{display:flex}.hero-copy{padding:38px 20px 24px}.hero-copy h1{font-size:42px}.hero-lede{font-size:15px}.hero-actions .btn-lg{width:100%}.benefits-wrap{margin-top:14px}.benefits{border-radius:20px}.review-grid,.detail-grid,.stats-grid,.form-row,.form-row.three,.footer-grid,.locations-grid{grid-template-columns:1fr}.page-hero-copy{padding:34px 20px}.content-panel,.quote-card,.reviews-panel{padding:20px}.mobile-call{display:flex}}
@media (max-width:560px){.section-title{font-size:32px}.services-grid{grid-template-columns:1fr}.hero-surface{min-height:auto}.hero-media{min-height:300px}.hero-badge{right:14px;left:14px;bottom:14px}.benefits{grid-template-columns:1fr}.benefit::before{display:none}.page-hero-card h1{font-size:36px}.quote-card h2{font-size:34px}}



/* ========================================================================
   v1.2.2 HERO + QUOTE WIZARD AUDIT PATCH
   - Desktop hero uses the approved 03_hero_section reference composition.
   - Removes the artificial column seam by using one continuous hero image.
   - Keeps the baked-in guarantee card fully visible by removing benefit overlap.
   - Keeps call / quote actions functional through invisible hit areas.
   - Forces inactive quote wizard stages to stay hidden.
   ======================================================================== */
.hero {
  padding-top: 10px;
}
.hero .hero-shell {
  width: min(100%, 1124px);
}
.hero-surface.hero-reference {
  display: block;
  position: relative;
  min-height: 0;
  aspect-ratio: 1124 / 345;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: url('../assets/reference/03_hero_section.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}
.hero-reference .hero-copy,
.hero-reference .hero-media,
.hero-reference .hero-badge {
  display: none !important;
}
.hero-hotspot {
  position: absolute;
  z-index: 8;
  display: block;
  border-radius: 14px;
  opacity: 0;
  background: transparent;
}
.hero-hotspot:focus-visible {
  opacity: 1;
  outline: 3px solid rgba(255, 122, 32, .85);
  outline-offset: 3px;
}
.hero-hotspot-call {
  left: 4.05%;
  top: 62.35%;
  width: 14.75%;
  height: 14.5%;
}
.hero-hotspot-quote {
  left: 20.05%;
  top: 62.35%;
  width: 13.45%;
  height: 14.5%;
}
.benefits-wrap {
  margin-top: 18px;
}
.wizard-panel[hidden],
[data-wizard-panel][hidden] {
  display: none !important;
}

@media (max-width: 820px) {
  .hero .hero-shell {
    width: calc(100% - 20px);
  }
  .hero-surface.hero-reference {
    aspect-ratio: auto;
    min-height: 560px;
    border-radius: 24px;
    background-image: url('../assets/hero-service-scene-hq.png');
    background-size: cover;
    background-position: 58% center;
    box-shadow: var(--shadow-lg);
  }
  .hero-surface.hero-reference::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 720px 420px at 12% 45%, rgba(255,250,243,.98) 0 22%, rgba(255,250,243,.82) 42%, rgba(255,250,243,.38) 62%, transparent 78%),
      linear-gradient(90deg, rgba(255,250,243,.96), rgba(255,250,243,.72) 48%, rgba(255,250,243,.24) 74%, transparent);
    z-index: 1;
  }
  .hero-reference .hero-copy {
    display: flex !important;
    min-height: 560px;
    position: relative;
    z-index: 2;
  }
  .hero-hotspot {
    display: none;
  }
}


/* ========================================================================
   v1.2.3 FULL UI/UX WIDTH + OVERLAP AUDIT PASS
   Goal: one clean site width, consistent section rhythm, no accidental grid
   overflow, no card collision, and tighter professional spacing.
   ======================================================================== */
:root {
  --site-width: min(1124px, calc(100% - 40px));
  --container: var(--site-width);
  --nav-w: var(--site-width);
  --main-gap: 24px;
  --sidebar-width: 340px;
  --panel-gap: 18px;
}

/* One width system across header, hero, content, page heroes, and footer. */
.nav-shell,
.mobile-menu,
.section-shell,
.hero-shell,
.hero .hero-shell,
.footer-inner,
.page-hero-shell,
.content-shell {
  width: var(--site-width) !important;
  max-width: var(--site-width);
  margin-left: auto;
  margin-right: auto;
}

/* Stop hidden quote stages from taking space in every layout context. */
[hidden],
.wizard-panel[hidden],
[data-wizard-panel][hidden] {
  display: none !important;
}

/* Prevent grid/flex children and long text from creating horizontal overflow. */
main,
section,
article,
aside,
div,
.home-grid > *,
.content-two-col > *,
.left-stack,
.services-panel > *,
.services-grid > *,
.detail-grid > *,
.review-grid > *,
.locations-grid > *,
.footer-grid > * {
  min-width: 0;
}

h1, h2, h3, p, a, button, label, input, select, textarea {
  overflow-wrap: anywhere;
}

/* Header alignment pass. */
.site-header {
  padding-top: 16px;
}
.nav-shell {
  min-height: 76px;
  border-radius: 18px;
}
.logo {
  width: 204px;
}
.nav-links {
  gap: 6px;
}
.nav-links a {
  padding-inline: 10px;
}

/* Hero stays exactly aligned to the same content width. */
.hero {
  padding-top: 12px;
}
.hero-surface.hero-reference {
  width: 100%;
  border-radius: 0;
  box-shadow: 0 18px 42px rgba(50,26,9,.10);
}
.benefits-wrap {
  margin-top: 22px !important;
}
.benefits {
  width: 100%;
}

/* Main desktop grid: left content + quote card always equals the site width. */
.home-grid,
.content-two-col {
  display: grid;
  grid-template-columns: minmax(0, calc(100% - var(--sidebar-width) - var(--main-gap))) var(--sidebar-width);
  gap: var(--main-gap);
  align-items: start;
  margin-top: 24px;
}
.left-stack,
.content-stack {
  gap: var(--panel-gap);
}

/* Quote card polish and stage behavior. */
.quote-card {
  width: 100%;
  top: 106px;
  padding: 24px;
  overflow: hidden;
}
.quote-card h2 {
  font-size: clamp(30px, 2.8vw, 38px);
}
.form-steps {
  gap: 6px;
}
.form-step {
  white-space: nowrap;
}
.quote-form,
.wizard-panel {
  gap: 12px;
}
.wizard-actions {
  align-items: center;
}
.form-row,
.form-row.three {
  gap: 10px;
}
.field,
.select {
  min-width: 0;
}

/* Home services: tuned to fit the left column without cramped overlap. */
.services-panel {
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  padding: 22px;
}
.services-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.service-card {
  min-height: 220px;
  padding: 14px;
  gap: 12px;
  overflow: hidden;
}
.service-visual {
  height: 88px;
  border-radius: 14px;
}
.service-visual img {
  max-width: 62px;
  max-height: 62px;
}
.service-content h3 {
  font-size: 16px;
  line-height: 1.12;
}
.service-content p {
  font-size: 12px;
  line-height: 1.45;
}
.service-action {
  width: 36px;
  height: 36px;
}

/* ADAS / locations / reviews vertical cleanup. */
.adas-banner {
  min-height: 240px;
}
.adas-copy {
  padding: 24px;
}
.locations-grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
}
.location-intro,
.location-card {
  padding: 18px;
}
.location-card {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
}
.location-card img {
  width: 42px;
  height: 42px;
}
.location-card h3 {
  font-size: 16px;
}
.review-grid {
  gap: 14px;
}
.review-card {
  min-height: 168px;
  padding: 24px 22px 22px 30px;
}

/* Interior cards use the same visual system. */
.page-hero {
  padding-top: 24px;
}
.page-hero-card {
  width: 100%;
}
.content-panel,
.panel {
  overflow: hidden;
}
.detail-grid {
  gap: 14px;
}
.feature-list {
  gap: 14px;
}

/* Footer alignment and no-crush fallback. */
.footer {
  margin-top: 32px;
}
.footer-grid {
  grid-template-columns: 160px 1.15fr 1fr 1fr 1fr 135px;
  gap: 16px;
}
.footer-logo {
  width: 148px;
}

/* Tablet: single column before anything gets cramped. */
@media (max-width: 1100px) {
  :root {
    --site-width: min(100% - 32px, 960px);
    --sidebar-width: 100%;
    --main-gap: 22px;
  }
  .home-grid,
  .content-two-col {
    grid-template-columns: 1fr;
  }
  .quote-card {
    position: static;
  }
  .services-panel {
    grid-template-columns: 1fr;
  }
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .locations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile: prevent overlap by stacking every dense layout. */
@media (max-width: 820px) {
  :root {
    --site-width: calc(100% - 20px);
    --header-h: 86px;
  }
  .nav-shell {
    grid-template-columns: 1fr auto;
  }
  .hero {
    padding-top: 10px;
  }
  .hero-surface.hero-reference {
    border-radius: 24px;
  }
  .benefits-wrap {
    margin-top: 16px !important;
  }
  .services-grid,
  .locations-grid,
  .review-grid,
  .detail-grid,
  .stats-grid,
  .form-row,
  .form-row.three,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .quote-card,
  .content-panel,
  .reviews-panel {
    padding: 20px;
  }
  .form-step {
    font-size: 10px;
  }
}

/* Narrow phone: larger tap targets, no text collision. */
@media (max-width: 560px) {
  :root {
    --site-width: calc(100% - 16px);
  }
  .nav-shell {
    padding-inline: 14px;
  }
  .logo {
    width: 178px;
  }
  .hero-surface.hero-reference {
    min-height: 560px;
  }
  .service-card {
    min-height: auto;
  }
  .form-steps {
    gap: 2px;
  }
  .form-step .dot {
    width: 28px;
    height: 28px;
  }
}

/* ========================================================================
   v1.2.4 FULL-WIDTH SCALE + MOBILE UX DESIGNER PASS
   Objective:
   - Scale desktop/tablet layouts up to use the browser width more fully.
   - Keep every major section locked to one shared width.
   - Improve mobile readability, tap targets, stacking, spacing, and form flow.
   ======================================================================== */
:root {
  --site-gutter: clamp(16px, 2.25vw, 40px);
  --site-width: min(calc(100vw - (var(--site-gutter) * 2)), 1680px);
  --container: var(--site-width);
  --nav-w: var(--site-width);
  --main-gap: clamp(22px, 2vw, 34px);
  --sidebar-width: clamp(390px, 27vw, 460px);
  --panel-gap: clamp(18px, 1.5vw, 26px);
  --header-h: clamp(92px, 7vw, 116px);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-size: clamp(15px, .86vw, 18px);
}

/* Shared page rail: everything uses the same browser-scaled width. */
.nav-shell,
.mobile-menu,
.section-shell,
.hero-shell,
.hero .hero-shell,
.footer-inner,
.page-hero-shell,
.content-shell {
  width: var(--site-width) !important;
  max-width: var(--site-width) !important;
}

/* Header scales with the layout instead of feeling mini on wide screens. */
.site-header {
  padding-top: clamp(12px, 1.3vw, 24px);
}
.nav-shell {
  min-height: clamp(76px, 5.3vw, 96px);
  padding: clamp(12px, 1vw, 18px) clamp(16px, 1.5vw, 28px);
  grid-template-columns: clamp(210px, 16vw, 286px) minmax(0, 1fr) clamp(178px, 12vw, 220px);
  gap: clamp(14px, 1.6vw, 28px);
}
.logo {
  width: clamp(200px, 15vw, 272px);
}
.nav-links {
  gap: clamp(4px, .5vw, 12px);
}
.nav-links a {
  font-size: clamp(12px, .78vw, 15px);
  padding: clamp(9px, .7vw, 13px) clamp(8px, .8vw, 15px);
}
.nav-cta {
  min-height: clamp(48px, 3.5vw, 58px);
  font-size: clamp(13px, .85vw, 16px);
  border-radius: clamp(12px, .9vw, 18px);
}

/* Hero: keep the reference composition, but let it fill wide desktop space. */
.hero {
  padding-top: clamp(10px, 1vw, 18px);
}
.hero-surface.hero-reference {
  background-image: url('../assets/reference/03_hero_section@2x.png');
  aspect-ratio: 1124 / 345;
  width: 100%;
  min-height: clamp(345px, 30.7vw, 516px);
  border-radius: clamp(0px, .5vw, 12px);
  background-size: 100% 100%;
  background-position: center;
}
.hero-hotspot-call {
  left: 4.05%;
  top: 62.35%;
  width: 14.75%;
  height: 14.5%;
}
.hero-hotspot-quote {
  left: 20.05%;
  top: 62.35%;
  width: 13.45%;
  height: 14.5%;
}

/* Benefits scale to the same width and breathe more on larger screens. */
.benefits-wrap {
  margin-top: clamp(22px, 1.9vw, 34px) !important;
}
.benefits {
  width: 100%;
  border-radius: clamp(20px, 1.45vw, 28px);
}
.benefit {
  grid-template-columns: clamp(38px, 3vw, 56px) minmax(0, 1fr);
  gap: clamp(10px, .95vw, 16px);
  padding: clamp(18px, 1.45vw, 28px);
}
.benefit .icon-big,
.icon-big {
  width: clamp(30px, 2.3vw, 44px);
  height: clamp(30px, 2.3vw, 44px);
}
.benefit p {
  font-size: clamp(13px, .9vw, 17px);
}

/* Main grids scale up. */
.home-grid,
.content-two-col {
  grid-template-columns: minmax(0, calc(100% - var(--sidebar-width) - var(--main-gap))) var(--sidebar-width);
  gap: var(--main-gap);
  margin-top: clamp(24px, 2vw, 36px);
}
.left-stack,
.content-stack {
  gap: var(--panel-gap);
}

.panel,
.quote-card,
.location-intro,
.location-card,
.review-card,
.detail-card,
.feature-item,
.stat-card {
  border-radius: clamp(18px, 1.4vw, 28px);
}

/* Home services get enough space to feel premium on wide desktop. */
.services-panel {
  grid-template-columns: clamp(190px, 15vw, 260px) minmax(0, 1fr);
  gap: clamp(16px, 1.5vw, 26px);
  padding: clamp(22px, 1.7vw, 34px);
}
.section-title.compact {
  font-size: clamp(30px, 2.55vw, 44px);
}
.services-intro p {
  font-size: clamp(14px, .95vw, 18px);
}
.services-grid {
  gap: clamp(12px, 1vw, 18px);
}
.service-card {
  min-height: clamp(236px, 17vw, 310px);
  padding: clamp(14px, 1.15vw, 22px);
}
.service-visual {
  height: clamp(96px, 7.6vw, 138px);
  border-radius: clamp(14px, 1.1vw, 20px);
}
.service-visual img {
  max-width: clamp(64px, 5.2vw, 96px);
  max-height: clamp(64px, 5.2vw, 96px);
}
.service-content h3 {
  font-size: clamp(17px, 1.18vw, 24px);
}
.service-content p {
  font-size: clamp(13px, .86vw, 16px);
}
.service-action {
  width: clamp(38px, 2.9vw, 50px);
  height: clamp(38px, 2.9vw, 50px);
}

/* Quote card scales up but remains usable. */
.quote-card {
  padding: clamp(24px, 1.8vw, 34px);
  top: calc(var(--header-h) + 18px);
}
.quote-card h2 {
  font-size: clamp(34px, 2.7vw, 48px);
}
.quote-card .subtitle {
  font-size: clamp(15px, 1vw, 19px);
}
.form-steps {
  margin-bottom: clamp(16px, 1.2vw, 24px);
}
.form-step {
  font-size: clamp(10px, .75vw, 13px);
}
.form-step .dot {
  width: clamp(28px, 2.1vw, 38px);
  height: clamp(28px, 2.1vw, 38px);
}
.field,
.select {
  height: clamp(50px, 3.45vw, 60px);
  border-radius: clamp(13px, .9vw, 18px);
  font-size: clamp(14px, .9vw, 17px);
}
.label span {
  font-size: clamp(12px, .78vw, 15px);
}
.btn-sm {
  min-height: clamp(44px, 3vw, 54px);
  font-size: clamp(13px, .85vw, 16px);
}
.quote-submit {
  min-height: clamp(54px, 3.8vw, 66px);
}

/* ADAS, locations, reviews scale with bigger sections. */
.adas-banner {
  min-height: clamp(250px, 18vw, 360px);
}
.adas-copy {
  padding: clamp(24px, 2vw, 40px);
}
.adas-copy h2 {
  font-size: clamp(30px, 2.35vw, 46px);
}
.adas-copy p {
  font-size: clamp(15px, .98vw, 19px);
}
.locations-grid {
  gap: clamp(12px, 1vw, 18px);
}
.location-intro,
.location-card {
  padding: clamp(18px, 1.3vw, 26px);
}
.location-card h3 {
  font-size: clamp(17px, 1.1vw, 22px);
}
.location-card p,
.location-intro p,
.location-card a {
  font-size: clamp(13px, .86vw, 16px);
}
.reviews-panel {
  padding: clamp(22px, 1.7vw, 34px);
}
.review-card {
  min-height: clamp(170px, 12vw, 230px);
  padding: clamp(24px, 1.7vw, 34px);
}
.review-card p {
  font-size: clamp(14px, .95vw, 18px);
}

/* Interior pages scale to match the home page. */
.page-hero-card {
  min-height: clamp(360px, 25vw, 500px);
}
.page-hero-copy {
  padding: clamp(34px, 2.8vw, 58px);
}
.page-hero-card h1 {
  font-size: clamp(42px, 3.6vw, 70px);
}
.page-hero-card p,
.content-panel p {
  font-size: clamp(15px, .96vw, 19px);
}
.content-panel {
  padding: clamp(24px, 1.8vw, 36px);
}
.content-panel h2 {
  font-size: clamp(34px, 2.55vw, 52px);
}
.detail-card {
  padding: clamp(20px, 1.4vw, 30px);
}
.detail-card h3 {
  font-size: clamp(22px, 1.5vw, 30px);
}

/* Footer scales to the same rail. */
.footer {
  margin-top: clamp(34px, 2.4vw, 52px);
}
.footer-inner {
  padding: clamp(28px, 2.1vw, 42px) 0 clamp(20px, 1.4vw, 30px);
}
.footer-grid {
  gap: clamp(16px, 1.2vw, 26px);
}
.footer-logo {
  width: clamp(148px, 11vw, 210px);
}
.footer p,
.footer a {
  font-size: clamp(12px, .78vw, 15px);
}
.footer h3 {
  font-size: clamp(13px, .86vw, 16px);
}

/* Large screens: use the space without making forms cartoonishly huge. */
@media (min-width: 1500px) {
  :root {
    --site-gutter: 42px;
  }
  .services-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Laptop/tablet: collapse before crowding starts. */
@media (max-width: 1180px) {
  :root {
    --site-width: min(calc(100vw - 32px), 1040px);
    --sidebar-width: 100%;
    --main-gap: 24px;
  }
  .nav-shell {
    grid-template-columns: minmax(180px, 1fr) auto;
  }
  .nav-links,
  .nav-cta {
    display: none;
  }
  .mobile-menu-button {
    display: flex;
  }
  .home-grid,
  .content-two-col {
    grid-template-columns: 1fr;
  }
  .quote-card {
    position: static;
  }
  .services-panel,
  .page-hero-card,
  .adas-banner {
    grid-template-columns: 1fr;
  }
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .benefit:nth-child(odd)::before {
    display: none;
  }
  .locations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile: replace screenshot-style hero with live text over the hero scene. */
@media (max-width: 820px) {
  :root {
    --site-gutter: 10px;
    --site-width: calc(100vw - 20px);
    --header-h: 88px;
    --main-gap: 18px;
    --panel-gap: 16px;
  }
  main {
    padding-top: var(--header-h);
  }
  .site-header {
    padding-top: 10px;
  }
  .nav-shell {
    min-height: 72px;
    border-radius: 18px;
  }
  .logo {
    width: clamp(172px, 46vw, 210px);
  }
  .mobile-menu {
    border-radius: 18px;
  }
  .hero {
    padding-top: 8px;
  }
  .hero-surface.hero-reference {
    min-height: min(78vh, 640px);
    aspect-ratio: auto;
    border-radius: 26px;
    background-image: url('../assets/hero-service-scene-hq.png');
    background-size: cover;
    background-position: 58% center;
    box-shadow: var(--shadow-lg);
  }
  .hero-surface.hero-reference::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(ellipse 760px 500px at 8% 42%, rgba(255,250,243,.98) 0 20%, rgba(255,250,243,.86) 42%, rgba(255,250,243,.42) 64%, transparent 82%),
      linear-gradient(90deg, rgba(255,250,243,.96), rgba(255,250,243,.78) 46%, rgba(255,250,243,.26) 76%, transparent);
  }
  .hero-reference .hero-copy {
    display: flex !important;
    position: relative;
    z-index: 2;
    min-height: min(78vh, 640px);
    padding: clamp(28px, 8vw, 44px) clamp(20px, 6vw, 34px);
  }
  .hero-reference .hero-media,
  .hero-hotspot {
    display: none !important;
  }
  .hero-copy h1 {
    font-size: clamp(39px, 11vw, 58px);
    max-width: 560px;
  }
  .hero-lede {
    font-size: clamp(15px, 4vw, 18px);
    max-width: 420px;
  }
  .hero-actions {
    gap: 12px;
  }
  .hero-actions .btn-lg {
    width: 100%;
    max-width: 360px;
    min-height: 58px;
  }
  .trust-row {
    align-items: flex-start;
  }
  .benefits-wrap {
    margin-top: 16px !important;
  }
  .benefits {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }
  .benefit::before {
    display: none !important;
  }
  .services-grid,
  .locations-grid,
  .review-grid,
  .detail-grid,
  .stats-grid,
  .form-row,
  .form-row.three,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .service-card {
    min-height: auto;
  }
  .service-visual {
    height: 120px;
  }
  .quote-card,
  .content-panel,
  .reviews-panel {
    padding: 20px;
  }
  .form-step {
    white-space: normal;
    line-height: 1.15;
  }
  .wizard-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .wizard-actions .btn,
  .wizard-actions a {
    width: 100%;
  }
  .page-hero-card {
    border-radius: 26px;
  }
  .page-hero-visual {
    min-height: 240px;
  }
}

/* Small phones: reduce chrome, preserve tap comfort. */
@media (max-width: 480px) {
  :root {
    --site-gutter: 8px;
    --site-width: calc(100vw - 16px);
  }
  .nav-shell {
    padding-inline: 12px;
  }
  .logo {
    width: 166px;
  }
  .hero-surface.hero-reference {
    min-height: 620px;
  }
  .hero-copy h1 {
    font-size: 40px;
  }
  .avatar-stack span {
    width: 28px;
    height: 28px;
  }
  .trust-stars {
    font-size: 18px;
  }
  .form-steps {
    gap: 2px;
  }
  .form-step .dot {
    width: 28px;
    height: 28px;
  }
}

/* ========================================================================
   v1.2.5 SECTION HERO + STICKY QUOTE + CLEANUP PASS
   - Each interior page now uses a page-specific hero image.
   - Service Quote sticks on desktop while the services content scrolls.
   - Page hero visual treatment is cleaned up for consistent cropping.
   - Extra QA guards reduce accidental overflow/overlap.
   ======================================================================== */

.page-hero-card {
  grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr);
  isolation: isolate;
}
.page-hero-visual {
  min-width: 0;
  overflow: hidden;
  background: #1f1914;
}
.page-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
}
.page-hero-copy {
  position: relative;
  z-index: 2;
}

/* Sticky quote behavior restored and made explicit. */
@media (min-width: 1181px) {
  .content-two-col > .quote-card,
  .service-quote-sticky {
    position: sticky !important;
    top: calc(var(--header-h) + 18px);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 36px);
    overflow: auto;
    scrollbar-width: thin;
  }
}

/* Better visual balance for generated section heroes. */
.page-hero-card .page-hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,248,238,.10), transparent 28%),
    radial-gradient(circle at 78% 24%, rgba(255,126,38,.12), transparent 26%);
}

/* Cards and panels should never visually bleed past their containers. */
.panel,
.quote-card,
.service-card,
.detail-card,
.location-card,
.review-card,
.feature-item,
.stat-card {
  contain: layout paint;
}

/* Make CTA rows safer across all pages. */
.page-hero-copy .btn,
.hero-actions .btn,
.wizard-actions .btn,
.wizard-actions a {
  white-space: nowrap;
}

/* Services page quote card gets a clearer sticky affordance. */
.service-quote-sticky::before {
  content: 'Service Quote';
  display: inline-flex;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(239,90,21,.10);
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Page-specific hero images need a taller stage on wide monitors. */
@media (min-width: 1500px) {
  .page-hero-card {
    min-height: clamp(460px, 28vw, 560px);
  }
}

/* Tablet/mobile: sticky quote is disabled and hero images stack safely. */
@media (max-width: 1180px) {
  .service-quote-sticky,
  .content-two-col > .quote-card {
    position: static !important;
    max-height: none;
    overflow: visible;
  }
  .page-hero-card {
    grid-template-columns: 1fr;
  }
  .page-hero-visual {
    min-height: clamp(250px, 45vw, 420px);
  }
}

@media (max-width: 560px) {
  .page-hero-copy .btn,
  .hero-actions .btn,
  .wizard-actions .btn,
  .wizard-actions a {
    white-space: normal;
  }
}

/* ========================================================================
   v1.2.6 PROPORTIONAL HERO + DESKTOP STICKY SERVICE QUOTE REVISION
   Goal:
   - The hero should scale proportionally when the window shrinks, never squish.
   - Desktop Service Quote should behave like a reliable sticky conversion panel.
   - Mobile/tablet should stay readable, stacked, and touch-friendly.
   ======================================================================== */

/* Desktop hero is now a real image, not a stretched background. */
.hero-surface.hero-reference {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  background: none !important;
  overflow: hidden !important;
  border-radius: clamp(0px, .5vw, 12px);
  box-shadow: 0 18px 42px rgba(50,26,9,.10);
}
.hero-reference-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
  user-select: none;
  pointer-events: none;
}
.hero-reference .hero-copy,
.hero-reference .hero-media,
.hero-reference .hero-badge {
  display: none !important;
}
.hero-hotspot {
  position: absolute;
  z-index: 6;
}
.hero-hotspot-call {
  left: 4.05%;
  top: 62.35%;
  width: 14.75%;
  height: 14.5%;
}
.hero-hotspot-quote {
  left: 20.05%;
  top: 62.35%;
  width: 13.45%;
  height: 14.5%;
}

/* Sticky Service Quote: explicit desktop-only behavior. */
.content-shell,
.content-two-col,
.content-two-col > *,
.quote-card,
.service-quote-sticky {
  overflow: visible;
}
.service-quote-sticky {
  contain: none !important;
}
@media (min-width: 1181px) {
  .content-two-col {
    align-items: start;
  }
  .content-two-col > .service-quote-sticky,
  aside.quote-card.service-quote-sticky {
    position: sticky !important;
    top: calc(var(--header-h) + 18px) !important;
    align-self: start !important;
    z-index: 5;
    max-height: calc(100vh - var(--header-h) - 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* Keep non-service quote cards stable without forcing unwanted sticky behavior. */
.content-two-col > .quote-card:not(.service-quote-sticky) {
  align-self: start;
}

/* Interior section hero images stay proportional and crop intentionally. */
.page-hero-visual img {
  transform: none !important;
}
.page-hero-card {
  overflow: hidden;
}

/* Prevent paint containment from breaking sticky positioning. */
.quote-card,
.service-quote-sticky {
  contain: none !important;
}

/* Refine desktop gutters after the wide scaling pass. */
@media (min-width: 1181px) {
  :root {
    --site-gutter: clamp(18px, 2vw, 40px);
    --main-gap: clamp(24px, 2vw, 36px);
  }
}

/* Tablet: stop sticky and use normal stacked conversion flow. */
@media (max-width: 1180px) {
  .content-two-col > .service-quote-sticky,
  aside.quote-card.service-quote-sticky {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Mobile hero swaps to live readable content over the service image. */
@media (max-width: 820px) {
  .hero-surface.hero-reference {
    min-height: min(78vh, 640px) !important;
    aspect-ratio: auto !important;
    border-radius: 26px;
    background-image: url('../assets/hero-service-scene-hq.png') !important;
    background-size: cover !important;
    background-position: 58% center !important;
    box-shadow: var(--shadow-lg);
  }
  .hero-reference-img {
    display: none !important;
  }
  .hero-surface.hero-reference::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(ellipse 760px 500px at 8% 42%, rgba(255,250,243,.98) 0 20%, rgba(255,250,243,.86) 42%, rgba(255,250,243,.42) 64%, transparent 82%),
      linear-gradient(90deg, rgba(255,250,243,.96), rgba(255,250,243,.78) 46%, rgba(255,250,243,.26) 76%, transparent);
  }
  .hero-reference .hero-copy {
    display: flex !important;
    position: relative;
    z-index: 2;
    min-height: min(78vh, 640px);
    padding: clamp(28px, 8vw, 44px) clamp(20px, 6vw, 34px);
  }
  .hero-hotspot {
    display: none !important;
  }
}

/* Small phone polish: avoid overly tall hero copy while keeping readable CTA flow. */
@media (max-width: 480px) {
  .hero-surface.hero-reference {
    min-height: 600px !important;
  }
  .hero-copy h1 {
    font-size: clamp(38px, 10.5vw, 42px);
  }
  .hero-lede {
    font-size: 15px;
  }
}

/* ========================================================================
   v1.2.7 INTERIOR HERO THEME REBUILD
   Goal:
   - Fix every non-home page hero so the visual matches the page header.
   - Remove generic/repeated hero feel.
   - Use crisp section-specific visual assets with consistent ABS styling.
   - Keep desktop/tablet/mobile behavior clean and non-overlapping.
   ======================================================================== */

.page-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(430px, .9fr) minmax(0, 1.1fr);
  min-height: clamp(390px, 28vw, 560px);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.88), rgba(255,248,238,.84) 36%, rgba(255,248,238,.58) 58%, rgba(255,248,238,.20) 78%, transparent 100%),
    linear-gradient(115deg, rgba(255,250,243,.98) 0 47%, rgba(30,24,19,.96) 47% 100%);
}

.page-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 720px;
}

.page-hero-copy p:not(.eyebrow) {
  max-width: 620px;
}

.page-hero-visual {
  position: relative;
  min-width: 0;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #201913;
}

.page-hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none !important;
  filter: saturate(1.04) contrast(1.02);
}

.page-hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,248,238,.72) 0%, rgba(255,248,238,.34) 18%, rgba(255,248,238,.06) 36%, transparent 58%),
    radial-gradient(circle at 85% 20%, rgba(255,126,38,.18), transparent 34%);
}

.page-hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.08);
}

/* Individual image focus points so the art lines up with each section. */
.page-hero-card--services .page-hero-visual img { object-position: 58% center; }
.page-hero-card--calibration .page-hero-visual img { object-position: 62% center; }
.page-hero-card--locations .page-hero-visual img { object-position: 60% center; }
.page-hero-card--about .page-hero-visual img { object-position: 60% center; }
.page-hero-card--reviews .page-hero-visual img { object-position: 60% center; }
.page-hero-card--contact .page-hero-visual img { object-position: 62% center; }
.page-hero-card--quote .page-hero-visual img { object-position: 62% center; }

/* Page-specific accent glows. */
.page-hero-card--services { box-shadow: 0 26px 70px rgba(239,90,21,.14); }
.page-hero-card--calibration { box-shadow: 0 26px 70px rgba(45,80,120,.14); }
.page-hero-card--locations { box-shadow: 0 26px 70px rgba(239,90,21,.13); }
.page-hero-card--about { box-shadow: 0 26px 70px rgba(92,64,42,.15); }
.page-hero-card--reviews { box-shadow: 0 26px 70px rgba(255,174,45,.13); }
.page-hero-card--contact { box-shadow: 0 26px 70px rgba(239,90,21,.14); }
.page-hero-card--quote { box-shadow: 0 26px 70px rgba(239,90,21,.15); }

/* Keep hero CTAs clean inside the larger themed heroes. */
.page-hero-copy .btn {
  min-width: max-content;
}

.page-hero-copy > div[style*="margin-top"] {
  align-items: center;
}

/* Services sticky quote must survive the hero rebuild. */
@media (min-width: 1181px) {
  aside.quote-card.service-quote-sticky {
    position: sticky !important;
    top: calc(var(--header-h) + 18px) !important;
    align-self: start !important;
    max-height: calc(100vh - var(--header-h) - 36px);
    overflow-y: auto;
    contain: none !important;
    z-index: 5;
  }
}

/* Tablet: stack hero copy and visual without crushing the image. */
@media (max-width: 1180px) {
  .page-hero-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .page-hero-visual {
    min-height: clamp(280px, 45vw, 460px);
    order: 2;
  }
  .page-hero-copy {
    order: 1;
  }
  .page-hero-visual::before {
    background:
      linear-gradient(180deg, rgba(255,248,238,.10), transparent 36%),
      radial-gradient(circle at 82% 20%, rgba(255,126,38,.20), transparent 34%);
  }
}

/* Mobile: image becomes a clean supporting banner under the copy. */
@media (max-width: 820px) {
  .page-hero {
    padding-top: 14px;
  }
  .page-hero-card {
    border-radius: 26px;
  }
  .page-hero-copy {
    padding: 30px 20px 24px;
  }
  .page-hero-visual {
    min-height: 260px;
  }
  .page-hero-copy .btn {
    width: 100%;
    min-width: 0;
  }
  .page-hero-copy > div[style*="margin-top"] {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .page-hero-visual {
    min-height: 230px;
  }
}

/* ========================================================================
   v1.2.8 REVIEW CAROUSEL + FINAL UI PASS
   - Adds a large responsive review carousel.
   - Cards click through to the Google review page or source page.
   - Preserves sticky Service Quote and themed hero system.
   ======================================================================== */

.google-reviews-section { margin-top: clamp(18px, 1.8vw, 32px); }

.google-reviews-panel {
  overflow: hidden;
  position: relative;
  padding: clamp(22px, 2vw, 38px);
  border-radius: clamp(22px, 1.6vw, 32px);
  border: 1px solid rgba(113,84,58,.13);
  background:
    radial-gradient(circle at 82% 10%, rgba(255,136,50,.18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,247,236,.98));
  box-shadow: var(--shadow-lg);
}

.google-reviews-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
  gap: clamp(18px, 2vw, 32px);
  align-items: end;
  margin-bottom: clamp(18px, 1.7vw, 28px);
}

.google-reviews-header h2 {
  margin: 0;
  font-size: clamp(34px, 3vw, 58px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 950;
}

.google-reviews-header p {
  max-width: 760px;
  margin: 12px 0 0;
  color: #4d433c;
  font-size: clamp(15px, .96vw, 19px);
  line-height: 1.6;
  font-weight: 650;
}

.google-rating-summary {
  justify-self: end;
  width: 100%;
  padding: 18px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(180deg, #211914, #3d2b20);
  color: #fff7ee;
  box-shadow: var(--shadow-md);
}

.google-rating-summary strong {
  display: block;
  font-size: clamp(42px, 3.2vw, 62px);
  line-height: .9;
  color: #ff8a3a;
}

.google-rating-summary span {
  display: block;
  margin-top: 8px;
  color: #ffb52e;
  letter-spacing: .08em;
  font-size: 18px;
}

.google-rating-summary small {
  display: block;
  margin-top: 8px;
  color: rgba(255,247,238,.78);
  line-height: 1.35;
  font-weight: 700;
}

.review-carousel-controls {
  position: absolute;
  right: clamp(18px, 1.6vw, 30px);
  top: clamp(18px, 1.6vw, 30px);
  display: flex;
  gap: 10px;
  z-index: 5;
}

.review-nav-btn {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(113,84,58,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #34261e;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.review-carousel-shell {
  margin-inline: calc(clamp(22px, 2vw, 38px) * -1);
  padding-inline: clamp(22px, 2vw, 38px);
}

.review-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 31%);
  gap: clamp(14px, 1.2vw, 22px);
  margin: 0;
  padding: 4px 0 10px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(22px, 2vw, 38px);
  scrollbar-width: thin;
}

.review-carousel-slide { scroll-snap-align: start; min-width: 0; }

.google-review-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(18px, 1.35vw, 26px);
  border-radius: 24px;
  border: 1px solid rgba(113,84,58,.14);
  background: linear-gradient(180deg, #fffefa, #fff5e9);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.google-review-card:hover,
.google-review-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(239,90,21,.35);
  box-shadow: var(--shadow-md);
}

.google-review-card__top {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.google-review-avatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  color: #fff;
  font-weight: 950;
  letter-spacing: .02em;
}

.google-review-card h3 {
  margin: 0 0 6px;
  font-size: clamp(18px, 1.15vw, 23px);
  line-height: 1.1;
}

.google-review-stars {
  color: #f3a71e;
  letter-spacing: .08em;
  font-size: 16px;
}

.google-review-text {
  margin: 0;
  color: #473c35;
  font-size: clamp(14px, .92vw, 17px);
  line-height: 1.65;
  font-weight: 650;
}

.google-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.google-review-meta span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(239,90,21,.08);
  color: #5f4b3d;
  font-size: 12px;
  font-weight: 900;
}

.google-reviews-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(18px, 1.6vw, 28px);
}

.google-reviews-footer p {
  margin: 0;
  color: #655a52;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .review-carousel-track { grid-auto-columns: minmax(320px, 46%); }
}

@media (max-width: 820px) {
  .google-reviews-header { grid-template-columns: 1fr; }
  .google-rating-summary { justify-self: stretch; }
  .review-carousel-controls {
    position: static;
    justify-content: flex-end;
    margin-bottom: 14px;
  }
  .review-carousel-track { grid-auto-columns: minmax(82%, 82%); }
}

@media (max-width: 480px) {
  .google-reviews-panel { padding: 18px; }
  .review-carousel-shell {
    margin-inline: -18px;
    padding-inline: 18px;
  }
  .review-carousel-track { grid-auto-columns: minmax(88%, 88%); }
}

/* ========================================================================
   v1.2.9 REVIEW LAYOUT + OVERLAP FIX
   - Fixes Get Your Quote / Our Services overlap by keeping review carousel
     outside the home two-column grid and enforcing safer desktop breakpoints.
   - Removes duplicate review sections.
   - Keeps one large full-width review carousel on Home and Reviews pages.
   ======================================================================== */

.home-grid {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.home-grid > .quote-card {
  z-index: 3;
}

.left-stack {
  position: relative;
  z-index: 1;
}

.left-stack .google-reviews-section,
.content-stack .google-reviews-section {
  width: 100% !important;
  max-width: 100% !important;
}

.google-reviews-section {
  margin-top: clamp(24px, 2vw, 40px);
  clear: both;
}

.google-reviews-panel {
  overflow: hidden;
  position: relative;
  padding: clamp(24px, 2.2vw, 44px);
  border-radius: clamp(24px, 1.8vw, 34px);
  border: 1px solid rgba(113,84,58,.13);
  background:
    radial-gradient(circle at 82% 10%, rgba(255,136,50,.18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,247,236,.98));
  box-shadow: var(--shadow-lg);
}

.google-reviews-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
  gap: clamp(18px, 2vw, 34px);
  align-items: end;
  margin-bottom: clamp(20px, 1.8vw, 30px);
  padding-right: 112px;
}

.google-reviews-header h2 {
  margin: 0;
  font-size: clamp(36px, 3.1vw, 62px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 950;
}

.google-reviews-header p {
  max-width: 840px;
  margin: 12px 0 0;
  color: #4d433c;
  font-size: clamp(15px, .96vw, 19px);
  line-height: 1.6;
  font-weight: 650;
}

.google-rating-summary {
  justify-self: end;
  width: 100%;
  padding: 18px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(180deg, #211914, #3d2b20);
  color: #fff7ee;
  box-shadow: var(--shadow-md);
}

.google-rating-summary strong {
  display: block;
  font-size: clamp(42px, 3.2vw, 62px);
  line-height: .9;
  color: #ff8a3a;
}

.google-rating-summary span {
  display: block;
  margin-top: 8px;
  color: #ffb52e;
  letter-spacing: .08em;
  font-size: 18px;
}

.google-rating-summary small {
  display: block;
  margin-top: 8px;
  color: rgba(255,247,238,.78);
  line-height: 1.35;
  font-weight: 700;
}

.review-carousel-controls {
  position: absolute;
  right: clamp(18px, 1.6vw, 30px);
  top: clamp(18px, 1.6vw, 30px);
  display: flex;
  gap: 10px;
  z-index: 5;
}

.review-nav-btn {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(113,84,58,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.90);
  color: #34261e;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.review-carousel-shell {
  margin-inline: calc(clamp(24px, 2.2vw, 44px) * -1);
  padding-inline: clamp(24px, 2.2vw, 44px);
}

.review-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(340px, 30%);
  gap: clamp(16px, 1.25vw, 24px);
  margin: 0;
  padding: 6px 0 12px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(24px, 2.2vw, 44px);
  scrollbar-width: thin;
}

.review-carousel-slide {
  scroll-snap-align: start;
  min-width: 0;
}

.google-review-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 1.45vw, 28px);
  border-radius: 24px;
  border: 1px solid rgba(113,84,58,.14);
  background: linear-gradient(180deg, #fffefa, #fff5e9);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.google-review-card:hover,
.google-review-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(239,90,21,.35);
  box-shadow: var(--shadow-md);
}

.google-review-card__top {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.google-review-avatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  color: #fff;
  font-weight: 950;
  letter-spacing: .02em;
}

.google-review-card h3 {
  margin: 0 0 6px;
  font-size: clamp(18px, 1.15vw, 23px);
  line-height: 1.1;
}

.google-review-stars {
  color: #f3a71e;
  letter-spacing: .08em;
  font-size: 16px;
}

.google-review-text {
  margin: 0;
  color: #473c35;
  font-size: clamp(14px, .92vw, 17px);
  line-height: 1.65;
  font-weight: 650;
}

.google-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.google-review-meta span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(239,90,21,.08);
  color: #5f4b3d;
  font-size: 12px;
  font-weight: 900;
}

.google-reviews-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(18px, 1.6vw, 28px);
}

.google-reviews-footer p {
  max-width: 720px;
  margin: 0;
  color: #655a52;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.google-reviews-footer code {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(80,60,45,.08);
}

/* Earlier collapse avoids the quote column crowding the services grid. */
@media (max-width: 1320px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
  .home-grid > .quote-card {
    position: static !important;
    max-width: 760px;
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 1180px) {
  .review-carousel-track {
    grid-auto-columns: minmax(320px, 46%);
  }
}

@media (max-width: 820px) {
  .google-reviews-header {
    grid-template-columns: 1fr;
    padding-right: 0;
  }
  .google-rating-summary {
    justify-self: stretch;
  }
  .review-carousel-controls {
    position: static;
    justify-content: flex-end;
    margin-bottom: 14px;
  }
  .review-carousel-track {
    grid-auto-columns: minmax(82%, 82%);
  }
}

@media (max-width: 480px) {
  .google-reviews-panel {
    padding: 18px;
  }
  .review-carousel-shell {
    margin-inline: -18px;
    padding-inline: 18px;
  }
  .review-carousel-track {
    grid-auto-columns: minmax(88%, 88%);
  }
}

/* ========================================================================
   v1.2.10 CONTINUOUS REVIEW CAROUSEL + REVIEW LINK PATCH
   - Updates Read More Google Reviews link to the supplied Google reviews URL.
   - Desktop arrows now wrap from end-to-start / start-to-end.
   - Mobile hides arrows and keeps native swipe + scroll-snap behavior.
   ======================================================================== */

.review-carousel-track {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.review-carousel-track:active {
  cursor: grabbing;
}

.review-carousel-track:focus-visible {
  outline: 3px solid rgba(239,90,21,.38);
  outline-offset: 6px;
  border-radius: 20px;
}

.review-nav-btn {
  display: inline-grid;
  place-items: center;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.review-nav-btn:hover,
.review-nav-btn:focus-visible {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.google-reviews-footer .btn {
  white-space: nowrap;
}

@media (max-width: 820px) {
  .review-carousel-controls {
    display: none !important;
  }

  .review-carousel-track {
    touch-action: pan-x;
    cursor: auto;
  }

  .google-reviews-footer .btn {
    width: 100%;
  }
}

/* ========================================================================
   v1.2.11 REVIEW ARROWS + UI CLEANUP PASS
   - Side arrows now sit on the left/right edges of the review carousel.
   - Mobile hides arrows and keeps high-quality swipe/scroll-snap behavior.
   - Removes visible development fragments and duplicate review blocks.
   - Adds safer spacing, card sizing, and overflow control across the page.
   ======================================================================== */

html,
body {
  overflow-x: hidden;
}

main > .google-reviews-section {
  margin-top: clamp(26px, 2.4vw, 48px);
}

.google-reviews-panel {
  overflow: hidden;
  position: relative;
  padding: clamp(24px, 2.2vw, 44px);
  border-radius: clamp(24px, 1.8vw, 34px);
  border: 1px solid rgba(113,84,58,.13);
  background:
    radial-gradient(circle at 82% 10%, rgba(255,136,50,.18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,247,236,.98));
  box-shadow: var(--shadow-lg);
}

.google-reviews-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
  gap: clamp(18px, 2vw, 34px);
  align-items: end;
  margin-bottom: clamp(22px, 1.8vw, 34px);
}

.google-reviews-header h2 {
  margin: 0;
  font-size: clamp(36px, 3.1vw, 62px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 950;
}

.google-reviews-header p {
  max-width: 820px;
  margin: 12px 0 0;
  color: #4d433c;
  font-size: clamp(15px, .96vw, 19px);
  line-height: 1.6;
  font-weight: 650;
}

.google-rating-summary {
  justify-self: end;
  width: 100%;
  padding: 18px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(180deg, #211914, #3d2b20);
  color: #fff7ee;
  box-shadow: var(--shadow-md);
}

.google-rating-summary strong {
  display: block;
  font-size: clamp(42px, 3.2vw, 62px);
  line-height: .9;
  color: #ff8a3a;
}

.google-rating-summary span {
  display: block;
  margin-top: 8px;
  color: #ffb52e;
  letter-spacing: .08em;
  font-size: 18px;
}

.google-rating-summary small {
  display: block;
  margin-top: 8px;
  color: rgba(255,247,238,.78);
  line-height: 1.35;
  font-weight: 700;
}

.review-carousel-stage {
  position: relative;
  isolation: isolate;
  margin-top: 4px;
}

.review-carousel-shell {
  overflow: hidden;
  margin-inline: clamp(18px, 1.8vw, 34px);
  padding-block: 4px 14px;
}

.review-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(340px, 30%);
  gap: clamp(16px, 1.25vw, 24px);
  margin: 0;
  padding: 6px 2px 16px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.review-carousel-track:focus-visible {
  outline: 3px solid rgba(239,90,21,.38);
  outline-offset: 6px;
  border-radius: 20px;
}

.review-carousel-slide {
  scroll-snap-align: start;
  min-width: 0;
}

.review-nav-btn {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: clamp(46px, 3.2vw, 58px);
  height: clamp(46px, 3.2vw, 58px);
  border: 1px solid rgba(113,84,58,.20);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #34261e;
  font-size: clamp(28px, 2.2vw, 38px);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(50,26,9,.18);
  transform: translateY(-50%);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.review-nav-btn:hover,
.review-nav-btn:focus-visible {
  background: #fff;
  box-shadow: 0 20px 42px rgba(50,26,9,.24);
}

.review-nav-btn--prev {
  left: 0;
}

.review-nav-btn--next {
  right: 0;
}

.google-review-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 1.45vw, 28px);
  border-radius: 24px;
  border: 1px solid rgba(113,84,58,.14);
  background: linear-gradient(180deg, #fffefa, #fff5e9);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.google-review-card:hover,
.google-review-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(239,90,21,.35);
  box-shadow: var(--shadow-md);
}

.google-review-card__top {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.google-review-avatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  color: #fff;
  font-weight: 950;
  letter-spacing: .02em;
}

.google-review-card h3 {
  margin: 0 0 6px;
  font-size: clamp(18px, 1.15vw, 23px);
  line-height: 1.1;
}

.google-review-stars {
  color: #f3a71e;
  letter-spacing: .08em;
  font-size: 16px;
}

.google-review-text {
  margin: 0;
  color: #473c35;
  font-size: clamp(14px, .92vw, 17px);
  line-height: 1.65;
  font-weight: 650;
}

.google-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.google-review-meta span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(239,90,21,.08);
  color: #5f4b3d;
  font-size: 12px;
  font-weight: 900;
}

.google-reviews-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(18px, 1.6vw, 28px);
}

.google-reviews-footer p {
  max-width: 520px;
  margin: 0;
  color: #655a52;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

/* UI cleanup: keep cards from crashing into sidebars or creating ghost fragments. */
.home-grid,
.content-two-col,
.google-reviews-section,
.google-reviews-panel,
.review-carousel-stage,
.review-carousel-shell {
  min-width: 0;
}

.home-grid {
  overflow: visible;
}

.quote-card {
  z-index: 4;
}

/* Earlier collapse avoids the quote card crowding the services grid. */
@media (max-width: 1320px) {
  .home-grid {
    grid-template-columns: 1fr;
  }

  .home-grid > .quote-card {
    position: static !important;
    max-width: 760px;
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 1180px) {
  .review-carousel-track {
    grid-auto-columns: minmax(320px, 46%);
  }
}

@media (max-width: 820px) {
  .google-reviews-header {
    grid-template-columns: 1fr;
  }

  .google-rating-summary {
    justify-self: stretch;
  }

  .review-nav-btn {
    display: none !important;
  }

  .review-carousel-shell {
    margin-inline: 0;
    overflow: visible;
  }

  .review-carousel-track {
    grid-auto-columns: minmax(82%, 82%);
    touch-action: pan-x;
    cursor: auto;
    padding-bottom: 12px;
  }

  .google-reviews-footer .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .google-reviews-panel {
    padding: 18px;
  }

  .review-carousel-track {
    grid-auto-columns: minmax(88%, 88%);
  }

  .google-review-card {
    padding: 18px;
  }
}

/* ========================================================================
   v1.2.12 MOBILE-FIRST HERO + DASHBOARD POLISH PASS
   Goals:
   - Rebuild the home hero so the service image stays visible.
   - Make the fade live/responsive so it shrinks toward the left on smaller screens.
   - Center and polish the dashboard/benefit strip on small screens.
   - Improve mobile layout quality without degrading desktop.
   ======================================================================== */

/* HOME HERO: live responsive composition instead of a fixed screenshot crop. */
.hero {
  padding-top: clamp(10px, 1.2vw, 18px);
}

.hero-surface.hero-reference {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(390px, .86fr) minmax(0, 1.14fr) !important;
  align-items: stretch;
  min-height: clamp(470px, 39vw, 650px) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border-radius: clamp(24px, 2vw, 34px) !important;
  border: 1px solid rgba(113,84,58,.12) !important;
  background: #fff8ef !important;
  box-shadow: var(--shadow-lg) !important;
  isolation: isolate;
}

/* The image now lives behind the full hero and remains visible at every width. */
.hero-surface.hero-reference::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../assets/hero-service-scene-hq.png');
  background-size: cover;
  background-position: 67% center;
  filter: saturate(1.04) contrast(1.03);
}

/* Responsive fade: a left-side veil that shrinks with the viewport instead of covering the image. */
.hero-surface.hero-reference::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  z-index: 1;
  width: clamp(430px, 46vw, 760px);
  background:
    radial-gradient(ellipse 620px 420px at 18% 50%, rgba(255,250,243,.98) 0 34%, rgba(255,250,243,.76) 54%, rgba(255,250,243,.28) 72%, transparent 100%),
    linear-gradient(90deg, rgba(255,250,243,.99) 0%, rgba(255,250,243,.88) 52%, rgba(255,250,243,.38) 78%, transparent 100%);
  pointer-events: none;
}

.hero-reference-img,
.hero-reference .hero-media,
.hero-reference .hero-badge,
.hero-hotspot {
  display: none !important;
}

.hero-reference .hero-copy {
  display: flex !important;
  position: relative;
  z-index: 3;
  grid-column: 1 / 2;
  min-height: inherit;
  padding: clamp(34px, 4vw, 64px) clamp(22px, 3vw, 48px) !important;
  justify-content: center;
}

.hero-reference .hero-copy h1 {
  max-width: 660px;
  font-size: clamp(42px, 4.7vw, 74px);
  line-height: .96;
}

.hero-reference .hero-lede {
  max-width: 460px;
  font-size: clamp(15px, 1vw, 18px);
}

.hero-reference .hero-actions {
  gap: clamp(12px, 1.1vw, 18px);
}

.hero-reference .hero-actions .btn-lg {
  min-height: clamp(56px, 4vw, 66px);
}

/* Keep the trust row readable and not cramped. */
.hero-reference .trust-row {
  max-width: 440px;
}

/* Dashboard strip: cleaner relationship to hero. */
.benefits-wrap {
  margin-top: clamp(16px, 1.6vw, 28px) !important;
}

.benefits {
  overflow: hidden;
  border-radius: clamp(20px, 1.5vw, 28px);
}

.benefit {
  min-width: 0;
}

.benefit p {
  overflow-wrap: normal;
}

/* Tablet: keep image visible while giving copy enough contrast. */
@media (max-width: 1100px) {
  .hero-surface.hero-reference {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: clamp(560px, 64vw, 720px) !important;
  }

  .hero-surface.hero-reference::before {
    background-position: 62% center;
  }

  .hero-surface.hero-reference::after {
    width: min(78vw, 620px);
    background:
      radial-gradient(ellipse 720px 500px at 12% 42%, rgba(255,250,243,.98) 0 28%, rgba(255,250,243,.82) 47%, rgba(255,250,243,.36) 68%, transparent 100%),
      linear-gradient(90deg, rgba(255,250,243,.98) 0%, rgba(255,250,243,.78) 46%, rgba(255,250,243,.24) 70%, transparent 100%);
  }

  .hero-reference .hero-copy {
    max-width: 680px;
  }
}

/* Mobile: hero is image-first, copy remains readable, and the fade pulls left. */
@media (max-width: 820px) {
  body {
    padding-bottom: 74px;
  }

  .hero {
    padding-top: 8px;
  }

  .hero-surface.hero-reference {
    min-height: clamp(570px, 88vh, 720px) !important;
    border-radius: 28px !important;
  }

  .hero-surface.hero-reference::before {
    background-position: 64% center;
  }

  .hero-surface.hero-reference::after {
    width: min(92vw, 500px);
    background:
      radial-gradient(ellipse 500px 390px at 8% 35%, rgba(255,250,243,.97) 0 28%, rgba(255,250,243,.80) 46%, rgba(255,250,243,.34) 66%, transparent 100%),
      linear-gradient(90deg, rgba(255,250,243,.96) 0%, rgba(255,250,243,.72) 42%, rgba(255,250,243,.18) 70%, transparent 100%);
  }

  .hero-reference .hero-copy {
    min-height: clamp(570px, 88vh, 720px);
    justify-content: flex-start;
    padding: clamp(34px, 8vw, 48px) 20px 26px !important;
  }

  .hero-reference .hero-copy h1 {
    max-width: 430px;
    font-size: clamp(40px, 10.8vw, 58px);
  }

  .hero-reference .hero-lede {
    max-width: 340px;
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.55;
  }

  .hero-reference .hero-actions {
    width: min(100%, 360px);
    margin-top: 22px;
  }

  .hero-reference .hero-actions .btn-lg {
    width: 100%;
    min-height: 58px;
    justify-content: center;
  }

  .hero-reference .trust-row {
    width: min(100%, 360px);
    margin-top: 18px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.62);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 22px rgba(50,26,9,.08);
  }

  /* Dashboard under hero: centered, touch-friendly, and less cramped. */
  .benefits-wrap {
    margin-top: 14px !important;
  }

  .benefits {
    grid-template-columns: 1fr !important;
    border-radius: 24px;
  }

  .benefit {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 132px;
    padding: 22px 18px !important;
    text-align: center;
  }

  .benefit:not(:first-child)::before,
  .benefit::before {
    display: none !important;
  }

  .benefit .icon-big,
  .icon-big {
    width: 40px;
    height: 40px;
  }

  .benefit p {
    max-width: 260px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.35;
  }

  .benefit strong {
    margin-top: 5px;
    font-size: 13px;
  }

  /* Make dense homepage areas feel intentional on mobile. */
  .home-grid,
  .content-two-col {
    margin-top: 18px;
  }

  .services-panel,
  .adas-banner,
  .locations-grid,
  .google-reviews-panel,
  .quote-card,
  .content-panel {
    border-radius: 24px;
  }

  .services-panel {
    padding: 20px !important;
  }

  .services-intro {
    text-align: center;
  }

  .services-intro .accent-line {
    margin-left: auto;
    margin-right: auto;
  }

  .service-card {
    align-items: center;
    text-align: center;
    padding: 20px;
  }

  .service-action {
    align-self: center;
  }

  .location-intro {
    text-align: center;
  }

  .location-intro .accent-line {
    margin-left: auto;
    margin-right: auto;
  }

  .location-card {
    text-align: center;
    grid-template-columns: 1fr !important;
    justify-items: center;
  }

  .adas-copy {
    text-align: center;
  }

  .adas-copy .btn {
    width: 100%;
  }

  .adas-caption {
    justify-content: center;
  }

  .quote-card h2,
  .quote-card .subtitle {
    text-align: center;
  }

  .form-steps {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .mobile-call {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
}

/* Small phones: preserve quality by simplifying density, not shrinking everything to nothing. */
@media (max-width: 480px) {
  .hero-surface.hero-reference {
    min-height: 620px !important;
  }

  .hero-surface.hero-reference::before {
    background-position: 68% center;
  }

  .hero-surface.hero-reference::after {
    width: min(96vw, 430px);
  }

  .hero-reference .hero-copy {
    min-height: 620px;
    padding-inline: 18px !important;
  }

  .hero-reference .hero-copy h1 {
    font-size: clamp(38px, 11.2vw, 45px);
  }

  .hero-reference .hero-lede {
    max-width: 310px;
  }

  .hero-reference .trust-row {
    max-width: 320px;
  }

  .benefit {
    min-height: 122px;
  }

  .google-reviews-panel,
  .quote-card,
  .content-panel,
  .services-panel,
  .reviews-panel {
    padding: 18px !important;
  }
}

/* Ultra-narrow safety pass. */
@media (max-width: 380px) {
  .hero-reference .hero-copy h1 {
    font-size: 36px;
  }

  .hero-reference .hero-actions .btn-lg {
    font-size: 14px;
  }

  .benefit p {
    font-size: 14px;
  }
}

/* ========================================================================
   v1.2.13 ANCHORED HERO IMAGE + MOBILE SOLVE PASS
   Goals:
   - Put the home hero in its own clean section block.
   - Anchor the windshield service image on the right.
   - Keep the person and van visible on every screen by using contain-based scaling.
   - Move the fade into the right image panel so it shrinks toward the left.
   - Remove the old "100% Satisfaction Focused" trust row and replace it with compact proof pills.
   ======================================================================== */

.hero-standalone {
  padding-top: clamp(10px, 1.2vw, 18px);
}

.hero-dashboard-section {
  position: relative;
  z-index: 3;
}

.hero-contained {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(380px, .82fr) minmax(0, 1.18fr) !important;
  align-items: stretch;
  min-height: clamp(500px, 40vw, 660px) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border-radius: clamp(24px, 2vw, 34px) !important;
  border: 1px solid rgba(113,84,58,.12) !important;
  background:
    radial-gradient(circle at 4% 2%, rgba(255,196,132,.23), transparent 34%),
    linear-gradient(110deg, #fffaf3 0%, #fff4e7 48%, #2a211b 48%, #1a1612 100%) !important;
  box-shadow: var(--shadow-lg) !important;
  isolation: isolate;
}

.hero-contained::before,
.hero-contained::after {
  content: none !important;
}

.hero-contained .hero-copy {
  position: relative;
  z-index: 4;
  grid-column: 1 / 2;
  display: flex !important;
  min-height: inherit;
  padding: clamp(38px, 4vw, 68px) clamp(24px, 3vw, 54px) !important;
  flex-direction: column;
  justify-content: center;
}

.hero-contained .hero-eyebrow {
  margin-bottom: 12px;
}

.hero-contained .hero-copy h1 {
  max-width: 670px;
  font-size: clamp(42px, 4.8vw, 76px);
  line-height: .96;
}

.hero-contained .hero-lede {
  max-width: 480px;
  font-size: clamp(15px, 1vw, 18px);
}

.hero-contained .hero-actions {
  gap: clamp(12px, 1.1vw, 18px);
}

.hero-contained .hero-actions .btn-lg {
  min-height: clamp(56px, 4vw, 66px);
}

.hero-image-shell {
  position: relative;
  z-index: 2;
  grid-column: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  min-height: inherit;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 20%, rgba(255,126,38,.24), transparent 34%),
    linear-gradient(135deg, #463526, #191511 70%);
}

.hero-service-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: contain;
  object-position: center right;
  transform: scale(.995);
  filter: saturate(1.04) contrast(1.03);
}

/* Fade is anchored inside the right image panel; it shrinks on smaller screens. */
.hero-image-fade {
  position: absolute;
  inset-block: 0;
  left: 0;
  z-index: 3;
  width: clamp(70px, 10vw, 190px);
  background:
    linear-gradient(90deg, #fff4e7 0%, rgba(255,244,231,.86) 30%, rgba(255,244,231,.32) 70%, transparent 100%);
  pointer-events: none;
}

.hero-proof-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(18px, 1.5vw, 28px);
}

.hero-proof-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(113,84,58,.13);
  color: #4a3d34;
  font-size: clamp(12px, .82vw, 14px);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(50,26,9,.06);
}

/* Hide legacy screenshot/hotspot/trust fragments if they remain anywhere. */
.hero-reference-img,
.hero-reference .hero-media,
.hero-reference .hero-badge,
.hero-hotspot,
.trust-row {
  display: none !important;
}

/* Dashboard under hero: separate block, consistent spacing. */
.hero-dashboard-section .benefits-wrap {
  margin-top: clamp(16px, 1.6vw, 28px) !important;
}

.hero-dashboard-section .benefits {
  border-radius: clamp(20px, 1.5vw, 28px);
}

/* Tablet: keep right image as its own panel and scale it down cleanly. */
@media (max-width: 1100px) {
  .hero-contained {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    min-height: clamp(500px, 56vw, 620px) !important;
  }

  .hero-contained .hero-copy {
    padding: 34px 22px !important;
  }

  .hero-contained .hero-copy h1 {
    font-size: clamp(39px, 5.4vw, 58px);
  }

  .hero-image-fade {
    width: clamp(46px, 8vw, 118px);
  }
}

/* Mobile: stack the hero, keep image fully visible, and keep text clean. */
@media (max-width: 820px) {
  body {
    padding-bottom: 74px;
  }

  .hero-standalone {
    padding-top: 8px;
  }

  .hero-contained {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto;
    min-height: auto !important;
    border-radius: 28px !important;
    background: linear-gradient(180deg, #fffaf3 0%, #fff3e5 52%, #211914 52%, #17130f 100%) !important;
  }

  .hero-contained .hero-copy {
    grid-column: 1 / 2;
    min-height: auto;
    padding: clamp(30px, 8vw, 44px) 20px 22px !important;
    text-align: center;
    align-items: center;
  }

  .hero-contained .hero-eyebrow {
    text-align: center;
  }

  .hero-contained .hero-copy h1 {
    max-width: 470px;
    font-size: clamp(38px, 10.4vw, 54px);
    text-align: center;
  }

  .hero-contained .hero-lede {
    max-width: 390px;
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.55;
    text-align: center;
  }

  .hero-contained .hero-actions {
    width: min(100%, 370px);
    margin-top: 22px;
  }

  .hero-contained .hero-actions .btn-lg {
    width: 100%;
    min-height: 58px;
    justify-content: center;
  }

  .hero-proof-pills {
    justify-content: center;
    max-width: 380px;
    margin-top: 18px;
  }

  .hero-proof-pills span {
    min-height: 34px;
  }

  .hero-image-shell {
    grid-column: 1 / 2;
    min-height: clamp(260px, 56vw, 410px);
    padding: 12px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,.08);
    background:
      radial-gradient(circle at 76% 18%, rgba(255,126,38,.25), transparent 34%),
      linear-gradient(135deg, #3d2e23, #17130f 72%);
  }

  .hero-service-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .hero-image-fade {
    display: none;
  }

  /* Dashboard under hero: centered, strong mobile readability. */
  .hero-dashboard-section .benefits-wrap {
    margin-top: 14px !important;
  }

  .hero-dashboard-section .benefits {
    grid-template-columns: 1fr !important;
    border-radius: 24px;
  }

  .hero-dashboard-section .benefit {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 128px;
    padding: 22px 18px !important;
    text-align: center;
  }

  .hero-dashboard-section .benefit:not(:first-child)::before,
  .hero-dashboard-section .benefit::before {
    display: none !important;
  }

  .hero-dashboard-section .benefit .icon-big,
  .hero-dashboard-section .icon-big {
    width: 40px;
    height: 40px;
  }

  .hero-dashboard-section .benefit p {
    max-width: 270px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.35;
  }

  .hero-dashboard-section .benefit strong {
    margin-top: 5px;
    font-size: 13px;
  }
}

/* Small phones: protect the image and avoid cramped hero copy. */
@media (max-width: 480px) {
  .hero-contained .hero-copy {
    padding-inline: 18px !important;
  }

  .hero-contained .hero-copy h1 {
    font-size: clamp(36px, 10.8vw, 43px);
  }

  .hero-contained .hero-lede {
    max-width: 320px;
  }

  .hero-proof-pills {
    gap: 8px;
  }

  .hero-proof-pills span {
    font-size: 12px;
    padding: 7px 10px;
  }

  .hero-image-shell {
    min-height: clamp(235px, 62vw, 340px);
    padding: 10px;
  }

  .hero-dashboard-section .benefit {
    min-height: 118px;
  }
}

/* Ultra-narrow safety. */
@media (max-width: 380px) {
  .hero-contained .hero-copy h1 {
    font-size: 35px;
  }

  .hero-contained .hero-actions .btn-lg {
    font-size: 14px;
  }
}

/* ========================================================================
   v1.2.14 CONTINUOUS REVIEW CAROUSEL PASS
   - Review carousel now auto-scrolls continuously.
   - JS duplicates the available verified review cards to create a seamless loop.
   - Desktop side arrows still work.
   - Mobile remains swipe-first and high quality.
   ======================================================================== */

.review-carousel-stage {
  position: relative;
  isolation: isolate;
}

.review-carousel-shell {
  overflow: hidden;
  margin-inline: clamp(20px, 2vw, 38px);
  padding-block: 4px 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
}

.review-carousel-track {
  display: flex !important;
  grid-auto-flow: initial !important;
  grid-auto-columns: initial !important;
  gap: clamp(16px, 1.25vw, 24px);
  margin: 0;
  padding: 6px 2px 16px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.review-carousel-slide {
  flex: 0 0 clamp(340px, 30vw, 460px);
  scroll-snap-align: start;
  min-width: 0;
}

.review-carousel-slide[data-clone="true"] .google-review-card {
  pointer-events: auto;
}

.review-nav-btn {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: clamp(46px, 3.2vw, 58px);
  height: clamp(46px, 3.2vw, 58px);
  border: 1px solid rgba(113,84,58,.20);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #34261e;
  font-size: clamp(28px, 2.2vw, 38px);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(50,26,9,.18);
  transform: translateY(-50%);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.review-nav-btn--prev {
  left: 0;
}

.review-nav-btn--next {
  right: 0;
}

.review-nav-btn:hover,
.review-nav-btn:focus-visible {
  background: #fff;
  box-shadow: 0 20px 42px rgba(50,26,9,.24);
}

.google-review-card {
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .review-carousel-track {
    scroll-behavior: auto;
  }
}

@media (max-width: 820px) {
  .review-carousel-shell {
    margin-inline: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .review-nav-btn {
    display: none !important;
  }

  .review-carousel-track {
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
  }

  .review-carousel-slide {
    flex-basis: min(86vw, 390px);
  }
}

@media (max-width: 480px) {
  .review-carousel-slide {
    flex-basis: min(88vw, 360px);
  }
}

/* ========================================================================
   v1.2.15 VIN QUOTE + CLEAN SECTION HERO PASS
   - Adds Enter VIN / OR vehicle lookup option.
   - Replaces odd interior-page hero fragments with cleaner section visuals.
   - Makes page hero visual cropping more predictable.
   ======================================================================== */

.vin-or-block {
  display: grid;
  gap: 10px;
}

.vin-label .field {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
}

.vin-or-divider {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 24px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
}

.vin-or-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(113,84,58,.16);
}

.vin-or-divider span {
  position: relative;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff8ef;
  border: 1px solid rgba(113,84,58,.12);
}

.quote-card .vin-or-divider span {
  background: #fffaf4;
}

.field.is-invalid,
.select.is-invalid,
textarea.is-invalid {
  border-color: rgba(180,60,18,.76) !important;
  box-shadow: 0 0 0 4px rgba(180,60,18,.10);
}

.page-hero-card {
  background:
    radial-gradient(circle at 7% 10%, rgba(255,255,255,.95), rgba(255,248,238,.80) 34%, rgba(255,248,238,.42) 60%, transparent 82%),
    linear-gradient(115deg, rgba(255,250,243,.98) 0 47%, rgba(30,24,19,.96) 47% 100%) !important;
}

.page-hero-visual {
  background: #1d1712;
}

.page-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  transform: none !important;
  filter: saturate(1.03) contrast(1.02);
}

.page-hero-visual::before {
  background:
    linear-gradient(90deg, rgba(255,248,238,.62) 0%, rgba(255,248,238,.24) 16%, rgba(255,248,238,.04) 34%, transparent 56%),
    radial-gradient(circle at 86% 18%, rgba(255,126,38,.16), transparent 34%) !important;
}

.page-hero-card--about .page-hero-visual img,
.page-hero-card--services .page-hero-visual img {
  object-position: 60% center;
}

.page-hero-card--calibration .page-hero-visual img {
  object-position: 62% center;
}

.page-hero-card--quote .page-hero-visual img,
.page-hero-card--contact .page-hero-visual img,
.page-hero-card--locations .page-hero-visual img,
.page-hero-card--reviews .page-hero-visual img {
  object-position: 58% center;
}

/* Keep the new hero images as supportive art on mobile, not oversized fragments. */
@media (max-width: 1180px) {
  .page-hero-visual {
    min-height: clamp(260px, 42vw, 420px);
  }
}

@media (max-width: 820px) {
  .vin-or-block {
    gap: 12px;
  }

  .vin-or-divider {
    min-height: 30px;
  }

  .page-hero-visual {
    min-height: 250px;
  }

  .page-hero-visual::before {
    background:
      linear-gradient(180deg, rgba(255,248,238,.08), transparent 34%),
      radial-gradient(circle at 80% 20%, rgba(255,126,38,.16), transparent 34%) !important;
  }
}

@media (max-width: 480px) {
  .page-hero-visual {
    min-height: 220px;
  }

  .vin-label .field {
    font-size: 13px;
    letter-spacing: .05em;
  }
}

/* ========================================================================
   v1.2.16 TRUE LOOPING REVIEW MARQUEE
   - Replaces scroll-based carousel with a real duplicated marquee loop.
   - No visible scrollbar.
   - No scrollLeft reset jump.
   - Cards repeat continuously like an infinite conveyor.
   ======================================================================== */

.review-carousel-stage {
  --review-gap: clamp(16px, 1.35vw, 26px);
  --review-card-w: clamp(340px, 30vw, 470px);
  --review-duration: 72s;
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.review-carousel-shell {
  overflow: hidden !important;
  margin-inline: clamp(18px, 2vw, 42px);
  padding-block: 6px 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}

.review-carousel-rail {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: reviewMarquee var(--review-duration) linear infinite;
  transform: translate3d(0,0,0);
}

.review-carousel-rail.is-paused {
  animation-play-state: paused;
}

.review-carousel-rail.is-speeding {
  animation-duration: 18s;
}

.review-carousel-track {
  display: flex !important;
  flex: 0 0 auto;
  gap: var(--review-gap);
  margin: 0;
  padding: 6px var(--review-gap) 14px 0;
  list-style: none;
  overflow: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scroll-snap-type: none !important;
}

.review-carousel-track::-webkit-scrollbar,
.review-carousel-shell::-webkit-scrollbar,
.review-carousel-rail::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.review-carousel-slide {
  flex: 0 0 var(--review-card-w);
  min-width: 0;
  scroll-snap-align: none !important;
}

@keyframes reviewMarquee {
  from {
    transform: translate3d(0,0,0);
  }
  to {
    transform: translate3d(-50%,0,0);
  }
}

.review-nav-btn {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: clamp(46px, 3.2vw, 58px);
  height: clamp(46px, 3.2vw, 58px);
  border: 1px solid rgba(113,84,58,.20);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #34261e;
  font-size: clamp(28px, 2.2vw, 38px);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(50,26,9,.18);
  transform: translateY(-50%);
  transition: background .16s ease, box-shadow .16s ease;
}

.review-nav-btn--prev {
  left: 0;
}

.review-nav-btn--next {
  right: 0;
}

.review-nav-btn:hover,
.review-nav-btn:focus-visible {
  background: #fff;
  box-shadow: 0 20px 42px rgba(50,26,9,.24);
}

.google-review-card {
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .review-carousel-rail {
    animation: none !important;
    transform: none !important;
  }

  .review-carousel-shell {
    overflow-x: auto !important;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: none !important;
  }
}

@media (max-width: 820px) {
  .review-carousel-stage {
    --review-card-w: min(86vw, 390px);
    --review-duration: 58s;
  }

  .review-nav-btn {
    display: none !important;
  }

  .review-carousel-shell {
    margin-inline: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
}

@media (max-width: 480px) {
  .review-carousel-stage {
    --review-card-w: min(88vw, 360px);
  }
}

/* ========================================================================
   v1.2.17 TRUE CONTINUOUS REVIEW RECYCLER
   - Replaces reset-based CSS marquee with requestAnimationFrame + DOM recycling.
   - Cards are physically moved from front to back as they exit frame.
   - No scrollbar. No translate reset. No jump back.
   ======================================================================== */

.review-loop-stage {
  --review-gap: clamp(16px, 1.35vw, 26px);
  --review-card-w: clamp(340px, 30vw, 470px);
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.review-loop-shell {
  overflow: hidden !important;
  margin-inline: clamp(20px, 2vw, 42px);
  padding-block: 6px 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}

.review-loop-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: var(--review-gap);
  width: max-content;
  margin: 0;
  padding: 6px 0 14px;
  list-style: none;
  overflow: visible !important;
  transform: translate3d(0,0,0);
  will-change: transform;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scroll-snap-type: none !important;
  animation: none !important;
}

.review-loop-track::-webkit-scrollbar,
.review-loop-shell::-webkit-scrollbar,
.review-loop-stage::-webkit-scrollbar,
.review-carousel-track::-webkit-scrollbar,
.review-carousel-shell::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.review-loop-slide {
  flex: 0 0 var(--review-card-w);
  min-width: 0;
}

.review-loop-slide .google-review-card {
  height: 100%;
}

.review-loop-track:hover,
.review-loop-track:focus-within {
  will-change: auto;
}

/* Neutralize old carousel implementations so there is only one moving system. */
.review-carousel-rail,
.review-carousel-track,
.review-carousel-shell {
  animation: none !important;
  scroll-behavior: auto !important;
}

/* Side arrows remain available on desktop without controlling scrollLeft. */
.review-loop-stage .review-nav-btn {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: clamp(46px, 3.2vw, 58px);
  height: clamp(46px, 3.2vw, 58px);
  border: 1px solid rgba(113,84,58,.20);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #34261e;
  font-size: clamp(28px, 2.2vw, 38px);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(50,26,9,.18);
  transform: translateY(-50%);
}

.review-loop-stage .review-nav-btn--prev {
  left: 0;
}

.review-loop-stage .review-nav-btn--next {
  right: 0;
}

.review-loop-stage .review-nav-btn:hover,
.review-loop-stage .review-nav-btn:focus-visible {
  background: #fff;
  box-shadow: 0 20px 42px rgba(50,26,9,.24);
}

@media (prefers-reduced-motion: reduce) {
  .review-loop-shell {
    overflow-x: hidden !important;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .review-loop-track {
    transform: none !important;
  }
}

@media (max-width: 820px) {
  .review-loop-stage {
    --review-card-w: min(86vw, 390px);
  }

  .review-loop-stage .review-nav-btn {
    display: none !important;
  }

  .review-loop-shell {
    margin-inline: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
}

@media (max-width: 480px) {
  .review-loop-stage {
    --review-card-w: min(88vw, 360px);
  }
}

/* ========================================================================
   v1.2.18 HERO TRIANGLE + REVIEW ARROW CONTROL FIX
   - Removes the diagonal hero background that caused the random black triangle.
   - Keeps the hero image panel clean and rectangular.
   - Review arrows are static on hover/focus.
   - Review arrows now nudge exactly one full card via JS.
   ======================================================================== */

/* Hero black triangle fix: remove diagonal container split entirely. */
.hero-contained {
  background:
    radial-gradient(circle at 8% 8%, rgba(255,196,132,.20), transparent 34%),
    linear-gradient(180deg, #fffaf3 0%, #fff4e7 100%) !important;
}

.hero-contained::before,
.hero-contained::after,
.hero-image-shell::before,
.hero-image-shell::after {
  content: none !important;
  display: none !important;
}

.hero-image-shell {
  clip-path: none !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 74% 18%, rgba(255,126,38,.24), transparent 34%),
    linear-gradient(135deg, #463526, #191511 70%) !important;
}

.hero-service-img {
  display: block;
  background: transparent;
}

.hero-image-fade {
  bottom: 0;
  top: 0;
  height: auto;
  background:
    linear-gradient(90deg, #fff4e7 0%, rgba(255,244,231,.88) 28%, rgba(255,244,231,.36) 68%, transparent 100%) !important;
}

/* Review carousel: hard-hide every possible scrollbar surface. */
.review-loop-stage,
.review-loop-shell,
.review-loop-track,
.google-reviews-panel {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.review-loop-stage::-webkit-scrollbar,
.review-loop-shell::-webkit-scrollbar,
.review-loop-track::-webkit-scrollbar,
.google-reviews-panel::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Static review arrows: no vertical hover jump/drop. */
.review-loop-stage .review-nav-btn,
.review-loop-stage .review-nav-btn:hover,
.review-loop-stage .review-nav-btn:focus,
.review-loop-stage .review-nav-btn:focus-visible,
.review-loop-stage .review-nav-btn:active,
.review-nav-btn,
.review-nav-btn:hover,
.review-nav-btn:focus,
.review-nav-btn:focus-visible,
.review-nav-btn:active {
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

.review-loop-stage .review-nav-btn {
  transition: background .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.review-loop-stage .review-nav-btn:hover,
.review-loop-stage .review-nav-btn:focus-visible {
  border-color: rgba(239,90,21,.35);
}

/* Prevent previous carousel selectors from reintroducing movement behavior. */
.review-carousel-controls {
  display: none !important;
}

.review-carousel-rail,
.review-carousel-track {
  animation: none !important;
  scroll-behavior: auto !important;
}

/* Mobile keeps arrows hidden and the hero image panel clean. */
@media (max-width: 820px) {
  .hero-contained {
    background: linear-gradient(180deg, #fffaf3 0%, #fff3e5 52%, #211914 52%, #17130f 100%) !important;
  }

  .hero-image-fade {
    display: none !important;
  }

  .review-loop-stage .review-nav-btn,
  .review-nav-btn {
    display: none !important;
  }
}

/* ========================================================================
   v1.2.19 NON-HOME HERO CLEANUP PASS
   Scope: interior page hero sections only. Home hero intentionally untouched.
   - Removes the gray/diagonal triangle from every non-home hero.
   - Replaces man/photo-based hero art with section-specific graphic visuals.
   - Keeps the copy readable and the right-side visuals clean.
   ======================================================================== */

.page-hero-card,
.page-hero-card.page-hero-card--services,
.page-hero-card.page-hero-card--calibration,
.page-hero-card.page-hero-card--locations,
.page-hero-card.page-hero-card--about,
.page-hero-card.page-hero-card--reviews,
.page-hero-card.page-hero-card--contact,
.page-hero-card.page-hero-card--quote {
  position: relative;
  overflow: hidden !important;
  display: grid;
  grid-template-columns: minmax(410px, .9fr) minmax(0, 1.1fr);
  background:
    radial-gradient(circle at 5% 8%, rgba(255,255,255,.90), rgba(255,248,238,.82) 35%, rgba(255,248,238,.58) 58%, rgba(255,248,238,.28) 78%, transparent 100%),
    linear-gradient(90deg, #fffaf3 0%, #fff6ec 47%, #221a14 47%, #18130f 100%) !important;
  clip-path: none !important;
  isolation: isolate;
}

/* Kill all old diagonal/fade pseudo-elements that created the gray triangle. */
.page-hero-card::before,
.page-hero-card::after,
.page-hero-visual::before,
.page-hero-visual::after {
  content: none !important;
  display: none !important;
}

.page-hero-copy {
  position: relative;
  z-index: 3;
}

.page-hero-visual {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden !important;
  background: #1f1812 !important;
  clip-path: none !important;
}

.page-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center right;
  transform: none !important;
  filter: saturate(1.02) contrast(1.02);
}

/* Soft straight fade between copy and image, no angled triangle. */
.page-hero-visual {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 100%);
}

/* Section-specific visual focus. */
.page-hero-card--services .page-hero-visual img { object-position: 58% center; }
.page-hero-card--calibration .page-hero-visual img { object-position: 60% center; }
.page-hero-card--locations .page-hero-visual img { object-position: 58% center; }
.page-hero-card--about .page-hero-visual img { object-position: 58% center; }
.page-hero-card--reviews .page-hero-visual img { object-position: 58% center; }
.page-hero-card--contact .page-hero-visual img { object-position: 58% center; }
.page-hero-card--quote .page-hero-visual img { object-position: 58% center; }

@media (max-width: 1180px) {
  .page-hero-card,
  .page-hero-card.page-hero-card--services,
  .page-hero-card.page-hero-card--calibration,
  .page-hero-card.page-hero-card--locations,
  .page-hero-card.page-hero-card--about,
  .page-hero-card.page-hero-card--reviews,
  .page-hero-card.page-hero-card--contact,
  .page-hero-card.page-hero-card--quote {
    grid-template-columns: 1fr;
    background: linear-gradient(180deg, #fffaf3 0%, #fff6ec 50%, #211914 50%, #18130f 100%) !important;
  }

  .page-hero-visual {
    min-height: clamp(260px, 42vw, 430px);
    order: 2;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .page-hero-copy {
    order: 1;
  }
}

@media (max-width: 820px) {
  .page-hero-card {
    border-radius: 26px;
  }

  .page-hero-copy {
    text-align: center;
  }

  .page-hero-copy .eyebrow {
    text-align: center;
  }

  .page-hero-copy > div[style*="margin-top"] {
    justify-content: center;
  }

  .page-hero-visual {
    min-height: 245px;
  }
}

@media (max-width: 480px) {
  .page-hero-visual {
    min-height: 220px;
  }
}

/* ========================================================================
   v1.2.20 RIGHT-ANCHORED NON-HOME HERO PASS
   Scope: non-home hero sections only. Homepage is intentionally untouched.
   - Right-side hero art is now anchored to the right side of the section.
   - The gray center column is removed.
   - The fade is rebuilt like the home hero: cream-to-transparent from copy into image.
   - Hero images are page-specific graphic visuals, not the repeated technician photo.
   ======================================================================== */

.page-hero-card,
.page-hero-card.page-hero-card--services,
.page-hero-card.page-hero-card--calibration,
.page-hero-card.page-hero-card--locations,
.page-hero-card.page-hero-card--about,
.page-hero-card.page-hero-card--reviews,
.page-hero-card.page-hero-card--contact,
.page-hero-card.page-hero-card--quote {
  position: relative;
  overflow: hidden !important;
  display: grid;
  grid-template-columns: minmax(410px, .92fr) minmax(0, 1.08fr);
  background:
    radial-gradient(circle at 7% 10%, rgba(255,255,255,.94), rgba(255,248,238,.82) 38%, rgba(255,248,238,.62) 62%, rgba(255,248,238,.28) 82%, transparent 100%),
    linear-gradient(90deg, #fffaf3 0%, #fff6ec 47%, #211914 47%, #18130f 100%) !important;
  clip-path: none !important;
  isolation: isolate;
}

/* Remove every old diagonal/mask artifact that caused the gray triangle/center block. */
.page-hero-card::before,
.page-hero-card::after,
.page-hero-visual::after {
  content: none !important;
  display: none !important;
}

.page-hero-copy {
  position: relative;
  z-index: 4;
}

/* Right visual panel is a real right-anchored image panel, not a masked crop. */
.page-hero-visual {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
  background: #1f1812 !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.page-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: right center;
  transform: none !important;
  filter: saturate(1.02) contrast(1.02);
}

/* Home-style fade: anchored on the left edge of the visual panel and fading into the image. */
.page-hero-visual::before {
  content: '';
  display: block !important;
  position: absolute;
  inset-block: 0;
  left: 0;
  z-index: 2;
  width: clamp(130px, 16vw, 280px);
  pointer-events: none;
  background:
    radial-gradient(ellipse 440px 380px at 0% 50%, rgba(255,250,243,.96) 0 24%, rgba(255,250,243,.70) 45%, rgba(255,250,243,.28) 66%, transparent 100%),
    linear-gradient(90deg, #fff6ec 0%, rgba(255,246,236,.86) 30%, rgba(255,246,236,.34) 68%, transparent 100%);
}

/* Section-specific object focus. */
.page-hero-card--services .page-hero-visual img { object-position: right center; }
.page-hero-card--calibration .page-hero-visual img { object-position: center center; }
.page-hero-card--locations .page-hero-visual img { object-position: center center; }
.page-hero-card--about .page-hero-visual img { object-position: center center; }
.page-hero-card--reviews .page-hero-visual img { object-position: center center; }
.page-hero-card--contact .page-hero-visual img { object-position: center center; }
.page-hero-card--quote .page-hero-visual img { object-position: center center; }

@media (max-width: 1180px) {
  .page-hero-card,
  .page-hero-card.page-hero-card--services,
  .page-hero-card.page-hero-card--calibration,
  .page-hero-card.page-hero-card--locations,
  .page-hero-card.page-hero-card--about,
  .page-hero-card.page-hero-card--reviews,
  .page-hero-card.page-hero-card--contact,
  .page-hero-card.page-hero-card--quote {
    grid-template-columns: 1fr;
    background: linear-gradient(180deg, #fffaf3 0%, #fff6ec 50%, #211914 50%, #18130f 100%) !important;
  }

  .page-hero-copy {
    order: 1;
  }

  .page-hero-visual {
    order: 2;
    min-height: clamp(280px, 44vw, 440px);
  }

  .page-hero-visual::before {
    display: none !important;
  }
}

@media (max-width: 820px) {
  .page-hero-card {
    border-radius: 26px;
  }

  .page-hero-copy {
    text-align: center;
  }

  .page-hero-copy .eyebrow {
    text-align: center;
  }

  .page-hero-copy > div[style*="margin-top"] {
    justify-content: center;
  }

  .page-hero-visual {
    min-height: 250px;
  }
}

@media (max-width: 480px) {
  .page-hero-visual {
    min-height: 220px;
  }
}

/* ========================================================================
   v1.2.21 NON-HOME HERO WHITE FADE + REVIEW FOOTER CLEANUP
   Scope: non-home hero sections only. Homepage is intentionally untouched.
   - Adds stronger home-style white/cream fade into every interior hero image.
   - Keeps the hero art anchored on the right side.
   - Removes public-facing instruction copy below reviews.
   ======================================================================== */

.page-hero-card {
  background:
    radial-gradient(circle at 7% 10%, rgba(255,255,255,.98), rgba(255,250,243,.90) 38%, rgba(255,248,238,.68) 62%, rgba(255,248,238,.32) 82%, transparent 100%),
    linear-gradient(90deg, #fffaf3 0%, #fff7ee 48%, #211914 48%, #18130f 100%) !important;
}

.page-hero-visual {
  position: relative;
  background: #1f1812 !important;
  overflow: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.page-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Stronger white fade, modeled after the homepage hero treatment. */
.page-hero-visual::before {
  content: '';
  display: block !important;
  position: absolute;
  inset-block: 0;
  left: 0;
  z-index: 3;
  width: clamp(220px, 24vw, 520px);
  pointer-events: none;
  background:
    radial-gradient(ellipse 680px 560px at 0% 50%, rgba(255,250,243,.99) 0 24%, rgba(255,250,243,.90) 42%, rgba(255,250,243,.58) 60%, rgba(255,250,243,.24) 76%, transparent 100%),
    linear-gradient(90deg, #fffaf3 0%, rgba(255,250,243,.96) 22%, rgba(255,250,243,.72) 45%, rgba(255,250,243,.34) 70%, transparent 100%);
}

/* Disable prior triangle/fade fragments while preserving the single white fade above. */
.page-hero-card::before,
.page-hero-card::after,
.page-hero-visual::after {
  content: none !important;
  display: none !important;
}

/* Keep review footer clean now that helper instructions are removed. */
.google-reviews-footer {
  justify-content: flex-start;
}

.google-reviews-footer > p {
  display: none !important;
}

/* Tablet/mobile: stack normally; the fade is not needed once the image sits under the copy. */
@media (max-width: 1180px) {
  .page-hero-visual::before {
    display: none !important;
  }
}

@media (max-width: 820px) {
  .page-hero-card {
    background: linear-gradient(180deg, #fffaf3 0%, #fff7ee 50%, #211914 50%, #18130f 100%) !important;
  }
}

/* ========================================================================
   v1.2.22 IMAGE-OVERLAY HERO GRADIENT + REVIEW LINK REPAIR
   Scope: non-home hero sections only. Homepage is intentionally untouched.
   - The fade is now built directly over each hero image panel.
   - Review cards and Read More button now point to Google Reviews, not the old 503 site.
   ======================================================================== */

.page-hero-visual {
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
  background: #1f1812 !important;
}

.page-hero-visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: right center;
  transform: none !important;
}

/* Primary white fade: this is layered over the image itself. */
.page-hero-visual::before {
  content: '';
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 760px 560px at 0% 50%, rgba(255,250,243,.99) 0 22%, rgba(255,250,243,.90) 42%, rgba(255,250,243,.58) 62%, rgba(255,250,243,.24) 78%, transparent 100%),
    linear-gradient(90deg, #fffaf3 0%, rgba(255,250,243,.96) 20%, rgba(255,250,243,.76) 42%, rgba(255,250,243,.40) 66%, rgba(255,250,243,.12) 84%, transparent 100%);
}

/* Secondary image polish: subtle warm/dark vignette over the image, also overlaid. */
.page-hero-visual::after {
  content: '';
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 86% 14%, rgba(255,126,38,.16), transparent 34%),
    linear-gradient(90deg, transparent 0%, transparent 58%, rgba(20,14,10,.18) 100%);
}

/* The page hero container should not create the fade. The image panel owns it. */
.page-hero-card {
  background:
    radial-gradient(circle at 7% 10%, rgba(255,255,255,.98), rgba(255,250,243,.90) 38%, rgba(255,248,238,.68) 62%, rgba(255,248,238,.30) 82%, transparent 100%),
    linear-gradient(90deg, #fffaf3 0%, #fff7ee 48%, #211914 48%, #18130f 100%) !important;
}

.page-hero-card::before,
.page-hero-card::after {
  content: none !important;
  display: none !important;
}

/* Keep the fade responsive and homepage-like on medium desktops. */
@media (max-width: 1320px) {
  .page-hero-visual::before {
    background:
      radial-gradient(ellipse 640px 520px at 0% 50%, rgba(255,250,243,.99) 0 20%, rgba(255,250,243,.88) 40%, rgba(255,250,243,.56) 62%, rgba(255,250,243,.22) 78%, transparent 100%),
      linear-gradient(90deg, #fffaf3 0%, rgba(255,250,243,.94) 18%, rgba(255,250,243,.72) 40%, rgba(255,250,243,.34) 65%, transparent 100%);
  }
}

/* Once stacked, the image is below the copy, so the desktop side fade is removed. */
@media (max-width: 1180px) {
  .page-hero-visual::before {
    display: none !important;
  }

  .page-hero-visual::after {
    background:
      radial-gradient(circle at 82% 18%, rgba(255,126,38,.14), transparent 34%),
      linear-gradient(180deg, rgba(255,250,243,.04), transparent 30%, rgba(20,14,10,.14) 100%);
  }
}

/* ========================================================================
   v1.2.23 FOOTER PADDING + SEAMLESS NON-HOME HERO FADE
   Scope:
   - Footer spacing and polish.
   - Non-home hero sections only. Homepage remains untouched.
   Fixes:
   - Footer columns no longer sit flush against the left/right edge.
   - Removes the visible hard vertical seam between copy and hero image.
   ======================================================================== */

/* Footer spacing pass */
.footer-inner {
  width: min(var(--container), calc(100% - clamp(24px, 5vw, 76px))) !important;
  padding: clamp(34px, 3vw, 50px) clamp(20px, 2.4vw, 42px) clamp(22px, 2vw, 32px) !important;
  box-sizing: border-box;
}

.footer-grid {
  gap: clamp(22px, 2.2vw, 42px) !important;
}

.footer-grid > div {
  min-width: 0;
  padding-inline: clamp(4px, .7vw, 14px);
}

.footer-grid > div:first-child {
  padding-left: 0;
}

.footer-grid > div:last-child {
  padding-right: 0;
}

.footer-logo {
  margin-left: 0;
}

.footer-bottom {
  padding-inline: clamp(4px, .7vw, 14px);
}

/* Non-home hero seam fix: make the visual panel slide under the copy panel so the fade covers the join. */
@media (min-width: 1181px) {
  .page-hero-card {
    grid-template-columns: minmax(430px, .96fr) minmax(0, 1.04fr) !important;
    background:
      radial-gradient(circle at 7% 10%, rgba(255,255,255,.98), rgba(255,250,243,.92) 40%, rgba(255,248,238,.76) 64%, rgba(255,248,238,.46) 82%, rgba(255,248,238,.16) 100%),
      linear-gradient(90deg, #fffaf3 0%, #fff7ee 100%) !important;
  }

  .page-hero-copy {
    position: relative;
    z-index: 5;
    background:
      radial-gradient(circle at 0% 20%, rgba(255,255,255,.62), transparent 55%),
      linear-gradient(90deg, rgba(255,250,243,.98), rgba(255,250,243,.92) 68%, rgba(255,250,243,.00) 100%);
  }

  .page-hero-visual {
    position: relative;
    z-index: 1;
    margin-left: clamp(-340px, -18vw, -210px);
    width: calc(100% + clamp(210px, 18vw, 340px));
    background: transparent !important;
  }

  .page-hero-visual img {
    object-position: right center !important;
  }

  /* Stronger gradient over the image and across the overlap zone. */
  .page-hero-visual::before {
    content: '';
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
      radial-gradient(ellipse 860px 640px at 0% 50%, rgba(255,250,243,1) 0 22%, rgba(255,250,243,.96) 39%, rgba(255,250,243,.78) 55%, rgba(255,250,243,.46) 72%, rgba(255,250,243,.16) 88%, transparent 100%),
      linear-gradient(90deg, #fffaf3 0%, rgba(255,250,243,.99) 20%, rgba(255,250,243,.92) 38%, rgba(255,250,243,.66) 56%, rgba(255,250,243,.30) 75%, transparent 100%);
  }

  .page-hero-visual::after {
    content: '';
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      radial-gradient(circle at 86% 14%, rgba(255,126,38,.14), transparent 34%),
      linear-gradient(90deg, transparent 0%, transparent 62%, rgba(20,14,10,.18) 100%);
  }
}

/* Keep tablet/mobile stacked and clean. */
@media (max-width: 1180px) {
  .page-hero-visual {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .page-hero-copy {
    background: transparent !important;
  }

  .footer-inner {
    width: min(var(--container), calc(100% - 28px)) !important;
    padding-inline: clamp(18px, 4vw, 30px) !important;
  }

  .footer-grid > div,
  .footer-bottom {
    padding-inline: 0;
  }
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    text-align: left;
  }

  .footer-inner {
    border-radius: 0;
  }

  .footer-bottom {
    align-items: flex-start;
    justify-content: flex-start;
  }
}

/* ========================================================================
   v1.2.24 HIGH-OPACITY NON-HOME HERO FADE
   Scope: non-home hero sections only. Homepage remains untouched.
   Fix:
   - Increases the hero fade opacity and coverage so the image/copy seam is
     no longer visible as a hard vertical line.
   ======================================================================== */

@media (min-width: 1181px) {
  .page-hero-card {
    position: relative;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 8% 12%, rgba(255,255,255,1), rgba(255,250,243,.98) 38%, rgba(255,248,238,.90) 62%, rgba(255,248,238,.68) 80%, rgba(255,248,238,.36) 100%),
      linear-gradient(90deg, #fffaf3 0%, #fff7ee 100%) !important;
  }

  /* Full-card veil above the image but below live copy. This kills the seam. */
  .page-hero-card::before {
    content: '';
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
      radial-gradient(ellipse 980px 720px at 22% 50%, rgba(255,250,243,1) 0 32%, rgba(255,250,243,.98) 43%, rgba(255,250,243,.88) 53%, rgba(255,250,243,.62) 64%, rgba(255,250,243,.30) 76%, transparent 88%),
      linear-gradient(90deg, #fffaf3 0%, #fffaf3 32%, rgba(255,250,243,.99) 42%, rgba(255,250,243,.90) 50%, rgba(255,250,243,.64) 60%, rgba(255,250,243,.32) 70%, transparent 84%);
  }

  .page-hero-card::after {
    content: '';
    display: block !important;
    position: absolute;
    inset-block: 0;
    left: 0;
    width: clamp(520px, 49vw, 880px);
    z-index: 3;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(255,250,243,1) 0%, rgba(255,250,243,1) 42%, rgba(255,250,243,.96) 58%, rgba(255,250,243,.58) 78%, transparent 100%);
  }

  .page-hero-copy {
    position: relative;
    z-index: 6 !important;
    background:
      radial-gradient(circle at 0% 20%, rgba(255,255,255,.80), transparent 56%),
      linear-gradient(90deg, rgba(255,250,243,1), rgba(255,250,243,.98) 70%, rgba(255,250,243,.00) 100%) !important;
  }

  .page-hero-visual {
    position: relative;
    z-index: 1 !important;
    margin-left: clamp(-460px, -24vw, -300px) !important;
    width: calc(100% + clamp(300px, 24vw, 460px)) !important;
  }

  /* Image-panel fade now starts fully opaque and reaches farther right. */
  .page-hero-visual::before {
    content: '';
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
      radial-gradient(ellipse 960px 680px at 0% 50%, rgba(255,250,243,1) 0 34%, rgba(255,250,243,.98) 47%, rgba(255,250,243,.82) 60%, rgba(255,250,243,.50) 73%, rgba(255,250,243,.20) 84%, transparent 96%),
      linear-gradient(90deg, #fffaf3 0%, rgba(255,250,243,1) 34%, rgba(255,250,243,.96) 50%, rgba(255,250,243,.76) 64%, rgba(255,250,243,.42) 78%, rgba(255,250,243,.12) 90%, transparent 100%) !important;
  }

  .page-hero-visual::after {
    content: '';
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      radial-gradient(circle at 86% 14%, rgba(255,126,38,.13), transparent 34%),
      linear-gradient(90deg, transparent 0%, transparent 64%, rgba(20,14,10,.16) 100%) !important;
  }
}

/* Stacked layouts do not need the seam-cover overlay. */
@media (max-width: 1180px) {
  .page-hero-card::before,
  .page-hero-card::after {
    display: none !important;
    content: none !important;
  }
}

/* ========================================================================
   v1.2.25 CUSTOMER-FACING REVIEW COPY + SIMPLE NAV PASS
   - Removes implementation language from the reviews section.
   - Simplifies primary navigation by removing redundant standalone links.
   - Keeps advanced pages in the package but moves the customer-facing path
     toward Home / Services / Locations / Reviews / Contact / Quote.
   ======================================================================== */

.nav-links {
  gap: clamp(22px, 2vw, 36px);
}

.footer-grid {
  grid-template-columns: 180px 1.25fr 1fr 1fr 1fr 180px !important;
}

.google-reviews-header p {
  max-width: 720px;
}

.google-reviews-footer {
  min-height: auto;
}

/* Hide accidental empty helper paragraphs in review footer after copy cleanup. */
.google-reviews-footer p:empty {
  display: none !important;
}

@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================================================
   v1.2.26 HERO PHOTO FILL + STOCK-STYLE INTERIOR HEROES
   - Home hero image now fills its panel with no top/bottom letterbox margins.
   - Non-home hero art now uses photo-based local stock-style composites.
   - Homepage layout/copy remains otherwise unchanged.
   ======================================================================== */

/* Home hero image: fill the panel instead of contain/letterboxing. */
.hero-image-shell {
  padding: 0 !important;
  background: #1c1510 !important;
}

.hero-service-img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover !important;
  object-position: center right !important;
  transform: scale(1.035) !important;
  display: block;
}

/* Keep the home fade over the scaled image. */
.hero-image-fade {
  z-index: 5 !important;
}

/* Non-home pages: treat the right hero assets like real photo backgrounds. */
.page-hero-visual {
  background: #1c1510 !important;
}

.page-hero-visual img {
  object-fit: cover !important;
  object-position: right center !important;
  filter: saturate(1.04) contrast(1.03) !important;
}

/* Strong photo fade over the image itself to avoid hard panels. */
@media (min-width: 1181px) {
  .page-hero-visual::before {
    background:
      radial-gradient(ellipse 980px 700px at 0% 50%, rgba(255,250,243,1) 0 31%, rgba(255,250,243,.98) 44%, rgba(255,250,243,.82) 59%, rgba(255,250,243,.50) 72%, rgba(255,250,243,.20) 86%, transparent 98%),
      linear-gradient(90deg, #fffaf3 0%, rgba(255,250,243,1) 34%, rgba(255,250,243,.94) 50%, rgba(255,250,243,.70) 64%, rgba(255,250,243,.38) 78%, rgba(255,250,243,.10) 92%, transparent 100%) !important;
  }
}

@media (max-width: 820px) {
  .hero-service-img {
    object-position: center center !important;
    transform: scale(1.02) !important;
  }

  .hero-image-shell {
    padding: 0 !important;
  }
}

/* ========================================================================
   v1.2.27 UNIQUE HERO IMAGE PASS
   - Every non-home page now uses a different hero visual.
   - Locations and Contact no longer reuse the homepage technician/van image.
   - Home hero image stays cover-scaled with no top/bottom letterbox margins.
   ======================================================================== */

.hero-service-img {
  object-fit: cover !important;
  object-position: center right !important;
  transform: scale(1.035) !important;
}

.page-hero-visual img {
  object-fit: cover !important;
  object-position: right center !important;
  filter: saturate(1.04) contrast(1.03) !important;
}

/* Extra protection: keep the non-home image/copy transition soft over the unique images. */
@media (min-width: 1181px) {
  .page-hero-visual::before {
    background:
      radial-gradient(ellipse 980px 700px at 0% 50%, rgba(255,250,243,1) 0 31%, rgba(255,250,243,.98) 44%, rgba(255,250,243,.82) 59%, rgba(255,250,243,.50) 72%, rgba(255,250,243,.20) 86%, transparent 98%),
      linear-gradient(90deg, #fffaf3 0%, rgba(255,250,243,1) 34%, rgba(255,250,243,.94) 50%, rgba(255,250,243,.70) 64%, rgba(255,250,243,.38) 78%, rgba(255,250,243,.10) 92%, transparent 100%) !important;
  }
}

/* ========================================================================
   v1.2.28 DESKTOP STICKY HOME QUOTE + UI POLISH
   - Home quote card sticks on desktop while the services/locations content scrolls.
   - It naturally stops before the reviews section because it is constrained by
     the home-grid parent.
   - Removes the dead-feeling empty right-column space on desktop.
   - Adds small UI polish pass for card rhythm and desktop scanability.
   ======================================================================== */

.home-grid {
  align-items: start !important;
  overflow: visible !important;
  isolation: isolate;
}

.home-grid > .left-stack {
  min-width: 0;
}

.home-grid > .home-quote-card,
.home-grid > .quote-card {
  align-self: start !important;
  z-index: 6;
}

/* Desktop sticky behavior. Parent boundary = stop before reviews. */
@media (min-width: 1181px) {
  .home-grid > .home-quote-card,
  .home-grid > aside.quote-card {
    position: sticky !important;
    top: calc(var(--header-h) + clamp(14px, 1.35vw, 26px)) !important;
    max-height: calc(100vh - var(--header-h) - clamp(28px, 3vw, 48px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    contain: none !important;
  }

  .home-grid > .home-quote-card::-webkit-scrollbar,
  .home-grid > aside.quote-card::-webkit-scrollbar {
    width: 7px;
  }

  .home-grid > .home-quote-card::-webkit-scrollbar-thumb,
  .home-grid > aside.quote-card::-webkit-scrollbar-thumb {
    background: rgba(113,84,58,.22);
    border-radius: 999px;
  }

  .home-grid > .home-quote-card::after,
  .home-grid > aside.quote-card::after {
    content: '';
    display: block;
    height: 2px;
  }

  /* More intentional desktop rhythm around the sticky column. */
  .home-grid {
    column-gap: clamp(26px, 2.2vw, 42px) !important;
  }

  .quote-card {
    box-shadow:
      0 24px 70px rgba(64,35,12,.13),
      0 1px 0 rgba(255,255,255,.74) inset;
  }
}

/* Keep tablet/mobile normal. Sticky sidebars are not good UX on small screens. */
@media (max-width: 1180px) {
  .home-grid > .home-quote-card,
  .home-grid > aside.quote-card {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Small visual cleanup from the screenshot area. */
.services-panel,
.adas-banner,
.locations-grid,
.google-reviews-panel,
.quote-card {
  scroll-margin-top: calc(var(--header-h) + 18px);
}

.service-card,
.location-card {
  min-width: 0;
}

.location-card p,
.service-card p {
  overflow-wrap: anywhere;
}

.form-actions,
.wizard-actions {
  gap: 10px;
}

/* Avoid cramped quote form rows on medium desktop widths. */
@media (min-width: 1181px) and (max-width: 1380px) {
  .quote-card {
    padding: clamp(20px, 1.7vw, 30px) !important;
  }

  .quote-card .form-row.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .quote-card .form-row.two {
    gap: 10px;
  }

  .quote-card .field,
  .quote-card .select {
    min-width: 0;
  }
}

/* ========================================================================
   v1.2.29 ROBUST HOME QUOTE STICKY FIX
   - Replaces fragile CSS-only sticky with a JS-assisted sticky slot.
   - Quote follows on desktop and stops before the review section.
   - Prevents grid-column collapse while fixed.
   ======================================================================== */

.home-quote-slot {
  position: relative;
  align-self: start;
  min-width: 0;
  width: 100%;
  z-index: 8;
}

.home-quote-slot > .home-quote-card {
  width: 100%;
  will-change: auto;
}

/* JS fixed state: quote follows viewport. */
@media (min-width: 1181px) {
  .home-grid > .home-quote-slot {
    display: block;
  }

  .home-quote-slot.is-fixed > .home-quote-card {
    position: fixed !important;
    left: var(--sticky-left) !important;
    top: var(--sticky-top) !important;
    width: var(--sticky-width) !important;
    max-height: var(--sticky-max-height) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    z-index: 20;
    contain: none !important;
    transform: translateZ(0);
  }

  /* JS bottom state: quote parks before the reviews section. */
  .home-quote-slot.is-bottom > .home-quote-card {
    position: absolute !important;
    left: 0 !important;
    top: var(--sticky-bottom-top) !important;
    width: 100% !important;
    max-height: var(--sticky-max-height) !important;
    overflow-y: auto !important;
    z-index: 10;
  }

  /* Neutralize older direct sticky selectors on the wrapped home quote. */
  .home-grid > .home-quote-slot > .home-quote-card {
    align-self: start !important;
  }

  .home-quote-slot.is-fixed > .home-quote-card::-webkit-scrollbar,
  .home-quote-slot.is-bottom > .home-quote-card::-webkit-scrollbar {
    width: 7px;
  }

  .home-quote-slot.is-fixed > .home-quote-card::-webkit-scrollbar-thumb,
  .home-quote-slot.is-bottom > .home-quote-card::-webkit-scrollbar-thumb {
    background: rgba(113,84,58,.22);
    border-radius: 999px;
  }
}

/* Tablet and mobile: keep normal stacked flow. */
@media (max-width: 1180px) {
  .home-quote-slot {
    min-height: 0 !important;
  }

  .home-quote-slot > .home-quote-card {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }
}

/* Reduce visible empty-column feel by letting the left stack breathe cleanly. */
.left-stack {
  min-width: 0;
}

.home-grid {
  overflow: visible !important;
  align-items: start !important;
}

/* Minor quote form polish from the screenshot. */
.home-quote-card .wizard-panel {
  padding-bottom: 2px;
}

.home-quote-card .wizard-actions {
  margin-top: 14px;
}

/* ========================================================================
   v1.2.34 RESTORE V1.2.29 VISUALS + FINAL FUNCTIONAL PATCH
   Visual baseline: v1.2.29.
   Functional additions only: SEO, email submission, success state,
   expanded make/model dropdowns.
   ======================================================================== */

.form-honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.quote-form.is-success > :not(.form-success):not(.form-honey):not(input[type="hidden"]) {
  display: none !important;
}

.form-success {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: clamp(22px, 2vw, 34px);
  border-radius: 24px;
  border: 1px solid rgba(32, 99, 49, .16);
  background:
    radial-gradient(circle at 90% 0%, rgba(239, 90, 21, .12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,238,.96));
  box-shadow: 0 18px 42px rgba(50, 26, 9, .10);
}

.form-success[hidden] {
  display: none !important;
}

.form-success-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 32px;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(239,90,21,.28);
}

.form-success h3,
.thank-you-card h1 {
  margin: 0;
  color: var(--ink);
  font-weight: 950;
  letter-spacing: -.04em;
}

.form-success h3 {
  font-size: clamp(28px, 2vw, 38px);
}

.form-success p,
.thank-you-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 700;
}

.form-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.thank-you-section {
  min-height: calc(100vh - var(--header-h) - 120px);
  display: grid;
  place-items: center;
  padding-block: clamp(44px, 8vw, 110px);
}

.thank-you-card {
  width: min(780px, 100%);
  padding: clamp(28px, 4vw, 56px);
  border-radius: clamp(26px, 2vw, 38px);
  border: 1px solid rgba(113,84,58,.13);
  background:
    radial-gradient(circle at 82% 8%, rgba(239,90,21,.18), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,238,.98));
  box-shadow: var(--shadow-lg);
}

.thank-you-card h1 {
  font-size: clamp(42px, 5vw, 72px);
  line-height: .98;
}

.thank-you-card .form-success-actions {
  margin-top: 22px;
}

@media (max-width: 620px) {
  .form-success,
  .thank-you-card {
    text-align: center;
    justify-items: center;
  }

  .form-success-actions {
    width: 100%;
  }

  .form-success-actions .btn {
    width: 100%;
  }
}

/* ========================================================================
   v1.2.35 REVIEW SOURCE BADGE REMOVAL
   - Removes the small customer-facing "Google Reviews" pill from review cards.
   - Keeps the actual Google review links and "Read more Google reviews" CTA.
   ======================================================================== */

.review-source,
.google-review-source,
.review-card-source,
.review-source-pill,
.source-pill,
.review-pill {
  display: none !important;
}