:root{--gold:#FFFFFF;--gold-light:#E5E5E5;--dark:#0A0A0A;--dark2:#111111;--dark3:#1A1A1A;--dark4:#222222;--steel:#8A9BAA;--steel-light:#B0C4D4;--white:#F5F2EC;--red:#E03535;--green:#2ECC71;--radius:4px;--btn-text:#0A0A0A;--border-dim:rgba(255,255,255,.06);--border-med:rgba(255,255,255,.1);--bg-hover:rgba(255,255,255,.05);--bg-muted:rgba(0,0,0,.3);--bg-footer:rgba(0,0,0,.4);--shadow-panel:0 24px 64px rgba(0,0,0,.85);--overlay-dim:rgba(0,0,0,.5);--nav-bg:rgba(10,10,10,.97);--nav-border:rgba(255,255,255,.15);--overlay-bg:rgba(0,0,0,.65);--card-hover-shadow:0 20px 60px rgba(0,0,0,.4);--shadow-card:0 2px 12px rgba(0,0,0,.3);--icon-size:20px;transition:background .3s,color .3s}
html[data-theme="light"]{--gold:#1A1A1A!important;--gold-light:#333333!important;--dark:#E8E8E8!important;--dark2:#DDDDDD!important;--dark3:#D0D0D0!important;--dark4:#C4C4C4!important;--steel:#555555!important;--steel-light:#777777!important;--white:#1A1A1A!important;--red:#1A1A1A!important;--green:#1A1A1A!important;--btn-text:#E8E8E8!important;--border-dim:rgba(0,0,0,.08)!important;--border-med:rgba(0,0,0,.16)!important;--bg-hover:rgba(0,0,0,.04)!important;--bg-muted:rgba(0,0,0,.03)!important;--bg-footer:rgba(0,0,0,.03)!important;--shadow-panel:0 24px 64px rgba(0,0,0,.12)!important;--overlay-dim:rgba(0,0,0,.18)!important;--nav-bg:rgba(232,232,232,.97)!important;--nav-border:rgba(0,0,0,.18)!important;--overlay-bg:rgba(0,0,0,.25)!important;--card-hover-shadow:0 20px 60px rgba(0,0,0,.1)!important;--shadow-card:0 2px 12px rgba(0,0,0,.08)!important}
html[data-theme="light"] body{background:#E8E8E8!important;color:#1A1A1A!important}
html[data-theme="light"] svg linearGradient#goldGrad stop:first-child{stop-color:#000000!important}
html[data-theme="light"] svg linearGradient#goldGrad stop:last-child{stop-color:#666666!important}
/* ─── LIGHT MODE FIXES ─── */
[data-theme="light"] .hero-glow{background:radial-gradient(circle,rgba(0,0,0,.18) 0%,transparent 70%)}
[data-theme="light"] .hero-grid{opacity:.08;background-image:linear-gradient(rgba(0,0,0,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.4) 1px,transparent 1px)}
[data-theme="light"] .h-stats{border-color:rgba(0,0,0,.2)}
[data-theme="light"] .h-stat{border-right-color:rgba(0,0,0,.18)}
[data-theme="light"] .h-stat-lbl{color:var(--steel-light)}
[data-theme="light"] .hero-badge{background:rgba(0,0,0,.12);border-color:rgba(0,0,0,.35);color:var(--gold)}
[data-theme="light"] .hpc-label{color:var(--steel-light)}
[data-theme="light"] .hero-phone-card{background:var(--dark2);border-color:rgba(0,0,0,.25);box-shadow:0 24px 60px rgba(0,0,0,.1)}
[data-theme="light"] .svc-price{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1)}
[data-theme="light"] .adm-nav{background:rgba(255,255,255,.97);border-bottom-color:rgba(0,0,0,.2)}
[data-theme="light"] .h-trust-badge{border-color:rgba(0,0,0,.35);color:var(--gold)}
[data-theme="light"] .h-cta-call{color:#FFF;background:var(--gold)}
[data-theme="light"] .h-cta-call:hover{background:var(--gold-light)}
[data-theme="light"] .h-cta-book{background:rgba(0,0,0,.04);color:var(--white);border-color:var(--border-med)}
[data-theme="light"] .h-cta-book:hover{border-color:var(--gold);color:var(--gold);background:rgba(0,0,0,.06)}
[data-theme="light"] .h-title .t-gold{color:var(--gold)}
[data-theme="light"] .h-sub{color:var(--steel)}
[data-theme="light"] .h-title{color:var(--white)}
[data-theme="light"] .skip-link{background:var(--gold);color:#FFF}
[data-theme="light"] footer{background:var(--dark3);border-top:1px solid var(--border-dim);color:var(--white)}
[data-theme="light"] footer .footer-desc,[data-theme="light"] footer .footer-lic-num,[data-theme="light"] footer .footer-address,[data-theme="light"] footer .footer-hours,[data-theme="light"] footer .footer-bottom,[data-theme="light"] footer .footer-bottom *{color:var(--steel)}
[data-theme="light"] footer h4{color:var(--white)}
[data-theme="light"] footer button,[data-theme="light"] footer .footer-contact-link{color:var(--steel)}
[data-theme="light"] footer button:hover,[data-theme="light"] footer .footer-contact-link:hover{color:var(--gold)}
[data-theme="light"] ::-webkit-scrollbar-track{background:#F5F5F0}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.35)}
[data-theme="light"] .hero-phone-card{box-shadow:0 32px 80px rgba(0,0,0,.08)}
[data-theme="light"] .eb-wrap{background:linear-gradient(135deg,#1a1a1a 0%,var(--dark) 50%,#1a1a1a 100%);border-color:rgba(0,0,0,.15)}
[data-theme="light"] nav{border-bottom-color:rgba(0,0,0,.15)}
[data-theme="light"] .mobile-menu{background:var(--dark2);border-left-color:rgba(0,0,0,.15)}
[data-theme="light"] .cat-card{border:1px solid rgba(0,0,0,.06)!important}
[data-theme="light"] .cf-card{border-color:rgba(0,0,0,.15)}
[data-theme="light"] .adm-table th{background:var(--dark3)}
.theme-toggle{background:none;border:1px solid rgba(255,255,255,.4);color:var(--gold);width:38px;height:38px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s;flex-shrink:0;padding:0}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,255,255,.06)}
.theme-toggle svg{width:18px;height:18px}
[data-theme="light"] .theme-toggle{border-color:rgba(0,0,0,.15)}
[data-theme="light"] .theme-toggle:hover{border-color:var(--gold);background:rgba(0,0,0,.06)}
/* Lucide icon styling */
.lci{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle}
.lci svg{width:1em;height:1em;stroke-width:1.75}
.lci-sm svg{width:16px;height:16px}.lci-md svg{width:20px;height:20px}.lci-lg svg{width:24px;height:24px}.lci-xl svg{width:32px;height:32px}.lci-2xl svg{width:44px;height:44px}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html{overflow-x:hidden}
body{background:var(--dark);color:var(--white);font-family:'DM Sans',sans-serif;overflow-x:hidden;transition:background .3s,color .3s}
nav,footer,.bk-card,.cat-card,.why-hcard,.how-step,.services-panel,.mobile-menu,section{transition:background-color .3s,border-color .3s,color .3s}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:var(--dark)}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:2px}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(255,255,255,.12)}50%{box-shadow:0 0 44px rgba(255,255,255,.32)}}
@keyframes countUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes ripple{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.4);opacity:0}}
/* ── SCROLL REVEAL SYSTEM ── */
.reveal{opacity:0;transition:opacity .55s cubic-bezier(.22,.68,0,1.2),transform .55s cubic-bezier(.22,.68,0,1.2)}
.reveal.rv-up{transform:translateY(40px)}
.reveal.rv-left{transform:translateX(-40px)}
.reveal.rv-right{transform:translateX(40px)}
.reveal.rv-scale{transform:scale(.92)}
.reveal.rv-fade{transform:none}
.reveal.in-view{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.40s}
.reveal[data-delay="6"]{transition-delay:.48s}
.reveal[data-delay="7"]{transition-delay:.56s}
.reveal[data-delay="8"]{transition-delay:.64s}
@media(prefers-reduced-motion:reduce){.reveal,.reveal.rv-up,.reveal.rv-left,.reveal.rv-right,.reveal.rv-scale,.reveal.rv-fade{opacity:1;transform:none;transition:none}}
/* ── HOME HERO ENHANCED ── */
.h-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);padding:7px 16px;border-radius:100px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-family:'DM Mono',monospace;animation:slideUp .6s ease both}
.h-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pulse 2s infinite}
.h-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(62px,12vw,120px);line-height:.88;letter-spacing:2px;margin:20px 0 6px;animation:slideUp .6s .1s ease both}
.h-title .t-gold{color:var(--gold)}
.h-sub{font-size:17px;color:var(--steel-light);line-height:1.75;max-width:520px;font-weight:300;margin:18px 0 36px;animation:slideUp .6s .2s ease both}
.h-actions{display:flex;gap:12px;flex-wrap:wrap;animation:slideUp .6s .3s ease both}
.h-cta-call{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:var(--btn-text);padding:16px 32px;border-radius:var(--radius);font-weight:700;font-size:15px;letter-spacing:.5px;border:none;cursor:pointer;transition:all .25s;text-decoration:none;white-space:nowrap}
.h-cta-call:hover{background:var(--gold-light);transform:translateY(-2px)}
.h-cta-book{display:inline-flex;align-items:center;gap:10px;background:var(--bg-hover);color:var(--white);padding:16px 28px;border-radius:var(--radius);font-weight:500;font-size:15px;border:1px solid var(--border-med);cursor:pointer;transition:all .25s;white-space:nowrap;font-family:'DM Sans',sans-serif}
.h-cta-book:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,255,255,.05)}
.h-stats{display:flex;gap:0;margin-top:48px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);overflow:hidden;max-width:420px;animation:slideUp .6s .4s ease both}
.h-stat{flex:1;padding:14px 12px;border-right:1px solid rgba(255,255,255,.1);text-align:center}
.h-stat:last-child{border-right:none}
.h-stat-num{font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--gold);line-height:1}
.h-stat-lbl{font-size:9px;color:var(--steel);text-transform:uppercase;letter-spacing:1.5px;margin-top:3px;font-family:'DM Mono',monospace}
/* Hero visual card */
.hero-visual{position:absolute;right:0;top:0;bottom:0;width:42%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:1}
.hero-phone-card{background:var(--dark3);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:28px 24px;width:260px;animation:floatCard 5s ease-in-out infinite;box-shadow:0 32px 80px rgba(0,0,0,.5);position:relative;overflow:hidden}
.hero-phone-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold));background-size:200% auto;animation:shimmer 3s linear infinite}
.hpc-icon{font-size:40px;margin-bottom:16px;display:block;text-align:center}
.hpc-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--steel);text-align:center;margin-bottom:8px}
.hpc-phone{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:2px;color:var(--gold);text-align:center;display:block}
.hpc-divider{height:1px;background:var(--bg-hover);margin:16px 0}
.hpc-row{display:flex;align-items:center;gap:10px;padding:5px 0}
.hpc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.hpc-dot.green{background:var(--gold)}.hpc-dot.gold{background:var(--gold)}.hpc-dot.blue{background:var(--white)}
.hpc-row-text{font-size:12px;color:var(--steel-light);font-weight:300}
.hpc-tag{font-size:10px;font-family:'DM Mono',monospace;color:var(--steel);margin-left:auto}
.h-float{background:var(--dark3);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;box-shadow:0 8px 32px rgba(0,0,0,.4);white-space:nowrap;width:fit-content}
.h-float-1{animation:floatCard 4s ease-in-out infinite}
.h-float-2{animation:floatCard 4s 1.8s ease-in-out infinite}
.hf-icon{font-size:18px}
/* ── TRUST BAR ENHANCED ── */
.trust-bar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--dark2);border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.tb-item{padding:26px 20px;border-right:1px solid var(--border-dim);display:flex;align-items:center;gap:14px;transition:background .25s}
.tb-item:last-child{border-right:none}
.tb-item:hover{background:rgba(255,255,255,.03)}
.tb-icon-wrap{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:all .25s}
.tb-item:hover .tb-icon-wrap{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.tb-title{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:1px;margin-bottom:3px}
.tb-desc{font-size:12px;color:var(--steel);line-height:1.5;font-weight:300}
/* ── SERVICE CATEGORIES ── */
.svc-cats{padding:80px 40px;background:var(--dark)}
.svc-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px}
.cat-card{background:var(--dark3);border:1px solid var(--border-dim);border-radius:8px;padding:36px 32px;cursor:pointer;transition:all .3s;text-align:left;border:none;width:100%;font-family:'DM Sans',sans-serif;color:var(--white);position:relative;overflow:hidden}
.cat-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s}
.cat-card.emerg::before{background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 60%)}
.cat-card.resid::before{background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 60%)}
.cat-card.comm::before{background:linear-gradient(135deg,rgba(245,242,236,.05) 0%,transparent 60%)}
.cat-card:hover::before{opacity:1}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--card-hover-shadow)}
.cat-card.emerg:hover{border:1px solid rgba(255,255,255,.3)!important}
.cat-card.resid:hover{border:1px solid rgba(255,255,255,.3)!important}
.cat-card.comm:hover{border:1px solid rgba(245,242,236,.15)!important}
.cat-icon-big{margin-bottom:18px;display:block;position:relative;z-index:1;width:56px;height:56px}
.cat-icon-big svg{width:56px;height:56px}
.cat-label-tag{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:8px;position:relative;z-index:1}
.cat-label-tag.emerg{color:var(--gold)}.cat-label-tag.resid{color:var(--gold)}.cat-label-tag.comm{color:var(--white)}
.cat-title{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:1px;margin-bottom:10px;position:relative;z-index:1}
.cat-desc{font-size:13px;color:var(--steel);line-height:1.7;font-weight:300;margin-bottom:18px;position:relative;z-index:1}
.cat-pills{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.cat-pill{font-size:11px;padding:4px 10px;border-radius:100px;font-family:'DM Mono',monospace}
.cat-pill.emerg{background:rgba(255,255,255,.1);color:var(--gold)}.cat-pill.resid{background:rgba(255,255,255,.1);color:var(--gold)}.cat-pill.comm{background:rgba(245,242,236,.06);color:var(--white)}
.cat-arrow{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;margin-top:18px;position:relative;z-index:1;transition:gap .2s;font-family:'DM Sans',sans-serif}
.cat-card:hover .cat-arrow{gap:12px}
.cat-arrow.emerg{color:var(--gold)}.cat-arrow.resid{color:var(--gold)}.cat-arrow.comm{color:var(--white)}
/* ── HOW IT WORKS ── */
.how-section{padding:80px 40px;background:var(--dark2)}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.how-grid::before{content:'';position:absolute;top:27px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),rgba(255,255,255,.3),transparent)}
.how-step{padding:0 24px;text-align:center}
.how-num{width:54px;height:54px;border-radius:50%;background:var(--dark3);border:2px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--gold);margin:0 auto 20px;position:relative;z-index:1;transition:all .3s}
.how-step:hover .how-num{background:var(--gold);color:var(--dark);border-color:var(--gold);transform:scale(1.1)}
.how-icon{font-size:26px;margin-bottom:10px;display:block}
.how-title{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:1px;margin-bottom:8px}
.how-text{font-size:12px;color:var(--steel);line-height:1.7;font-weight:300}
/* ── WHY US ── */
.why-home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.why-home-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.why-hcard{background:var(--dark3);padding:32px 28px;position:relative;overflow:hidden;transition:background .25s}
.why-hcard::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.why-hcard:hover::after{transform:scaleX(1)}.why-hcard:hover{background:var(--dark4)}
.whc-icon{font-size:34px;margin-bottom:16px;display:block}
.whc-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1px;margin-bottom:10px}
.whc-text{font-size:13px;color:var(--steel);line-height:1.75;font-weight:300}
.whc-tag{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:11px;color:var(--gold);font-family:'DM Mono',monospace;letter-spacing:1px}
/* ── EMERGENCY BANNER ── */
.eb-wrap{background:linear-gradient(135deg,#1a1400 0%,var(--dark) 50%,#1a1400 100%);border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);padding:56px 40px;text-align:center;position:relative;overflow:hidden}
.eb-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,255,255,.06) 0%,transparent 70%)}
.eb-inner{position:relative;z-index:1}
.eb-icon{font-size:48px;display:block;animation:pulse 2s infinite;margin-bottom:14px}
.eb-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(38px,7vw,78px);color:var(--white);line-height:1;margin-bottom:10px}
.eb-title span{color:var(--gold)}
.eb-sub{color:var(--steel-light);font-size:15px;margin-bottom:28px;font-weight:300}
.eb-btn{display:inline-flex;align-items:center;gap:14px;background:var(--gold);color:var(--btn-text);padding:18px 40px;border-radius:var(--radius);font-family:'Bebas Neue',sans-serif;font-size:clamp(20px,3.5vw,30px);letter-spacing:2px;text-decoration:none;transition:all .25s}
.eb-btn:hover{background:var(--gold-light);transform:translateY(-2px)}
/* ── HOME REVIEWS ── */
.rv-summary{display:flex;align-items:center;gap:16px;margin-bottom:40px}
.rv-score{font-family:'Bebas Neue',sans-serif;font-size:52px;color:var(--gold);line-height:1}
.rv-stars-lg{color:var(--gold);font-size:20px;letter-spacing:3px;margin-bottom:4px}
.rv-count{font-size:13px;color:var(--steel);font-family:'DM Mono',monospace}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rv-card{background:var(--dark3);border:1px solid var(--border-dim);border-radius:10px;padding:24px;display:flex;flex-direction:column;gap:14px;transition:transform .25s,box-shadow .25s,border-color .25s}
.rv-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.4);border-color:rgba(255,255,255,.2)}
.rv-top{display:flex;align-items:center;gap:12px}
.rv-avatar{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:14px;color:var(--gold);flex-shrink:0}
.rv-name{font-size:14px;font-weight:600;color:var(--white)}
.rv-meta{font-size:11px;color:var(--steel);font-family:'DM Mono',monospace;margin-top:2px}
.rv-stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-left:auto;flex-shrink:0}
.rv-body{font-size:13px;color:var(--steel-light);line-height:1.8;font-weight:300;flex:1;font-style:italic}
.rv-source{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--steel);font-family:'DM Mono',monospace}
@media(max-width:768px){.rv-grid{grid-template-columns:1fr}}
@media(min-width:601px) and (max-width:960px){.rv-grid{grid-template-columns:1fr 1fr}}
/* ── HOME BLOG PREVIEW ── */
.hp-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hp-blog-card{background:var(--dark3);border:1px solid var(--border-dim);border-radius:10px;padding:28px 24px;text-align:left;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s;display:flex;flex-direction:column;gap:8px;font-family:'DM Sans',sans-serif;color:var(--white);width:100%}
.hp-blog-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.4);border-color:rgba(255,255,255,.2)}
.hp-blog-card:hover .hp-blog-link{color:var(--gold-light)}
.hp-blog-icon{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:var(--gold);margin-bottom:6px;flex-shrink:0}
.hp-blog-icon svg{width:20px;height:20px}
.hp-blog-cat{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase}
.hp-blog-title{font-family:'DM Sans',sans-serif;font-size:17px;font-weight:700;letter-spacing:0;line-height:1.3;color:var(--white)}
.hp-blog-meta{font-size:11px;color:var(--steel);font-family:'DM Mono',monospace}
.hp-blog-excerpt{font-size:13px;color:var(--steel-light);line-height:1.7;font-weight:300;flex:1}
.hp-blog-link{font-size:12px;font-weight:600;color:var(--gold);margin-top:4px;transition:color .2s}
@media(max-width:768px){.hp-blog-grid{grid-template-columns:1fr}}
@media(min-width:601px) and (max-width:960px){.hp-blog-grid{grid-template-columns:1fr 1fr}}
.contact-section{padding:80px 40px;background:var(--dark2)}
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:960px}
.ci-cards{display:flex;flex-direction:column;gap:14px}
.ci-card{background:var(--dark3);border:1px solid var(--border-dim);border-radius:8px;padding:18px 20px;display:flex;align-items:center;gap:14px;transition:border-color .2s}
.ci-card:hover{border-color:rgba(255,255,255,.2)}
.ci-ico{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.ci-ico.gold{background:rgba(255,255,255,.1);color:var(--gold)}.ci-ico.green{background:rgba(255,255,255,.1);color:var(--gold)}.ci-ico.blue{background:rgba(255,255,255,.1);color:var(--gold)}.ci-ico.red{background:rgba(255,255,255,.1);color:var(--gold)}
.ci-lbl{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel);margin-bottom:3px}
.ci-val{font-size:14px;color:var(--white);font-weight:500}
.ci-val a{color:var(--gold)}
.cf-card{background:var(--dark3);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:32px}
.cf-title{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:1px;margin-bottom:6px}
.cf-sub{font-size:13px;color:var(--steel);margin-bottom:22px;font-weight:300}
/* ══════════════════════════════════════════
MOBILE OPTIMIZED — v1.9
══════════════════════════════════════════ */
/* ── MOBILE NAV ── */
@media(max-width:600px){
.services-panel{top:60px;max-height:calc(100vh - 60px)}
.panel-inner{grid-template-columns:1fr}
.panel-col{border-right:none;border-bottom:1px solid var(--border-dim);padding:14px 18px}
.panel-col:last-child{border-bottom:none}
}
/* ── MOBILE HERO ── */
@media(max-width:600px){
#hero{padding:16px 18px 32px;min-height:auto;min-height:auto;align-items:flex-start}
#hero h1{font-size:clamp(52px,14vw,70px);margin-bottom:6px}
.hero-sub{font-size:14px;margin:12px 0 20px;line-height:1.65}
.hero-visual{display:none!important}
.hero-actions{flex-direction:column;gap:10px}
.hero-actions .btn-primary,
.hero-actions .btn-secondary,
.h-cta-call,
.h-cta-book{width:100%!important;justify-content:center!important;padding:15px 20px!important}
.h-stats{max-width:100%;margin-top:24px}
.h-badge{font-size:10px;padding:6px 12px}
.h-title{font-size:clamp(58px,14vw,80px);margin:14px 0 4px}
.h-sub{font-size:14px;margin:14px 0 24px}
}
/* ── MOBILE TRUST BAR — horizontal scroll strip ── */
@media(max-width:768px){
.trust-bar{
display:flex!important;
grid-template-columns:unset!important;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
-ms-overflow-style:none;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
gap:0;
border-top:1px solid rgba(255,255,255,.1);
border-bottom:1px solid rgba(255,255,255,.1);
padding:0 4px;
}
.trust-bar::-webkit-scrollbar{display:none}
.tb-item{
flex:0 0 200px!important;
scroll-snap-align:start;
border-right:1px solid var(--border-dim)!important;
border-bottom:none!important;
flex-direction:row!important;
text-align:left!important;
padding:18px 16px!important;
gap:12px!important;
align-items:center;
}
.tb-item:last-child{border-right:none!important}
.tb-icon-wrap{width:38px;height:38px;flex-shrink:0}
.tb-title{font-size:14px}
.tb-desc{font-size:11px}
}
/* ── MOBILE SECTION PADDING ── */
@media(max-width:600px){
.svc-cats,.how-section,.eb-wrap,.contact-section{padding:48px 18px!important}
section[style*="padding:80px"]{padding:52px 18px!important}
section[style*="padding: 80px"]{padding:52px 18px!important}
.svc-cat-grid{grid-template-columns:1fr!important;gap:12px!important}
.contact-wrap{grid-template-columns:1fr!important;gap:20px!important}
section>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;gap:28px!important}
.section-title{font-size:clamp(28px,9vw,44px)!important;margin-bottom:20px!important}
.section-label{font-size:10px;letter-spacing:2px}
}
/* ── MOBILE SERVICE CARDS — full bleed, generous tap targets ── */
@media(max-width:600px){
.cat-card{
padding:20px 18px!important;
display:flex;flex-direction:row;align-items:center;gap:14px;
border-radius:8px!important;
}
.cat-icon-big{width:44px!important;height:44px!important;margin-bottom:0!important;flex-shrink:0}
.cat-icon-big svg{width:44px!important;height:44px!important}
.cat-desc{display:none}
.cat-pills{display:none}
.cat-title{font-size:18px!important;margin-bottom:2px!important}
.cat-label-tag{font-size:9px!important;margin-bottom:2px!important;padding:3px 8px!important}
.cat-arrow{margin-top:6px!important;font-size:11px!important}
.cat-arrow span{display:none}
}
/* ── MOBILE HOW IT WORKS — vertical timeline ── */
@media(max-width:600px){
.how-grid{
grid-template-columns:1fr!important;
gap:0!important;
position:relative;
}
.how-grid::before{display:none!important}
.how-step{
padding:0!important;
text-align:left!important;
display:grid;
grid-template-columns:54px 1fr;
gap:0 16px;
align-items:start;
padding-bottom:28px!important;
position:relative;
}
.how-step:last-child{padding-bottom:0!important}
.how-step::after{
content:'';position:absolute;
left:27px;top:54px;bottom:0;
width:1px;background:rgba(255,255,255,.15);
}
.how-step:last-child::after{display:none}
.how-num{margin:0!important;flex-shrink:0;grid-row:1/3}
.how-icon{display:none!important}
.how-title{font-size:17px!important;margin-bottom:6px!important;margin-top:14px}
.how-text{font-size:13px!important;line-height:1.65!important}
}
/* ── MOBILE WHY US — horizontal scroll carousel ── */
@media(max-width:600px){
.why-home-grid,.why-home-grid-4{
display:flex!important;
grid-template-columns:unset!important;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
-ms-overflow-style:none;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
gap:10px!important;
padding-bottom:8px;
margin:0 -18px;
padding-left:18px;
padding-right:18px;
}
.why-home-grid::-webkit-scrollbar,
.why-home-grid-4::-webkit-scrollbar{display:none}
.why-hcard{
flex:0 0 82vw!important;
scroll-snap-align:start;
border-radius:8px;
padding:24px 20px!important;
}
.whc-icon{font-size:28px;margin-bottom:12px}
.whc-title{font-size:18px}
}
/* ── MOBILE CONTACT CARDS — compact stack ── */
@media(max-width:600px){
.ci-cards{gap:10px!important}
.ci-card{padding:14px 16px!important}
.ci-ico{width:36px!important;height:36px!important}
.cf-card{padding:20px 18px!important}
.cf-title{font-size:20px!important}
}
/* ── MOBILE HERO PHONE SECTION ── */
@media(max-width:600px){
.hero-stats{display:none!important}
.hero-stats-mobile{display:flex}
}
/* ── MOBILE EMERGENCY BANNER ── */
@media(max-width:600px){
.eb-wrap{padding:40px 18px!important}
.eb-title{font-size:clamp(34px,10vw,56px)!important}
.eb-btn{padding:15px 28px!important;font-size:clamp(18px,5vw,24px)!important;gap:10px!important}
.eb-icon svg{width:36px!important;height:36px!important}
}
/* ── MOBILE FOOTER ── */
@media(max-width:600px){
footer{grid-template-columns:1fr!important;gap:20px!important;padding:28px 18px 20px!important}
.footer-bottom{flex-direction:column!important;gap:6px!important}
}
/* ── TABLET ── */
@media(min-width:601px) and (max-width:960px){
.services-panel{top:76px;max-height:calc(100vh - 76px)}.panel-inner{grid-template-columns:1fr}
.panel-col{border-right:none;border-bottom:1px solid var(--border-dim)}
.panel-col:last-child{border-bottom:none}
#hero{padding:16px 28px 72px}.hero-stats{display:none}
#trust{grid-template-columns:repeat(2,1fr)}
.trust-item{border-right:none;border-bottom:1px solid var(--border-dim)}
.trust-item:nth-child(odd){border-right:1px solid var(--border-dim)}
.trust-item:nth-last-child(-n+2){border-bottom:none}
#services,.pad,.pad-alt{padding:60px 28px}#cta{padding:60px 28px}
.svc-cat-grid{grid-template-columns:1fr!important}
.how-grid{grid-template-columns:repeat(2,1fr)!important}.how-grid::before{display:none}
.why-home-grid{grid-template-columns:repeat(2,1fr)!important}
.why-home-grid-4{grid-template-columns:repeat(2,1fr)!important}
.contact-wrap{grid-template-columns:1fr!important;gap:28px!important}
section>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;gap:40px!important}
footer{grid-template-columns:1fr 1fr;gap:28px;padding:32px 28px}.footer-bottom{grid-column:1/-1}
}
/* ── SKIP LINK ── */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:9999;background:var(--gold);color:var(--dark);padding:8px 16px;font-weight:700;border-radius:4px}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;overflow:visible}
[data-theme="light"] .rv-card{border-color:rgba(0,0,0,.08)}
[data-theme="light"] .rv-card:hover{border-color:rgba(0,0,0,.3)}
[data-theme="light"] .hp-blog-card{border-color:rgba(0,0,0,.06);background:var(--dark3)}
[data-theme="light"] .hp-blog-card:hover{border-color:rgba(0,0,0,.25)}
[data-theme="light"] .rv-avatar{background:rgba(0,0,0,.1)}
[data-theme="light"] .tprice-card{border-color:rgba(0,0,0,.06)}
[data-theme="light"] .hfaq-item{border-color:rgba(0,0,0,.07)}
/* NAV — two-row layout: main links + ticker */
nav{position:fixed;top:0;width:100%;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(20px);border-bottom:2px solid var(--gold);display:flex;flex-direction:column;transition:background .3s,border-color .3s;box-shadow:0 2px 16px rgba(0,0,0,.4)}
.nav-main-row{display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:76px;gap:24px}
.nav-logo{font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:5px;color:var(--gold);cursor:pointer;z-index:1100;position:relative;flex-shrink:0;background:none;border:none;font-style:italic}
.nav-logo span{color:var(--white)}
.nav-logo-stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1;gap:0;font-style:normal}
.nav-logo-top{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:6px;color:var(--gold);line-height:.9}
.nav-logo-bot{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:4px;color:var(--white);line-height:.9;opacity:.8}
.nav-links{display:flex;gap:2px;align-items:center;flex:1}
.nav-links>a,.nav-trigger{color:var(--white);font-size:13px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;transition:color .2s;white-space:nowrap;padding:8px 14px;border-radius:var(--radius);background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;display:inline-flex;align-items:center;gap:5px}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-links>a:hover,.nav-trigger:hover{color:var(--gold);background:rgba(255,255,255,.06)}
.nav-arrow{font-size:9px;transition:transform .25s;display:inline-block}
.nav-trigger.open .nav-arrow{transform:rotate(180deg)}
.nav-cta{background:var(--gold)!important;color:var(--btn-text)!important;padding:0 16px!important;border-radius:6px!important;font-weight:700!important;font-size:12px!important;letter-spacing:.8px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;white-space:nowrap!important;flex-shrink:0;border:none!important;cursor:pointer;font-family:'DM Sans',sans-serif!important;text-transform:uppercase;height:38px!important;text-decoration:none}
.nav-cta:hover{background:var(--gold-light)!important}
/* Mobile nav */
@media(max-width:600px){
.nav-main-row{padding:0 12px;height:56px;gap:8px}
.nav-logo{font-size:22px;letter-spacing:3px}
.nav-logo-top{font-size:20px;letter-spacing:5px}
.nav-logo-bot{font-size:11px;letter-spacing:3px}
.nav-links{display:none}
.hamburger{display:flex!important;width:36px;height:36px;min-width:36px}
.nav-right{gap:6px}
.nav-right .theme-toggle{width:36px;height:36px}
.nav-cta{display:inline-flex!important;height:36px!important;padding:0 12px!important;font-size:10px!important;border-radius:6px!important}
}
/* SERVICES PANEL */
.services-panel{position:fixed;top:76px;left:0;right:0;background:var(--dark2);border-bottom:1px solid rgba(255,255,255,.18);box-shadow:var(--shadow-panel);z-index:1200;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility 0s .25s;max-height:calc(100vh - 76px);display:flex;flex-direction:column}
.services-panel.open{opacity:1;visibility:visible;pointer-events:all;transform:translateY(0);transition:opacity .25s,transform .25s,visibility 0s 0s}
.panel-inner{display:grid;grid-template-columns:repeat(3,1fr);overflow-y:auto;flex:1;min-height:0}
.panel-col{padding:24px 28px;border-right:1px solid var(--border-dim)}
.panel-col:last-child{border-right:none}
.panel-col-title{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:2.5px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border-dim);display:flex;align-items:center;gap:7px;position:sticky;top:0;background:var(--dark2);padding-top:2px;z-index:2}
.panel-col-title.emergency{color:var(--gold)}.panel-col-title.residential{color:var(--gold)}.panel-col-title.commercial{color:var(--gold)}
.panel-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius);color:var(--gold);font-size:13px;font-weight:400;transition:all .15s;cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:'DM Sans',sans-serif;position:relative;z-index:3}
.panel-link:hover{color:var(--white);background:var(--bg-hover);padding-left:14px}
.pl-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.pl-text{flex:1}
.pl-arr{color:transparent;font-size:11px;transition:color .15s}
.panel-link:hover .pl-arr{color:var(--gold)}
.panel-footer{padding:12px 28px;background:var(--bg-footer);border-top:1px solid var(--border-dim);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--steel);flex-shrink:0}
.panel-footer button{color:var(--gold);background:none;border:none;cursor:pointer;font-size:12px;font-weight:700;font-family:'DM Sans',sans-serif;letter-spacing:.5px}
.panel-footer button:hover{color:var(--gold-light);text-decoration:underline}
/* Overlay sits BEHIND panel (lower z-index) */
.panel-overlay{display:none;position:fixed;inset:0;top:76px;z-index:1100;background:var(--overlay-dim);cursor:pointer}
.panel-overlay.show{display:block}
/* HAMBURGER */
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:38px;height:38px;min-width:38px;background:none;border:1px solid rgba(255,255,255,.4);cursor:pointer;z-index:1100;position:relative;padding:4px;border-radius:6px;flex-shrink:0}
.hamburger span{display:block;width:22px;height:2px;background:var(--gold);border-radius:2px;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* MOBILE DRAWER */
.mobile-overlay{display:block;position:fixed;inset:0;z-index:1050;background:var(--overlay-bg);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s;pointer-events:none}
.mobile-overlay.visible{opacity:1;pointer-events:all}
.mobile-menu{position:fixed;top:0;right:0;width:min(320px,88vw);height:100dvh;background:var(--dark2);border-left:1px solid rgba(255,255,255,.15);z-index:1090;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding-top:70px}
.mobile-menu.open{transform:translateX(0)}
.mobile-nav-links{flex:1;display:flex;flex-direction:column;overflow-y:auto}
.mob-top-link{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:52px;min-height:52px;color:var(--white);font-size:13px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;border:none;border-bottom:1px solid var(--border-dim);transition:all .2s;cursor:pointer;background:none;width:100%;text-align:left;font-family:'DM Sans',sans-serif}
.mob-top-link:hover,.mob-top-link.active{color:var(--gold);background:rgba(255,255,255,.05)}
.mob-arrow{font-size:12px;color:var(--steel);transition:transform .25s}
.mob-top-link.active .mob-arrow{transform:rotate(90deg);color:var(--gold)}
.mob-accordion{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1);background:var(--bg-muted)}
.mob-accordion.open{max-height:2000px}
.mob-accordion-inner{max-height:60vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mob-cat{padding:16px 24px 8px 24px;font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:2px;border-top:1px solid var(--border-dim);margin-top:4px;font-weight:700}
.mob-cat.emergency{color:var(--gold)}.mob-cat.residential{color:var(--gold)}.mob-cat.commercial{color:var(--gold)}
.mob-svc-btn{display:flex;align-items:center;gap:10px;padding:10px 24px 10px 32px;color:var(--gold);font-size:14px;font-weight:400;transition:all .15s;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:'DM Sans',sans-serif}
.mob-svc-btn:hover{color:var(--gold);background:rgba(255,255,255,.04)}
.mob-plain{display:flex;align-items:center;padding:0 24px;height:52px;color:var(--white);font-size:13px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;border:none;border-bottom:1px solid var(--border-dim);cursor:pointer;background:none;width:100%;font-family:'DM Sans',sans-serif}
.mob-plain:hover{color:var(--gold);background:rgba(255,255,255,.05)}
.mobile-menu-phone{padding:20px 24px;border-top:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);flex-shrink:0}
.mobile-menu-phone .phone-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--steel);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.mobile-menu-phone .phone-label::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
.mobile-menu-phone a{display:block;font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:2px;color:var(--gold);line-height:1}
.mobile-menu-phone .avail{font-size:11px;color:var(--steel);margin-top:5px;font-weight:300}
/* ── PAGE OFFSET (nav 76px + ticker 34px = 110px) ── */
#page{animation:fadeIn .3s ease}
.breadcrumb{padding-top:calc(76px + 16px)!important}
#hero{padding-top:calc(76px + 24px)!important}
.page-hero{padding-top:calc(76px + 24px)!important}
.ck-hero{padding-top:calc(76px + 24px)!important}
.blog-hero{padding-top:calc(76px + 24px)!important}
.faq-hero{padding-top:calc(76px + 24px)!important}
.bk-hero{padding-top:calc(76px + 24px)!important}
@media(max-width:600px){
/* nav 60px + ticker 30px = 90px */
.breadcrumb{padding-top:calc(60px + 12px)!important}
#hero,.page-hero,.ck-hero,.blog-hero,.faq-hero,.bk-hero{padding-top:calc(60px + 16px)!important}
}
.section-label{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(32px,5vw,64px);line-height:1;margin-bottom:40px}
.container{max-width:1200px;margin:0 auto;width:100%}
.btn-primary{background:var(--gold);color:var(--btn-text);padding:15px 28px;border-radius:var(--radius);font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:10px;transition:all .2s;border:none;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn-primary:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:0 8px 32px rgba(255,255,255,.3)}
.btn-secondary{background:transparent;color:var(--white);padding:15px 28px;border-radius:var(--radius);font-weight:500;font-size:15px;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border-med);transition:all .2s;cursor:pointer;white-space:nowrap}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold)}
.field{width:100%;background:var(--dark4);border:1px solid var(--border-dim);border-radius:var(--radius);padding:14px 16px;color:var(--white);font-family:'DM Sans',sans-serif;font-size:16px;outline:none;transition:border-color .2s;-webkit-appearance:none;margin-bottom:12px}
.field:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.12)}.field::placeholder{color:var(--steel)}
/* HOME */
#hero{min-height:100svh;display:flex;align-items:center;padding:24px 40px 80px;position:relative;overflow:hidden}
.hero-grid{position:absolute;inset:0;opacity:.04;background-image:linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px);background-size:60px 60px}
.hero-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);top:50%;left:30%;transform:translate(-50%,-50%);pointer-events:none}
.hero-content{max-width:660px;position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);padding:6px 14px;border-radius:100px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:24px;font-family:'DM Mono',monospace}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;flex-shrink:0}
#hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(58px,11vw,110px);line-height:.92;letter-spacing:2px;margin-bottom:10px}
.gold{color:var(--gold)}
.hero-sub{font-size:16px;color:var(--steel-light);line-height:1.7;margin:20px 0 36px;max-width:500px;font-weight:300}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{position:absolute;right:40px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:16px;z-index:2}
.stat-card{background:var(--dark3);border:1px solid rgba(255,255,255,.12);padding:18px 24px;border-radius:var(--radius);text-align:center;animation:floatCard 4s ease-in-out infinite}
.stat-card:nth-child(2){animation-delay:1.3s}.stat-card:nth-child(3){animation-delay:2.6s}
.stat-num{font-family:'Bebas Neue',sans-serif;font-size:38px;color:var(--gold);line-height:1}
.stat-label{font-size:10px;color:var(--steel);text-transform:uppercase;letter-spacing:1.5px;margin-top:4px}
.hero-stats-mobile{display:none;flex-direction:row;margin-top:28px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);overflow:hidden}
.stat-m{flex:1;padding:12px 8px;text-align:center;background:var(--dark3);border-right:1px solid rgba(255,255,255,.1)}
.stat-m:last-child{border-right:none}
.stat-m .stat-num{font-size:22px}.stat-m .stat-label{font-size:9px;margin-top:2px}
#trust{display:grid;grid-template-columns:repeat(4,1fr);background:var(--dark);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.trust-item{padding:32px 20px;border-right:1px solid var(--border-dim);text-align:center}
.trust-item:last-child{border-right:none}
.trust-icon{font-size:28px;margin-bottom:12px}.trust-title{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;margin-bottom:6px}
.trust-text{color:var(--steel);font-size:12px;line-height:1.6;font-weight:300}
#services{padding:80px 40px;background:var(--dark2)}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px}
.svc-card{background:var(--dark3);padding:28px;transition:background .25s;position:relative;overflow:hidden;cursor:pointer;border:none;width:100%;text-align:left;font-family:'DM Sans',sans-serif;color:var(--white)}
.svc-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.svc-card:hover::after{transform:scaleX(1)}.svc-card:hover{background:var(--dark4)}
.svc-icon{font-size:30px;margin-bottom:14px;display:block}
.svc-name{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;margin-bottom:8px}
.svc-desc{color:var(--steel);font-size:12px;line-height:1.7;font-weight:300}
.svc-tag{display:inline-block;margin-top:12px;font-size:11px;color:var(--gold);font-family:'DM Mono',monospace;letter-spacing:1px}
#cta{padding:80px 40px;background:var(--dark);text-align:center;position:relative;overflow:hidden}
#cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,255,255,.06) 0%,transparent 70%)}
.cta-content{position:relative;z-index:1}
.cta-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(44px,8vw,90px);line-height:1;margin-bottom:16px}
.cta-sub{color:var(--steel-light);font-size:15px;margin-bottom:32px;font-weight:300}
.phone-big{font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,7vw,78px);color:var(--gold);letter-spacing:3px;display:block;margin-bottom:32px;transition:color .2s;cursor:pointer;background:none;border:none;width:100%;font-family:'Bebas Neue',sans-serif}
.phone-big:hover{color:var(--gold-light)}
.cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:880px}
.contact-form{background:var(--dark3);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:28px}
.cl{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--steel);margin-bottom:8px}
.pad{padding:80px 40px}.pad-alt{padding:80px 40px;background:var(--dark2)}
/* SERVICE DETAIL */
.breadcrumb{padding:24px 40px 0;font-family:'DM Mono',monospace;font-size:11px;color:var(--steel);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bc-btn{color:var(--steel);cursor:pointer;background:none;border:none;font-family:'DM Mono',monospace;font-size:11px;padding:0;transition:color .2s}
.bc-btn:hover{color:var(--gold)}.bc-sep{opacity:.4}
.svc-hero{padding:32px 40px 80px;position:relative;overflow:hidden;min-height:68vh;display:flex;align-items:center}
.svc-glow{position:absolute;width:500px;height:500px;border-radius:50%;top:50%;right:10%;transform:translateY(-50%);pointer-events:none;opacity:.5}
.svc-content{position:relative;z-index:2;max-width:680px}
.svc-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid;padding:5px 14px;border-radius:100px;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-family:'DM Mono',monospace;margin-bottom:20px}
.svc-hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,9vw,96px);line-height:.9;letter-spacing:2px;margin-bottom:8px}
.svc-tagline{font-size:15px;color:var(--steel-light);line-height:1.7;margin:16px 0 28px;max-width:500px;font-weight:300}
.svc-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.svc-price{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;background:rgba(0,0,0,.4);border-radius:var(--radius);padding:8px 16px;border:1px solid}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px}
.why-card{background:var(--dark3);padding:28px;border-left:3px solid transparent;transition:all .25s}
.why-card:hover{background:var(--dark4)}
.why-icon{font-size:26px;margin-bottom:12px}.why-title{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;margin-bottom:8px}
.why-text{color:var(--steel);font-size:13px;line-height:1.7;font-weight:300}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.step{padding:32px 28px;border-right:1px solid var(--border-dim)}.step:last-child{border-right:none}
.step-num{font-family:'Bebas Neue',sans-serif;font-size:52px;line-height:1;opacity:.2;margin-bottom:10px}
.step-title{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;margin-bottom:8px}
.step-text{color:var(--steel);font-size:13px;line-height:1.7;font-weight:300}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.rel-card{background:var(--dark3);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:22px 18px;cursor:pointer;transition:all .2s;border:none;width:100%;text-align:left;font-family:'DM Sans',sans-serif;color:var(--white)}
.rel-card:hover{background:var(--dark4);transform:translateY(-2px)}
.rel-icon{font-size:22px;margin-bottom:8px;display:block}
.rel-name{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:1px;margin-bottom:4px}
.rel-price{font-size:11px;color:var(--steel);font-weight:300}
/* FOOTER */
footer{background:var(--dark2);border-top:1px solid var(--border-dim);padding:56px 40px 28px;display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px}
.footer-brand{}
.footer-logo{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:3px;color:var(--gold);margin-bottom:10px;cursor:pointer;background:none;border:none;display:block;text-align:left}
.footer-desc{color:var(--steel);font-size:12px;line-height:1.7;font-weight:300;margin-bottom:14px}
.footer-license{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.footer-lic-badge{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:var(--gold);padding:3px 8px;border-radius:4px}
.footer-lic-num{font-family:'DM Mono',monospace;font-size:11px;color:var(--steel)}
.footer-trust-badges{display:flex;flex-direction:column;gap:6px}
.ftb{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--steel);font-family:'DM Mono',monospace;letter-spacing:.5px}
.ftb svg{color:var(--gold);flex-shrink:0}
.footer-col h4{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--white);margin-bottom:14px;font-family:'DM Mono',monospace}
.footer-col button{display:block;color:var(--steel);font-size:12px;margin-bottom:8px;transition:color .2s;background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;padding:0;text-align:left}
.footer-col button:hover{color:var(--gold)}
.footer-contact-link{display:flex;align-items:center;gap:8px;color:var(--steel);font-size:12px;margin-bottom:8px;text-decoration:none;transition:color .2s;font-family:'DM Sans',sans-serif}
.footer-contact-link:hover{color:var(--gold)}
.footer-contact-link svg{flex-shrink:0;color:var(--gold)}
.footer-address{display:flex;align-items:flex-start;gap:8px;color:var(--steel);font-size:12px;margin-bottom:6px;font-family:'DM Sans',sans-serif;line-height:1.5}
.footer-address svg{flex-shrink:0;color:var(--gold);margin-top:1px}
.footer-hours{font-size:11px;color:var(--gold);font-family:'DM Mono',monospace;margin-top:4px}
.footer-bottom{grid-column:1/-1;padding-top:24px;border-top:1px solid var(--border-dim);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--steel);flex-wrap:wrap;gap:10px}
.footer-bottom-links{display:flex;align-items:center;gap:20px}
@media(max-width:960px){footer{grid-template-columns:1fr 1fr;gap:32px;padding:40px 28px 24px}}
@media(max-width:600px){footer{grid-template-columns:1fr;gap:24px;padding:32px 18px 20px!important}.footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}.footer-bottom-links{flex-wrap:wrap;gap:12px}}
/* ── MOBILE BREADCRUMB + SERVICE DETAIL ── */
@media(max-width:600px){
.breadcrumb{padding:68px 18px 0;font-size:10px}
.svc-hero{padding:18px 18px 80px;min-height:auto}
.svc-hero h1{font-size:clamp(40px,12vw,62px)}
.svc-tagline{font-size:13px;margin:12px 0 20px}
.svc-actions{flex-direction:column;align-items:stretch}
.svc-actions .btn-primary,.svc-actions .btn-secondary{justify-content:center}
.steps{grid-template-columns:1fr}.step{border-right:none;border-bottom:1px solid var(--border-dim)}.step:last-child{border-bottom:none}
.contact-grid{grid-template-columns:1fr;gap:24px}.contact-form{padding:18px}
#services,.pad,.pad-alt{padding:48px 18px}.section-title{font-size:clamp(26px,9vw,42px);margin-bottom:20px}
.services-grid{grid-template-columns:1fr}
#cta{padding:48px 18px 90px}.phone-big{font-size:clamp(26px,9vw,46px)}
.cta-buttons{flex-direction:column;align-items:center}.cta-buttons .btn-primary,.cta-buttons .btn-secondary{width:100%;max-width:320px;justify-content:center}
#trust{grid-template-columns:1fr 1fr}
.trust-item{padding:18px 12px;border-right:none;border-bottom:1px solid var(--border-dim)}
.trust-item:nth-child(odd){border-right:1px solid var(--border-dim)}
.trust-item:nth-last-child(-n+2){border-bottom:none}
}
/* ══ CAR KEYS PANEL ══ */
.ck-panel-inner{display:grid;grid-template-columns:1fr 1fr 1fr;overflow-y:auto;flex:1;min-height:0}
.ck-col{padding:22px 24px;border-right:1px solid var(--border-dim)}
.ck-col:last-child{border-right:none}
.ck-col-luxury{background:rgba(255,255,255,.03)}
.ck-col-title{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:2.5px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border-dim);display:flex;align-items:center;gap:8px;color:var(--gold);position:sticky;top:0;background:var(--dark2);z-index:2;padding-top:2px;text-transform:uppercase}
.ck-col-luxury .ck-col-title{color:var(--gold-light);background:rgba(255,255,255,.03)}
.ck-brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ck-brand{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--radius);color:var(--gold);font-size:12.5px;font-weight:400;transition:all .15s;cursor:pointer;border:1px solid rgba(255,255,255,.12);background:transparent;width:100%;text-align:left;font-family:'DM Sans',sans-serif}
.ck-brand:hover{color:var(--white);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.ck-brand-icon{font-size:14px;flex-shrink:0}
@media(max-width:600px){
.ck-panel-inner{grid-template-columns:1fr!important}
.ck-col{border-right:none!important;border-bottom:1px solid var(--border-dim)}
.ck-col:last-child{border-bottom:none}
.ck-brand-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:601px) and (max-width:960px){
.ck-panel-inner{grid-template-columns:1fr!important}
.ck-col{border-right:none!important;border-bottom:1px solid var(--border-dim)}
.ck-brand-grid{grid-template-columns:repeat(3,1fr)}
}
/* ══ CAR KEYS PAGE ══ */
.ck-hero{min-height:62vh;display:flex;align-items:center;padding:24px 40px 72px;position:relative;overflow:hidden;background:var(--dark)}
.ck-hero-grid{position:absolute;inset:0;opacity:.04;background-image:linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px);background-size:60px 60px}
.ck-hero-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07) 0%,transparent 70%);top:50%;right:5%;transform:translateY(-50%)}
.ck-hero-content{max-width:680px;position:relative;z-index:2}
.ck-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);padding:6px 14px;border-radius:100px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-family:'DM Mono',monospace;margin-bottom:22px}
.ck-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;flex-shrink:0}
.ck-h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(56px,11vw,108px);line-height:.9;letter-spacing:2px;margin-bottom:10px;color:var(--white)}
.ck-h1-gold{color:var(--gold)}
.ck-sub{font-size:16px;color:var(--steel-light);line-height:1.75;max-width:540px;font-weight:300;margin:18px 0 32px}
.ck-actions{display:flex;gap:12px;flex-wrap:wrap}
.ck-stats-row{display:flex;gap:0;margin-top:40px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);overflow:hidden;max-width:440px}
.ck-stat{flex:1;padding:14px 12px;border-right:1px solid rgba(255,255,255,.1);text-align:center}
.ck-stat:last-child{border-right:none}
.ck-stat-n{font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--gold);line-height:1}
.ck-stat-l{font-size:9px;color:var(--steel);text-transform:uppercase;letter-spacing:1.5px;margin-top:2px;font-family:'DM Mono',monospace}
.ck-services-section{padding:72px 40px;background:var(--dark2)}
.ck-svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px}
.ck-svc-card{background:var(--dark3);padding:28px 24px;position:relative;overflow:hidden;transition:background .25s}
.ck-svc-card:hover{background:var(--dark4)}
.ck-svc-icon{font-size:28px;margin-bottom:14px;display:block}
.ck-svc-name{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;margin-bottom:8px}
.ck-svc-desc{color:var(--steel);font-size:13px;line-height:1.7;font-weight:300;margin-bottom:14px}
.ck-svc-price{font-size:11px;color:var(--gold);font-family:'DM Mono',monospace;letter-spacing:1px}
.ck-brands-section{padding:72px 40px;background:var(--dark)}
.ck-brands-intro{color:var(--steel);font-size:14px;line-height:1.7;font-weight:300;margin-bottom:44px;max-width:560px}
.ck-brand-category{margin-bottom:40px}
.ck-cat-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ck-cat-flags{font-size:18px}
.ck-cat-label{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:2px;color:var(--gold);white-space:nowrap}
.ck-lux-label{color:var(--gold)}
.ck-cat-line{flex:1;height:1px;background:rgba(255,255,255,.15)}
.ck-lux-line{background:rgba(255,255,255,.15)}
.ck-page-brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:7px}
.ck-page-brand{display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:var(--radius);color:var(--gold);font-size:13px;font-weight:500;transition:all .15s;cursor:pointer;border:1px solid rgba(255,255,255,.12);background:transparent;font-family:'DM Sans',sans-serif;width:100%;text-align:left}
.ck-page-brand:hover{color:var(--white);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.ck-pb-icon{font-size:14px;flex-shrink:0}.ck-pb-name{flex:1}.ck-pb-flag{font-size:12px;flex-shrink:0}
.ck-why-section{padding:72px 40px;background:var(--dark2)}
.ck-why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px}
.ck-why-card{background:var(--dark3);padding:28px 24px}
.ck-why-icon{font-size:28px;margin-bottom:14px;display:block}
.ck-why-title{font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:1px;margin-bottom:8px}
.ck-why-text{color:var(--steel);font-size:13px;line-height:1.7;font-weight:300}
.ck-cta-band{background:var(--gold);padding:48px 40px;text-align:center}
.ck-cta-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(30px,5vw,58px);color:var(--dark);line-height:1;margin-bottom:10px}
.ck-cta-sub{color:rgba(10,10,10,.65);font-size:14px;margin-bottom:24px}
.ck-cta-phone{display:inline-flex;align-items:center;gap:12px;background:var(--dark);color:var(--gold);padding:16px 36px;border-radius:var(--radius);font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:2px;text-decoration:none;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.ck-contact-section{padding:72px 40px;background:var(--dark)}
.ck-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:900px}
.ck-contact-intro{color:var(--steel-light);font-size:14px;line-height:1.8;font-weight:300;margin-bottom:24px}
.ck-info-row{margin-bottom:16px}
.ck-info-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel);margin-bottom:5px}
.ck-info-phone{font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--gold);letter-spacing:2px;text-decoration:none}
.ck-info-val-green{color:var(--gold);font-size:14px;font-weight:600}
.ck-service-area{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);padding:14px 16px;color:var(--steel-light);font-size:13px;line-height:1.7;margin-top:16px}
.ck-form-card{background:var(--dark3);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:28px}
@media(max-width:600px){
.ck-hero{padding:16px 16px 80px;min-height:auto}
.ck-h1{font-size:clamp(48px,13vw,66px)}
.ck-sub{font-size:14px;margin:14px 0 24px}
.ck-actions{flex-direction:column}
.ck-actions .h-cta-call,.ck-actions .h-cta-book{justify-content:center}
.ck-stats-row{max-width:100%}
.ck-services-section,.ck-brands-section,.ck-why-section,.ck-contact-section,.ck-cta-band{padding:52px 16px}
.ck-page-brand-grid{grid-template-columns:1fr 1fr}
.ck-contact-grid{grid-template-columns:1fr;gap:24px}
.ck-form-card{padding:20px}
}
@media(min-width:601px) and (max-width:960px){
.ck-hero{padding:16px 24px 64px}
.ck-services-section,.ck-brands-section,.ck-why-section,.ck-contact-section,.ck-cta-band{padding:60px 24px}
.ck-contact-grid{grid-template-columns:1fr;gap:28px}
.ck-page-brand-grid{grid-template-columns:repeat(3,1fr)}
}
/* Mobile brand buttons */
.mob-btn-tesla{color:var(--gold)!important}
.mob-btn-lux{color:var(--gold-light)!important}
.mob-svc-btn[data-nav]{cursor:pointer}
/* ── BRAND BADGE ── */
.bb{
display:inline-flex;align-items:center;justify-content:center;
font-size:9px;font-weight:700;letter-spacing:.5px;
padding:3px 6px;border-radius:4px;
font-family:'DM Mono',monospace;
flex-shrink:0;min-width:34px;line-height:1.2;
text-transform:uppercase;
}
.bb-placeholder{display:inline-block;width:34px;height:18px;flex-shrink:0}
/* ── SERVICE PANEL BUTTONS (ck-brand variant) ── */
.svc-grid{grid-template-columns:1fr!important} /* single column — more readable */
.svc-panel-btn{
flex-direction:row!important;
align-items:center!important;
gap:10px!important;
padding:9px 12px!important;
height:auto!important;
}
.svc-panel-icon{
width:28px;height:28px;border-radius:6px;
background:rgba(255,255,255,.1);
display:flex;align-items:center;justify-content:center;
color:var(--gold);flex-shrink:0;
}
.svc-panel-icon svg{width:14px;height:14px;stroke-width:1.75}
.svc-panel-name{font-size:13px;font-weight:400;color:var(--white);line-height:1.3;flex:1;text-align:left}
/* ── CAR KEYS: brand name next to badge ── */
.ck-brand-name{flex:1;font-size:12.5px}
/* ── MOBILE BRAND BUTTON ── */
.mob-brand-btn{gap:10px!important;padding-left:18px!important}
.mob-brand-btn .bb{font-size:8px;padding:2px 5px;min-width:28px}
/* ── MOBILE SERVICE ICON BUTTON ── */
.mob-svc-icon-btn{gap:10px!important;padding-left:24px!important}
.mob-svc-ico{
width:26px;height:26px;border-radius:6px;
background:rgba(255,255,255,.1);
display:flex;align-items:center;justify-content:center;
color:var(--gold);flex-shrink:0;
}
.mob-svc-ico svg{width:13px;height:13px;stroke-width:1.75}
/* ── CAR KEYS PANEL: country layout ── */
.ck-country-block{margin-bottom:20px}
.ck-country-block:last-child{margin-bottom:0}
.ck-country-title{
font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:2px;
color:var(--gold);margin-bottom:8px;padding-bottom:7px;
border-bottom:1px solid var(--border-dim);
display:flex;align-items:center;gap:6px;
}
.ck-bd{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.35);flex-shrink:0;margin-top:1px}
.ck-brand:hover .ck-bd{background:var(--gold)}
.ck-ct-us::before{content:'AMERICAN';color:var(--gold)}
.ck-ct-jp::before{content:'JAPANESE';color:var(--gold)}
.ck-ct-kr::before{content:'KOREAN';color:var(--gold)}
.ck-ct-de::before{content:'GERMAN';color:var(--gold)}
.ck-ct-gb::before{content:'BRITISH';color:var(--gold)}
.ck-ct-se::before{content:'SWEDISH';color:var(--gold)}
.rel-brand-btn{background:var(--dark3);border:1px solid var(--border-dim);border-radius:4px;padding:18px 16px;cursor:pointer;transition:all .2s;width:100%;text-align:left;font-family:'DM Sans',sans-serif;color:var(--white)}
.rel-brand-btn:hover{background:var(--dark4);border-color:rgba(255,255,255,.2);transform:translateY(-2px)}
/* ══ SERVICE AREA PANEL ══ */
/* Service area panel uses ck-panel-inner with 5 columns */
.sa-panel-inner{grid-template-columns:repeat(5,1fr)!important;max-height:calc(100vh - 162px);overflow-y:auto}
/* Responsive panel */
@media(max-width:600px){
.sa-panel-inner{grid-template-columns:1fr!important;max-height:75vh}
.sa-panel-inner .ck-col{border-right:none!important;border-bottom:1px solid var(--border-dim)}
.sa-panel-inner .ck-col:last-child{border-bottom:none}
}
@media(min-width:601px) and (max-width:960px){
.sa-panel-inner{grid-template-columns:repeat(3,1fr)!important;max-height:70vh}
.sa-panel-inner .ck-col{border-right:none!important;border-bottom:1px solid var(--border-dim)}
.sa-panel-inner .ck-col:nth-child(3n){border-right:none!important}
}
.sa-nearby-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);color:var(--steel-light);font-size:13px;cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif}
.sa-nearby-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,255,255,.1)}
.sa-nearby-btn .sa-dot{background:rgba(255,255,255,.3)}
.sa-nearby-btn:hover .sa-dot{background:var(--gold)}
/* ══ BLOG ══ */
.blog-hero{padding:24px 40px 64px;background:var(--dark);position:relative;overflow:hidden}
.blog-hero-grid{position:absolute;inset:0;opacity:.04;background-image:linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px);background-size:60px 60px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0 40px 80px;background:var(--dark)}
.blog-card{background:var(--dark3);border:1px solid var(--border-dim);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .3s;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.5);border-color:rgba(255,255,255,.2)}
.blog-card-img{height:180px;display:flex;align-items:center;justify-content:center;font-size:56px;position:relative;overflow:hidden}
.blog-card-body{padding:24px;flex:1;display:flex;flex-direction:column}
.blog-tag{display:inline-block;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 14px;border-radius:4px;margin-bottom:14px;background:var(--gold)!important;color:var(--dark)!important}
.blog-card-title{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;letter-spacing:0;line-height:1.3;margin-bottom:10px;color:var(--white)}
.blog-card-excerpt{font-size:13px;color:var(--steel);line-height:1.7;font-weight:300;flex:1}
.blog-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid var(--border-dim)}
.blog-card-date{font-size:11px;color:var(--steel);font-family:'DM Mono',monospace}
.blog-card-read{font-size:11px;color:var(--gold);font-family:'DM Mono',monospace;letter-spacing:1px}
.blog-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:40px}
.blog-cat-btn{padding:7px 16px;border-radius:100px;border:1px solid var(--border-med);background:none;color:var(--steel-light);font-size:12px;font-family:'DM Mono',monospace;letter-spacing:1px;cursor:pointer;transition:all .2s;text-transform:uppercase}
.blog-cat-btn:hover,.blog-cat-btn.active{border-color:var(--gold);color:var(--gold);background:rgba(255,255,255,.07)}
/* Blog post page */
.post-wrap{max-width:760px;margin:0 auto;padding:80px 40px}
.post-body{font-size:16px;line-height:1.85;color:var(--steel-light);font-weight:300}
.post-body h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(24px,4vw,36px);letter-spacing:1px;margin:40px 0 16px;color:var(--white)}
.post-body h3{font-family:'Bebas Neue',sans-serif;font-size:clamp(18px,3vw,24px);letter-spacing:1px;margin:32px 0 12px;color:var(--gold)}
.post-body p{margin-bottom:18px}
.post-body ul,.post-body ol{padding-left:24px;margin-bottom:18px}
.post-body li{margin-bottom:8px}
.post-body strong{color:var(--white);font-weight:600}
.post-cta-box{background:linear-gradient(135deg,var(--dark3),var(--dark4));border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:28px 32px;margin:40px 0;text-align:center}
.post-cta-box h3{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:1px;margin-bottom:8px;color:var(--white)}
.post-cta-box p{font-size:14px;color:var(--steel);margin-bottom:18px;font-weight:300}
.post-related{padding:64px 40px;background:var(--dark2)}
@media(max-width:600px){
.blog-hero{padding:80px 16px 48px}
.blog-grid{grid-template-columns:1fr;padding:0 16px 64px;gap:16px}
.post-wrap{padding:60px 16px}
.post-related{padding:52px 16px}
}
@media(min-width:601px) and (max-width:960px){
.blog-hero{padding:16px 24px 52px}
.blog-grid{grid-template-columns:repeat(2,1fr);padding:0 24px 64px}
.post-wrap{padding:72px 24px}
.post-related{padding:56px 24px}
}
/* ══════════════════════════════════
FAQ PAGE
══════════════════════════════════ */
.faq-hero{padding:24px 40px 0;background:var(--dark);position:relative;overflow:hidden;min-height:52vh;display:flex;align-items:flex-end}
.faq-hero-bg{position:absolute;inset:0;opacity:.04;background-image:linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px);background-size:60px 60px}
.faq-hero-glow{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%);top:50%;right:-5%;transform:translateY(-50%);pointer-events:none}
.faq-hero-content{position:relative;z-index:2;max-width:720px;padding-bottom:56px}
.faq-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);padding:6px 14px;border-radius:100px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-family:'DM Mono',monospace;margin-bottom:20px}
.faq-h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(56px,11vw,112px);line-height:.88;letter-spacing:2px;margin-bottom:18px;color:var(--white)}
.faq-h1 span{color:var(--gold)}
.faq-lead{font-size:17px;color:var(--steel-light);line-height:1.7;max-width:540px;font-weight:300;margin-bottom:36px}
/* Stats row */
.faq-stats{display:flex;gap:0;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);overflow:hidden;max-width:420px;margin-bottom:48px}
.faq-stat{flex:1;padding:14px 12px;border-right:1px solid rgba(255,255,255,.1);text-align:center}
.faq-stat:last-child{border-right:none}
.faq-stat-n{font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--gold);line-height:1}
.faq-stat-l{font-size:9px;color:var(--steel);text-transform:uppercase;letter-spacing:1.5px;margin-top:3px;font-family:'DM Mono',monospace}
/* Category sidebar layout */
.faq-layout{display:grid;grid-template-columns:220px 1fr;gap:48px;padding:56px 40px 80px;background:var(--dark);align-items:start}
.faq-sidebar{position:sticky;top:80px}
.faq-sidebar-title{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--steel);margin-bottom:14px}
.faq-cat-list{display:flex;flex-direction:column;gap:4px}
.faq-cat-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius);border:none;background:none;color:var(--steel-light);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;text-align:left;font-family:'DM Sans',sans-serif;width:100%}
.faq-cat-btn:hover{color:var(--white);background:var(--bg-hover)}
.faq-cat-btn.active{color:var(--gold);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
.faq-cat-icon{font-size:16px;flex-shrink:0}
.faq-cat-count{margin-left:auto;font-size:11px;font-family:'DM Mono',monospace;opacity:.5}
/* Divider in sidebar */
.faq-sidebar-divider{height:1px;background:var(--bg-hover);margin:16px 0}
/* Questions area */
.faq-questions{}
.faq-section{margin-bottom:48px}
.faq-section-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border-dim)}
.faq-section-icon{font-size:22px}
.faq-section-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(18px,3vw,26px);letter-spacing:1.5px}
.faq-section-badge{font-size:11px;font-family:'DM Mono',monospace;padding:3px 10px;border-radius:100px;margin-left:auto}
/* Individual FAQ item */
.faq-item{border-bottom:1px solid var(--border-dim);overflow:hidden;transition:background .2s;border-radius:var(--radius)}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:18px 16px 18px 0;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;font-family:'DM Sans',sans-serif;-webkit-tap-highlight-color:transparent;transition:padding .2s}
.faq-item:hover .faq-q{padding-left:4px}
.faq-q-text{font-size:15px;font-weight:600;color:var(--white);line-height:1.4;transition:color .2s}
.faq-item.open .faq-q-text,.faq-item:hover .faq-q-text{color:var(--gold)}
.faq-q-icon{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;color:var(--gold);transition:all .3s;margin-top:1px;background:rgba(255,255,255,.04)}
.faq-item.open .faq-q-icon{background:var(--gold);color:var(--dark);border-color:var(--gold);transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.faq-item.open .faq-a{max-height:700px}
.faq-a-inner{padding:0 16px 22px 0;font-size:14px;color:var(--steel-light);line-height:1.85;font-weight:300;border-left:2px solid rgba(255,255,255,.2);padding-left:16px;margin-bottom:4px}
.faq-a-inner strong{color:var(--white);font-weight:600}
.faq-a-inner a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.faq-a-inner a:hover{border-bottom-color:var(--gold)}
/* CTA strip */
.faq-cta{background:var(--dark2);border-top:1px solid rgba(255,255,255,.1);padding:72px 40px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.faq-cta-left{}
.faq-cta-label{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.faq-cta-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,6vw,72px);line-height:.95;margin-bottom:14px;color:var(--white)}
.faq-cta-title span{color:var(--gold)}
.faq-cta-sub{color:var(--steel-light);font-size:15px;line-height:1.7;font-weight:300}
.faq-cta-right{display:flex;flex-direction:column;gap:14px}
.faq-contact-card{background:var(--dark3);border:1px solid var(--border-dim);border-radius:8px;padding:20px 22px;display:flex;align-items:center;gap:14px;transition:border-color .2s;text-decoration:none;cursor:pointer;border:1px solid var(--border-dim)}
.faq-contact-card:hover{border-color:rgba(255,255,255,.25)}
.faq-contact-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.faq-contact-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel);margin-bottom:3px}
.faq-contact-value{font-size:14px;font-weight:600;color:var(--white)}
/* Responsive */
@media(max-width:600px){
.faq-hero{padding:76px 16px 0;min-height:auto}
.faq-hero-content{padding-bottom:40px}
.faq-h1{font-size:clamp(50px,13vw,70px)}
.faq-stats{max-width:100%}
.faq-layout{grid-template-columns:1fr;gap:0;padding:0 16px 64px}
.faq-sidebar{position:static;margin-bottom:32px}
.faq-cat-list{flex-direction:row;flex-wrap:wrap;gap:6px}
.faq-cat-btn{width:auto;padding:6px 12px;font-size:12px}
.faq-cat-count{display:none}
.faq-cta{grid-template-columns:1fr;gap:32px;padding:52px 16px}
}
@media(min-width:601px) and (max-width:960px){
.faq-hero{padding:16px 24px 0}
.faq-hero-content{padding-bottom:48px}
.faq-layout{grid-template-columns:1fr;gap:0;padding:40px 24px 64px}
.faq-sidebar{position:static;margin-bottom:32px}
.faq-cat-list{flex-direction:row;flex-wrap:wrap;gap:6px}
.faq-cat-btn{width:auto;font-size:12px}
.faq-cat-count{display:none}
.faq-cta{grid-template-columns:1fr;gap:32px;padding:56px 24px}
}
/* ═══════════════════════════════════════
SVG ICON SYSTEM
═══════════════════════════════════════ */
.ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ico svg{display:block}
/* ── Sized icon helpers ── */
.ico-sm svg{width:18px;height:18px}
.ico-md svg{width:24px;height:24px}
.ico-lg svg{width:36px;height:36px}
.ico-xl svg{width:48px;height:48px}
/* ── Icon box (rounded square bg) ── */
.ico-box{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ico-box-gold{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.ico-box-red{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.ico-box-blue{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.ico-box-green{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.ico-box-steel{background:rgba(138,155,170,.12);border:1px solid rgba(138,155,170,.2)}
/* ── Big category card icons ── */
.cat-icon-svg{width:52px;height:52px;margin-bottom:20px;display:block}
.cat-icon-svg svg{width:52px;height:52px}
/* ── Service card icons ── */
.svc-icon-svg{width:36px;height:36px;margin-bottom:16px;display:block}
.svc-icon-svg svg{width:36px;height:36px}
/* ── Trust bar icon ── */
.tb-icon-svg{width:26px;height:26px}
.tb-icon-svg svg{width:26px;height:26px}
/* ── How-step icon ── */
.how-icon-svg{width:32px;height:32px;margin-bottom:12px;display:block}
.how-icon-svg svg{width:32px;height:32px}
/* ── Why card icon ── */
.whc-icon-svg{width:38px;height:38px;margin-bottom:18px;display:block}
.whc-icon-svg svg{width:38px;height:38px}
/* ── Nav / badge dot (keep as is) ── */
.mob-cat-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.35);flex-shrink:0;margin-right:2px}
/* ════════════════════════════════
ADMIN / MANAGEMENT PAGE
════════════════════════════════ */
#admin-overlay{position:fixed;inset:0;z-index:9999;background:var(--dark);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}
#admin-overlay.hidden{display:none}
.admin-lock-icon{color:var(--gold);margin-bottom:8px}
.admin-lock-icon svg{width:48px;height:48px}
.admin-login-box{background:var(--dark3);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:36px 32px;width:360px;max-width:90vw}
.admin-login-title{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:2px;color:var(--white);margin-bottom:6px}
.admin-login-sub{font-size:13px;color:var(--steel);margin-bottom:24px;font-weight:300}
.admin-input{width:100%;background:var(--dark4);border:1px solid var(--border-dim);border-radius:4px;padding:12px 14px;color:var(--white);font-family:'DM Sans',sans-serif;font-size:15px;outline:none;transition:border-color .2s;margin-bottom:12px}
.admin-input:focus{border-color:var(--gold)}
.admin-input::placeholder{color:var(--steel)}
.admin-btn{width:100%;background:var(--gold);color:var(--dark);border:none;border-radius:4px;padding:13px;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;cursor:pointer;transition:background .2s;margin-top:4px}
.admin-btn:hover{background:var(--gold-light)}
.admin-err{font-size:12px;color:var(--red);margin-top:8px;font-family:'DM Mono',monospace;letter-spacing:.5px;min-height:18px}
/* Admin shell */
#admin-shell{display:none;min-height:100vh;background:var(--dark)}
#admin-shell.visible{display:block}
.adm-nav{position:sticky;top:0;z-index:100;background:rgba(10,10,10,.98);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.15);padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:60px}
.adm-logo{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:2px;color:var(--gold)}
.adm-logo span{color:var(--steel-light)}
.adm-nav-right{display:flex;align-items:center;gap:12px}
.adm-badge{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;background:rgba(224,53,53,.1);color:var(--red);border:1px solid rgba(224,53,53,.2);padding:4px 10px;border-radius:100px}
.adm-logout{background:none;border:1px solid var(--border-med);color:var(--steel-light);padding:6px 14px;border-radius:4px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s}
.adm-logout:hover{border-color:var(--red);color:var(--red)}
/* Sidebar + content */
.adm-layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 60px)}
.adm-sidebar{background:var(--dark2);border-right:1px solid var(--border-dim);padding:24px 0;position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto}
.adm-sidebar-section{padding:0 16px;margin-bottom:24px}
.adm-sidebar-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--steel);padding:0 8px;margin-bottom:8px}
.adm-nav-btn{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:4px;border:none;background:none;color:var(--steel-light);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;text-align:left;font-family:'DM Sans',sans-serif}
.adm-nav-btn:hover{color:var(--white);background:var(--bg-hover)}
.adm-nav-btn.active{color:var(--gold);background:rgba(255,255,255,.08)}
.adm-nav-btn .adm-count{margin-left:auto;font-size:11px;font-family:'DM Mono',monospace;background:var(--bg-hover);padding:2px 7px;border-radius:100px}
/* Content area */
.adm-content{padding:32px}
.adm-page{display:none}.adm-page.active{display:block}
.adm-page-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,4vw,44px);letter-spacing:1px;margin-bottom:6px;color:var(--white)}
.adm-page-sub{font-size:13px;color:var(--steel);margin-bottom:28px;font-weight:300}
/* Stat cards */
.adm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:32px}
.adm-stat-card{background:var(--dark3);border:1px solid var(--border-dim);border-radius:8px;padding:20px 18px}
.adm-stat-num{font-family:'Bebas Neue',sans-serif;font-size:36px;color:var(--gold);line-height:1;margin-bottom:4px}
.adm-stat-lbl{font-size:11px;color:var(--steel);font-family:'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase}
.adm-stat-sub{font-size:11px;color:var(--steel);margin-top:6px;font-weight:300}
/* Table */
.adm-table-wrap{background:var(--dark3);border:1px solid var(--border-dim);border-radius:8px;overflow:hidden}
.adm-table{width:100%;border-collapse:collapse;font-size:13px}
.adm-table th{background:var(--dark4);color:var(--steel);font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:12px 16px;text-align:left;font-weight:400;border-bottom:1px solid var(--border-dim)}
.adm-table td{padding:12px 16px;border-bottom:1px solid var(--border-dim);color:var(--white);vertical-align:top}
.adm-table tr:last-child td{border-bottom:none}
.adm-table tr:hover td{background:transparent}
.adm-pill{display:inline-block;font-size:10px;font-family:'DM Mono',monospace;padding:2px 8px;border-radius:100px;letter-spacing:.5px}
.adm-pill-red{background:rgba(224,53,53,.1);color:var(--red)}
.adm-pill-gold{background:rgba(255,255,255,.1);color:var(--gold)}
.adm-pill-steel{background:rgba(138,155,170,.1);color:var(--steel-light)}
.adm-pill-green{background:rgba(46,204,113,.1);color:var(--green)}
.adm-pill-blue{background:rgba(91,155,213,.1);color:#5B9BD5}
/* Search */
.adm-search{display:flex;gap:10px;margin-bottom:18px;align-items:center}
.adm-search-input{flex:1;background:var(--dark3);border:1px solid var(--border-dim);border-radius:4px;padding:10px 14px;color:var(--white);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;transition:border-color .2s}
.adm-search-input:focus{border-color:var(--gold)}
.adm-search-input::placeholder{color:var(--steel)}
/* Section card */
.adm-card{background:var(--dark3);border:1px solid var(--border-dim);border-radius:8px;padding:20px 22px;margin-bottom:14px}
.adm-card-title{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:1px;margin-bottom:6px}
.adm-card-body{font-size:13px;color:var(--steel-light);line-height:1.7;font-weight:300}
/* Business settings form */
.adm-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.adm-form-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel);margin-bottom:6px}
.adm-form-input{width:100%;background:var(--dark4);border:1px solid var(--border-dim);border-radius:4px;padding:10px 12px;color:var(--white);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;transition:border-color .2s}
.adm-form-input:focus{border-color:var(--gold)}
.adm-save-btn{background:var(--gold);color:var(--dark);border:none;border-radius:4px;padding:10px 24px;font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:1px;cursor:pointer;transition:background .2s}
.adm-save-btn:hover{background:var(--gold-light)}
/* Color accents per category */
.adm-emergency{color:var(--gold)}.adm-residential{color:var(--gold)}.adm-commercial{color:var(--white)}
@media(max-width:768px){.adm-layout{grid-template-columns:1fr}.adm-sidebar{position:static;height:auto}.adm-form-row{grid-template-columns:1fr}}
/* ══ AI AGENTS ══ */
.agent-card{position:relative;overflow:hidden}
.agent-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light));opacity:0;transition:opacity .3s}
.agent-card.running::before{opacity:1;animation:shimmer 1.5s linear infinite;background-size:200% auto}
.agent-card-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.agent-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.agent-icon-gold{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.agent-icon-blue{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.agent-icon-green{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.agent-name{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;color:var(--white);margin-bottom:4px}
.agent-desc{font-size:12px;color:var(--steel);line-height:1.6;font-weight:300}
.agent-status{display:flex;align-items:center;gap:8px;font-size:12px;font-family:'DM Mono',monospace;color:var(--steel);margin-bottom:10px}
.agent-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.agent-dot-idle{background:rgba(138,155,170,.4)}
.agent-dot-running{background:var(--gold);animation:pulse 1s infinite}
.agent-dot-success{background:var(--green)}
.agent-dot-error{background:var(--red)}
.agent-log{background:var(--dark4);border-radius:4px;padding:10px 14px;font-size:12px;font-family:'DM Mono',monospace;color:var(--steel-light);line-height:1.8;min-height:0;max-height:140px;overflow-y:auto;display:none;margin-bottom:12px;white-space:pre-wrap;word-break:break-word}
.agent-log.show{display:block}
.agent-log-line-ok{color:var(--green)}
.agent-log-line-err{color:var(--red)}
.agent-log-line-info{color:var(--gold)}
.agent-log-line-out{color:var(--steel-light)}
.agent-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.agent-run-btn{background:var(--dark4);color:var(--white);border:1px solid var(--border-med);border-radius:4px;padding:8px 16px;font-size:12px;font-family:'DM Mono',monospace;letter-spacing:1px;cursor:pointer;transition:all .2s;white-space:nowrap}
.agent-run-btn:hover{background:rgba(255,255,255,.1);border-color:var(--gold);color:var(--gold)}
.agent-run-btn:disabled{opacity:.4;cursor:not-allowed}
.agent-last{font-size:11px;color:var(--steel);font-family:'DM Mono',monospace}
.adm-count-ai{background:rgba(255,255,255,.15);color:var(--gold)}
.agent-group-label{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:2px;color:var(--steel);padding:20px 4px 10px;border-bottom:1px solid var(--border-dim);margin-bottom:4px;grid-column:1/-1}
/* ══ BOOKING PAGE ══ */
/* (removed: .nav-book-link — element was deleted in v4.1) */
.bk-page{background:var(--dark);min-height:100vh}
.bk-hero{padding:24px 40px 56px;background:var(--dark);position:relative;overflow:hidden}
.bk-hero-grid{position:absolute;inset:0;opacity:.04;background-image:linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px);background-size:60px 60px}
.bk-hero-glow{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07) 0%,transparent 70%);top:50%;right:-10%;transform:translateY(-50%)}
.bk-hero-inner{position:relative;z-index:2;max-width:680px}
.bk-body{padding:0 40px 80px;background:var(--dark)}
.bk-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:1100px}
/* Steps */
.bk-steps{display:flex;gap:0;margin-bottom:48px;max-width:600px}
.bk-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.bk-step:not(:last-child)::after{content:'';position:absolute;top:16px;left:60%;right:-40%;height:1px;background:rgba(255,255,255,.15)}
.bk-step.done:not(:last-child)::after{background:var(--gold)}
.bk-step-num{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:14px;color:var(--steel);margin-bottom:6px;transition:all .3s;background:var(--dark);position:relative;z-index:1}
.bk-step.active .bk-step-num{border-color:var(--gold);color:var(--gold);background:rgba(255,255,255,.1)}
.bk-step.done .bk-step-num{border-color:var(--gold);background:var(--gold);color:var(--dark)}
.bk-step-label{font-size:10px;color:var(--steel);font-family:'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;text-align:center}
.bk-step.active .bk-step-label{color:var(--gold)}
/* Form panels */
.bk-panel{display:none}
.bk-panel.active,.bk-panel.bk-panel-enter{display:block}
.bk-card{background:var(--dark3);border:1px solid var(--border-dim);border-radius:8px;padding:32px}
.bk-card-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1px;margin-bottom:6px;color:var(--white)}
.bk-card-sub{font-size:13px;color:var(--steel);margin-bottom:28px;font-weight:300;line-height:1.6}
/* Service picker */
.bk-svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.bk-svc-btn{padding:13px 14px;border-radius:6px;border:1px solid var(--border-dim);background:transparent;color:var(--steel-light);font-size:13px;cursor:pointer;transition:all .2s;text-align:left;font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:8px}
.bk-svc-btn:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.04);color:var(--white)}
.bk-svc-btn.selected{border-color:var(--gold);background:rgba(255,255,255,.1);color:var(--gold)}
.bk-svc-btn .bk-svc-icon{font-size:16px;flex-shrink:0}
.bk-svc-btn .bk-check{margin-left:auto;font-size:14px;opacity:0;transition:opacity .2s}
.bk-svc-btn.selected .bk-check{opacity:1}
/* Calendar */
.bk-cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.bk-cal-title{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;color:var(--white)}
.bk-cal-nav{background:none;border:1px solid var(--border-med);color:var(--steel-light);width:32px;height:32px;border-radius:4px;cursor:pointer;font-size:16px;transition:all .2s;display:flex;align-items:center;justify-content:center}
.bk-cal-nav:hover{border-color:var(--gold);color:var(--gold)}
.bk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:20px}
.bk-cal-dow{font-size:10px;font-family:'DM Mono',monospace;color:var(--steel);text-align:center;padding:4px 0;letter-spacing:1px}
.bk-cal-day{aspect-ratio:1;border-radius:6px;border:1px solid transparent;background:none;cursor:pointer;font-size:13px;color:var(--steel-light);transition:all .2s;display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif}
.bk-cal-day:hover:not(.empty):not(.past){border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07);color:var(--white)}
.bk-cal-day.today{color:var(--gold);font-weight:700}
.bk-cal-day.selected{background:var(--gold);color:var(--dark);border-color:var(--gold);font-weight:700}
.bk-cal-day.empty,.bk-cal-day.past{opacity:.25;cursor:default;pointer-events:none}
.bk-cal-day.has-avail::after{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--green);margin:0 auto;margin-top:-2px;position:absolute}
.bk-cal-day{position:relative}
/* Time slots */
.bk-time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bk-time-btn{padding:10px 8px;border-radius:6px;border:1px solid var(--border-dim);background:transparent;color:var(--steel-light);font-size:12px;cursor:pointer;transition:all .2s;font-family:'DM Mono',monospace;text-align:center;letter-spacing:.5px}
.bk-time-btn:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07);color:var(--white)}
.bk-time-btn.selected{background:var(--gold);border-color:var(--gold);color:var(--dark);font-weight:700}
.bk-time-btn.booked{opacity:.3;cursor:not-allowed;text-decoration:line-through}
/* Nav buttons */
.bk-nav{display:flex;gap:12px;margin-top:28px;justify-content:space-between;align-items:center}
.bk-btn-next{background:var(--gold);color:var(--dark);border:none;border-radius:4px;padding:14px 32px;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}
.bk-btn-next:hover{background:var(--gold-light);transform:translateY(-1px)}
.bk-btn-next:disabled{opacity:.4;cursor:not-allowed;transform:none}
.bk-btn-back{background:none;color:var(--steel);border:1px solid var(--border-med);border-radius:4px;padding:14px 24px;font-family:'DM Sans',sans-serif;font-size:14px;cursor:pointer;transition:all .2s}
.bk-btn-back:hover{border-color:var(--steel-light);color:var(--white)}
/* Summary sidebar */
.bk-summary{background:var(--dark3);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:28px;position:sticky;top:84px}
.bk-summary-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;color:var(--gold);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.bk-sum-row{display:flex;gap:12px;margin-bottom:16px;align-items:flex-start}
.bk-sum-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.bk-sum-label{font-size:10px;font-family:'DM Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel);margin-bottom:3px}
.bk-sum-val{font-size:14px;color:var(--white);font-weight:500;line-height:1.4}
.bk-sum-val.empty{color:var(--steel);font-weight:300;font-style:italic}
.bk-guarantee{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:14px 16px;margin-top:20px}
.bk-guarantee-text{font-size:12px;color:var(--steel-light);line-height:1.7}
.bk-guarantee-text strong{color:var(--gold)}
/* Confirmation */
.bk-confirm{text-align:center;padding:48px 32px}
.bk-confirm-icon{font-size:64px;margin-bottom:20px;animation:scaleIn .5s ease}
.bk-confirm-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,6vw,56px);line-height:1;margin-bottom:10px;color:var(--white)}
.bk-confirm-title span{color:var(--gold)}
.bk-confirm-ref{font-family:'DM Mono',monospace;font-size:12px;color:var(--steel);letter-spacing:2px;margin-bottom:24px}
.bk-confirm-detail{background:var(--dark4);border-radius:6px;padding:20px 24px;margin:24px auto;max-width:360px;text-align:left}
.bk-confirm-detail-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border-dim)}
.bk-confirm-detail-row:last-child{border-bottom:none}
@keyframes scaleIn{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}
@media(max-width:600px){
.bk-hero{padding:80px 16px 40px}
.bk-body{padding:0 16px 64px}
.bk-layout{grid-template-columns:1fr;gap:20px}
.bk-summary{position:static;order:-1}
.bk-svc-grid{grid-template-columns:1fr}
.bk-time-grid{grid-template-columns:repeat(2,1fr)}
.bk-steps{margin-bottom:32px}
}
@media(min-width:601px) and (max-width:960px){
.bk-hero{padding:16px 24px 44px}
.bk-body{padding:0 24px 64px}
.bk-layout{grid-template-columns:1fr;gap:20px}
.bk-summary{position:static}
}
/* ══ PRICING TABS ══ */
.price-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.price-tab{padding:8px 20px;border-radius:100px;border:1px solid var(--border-med);background:none;color:var(--steel-light);font-size:12px;font-family:'DM Mono',monospace;letter-spacing:1px;cursor:pointer;transition:all .2s;text-transform:uppercase}
.price-tab:hover{border-color:rgba(255,255,255,.3);color:var(--gold)}
.price-tab.active{background:rgba(255,255,255,.1);border-color:var(--gold);color:var(--gold)}
.price-panels{max-width:640px;margin-bottom:20px}
.price-panel{display:none;animation:fadeIn .2s ease}
.price-panel.active{display:block}
.price-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border-dim)}
.price-row:last-child{border-bottom:none}
.price-row-name{font-size:14px;color:var(--steel-light);font-weight:400}
.price-row-range{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px}
.price-note{font-size:12px;color:var(--steel);font-family:'DM Mono',monospace;padding:14px 16px;background:var(--bg-hover);border-radius:4px;border-left:2px solid rgba(255,255,255,.3)}
/* ══ TRANSPARENT PRICING CARDS ══ */
.tprice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:32px}
.tprice-card{background:var(--dark3);border:1px solid var(--border-dim);border-radius:8px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.tprice-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.35)}
.tprice-card-head{padding:18px 20px 14px;background:var(--dark4)}
.tprice-cat{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:2px}
.tprice-rows{padding:0 20px 4px}
.tprice-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border-dim)}
.tprice-row:last-child{border-bottom:none}
.tprice-name{font-size:13px;color:var(--steel-light);font-weight:400;line-height:1.4}
.tprice-range{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:.5px;white-space:nowrap;margin-left:12px;flex-shrink:0}
.tprice-note{font-size:12px;color:var(--steel);font-family:'DM Mono',monospace;padding:14px 18px;background:var(--bg-hover);border-radius:6px;border-left:3px solid rgba(255,255,255,.3);display:flex;align-items:flex-start;gap:10px}
@media(max-width:960px){.tprice-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tprice-grid{grid-template-columns:1fr 1fr;gap:10px}.tprice-card-head{padding:14px 16px 10px}.tprice-cat{font-size:15px}.tprice-rows{padding:0 14px 2px}.tprice-row{padding:9px 0}.tprice-name{font-size:12px}.tprice-range{font-size:14px}}
/* ══ HOME FAQ 2-COL ══ */
.hfaq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hfaq-col{display:flex;flex-direction:column;gap:2px}
.hfaq-item{background:var(--dark3);border:1px solid var(--border-dim);border-radius:8px;overflow:hidden;transition:border-color .2s}
.hfaq-item:hover{border-color:rgba(255,255,255,.2)}
.hfaq-item.open{border-color:rgba(255,255,255,.25)}
.hfaq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;width:100%;background:none;border:none;color:var(--white);font-size:14px;font-weight:500;text-align:left;cursor:pointer;font-family:'DM Sans',sans-serif;line-height:1.5}
.hfaq-q-text{flex:1}
.hfaq-q-icon{flex-shrink:0;color:var(--gold);transition:transform .25s}
.hfaq-item.open .hfaq-q-icon{transform:rotate(45deg)}
.hfaq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}
.hfaq-item.open .hfaq-a{max-height:400px}
.hfaq-a-inner{padding:0 20px 18px;font-size:13px;color:var(--steel-light);line-height:1.75;font-weight:300;border-top:1px solid var(--border-dim);padding-top:14px}
@media(max-width:768px){.hfaq-grid{grid-template-columns:1fr}}
/* ══ GALLERY ══ */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;gap:12px}
.gallery-item{border-radius:8px;overflow:hidden;cursor:pointer}
.gallery-large{grid-column:span 2;grid-row:span 2}
.gallery-medium{grid-column:span 2}
.gallery-small{grid-column:span 1}
.gallery-thumb{position:relative;width:100%;height:200px;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .3s}
.gallery-large .gallery-thumb{height:100%;min-height:412px}
.gallery-medium .gallery-thumb{height:200px}
.gallery-thumb:hover{transform:scale(1.03)}
.gallery-icon{font-size:52px;z-index:1;transition:transform .3s}
.gallery-thumb:hover .gallery-icon{transform:scale(1.15)}
.gallery-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));padding:16px 14px 14px;z-index:2}
.gallery-label{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:1px;color:var(--white)}
.gallery-sub{font-size:11px;color:var(--steel-light);font-family:'DM Mono',monospace;margin-top:2px}
/* ══ SERVICE AREA SECTION ══ */
.sa-zone-block{margin-bottom:24px}
.sa-zone-header{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:2px;color:var(--gold);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.12)}
.sa-pills-wrap{display:flex;flex-wrap:wrap;gap:6px}
.sa-city-pill{font-size:12px;padding:5px 13px;border-radius:100px;border:1px solid var(--border-dim);background:transparent;color:var(--steel-light);cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif}
.sa-city-pill:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,255,255,.07)}
/* ── CONTACT SPLIT ── */
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-info-col{display:flex;flex-direction:column;gap:14px}
@media(max-width:960px){.contact-split{grid-template-columns:1fr;gap:28px}}
/* ── SERVICE AREA STATS ROW ── */
.sa-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:48px}
.sa-stat{background:var(--dark3);border:1px solid var(--border-dim);border-radius:8px;padding:20px 16px;text-align:center;border-top:3px solid rgba(255,255,255,.3)}
.sa-stat-num{font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--gold);line-height:1;margin-bottom:4px}
.sa-stat-lbl{font-size:10px;color:var(--steel);text-transform:uppercase;letter-spacing:1.5px;font-family:'DM Mono',monospace}
@media(max-width:600px){.sa-stats-row{grid-template-columns:repeat(2,1fr);gap:10px}.sa-stat{padding:16px 12px}.sa-stat-num{font-size:26px}}
/* ── SERVICE AREA ZONES GRID ── */
.sa-zones-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
@media(max-width:960px){.sa-zones-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.sa-zones-grid{grid-template-columns:1fr 1fr;gap:16px}}
/* Responsive additions */
@media(max-width:600px){
.gallery-grid{grid-template-columns:1fr 1fr;gap:8px}
.gallery-large{grid-column:span 2}
.gallery-medium{grid-column:span 2}
.gallery-large .gallery-thumb{min-height:200px}
.faq-body .faq-section-title{display:none}
section[style*="grid-template-columns:1fr 1fr"]{display:block!important}
section[style*="grid-template-columns:1fr 1fr"] > *{margin-bottom:32px}
}
@media(min-width:601px) and (max-width:960px){
.gallery-grid{grid-template-columns:1fr 1fr;gap:10px}
.gallery-large .gallery-thumb{min-height:300px}
section[style*="grid-template-columns:1fr 1fr"]{display:block!important}
section[style*="grid-template-columns:1fr 1fr"] > *{margin-bottom:32px}
}
/* ═══════════════════════════════════════
DESIGN SYSTEM v2 — Consistent tokens
═══════════════════════════════════════ */
:root {
/* Spacing scale */
--sp-xs: 8px; --sp-sm: 16px; --sp-md: 24px; --sp-lg: 40px; --sp-xl: 64px; --sp-2xl: 80px;
/* Section rhythm */
--section-pad: 80px 40px;
/* Border styles */
--border-subtle: 1px solid var(--border-dim);
--border-gold: 1px solid rgba(255,255,255,.18);
/* Transitions */
--trans: all .22s cubic-bezier(.4,0,.2,1);
/* Shadows */
--shadow-card: 0 4px 24px rgba(0,0,0,.3);
--shadow-panel: 0 24px 64px rgba(0,0,0,.8);
--shadow-glow: 0 8px 32px rgba(255,255,255,.25);
}
/* ── Page transition ── */
#page { animation: pageIn .28s cubic-bezier(.4,0,.2,1); }
@keyframes pageIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Section header system ── */
.sec-label {
font-family: 'DM Mono', monospace;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.sec-label::before {
content: '';
display: inline-block;
width: 18px;
height: 1px;
background: var(--gold);
flex-shrink: 0;
}
.sec-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(30px, 5vw, 52px);
line-height: 1;
letter-spacing: 1.5px;
margin-bottom: 32px;
color: var(--white);
}
.sec-title .accent, .section-title .accent { color: var(--gold); }
.sec-sub {
font-size: 15px;
color: var(--steel-light);
line-height: 1.75;
max-width: 540px;
font-weight: 300;
margin-bottom: 40px;
}
/* ── Icon system ── */
.icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon svg { width: 100%; height: 100%; }
.icon-sm { width: 18px; height: 18px; }
.icon-md { width: 22px; height: 22px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }
/* ── Icon box ── */
.icon-box {
width: 48px; height: 48px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.icon-box-gold { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: var(--gold); }
.icon-box-red { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: var(--gold); }
.icon-box-green{ background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: var(--gold); }
.icon-box-blue { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: var(--gold); }
.icon-box-steel{ background: rgba(255,255,255,.06);border: 1px solid rgba(255,255,255,.12); color: var(--white); }
/* ── Breadcrumb ── */
.breadcrumb {
padding: 84px 40px 0;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
font-size: 12px;
font-family: 'DM Sans', sans-serif;
color: var(--steel);
}
.bc-btn {
color: var(--steel);
background: none;
border: none;
cursor: pointer;
font-size: 12px;
font-family: 'DM Sans', sans-serif;
padding: 0;
transition: color .18s;
display: flex;
align-items: center;
gap: 4px;
}
.bc-btn:hover { color: var(--gold); }
.bc-sep { color: var(--steel); font-size: 10px; }
/* ── Card ── */
.card {
background: var(--dark3);
border: var(--border-subtle);
border-radius: 8px;
transition: var(--trans);
}
.card-hover:hover {
border-color: rgba(255,255,255,.2);
transform: translateY(-2px);
box-shadow: var(--shadow-card);
}
/* ── Back button ── */
.back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--steel);
font-size: 13px;
background: none;
border: none;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
padding: 0;
margin-bottom: 20px;
transition: color .18s;
}
.back-btn:hover { color: var(--white); }
/* ── CTA Buttons — unified ── */
.btn-call {
display: inline-flex; align-items: center; gap: 10px;
background: var(--gold); color: var(--dark);
padding: 15px 28px; border-radius: var(--radius);
font-weight: 700; font-size: 15px; border: none;
cursor: pointer; transition: var(--trans);
text-decoration: none; white-space: nowrap;
animation: goldGlow 3s ease infinite;
}
.btn-call:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.btn-outline {
display: inline-flex; align-items: center; gap: 10px;
background: transparent; color: var(--white);
padding: 15px 26px; border-radius: var(--radius);
font-weight: 500; font-size: 15px;
border: var(--border-subtle);
cursor: pointer; transition: var(--trans);
font-family: 'DM Sans', sans-serif; white-space: nowrap;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
@keyframes goldGlow { 0%,100%{box-shadow:0 0 0 rgba(255,255,255,0)} 50%{box-shadow:0 0 20px rgba(255,255,255,.2)} }
/* ── Tag / pill ── */
.tag {
display: inline-flex; align-items: center; gap: 5px;
font-family: 'DM Mono', monospace;
font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
padding: 4px 12px; border-radius: 100px;
}
.tag-gold { background: rgba(255,255,255,.1); color: var(--gold); border: 1px solid rgba(255,255,255,.2); }
.tag-red { background: rgba(255,255,255,.1); color: var(--gold); border: 1px solid rgba(255,255,255,.2); }
.tag-steel { background: rgba(255,255,255,.06);color: var(--white); border: 1px solid rgba(255,255,255,.12); }
.tag-green { background: rgba(255,255,255,.1); color: var(--gold); border: 1px solid rgba(255,255,255,.2); }
/* ── Divider ── */
.divider { height: 1px; background: var(--border-subtle); margin: 0; }
/* ── Status dot ── */
.status-dot {
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.status-dot-green { background: var(--green); animation: pulse 2s infinite; }
.status-dot-gold { background: var(--gold); }
.status-dot-red { background: var(--red); animation: pulse 2s infinite; }
/* ── Remove clutter from section-label old style ── */
.section-label {
font-family: 'DM Mono', monospace;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.section-label::before {
content: '';
width: 14px; height: 1px;
background: var(--gold);
display: inline-block;
flex-shrink: 0;
}
/* ── Inner page hero ── */
.page-hero {
padding: 24px 40px 60px;
background: var(--dark);
position: relative;
overflow: hidden;
}
.page-hero-grid {
position: absolute; inset: 0; opacity: .03;
background-image: linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px);
background-size: 50px 50px;
}
.page-hero-glow {
position: absolute; width: 500px; height: 500px;
border-radius: 50%; pointer-events: none;
top: 50%; right: 0; transform: translateY(-50%);
}
.page-hero-content { position: relative; z-index: 2; max-width: 680px; }
/* ── SERVICE PAGE VISUAL PANEL ── */
.svc-visual-panel{
position:absolute;right:0;top:0;bottom:0;width:38%;
display:flex;align-items:center;justify-content:center;
overflow:hidden;pointer-events:none;
}
.svc-visual-inner{
width:260px;height:260px;border-radius:16px;
border:1px solid rgba(255,255,255,.2);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:16px;position:relative;overflow:hidden;
background:var(--dark3);
}
.svc-visual-inner::before{
content:'';position:absolute;inset:0;
background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.12) 0%,transparent 60%);
}
.svc-visual-icon{
font-size:64px;position:relative;z-index:1;
color:var(--gold);opacity:.9;
}
.svc-visual-icon svg{width:64px;height:64px;stroke-width:1.25}
.svc-visual-label{
font-family:'DM Mono',monospace;font-size:10px;letter-spacing:3px;
text-transform:uppercase;color:var(--steel);position:relative;z-index:1;
}
.svc-visual-price{
font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--gold);
letter-spacing:1px;position:relative;z-index:1;
}
.svc-visual-panel::after{
content:'';position:absolute;inset:0;
background:linear-gradient(to right,var(--dark) 0%,transparent 40%);
}
@media(max-width:960px){.svc-visual-panel{display:none}}
/* ── Responsive fixes ── */
@media(max-width:600px){
.breadcrumb{padding:68px 16px 0}
.page-hero{padding:16px 16px 48px}
.back-btn{margin-bottom:12px}
.btn-call,.btn-outline{width:100%;justify-content:center}
#page section>[style*="grid-template-columns:1.2fr 1fr"]{grid-template-columns:1fr!important}
}
@media(min-width:601px) and (max-width:960px){
.breadcrumb{padding:calc(108px + 8px) 24px 0}
.page-hero{padding:16px 24px 52px}
}
/* ── Nav improvements ── */
.nav-links > a, .nav-trigger {
position: relative;
}
.nav-links > a::after, .nav-trigger::after {
content: '';
position: absolute;
bottom: -2px; left: 50%; right: 50%;
height: 1px;
background: var(--gold);
transition: left .2s, right .2s;
}
.nav-links > a:hover::after, .nav-trigger:hover::after {
left: 12px; right: 12px;
}
/* Active nav state */
.nav-links > a.active { color: var(--gold); }
/* ── Smooth section transitions ── */
section, .trust-bar, .eb-wrap {
transition: none;
}
/* ── Better card hover states ── */
.svc-card, .blog-card, .cat-card, .review-card {
transition: transform .22s cubic-bezier(.4,0,.2,1),
box-shadow .22s cubic-bezier(.4,0,.2,1),
border-color .22s cubic-bezier(.4,0,.2,1),
background .22s cubic-bezier(.4,0,.2,1);
}
/* ── Fix why-hcard gap ── */
.why-home-grid { gap: 2px; }
.why-hcard {
border-bottom: 3px solid transparent;
transition: background .22s, border-color .22s;
}
.why-hcard:hover { border-bottom-color: var(--gold); }
/* ── Blog card image taller ── */
.blog-card-img { height: 160px; }
/* ── FAQ page improvements ── */
.faq-q-text { font-size: 14px; line-height: 1.5; }
.faq-a-inner { font-size: 13px; }
/* ── Better input focus ── */
.field:focus {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(255,255,255,.1);
outline: none;
}
/* ── Related card in service pages ── */
.rel-card {
transition: transform .2s, border-color .2s;
}
.rel-card:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,.2) !important;
}
/* ── Pricing tab active color override ── */
.price-tab.active {
background: var(--bg-hover) !important;
}
/* ── Gallery hover overlay ── */
.gallery-thumb::after {
content: 'View';
position: absolute;
inset: 0;
background: rgba(255,255,255,.0);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
letter-spacing: 2px;
color: var(--gold);
opacity: 0;
transition: all .25s;
}
.gallery-thumb:hover::after {
background: rgba(0,0,0,.5);
opacity: 1;
}
/* ── Remove ugly gap between sections ── */
.page-hero + section,
.page-hero + div {
margin-top: 0;
}
/* ── Booking step indicator ── */
.bk-step.done .bk-step-num {
background: var(--gold);
color: var(--dark);
border-color: var(--gold);
}
/* ── Booking: Step transition ── */
.bk-panel-enter{animation:bkSlideIn .35s cubic-bezier(.4,0,.2,1) both}
@keyframes bkSlideIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* ── Booking: Emergency ASAP banner ── */
.bk-emergency-banner{background:linear-gradient(135deg,rgba(224,53,53,.12) 0%,rgba(255,255,255,.08) 100%);border:1px solid rgba(224,53,53,.3);border-radius:8px;padding:0;margin-bottom:16px;cursor:pointer;transition:all .25s;overflow:hidden}
.bk-emergency-banner:hover{border-color:rgba(224,53,53,.5);background:linear-gradient(135deg,rgba(224,53,53,.18) 0%,rgba(255,255,255,.12) 100%);transform:translateY(-1px)}
.bk-emergency-inner{display:flex;align-items:center;gap:16px;padding:18px 20px}
.bk-emergency-pulse{width:12px;height:12px;border-radius:50%;background:var(--red);flex-shrink:0;animation:emergPulse 1.5s ease-in-out infinite}
@keyframes emergPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,53,53,.5)}50%{box-shadow:0 0 0 8px rgba(224,53,53,0)}}
.bk-emergency-title{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:1px;color:var(--red);display:flex;align-items:center;gap:6px}
.bk-emergency-sub{font-size:12px;color:var(--steel-light);margin-top:2px}
.bk-emergency-btn{background:var(--red);color:var(--btn-text);border:none;border-radius:4px;padding:10px 20px;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:1px;cursor:pointer;white-space:nowrap;transition:background .2s;flex-shrink:0}
.bk-emergency-btn:hover{background:#c42d2d}
@media(max-width:600px){
.bk-emergency-inner{flex-direction:column;align-items:flex-start;gap:10px}
.bk-emergency-btn{width:100%;text-align:center}
.bk-emergency-pulse{display:none}
}
/* ── Booking: Time period groups ── */
.bk-time-period{margin-bottom:16px}
.bk-time-period:last-child{margin-bottom:0}
.bk-time-period-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel);margin-bottom:8px;display:block}
/* ── Booking: Field label ── */
.bk-field-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel);margin-bottom:6px}
/* ── Booking: Inline form error ── */
.bk-form-error{background:rgba(224,53,53,.1);border:1px solid rgba(224,53,53,.3);border-radius:6px;padding:12px 16px;margin-bottom:16px;color:var(--red);font-size:13px;display:flex;align-items:center;gap:8px;animation:bkShake .4s ease}
@keyframes bkShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
/* ── Booking: Confirmation check animation ── */
.bk-confirm-check{margin-bottom:20px}
.bk-confirm-circle{stroke-dasharray:157;stroke-dashoffset:157;animation:bkCircleDraw .6s .2s ease forwards}
.bk-confirm-tick{stroke-dasharray:40;stroke-dashoffset:40;animation:bkTickDraw .4s .7s ease forwards}
@keyframes bkCircleDraw{to{stroke-dashoffset:0}}
@keyframes bkTickDraw{to{stroke-dashoffset:0}}
.bk-detail-label{font-size:10px;font-family:'DM Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel);margin-bottom:2px}
.bk-detail-val{font-size:14px;color:var(--white)}
/* ── 404 Page ── */
.not-found{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:40px 24px}
.nf-icon{font-size:48px;margin-bottom:16px;opacity:.4}
.nf-icon .ico{width:64px;height:64px}
.nf-icon .ico svg{width:64px;height:64px;stroke:var(--gold)}
.nf-title{font-family:'Bebas Neue',sans-serif;font-size:120px;line-height:1;color:var(--gold);margin:0}
.nf-subtitle{font-family:'DM Mono',monospace;font-size:14px;letter-spacing:4px;color:var(--steel);margin:8px 0 16px}
.nf-text{color:var(--steel-light);font-size:15px;max-width:400px}
/* ── Loading Spinner ── */
.btn-loading{position:relative;pointer-events:none;color:transparent!important}
.btn-loading::after{content:'';position:absolute;width:20px;height:20px;top:50%;left:50%;margin:-10px 0 0 -10px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--gold);border-radius:50%;animation:btnSpin .6s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}
/* ══════════════════════════════════════════════════════════
HERO REDESIGN (v4.9)
══════════════════════════════════════════════════════════ */
/* Live tech badge */
.h-live-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.35);color:var(--green);padding:8px 18px;border-radius:100px;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(46,204,113,.3)}50%{box-shadow:0 0 0 8px rgba(46,204,113,0)}}
/* Trust badges 2x2 grid */
/* ─── Sticky mobile call-bar ─── */
#mobile-call-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9998;background:linear-gradient(180deg,#FFFFFF,#FFFFFF);color:#0A0A0A;text-decoration:none;padding:12px 16px;align-items:center;gap:12px;box-shadow:0 -8px 24px rgba(0,0,0,.4);font-family:'DM Sans',sans-serif}
.mcb-icon{flex-shrink:0;width:42px;height:42px;background:rgba(0,0,0,.18);border-radius:50%;display:flex;align-items:center;justify-content:center}
.mcb-icon svg{width:22px;height:22px}
.mcb-text{flex:1;display:flex;flex-direction:column;line-height:1.1;min-width:0}
.mcb-label{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:rgba(0,0,0,.65);text-transform:uppercase;margin-bottom:3px}
.mcb-phone{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1px;color:#0A0A0A}
.mcb-cta{flex-shrink:0;font-family:'DM Mono',monospace;font-size:11px;font-weight:700;letter-spacing:1.5px;background:#0A0A0A;color:#FFFFFF;padding:8px 14px;border-radius:6px}
@media(max-width:840px){
#mobile-call-bar{display:flex}
body{padding-bottom:78px}
footer{margin-bottom:0}
}
/* ─── R3 rating-summary reviews ─── */
.rv-rating-block{max-width:1000px;margin:0 auto;background:var(--dark2);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:36px 28px}
.rv-rating-hero{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;padding-bottom:28px;border-bottom:1px solid var(--border-dim);margin-bottom:28px}
.rv-rating-num{font-family:'Bebas Neue',sans-serif;font-size:120px;line-height:.85;color:var(--gold);letter-spacing:2px}
.rv-rating-side{display:flex;flex-direction:column;gap:8px}
.rv-rating-stars{font-size:24px;color:var(--gold-light);letter-spacing:4px;line-height:1}
.rv-rating-google{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--steel-light);display:flex;align-items:center}
.rv-rating-stats{display:flex;gap:24px;margin-top:14px;flex-wrap:wrap;font-family:'DM Mono',monospace;font-size:11px;color:var(--steel);letter-spacing:1px;text-transform:uppercase}
.rv-rating-stats strong{color:var(--gold);font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;display:inline-block;margin-right:4px;vertical-align:middle}
.rv-snippets{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.rv-snippet{background:rgba(255,255,255,.04);border-left:3px solid var(--gold);padding:18px 18px 14px;position:relative;border-radius:0 6px 6px 0}
.rv-snippet-mark{position:absolute;top:-4px;left:8px;font-size:48px;color:var(--gold);font-family:'Bebas Neue',sans-serif;line-height:1;opacity:.5}
.rv-snippet-text{font-size:13px;color:var(--white);line-height:1.6;font-style:italic;margin:0 0 10px;padding-top:8px}
.rv-snippet-attr{font-family:'DM Mono',monospace;font-size:10px;color:var(--steel);letter-spacing:1px;text-transform:uppercase}
@media(max-width:680px){
.rv-rating-hero{grid-template-columns:1fr;gap:16px;text-align:center}
.rv-rating-num{font-size:96px}
.rv-rating-side{align-items:center}
.rv-rating-google{justify-content:center}
.rv-rating-stats{justify-content:center;gap:18px}
}
/* ─── S3 tabbed services ─── */
.svc-tabs{max-width:980px;margin:0 auto}
.svc-tab-nav{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;justify-content:center}
.svc-tab-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:transparent;border:1px solid var(--border-med);border-radius:6px;color:var(--steel-light);font-family:'DM Mono',monospace;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all .2s}
.svc-tab-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,255,255,.05)}
.svc-tab-btn.active{background:var(--gold);color:var(--btn-text);border-color:var(--gold)}
.svc-tab-btn .ico{display:inline-flex;align-items:center}
.svc-tab-btn .ico svg{width:14px;height:14px}
.ico svg path,.ico svg circle,.ico svg rect,.ico svg polygon,.ico svg ellipse{fill:currentColor!important}
.svc-tab-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.svc-tab-item{display:grid;grid-template-columns:40px 1fr 24px;gap:14px;align-items:center;padding:16px;background:var(--dark2);border:1px solid var(--border-dim);border-radius:8px;cursor:pointer;text-align:left;font-family:'DM Sans',sans-serif;transition:all .2s}
.svc-tab-item:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.svc-tab-ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,255,255,.1);border-radius:8px}
.svc-tab-ic svg{width:22px;height:22px}
.svc-tab-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.svc-tab-title{color:var(--white);font-size:14px;font-weight:600}
.svc-tab-desc{color:var(--steel);font-size:11px;line-height:1.4}
.svc-tab-price{font-family:'Bebas Neue',sans-serif;font-size:18px;color:var(--gold);letter-spacing:1px;white-space:nowrap}
@media(max-width:600px){
.svc-tab-btn{font-size:11px;padding:8px 14px}
.svc-tab-item{padding:12px;gap:10px}
.svc-tab-price{font-size:16px}
}
.h-trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:420px;margin:0 0 28px}
.h-trust-grid-3{grid-template-columns:repeat(3,1fr);max-width:560px}
.h-trust-badge-emp{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);color:var(--gold);font-weight:700}
.h-trust-badge-emp .ico svg{filter:none}
.hero-right{position:relative;width:100%;min-height:520px;display:flex;align-items:stretch}
.hero-photo{flex:1;border-radius:14px;background-size:cover;background-position:center;background-color:#141414;border:1px solid rgba(255,255,255,.18);position:relative;overflow:hidden;min-height:520px;box-shadow:0 32px 80px rgba(0,0,0,.4)}
.hero-photo::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,10,10,.7) 100%);pointer-events:none}
.hero-photo-tag{position:absolute;top:18px;left:18px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--gold);background:rgba(10,10,10,.7);border:1px solid rgba(255,255,255,.3);padding:5px 11px;border-radius:100px;backdrop-filter:blur(4px)}
.hero-phone-card-floating{position:absolute;bottom:18px;left:18px;right:18px;max-width:none!important;width:auto!important;background:rgba(20,20,20,.95)!important;backdrop-filter:blur(12px);padding:18px 20px!important;animation:none!important}
/* ─── Mobile hero adjustments ─── */
@media(max-width:840px){
/* Stack hero columns — extra padding-top clears the fixed nav comfortably */
#hero{padding:170px 18px 40px!important;min-height:auto!important}
#hero-split{grid-template-columns:1fr!important;gap:24px!important;text-align:center}
#hero-split > div:first-child > div[style*="display:flex"]{justify-content:center;flex-direction:column;gap:10px}
#hero-split h1{font-size:clamp(36px,11vw,56px)!important;letter-spacing:1px!important;margin-bottom:12px!important}
#hero-split p{font-size:14px!important;margin-bottom:18px!important;max-width:100%!important}
/* Trust badges: 2-column at small width, 3-column at medium */
.h-trust-grid-3{grid-template-columns:1fr 1fr!important;max-width:100%!important;margin-left:auto;margin-right:auto;margin-bottom:20px!important}
.h-trust-badge{font-size:10px!important;padding:9px 8px!important;letter-spacing:1px!important}
/* Right column on mobile */
.hero-right{min-height:auto;flex-direction:column}
.hero-photo{min-height:240px;max-height:320px}
.hero-phone-card-floating{position:static!important;margin-top:12px;width:100%!important;max-width:100%!important;left:auto!important;right:auto!important;bottom:auto!important}
/* CTAs full width, stacked */
.h-cta-emergency,.h-cta-quote{width:100%!important;max-width:100%!important;font-size:18px!important;padding:14px 18px!important}
/* Phone card on mobile: smaller */
#hero-split .hero-phone-card{margin:0;max-width:100%}
.hpc-phone{font-size:24px!important}
.hpc-label{font-size:9px!important}
/* Hide nav CALL US button on mobile — sticky bar replaces it */
nav .nav-cta{display:none!important}
}
@media(max-width:600px){
#hero-split h1{font-size:clamp(32px,10vw,48px)!important}
.hero-photo{min-height:200px}
.h-trust-badge{font-size:9px!important;padding:8px 6px!important}
}
#hero-split .hero-phone-card{width:100%;max-width:300px;margin:0 0 0 auto}
@media(max-width:840px){
#hero-split{grid-template-columns:1fr!important;text-align:center}
#hero-split .h-trust-grid{margin-left:auto;margin-right:auto}
#hero-split .hero-phone-card{margin:0 auto}
#hero-split > div:first-child > div[style*="display:flex"]{justify-content:center}
}
.h-trust-badge{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border:1px solid var(--border-med);border-radius:6px;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1.5px;color:var(--gold);background:rgba(255,255,255,.04);white-space:nowrap}
/* Primary CTA — emergency call */
.h-cta-emergency{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:460px;margin:0 auto 12px;padding:18px 24px;background:var(--gold);color:var(--btn-text);border-radius:8px;font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px;text-decoration:none;transition:all .2s}
.h-cta-emergency:hover{background:var(--gold-light);transform:translateY(-2px)}
/* Secondary CTA — quote */
.h-cta-quote{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:460px;margin:0 auto;padding:16px 24px;background:transparent;color:var(--white);border:1px solid var(--border-med);border-radius:8px;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1.5px;cursor:pointer;transition:all .2s;font-family:'Bebas Neue',sans-serif}
.h-cta-quote:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,255,255,.04)}
@media(max-width:600px){
#hero{padding:170px 16px 40px!important;text-align:center}
#hero h1{font-size:clamp(46px,13vw,72px)!important}
#hero p{font-size:14px!important}
.h-live-badge{font-size:10px;padding:7px 14px}
.h-trust-grid{max-width:100%;grid-template-columns:1fr 1fr}
.h-trust-badge{font-size:9px;padding:9px 6px;letter-spacing:.8px}
.h-cta-emergency{font-size:18px;padding:15px 16px;max-width:100%}
.h-cta-quote{font-size:15px;padding:13px 16px;max-width:100%}
}
/* ══════════════════════════════════════════════════════════
MOBILE UX POLISH (v4.2)
══════════════════════════════════════════════════════════ */
/* (removed: old footer padding for bottom bar — replaced by floating button) */
/* ── Fix: Booking form fields stack on mobile ── */
@media(max-width:600px){
.bk-card [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
}
/* ── Fix: Calendar touch targets ── */
@media(max-width:600px){
.bk-cal-day{min-height:40px;font-size:14px}
.bk-cal-grid{gap:3px}
.bk-time-btn{padding:13px 8px;font-size:13px}
.bk-time-grid{grid-template-columns:repeat(2,1fr)}
}
/* ── Fix: Mobile menu touch feedback ── */
.mob-top-link:active,.mob-plain:active{background:rgba(255,255,255,.12)!important;color:var(--gold)}
.mob-svc-btn:active{background:rgba(255,255,255,.1)!important}
.bk-svc-btn:active{transform:scale(.98);transition:transform .1s}
/* ── Fix: Service page hero on mobile ── */
@media(max-width:600px){
.svc-hero{padding:16px 18px 40px!important;min-height:auto!important}
.svc-hero h1{font-size:clamp(40px,12vw,56px)!important}
}
/* ── Fix: Dispatch ticker font on mobile ── */
@media(max-width:600px){
.dt-item{font-size:11px}
.dt-city{font-size:11px}
}
/* ── Fix: Pricing cards on very small screens ── */
@media(max-width:400px){
.tprice-grid{grid-template-columns:1fr!important}
.cf-row{grid-template-columns:1fr!important}
}
/* ── Fix: Why Choose Us cards scroll hint ── */
@media(max-width:768px){
.why-grid{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.why-hcard{scroll-snap-align:start;flex-shrink:0}
}
/* ── Fix: Tighter section padding on mobile ── */
@media(max-width:600px){
#page section{padding-top:48px!important;padding-bottom:48px!important;padding-left:16px!important;padding-right:16px!important}
}
/* ── Fix: Contact form fields on small mobile ── */
@media(max-width:400px){
.cf-card [style*="grid-template-columns"]{grid-template-columns:1fr!important}
}
/* ══════════════════════════════════════════════════════════
BOLD DESIGN UPGRADE (v5.7)
══════════════════════════════════════════════════════════ */
/* ── Bolder section titles ── */
.section-title{position:relative;display:inline-block}
.section-title::after{content:none}
.section-title .accent,.section-title span[style*="color:var(--gold)"]{text-shadow:none}
/* ── Animated gold glow on hero headline ── */
#hero h1 span[style*="color:var(--gold)"]{text-shadow:none;animation:none}
/* ── Bolder service category cards ── */
.cat-card{border:2px solid var(--border-dim)!important;transition:all .3s!important}
.cat-card:hover{border-color:var(--gold)!important;transform:translateY(-4px);box-shadow:0 12px 40px rgba(255,255,255,.15)!important}
/* ── Bolder Why Choose Us cards ── */
.why-hcard{border-left:3px solid var(--gold);transition:all .3s}
.why-hcard:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
/* ── Bolder How It Works numbers ── */
.how-num{background:var(--gold)!important;color:var(--dark)!important;border:none!important;font-size:20px!important;width:52px!important;height:52px!important;box-shadow:0 4px 16px rgba(255,255,255,.3)}
/* ── Bolder review cards ── */
.review-card{transition:all .3s}
.review-card:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.25)}
/* ── Bolder trust badges ── */
.h-trust-badge{border:2px solid rgba(255,255,255,.25);font-weight:600;transition:all .25s}
.h-trust-badge:hover{border-color:var(--gold);background:rgba(255,255,255,.08);transform:translateY(-1px)}
/* ── Emergency CTA pulse animation ── */
.h-cta-emergency{animation:none}
/* ── Bolder nav CTA ── */
.nav-cta{box-shadow:0 2px 12px rgba(255,255,255,.3)!important;transition:all .25s!important}
.nav-cta:hover{transform:translateY(-1px)!important;box-shadow:0 4px 20px rgba(255,255,255,.45)!important}
/* ── Bolder blog cards ── */
.blog-card{transition:all .3s!important}
.blog-card:hover{transform:translateY(-6px)!important;box-shadow:0 16px 48px rgba(0,0,0,.3)!important;border-color:var(--gold)!important}
/* ── Animated live badge ── */
.h-live-badge strong{animation:liveCount 1s ease-in-out infinite alternate}
@keyframes liveCount{0%{opacity:.8}100%{opacity:1}}
/* ── Bolder pricing cards ── */
.tprice-card{transition:all .3s}
.tprice-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.25);border-color:var(--gold)}
/* ── Bolder form inputs on focus ── */
.field:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(255,255,255,.15)!important;outline:none}
/* ── Gold gradient accent line ── */
.bk-card,.bk-confirm{border-top:3px solid var(--gold)!important}
/* ── Smooth page-in animation ── */
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
#page{animation:pageIn .3s ease}
/* ── Google rating badge ── */
.h-google-badge{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:22px}
/* ── Cities ticker under CTAs ── */
.h-cities{margin-top:20px;font-size:11px;color:var(--steel);font-family:'DM Mono',monospace;letter-spacing:.5px;opacity:.6}
/* ── Gradient border on service category cards ── */
.cat-card{background:linear-gradient(135deg,var(--dark3) 0%,var(--dark4) 100%)!important}
/* ── Section divider lines ── */
section+section{border-top:1px solid var(--border-dim)}
/* ── Gradient accent on page hero sections ── */
.page-hero,.bk-hero{background:linear-gradient(180deg,var(--dark) 0%,var(--dark2) 100%)!important}
/* ── Subtle noise texture overlay ── */
#hero::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");pointer-events:none;z-index:1}
/* ── Better FAQ items ── */
.faq-item{border-left:3px solid transparent;transition:border-color .2s}
.faq-item.open{border-left-color:var(--gold)}
/* ── Better blog card image areas ── */
.blog-card-img{background:linear-gradient(135deg,var(--dark3) 0%,var(--dark4) 100%)}
/* ── Gradient on CTA bands ── */
[style*="background:var(--gold)"]{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%)!important}
/* ─── FINAL hero padding override (last in file wins source order) ─── */
@media(max-width:840px){
section#hero{padding-top:180px!important}
}
/* ─── PRICING PAGE ─── */
.pricing-table{display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.02);border-radius:10px;padding:8px;border:1px solid var(--border-dim)}
.pricing-row{display:grid;grid-template-columns:240px 1fr auto;gap:18px;align-items:center;padding:16px 18px;background:var(--dark2);border:1px solid transparent;border-radius:8px;cursor:pointer;transition:all .18s}
.pricing-row:hover{border-color:var(--gold);transform:translateY(-1px);background:rgba(255,255,255,.04)}
.pricing-cell-name{font-family:'DM Sans',sans-serif;font-weight:600;font-size:15px;color:var(--white);display:flex;align-items:center;gap:10px}
.pricing-cell-name .ico svg{width:18px;height:18px}
.pricing-cell-desc{font-size:12px;color:var(--steel);line-height:1.5}
.pricing-cell-price{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--gold);letter-spacing:1px;white-space:nowrap;justify-self:end;text-align:right}
@media(max-width:700px){
.pricing-row{grid-template-columns:1fr auto;gap:8px}
.pricing-cell-desc{grid-column:1/-1;font-size:11px;margin-top:-4px}
.pricing-cell-name{font-size:14px}
.pricing-cell-price{font-size:18px}
}
/* ─── PROMOTIONS PAGE ─── */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:16px}
.promo-card{background:var(--dark2);border:1px solid var(--border-dim);border-radius:12px;padding:24px 22px;position:relative;transition:all .25s;display:flex;flex-direction:column;gap:8px}
.promo-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.promo-tag{position:absolute;top:14px;right:14px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;padding:3px 10px;border-radius:100px;font-weight:700}
.promo-tag-standing{background:rgba(255,255,255,.1);color:var(--gold);border:1px solid rgba(255,255,255,.2)}
.promo-tag-limited{background:rgba(255,255,255,.15);color:var(--gold);border:1px solid var(--gold)}
.promo-icon{width:48px;height:48px;background:rgba(255,255,255,.08);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.promo-icon svg{width:24px;height:24px}
.promo-amount{font-family:'Bebas Neue',sans-serif;font-size:36px;color:var(--gold);letter-spacing:1.5px;line-height:1}
.promo-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1.5px;color:var(--white);margin:4px 0 4px}
.promo-desc{font-size:13px;color:var(--steel-light);line-height:1.5;flex:1;margin:0}
.promo-code{font-family:'DM Mono',monospace;font-size:11px;color:var(--steel);letter-spacing:.8px;padding-top:10px;border-top:1px solid var(--border-dim);margin-top:8px}
.promo-code span{color:var(--gold);font-weight:700;letter-spacing:1.5px}
/* ─── LEGAL PAGES (Privacy, Terms) ─── */
.legal-page h2{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1.5px;color:var(--gold);margin:32px 0 12px}
.legal-page p,.legal-page li{color:var(--steel-light);font-size:14px;line-height:1.75;margin-bottom:12px}
.legal-page ul{padding-left:22px;margin-bottom:16px}
.legal-page li{margin-bottom:6px}
.legal-page a{color:var(--gold);text-decoration:underline}
/* ─── QUOTE CALCULATOR PAGE ─── */
.qc-card{background:var(--dark2);border:1px solid var(--border-dim);border-radius:14px;padding:32px 28px;display:flex;flex-direction:column;gap:24px}
.qc-step{display:flex;flex-direction:column;gap:10px}
.qc-label{display:flex;align-items:center;gap:10px;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1.5px;color:var(--white)}
.qc-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--gold);color:var(--btn-text);border-radius:50%;font-size:13px;font-weight:700;font-family:'DM Mono',monospace}
.qc-select{background:var(--dark);color:var(--white);border:1px solid var(--border-med);border-radius:8px;padding:14px 16px;font-family:'DM Sans',sans-serif;font-size:15px;cursor:pointer;width:100%;transition:border-color .2s}
.qc-select:focus{outline:none;border-color:var(--gold)}
.qc-select option{background:var(--dark)}
.qc-radio-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.qc-radio-group label{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--dark);border:1px solid var(--border-dim);border-radius:8px;cursor:pointer;font-size:13px;color:var(--steel-light);transition:all .2s}
.qc-radio-group label:hover{border-color:var(--steel)}
.qc-radio-group input[type="radio"]{accent-color:var(--gold);margin:0}
.qc-radio-group label:has(input:checked){border-color:var(--gold);background:rgba(255,255,255,.05);color:var(--white)}
.qc-result{margin-top:20px;background:var(--dark2);border:1px solid var(--gold);border-radius:14px;padding:28px 24px;text-align:center}
.qc-result-label{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--gold);margin-bottom:8px;text-transform:uppercase}
.qc-result-amount{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,10vw,72px);color:var(--white);letter-spacing:1px;line-height:1;margin-bottom:6px}
.qc-result-svc{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:1.5px;color:var(--steel);text-transform:uppercase;margin-bottom:18px}
.qc-result-breakdown{background:var(--dark);border-radius:8px;padding:14px 16px;margin-bottom:18px;display:flex;flex-direction:column;gap:6px}
.qc-bd-row{display:flex;justify-content:space-between;font-size:12px;color:var(--steel-light);font-family:'DM Mono',monospace;letter-spacing:.5px}
.qc-bd-row span:last-child{color:var(--white)}
.qc-result-cta-row{margin-bottom:14px}
.qc-fineprint{color:var(--steel);font-size:11px;line-height:1.5;font-style:italic;margin:0}
@media(max-width:600px){
.qc-card{padding:22px 18px}
.qc-result{padding:22px 16px}
.qc-radio-group{grid-template-columns:1fr}
}
/* ─── DESIGN POLISH ─── */
/* Subtle section divider between major sections */
section + section{position:relative}
section + section::before{content:'';position:absolute;left:50%;top:0;width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--border-med),transparent);transform:translateX(-50%);opacity:.6}
/* Hover lifts on cards (tasteful, consistent) */
.svc-tab-item,.rv-card,.hp-blog-card,.cat-card,.promo-card,.pricing-row,.tprice-card,.blog-card,.hfaq-item{transition:transform .25s cubic-bezier(.4,0,.2,1), border-color .2s, box-shadow .25s}
.svc-tab-item:hover,.rv-card:hover,.hp-blog-card:hover,.cat-card:hover,.promo-card:hover,.tprice-card:hover,.blog-card:hover{will-change:transform}
/* Smooth focus rings for accessibility */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
/* Smoother section title spacing */
.section-title{margin-bottom:32px}
.section-label{margin-bottom:12px}
/* Animated underline on nav links */
.nav-links a{position:relative}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .25s}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(.7)}
/* Better empty state */
.empty-state{padding:64px 24px;text-align:center;color:var(--steel-light)}
.empty-state .ico svg{width:48px;height:48px;opacity:.4;margin-bottom:16px}
.empty-state-text{font-size:14px;line-height:1.6}
/* Print styles — simple readable print */
@media print{
nav,#mobile-call-bar,.eb-wrap,.h-cta-emergency,.h-cta-quote,.h-cta-call,.hero-photo,.gallery,#admin-overlay,#admin-shell{display:none!important}
body{background:#fff!important;color:#000!important;font-family:Georgia,serif}
.section-title,.h-title,h1,h2,h3{color:#000!important;text-shadow:none!important}
a{color:#000!important;text-decoration:underline}
}
/* ─── ANIMATIONS & MOBILE POLISH ─── */
/* Animated counter (animated by JS via data-counter-target attribute) */
.counter{display:inline-block;transition:opacity .3s}
/* Smooth scroll for in-page anchors */
html{scroll-behavior:smooth}
/* Mobile touch target audit — ensure every actionable element is ≥44px */
@media(max-width:840px){
button,a,select,input[type="checkbox"],input[type="radio"]{min-height:38px}
.nav-cta,.h-cta-emergency,.h-cta-quote,.h-cta-call,.eb-btn,.btn-primary,.bk-emergency-btn,.svc-tab-btn{min-height:44px;padding-top:11px;padding-bottom:11px}
.svc-tab-item,.pricing-row,.promo-card,.rv-card{min-height:44px}
/* Tap-highlight feedback */
button,a{-webkit-tap-highlight-color:rgba(255,255,255,.1)}
/* Bigger form fields */
input,textarea,select{font-size:16px!important}
}
/* Loading skeleton (use class="skeleton") */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 100%);background-size:200% 100%;animation:skel 1.6s infinite;border-radius:6px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Subtle hover lift specifically on icon buttons */
.theme-toggle,.hamburger{transition:transform .15s, background .2s}
.theme-toggle:hover,.hamburger:hover{transform:scale(1.05)}
/* Card hover: subtle inner glow on dark mode, soft shadow on light */
[data-theme="light"] .svc-tab-item:hover,
[data-theme="light"] .promo-card:hover,
[data-theme="light"] .rv-card:hover{box-shadow:0 12px 32px rgba(0,0,0,.08)}
/* ─── HERO POLISH: theme-aware photo + tighter headline ─── */
.hero-photo{background-image:url(photos/hero-technician.svg?v=bw3)!important}
html[data-theme="light"] .hero-photo{background-image:url(photos/hero-technician-light.svg?v=bw3)!important;border-color:rgba(0,0,0,.12)!important;box-shadow:0 24px 60px rgba(0,0,0,.08)!important}
/* Hero typography refinement */
#hero-split h1{font-weight:400!important}
#hero-split p{line-height:1.65!important;max-width:440px}
/* Trust badge polish */
.h-trust-badge{padding:11px 12px!important;border-width:1px!important;font-weight:600!important}
.h-trust-badge .ico svg{width:14px;height:14px}
[data-theme="light"] .h-trust-badge{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1)}
/* Polished primary CTA */
.h-cta-emergency{font-weight:600!important;text-transform:uppercase;letter-spacing:1.5px!important;border-radius:10px!important;padding:18px 26px!important}
.h-cta-quote{border-width:1.5px!important;font-weight:600!important;letter-spacing:1.2px!important;border-radius:10px!important;padding:16px 26px!important}
/* Phone card adapts to light mode (was always dark before) */
html[data-theme="light"] .hero-phone-card{background:#FFFFFF!important;border:1px solid rgba(0,0,0,.1)!important;box-shadow:0 12px 40px rgba(0,0,0,.06)!important}
html[data-theme="light"] .hero-phone-card-floating{background:rgba(255,255,255,.96)!important;backdrop-filter:blur(12px)}
html[data-theme="light"] .hpc-phone{color:#1A1A1A!important}
html[data-theme="light"] .hpc-label{color:#666!important}
/* Hero photo tag — adapt */
[data-theme="light"] .hero-photo-tag{background:rgba(255,255,255,.85)!important;border-color:rgba(0,0,0,.12)!important;color:#1A1A1A!important}
/* Subtle separation between phone card and photo */
.hero-phone-card-floating{box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06)!important}
/* ─── HERO DESIGN POLISH v2 ─── */
/* Tighter headline scaling — more balanced */
#hero-split h1{
font-size:clamp(48px,7.5vw,76px)!important;
letter-spacing:1.5px!important;
line-height:.92!important;
margin-bottom:18px!important;
}
#hero-split p{
font-size:15px!important;
line-height:1.65!important;
max-width:440px;
margin-bottom:24px!important;
}
/* Better hero phone card in dark mode — softer */
.hero-phone-card{
background:rgba(20,20,20,.7)!important;
backdrop-filter:blur(20px) saturate(1.2);
border:1px solid rgba(255,255,255,.08)!important;
padding:22px 22px!important;
border-radius:12px!important;
}
.hero-phone-card::before{display:none}
.hpc-phone{font-size:30px!important;letter-spacing:1.5px!important}
.hpc-label{font-size:10px!important;color:rgba(255,255,255,.6)!important;letter-spacing:2px!important}
/* Phone card text — better contrast on dark photo bg */
.hero-phone-card-floating{
background:rgba(15,15,15,.92)!important;
border:1px solid rgba(255,255,255,.12)!important;
}
.hero-phone-card-floating .hpc-phone{color:var(--gold)!important}
/* Light mode phone card — better contrast */
html[data-theme="light"] .hpc-phone{color:#000!important}
html[data-theme="light"] .hero-phone-card,
html[data-theme="light"] .hero-phone-card-floating{
background:rgba(255,255,255,.96)!important;
border-color:rgba(0,0,0,.12)!important;
}
html[data-theme="light"] .hpc-label{color:#666!important}
/* Polish the hero "DISCOUNT · TRUSTED · LICENSED" tag */
.hero-photo-tag{
font-weight:600!important;
font-size:9.5px!important;
letter-spacing:2.5px!important;
padding:6px 14px!important;
}
/* Hero CTAs — refined spacing and typography */
.h-cta-emergency,.h-cta-quote{
height:54px;
display:inline-flex!important;
align-items:center;
justify-content:center;
}
.h-cta-emergency{font-size:14px!important}
.h-cta-quote{font-size:13px!important;color:var(--white)!important}
.h-cta-emergency .ico svg,.h-cta-quote .ico svg{width:16px;height:16px}
/* Light mode CTAs — fix contrast */
html[data-theme="light"] .h-cta-emergency{background:#1A1A1A!important;color:#FFF!important}
html[data-theme="light"] .h-cta-emergency:hover{background:#000!important}
html[data-theme="light"] .h-cta-quote{color:#1A1A1A!important;border-color:rgba(0,0,0,.2)!important}
html[data-theme="light"] .h-cta-quote:hover{border-color:#000!important;background:rgba(0,0,0,.04)!important}
/* ─── Service tab arrow (replaces price column) ─── */
.svc-tab-arrow{font-family:'DM Mono',monospace;font-size:18px;color:var(--steel);text-align:right;transition:transform .2s, color .2s;line-height:1}
.svc-tab-item:hover .svc-tab-arrow{color:var(--gold);transform:translateX(4px)}
/* ─── BOOKING WIZARD ─── */
.bk-wizard{background:var(--dark2);border:1px solid var(--border-dim);border-radius:14px;padding:32px 28px}
.bk-progress{height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;margin-bottom:18px}
.bk-progress-fill{height:100%;background:var(--gold);border-radius:2px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.bk-step-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px}
.bk-step-meta span:first-child{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1.5px;color:var(--steel);text-transform:uppercase}
.bk-step-meta span:last-child{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1.5px;color:var(--gold)}
.bk-step-body{min-height:200px;margin-bottom:20px;display:flex;flex-direction:column;gap:8px;animation:bkStepIn .25s ease-out}
@keyframes bkStepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.bk-field-label{display:block;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--steel);margin:8px 0 6px;text-transform:uppercase}
.bk-input{width:100%;background:var(--dark);color:var(--white);border:1px solid var(--border-med);border-radius:8px;padding:14px 16px;font-family:'DM Sans',sans-serif;font-size:15px;transition:border-color .2s;box-sizing:border-box}
.bk-input:focus{outline:none;border-color:var(--gold)}
textarea.bk-input{resize:vertical;min-height:60px;font-family:inherit}
.bk-row-2{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.bk-fineprint{font-size:11px;color:var(--steel);line-height:1.5;display:flex;align-items:center;gap:6px;margin-top:14px}
.bk-fineprint .ico svg{width:14px;height:14px}
/* Service grid (step 1) */
.bk-svc-grid{display:flex;flex-direction:column;gap:4px;max-height:340px;overflow-y:auto;padding-right:6px}
.bk-svc-cat{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.5px;color:var(--gold);padding:12px 4px 4px;text-transform:uppercase}
.bk-svc-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--dark);border:1px solid var(--border-dim);border-radius:8px;cursor:pointer;transition:all .2s}
.bk-svc-row:hover{border-color:var(--steel)}
.bk-svc-row:has(input:checked){border-color:var(--gold);background:rgba(255,255,255,.04)}
.bk-svc-row input{accent-color:var(--gold);margin:0}
.bk-svc-ic{display:flex;align-items:center;justify-content:center;width:24px;height:24px}
.bk-svc-ic svg{width:18px;height:18px}
.bk-svc-name{font-size:14px;color:var(--white)}
/* When grid (step 3) */
.bk-when-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bk-when-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px;background:var(--dark);border:1px solid var(--border-dim);border-radius:10px;cursor:pointer;transition:all .2s;text-align:center}
.bk-when-card:hover{border-color:var(--steel)}
.bk-when-card.active,.bk-when-card:has(input:checked){border-color:var(--gold);background:rgba(255,255,255,.04)}
.bk-when-card input{display:none}
.bk-when-ic svg{width:28px;height:28px}
.bk-when-title{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:1.5px;color:var(--white)}
.bk-when-sub{font-size:11px;color:var(--steel)}
/* Summary panel (step 4) */
.bk-summary{background:var(--dark);border:1px solid var(--border-dim);border-radius:8px;padding:14px 16px;margin-bottom:10px}
.bk-summary-row{display:flex;justify-content:space-between;font-size:13px;line-height:1.7}
.bk-summary-row span{color:var(--steel);font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.bk-summary-row strong{color:var(--white);font-weight:600;text-align:right}
/* Nav row */
.bk-step-nav{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bk-btn{display:inline-flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:13px;letter-spacing:1.5px;padding:14px 24px;border-radius:8px;cursor:pointer;border:none;transition:all .2s;text-transform:uppercase;font-weight:700}
.bk-btn-back{background:transparent;color:var(--steel);border:1px solid var(--border-med)}
.bk-btn-back:hover{color:var(--white);border-color:var(--white)}
.bk-btn-next{background:var(--gold);color:var(--btn-text);margin-left:auto;min-width:160px}
.bk-btn-next:hover{background:var(--gold-light)}
.bk-btn-next:disabled{opacity:.6;cursor:not-allowed}
@media(max-width:600px){
.bk-wizard{padding:22px 18px}
.bk-when-grid{grid-template-columns:1fr}
.bk-row-2{grid-template-columns:1fr}
.bk-btn{padding:14px 18px;font-size:12px}
}
/* City page details/summary polish */
details summary::-webkit-details-marker{display:none}
details summary{transition:color .2s}
details summary:hover{color:var(--gold)}
details[open] summary span:last-child{transform:rotate(45deg);display:inline-block;transition:transform .25s}
details summary span:last-child{transition:transform .25s;display:inline-block}
/* PWA install banner */
#pwa-banner{position:fixed;left:12px;right:12px;bottom:80px;z-index:9000;background:var(--dark2);border:1px solid var(--border-med);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.5);transform:translateY(140%);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .35s;max-width:480px;margin:0 auto}
#pwa-banner.show{transform:translateY(0);opacity:1}
.pwa-b-inner{display:flex;align-items:center;gap:12px;padding:14px 16px}
.pwa-b-text{flex:1}
.pwa-b-title{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1.2px;color:var(--white)}
.pwa-b-sub{font-size:12px;color:var(--steel);margin-top:2px}
.pwa-b-yes{background:var(--gold);color:var(--btn-text);font-family:'DM Mono',monospace;font-size:12px;letter-spacing:1.5px;padding:10px 18px;border:none;border-radius:8px;cursor:pointer;font-weight:700;text-transform:uppercase}
.pwa-b-yes:hover{background:var(--gold-light)}
.pwa-b-no{background:transparent;color:var(--steel);border:none;font-size:24px;cursor:pointer;padding:0 4px;line-height:1}
.pwa-b-no:hover{color:var(--white)}
@media(min-width:760px){#pwa-banner{left:auto;right:24px;bottom:24px;width:380px}}
/* ═══════════════════════════════════════════════════════════
GLASS BENTO — Direction 02 overlay
Re-skins the existing markup with iOS 26 / Apple Bento vocabulary.
Adds a soft cool background, indigo accent, frosted floating nav,
rounded bento cards, pill buttons. Loads LAST → wins specificity.
═══════════════════════════════════════════════════════════ */
/* ─── Palette (DARK = default, soft navy + indigo) ─── */
:root{
--gold:#C8B655!important;
--gold-light:#DCCB72!important;
--dark:#0E1A12!important;
--dark2:#122017!important;
--dark3:#16271B!important;
--dark4:#1C3022!important;
--white:#F1EFDD!important;
--steel:#9AA797!important;
--steel-light:#C2CBBE!important;
--red:#FF6B6B!important;
--green:#3DDC97!important;
--btn-text:#0E1A12!important;
--border-dim:rgba(255,255,255,.06)!important;
--border-med:rgba(255,255,255,.12)!important;
--bg-hover:rgba(255,255,255,.04)!important;
--nav-bg:rgba(18,32,23,.6)!important;
--nav-border:rgba(255,255,255,.08)!important;
--radius:14px!important;
--gb-accent:#C8B655;
--gb-accent-2:#E0CE7A;
--gb-accent-soft:rgba(200,182,85,.14);
}
/* ─── Palette (LIGHT = soft cool gradient, indigo accent) ─── */
html[data-theme="light"]{
--gold:#24472A!important;
--gold-light:#C2B14F!important;
--dark:#FFFFFF!important;
--dark2:#F7F8F6!important;
--dark3:#FFFFFF!important;
--dark4:#F1F3F0!important;
--white:#14241A!important;
--steel:#5E6B5C!important;
--steel-light:#3F4A3E!important;
--red:#C0392B!important;
--green:#2E7D4F!important;
--btn-text:#FFFFFF!important;
--border-dim:rgba(20,36,26,.07)!important;
--border-med:rgba(20,36,26,.12)!important;
--bg-hover:rgba(20,36,26,.04)!important;
--nav-bg:rgba(255,255,255,.72)!important;
--nav-border:rgba(20,36,26,.1)!important;
--gb-accent:#24472A;
--gb-accent-2:#2E7D4F;
--gb-accent-soft:rgba(36,71,42,.08);
}
html[data-theme="light"] body{
background:linear-gradient(180deg,#FFFFFF 0%,#F6F8F5 100%)!important;
color:#14241A!important;
min-height:100vh;
}
body{background:linear-gradient(180deg,#0E1A12 0%,#122017 100%)!important;min-height:100vh}
/* Gradient text helper — ONLY for explicit .t-gold (not every inline gold) */
.t-gold{
background:linear-gradient(135deg,var(--gb-accent) 0%,var(--gb-accent-2) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
color:var(--gb-accent)!important;
}
/* ─── Floating pill nav ─── */
nav{
position:fixed!important;top:14px!important;left:50%!important;transform:translateX(-50%)!important;
width:auto!important;max-width:calc(100% - 28px)!important;
background:var(--nav-bg)!important;
border:1px solid var(--nav-border)!important;border-bottom:1px solid var(--nav-border)!important;
border-radius:100px!important;
backdrop-filter:blur(24px) saturate(180%)!important;-webkit-backdrop-filter:blur(24px) saturate(180%)!important;
box-shadow:0 8px 32px rgba(14,17,22,.08),0 1px 2px rgba(14,17,22,.04)!important;
padding:0!important;
}
.nav-main-row{height:60px!important;padding:0 10px 0 22px!important;gap:14px!important}
.nav-logo,.nav-logo-stack{font-style:normal!important}
.nav-logo-top{font-size:20px!important;letter-spacing:3px!important}
.nav-logo-bot{font-size:11px!important;letter-spacing:2px!important}
.nav-links>a,.nav-trigger{
font-size:13px!important;text-transform:none!important;letter-spacing:0!important;
font-weight:500!important;padding:7px 12px!important;border-radius:100px!important;
color:var(--steel-light)!important;
}
.nav-links>a:hover,.nav-trigger:hover{
color:var(--white)!important;background:var(--bg-hover)!important;
}
.nav-cta{
background:var(--white)!important;color:var(--dark)!important;
padding:9px 18px!important;border-radius:100px!important;
font-size:13px!important;letter-spacing:0!important;text-transform:none!important;
font-weight:600!important;box-shadow:none!important;
}
.nav-cta:hover{background:var(--gb-accent)!important;color:#fff!important;transform:none!important;box-shadow:0 4px 14px rgba(36,71,42,.35)!important}
html[data-theme="light"] .nav-cta{background:#0E1116!important;color:#fff!important}
html[data-theme="light"] .nav-cta:hover{background:var(--gb-accent)!important}
/* Hide ugly underline animation in pill nav */
.nav-links a::after,.nav-links>a::after,.nav-trigger::after{display:none!important}
/* Theme toggle pill-style */
.theme-toggle{border-radius:100px!important;border:1px solid var(--border-med)!important;width:36px!important;height:36px!important}
/* ─── Push body content below floating nav ─── */
main,#page,body>section:first-of-type{padding-top:0}
body{padding-top:90px!important}
/* ─── Page hero gradient accent + softer feel ─── */
.page-hero,section[class*="hero"]{background:transparent!important}
.hero-grid,.page-hero-grid{display:none!important}
.hero-glow,.page-hero-glow{display:none!important}
/* Big typography polish */
h1,.h-title{letter-spacing:-1.5px!important;font-weight:600!important;font-family:-apple-system,'SF Pro Display','Inter','DM Sans',sans-serif!important}
h2{letter-spacing:-1px!important;font-weight:600!important;font-family:-apple-system,'SF Pro Display','Inter','DM Sans',sans-serif!important}
/* ─── Buttons → pill 100px ─── */
.btn-primary,.btn-call,.btn-outline,.h-cta-call,.h-cta-book,.bk-btn,.bk-btn-next,.bk-btn-back,button.btn,.btn{
border-radius:100px!important;letter-spacing:0!important;text-transform:none!important;
font-weight:600!important;padding:13px 22px!important;
}
.btn-primary,.btn-call,.h-cta-call,.bk-btn-next{
background:#24472A!important;color:#fff!important;border:none!important;
box-shadow:0 6px 20px rgba(36,71,42,.32)!important;
}
.btn-primary:hover,.btn-call:hover,.h-cta-call:hover,.bk-btn-next:hover{background:#2E7D4F!important;transform:translateY(-1px)}
.btn-outline,.h-cta-book,.bk-btn-back{
background:var(--dark3)!important;color:var(--white)!important;
border:1px solid var(--border-med)!important;
}
.btn-outline:hover,.h-cta-book:hover{border-color:var(--gb-accent)!important;color:var(--gb-accent)!important}
/* Inputs / textareas */
.field,input.field,select.field,textarea.field,input,select,textarea{
border-radius:14px!important;padding:14px 16px!important;font-size:14px!important;
background:var(--dark3)!important;border:1px solid var(--border-med)!important;
}
.field:focus,input:focus,select:focus,textarea:focus{
outline:none!important;border-color:var(--gb-accent)!important;
box-shadow:0 0 0 4px var(--gb-accent-soft)!important;
}
/* ─── Cards → rounded 22px, soft border ─── */
.svc-card,.cat-card,.cf-card,.bk-card,.bk-wizard,.why-hcard,.how-step,.blog-card,
.svc-tab-item,.ck-svc-card,.ck-why-card,.ck-page-brand,
.bk-when-card,.bk-summary,details,.adm-table,.eb-wrap,
section[id^="city-"],section[style*="background:var(--dark"]{
border-radius:22px!important;
}
.svc-card,.cat-card,.cf-card,.bk-wizard,.blog-card,.svc-tab-item,.ck-svc-card,.ck-why-card{
background:var(--dark3)!important;border:1px solid var(--border-dim)!important;
box-shadow:0 2px 12px rgba(14,17,22,.04)!important;
}
.svc-card:hover,.blog-card:hover,.cat-card:hover{
transform:translateY(-2px);box-shadow:0 12px 32px rgba(14,17,22,.08)!important;
border-color:var(--gb-accent)!important;
}
/* Service icon chips — colored soft rounded squares */
.service-icon{
width:44px!important;height:44px!important;border-radius:14px!important;
background:var(--gb-accent-soft)!important;color:var(--gb-accent)!important;
display:inline-flex!important;align-items:center!important;justify-content:center!important;
margin-bottom:14px!important;
}
.service-icon svg path{fill:var(--gb-accent)!important}
/* ─── Bento services grid → varied sizes ─── */
.services-grid{
display:grid!important;grid-template-columns:repeat(4,1fr)!important;
gap:14px!important;
}
.services-grid .svc-card:nth-child(1){grid-column:span 2;grid-row:span 2;padding:28px!important;background:rgba(200,182,85,.08)!important;color:#F4EFDD!important;border:1.5px solid #C8B655!important}
.services-grid .svc-card:nth-child(1) .service-name{color:#F4EFDD!important;font-size:28px!important;font-weight:600!important;letter-spacing:-.5px!important}
.services-grid .svc-card:nth-child(1) .service-desc{color:rgba(244,239,221,.78)!important}
.services-grid .svc-card:nth-child(1) .service-tag{color:#DCCB72!important}
.services-grid .svc-card:nth-child(1) .service-icon{background:rgba(200,182,85,.16)!important;color:#DCCB72!important}
.services-grid .svc-card:nth-child(1) .service-icon svg path{fill:#DCCB72!important}
/* light mode: dark text on the faint gold featured card */
html[data-theme="light"] .services-grid .svc-card:nth-child(1){background:rgba(200,182,85,.16)!important;color:#14241A!important}
html[data-theme="light"] .services-grid .svc-card:nth-child(1) .service-name{color:#14241A!important}
html[data-theme="light"] .services-grid .svc-card:nth-child(1) .service-desc{color:rgba(20,36,26,.78)!important}
html[data-theme="light"] .services-grid .svc-card:nth-child(1) .service-tag,
html[data-theme="light"] .services-grid .svc-card:nth-child(1) .service-icon{color:#8A6D12!important}
html[data-theme="light"] .services-grid .svc-card:nth-child(1) .service-icon svg path{fill:#8A6D12!important}
@media(max-width:760px){
.services-grid{grid-template-columns:repeat(2,1fr)!important}
.services-grid .svc-card:nth-child(1){grid-column:span 2;grid-row:span 1}
}
/* Card text inside */
.service-name{font-size:15px!important;font-weight:600!important;letter-spacing:-.2px!important;margin-bottom:6px!important;color:var(--white)!important}
.service-desc{font-size:12px!important;color:var(--steel)!important;line-height:1.55!important}
.service-tag{
display:inline-block;margin-top:12px;font-size:11px;font-weight:500;
color:var(--gb-accent)!important;
padding:5px 12px;border-radius:100px;background:var(--gb-accent-soft);
}
/* Section labels — pills */
.section-label,[class*="section-label"]{
display:inline-block;padding:6px 14px!important;border-radius:100px!important;
background:var(--gb-accent-soft)!important;color:var(--gb-accent)!important;
font-size:11px!important;letter-spacing:.5px!important;font-weight:500!important;
text-transform:none!important;font-family:inherit!important;margin-bottom:14px!important;
}
/* Section titles */
.section-title{
font-size:clamp(28px,4.5vw,46px)!important;font-weight:600!important;
letter-spacing:-1.2px!important;line-height:1.05!important;
font-family:-apple-system,'SF Pro Display','Inter','DM Sans',sans-serif!important;
text-transform:none!important;margin-bottom:24px!important;
}
.accent{
background:linear-gradient(135deg,var(--gb-accent) 0%,var(--gb-accent-2) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* ─── Booking wizard glass card ─── */
.bk-wizard{padding:28px!important;background:var(--dark3)!important;backdrop-filter:blur(20px)!important;box-shadow:0 12px 40px rgba(14,17,22,.08)!important}
.bk-step{font-family:inherit!important}
.bk-when-card{border-radius:18px!important;padding:18px 14px!important}
.bk-when-card.active,.bk-when-card:has(input:checked){background:var(--gb-accent-soft)!important;border-color:var(--gb-accent)!important}
/* Gold CTA strips become indigo gradient with rounded corners */
div[style*="background:var(--gold)"]{
background:linear-gradient(135deg,var(--gb-accent) 0%,var(--gb-accent-2) 100%)!important;
border-radius:24px!important;margin:32px 22px!important;
color:#fff!important;
}
div[style*="background:var(--gold)"] h2{color:#fff!important}
div[style*="background:var(--gold)"] a{background:rgba(255,255,255,.18)!important;color:#fff!important;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25)!important}
/* Breadcrumb */
.breadcrumb{padding:18px 22px!important}
.bc-btn{font-size:13px!important;color:var(--steel)!important;text-transform:none!important;letter-spacing:0!important}
/* Footer rounded top */
footer{border-radius:24px 24px 0 0!important;border-top:1px solid var(--border-dim)!important;margin-top:32px}
/* Tabs (services tabbed) */
.svc-tabs,.svc-tab-list{gap:8px!important}
.svc-tab{
border-radius:100px!important;padding:8px 16px!important;
font-size:13px!important;text-transform:none!important;letter-spacing:0!important;
background:transparent!important;border:1px solid var(--border-med)!important;color:var(--steel)!important;
}
.svc-tab.active{background:var(--gb-accent)!important;color:#fff!important;border-color:transparent!important}
/* Reviews / blog rounded */
.review-card,.testimonial-card{border-radius:22px!important;padding:24px!important;background:var(--dark3)!important;border:1px solid var(--border-dim)!important}
/* Sticky mobile call bar → floating glass pill */
.mobile-cta-bar,#mobile-call-bar{
border-radius:100px!important;left:12px!important;right:12px!important;bottom:14px!important;width:auto!important;
background:rgba(36,71,42,.92)!important;backdrop-filter:blur(20px)!important;
border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 12px 40px rgba(36,71,42,.4)!important;
color:#fff!important;
}
/* PWA banner already matches the aesthetic — bump radius */
#pwa-banner{border-radius:22px!important}
/* Make all sections breathe */
section{padding-left:max(22px,4vw)!important;padding-right:max(22px,4vw)!important}
/* Details/summary look */
details{background:var(--dark3)!important;border:1px solid var(--border-dim)!important;padding:6px 18px!important;margin-bottom:8px}
details[open]{background:var(--gb-accent-soft)!important;border-color:var(--gb-accent)!important}
/* Light-mode card softening */
html[data-theme="light"] .svc-card,html[data-theme="light"] .cat-card,html[data-theme="light"] .cf-card,
html[data-theme="light"] .blog-card,html[data-theme="light"] .bk-wizard,html[data-theme="light"] .svc-tab-item,
html[data-theme="light"] .ck-svc-card,html[data-theme="light"] .ck-why-card{
background:rgba(255,255,255,.92)!important;backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,1)!important;
box-shadow:0 2px 14px rgba(14,17,22,.04)!important;
}
/* Mobile pill nav adjustments */
@media(max-width:760px){
nav{top:8px!important;max-width:calc(100% - 16px)!important;border-radius:18px!important}
.nav-main-row{padding:0 14px!important;height:54px!important}
body{padding-top:74px!important}
div[style*="background:var(--gold)"]{margin:24px 14px!important;border-radius:20px!important}
}
/* ─── Logo image sizing inside nav pill + footer ─── */
.nav-logo{display:inline-flex!important;align-items:center!important;padding:0!important;border:none!important;background:transparent!important;cursor:pointer}
.nav-logo img[data-cfg-logo]{max-height:36px;width:auto;display:block}
.footer-logo{display:inline-flex!important;align-items:center!important;background:transparent!important;border:none!important;cursor:pointer;padding:0!important}
.footer-logo img[data-cfg-logo]{max-height:48px;width:auto;display:block}
@media(max-width:760px){
.nav-logo img[data-cfg-logo]{max-height:30px}
}
/* ─── Logo lives OUTSIDE the nav pill (floats top-left) ─── */
.nav-logo{
position:fixed!important;
top:14px!important;left:18px!important;
z-index:1100!important;
background:transparent!important;border:none!important;
padding:0!important;margin:0!important;
display:inline-flex!important;align-items:center!important;cursor:pointer;
}
.nav-logo img[data-cfg-logo]{max-height:44px;width:auto;display:block}
.nav-main-row{justify-content:center!important}
@media(max-width:760px){
.nav-logo{top:10px!important;left:12px!important}
.nav-logo img[data-cfg-logo]{max-height:30px}
}
/* ─── Admin: Logo uploader ─── */
.lg-preview{display:grid;grid-template-columns:1fr;gap:0;background:rgba(0,0,0,.02);border:1px solid var(--border-dim);border-radius:14px;padding:14px;margin-bottom:18px}
.lg-preview-label{font-size:11px;color:var(--steel);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:8px;font-family:'DM Mono',monospace}
.lg-preview-row{display:flex;align-items:center;justify-content:flex-start;padding:18px 22px;border-radius:10px;min-height:74px}
.lg-preview-row.lg-dark{background:#0E1A12}
.lg-preview-row.lg-light{background:#F6F8F5;border:1px solid rgba(14,17,22,.06)}
.lg-preview-row img{max-width:100%;width:auto;display:block;object-fit:contain}
.lg-drops{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.lg-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px 18px;border:2px dashed var(--border-med);border-radius:14px;cursor:pointer;transition:all .2s;background:transparent;min-height:160px}
.lg-drop:hover,.lg-drop.dragover{border-color:var(--gb-accent,#24472A);background:var(--gb-accent-soft,rgba(36,71,42,.08))}
.lg-drop-icon{color:var(--steel);margin-bottom:8px}
.lg-drop:hover .lg-drop-icon,.lg-drop.dragover .lg-drop-icon{color:var(--gb-accent,#24472A)}
.lg-drop-title{font-size:14px;font-weight:600;color:var(--white)}
.lg-drop-sub{font-size:12px;color:var(--steel);margin:4px 0 10px;max-width:240px;line-height:1.5}
.lg-drop-action{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--gb-accent,#24472A);font-family:'DM Mono',monospace}
.lg-controls{display:grid;grid-template-columns:1fr 1.4fr;gap:14px;margin-bottom:18px;align-items:end}
.lg-range{width:100%;accent-color:var(--gb-accent,#24472A)}
.lg-actions{display:flex;gap:10px;align-items:center}
.lg-reset-btn{background:transparent;color:var(--steel);border:1px solid var(--border-med);padding:11px 18px;border-radius:100px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}
.lg-reset-btn:hover{border-color:var(--gb-accent,#24472A);color:var(--gb-accent,#24472A)}
.lg-msg{font-size:13px;margin-top:14px;padding:10px 14px;border-radius:10px;display:none}
.lg-msg.show{display:block}
.lg-msg.ok{background:rgba(61,220,151,.12);color:#3DDC97}
.lg-msg.err{background:rgba(255,107,107,.12);color:#FF6B6B}
@media(max-width:760px){
.lg-drops,.lg-controls{grid-template-columns:1fr}
}
/* ═══════════════════════════════════════════════════════════
HERO D4 — Magazine cover (full-bleed photo, text overlaid)
Logo stays outside (already floats top-left).
═══════════════════════════════════════════════════════════ */
.hero-d4{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;margin:0;padding:0;border-radius:0!important;background:#0E1A12}
.hero-d4-photo{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:1}
.hero-d4-mask{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(180deg, rgba(11,14,22,.55) 0%, rgba(11,14,22,.08) 28%, rgba(11,14,22,.10) 50%, rgba(11,14,22,.78) 92%, rgba(11,14,22,.92) 100%),
linear-gradient(90deg, rgba(11,14,22,.38) 0%, rgba(11,14,22,0) 55%);
}
.hero-d4-content{position:relative;z-index:3;width:100%;max-width:1280px;margin:0 auto;padding:160px 32px 56px;color:#fff}
.hero-d4-badge{
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.22);
padding:7px 14px;border-radius:100px;
font-size:12px;letter-spacing:.3px;color:#fff;font-weight:500;
}
.hero-d4-dot{width:7px;height:7px;border-radius:50%;background:#3DDC97;box-shadow:0 0 0 3px rgba(61,220,151,.18)}
.hero-d4-h1{
font-family:-apple-system,'SF Pro Display','Inter','DM Sans',sans-serif!important;
font-size:clamp(40px,7vw,84px)!important;font-weight:600!important;
letter-spacing:-2.2px!important;line-height:.95!important;
margin:18px 0 14px!important;color:#fff!important;text-transform:none!important;
text-shadow:0 2px 24px rgba(0,0,0,.32);
max-width:840px;
}
.hero-d4-accent{
background:linear-gradient(135deg,#2E7D4F 0%,#C2B14F 60%,#FFFFFF 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
color:transparent!important;
}
.hero-d4-sub{
font-size:clamp(14px,1.6vw,17px)!important;
color:rgba(255,255,255,.86)!important;line-height:1.55!important;font-weight:300!important;
max-width:480px;margin:0 0 22px!important;
}
.hero-d4-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.hero-d4-cta-p{
display:inline-flex;align-items:center;gap:8px;
background:linear-gradient(135deg,#2E7D4F 0%,#C8B655 100%)!important;color:#14241A!important;
padding:14px 22px!important;border-radius:100px!important;
font-size:14px!important;font-weight:600!important;
border:none!important;cursor:pointer;text-decoration:none;
transition:transform .18s ease, box-shadow .18s ease;
box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.hero-d4-cta-p:hover{transform:translateY(-1px);box-shadow:0 12px 36px rgba(0,0,0,.34)}
.hero-d4-cta-g{
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,.08)!important;backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.22)!important;color:#fff!important;
padding:14px 22px!important;border-radius:100px!important;
font-size:14px!important;font-weight:600!important;cursor:pointer;
}
.hero-d4-cta-g:hover{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.4)!important}
.hero-d4-trust{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:rgba(255,255,255,.7);font-weight:500;align-items:center}
.hero-d4-sep{opacity:.45}
/* Make sure the floating pill nav sits well over the photo on home */
body.has-d4-hero,nav{transition:background-color .2s}
/* Mobile */
@media(max-width:760px){
.hero-d4{min-height:84svh;align-items:flex-end}
.hero-d4-content{padding:120px 20px 36px}
.hero-d4-h1{font-size:clamp(36px,9vw,52px)!important;letter-spacing:-1.4px!important}
.hero-d4-sub{font-size:14px!important}
.hero-d4-cta-p,.hero-d4-cta-g{padding:13px 18px!important;font-size:13px!important}
.hero-d4-trust{font-size:11px}
}
/* ─── D4 hero: pure-CSS abstract backdrop (no photo) ─── */
.hero-d4-bg{
position:absolute;inset:0;z-index:1;overflow:hidden;
background:
radial-gradient(ellipse 80% 60% at 18% 28%, #1E3D26 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 82% 72%, #2C3A1A 0%, transparent 60%),
linear-gradient(180deg, #143620 0%, #122017 55%, #0E1A12 100%);
}
.hero-d4-grid{
position:absolute;inset:-2px;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size:80px 80px;
mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 80%);
}
.hero-d4-glow-a{
position:absolute; top:-10%; right:-12%;
width:60vw; height:60vw; max-width:900px; max-height:900px;
border-radius:50%;
background:radial-gradient(circle, rgba(36,71,42,.42) 0%, rgba(36,71,42,0) 65%);
filter:blur(20px);
}
.hero-d4-glow-b{
position:absolute; bottom:-22%; left:-8%;
width:55vw; height:55vw; max-width:800px; max-height:800px;
border-radius:50%;
background:radial-gradient(circle, rgba(194,177,79,.32) 0%, rgba(194,177,79,0) 65%);
filter:blur(28px);
}
.hero-d4-grain{
position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
background-size:240px 240px;
}
/* Tone the mask down since we no longer need to fight photo highlights */
.hero-d4-mask{
background:
linear-gradient(180deg, rgba(11,14,22,.25) 0%, rgba(11,14,22,0) 30%, rgba(11,14,22,.55) 100%),
linear-gradient(90deg, rgba(11,14,22,.32) 0%, rgba(11,14,22,0) 60%);
}
/* Hide the (now unused) old photo layer if it lingers in cached markup */
.hero-d4-photo{display:none!important}
/* Slight motion to keep the abstract alive */
@media (prefers-reduced-motion: no-preference){
@keyframes glowDriftA{0%,100%{transform:translate(0,0)}50%{transform:translate(-3%,2%)}}
@keyframes glowDriftB{0%,100%{transform:translate(0,0)}50%{transform:translate(2%,-2%)}}
.hero-d4-glow-a{animation:glowDriftA 18s ease-in-out infinite}
.hero-d4-glow-b{animation:glowDriftB 22s ease-in-out infinite}
}
/* ─── D4 hero: 2-col layout (text left, live status card right) ─── */
.hero-d4-content{
display:grid!important;
grid-template-columns:1.15fr 1fr;
gap:48px;
align-items:end;
}
.hero-d4-col-left{min-width:0}
.hero-d4-col-right{display:flex;flex-direction:column;gap:14px;min-width:0}
/* Glass status card */
.hd4-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
border:1px solid rgba(255,255,255,.16);
border-radius:24px;padding:24px;color:#fff;
box-shadow:0 12px 40px rgba(0,0,0,.18);
}
.hd4-card-row{display:flex;align-items:center;gap:10px}
.hd4-card-top{margin-bottom:14px}
.hd4-card-label{font-size:12px;letter-spacing:.3px;color:rgba(255,255,255,.78);font-weight:500}
.hd4-card-big{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;line-height:1}
.hd4-num{font-family:-apple-system,'SF Pro Display',sans-serif;font-size:78px;font-weight:600;letter-spacing:-3px;color:#fff;line-height:1;
background:linear-gradient(135deg,#FFFFFF 0%,#C2B14F 90%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hd4-unit{font-size:18px;font-weight:500;color:rgba(255,255,255,.82)}
.hd4-card-sub{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:18px}
.hd4-bar{height:6px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:18px}
.hd4-bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,#2E7D4F 0%,#C2B14F 100%);transition:width 1s ease}
.hd4-card-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.hd4-foot-tile{text-align:left}
.hd4-foot-num{font-family:-apple-system,'SF Pro Display',sans-serif;font-size:20px;font-weight:600;letter-spacing:-.5px;color:#fff}
.hd4-foot-lbl{font-size:10px;letter-spacing:.5px;color:rgba(255,255,255,.6);text-transform:uppercase;margin-top:2px}
/* Two mini bento cards under the main card */
.hd4-mini{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hd4-mini-card{
background:rgba(255,255,255,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px 16px;
display:flex;align-items:center;gap:12px;color:#fff;
}
.hd4-mini-ic{
width:36px;height:36px;border-radius:12px;
background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
font-size:16px;flex-shrink:0;color:#fff;
}
.hd4-mini-t{font-size:12px;font-weight:600;color:#fff;letter-spacing:-.2px}
.hd4-mini-s{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px}
/* Stack on mobile */
@media(max-width:960px){
.hero-d4-content{grid-template-columns:1fr;gap:28px;align-items:start}
.hero-d4-col-right{margin-top:8px}
.hd4-num{font-size:60px}
}
@media(max-width:540px){
.hd4-mini{grid-template-columns:1fr}
.hd4-card{padding:20px}
}
/* ─── D4 hero: auto-height fix (no forced 88svh, no dead top space) ─── */
.hero-d4{min-height:0!important;align-items:stretch!important}
.hero-d4-content{padding:120px 32px 56px!important;align-items:center!important}
@media(max-width:960px){
.hero-d4-content{padding:110px 22px 40px!important}
}
@media(max-width:540px){
.hero-d4-content{padding:96px 18px 32px!important;text-align:left}
.hero-d4-h1{font-size:clamp(34px,9vw,46px)!important}
}
/* ═══════════════════════════════════════════════════════════
D4 HERO — final overrides that beat all legacy #hero rules
Old hero CSS pinned padding:180px and min-height:100svh on
the #hero ID, which outranks .hero-d4 by specificity.
These selectors include both #hero AND .hero-d4 → higher.
═══════════════════════════════════════════════════════════ */
section#hero.hero-d4{
min-height:0!important;
padding:0!important;margin:0!important;
display:block!important;
background:#0E1A12!important;
position:relative!important;
overflow:hidden!important;
}
section#hero.hero-d4::after,section#hero.hero-d4::before{display:none!important;content:none!important}
section#hero.hero-d4 .hero-d4-content{
padding:130px 32px 56px!important;
max-width:1280px!important;margin:0 auto!important;
}
section#hero.hero-d4 .hero-d4-h1{
font-size:clamp(38px,6.5vw,76px)!important;
margin:16px 0 12px!important;
letter-spacing:-2px!important;
text-shadow:0 2px 24px rgba(0,0,0,.32)!important;
}
@media(max-width:960px){
section#hero.hero-d4 .hero-d4-content{padding:115px 22px 40px!important}
}
@media(max-width:540px){
section#hero.hero-d4 .hero-d4-content{padding:100px 18px 32px!important;text-align:left!important}
section#hero.hero-d4 .hero-d4-h1{font-size:clamp(34px,9vw,46px)!important;letter-spacing:-1.2px!important}
}
/* ─── Trust band (replaces emergency CTA strip on home) ─── */
.trust-band{
margin:32px 22px;padding:36px 32px;
background:rgba(255,255,255,.03);backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.06);border-radius:24px;
}
.trust-band-inner{
display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:center;max-width:1180px;margin:0 auto;
}
.trust-band-eyebrow{
font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
color:var(--gb-accent,#2E7D4F);font-weight:500;margin-bottom:10px;
}
.trust-band-stat{display:flex;align-items:baseline;gap:8px;line-height:1;margin-bottom:10px}
.trust-band-num{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif;
font-size:clamp(40px,5.5vw,64px);font-weight:600;letter-spacing:-2px;
background:linear-gradient(135deg,#2E7D4F 0%,#C2B14F 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.trust-band-unit{font-size:14px;color:var(--steel-light);font-weight:500;letter-spacing:-.2px}
.trust-band-sub{font-size:13px;color:var(--steel);line-height:1.6;max-width:340px}
.trust-band-badges{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.trust-badge{
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:18px 10px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
border-radius:16px;transition:all .2s;
}
.trust-badge:hover{border-color:var(--gb-accent,#2E7D4F);background:var(--gb-accent-soft,rgba(36,71,42,.08))}
.trust-badge-ic{
width:36px;height:36px;border-radius:12px;
background:var(--gb-accent-soft,rgba(36,71,42,.12));
color:var(--gb-accent,#2E7D4F);
display:flex;align-items:center;justify-content:center;margin-bottom:8px;
}
.trust-badge-ic svg path{fill:var(--gb-accent,#2E7D4F)!important}
.trust-badge-l{
font-size:11px;font-weight:600;letter-spacing:.2px;
color:var(--white);
}
/* Light mode adjustments */
html[data-theme="light"] .trust-band{background:rgba(255,255,255,.7);border-color:rgba(14,17,22,.06)}
html[data-theme="light"] .trust-badge{background:#fff;border-color:rgba(14,17,22,.06)}
/* Stack on narrow */
@media(max-width:880px){
.trust-band-inner{grid-template-columns:1fr;gap:24px}
.trust-band-badges{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:540px){
.trust-band{margin:20px 14px;padding:24px 18px}
.trust-band-badges{grid-template-columns:repeat(3,1fr)}
.trust-band-num{font-size:44px!important}
}
/* ─── D4 hero · coverage card (replaces fake live-dispatch card) ─── */
.hd4-cov{
background:rgba(255,255,255,.06);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:22px;color:#fff;
box-shadow:0 12px 40px rgba(0,0,0,.18);
display:flex;flex-direction:column;gap:16px;
}
.hd4-cov-head{display:flex;flex-direction:column;gap:6px}
.hd4-cov-eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.5px;color:rgba(255,255,255,.78);font-weight:500;text-transform:uppercase}
.hd4-cov-title{font-size:20px;font-weight:600;letter-spacing:-.4px;color:#fff;line-height:1.2}
/* Coverage map preview — pure CSS, no image */
.hd4-cov-map{
position:relative;height:160px;border-radius:16px;overflow:hidden;
background:
radial-gradient(circle at 50% 50%, rgba(36,71,42,.32) 0%, rgba(36,71,42,.06) 38%, transparent 70%),
radial-gradient(circle at 50% 50%, rgba(36,71,42,.18) 0%, transparent 22%),
linear-gradient(135deg,#0F1322 0%,#143620 100%);
border:1px solid rgba(255,255,255,.08);
}
/* Faint road grid */
.hd4-cov-map::before{
content:'';position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
background-size:32px 32px;
mask-image:radial-gradient(circle at 50% 50%, #000 30%, transparent 80%);
-webkit-mask-image:radial-gradient(circle at 50% 50%, #000 30%, transparent 80%);
}
/* Dashed coverage radius ring */
.hd4-cov-map::after{
content:'';position:absolute;left:50%;top:50%;width:160px;height:160px;
transform:translate(-50%,-50%);border-radius:50%;
border:1.5px dashed rgba(255,255,255,.32);
box-shadow:inset 0 0 0 1px rgba(36,71,42,.18);
}
/* Pin in the middle (single dot) */
.hd4-cov-pin{
position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;
background:#fff;transform:translate(-50%,-50%);
box-shadow:0 0 0 4px rgba(255,255,255,.22), 0 0 0 10px rgba(255,255,255,.08);
}
.hd4-cov-radius-label{
position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
font-family:'DM Mono','SF Mono',monospace;font-size:9px;letter-spacing:1.5px;
color:rgba(255,255,255,.7);text-transform:uppercase;
background:rgba(11,14,22,.45);backdrop-filter:blur(8px);
padding:4px 10px;border-radius:100px;border:1px solid rgba(255,255,255,.08);
white-space:nowrap;
}
/* City quick-chips */
.hd4-cov-cities{display:flex;flex-wrap:wrap;gap:6px}
.hd4-cov-chip{
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
color:#fff;font-size:12px;font-weight:500;
padding:7px 12px;border-radius:100px;cursor:pointer;transition:all .18s;
}
.hd4-cov-chip:hover{background:rgba(36,71,42,.2);border-color:rgba(36,71,42,.4);color:#fff}
/* CTA link at the bottom */
.hd4-cov-cta{
display:inline-flex;align-items:center;gap:6px;
background:transparent;border:none;color:#24472A;
padding:6px 0 0;font-size:12px;font-weight:600;cursor:pointer;
text-align:left;align-self:flex-start;
}
.hd4-cov-cta:hover{color:#fff}
/* Insert the pin + radius label via pseudo content using inline */
.hd4-cov-map{position:relative}
/* ═══════════════════════════════════════════════════════════
DYNAMIC ISLAND CALL BAR
Replaces the old #mobile-call-bar. Two states:
– .di-collapsed → small pill at bottom-center
– .di-expanded → full card with avatar, phone, Call button
═══════════════════════════════════════════════════════════ */
#mobile-call-bar{display:none!important}
.di-bar{
position:fixed!important;left:50%;bottom:18px;
transform:translate(-50%,0);z-index:9000;
pointer-events:auto;
}
/* COLLAPSED — small dark pill */
.di-pill{
display:inline-flex;align-items:center;gap:8px;
background:rgba(11,14,22,.88);backdrop-filter:blur(20px) saturate(160%);
-webkit-backdrop-filter:blur(20px) saturate(160%);
border:1px solid rgba(255,255,255,.14);
color:#fff;padding:10px 18px;border-radius:100px;
font-size:12px;font-weight:500;letter-spacing:-.1px;cursor:pointer;
box-shadow:0 10px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04) inset;
transition:all .35s cubic-bezier(.2,.9,.3,1.1);
font-family:-apple-system,'SF Pro Display','Inter',sans-serif;
}
.di-pill:hover{transform:scale(1.02);box-shadow:0 14px 36px rgba(0,0,0,.5)}
.di-pill-dot{
width:7px;height:7px;border-radius:50%;background:#3DDC97;
box-shadow:0 0 0 3px rgba(61,220,151,.2);
animation:diPulse 2.4s ease-in-out infinite;
}
@keyframes diPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.82)}}
.di-pill-label{color:rgba(255,255,255,.78);font-weight:500}
.di-pill-sep{color:rgba(255,255,255,.28);margin:0 1px}
.di-pill-action{color:#fff;font-weight:600}
/* EXPANDED — full card */
.di-card{
display:none;
align-items:center;gap:12px;
background:rgba(11,14,22,.94);backdrop-filter:blur(28px) saturate(180%);
-webkit-backdrop-filter:blur(28px) saturate(180%);
border:1px solid rgba(255,255,255,.16);
border-radius:24px;padding:12px 14px 12px 12px;
box-shadow:0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif;color:#fff;
min-width:300px;
}
.di-card-avatar{
width:38px;height:38px;border-radius:50%;flex-shrink:0;
background:linear-gradient(135deg,#24472A 0%,#C2B14F 100%);
display:inline-flex;align-items:center;justify-content:center;color:#fff;
}
.di-card-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1}
.di-card-eyebrow{font-size:10px;letter-spacing:1px;color:rgba(255,255,255,.55);text-transform:uppercase;margin-bottom:2px}
.di-card-phone{font-size:15px;font-weight:600;color:#fff;letter-spacing:-.2px;white-space:nowrap}
.di-card-cta{
background:#fff;color:#0E1116;padding:10px 18px;border-radius:100px;
font-size:13px;font-weight:600;text-decoration:none;margin-left:4px;flex-shrink:0;
}
.di-card-cta:hover{background:linear-gradient(135deg,#24472A 0%,#C2B14F 100%);color:#fff}
.di-card-close{
background:transparent;border:none;color:rgba(255,255,255,.5);
font-size:20px;cursor:pointer;padding:4px 8px;line-height:1;font-weight:300;
margin-left:-4px;flex-shrink:0;
}
.di-card-close:hover{color:#fff}
/* State transitions */
.di-bar.di-collapsed .di-card{display:none}
.di-bar.di-expanded .di-pill{display:none}
.di-bar.di-expanded .di-card{
display:inline-flex;
animation:diExpand .35s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes diExpand{
from{opacity:0;transform:translateY(8px) scale(.96)}
to {opacity:1;transform:translateY(0) scale(1)}
}
/* Hidden completely (e.g. user scrolled to footer) */
.di-bar.di-hidden{opacity:0;transform:translate(-50%,20px);pointer-events:none;transition:all .3s}
/* Show on all viewports (was mobile-only before) */
@media(min-width:761px){
.di-bar{bottom:24px}
.di-card{min-width:340px}
}
@media(max-width:540px){
.di-bar{bottom:12px}
.di-pill{padding:9px 14px;font-size:11.5px}
.di-card{min-width:0;width:calc(100vw - 24px);max-width:380px}
}
/* ═══════════════════════════════════════════════════════════
MOBILE MENU → iOS BOTTOM SHEET
Existing markup kept untouched. CSS reshapes the side
drawer into a bottom sheet with grab handle + smooth
slide-up. Available on every viewport.
═══════════════════════════════════════════════════════════ */
.mobile-menu{
position:fixed!important;
top:auto!important;right:0!important;left:0!important;
bottom:0!important;
width:auto!important;max-width:560px!important;margin:0 auto!important;
height:auto!important;max-height:88vh!important;
background:rgba(16,20,30,.96)!important;
backdrop-filter:blur(28px) saturate(180%)!important;
-webkit-backdrop-filter:blur(28px) saturate(180%)!important;
border:1px solid rgba(255,255,255,.08)!important;
border-bottom:none!important;
border-radius:28px 28px 0 0!important;
padding:0!important;
transform:translateY(100%)!important;
transition:transform .42s cubic-bezier(.2,.9,.25,1.05)!important;
box-shadow:0 -24px 56px rgba(0,0,0,.55)!important;
display:flex!important;flex-direction:column!important;
overflow:hidden!important;
}
.mobile-menu.open{transform:translateY(0)!important}
/* Grab handle on top */
.mobile-menu::before{
content:'';
display:block;flex-shrink:0;
width:38px;height:5px;border-radius:100px;
background:rgba(255,255,255,.22);
margin:10px auto 6px;
}
/* Scrollable middle */
.mobile-nav-links{
flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:14px 20px 8px!important;
}
.mobile-nav-links::-webkit-scrollbar{width:4px}
.mobile-nav-links::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:100px}
/* Section header treatment for top-level items */
.mob-top-link{
display:flex!important;align-items:center!important;justify-content:space-between!important;
width:100%!important;
background:rgba(255,255,255,.04)!important;
border:1px solid rgba(255,255,255,.06)!important;
border-radius:14px!important;
padding:14px 16px!important;
margin-bottom:8px!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:15px!important;font-weight:600!important;letter-spacing:-.2px!important;
color:#fff!important;text-transform:none!important;
transition:all .2s!important;
}
.mob-top-link:hover,.mob-top-link.open{
background:rgba(36,71,42,.12)!important;
border-color:rgba(36,71,42,.28)!important;
}
.mob-top-link span{font-size:15px!important;text-transform:none!important;letter-spacing:-.2px!important;color:#fff!important}
.mob-top-link::after{
content:'›';font-size:18px;color:rgba(255,255,255,.45);
transition:transform .25s ease;font-weight:300;
margin-left:12px;
}
.mob-top-link.open::after{transform:rotate(90deg);color:var(--gb-accent,#2E7D4F)}
/* Plain item rows (Pricing/Blog/FAQ/etc.) */
.mob-plain{
display:flex!important;align-items:center!important;justify-content:space-between!important;
width:100%!important;background:transparent!important;border:none!important;
border-bottom:1px solid rgba(255,255,255,.06)!important;border-radius:0!important;
padding:14px 4px!important;margin:0!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:15px!important;font-weight:500!important;letter-spacing:-.2px!important;
color:rgba(255,255,255,.88)!important;text-transform:none!important;
text-align:left!important;
}
.mob-plain:hover{color:var(--gb-accent,#2E7D4F)!important}
.mob-plain::after{
content:'↗';font-size:13px;color:rgba(255,255,255,.32);font-weight:300;margin-left:auto;
}
/* Accordion content */
.mob-accordion{margin-bottom:8px!important}
.mob-accordion-inner{padding:8px 0!important;display:flex!important;flex-direction:column!important;gap:0!important}
.mob-cat{
font-family:'DM Mono',monospace!important;
font-size:10px!important;letter-spacing:1.5px!important;
color:rgba(255,255,255,.45)!important;text-transform:uppercase!important;
padding:10px 12px 6px!important;
}
.mob-svc-btn{
background:transparent!important;border:none!important;
padding:10px 12px!important;text-align:left!important;
font-size:14px!important;color:rgba(255,255,255,.82)!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-weight:400!important;letter-spacing:-.1px!important;
border-radius:10px!important;
transition:all .15s!important;
}
.mob-svc-btn:hover{background:rgba(36,71,42,.1)!important;color:#fff!important}
/* Phone CTA pinned to the bottom of the sheet */
.mobile-menu-phone{
padding:14px 18px 22px!important;
background:rgba(11,14,22,.55)!important;
border-top:1px solid rgba(255,255,255,.06)!important;
flex-shrink:0;
}
.mobile-menu-phone .phone-label{
font-family:'DM Mono',monospace!important;font-size:10px!important;
letter-spacing:1.5px!important;color:rgba(255,255,255,.5)!important;
text-transform:uppercase!important;margin-bottom:8px!important;
}
.mobile-menu-phone .phone-label::before{background:#3DDC97!important}
.mobile-menu-phone a{
display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;
background:linear-gradient(135deg,#24472A 0%,#C2B14F 100%)!important;
color:#fff!important;
padding:14px 18px!important;border-radius:14px!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:15px!important;font-weight:600!important;letter-spacing:-.2px!important;
box-shadow:0 8px 24px rgba(36,71,42,.35)!important;
}
.mobile-menu-phone a::before{
content:'';display:inline-block;width:14px;height:14px;
background-image:url("data:image/svg+xml;utf8,");
background-size:contain;background-repeat:no-repeat;
}
.mobile-menu-phone a span{color:#fff!important;font-weight:600!important;font-size:15px!important;letter-spacing:-.2px!important;font-family:inherit!important}
.mobile-menu-phone .avail{font-size:11px!important;color:rgba(255,255,255,.5)!important;text-align:center;margin-top:10px!important}
/* Overlay polish */
.mobile-overlay{background:rgba(8,10,18,.55)!important;backdrop-filter:blur(8px)!important}
/* Light mode tweaks */
html[data-theme="light"] .mobile-menu{
background:rgba(255,255,255,.96)!important;
border-color:rgba(14,17,22,.06)!important;
}
html[data-theme="light"] .mobile-menu::before{background:rgba(14,17,22,.18)!important}
html[data-theme="light"] .mob-top-link{background:rgba(14,17,22,.03)!important;border-color:rgba(14,17,22,.06)!important;color:#0E1116!important}
html[data-theme="light"] .mob-top-link span,html[data-theme="light"] .mob-plain{color:#0E1116!important}
html[data-theme="light"] .mob-svc-btn{color:rgba(14,17,22,.72)!important}
html[data-theme="light"] .mobile-menu-phone{background:rgba(14,17,22,.03)!important}
/* ─── Bottom sheet — tile grid layout ─── */
#mobileMenu{padding:14px 18px 0!important}
.bs-section-label{
font-size:11px;letter-spacing:.5px;text-transform:uppercase;
color:rgba(255,255,255,.5);font-weight:500;
margin:6px 4px 8px;font-family:-apple-system,'SF Pro Display','Inter',sans-serif;
}
.bs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.bs-tile{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:16px;padding:14px;
text-align:left;cursor:pointer;
display:flex;flex-direction:column;gap:10px;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif;
transition:all .18s ease;
min-height:92px;
}
.bs-tile:hover,.bs-tile:active{
background:rgba(36,71,42,.16);
border-color:rgba(36,71,42,.32);
transform:scale(.98);
}
.bs-tile-ic{
width:30px;height:30px;border-radius:9px;
background:rgba(36,71,42,.16);color:#2E7D4F;
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.bs-tile-l{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.2px;line-height:1.1}
.bs-tile-s{font-size:11px;color:rgba(255,255,255,.5);font-weight:400}
.bs-list{display:flex;flex-direction:column;margin-bottom:14px}
.bs-row{
display:flex;align-items:center;justify-content:space-between;
background:transparent;border:none;
padding:13px 4px;
border-bottom:1px solid rgba(255,255,255,.06);
font-family:-apple-system,'SF Pro Display','Inter',sans-serif;
font-size:15px;font-weight:500;letter-spacing:-.2px;
color:rgba(255,255,255,.88);
cursor:pointer;text-align:left;
}
.bs-row:last-child{border-bottom:none}
.bs-row:hover,.bs-row:active{color:#fff;background:rgba(255,255,255,.03)}
.bs-row-arrow{font-size:13px;color:rgba(255,255,255,.35);font-weight:300}
.bs-row:hover .bs-row-arrow{color:#2E7D4F}
.bs-cta-wrap{
margin:0 -18px;padding:12px 18px 22px;
background:rgba(11,14,22,.6);
border-top:1px solid rgba(255,255,255,.06);
}
.bs-cta-label{
font-size:11px;letter-spacing:.5px;text-transform:uppercase;
color:rgba(255,255,255,.55);margin-bottom:10px;font-weight:500;
display:flex;align-items:center;gap:6px;
}
.bs-cta-dot{
display:inline-block;width:7px;height:7px;border-radius:50%;
background:#3DDC97;box-shadow:0 0 0 3px rgba(61,220,151,.18);
animation:bsPulse 2s ease-in-out infinite;
}
@keyframes bsPulse{0%,100%{opacity:1}50%{opacity:.55}}
.bs-cta{
display:flex;align-items:center;justify-content:center;gap:10px;
background:linear-gradient(135deg,#24472A 0%,#C2B14F 100%);
color:#fff;text-decoration:none;
padding:14px 18px;border-radius:14px;
font-size:15px;font-weight:600;letter-spacing:-.2px;
box-shadow:0 10px 28px rgba(36,71,42,.4);
transition:transform .15s;
}
.bs-cta:hover{transform:translateY(-1px)}
.bs-cta span{color:#fff;font-weight:600}
/* Light mode polish */
html[data-theme="light"] .bs-section-label{color:rgba(14,17,22,.5)}
html[data-theme="light"] .bs-tile{background:rgba(14,17,22,.03);border-color:rgba(14,17,22,.06)}
html[data-theme="light"] .bs-tile-l{color:#0E1116}
html[data-theme="light"] .bs-tile-s{color:rgba(14,17,22,.5)}
html[data-theme="light"] .bs-row{color:#0E1116;border-bottom-color:rgba(14,17,22,.06)}
html[data-theme="light"] .bs-cta-wrap{background:rgba(14,17,22,.03)}
/* Don't show the legacy menu structure */
#mobileMenu-legacy{display:none!important}
/* ─── Bottom sheet — final fixes ─── */
/* Kill the pill-background that the [class*="section-label"] rule
was accidentally applying to .bs-section-label */
.bs-section-label{
background:transparent!important;
padding:0 4px!important;
border-radius:0!important;
color:rgba(255,255,255,.5)!important;
text-transform:uppercase!important;
font-size:11px!important;letter-spacing:.5px!important;
display:block!important;width:auto!important;
margin:6px 4px 10px!important;
}
html[data-theme="light"] .bs-section-label{color:rgba(14,17,22,.5)!important}
/* Make the sheet's interior actually scroll — pin the CTA to the bottom */
#mobileMenu{
display:flex!important;flex-direction:column!important;
padding:14px 0 0!important;
}
#mobileMenu::before{flex-shrink:0}
#mobileMenu .bs-section-label:first-of-type,
#mobileMenu .bs-grid,
#mobileMenu .bs-list{margin-left:18px!important;margin-right:18px!important}
/* Wrap the scrollable area so it grows and overflows */
#mobileMenu > .bs-section-label,
#mobileMenu > .bs-grid,
#mobileMenu > .bs-list{flex-shrink:0}
#mobileMenu > .bs-list{overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:42vh;padding-right:8px}
#mobileMenu > .bs-list::-webkit-scrollbar{width:4px}
#mobileMenu > .bs-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:100px}
#mobileMenu > .bs-cta-wrap{margin:0!important;padding:14px 18px 22px!important;flex-shrink:0}
/* ─── Coverage card removed from hero — reset content to single column ─── */
.hero-d4-content{grid-template-columns:none!important;display:block!important}
.hero-d4-col-right,.hd4-cov{display:none!important}
/* ═══════════════════════════════════════════════════════════
TOP CHROME — hamburger left, logo center, no pill bg
Theme toggle and Call live in the bottom sheet / Island.
═══════════════════════════════════════════════════════════ */
/* Kill the pill background and nav-links / theme toggle / CTA in the pill */
nav#main-nav{
background:transparent!important;
border:none!important;border-bottom:none!important;
box-shadow:none!important;backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
pointer-events:none!important;
padding:0!important;left:0!important;right:0!important;
width:auto!important;max-width:none!important;
transform:none!important;
}
nav#main-nav .nav-main-row{padding:0!important;height:auto!important;background:transparent!important}
nav#main-nav .nav-links,
nav#main-nav .nav-cta,
nav#main-nav .theme-toggle,
nav#main-nav .nav-right > *:not(#hamburger){display:none!important}
/* Hamburger → floating top-left as standalone glass button */
#hamburger{
pointer-events:auto!important;
position:fixed!important;
top:14px!important;left:18px!important;
z-index:1100!important;
width:46px!important;height:46px!important;
background:rgba(11,14,22,.6)!important;
backdrop-filter:blur(20px) saturate(160%)!important;
-webkit-backdrop-filter:blur(20px) saturate(160%)!important;
border:1px solid rgba(255,255,255,.12)!important;
border-radius:14px!important;
display:flex!important;flex-direction:column!important;
align-items:center!important;justify-content:center!important;gap:4px!important;
cursor:pointer;padding:0!important;
transition:transform .15s, background .2s!important;
}
#hamburger:hover{transform:scale(1.05);background:rgba(11,14,22,.8)!important}
#hamburger span{
display:block!important;width:18px!important;height:2px!important;
background:#fff!important;border-radius:2px!important;
}
html[data-theme="light"] #hamburger{
background:rgba(255,255,255,.85)!important;border-color:rgba(14,17,22,.08)!important;
}
html[data-theme="light"] #hamburger span{background:#0E1116!important}
/* Logo → center top */
.brand-logo,.nav-logo{
left:50%!important;right:auto!important;
transform:translateX(-50%)!important;
top:14px!important;
}
@media(max-width:540px){
#hamburger{top:10px!important;left:12px!important;width:42px!important;height:42px!important}
.brand-logo,.nav-logo{top:10px!important}
}
/* ─── Bottom-sheet: Appearance (theme) row ─── */
.bs-settings{
padding:8px 18px 4px;
border-top:1px solid rgba(255,255,255,.06);
margin-top:8px;
}
.bs-theme-row{
display:flex!important;align-items:center!important;justify-content:space-between!important;
width:100%;background:transparent;border:none;
padding:12px 4px!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif;
font-size:14px;font-weight:500;letter-spacing:-.2px;color:#fff;
cursor:pointer;
}
.bs-theme-row-l{display:inline-flex;align-items:center;gap:10px}
.bs-theme-ic{
width:30px;height:30px;border-radius:9px;
background:rgba(36,71,42,.16);color:#2E7D4F;
display:inline-flex;align-items:center;justify-content:center;
}
.bs-theme-row-r{
font-size:13px;color:rgba(255,255,255,.55);
background:rgba(255,255,255,.06);
padding:5px 12px;border-radius:100px;font-weight:500;
}
html[data-theme="light"] .bs-theme-row{color:#0E1116}
html[data-theme="light"] .bs-theme-row-r{background:rgba(14,17,22,.05);color:rgba(14,17,22,.55)}
/* ─── Remove Dynamic Island call bar ─── */
#di-bar{display:none!important}
/* ─── Mobile: center text + buttons ─── */
@media(max-width:760px){
/* Hero D4 */
.hero-d4-content{text-align:center!important}
.hero-d4-badge{margin-left:auto!important;margin-right:auto!important}
.hero-d4-h1{margin-left:auto!important;margin-right:auto!important}
.hero-d4-sub{margin-left:auto!important;margin-right:auto!important;max-width:none!important}
.hero-d4-ctas{justify-content:center!important}
.hero-d4-trust{justify-content:center!important}
/* Generic centering for top-level page sections */
section{text-align:center}
section .section-label,section .section-title,section h1,section h2,section h3,section p{
text-align:center!important;margin-left:auto!important;margin-right:auto!important;
}
section .section-label{display:inline-block}
/* Center button rows and CTA groups */
section [style*="display:flex"][style*="flex-wrap:wrap"],
section [style*="display:flex"]:not(.svc-tab-list):not(.bs-grid):not(.bs-list){
justify-content:center!important;
}
/* Trust band — already grid, just center labels */
.trust-band-inner{text-align:center}
.trust-band-lead{align-items:center}
.trust-band-stat,.trust-band-sub{justify-content:center;margin-left:auto;margin-right:auto}
/* Service / blog / city tiles keep their internal alignment */
.svc-card,.blog-card,.cat-card,.cf-card{text-align:left}
/* Section padding tighter on mobile */
section{padding-left:18px!important;padding-right:18px!important}
}
/* ─── Logo PNG — invert in dark mode so a black silhouette reads white ─── */
img[data-cfg-logo]{
filter:invert(1) brightness(2);
transition:filter .25s;
}
html[data-theme="light"] img[data-cfg-logo]{
filter:none;
}
/* ─── Panel tab strip (shared by Services / Car Keys / Service Area) ─── */
.panel-tabs{
display:flex;flex-wrap:wrap;gap:8px;
padding:18px 22px 14px;
border-bottom:1px solid rgba(255,255,255,.06);
background:rgba(11,14,22,.4);
}
.panel-tab{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
color:rgba(255,255,255,.75);
padding:7px 16px;border-radius:100px;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif;
font-size:12.5px;font-weight:600;letter-spacing:-.1px;
cursor:pointer;white-space:nowrap;transition:all .18s;
text-transform:none;
}
.panel-tab:hover{color:#fff;border-color:rgba(36,71,42,.4)}
.panel-tab.active{
background:linear-gradient(135deg,#24472A 0%,#2E7D4F 100%);
color:#fff;border-color:transparent;
box-shadow:0 4px 14px rgba(36,71,42,.32);
}
.panel-tab-hidden{display:none!important}
/* Active section takes the full panel width (no more 3-col layout) */
.services-panel .ck-panel-inner{display:block!important;padding:18px 22px!important}
.services-panel .ck-col{width:100%!important;padding:0!important;border:none!important}
.services-panel .ck-col-title,.services-panel .ck-country-title{display:none!important}
/* Car keys panel: country blocks become the top-level "sections".
Set the parent .ck-col to display:contents so the blocks lift up. */
#carKeysPanel .ck-panel-inner > .ck-col{display:contents!important}
#carKeysPanel .ck-country-block{padding:0!important;margin:0!important;border:none!important}
/* Tighten grids inside active section */
.services-panel .ck-brand-grid,.services-panel .svc-grid{
display:grid!important;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important;
gap:10px!important;
}
/* Light mode */
html[data-theme="light"] .panel-tabs{background:rgba(14,17,22,.02);border-bottom-color:rgba(14,17,22,.08)}
html[data-theme="light"] .panel-tab{background:rgba(14,17,22,.04);border-color:rgba(14,17,22,.08);color:rgba(14,17,22,.6)}
html[data-theme="light"] .panel-tab:hover{color:#0E1116}
html[data-theme="light"] .panel-tab.active{background:linear-gradient(135deg,#24472A 0%,#2E7D4F 100%);color:#fff}
/* Mobile: scrollable tab row */
@media(max-width:760px){
.panel-tabs{padding:14px 18px 10px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.panel-tabs::-webkit-scrollbar{display:none}
}
/* ═══════════════════════════════════════════════════════════
RESPONSIVE SPLIT — desktop horizontal pill nav, mobile sheet
• Desktop ≥761px: pill nav reappears with links + CTA,
logo floats top-left, hamburger hidden.
• Mobile ≤760px: keeps current state — hamburger left,
logo center, no pill, bottom-sheet menu.
═══════════════════════════════════════════════════════════ */
@media(min-width:761px){
/* Restore the floating pill */
nav#main-nav{
pointer-events:auto!important;
position:fixed!important;
top:14px!important;left:50%!important;
transform:translateX(-50%)!important;
width:auto!important;max-width:calc(100% - 28px)!important;
background:rgba(255,255,255,.7)!important;
border:1px solid rgba(255,255,255,.9)!important;
border-radius:100px!important;
backdrop-filter:blur(24px) saturate(180%)!important;
-webkit-backdrop-filter:blur(24px) saturate(180%)!important;
box-shadow:0 8px 32px rgba(14,17,22,.08),0 1px 2px rgba(14,17,22,.04)!important;
padding:0!important;
}
nav#main-nav .nav-main-row{
height:60px!important;padding:0 10px 0 22px!important;background:transparent!important;
}
/* Show nav links + CTA + theme toggle inside the pill */
nav#main-nav .nav-links{display:flex!important}
nav#main-nav .nav-cta{display:inline-flex!important}
nav#main-nav .theme-toggle{display:flex!important}
/* Hide the hamburger on desktop */
#hamburger{display:none!important}
/* Move logo from top-center back to top-left as standalone */
.nav-logo,.brand-logo{
left:24px!important;right:auto!important;
transform:none!important;
top:14px!important;
}
/* Dark-mode pill on desktop */
html:not([data-theme="light"]) nav#main-nav{
background:rgba(16,20,30,.6)!important;
border-color:rgba(255,255,255,.08)!important;
box-shadow:0 8px 32px rgba(0,0,0,.4)!important;
}
}
/* ─── Logo size bump ─── */
.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{
max-height:72px!important;
}
@media(max-width:760px){
.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{
max-height:56px!important;
}
}
@media(max-width:540px){
.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{
max-height:48px!important;
}
}
/* ─── Logo: bigger ─── */
.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{max-height:120px!important}
@media(max-width:760px){.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{max-height:84px!important}}
@media(max-width:540px){.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{max-height:64px!important}}
/* ─── Mobile: shrink logo on scroll ─── */
@media(max-width:760px){
.nav-logo,.brand-logo{transition:top .25s ease}
.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{
transition:max-height .25s ease, transform .25s ease;
}
html.scrolled .nav-logo,html.scrolled .brand-logo{top:6px!important}
html.scrolled .nav-logo img[data-cfg-logo],
html.scrolled .brand-logo img[data-cfg-logo]{
max-height:36px!important;
}
/* Hamburger shrinks slightly too so it stays balanced */
html.scrolled #hamburger{
transition:all .25s ease;
width:38px!important;height:38px!important;top:7px!important;
}
}
/* ═══════════════════════════════════════════════════════════
APPLE-STYLE TOP BAR
Full-width thin (44px) translucent bar — logo left,
nav links center, action icons right. Replaces the
floating pill on every viewport.
═══════════════════════════════════════════════════════════ */
/* Reset the floating-pill rules and become a full-width bar */
nav#main-nav{
position:fixed!important;
top:0!important;left:0!important;right:0!important;
transform:none!important;
width:100%!important;max-width:none!important;
background:rgba(22,27,35,.72)!important;
-webkit-backdrop-filter:saturate(180%) blur(20px)!important;
backdrop-filter:saturate(180%) blur(20px)!important;
border:none!important;border-bottom:1px solid rgba(255,255,255,.06)!important;
border-radius:0!important;
box-shadow:none!important;
padding:0!important;
pointer-events:auto!important;
}
nav#main-nav .nav-main-row{
height:44px!important;
padding:0 22px!important;
max-width:1280px;margin:0 auto!important;
display:flex!important;align-items:center!important;justify-content:space-between!important;
background:transparent!important;gap:24px;
}
/* Centered nav links */
nav#main-nav .nav-links{
display:flex!important;flex:1;justify-content:center;
gap:0!important;
}
nav#main-nav .nav-links > a,
nav#main-nav .nav-trigger{
background:transparent!important;border:none!important;
color:rgba(255,255,255,.78)!important;
font-family:-apple-system,'SF Pro Display','SF Pro Text','Inter',sans-serif!important;
font-size:12px!important;font-weight:400!important;
letter-spacing:-.01em!important;text-transform:none!important;
padding:8px 12px!important;border-radius:0!important;
transition:color .18s!important;cursor:pointer;
}
nav#main-nav .nav-links > a:hover,
nav#main-nav .nav-trigger:hover{
color:#fff!important;background:transparent!important;
}
.nav-links a::after,.nav-trigger::after{display:none!important}
.nav-arrow{display:none!important}
/* Right-side actions */
nav#main-nav .nav-right{
display:flex!important;align-items:center!important;gap:4px!important;
}
nav#main-nav .nav-right > *{display:inline-flex!important;align-items:center!important;justify-content:center!important}
/* Theme toggle → small icon button */
nav#main-nav .theme-toggle{
background:transparent!important;border:none!important;
width:34px!important;height:34px!important;border-radius:50%!important;
color:rgba(255,255,255,.78)!important;
}
nav#main-nav .theme-toggle:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
nav#main-nav .theme-toggle svg{width:14px!important;height:14px!important}
/* Call CTA → small icon-only pill on the right (Apple-bag style) */
nav#main-nav .nav-cta{
background:transparent!important;color:rgba(255,255,255,.85)!important;
border:none!important;border-radius:50%!important;
width:34px!important;height:34px!important;padding:0!important;
font-size:0!important;letter-spacing:0!important;
position:relative;display:inline-flex!important;align-items:center;justify-content:center;
overflow:hidden;
}
nav#main-nav .nav-cta::before{
content:'';display:inline-block;width:14px;height:14px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-size:contain;
}
nav#main-nav .nav-cta:hover{background:rgba(255,255,255,.08)!important}
/* Hamburger → small Apple-style "≡" on mobile */
nav#main-nav #hamburger{
position:static!important;
width:34px!important;height:34px!important;
background:transparent!important;border:none!important;
border-radius:50%!important;flex-direction:column!important;gap:3px!important;
pointer-events:auto!important;top:auto!important;left:auto!important;
}
nav#main-nav #hamburger:hover{background:rgba(255,255,255,.08)!important;transform:none!important}
nav#main-nav #hamburger span{
width:14px!important;height:1px!important;background:#fff!important;
}
/* Logo → small, far left, INSIDE the bar */
.nav-logo,.brand-logo{
position:static!important;
margin-right:auto;flex-shrink:0;
transform:none!important;
}
.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{
max-height:28px!important;width:auto!important;
}
/* Push body content below the 44px bar */
body{padding-top:44px!important}
/* ─── Desktop ≥761px: show nav links, hide hamburger ─── */
@media(min-width:761px){
nav#main-nav #hamburger{display:none!important}
nav#main-nav .nav-links{display:flex!important}
}
/* ─── Mobile ≤760px: hide nav links, show hamburger ─── */
@media(max-width:760px){
nav#main-nav .nav-links{display:none!important}
nav#main-nav #hamburger{display:flex!important}
.nav-logo,.brand-logo{margin-right:auto}
.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{max-height:26px!important}
}
/* Scroll-shrink: tighten further when scrolled */
html.scrolled nav#main-nav{background:rgba(22,27,35,.86)!important}
/* Light mode bar — semi-white frosted like Apple's light docs */
html[data-theme="light"] nav#main-nav{
background:rgba(255,255,255,.72)!important;
border-bottom-color:rgba(14,17,22,.08)!important;
}
html[data-theme="light"] nav#main-nav .nav-links > a,
html[data-theme="light"] nav#main-nav .nav-trigger,
html[data-theme="light"] nav#main-nav .theme-toggle,
html[data-theme="light"] nav#main-nav .nav-cta,
html[data-theme="light"] nav#main-nav #hamburger span{color:#0E1116!important;background:transparent!important}
html[data-theme="light"] nav#main-nav #hamburger span{background:#0E1116!important}
html[data-theme="light"] nav#main-nav .nav-links > a:hover,
html[data-theme="light"] nav#main-nav .nav-trigger:hover,
html[data-theme="light"] nav#main-nav .theme-toggle:hover,
html[data-theme="light"] nav#main-nav .nav-cta:hover,
html[data-theme="light"] nav#main-nav #hamburger:hover{background:rgba(14,17,22,.05)!important;color:#0E1116!important}
html[data-theme="light"] nav#main-nav .nav-cta::before{
background-image:url("data:image/svg+xml;utf8,");
}
/* ─── Logo INSIDE the bar (left corner), hamburger at right corner ─── */
.nav-logo,.brand-logo{
position:fixed!important;
top:8px!important;left:22px!important;
right:auto!important;transform:none!important;
z-index:1101!important;
margin:0!important;padding:0!important;
display:inline-flex!important;align-items:center!important;
}
.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{
max-height:28px!important;width:auto!important;
}
/* Mobile: just logo + hamburger, nothing else in the bar */
@media(max-width:760px){
.nav-logo,.brand-logo{top:8px!important;left:14px!important}
.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{max-height:26px!important}
nav#main-nav .theme-toggle,
nav#main-nav .nav-cta{display:none!important}
nav#main-nav .nav-main-row{
justify-content:flex-end!important;
padding:0 14px!important;
}
nav#main-nav #hamburger{display:inline-flex!important}
}
/* Scroll-shrink still applies on mobile */
@media(max-width:760px){
html.scrolled .nav-logo,html.scrolled .brand-logo{top:6px!important}
html.scrolled .nav-logo img[data-cfg-logo],html.scrolled .brand-logo img[data-cfg-logo]{max-height:22px!important}
}
/* ─── Full-color badge logo: show as-is, no color filtering in either mode ─── */
img[data-cfg-logo]{filter:none!important;transition:filter .25s}
html[data-theme="light"] img[data-cfg-logo]{filter:none!important}
/* ─── Even bigger sizing ─── */
.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{max-height:160px!important}
@media(max-width:760px){.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{max-height:110px!important}}
@media(max-width:540px){.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{max-height:84px!important}}
html.scrolled .nav-logo img[data-cfg-logo],html.scrolled .brand-logo img[data-cfg-logo]{max-height:48px!important}
/* The 44px Apple bar can't hold a 140px logo — let it overflow downward */
.nav-logo,.brand-logo{overflow:visible!important}
/* ─── Logo MUST stay in the bar — grow the bar instead ─── */
nav#main-nav .nav-main-row{height:60px!important}
body{padding-top:60px!important}
/* Logo capped so it fits inside the 60px bar with breathing room */
.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{max-height:44px!important}
@media(max-width:760px){.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{max-height:38px!important}}
@media(max-width:540px){.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{max-height:32px!important}}
/* Vertically center the logo in the taller bar */
.nav-logo,.brand-logo{top:8px!important;overflow:hidden!important}
/* Scroll-shrink: bar tightens, logo follows */
html.scrolled nav#main-nav .nav-main-row{height:48px!important}
html.scrolled body{padding-top:48px!important}
html.scrolled .nav-logo img[data-cfg-logo],html.scrolled .brand-logo img[data-cfg-logo]{max-height:32px!important}
@media(max-width:760px){
html.scrolled nav#main-nav .nav-main-row{height:46px!important}
html.scrolled body{padding-top:46px!important}
html.scrolled .nav-logo,html.scrolled .brand-logo{top:7px!important}
}
/* Smooth transitions on the height change */
nav#main-nav,nav#main-nav .nav-main-row,body{transition:height .25s ease, padding-top .25s ease}
/* ─── Bar: bigger logo + bigger nav text ─── */
nav#main-nav .nav-main-row{height:76px!important}
body{padding-top:76px!important}
/* Bigger logo */
.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{max-height:58px!important}
@media(max-width:760px){.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{max-height:46px!important}}
@media(max-width:540px){.nav-logo img[data-cfg-logo],.brand-logo img[data-cfg-logo]{max-height:38px!important}}
.nav-logo,.brand-logo{top:9px!important}
/* Bigger nav text */
nav#main-nav .nav-links > a,
nav#main-nav .nav-trigger{
font-size:16px!important;font-weight:500!important;
padding:8px 14px!important;letter-spacing:-.01em!important;
}
/* Bigger right-side action icons */
nav#main-nav .theme-toggle,
nav#main-nav .nav-cta,
nav#main-nav #hamburger{
width:40px!important;height:40px!important;
}
nav#main-nav .theme-toggle svg{width:18px!important;height:18px!important}
nav#main-nav .nav-cta::before{width:18px;height:18px}
nav#main-nav #hamburger span{width:18px!important;height:1.5px!important}
/* Scroll-shrink: bar tightens but text + logo still readable */
html.scrolled nav#main-nav .nav-main-row{height:56px!important}
html.scrolled body{padding-top:56px!important}
html.scrolled .nav-logo img[data-cfg-logo],html.scrolled .brand-logo img[data-cfg-logo]{max-height:40px!important}
html.scrolled .nav-logo,html.scrolled .brand-logo{top:8px!important}
html.scrolled nav#main-nav .nav-links > a,html.scrolled nav#main-nav .nav-trigger{font-size:14px!important;padding:6px 12px!important}
@media(max-width:760px){
html.scrolled .nav-logo img[data-cfg-logo],html.scrolled .brand-logo img[data-cfg-logo]{max-height:32px!important}
}
/* ─── Mobile: hamburger pinned to right corner of the bar ─── */
@media(max-width:760px){
nav#main-nav .nav-main-row{
display:flex!important;
justify-content:space-between!important;
align-items:center!important;
padding:0 14px!important;
}
nav#main-nav .nav-links{display:none!important}
nav#main-nav .nav-right{
margin-left:auto!important;
display:inline-flex!important;align-items:center!important;
gap:0!important;
}
nav#main-nav .theme-toggle,
nav#main-nav .nav-cta{display:none!important}
nav#main-nav #hamburger{
position:static!important;
display:inline-flex!important;
margin-left:auto!important;
width:40px!important;height:40px!important;
top:auto!important;left:auto!important;right:auto!important;
}
}
/* ─── Mobile: force hamburger to RIGHT edge (absolute, no flex ambiguity) ─── */
@media(max-width:760px){
nav#main-nav{position:fixed!important}
nav#main-nav .nav-main-row{
justify-content:flex-end!important;
position:relative!important;
}
nav#main-nav .nav-right{
position:absolute!important;
top:50%!important;right:14px!important;left:auto!important;
transform:translateY(-50%)!important;
margin:0!important;
display:inline-flex!important;align-items:center!important;
gap:0!important;z-index:1!important;
}
nav#main-nav #hamburger{
position:relative!important;
display:inline-flex!important;
width:40px!important;height:40px!important;
top:auto!important;left:auto!important;right:auto!important;
margin:0!important;
}
/* hide other right-side bits so only hamburger occupies the right corner */
nav#main-nav .theme-toggle,
nav#main-nav .nav-cta{display:none!important}
}
/* ─── Final fix: absolutely position the hamburger itself ─── */
@media(max-width:760px){
nav#main-nav #hamburger{
position:fixed!important;
top:14px!important;
right:14px!important;
left:auto!important;
bottom:auto!important;
transform:none!important;
margin:0!important;
z-index:1102!important;
width:40px!important;height:40px!important;
display:inline-flex!important;
}
}
/* ─── Floating hamburger (sibling of logo, NOT inside nav) ─── */
.floating-hamburger{display:none}
@media(max-width:760px){
.floating-hamburger{
display:flex!important;flex-direction:column!important;
align-items:center!important;justify-content:center!important;
gap:4px!important;
position:fixed!important;
top:18px!important;right:14px!important;
z-index:1500!important;
width:40px!important;height:40px!important;
background:transparent!important;border:none!important;
cursor:pointer;padding:0!important;
}
.floating-hamburger span{
display:block!important;width:18px!important;height:1.5px!important;
background:#fff!important;border-radius:2px!important;
}
html[data-theme="light"] .floating-hamburger span{background:#0E1116!important}
/* Hide the original nav hamburger inside the bar — replaced by the floating one */
nav#main-nav #hamburger{display:none!important}
}
/* ═══════════════════════════════════════════════════════════
APPLE-STYLE FULL-SCREEN MENU
Replaces the bottom-sheet — fullscreen takeover with
big bold left-aligned items + × close in the corner.
═══════════════════════════════════════════════════════════ */
#mobileMenu{
position:fixed!important;
top:0!important;left:0!important;right:0!important;bottom:0!important;
width:100%!important;max-width:none!important;height:100vh!important;max-height:100vh!important;margin:0!important;
background:#0E1A12!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
border:none!important;border-radius:0!important;
box-shadow:none!important;padding:0!important;
transform:translateY(100%)!important;
transition:transform .42s cubic-bezier(.2,.9,.25,1.05)!important;
display:flex!important;flex-direction:column!important;
z-index:9000!important;
}
#mobileMenu.open{transform:translateY(0)!important}
#mobileMenu::before{display:none!important}
html[data-theme="light"] #mobileMenu{background:#F4F5F7!important}
.mm-close{
position:absolute;top:16px;right:14px;z-index:2;
background:transparent;border:none;cursor:pointer;
color:rgba(255,255,255,.65);
width:44px;height:44px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
transition:color .18s, background .18s;
}
.mm-close:hover{color:#fff;background:rgba(255,255,255,.06)}
html[data-theme="light"] .mm-close{color:rgba(14,17,22,.55)}
html[data-theme="light"] .mm-close:hover{color:#0E1116;background:rgba(14,17,22,.06)}
.mm-list{
flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:80px 32px 24px;
display:flex;flex-direction:column;
}
.mm-list::-webkit-scrollbar{width:0}
.mm-item{
display:flex;align-items:center;justify-content:space-between;
background:transparent;border:none;text-align:left;cursor:pointer;
padding:14px 0;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif;
font-size:30px;font-weight:600;letter-spacing:-.8px;line-height:1.1;
color:#fff;
transition:opacity .15s;
}
.mm-item:hover{opacity:.7}
.mm-item:active{opacity:.5}
.mm-chev{font-size:24px;font-weight:300;color:rgba(255,255,255,.4)}
html[data-theme="light"] .mm-item{color:#0E1116}
html[data-theme="light"] .mm-chev{color:rgba(14,17,22,.35)}
.mm-footer{
border-top:1px solid rgba(255,255,255,.08);
padding:18px 32px 28px;
display:flex;flex-direction:column;gap:14px;flex-shrink:0;
}
html[data-theme="light"] .mm-footer{border-top-color:rgba(14,17,22,.06)}
.mm-call{
display:flex;flex-direction:column;align-items:flex-start;gap:2px;
text-decoration:none;
}
.mm-call-label{
font-size:11px;letter-spacing:.5px;text-transform:uppercase;
color:rgba(255,255,255,.55);font-weight:500;
}
.mm-call-num{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif;
font-size:22px;font-weight:600;letter-spacing:-.4px;color:#fff;
}
html[data-theme="light"] .mm-call-label{color:rgba(14,17,22,.55)}
html[data-theme="light"] .mm-call-num{color:#0E1116}
.mm-theme{
display:flex;align-items:center;justify-content:space-between;
background:transparent;border:none;text-align:left;cursor:pointer;
padding:6px 0;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif;
font-size:14px;font-weight:500;color:rgba(255,255,255,.65);
}
.mm-theme-val{
font-size:13px;font-weight:500;color:rgba(255,255,255,.5);
background:rgba(255,255,255,.08);
padding:5px 12px;border-radius:100px;
}
html[data-theme="light"] .mm-theme{color:rgba(14,17,22,.6)}
html[data-theme="light"] .mm-theme-val{color:rgba(14,17,22,.65);background:rgba(14,17,22,.06)}
/* ─── Apple-menu layout — final override with higher specificity ─── */
#mobileMenu{
display:flex!important;flex-direction:column!important;align-items:stretch!important;
width:100vw!important;max-width:100vw!important;
height:100vh!important;max-height:100vh!important;
overflow:hidden!important;
}
#mobileMenu > *{flex-shrink:0}
#mobileMenu .mm-list{
flex:1 1 auto!important;min-height:0!important;
width:100%!important;
padding:80px 32px 24px!important;
display:flex!important;flex-direction:column!important;align-items:stretch!important;
overflow-y:auto!important;
}
#mobileMenu .mm-item{
width:100%!important;justify-content:space-between!important;
font-size:clamp(24px,5.5vw,34px)!important;font-weight:600!important;
letter-spacing:-.8px!important;line-height:1.1!important;
padding:14px 0!important;background:transparent!important;border:none!important;
color:#fff!important;text-align:left!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
}
html[data-theme="light"] #mobileMenu .mm-item{color:#0E1116!important}
#mobileMenu .mm-footer{
order:99!important;
width:100%!important;
padding:18px 32px 28px!important;
border-top:1px solid rgba(255,255,255,.08)!important;
display:flex!important;flex-direction:column!important;gap:14px!important;
background:transparent!important;
}
html[data-theme="light"] #mobileMenu .mm-footer{border-top-color:rgba(14,17,22,.08)!important}
#mobileMenu .mm-close{
position:absolute!important;top:16px!important;right:14px!important;
background:transparent!important;border:none!important;
width:44px!important;height:44px!important;border-radius:50%!important;
z-index:5!important;
}
/* Phone link in the footer — fixed size, left-aligned */
#mobileMenu .mm-call{
display:flex!important;flex-direction:column!important;
align-items:flex-start!important;gap:2px!important;
text-decoration:none!important;width:auto!important;
}
#mobileMenu .mm-call-label{
font-size:11px!important;letter-spacing:.5px!important;text-transform:uppercase!important;
color:rgba(255,255,255,.55)!important;font-weight:500!important;
}
#mobileMenu .mm-call-num{
font-size:22px!important;font-weight:600!important;letter-spacing:-.4px!important;
color:#fff!important;line-height:1.15!important;
}
html[data-theme="light"] #mobileMenu .mm-call-label{color:rgba(14,17,22,.55)!important}
html[data-theme="light"] #mobileMenu .mm-call-num{color:#0E1116!important}
#mobileMenu .mm-theme{
display:flex!important;align-items:center!important;justify-content:space-between!important;
width:100%!important;background:transparent!important;border:none!important;
padding:6px 0!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:14px!important;font-weight:500!important;color:rgba(255,255,255,.65)!important;
text-align:left!important;
}
#mobileMenu .mm-theme-val{
font-size:13px!important;font-weight:500!important;
color:rgba(255,255,255,.5)!important;
background:rgba(255,255,255,.08)!important;
padding:5px 12px!important;border-radius:100px!important;
}
html[data-theme="light"] #mobileMenu .mm-theme{color:rgba(14,17,22,.6)!important}
html[data-theme="light"] #mobileMenu .mm-theme-val{color:rgba(14,17,22,.65)!important;background:rgba(14,17,22,.06)!important}
/* ─── Apple menu — clean up the open state ─── */
/* Hide the in-nav hamburger while menu is open; floating hamburger STAYS (morphs to ×) */
body:has(#mobileMenu.open) #hamburger{display:none!important}
/* Make the × close button more visible */
#mobileMenu .mm-close{
width:44px!important;height:44px!important;
background:transparent!important;border:none!important;
color:rgba(255,255,255,.85)!important;
}
#mobileMenu .mm-close svg{width:22px!important;height:22px!important}
html[data-theme="light"] #mobileMenu .mm-close{color:#0E1116!important}
html[data-theme="light"] #mobileMenu .mm-close:hover{background:rgba(14,17,22,.06)!important}
/* All nav items the same color (kill any inherited dim styles) */
#mobileMenu .mm-item,
#mobileMenu .mm-item:visited,
#mobileMenu .mm-item:link{
color:#fff!important;opacity:1!important;
}
html[data-theme="light"] #mobileMenu .mm-item,
html[data-theme="light"] #mobileMenu .mm-item:visited,
html[data-theme="light"] #mobileMenu .mm-item:link{color:#0E1116!important;opacity:1!important}
#mobileMenu .mm-item:hover{opacity:.65!important}
/* Make the menu solidly opaque (no leaks through) */
#mobileMenu{background:#0E1A12!important}
html[data-theme="light"] #mobileMenu{background:#F4F5F7!important}
/* Push the list start past the close button so the first item isn't covered */
#mobileMenu .mm-list{padding-top:88px!important}
/* ─── Hide nav/logos while menu is open — keep floating hamburger visible (it's the × close) ─── */
html.menu-open nav#main-nav,
html.menu-open .nav-logo,
html.menu-open .brand-logo{display:none!important}
/* ═══════════════════════════════════════════════════════════
SIDE DRAWER MENU (Option B) — slides in from the right
Replaces the Apple fullscreen menu. Page stays visible behind.
═══════════════════════════════════════════════════════════ */
#mobileMenu{
position:fixed!important;
top:0!important;left:auto!important;right:0!important;bottom:0!important;
width:78%!important;max-width:360px!important;min-width:280px!important;
height:100vh!important;max-height:100vh!important;
margin:0!important;
background:rgba(16,20,30,.94)!important;
backdrop-filter:blur(24px) saturate(180%)!important;
-webkit-backdrop-filter:blur(24px) saturate(180%)!important;
border:none!important;border-left:1px solid rgba(255,255,255,.08)!important;
border-radius:0!important;
box-shadow:-20px 0 60px rgba(0,0,0,.5)!important;
transform:translateX(100%)!important;
transition:transform .42s cubic-bezier(.2,.9,.25,1.05)!important;
padding:0!important;
display:flex!important;flex-direction:column!important;
z-index:9000!important;
}
#mobileMenu.open{transform:translateX(0)!important}
html[data-theme="light"] #mobileMenu{
background:rgba(255,255,255,.96)!important;
border-left-color:rgba(14,17,22,.06)!important;
}
/* Overlay: dim + light blur so the page shows behind */
.mobile-overlay{
background:rgba(8,10,18,.45)!important;
backdrop-filter:blur(3px)!important;-webkit-backdrop-filter:blur(3px)!important;
}
/* Header strip with status + close */
#mobileMenu::after{
content:'';position:absolute;left:18px;top:24px;width:7px;height:7px;border-radius:50%;
background:#3DDC97;box-shadow:0 0 0 3px rgba(61,220,151,.18);
}
#mobileMenu .mm-close{
position:absolute!important;top:14px!important;right:12px!important;
width:36px!important;height:36px!important;
background:rgba(255,255,255,.06)!important;border:none!important;border-radius:50%!important;
color:rgba(255,255,255,.7)!important;
display:inline-flex!important;align-items:center!important;justify-content:center!important;
z-index:5!important;cursor:pointer;
}
#mobileMenu .mm-close:hover{background:rgba(255,255,255,.12)!important;color:#fff!important}
html[data-theme="light"] #mobileMenu .mm-close{background:rgba(14,17,22,.04)!important;color:rgba(14,17,22,.65)!important}
html[data-theme="light"] #mobileMenu .mm-close:hover{background:rgba(14,17,22,.08)!important;color:#0E1116!important}
/* Removed — "OPEN 24/7" label no longer wanted */
/* Nav list — smaller, tighter than Apple style */
#mobileMenu .mm-list{
flex:1 1 auto!important;min-height:0!important;
padding:60px 18px 18px!important;
display:flex!important;flex-direction:column!important;
overflow-y:auto!important;
}
#mobileMenu .mm-item{
font-size:18px!important;font-weight:600!important;letter-spacing:-.3px!important;
line-height:1.2!important;padding:13px 0!important;
color:#fff!important;text-align:left!important;
border:none!important;background:transparent!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
}
html[data-theme="light"] #mobileMenu .mm-item{color:#0E1116!important}
#mobileMenu .mm-item:hover{opacity:.7!important}
/* Footer: indigo Call CTA + appearance row */
#mobileMenu .mm-footer{
border-top:1px solid rgba(255,255,255,.08)!important;
padding:16px 18px 22px!important;
display:flex!important;flex-direction:column!important;gap:12px!important;
background:rgba(11,14,22,.4)!important;
order:99!important;
}
html[data-theme="light"] #mobileMenu .mm-footer{
background:rgba(14,17,22,.03)!important;border-top-color:rgba(14,17,22,.06)!important;
}
/* Make the Call link a real button */
#mobileMenu .mm-call{
display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
background:linear-gradient(135deg,#24472A 0%,#C2B14F 100%)!important;
color:#fff!important;text-decoration:none!important;
padding:14px!important;border-radius:14px!important;
font-size:14px!important;font-weight:600!important;
box-shadow:0 10px 28px rgba(36,71,42,.35)!important;
}
#mobileMenu .mm-call::before{
content:'';display:inline-block;width:16px;height:16px;
background-image:url("data:image/svg+xml;utf8,");
background-size:contain;background-repeat:no-repeat;
}
#mobileMenu .mm-call-label,#mobileMenu .mm-call-num{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:14px!important;color:#fff!important;letter-spacing:0!important;font-weight:600!important;
text-transform:none!important;
}
#mobileMenu .mm-call-label{display:none!important}
#mobileMenu .mm-call-num::before{content:'Call '}
#mobileMenu .mm-theme{
display:flex!important;align-items:center!important;justify-content:space-between!important;
background:transparent!important;border:none!important;cursor:pointer;
padding:4px 0!important;
font-size:12px!important;font-weight:500!important;color:rgba(255,255,255,.6)!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
}
#mobileMenu .mm-theme-val{
font-size:11px!important;color:rgba(255,255,255,.5)!important;
background:rgba(255,255,255,.06)!important;
padding:4px 10px!important;border-radius:100px!important;
}
html[data-theme="light"] #mobileMenu .mm-theme{color:rgba(14,17,22,.55)!important}
html[data-theme="light"] #mobileMenu .mm-theme-val{color:rgba(14,17,22,.65)!important;background:rgba(14,17,22,.06)!important}
/* SHOW the chrome behind the side drawer — page should be visible */
html.menu-open nav#main-nav,
html.menu-open .nav-logo,
html.menu-open .brand-logo,
html.menu-open .floating-hamburger{display:block!important;display:inherit!important}
html.menu-open .floating-hamburger{display:flex!important}
/* ═══════════════════════════════════════════════════════════
Side-drawer accordions — Services / Car Keys / Service Area
═══════════════════════════════════════════════════════════ */
#mobileMenu .mm-item-acc{cursor:pointer;transition:color .15s}
#mobileMenu .mm-item-acc .mm-chev{
transition:transform .25s ease, color .2s;
display:inline-block;
color:rgba(255,255,255,.4);font-size:18px;font-weight:300;
}
#mobileMenu .mm-item-acc.open .mm-chev{transform:rotate(90deg);color:#2E7D4F}
html[data-theme="light"] #mobileMenu .mm-item-acc .mm-chev{color:rgba(14,17,22,.35)}
/* Accordion container — collapsed by default, smooth height */
#mobileMenu .mm-acc{
max-height:0;overflow:hidden;
transition:max-height .35s cubic-bezier(.2,.9,.3,1.05);
margin:0 -18px;
}
#mobileMenu .mm-acc.open{max-height:560px;overflow-y:auto;-webkit-overflow-scrolling:touch}
#mobileMenu .mm-acc.open::-webkit-scrollbar{width:0}
/* Tabs row inside the accordion */
#mobileMenu .mm-acc-tabs{
display:flex;gap:6px;padding:8px 18px 10px;
overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
#mobileMenu .mm-acc-tabs::-webkit-scrollbar{display:none}
#mobileMenu .mm-acc-tab{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
color:rgba(255,255,255,.7);
padding:5px 10px;border-radius:100px;
font-size:11.5px;font-weight:600;letter-spacing:-.1px;
white-space:nowrap;cursor:pointer;transition:all .15s;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif;
}
#mobileMenu .mm-acc-tab.on{
background:linear-gradient(135deg,#24472A,#2E7D4F);
color:#fff;border-color:transparent;
}
html[data-theme="light"] #mobileMenu .mm-acc-tab{
background:rgba(14,17,22,.04);border-color:rgba(14,17,22,.08);color:rgba(14,17,22,.6);
}
html[data-theme="light"] #mobileMenu .mm-acc-tab.on{
background:linear-gradient(135deg,#24472A,#2E7D4F);color:#fff;
}
/* Rows inside the active panel */
#mobileMenu .mm-acc-rows{
display:flex;flex-direction:column;
padding:0 18px 14px;
background:rgba(36,71,42,.04);
border-top:1px solid rgba(255,255,255,.04);
}
html[data-theme="light"] #mobileMenu .mm-acc-rows{
background:rgba(36,71,42,.03);border-top-color:rgba(14,17,22,.04);
}
#mobileMenu .mm-acc-row{
display:flex;align-items:center;justify-content:space-between;
background:transparent;border:none;cursor:pointer;
padding:10px 0;text-align:left;
border-bottom:1px solid rgba(255,255,255,.05);
font-family:-apple-system,'SF Pro Display','Inter',sans-serif;
}
#mobileMenu .mm-acc-row:last-child{border-bottom:none}
html[data-theme="light"] #mobileMenu .mm-acc-row{border-bottom-color:rgba(14,17,22,.05)}
#mobileMenu .mm-acc-row-name{
font-size:14px;font-weight:500;color:#fff;letter-spacing:-.1px;
}
#mobileMenu .mm-acc-row-meta{
font-size:11.5px;color:#2E7D4F;font-weight:600;
}
html[data-theme="light"] #mobileMenu .mm-acc-row-name{color:#0E1116}
/* Highlight the open parent item */
#mobileMenu .mm-item-acc.open{color:#2E7D4F!important}
html[data-theme="light"] #mobileMenu .mm-item-acc.open{color:#24472A!important}
/* ─── Accordion tabs: wrap to 2+ lines if they don't fit ─── */
#mobileMenu .mm-acc-tabs{
flex-wrap:wrap!important;
overflow-x:visible!important;
row-gap:6px;
}
/* ─── Accordion: Back button (collapses the open section) ─── */
#mobileMenu .mm-acc-back{
display:inline-flex;align-items:center;gap:4px;
background:transparent;border:none;cursor:pointer;
color:#2E7D4F;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif;
font-size:13px;font-weight:500;letter-spacing:-.1px;
padding:10px 18px 6px;margin:0;
}
#mobileMenu .mm-acc-back:hover{opacity:.75}
#mobileMenu .mm-acc-back svg{margin-right:2px}
html[data-theme="light"] #mobileMenu .mm-acc-back{color:#24472A}
/* ─── Scroll lock when menu is open ─── */
html.menu-open{overflow:hidden!important;height:100%!important;touch-action:none!important}
html.menu-open body{
overflow:hidden!important;
position:fixed!important;
top:0!important;left:0!important;right:0!important;
width:100%!important;height:100%!important;
touch-action:none!important;
}
/* Drawer + its inner list ARE allowed to scroll/touch */
html.menu-open #mobileMenu,
html.menu-open #mobileMenu *{touch-action:auto!important}
#mobileMenu .mm-list{overscroll-behavior:contain!important}
/* ─── Make the × close button unmissable ─── */
#mobileMenu .mm-close{
position:absolute!important;
top:14px!important;right:14px!important;
width:42px!important;height:42px!important;
background:rgba(255,255,255,.1)!important;
border:1px solid rgba(255,255,255,.18)!important;
border-radius:50%!important;
color:#fff!important;
display:inline-flex!important;align-items:center!important;justify-content:center!important;
z-index:9999!important;
cursor:pointer!important;
visibility:visible!important;opacity:1!important;
padding:0!important;margin:0!important;
}
#mobileMenu .mm-close svg{
width:22px!important;height:22px!important;color:#fff!important;stroke:#fff!important;
display:block!important;
}
#mobileMenu .mm-close:hover{
background:rgba(255,255,255,.18)!important;
}
html[data-theme="light"] #mobileMenu .mm-close{
background:rgba(14,17,22,.08)!important;
border-color:rgba(14,17,22,.12)!important;
color:#0E1116!important;
}
html[data-theme="light"] #mobileMenu .mm-close svg{color:#0E1116!important;stroke:#0E1116!important}
/* Push the list down so the close button has clear space above it */
#mobileMenu .mm-list{padding-top:72px!important}
/* ═══════════════════════════════════════════════════════════
GLASS BENTO FOOTER
Modern card-style footer matching the rest of the site.
═══════════════════════════════════════════════════════════ */
footer{
background:linear-gradient(180deg,rgba(11,14,22,0) 0%,rgba(11,14,22,.6) 30%,rgba(11,14,22,.9) 100%)!important;
border:none!important;border-top:1px solid rgba(255,255,255,.06)!important;
border-radius:32px 32px 0 0!important;
margin:48px 14px 0!important;
padding:56px 36px 24px!important;
display:grid!important;
grid-template-columns:1.4fr 1fr 1fr 1.2fr!important;
gap:36px!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
color:#F1F4F9!important;
position:relative;
}
html[data-theme="light"] footer{
background:linear-gradient(180deg,rgba(246,248,245,0) 0%,rgba(246,248,245,.7) 100%)!important;
border-top-color:rgba(14,17,22,.06)!important;
}
/* Brand column */
footer .footer-brand{display:flex;flex-direction:column;gap:18px;min-width:0}
footer .footer-logo{
background:transparent!important;border:none!important;
padding:0!important;cursor:pointer;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:22px!important;font-weight:600!important;letter-spacing:-.5px!important;
color:#fff!important;text-align:left!important;text-transform:none!important;
display:inline-flex;align-items:center;
}
html[data-theme="light"] footer .footer-logo{color:#0E1116!important}
footer .footer-logo img[data-cfg-logo]{max-height:48px!important}
footer .footer-desc{
font-size:13.5px!important;line-height:1.6!important;
color:rgba(255,255,255,.6)!important;font-weight:400!important;
max-width:340px;margin:0!important;
}
html[data-theme="light"] footer .footer-desc{color:rgba(14,17,22,.55)!important}
footer .footer-license{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:100px;
background:rgba(36,71,42,.12);
font-size:11px;color:#2E7D4F;font-weight:600;letter-spacing:-.1px;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
width:fit-content;
}
footer .footer-lic-badge{background:transparent!important;color:#2E7D4F!important;font-weight:700!important;letter-spacing:.5px!important;font-size:11px!important;padding:0!important}
footer .footer-lic-num{color:rgba(36,71,42,.8)!important;font-family:'DM Mono',monospace!important;font-size:11px!important;font-weight:500!important}
html[data-theme="light"] footer .footer-license{background:rgba(36,71,42,.08)}
html[data-theme="light"] footer .footer-lic-badge,html[data-theme="light"] footer .footer-lic-num{color:#24472A!important}
/* Trust badges row */
footer .footer-trust-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
footer .ftb{
display:inline-flex;align-items:center;gap:6px;
background:rgba(255,255,255,.05)!important;
border:1px solid rgba(255,255,255,.08)!important;
padding:6px 10px!important;border-radius:100px!important;
font-size:11px!important;color:rgba(255,255,255,.78)!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-weight:500!important;letter-spacing:-.1px!important;
}
footer .ftb svg{width:13px;height:13px;color:#2E7D4F}
html[data-theme="light"] footer .ftb{background:rgba(14,17,22,.04)!important;border-color:rgba(14,17,22,.06)!important;color:rgba(14,17,22,.72)!important}
/* Nav columns */
footer .footer-col{display:flex;flex-direction:column;gap:8px;min-width:0}
footer .footer-col h4{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:11px!important;font-weight:600!important;
letter-spacing:1px!important;text-transform:uppercase!important;
color:#2E7D4F!important;
margin:0 0 8px!important;
}
html[data-theme="light"] footer .footer-col h4{color:#24472A!important}
footer .footer-col button,
footer .footer-contact-link{
background:transparent!important;border:none!important;padding:0!important;
text-align:left!important;cursor:pointer!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:14px!important;font-weight:500!important;letter-spacing:-.1px!important;
color:rgba(255,255,255,.82)!important;
text-decoration:none!important;
transition:color .15s, transform .15s!important;
display:inline-flex;align-items:center;gap:8px;
line-height:1.7!important;
}
footer .footer-col button:hover,
footer .footer-contact-link:hover{
color:#2E7D4F!important;
}
html[data-theme="light"] footer .footer-col button,
html[data-theme="light"] footer .footer-contact-link{color:rgba(14,17,22,.78)!important}
html[data-theme="light"] footer .footer-col button:hover,
html[data-theme="light"] footer .footer-contact-link:hover{color:#24472A!important}
/* Contact column — icons in soft chips */
footer .footer-contact-link svg,
footer .footer-address svg{
width:14px!important;height:14px!important;
color:#2E7D4F!important;flex-shrink:0;
}
footer .footer-address{
display:flex;align-items:center;gap:8px;
font-size:14px!important;color:rgba(255,255,255,.82)!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
line-height:1.7!important;
}
footer .footer-hours{
font-size:12px!important;color:rgba(255,255,255,.5)!important;
margin-top:4px!important;font-weight:400!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
}
html[data-theme="light"] footer .footer-address{color:rgba(14,17,22,.78)!important}
html[data-theme="light"] footer .footer-hours{color:rgba(14,17,22,.5)!important}
/* Bottom bar */
footer .footer-bottom{
grid-column:1/-1!important;
margin-top:24px!important;padding-top:18px!important;
border-top:1px solid rgba(255,255,255,.06)!important;
display:flex!important;justify-content:space-between!important;align-items:center!important;
flex-wrap:wrap!important;gap:14px!important;
font-size:12px!important;color:rgba(255,255,255,.5)!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-weight:400!important;
}
html[data-theme="light"] footer .footer-bottom{border-top-color:rgba(14,17,22,.06)!important;color:rgba(14,17,22,.5)!important}
footer .footer-bottom button{
font-size:12px!important;color:rgba(255,255,255,.55)!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
}
footer .footer-bottom button:hover{color:#2E7D4F!important}
html[data-theme="light"] footer .footer-bottom button{color:rgba(14,17,22,.55)!important}
footer .footer-bottom-links{display:inline-flex;align-items:center;gap:18px}
/* Tablet: 2-column */
@media(max-width:880px){
footer{
grid-template-columns:1fr 1fr!important;gap:32px!important;
padding:48px 28px 22px!important;
}
footer .footer-brand{grid-column:1/-1}
}
/* Mobile: single column, centered */
@media(max-width:540px){
footer{
grid-template-columns:1fr!important;
margin:36px 10px 0!important;padding:40px 22px 22px!important;
text-align:center!important;
}
footer .footer-brand{align-items:center}
footer .footer-desc{margin:0 auto!important}
footer .footer-trust-badges,footer .footer-license{justify-content:center}
footer .footer-col{align-items:center}
footer .footer-col button,footer .footer-contact-link,footer .footer-address{justify-content:center;text-align:center!important}
footer .footer-bottom{justify-content:center!important;text-align:center!important;flex-direction:column}
}
/* ═══════════════════════════════════════════════════════════
REVIEWS SECTION — Glass Bento overrides
═══════════════════════════════════════════════════════════ */
.rv-rating-block{
background:rgba(255,255,255,.04)!important;
backdrop-filter:blur(20px)!important;
border:1px solid rgba(255,255,255,.08)!important;
border-radius:24px!important;
padding:40px 36px!important;max-width:1100px!important;margin:0 auto!important;
box-shadow:0 12px 40px rgba(14,17,22,.08)!important;
}
html[data-theme="light"] .rv-rating-block{
background:rgba(255,255,255,.7)!important;
border-color:rgba(14,17,22,.06)!important;
}
.rv-rating-hero{
grid-template-columns:auto 1fr!important;gap:36px!important;
padding-bottom:28px!important;
border-bottom:1px solid rgba(255,255,255,.08)!important;
}
html[data-theme="light"] .rv-rating-hero{border-bottom-color:rgba(14,17,22,.06)!important}
.rv-rating-num{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(72px,12vw,128px)!important;font-weight:600!important;
letter-spacing:-4px!important;line-height:.9!important;
background:linear-gradient(135deg,#2E7D4F 0%,#C2B14F 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
color:transparent!important;
}
.rv-rating-stars{
font-size:22px!important;color:#2E7D4F!important;
letter-spacing:4px!important;
}
html[data-theme="light"] .rv-rating-stars{color:#24472A!important}
.rv-rating-google{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:13.5px!important;color:rgba(255,255,255,.65)!important;
font-weight:500!important;letter-spacing:-.1px!important;
}
html[data-theme="light"] .rv-rating-google{color:rgba(14,17,22,.65)!important}
/* Stats — convert mono caps into soft pills */
.rv-rating-stats{
display:flex!important;flex-wrap:wrap!important;gap:8px!important;
margin-top:16px!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:13px!important;font-weight:500!important;letter-spacing:-.1px!important;
text-transform:none!important;color:rgba(255,255,255,.78)!important;
}
.rv-rating-stats > span{
background:rgba(36,71,42,.1)!important;
border:1px solid rgba(36,71,42,.18)!important;
padding:7px 14px!important;border-radius:100px!important;
display:inline-flex;align-items:center;gap:6px;
}
html[data-theme="light"] .rv-rating-stats > span{
background:rgba(36,71,42,.08)!important;border-color:rgba(36,71,42,.16)!important;
color:rgba(14,17,22,.78)!important;
}
.rv-rating-stats strong{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:14px!important;font-weight:700!important;letter-spacing:-.2px!important;
background:linear-gradient(135deg,#2E7D4F 0%,#C2B14F 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
color:transparent!important;margin-right:2px!important;
}
/* Snippets — turn into glass cards (no left bar) */
.rv-snippets{
display:grid!important;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;
gap:14px!important;margin-top:8px!important;
}
.rv-snippet{
background:rgba(255,255,255,.03)!important;
border:1px solid rgba(255,255,255,.08)!important;
border-left:1px solid rgba(255,255,255,.08)!important;
border-radius:18px!important;
padding:22px 22px 18px!important;
position:relative;
transition:all .2s;
}
.rv-snippet:hover{
border-color:#2E7D4F!important;background:rgba(36,71,42,.06)!important;
transform:translateY(-2px);
}
html[data-theme="light"] .rv-snippet{
background:rgba(255,255,255,.7)!important;
border-color:rgba(14,17,22,.06)!important;border-left-color:rgba(14,17,22,.06)!important;
}
html[data-theme="light"] .rv-snippet:hover{border-color:#24472A!important;background:rgba(36,71,42,.06)!important}
.rv-snippet-mark{
top:-2px!important;left:14px!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:52px!important;font-weight:600!important;
color:rgba(36,71,42,.3)!important;line-height:1!important;opacity:1!important;
}
.rv-snippet-text{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-style:normal!important;
font-size:13.5px!important;line-height:1.65!important;
color:rgba(255,255,255,.85)!important;font-weight:400!important;
margin:0 0 12px!important;padding-top:14px!important;
}
html[data-theme="light"] .rv-snippet-text{color:rgba(14,17,22,.82)!important}
.rv-snippet-attr{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:11.5px!important;color:#7FC79A!important;
letter-spacing:-.1px!important;text-transform:none!important;font-weight:600!important;
}
html[data-theme="light"] .rv-snippet-attr{color:#24472A!important}
@media(max-width:760px){
.rv-rating-block{padding:28px 22px!important}
.rv-rating-hero{grid-template-columns:1fr!important;gap:14px!important;text-align:center}
.rv-rating-stats{justify-content:center!important}
}
/* ═══════════════════════════════════════════════════════════
GLOBAL TYPOGRAPHY SWEEP
Convert any leftover Bebas Neue / DM Mono inline styles to
the Glass Bento SF Pro vocabulary. Catches About, Pricing,
FAQ, Quote, etc. without rewriting each render function.
═══════════════════════════════════════════════════════════ */
[style*="Bebas Neue"]{
font-family:-apple-system,'SF Pro Display','Inter','DM Sans',sans-serif!important;
font-weight:600!important;
letter-spacing:-1.2px!important;
text-transform:none!important;
}
[style*="DM Mono"]:not(.di-card-eyebrow):not(.hp-blog-icon){
font-family:-apple-system,'SF Pro Display','Inter','DM Sans',sans-serif!important;
letter-spacing:.3px!important;
text-transform:none!important;
}
/* Gradient text for inline gold accents in headlines —
exclude pills/badges (anything with its own background or rounded shape) */
section [style*="color:var(--gold)"]:not(button):not(a):not([style*="radius"]):not([style*="background"]){
background:linear-gradient(135deg,#2E7D4F 0%,#C2B14F 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
color:transparent!important;
}
/* About / Pricing / etc.: card panels with old inline backgrounds get the
Glass Bento card treatment */
section [style*="background:var(--dark)"]:not(section):not(div[id]):not(footer),
section [style*="background:var(--dark2)"]:not(section):not(div[id]):not(footer),
section [style*="background:var(--dark3)"]:not(section):not(div[id]):not(footer){
background:rgba(255,255,255,.04)!important;
border:1px solid rgba(255,255,255,.08)!important;
border-radius:18px!important;
transition:all .2s;
}
html[data-theme="light"] section [style*="background:var(--dark)"]:not(section):not(div[id]):not(footer),
html[data-theme="light"] section [style*="background:var(--dark2)"]:not(section):not(div[id]):not(footer),
html[data-theme="light"] section [style*="background:var(--dark3)"]:not(section):not(div[id]):not(footer){
background:rgba(255,255,255,.7)!important;
border-color:rgba(14,17,22,.06)!important;
}
/* Icon chips inside those cards become indigo rounded squares */
section [style*="background:rgba(255,255,255,.1)"][style*="border-radius:10px"]{
background:var(--gb-accent-soft,rgba(36,71,42,.12))!important;
border-radius:14px!important;
}
section [style*="background:rgba(255,255,255,.1)"][style*="border-radius:10px"] svg path{
fill:#2E7D4F!important;
}
/* The big "YOUR TRUSTED LOCKSMITH IN [CITY]" headline on About */
section h1[style*="font-size:clamp"]{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-weight:600!important;letter-spacing:-2px!important;
text-transform:none!important;
line-height:1.05!important;
}
/* Bigger gradient numbers in About stats strip */
section [style*="font-family:'Bebas Neue'"][style*="font-size:48px"],
section [style*="font-family:'Bebas Neue'"][style*="font-size:120px"]{
font-size:60px!important;font-weight:600!important;letter-spacing:-2px!important;
}
/* ─── Hero badge live-clock styling ─── */
.hero-d4-clock{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif;
font-weight:600;color:#fff;
font-variant-numeric:tabular-nums;
}
/* ═══════════════════════════════════════════════════════════
ONE MENU — drawer is the single menu everywhere
Hide the desktop horizontal nav links + theme/CTA chrome
inside the bar. Show the floating hamburger on every viewport.
═══════════════════════════════════════════════════════════ */
@media(min-width:761px){
/* Hide the in-bar nav links and right-side icons */
nav#main-nav .nav-links{display:none!important}
nav#main-nav .nav-cta{display:none!important}
nav#main-nav .theme-toggle{display:none!important}
nav#main-nav #hamburger{display:none!important}
/* Show the floating hamburger on desktop too */
.floating-hamburger{
display:flex!important;flex-direction:column!important;
align-items:center!important;justify-content:center!important;
gap:4px!important;
position:fixed!important;
top:18px!important;right:24px!important;
z-index:1500!important;
width:44px!important;height:44px!important;
background:rgba(255,255,255,.08)!important;
backdrop-filter:blur(14px) saturate(180%)!important;
border:1px solid rgba(255,255,255,.14)!important;border-radius:12px!important;
cursor:pointer;padding:0!important;transition:background .18s;
}
.floating-hamburger:hover{background:rgba(255,255,255,.14)!important}
.floating-hamburger span{
display:block!important;width:20px!important;height:1.5px!important;
background:#fff!important;border-radius:2px!important;
}
html[data-theme="light"] .floating-hamburger{
background:rgba(14,17,22,.04)!important;border-color:rgba(14,17,22,.08)!important;
}
html[data-theme="light"] .floating-hamburger span{background:#0E1116!important}
/* Nav-main-row is now just the centered logo holder */
nav#main-nav .nav-main-row{justify-content:center!important}
}
/* Also kill the panels entirely — drawer accordion handles all sub-navigation */
.services-panel{display:none!important}
.panel-overlay{display:none!important}
/* ─── Solidify drawer background so the page can't bleed through ─── */
#mobileMenu{
background:#122017!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html[data-theme="light"] #mobileMenu{
background:#FFFFFF!important;
}
/* ─── When menu is open, hide everything else completely ─── */
html.menu-open #page,
html.menu-open footer,
html.menu-open section{visibility:hidden!important}
/* Force drawer to be the only visible thing — fully opaque, on top */
html.menu-open #mobileMenu{
visibility:visible!important;
background:#FFFFFF!important;
z-index:99999!important;
isolation:isolate;
}
html.menu-open[data-theme="light"] #mobileMenu{background:#FFFFFF!important}
html.menu-open:not([data-theme="light"]) #mobileMenu{background:#122017!important}
/* Overlay underneath */
html.menu-open .mobile-overlay{
visibility:visible!important;background:#000!important;opacity:.5!important;
}
/* ─── Nuclear option: when menu open, kill page entirely
NOTE: .floating-hamburger STAYS visible — it morphs into the × close button. */
html.menu-open #page,
html.menu-open footer,
html.menu-open nav#main-nav,
html.menu-open .brand-logo,
html.menu-open .nav-logo,
html.menu-open .hero-d4-bg,
html.menu-open .hero-d4-glow-a,
html.menu-open .hero-d4-glow-b,
html.menu-open .hero-d4-grid,
html.menu-open .hero-d4-grain,
html.menu-open .hero-d4-mask{display:none!important;visibility:hidden!important}
html.menu-open body{
background:#122017!important;
}
html[data-theme="light"].menu-open body{
background:#FFFFFF!important;
}
/* Drawer: 100% width on mobile so nothing else is visible */
@media(max-width:760px){
#mobileMenu{width:100vw!important;max-width:100vw!important;border-left:none!important}
}
/* Drawer: hard reset of background and overflow */
#mobileMenu{
background:#122017!important;
background-image:none!important;
overflow:hidden!important;
}
html[data-theme="light"] #mobileMenu{background:#FFFFFF!important;background-image:none!important}
/* Kill any visible::before or ::after on the drawer */
#mobileMenu::before,#mobileMenu::after{content:none!important;display:none!important;background:none!important}
/* ─── Debug: temporarily hide .mm-call gradient, see if it's the source ─── */
#mobileMenu .mm-call{
background:transparent!important;
background-image:none!important;
box-shadow:none!important;
border:1px solid rgba(14,17,22,.12)!important;
color:#0E1116!important;
}
html[data-theme="light"] #mobileMenu .mm-call .mm-call-num,
html[data-theme="light"] #mobileMenu .mm-call{color:#0E1116!important}
#mobileMenu .mm-call::before{
background-image:url("data:image/svg+xml;utf8,")!important;
}
/* Also kill backdrop-filter and any indigo on the drawer itself */
#mobileMenu{
background:#FFFFFF!important;background-image:none!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html:not([data-theme="light"]) #mobileMenu{background:#122017!important}
/* ─── HARD diagnostic: hide the footer entirely ─── */
#mobileMenu .mm-footer{display:none!important}
/* ─── Drawer: kill all rounded corners (side drawer pinned to edge) ─── */
#mobileMenu{
border-radius:0!important;
border-top-left-radius:0!important;
border-top-right-radius:0!important;
border-bottom-left-radius:0!important;
border-bottom-right-radius:0!important;
}
/* Restore footer (it was hidden as diagnostic) */
#mobileMenu .mm-footer{display:flex!important}
/* ─── Remove the "OPEN 24/7" label + green dot from drawer ─── */
#mobileMenu .mm-list::before{content:none!important;display:none!important}
#mobileMenu::after{content:none!important;display:none!important}
#mobileMenu .mm-list{padding-top:72px!important}
/* ─── Hard reset: drawer with completely flat corners, no curves ─── */
#mobileMenu,
#mobileMenu *,
#mobileMenu::before,
#mobileMenu::after{
border-radius:0!important;
}
/* Restore the radii that ARE wanted (small components: close button, tabs, footer call) */
#mobileMenu .mm-close{border-radius:50%!important}
#mobileMenu .mm-acc-tab{border-radius:100px!important}
#mobileMenu .mm-call{border-radius:14px!important}
#mobileMenu .mm-theme-val{border-radius:100px!important}
/* And explicit: drawer container is flat */
#mobileMenu{
border-radius:0!important;
border-top-left-radius:0!important;
border-top-right-radius:0!important;
border-bottom-left-radius:0!important;
border-bottom-right-radius:0!important;
overflow:hidden!important;
}
/* ─── Floating hamburger: no frame, 2 lines, morphs to × ─── */
.floating-hamburger{
background:transparent!important;
border:none!important;
box-shadow:none!important;
width:44px!important;height:44px!important;
padding:0!important;cursor:pointer;
display:flex!important;flex-direction:column!important;
align-items:center!important;justify-content:center!important;
gap:6px!important;
}
.floating-hamburger:hover{background:transparent!important}
html[data-theme="light"] .floating-hamburger{background:transparent!important;border:none!important}
/* Only show first two spans, hide the third */
.floating-hamburger span{
display:block!important;width:22px!important;height:1.5px!important;
background:#fff!important;border-radius:1px!important;
transition:transform .25s ease, opacity .2s ease!important;
transform-origin:center!important;
}
.floating-hamburger span:nth-child(3){display:none!important}
html[data-theme="light"] .floating-hamburger span{background:#0E1116!important}
/* When menu open → morph to × */
html.menu-open .floating-hamburger span:nth-child(1){
transform:translateY(3.7px) rotate(45deg)!important;
}
html.menu-open .floating-hamburger span:nth-child(2){
transform:translateY(-3.8px) rotate(-45deg)!important;
}
/* ─── Hamburger becomes the menu's X — single button for open + close ─── */
/* Hide the separate × inside the drawer */
#mobileMenu .mm-close{display:none!important}
/* Floating hamburger stays visible always (even when menu open) */
html.menu-open .floating-hamburger{
display:flex!important;visibility:visible!important;
z-index:99999!important;
}
/* When menu is open, hamburger lines are dark (since drawer bg is light) */
html.menu-open .floating-hamburger span{
background:#0E1116!important;
}
html.menu-open:not([data-theme="light"]) .floating-hamburger span{
background:#fff!important;
}
/* ─── Hamburger → × morph (class-driven, bulletproof) ─── */
.floating-hamburger span{
display:block!important;
width:24px!important;height:2px!important;
background:currentColor!important;
border-radius:2px!important;
transition:transform .3s cubic-bezier(.65,.05,.36,1), background .2s!important;
transform-origin:center center!important;
color:#fff;
}
html[data-theme="light"] .floating-hamburger span{background:#0E1116!important}
.floating-hamburger{gap:7px!important}
/* X state when .is-x is on the button */
.floating-hamburger.is-x span:nth-child(1){
transform:translateY(4.5px) rotate(45deg)!important;
}
.floating-hamburger.is-x span:nth-child(2){
transform:translateY(-4.5px) rotate(-45deg)!important;
}
.floating-hamburger.is-x span:nth-child(3){display:none!important}
/* Always keep the floating hamburger visible — override any earlier hide */
.floating-hamburger{
display:flex!important;visibility:visible!important;opacity:1!important;
}
html.menu-open .floating-hamburger{
display:flex!important;visibility:visible!important;opacity:1!important;
z-index:99999!important;
}
/* ═══════════════════════════════════════════════════════════
FINAL OVERRIDE — hamburger always visible + bigger X morph
═══════════════════════════════════════════════════════════ */
html .floating-hamburger,
html.menu-open .floating-hamburger{
display:flex!important;visibility:visible!important;opacity:1!important;
position:fixed!important;top:18px!important;right:18px!important;
width:48px!important;height:48px!important;
flex-direction:column!important;align-items:center!important;justify-content:center!important;
gap:7px!important;
background:transparent!important;border:none!important;
z-index:2147483647!important;cursor:pointer;padding:0!important;
}
html .floating-hamburger span,
html.menu-open .floating-hamburger span{
display:block!important;
width:26px!important;height:2px!important;
background:#fff!important;
border-radius:2px!important;
transition:transform .3s cubic-bezier(.65,.05,.36,1)!important;
transform-origin:center center!important;
position:relative!important;
}
html .floating-hamburger span:nth-child(3),
html.menu-open .floating-hamburger span:nth-child(3){display:none!important}
html[data-theme="light"] .floating-hamburger span,
html[data-theme="light"].menu-open .floating-hamburger span{background:#0E1116!important}
/* X state */
html .floating-hamburger.is-x span:nth-child(1),
html.menu-open .floating-hamburger.is-x span:nth-child(1){
transform:translateY(4.5px) rotate(45deg)!important;
}
html .floating-hamburger.is-x span:nth-child(2),
html.menu-open .floating-hamburger.is-x span:nth-child(2){
transform:translateY(-4.5px) rotate(-45deg)!important;
}
/* ═══════════════════════════════════════════════════════════
SYNC MENU FOR DESKTOP — identical hamburger + drawer behavior
═══════════════════════════════════════════════════════════ */
@media(min-width:761px){
/* Floating hamburger: same look as mobile (no frame, transparent) */
.floating-hamburger{
display:flex!important;
position:fixed!important;top:18px!important;right:24px!important;
width:48px!important;height:48px!important;
background:transparent!important;border:none!important;box-shadow:none!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
flex-direction:column!important;align-items:center!important;justify-content:center!important;
gap:7px!important;cursor:pointer;padding:0!important;
z-index:2147483647!important;
}
.floating-hamburger span{
width:26px!important;height:2px!important;
background:#fff!important;border-radius:2px!important;
transition:transform .3s cubic-bezier(.65,.05,.36,1)!important;
}
html[data-theme="light"] .floating-hamburger span{background:#0E1116!important}
/* X morph works on desktop too */
.floating-hamburger.is-x span:nth-child(1){transform:translateY(4.5px) rotate(45deg)!important}
.floating-hamburger.is-x span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)!important}
/* Drawer styling identical to mobile */
#mobileMenu{
width:78%!important;max-width:420px!important;min-width:320px!important;
}
/* Hide ALL in-bar nav chrome on desktop (just like mobile) */
nav#main-nav .nav-links,
nav#main-nav .nav-cta,
nav#main-nav .theme-toggle,
nav#main-nav #hamburger{display:none!important}
/* Hide the nav bar entirely when menu is open on desktop */
html.menu-open nav#main-nav{display:none!important}
}
/* ═══════════════════════════════════════════════════════════
DESKTOP BAR — show a clean Call pill in the empty space
═══════════════════════════════════════════════════════════ */
@media(min-width:761px){
/* Bring back the Call CTA — small pill, right of center */
nav#main-nav .nav-cta{
display:inline-flex!important;
position:fixed!important;
top:18px!important;right:84px!important; /* sits left of the floating hamburger */
width:auto!important;height:auto!important;
padding:9px 18px 9px 14px!important;
background:rgba(255,255,255,.06)!important;
backdrop-filter:blur(14px) saturate(180%)!important;
-webkit-backdrop-filter:blur(14px) saturate(180%)!important;
border:1px solid rgba(255,255,255,.14)!important;
border-radius:100px!important;
color:#fff!important;text-decoration:none!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:13px!important;font-weight:600!important;letter-spacing:-.1px!important;
text-transform:none!important;
z-index:1500!important;
align-items:center!important;gap:8px!important;
transition:background .18s, border-color .18s;
}
nav#main-nav .nav-cta::before{
content:'';display:inline-block;width:14px;height:14px;flex-shrink:0;
background-image:url("data:image/svg+xml;utf8,");
background-size:contain;background-repeat:no-repeat;
}
nav#main-nav .nav-cta:hover{
background:rgba(255,255,255,.12)!important;
border-color:rgba(255,255,255,.24)!important;
}
html[data-theme="light"] nav#main-nav .nav-cta{
background:rgba(14,17,22,.04)!important;
border-color:rgba(14,17,22,.08)!important;
color:#0E1116!important;
}
html[data-theme="light"] nav#main-nav .nav-cta::before{
background-image:url("data:image/svg+xml;utf8,");
}
html[data-theme="light"] nav#main-nav .nav-cta:hover{
background:rgba(14,17,22,.08)!important;border-color:rgba(14,17,22,.16)!important;
}
/* Hide the Call pill when menu is open (drawer has its own Call button) */
html.menu-open nav#main-nav .nav-cta{display:none!important}
}
/* ─── FINAL nav-bar lockdown: only logo + Call pill + hamburger visible ─── */
nav#main-nav .nav-links,
nav#main-nav .nav-trigger,
nav#main-nav .nav-arrow,
nav#main-nav .theme-toggle,
nav#main-nav #hamburger{display:none!important}
/* Logo always visible top-left, Call pill always visible top-right */
.brand-logo,.nav-logo{display:inline-flex!important}
@media(min-width:761px){
nav#main-nav .nav-cta{display:inline-flex!important}
}
/* ═══════════════════════════════════════════════════════════
DESKTOP: show nav-links inline in the bar, hide hamburger
Mobile keeps the hamburger-drawer pattern.
═══════════════════════════════════════════════════════════ */
@media(min-width:761px){
/* Re-enable the nav-links inline in the bar */
nav#main-nav .nav-links{
display:flex!important;
position:fixed!important;
top:0!important;left:50%!important;
transform:translateX(-50%)!important;
height:76px!important;align-items:center!important;
gap:4px!important;
z-index:1100!important;
}
nav#main-nav .nav-links > a,
nav#main-nav .nav-trigger{
display:inline-flex!important;align-items:center!important;
background:transparent!important;border:none!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:14px!important;font-weight:500!important;letter-spacing:-.1px!important;
text-transform:none!important;
color:rgba(255,255,255,.85)!important;
padding:8px 12px!important;border-radius:100px!important;
cursor:pointer;transition:color .15s, background .15s;
}
nav#main-nav .nav-links > a:hover,
nav#main-nav .nav-trigger:hover{
color:#fff!important;
background:rgba(255,255,255,.06)!important;
}
html[data-theme="light"] nav#main-nav .nav-links > a,
html[data-theme="light"] nav#main-nav .nav-trigger{color:rgba(14,17,22,.78)!important}
html[data-theme="light"] nav#main-nav .nav-links > a:hover,
html[data-theme="light"] nav#main-nav .nav-trigger:hover{color:#0E1116!important;background:rgba(14,17,22,.04)!important}
/* Hide chevron arrows next to Services / Car Keys / Service Area on desktop */
nav#main-nav .nav-trigger .nav-arrow{display:inline-block!important;font-size:9px;margin-left:4px;opacity:.6}
/* Hide the floating hamburger on desktop (nav is inline) */
.floating-hamburger{display:none!important}
/* Bring back the panels on desktop only (they handle Services/CarKeys/Area dropdowns) */
.services-panel{display:flex!important}
.panel-overlay{display:block!important}
.services-panel:not(.open){display:none!important}
}
/* When menu is open on desktop, hide nav-links so only drawer is visible */
html.menu-open nav#main-nav .nav-links{display:none!important}
/* ─── FINAL: hide floating hamburger on desktop (inline nav is enough) ─── */
@media(min-width:761px){
html .floating-hamburger,
html .floating-hamburger.is-x,
html.menu-open .floating-hamburger{display:none!important;visibility:hidden!important}
}
/* ─── Disable scroll-shrink: logo + bar stay same size on scroll ─── */
html.scrolled nav#main-nav,
html.scrolled nav#main-nav .nav-main-row,
html.scrolled body,
html.scrolled .nav-logo,
html.scrolled .brand-logo,
html.scrolled .nav-logo img[data-cfg-logo],
html.scrolled .brand-logo img[data-cfg-logo],
html.scrolled #hamburger,
html.scrolled nav#main-nav .nav-links > a,
html.scrolled nav#main-nav .nav-trigger{
transition:none!important;
}
html.scrolled nav#main-nav .nav-main-row{height:76px!important}
html.scrolled body{padding-top:76px!important}
html.scrolled .nav-logo,html.scrolled .brand-logo{top:9px!important}
html.scrolled .nav-logo img[data-cfg-logo],html.scrolled .brand-logo img[data-cfg-logo]{max-height:58px!important}
@media(max-width:760px){
html.scrolled .nav-logo img[data-cfg-logo],html.scrolled .brand-logo img[data-cfg-logo]{max-height:46px!important}
}
@media(max-width:540px){
html.scrolled .nav-logo img[data-cfg-logo],html.scrolled .brand-logo img[data-cfg-logo]{max-height:38px!important}
}
/* ─── Desktop: show theme toggle next to Call pill ─── */
@media(min-width:761px){
nav#main-nav .theme-toggle{
display:inline-flex!important;
position:fixed!important;
top:18px!important;right:300px!important; /* left of the Call pill */
width:40px!important;height:40px!important;
background:transparent!important;
border:1px solid rgba(255,255,255,.12)!important;
border-radius:50%!important;
color:#fff!important;
align-items:center!important;justify-content:center!important;
cursor:pointer;z-index:1500!important;
transition:background .18s, border-color .18s;
padding:0!important;
}
nav#main-nav .theme-toggle:hover{
background:rgba(255,255,255,.08)!important;
border-color:rgba(255,255,255,.24)!important;
}
nav#main-nav .theme-toggle svg{width:16px!important;height:16px!important;color:#fff!important}
html[data-theme="light"] nav#main-nav .theme-toggle{
border-color:rgba(14,17,22,.1)!important;color:#0E1116!important;
}
html[data-theme="light"] nav#main-nav .theme-toggle svg{color:#0E1116!important}
html[data-theme="light"] nav#main-nav .theme-toggle:hover{
background:rgba(14,17,22,.04)!important;border-color:rgba(14,17,22,.2)!important;
}
/* Hide theme toggle when menu open (drawer has its own) */
html.menu-open nav#main-nav .theme-toggle{display:none!important}
}
/* ─── Theme toggle SVG: ensure visible in both modes ─── */
nav#main-nav .theme-toggle{color:#fff!important}
nav#main-nav .theme-toggle svg{
width:18px!important;height:18px!important;
color:inherit!important;
stroke:currentColor!important;
display:block!important;
}
nav#main-nav .theme-toggle svg *{stroke:currentColor!important;color:inherit!important}
html[data-theme="light"] nav#main-nav .theme-toggle{color:#0E1116!important}
html[data-theme="light"] nav#main-nav .theme-toggle svg,
html[data-theme="light"] nav#main-nav .theme-toggle svg *{stroke:#0E1116!important;color:#0E1116!important}
/* ─── Theme toggle: move to far top-right corner ─── */
@media(min-width:761px){
nav#main-nav .theme-toggle{
display:inline-flex!important;
position:fixed!important;
top:18px!important;right:18px!important;
left:auto!important;bottom:auto!important;
width:42px!important;height:42px!important;
background:rgba(255,255,255,.08)!important;
border:1px solid rgba(255,255,255,.18)!important;
border-radius:50%!important;
color:#fff!important;
align-items:center!important;justify-content:center!important;
cursor:pointer;z-index:2000!important;
padding:0!important;margin:0!important;
transition:background .18s, border-color .18s;
}
nav#main-nav .theme-toggle svg{width:18px!important;height:18px!important;color:inherit!important;stroke:currentColor!important;display:block!important}
/* Push Call pill left to make room */
nav#main-nav .nav-cta{right:80px!important}
html[data-theme="light"] nav#main-nav .theme-toggle{
background:rgba(14,17,22,.04)!important;
border-color:rgba(14,17,22,.12)!important;
color:#0E1116!important;
}
html[data-theme="light"] nav#main-nav .theme-toggle svg{color:#0E1116!important;stroke:#0E1116!important}
}
/* ─── Beat the high-specificity :not(#hamburger) rule that was hiding theme toggle ─── */
@media(min-width:761px){
html nav#main-nav .nav-right .theme-toggle,
html nav#main-nav .nav-right > .theme-toggle,
html body nav#main-nav .theme-toggle{
display:inline-flex!important;
position:fixed!important;
top:18px!important;right:18px!important;
left:auto!important;bottom:auto!important;
width:42px!important;height:42px!important;
background:rgba(255,255,255,.1)!important;
border:1px solid rgba(255,255,255,.22)!important;
border-radius:50%!important;
align-items:center!important;justify-content:center!important;
z-index:2000!important;cursor:pointer!important;
visibility:visible!important;opacity:1!important;
padding:0!important;margin:0!important;
color:#fff!important;
}
html nav#main-nav .nav-right .theme-toggle svg{
width:18px!important;height:18px!important;
color:#fff!important;stroke:#fff!important;display:block!important;
}
html[data-theme="light"] nav#main-nav .nav-right .theme-toggle{
background:rgba(14,17,22,.06)!important;
border-color:rgba(14,17,22,.18)!important;
color:#0E1116!important;
}
html[data-theme="light"] nav#main-nav .nav-right .theme-toggle svg{
color:#0E1116!important;stroke:#0E1116!important;
}
}
/* ─── DEBUG: theme toggle in unmistakable colors so we know if it's rendering ─── */
@media(min-width:761px){
#themeToggle{
display:inline-flex!important;
position:fixed!important;
top:18px!important;right:18px!important;
width:48px!important;height:48px!important;
background:#FF3B30!important;
border:3px solid #FFFFFF!important;
border-radius:50%!important;
z-index:9999999!important;
visibility:visible!important;opacity:1!important;
align-items:center!important;justify-content:center!important;
color:#fff!important;cursor:pointer!important;
padding:0!important;margin:0!important;
box-shadow:0 0 0 4px rgba(255,59,48,.3)!important;
}
#themeToggle::before{
content:'☀';
font-size:22px!important;color:#fff!important;
display:inline-block;
}
}
/* ─── DEBUG #2: maximum specificity to beat earlier hide rule ─── */
@media(min-width:761px){
nav#main-nav #themeToggle.theme-toggle,
body nav#main-nav #themeToggle{
display:inline-flex!important;
position:fixed!important;
top:18px!important;right:18px!important;
width:48px!important;height:48px!important;
background:#FF3B30!important;
border:3px solid #FFFFFF!important;
border-radius:50%!important;
z-index:9999999!important;
visibility:visible!important;opacity:1!important;
align-items:center!important;justify-content:center!important;
color:#fff!important;cursor:pointer!important;
padding:0!important;margin:0!important;
box-shadow:0 0 0 4px rgba(255,59,48,.4)!important;
}
}
/* ─── FINAL: hide theme toggle from the bar (auto-mode still active) ─── */
nav#main-nav #themeToggle.theme-toggle,
nav#main-nav #themeToggle,
nav#main-nav .theme-toggle,
body nav#main-nav .theme-toggle{
display:none!important;
visibility:hidden!important;
}
/* ─── Nav bar: transparent background, no edge ─── */
nav#main-nav{
background:transparent!important;
background-image:none!important;
border:none!important;border-bottom:none!important;
box-shadow:none!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
nav#main-nav .nav-main-row{
background:transparent!important;
border:none!important;
}
/* Body padding: keep top space but no visible bar */
body{padding-top:90px!important}
/* ─── Clear any leftover elements on the right side of the bar ─── */
@media(min-width:761px){
nav#main-nav .nav-right{display:none!important}
/* But keep the nav-cta floating standalone (it has position:fixed) */
nav#main-nav .nav-cta{display:inline-flex!important}
}
/* ─── Make sure the drawer is fully hidden off-screen when not open ─── */
#mobileMenu{
transform:translateX(110%)!important;
pointer-events:none!important;
}
#mobileMenu.open{
transform:translateX(0)!important;
pointer-events:auto!important;
}
/* Overlay only when menu is open */
.mobile-overlay{display:none!important}
.mobile-overlay.visible,.mobile-overlay.show{display:block!important}
/* ─── Remove body top padding — bar is transparent + floats over hero ─── */
body{padding-top:0!important}
section#hero.hero-d4{padding-top:100px!important}
section#hero.hero-d4 .hero-d4-content{padding-top:0!important}
/* ─── Body matches the hero so no light strip shows at top ─── */
body{
background:#0E1A12!important;
background-image:linear-gradient(180deg,#0E1A12 0%,#122017 100%)!important;
}
html[data-theme="light"] body{
background:#F6F8F5!important;
background-image:linear-gradient(180deg,#F6F8F5 0%,#FFFFFF 100%)!important;
}
/* Make the hero extend ABOVE the bar to fully cover the top area */
section#hero.hero-d4{
margin-top:0!important;
padding-top:0!important;
}
section#hero.hero-d4 .hero-d4-bg{top:0!important}
section#hero.hero-d4 .hero-d4-content{padding-top:120px!important}
/* ─── Make nav bar SOLID DARK so it blends with the hero ─── */
nav#main-nav{
background:#0E1A12!important;
background-image:linear-gradient(180deg,#0E1A12 0%,#143620 100%)!important;
border:none!important;border-bottom:none!important;
box-shadow:none!important;
}
html[data-theme="light"] nav#main-nav{
background:#FFFFFF!important;
background-image:none!important;
}
/* ─── Hero bg adapts to theme — same color as nav bar in both modes ─── */
html[data-theme="light"] .hero-d4-bg{
background:
radial-gradient(ellipse 80% 60% at 18% 28%, #E6F0E6 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 82% 72%, #F3EEDA 0%, transparent 60%),
linear-gradient(180deg, #FFFFFF 0%, #F6F8F5 55%, #EEF3EC 100%)!important;
}
html[data-theme="light"] section#hero.hero-d4{background:#F6F8F5!important}
html[data-theme="light"] .hero-d4-mask{
background:linear-gradient(180deg, rgba(246,248,245,.05) 0%, transparent 30%, rgba(246,248,245,.4) 100%)!important;
}
html[data-theme="light"] .hero-d4-h1,
html[data-theme="light"] .hero-d4-content,
html[data-theme="light"] .hero-d4-sub,
html[data-theme="light"] .hero-d4-badge,
html[data-theme="light"] .hero-d4-trust{color:#0E1116!important}
html[data-theme="light"] .hero-d4-badge{
background:rgba(14,17,22,.06)!important;
border-color:rgba(14,17,22,.1)!important;
color:#0E1116!important;
}
html[data-theme="light"] .hero-d4-sub{color:rgba(14,17,22,.65)!important}
html[data-theme="light"] .hero-d4-trust{color:rgba(14,17,22,.55)!important}
html[data-theme="light"] .hero-d4-cta-p{background:#0E1116!important;color:#fff!important}
html[data-theme="light"] .hero-d4-cta-g{
background:rgba(14,17,22,.04)!important;
border-color:rgba(14,17,22,.12)!important;
color:#0E1116!important;
}
/* ═══════════════════════════════════════════════════════════
NO BAR — logo, links, Call float over the hero, no background
═══════════════════════════════════════════════════════════ */
nav#main-nav,
nav#main-nav .nav-main-row{
background:transparent!important;background-image:none!important;
border:none!important;border-bottom:none!important;border-top:none!important;
box-shadow:none!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
/* Hero back to original dark — don't theme-shift */
html[data-theme="light"] .hero-d4-bg{
background:
radial-gradient(ellipse 80% 60% at 18% 28%, #1E3D26 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 82% 72%, #2C3A1A 0%, transparent 60%),
linear-gradient(180deg, #143620 0%, #122017 55%, #0E1A12 100%)!important;
}
html[data-theme="light"] section#hero.hero-d4{background:#0E1A12!important}
html[data-theme="light"] .hero-d4-mask{
background:linear-gradient(180deg, rgba(11,14,22,.25) 0%, rgba(11,14,22,0) 30%, rgba(11,14,22,.55) 100%)!important;
}
html[data-theme="light"] .hero-d4-h1,
html[data-theme="light"] .hero-d4-content,
html[data-theme="light"] .hero-d4-badge{color:#fff!important}
html[data-theme="light"] .hero-d4-sub{color:rgba(255,255,255,.86)!important}
html[data-theme="light"] .hero-d4-trust{color:rgba(255,255,255,.7)!important}
html[data-theme="light"] .hero-d4-badge{
background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.22)!important;color:#fff!important;
}
html[data-theme="light"] .hero-d4-cta-p{background:linear-gradient(135deg,#2E7D4F 0%,#C8B655 100%)!important;color:#14241A!important}
html[data-theme="light"] .hero-d4-cta-g{
background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.22)!important;color:#fff!important;
}
/* Body background — forest green-black in dark mode (was navy) */
body{background:#0E1A12!important;background-image:linear-gradient(180deg,#0E1A12 0%,#122017 100%)!important}
html[data-theme="light"] body{background:#FFFFFF!important;background-image:linear-gradient(180deg,#F6F8F5 0%,#FFFFFF 100%)!important}
/* ═══════════════════════════════════════════════════════════
Dark body = green-black; only the hero photo sits on top
═══════════════════════════════════════════════════════════ */
body{
background:linear-gradient(180deg,#0E1A12 0%,#122017 100%)!important;
background-image:linear-gradient(180deg,#0E1A12 0%,#122017 100%)!important;
}
html[data-theme="light"] body{
background:linear-gradient(180deg,#F6F8F5 0%,#FFFFFF 100%)!important;
background-image:linear-gradient(180deg,#F6F8F5 0%,#FFFFFF 100%)!important;
}
/* Make sure non-hero sections stay light in light mode (don't get dark overlay) */
html[data-theme="light"] section,
html[data-theme="light"] .trust-band,
html[data-theme="light"] footer{filter:none!important;background-blend-mode:normal!important}
/* The trust-band uses its own dark glass — keep it readable in light mode */
html[data-theme="light"] .trust-band{
background:rgba(255,255,255,.7)!important;
border:1px solid rgba(14,17,22,.06)!important;
}
/* ─── Close the gap between nav bar and hero on desktop ─── */
section#hero.hero-d4{
margin-top:-76px!important; /* pull hero up under the bar */
padding-top:76px!important; /* push content back down */
border-radius:0!important;
}
section#hero.hero-d4 .hero-d4-bg{top:0!important;height:100%!important}
section#hero.hero-d4 .hero-d4-content{padding-top:140px!important}
body{padding-top:0!important;margin-top:0!important}
/* ─── Kill any stray overlay that might be dimming the page on desktop ─── */
.mobile-overlay,
.panel-overlay,
#mobileOverlay,
#panelOverlay,
#ckOverlay,
#saOverlay{
display:none!important;
opacity:0!important;
pointer-events:none!important;
}
.mobile-overlay.visible,
.panel-overlay.show{
display:block!important;
opacity:1!important;
pointer-events:auto!important;
}
/* ─── Hide every section eyebrow pill across the site ─── */
.section-label,
[class*="section-label"]{display:none!important}
/* ─── Car Keys panel + drawer: tier sections (Standard / Luxury / Electric) ─── */
.ck-tier{margin-bottom:14px}
.ck-tier-label,
.mm-tier-label{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:10px!important;letter-spacing:1.5px!important;text-transform:uppercase!important;
font-weight:600!important;
margin:6px 0 8px!important;
color:rgba(255,255,255,.5)!important;
}
.ck-tier-luxury .ck-tier-label,
.mm-tier-luxury .mm-tier-label,
.ck-tier-electric .ck-tier-label,
.mm-tier-electric .mm-tier-label{
color:#2E7D4F!important;
}
html[data-theme="light"] .ck-tier-label,
html[data-theme="light"] .mm-tier-label{color:rgba(14,17,22,.5)!important}
html[data-theme="light"] .ck-tier-luxury .ck-tier-label,
html[data-theme="light"] .mm-tier-luxury .mm-tier-label,
html[data-theme="light"] .ck-tier-electric .ck-tier-label,
html[data-theme="light"] .mm-tier-electric .mm-tier-label{color:#24472A!important}
/* Brand cards — Glass Bento style, drop the colored license-plate badge */
.services-panel .ck-brand{
background:rgba(255,255,255,.04)!important;
border:1px solid rgba(255,255,255,.08)!important;
color:#fff!important;
padding:8px 14px!important;border-radius:8px!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:13px!important;font-weight:600!important;letter-spacing:-.1px!important;
display:inline-flex!important;align-items:center!important;
}
.services-panel .ck-brand:hover{
background:rgba(36,71,42,.16)!important;border-color:rgba(36,71,42,.4)!important;
transform:translateY(-1px)!important;
}
.services-panel .ck-brand .ck-bd,
.services-panel .ck-brand::before{display:none!important;content:none!important}
html[data-theme="light"] .services-panel .ck-brand{
background:rgba(255,255,255,.85)!important;
border-color:rgba(14,17,22,.08)!important;color:#0E1116!important;
}
/* Uniform cards across all three menus — no special luxury/electric styling */
.services-panel .ck-brand.ck-lux,
.services-panel .ck-brand.ck-tesla{
background:rgba(255,255,255,.04)!important;color:#fff!important;border:1px solid rgba(255,255,255,.08)!important;
}
html[data-theme="light"] .services-panel .ck-brand.ck-lux,
html[data-theme="light"] .services-panel .ck-brand.ck-tesla{
background:rgba(255,255,255,.85)!important;color:#0E1116!important;border-color:rgba(14,17,22,.08)!important;
}
/* Mobile drawer tier sections */
#mobileMenu .mm-tier{margin-bottom:10px}
#mobileMenu .mm-tier-label{padding:0 4px;margin:8px 0 4px}
/* ─── FAQ page cleanup ─── */
/* Category section header — clean type, readable badge */
.faq-section-header{
display:flex!important;align-items:center!important;gap:12px!important;
margin-bottom:20px!important;padding-bottom:14px!important;
border-bottom:1px solid rgba(14,17,22,.06)!important;
}
.faq-section-name{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(18px,3vw,24px)!important;font-weight:600!important;
letter-spacing:-.5px!important;text-transform:none!important;
color:#0E1116!important;
}
html:not([data-theme="light"]) .faq-section-name{color:#fff!important}
/* Override the inline background hack — clean indigo pill with always-visible text */
.faq-section-badge{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:11px!important;font-weight:600!important;letter-spacing:-.1px!important;
padding:5px 12px!important;border-radius:100px!important;
background:rgba(36,71,42,.12)!important;
color:#24472A!important;
margin-left:auto!important;
text-transform:none!important;
}
html:not([data-theme="light"]) .faq-section-badge{
background:rgba(200,182,85,.16)!important;color:#DCCB72!important;
}
/* Section icon — smaller, subtler */
.faq-section-icon{font-size:18px!important;opacity:.7}
.faq-section-icon svg{width:20px!important;height:20px!important}
/* Question rows — kill any rogue indigo highlight on individual items */
.faq-q-text,
.faq-item .faq-q,
.faq-item .faq-q-text{
color:#0E1116!important;
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-weight:600!important;
}
html:not([data-theme="light"]) .faq-q-text,
html:not([data-theme="light"]) .faq-item .faq-q-text{color:#fff!important}
/* Plus icon button */
.faq-q-icon{
background:rgba(14,17,22,.04)!important;color:#24472A!important;
width:32px!important;height:32px!important;border-radius:50%!important;
display:inline-flex!important;align-items:center!important;justify-content:center!important;
font-size:18px!important;font-weight:300!important;
}
.faq-item.open .faq-q-icon{transform:rotate(45deg)}
/* ── FAQ hero: Option A — Compact pro (replaces giant Bebas headline) ── */
.faq-hero{min-height:auto!important;padding:96px 40px 32px!important;display:block!important;text-align:center!important}
.faq-hero-content{padding-bottom:24px!important;max-width:760px!important;margin-left:auto!important;margin-right:auto!important}
.faq-hero-content .faq-lead{margin-left:auto!important;margin-right:auto!important}
.faq-hero-content .faq-stats{margin-left:auto!important;margin-right:auto!important}
.faq-h1{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(34px,5vw,52px)!important;
font-weight:600!important;
line-height:1.08!important;
letter-spacing:-1.2px!important;
text-transform:none!important;
margin-bottom:14px!important;
color:#0E1116!important;
}
html:not([data-theme="light"]) .faq-h1{color:#fff!important}
.faq-h1 span{color:#24472A!important}
.faq-lead{
font-size:15px!important;line-height:1.65!important;
max-width:560px!important;font-weight:400!important;
margin-bottom:24px!important;color:#5F6470!important;
}
html:not([data-theme="light"]) .faq-lead{color:#A8AEBB!important}
.faq-badge{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
background:rgba(36,71,42,.12)!important;border:none!important;
color:#24472A!important;font-size:11px!important;font-weight:600!important;
letter-spacing:1.2px!important;padding:5px 12px!important;margin-bottom:16px!important;
}
.faq-stats{max-width:460px!important;border-color:rgba(14,17,22,.08)!important;margin-bottom:0!important}
html:not([data-theme="light"]) .faq-stats{border-color:rgba(255,255,255,.1)!important}
.faq-stat-n{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:22px!important;font-weight:600!important;color:#24472A!important;
letter-spacing:-.5px!important;
}
.faq-stat-l{font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;font-size:10px!important;letter-spacing:1px!important;color:#888!important}
@media(max-width:640px){
.faq-hero{padding:88px 20px 24px!important}
.faq-h1{font-size:clamp(28px,8vw,38px)!important}
}
/* ─────────────────────────────────────────────────────────────────────
SITE-WIDE TYPOGRAPHY SWEEP — kill oversized Bebas Neue everywhere.
Convert all page heros + section titles + CTAs to SF Pro 600,
sentence case, modern letter-spacing. Editorial big numbers
(.rv-rating-num, .nf-title, .qc-result-amount) intentionally
preserved as they're meant to dominate.
───────────────────────────────────────────────────────────────────── */
/* Section H2s — universal */
.section-title{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(28px,3.6vw,44px)!important;
font-weight:600!important;letter-spacing:-1px!important;
line-height:1.1!important;text-transform:none!important;
margin-bottom:28px!important;
}
/* Car Keys page hero */
.ck-h1{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(34px,5vw,52px)!important;
font-weight:600!important;letter-spacing:-1.2px!important;
line-height:1.08!important;text-transform:none!important;
margin-bottom:14px!important;
}
.ck-cta-title{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(28px,3.4vw,40px)!important;
font-weight:600!important;letter-spacing:-.8px!important;
line-height:1.1!important;text-transform:none!important;
}
.ck-stat-n{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:22px!important;font-weight:600!important;letter-spacing:-.5px!important;
}
/* Service detail page hero */
.svc-hero h1{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(32px,4.6vw,48px)!important;
font-weight:600!important;letter-spacing:-1.2px!important;
line-height:1.08!important;text-transform:none!important;
margin-bottom:12px!important;
}
.svc-price{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:15px!important;font-weight:500!important;letter-spacing:0!important;
}
/* Home CTA band */
.cta-title{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(30px,4vw,46px)!important;
font-weight:600!important;letter-spacing:-1px!important;
line-height:1.08!important;text-transform:none!important;
margin-bottom:14px!important;
}
.phone-big{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(28px,4vw,42px)!important;
font-weight:600!important;letter-spacing:-.8px!important;
}
/* FAQ CTA section */
.faq-cta-title{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(28px,3.8vw,42px)!important;
font-weight:600!important;letter-spacing:-1px!important;
line-height:1.1!important;text-transform:none!important;
margin-bottom:14px!important;
}
/* Emergency band */
.eb-title{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(28px,3.6vw,44px)!important;
font-weight:600!important;letter-spacing:-.8px!important;
line-height:1.1!important;text-transform:none!important;
}
.eb-btn{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:16px!important;letter-spacing:0!important;font-weight:600!important;
text-transform:none!important;
}
/* Booking confirm */
.bk-confirm-title{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(28px,4vw,44px)!important;
font-weight:600!important;letter-spacing:-1px!important;
line-height:1.1!important;text-transform:none!important;
}
/* Section eyebrow icons + names on FAQ — clean sentence case */
.faq-section-name{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(17px,2vw,22px)!important;
font-weight:600!important;letter-spacing:-.4px!important;
text-transform:none!important;
}
/* Hero stat numbers + generic stat-num */
.stat-num,.faq-stat-n,.sa-stat-num{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-weight:600!important;letter-spacing:-.5px!important;
}
/* Quote calculator (keep editorial big amount; tighten label) */
.qc-result-amount{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-weight:600!important;letter-spacing:-2px!important;
}
/* Blog post body — sentence case headings */
.post-body h2{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(22px,2.8vw,30px)!important;
font-weight:600!important;letter-spacing:-.6px!important;
text-transform:none!important;
}
.post-body h3{
font-family:-apple-system,'SF Pro Display','Inter',sans-serif!important;
font-size:clamp(17px,2vw,22px)!important;
font-weight:600!important;letter-spacing:-.3px!important;
text-transform:none!important;
}
/* Mobile shrink */
@media(max-width:640px){
.ck-h1,.svc-hero h1{font-size:clamp(26px,7vw,34px)!important}
.cta-title,.faq-cta-title,.eb-title,.bk-confirm-title{font-size:clamp(24px,6vw,32px)!important}
.section-title{font-size:clamp(22px,6vw,30px)!important;margin-bottom:20px!important}
.phone-big{font-size:clamp(24px,7vw,32px)!important}
}
/* ── Global hero clearance: stop headlines being clipped by the floating nav ── */
/* Many pages open with breadcrumb/back-button before the hero section,
so first-child won't always match. Apply directly to every hero class. */
#page > section:first-child,
#page > .container > section:first-child,
#page .faq-hero,
#page .page-hero,
#page .ck-hero,
#page .blog-hero,
#page .bk-hero,
#page #hero,
#page > section:has(> .container > h1),
#page > .breadcrumb + section,
#page > .back-btn + section,
#page > .back-btn + .breadcrumb + section{
padding-top:max(140px, 16vh)!important;
}
@media(max-width:640px){
#page > section:first-child,
#page > .container > section:first-child,
#page .faq-hero,
#page .page-hero,
#page .ck-hero,
#page .blog-hero,
#page .bk-hero,
#page #hero,
#page > section:has(> .container > h1),
#page > .breadcrumb + section,
#page > .back-btn + section,
#page > .back-btn + .breadcrumb + section{
padding-top:130px!important;
}
}
/* Breadcrumb / back button bar above hero should clear the nav too */
#page > .breadcrumb,
#page > .back-btn{margin-top:96px!important}
@media(max-width:640px){
#page > .breadcrumb,
#page > .back-btn{margin-top:88px!important}
}
/* ═══════════════════════════════════════════════════════════
LARGE CENTERED BRAND LOGO — full-size badge overlapping hero
Links sit left, Call button right, badge centered in the middle.
═══════════════════════════════════════════════════════════ */
/* Full-width white bar, centered at viewport center */
nav#main-nav{
width:100%!important;max-width:none!important;
left:0!important;right:0!important;transform:none!important;
border-radius:0!important;top:0!important;
overflow:visible!important;
z-index:1250!important;
}
/* keep the centered badge above the open dropdown panels */
nav#main-nav .nav-center-logo{z-index:1260!important}
nav#main-nav .nav-main-row{
width:100%!important;
display:flex!important;align-items:center!important;
justify-content:center!important;
gap:0!important;padding:0 28px!important;
overflow:visible!important;
}
/* Two equal-width link groups flank the centered badge → perfectly symmetric */
nav#main-nav .nav-side{position:static!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;display:flex!important;align-items:center!important;gap:10px!important;flex:1 1 0!important;min-width:0!important}
nav#main-nav .nav-side-left{justify-content:flex-start!important}
nav#main-nav .nav-side-right{justify-content:flex-end!important}
/* Centered badge — sits in the middle, overflows downward into the hero */
nav#main-nav .nav-center-logo{
position:relative!important;top:auto!important;left:auto!important;right:auto!important;
transform:none!important;
flex:0 0 auto!important;
width:150px!important;height:76px!important;
display:flex!important;align-items:center!important;justify-content:center!important;
background:transparent!important;border:none!important;padding:0!important;margin:0!important;
overflow:visible!important;z-index:3!important;cursor:pointer;
}
nav#main-nav .nav-center-logo img[data-cfg-logo]{
position:absolute!important;top:6px!important;left:50%!important;
transform:translateX(-50%)!important;
height:140px!important;max-height:140px!important;width:auto!important;max-width:none!important;
filter:none!important;
}
nav#main-nav .nav-right{display:none!important}
.footer-logo img[data-cfg-logo]{height:70px!important;max-height:70px!important}
@media(max-width:1000px){
nav#main-nav .nav-side{display:none!important}
nav#main-nav .nav-main-row{height:50px!important;min-height:50px!important}
nav#main-nav .nav-center-logo{width:100%!important;height:50px!important;justify-content:center!important;position:relative!important}
nav#main-nav .nav-center-logo img[data-cfg-logo]{position:absolute!important;top:4px!important;left:50%!important;transform:translateX(-50%)!important;height:86px!important;max-height:86px!important}
/* center the menu button in the shorter bar */
.floating-hamburger,#floatingHamburger{top:4px!important;width:42px!important;height:42px!important;right:16px!important}
}
/* Remove the faint hero grid lines */
.hero-d4-grid,.hero-grid,.ck-hero-grid,.blog-hero-grid,.faq-hero-bg,.bk-hero-grid,.hero-d4-grain{display:none!important}
/* ═══════════════════════════════════════════════════════════
HOMEPAGE HERO — branded background photo (Key Rescue van / Treasure Valley)
Dark gradient on the left keeps the headline readable.
═══════════════════════════════════════════════════════════ */
.hero-d4-bg{
background:
linear-gradient(90deg, rgba(11,22,15,.92) 0%, rgba(11,22,15,.74) 30%, rgba(11,22,15,.40) 52%, rgba(11,22,15,.10) 74%, rgba(11,22,15,0) 100%),
linear-gradient(180deg, rgba(11,22,15,0) 55%, rgba(11,22,15,.55) 100%),
url('../photos/hero-bg.jpg') center center / cover no-repeat !important;
}
/* Day mode: lighter scrim so the Treasure Valley photo reads bright; headline stays legible on the left */
html[data-theme="light"] .hero-d4-bg{
background:
linear-gradient(90deg, rgba(11,22,15,.78) 0%, rgba(11,22,15,.50) 27%, rgba(11,22,15,.18) 49%, rgba(11,22,15,.03) 70%, rgba(11,22,15,0) 100%),
linear-gradient(180deg, rgba(11,22,15,0) 66%, rgba(11,22,15,.26) 100%),
url('../photos/hero-bg.jpg') center center / cover no-repeat !important;
}
html[data-theme="light"] .hero-d4-mask{
background:
linear-gradient(180deg, rgba(11,14,22,.08) 0%, rgba(11,14,22,0) 40%, rgba(11,14,22,.26) 100%),
linear-gradient(90deg, rgba(11,14,22,.14) 0%, rgba(11,14,22,0) 55%);
}
/* let the photo show cleanly */
.hero-d4-glow-a,.hero-d4-glow-b{display:none!important}
html[data-theme="light"] section#hero.hero-d4{background:#0B160F!important}
section#hero.hero-d4{background:#0B160F!important}
@media(max-width:760px){
/* on narrow screens, bias the photo toward the van + skyline */
.hero-d4-bg,html[data-theme="light"] .hero-d4-bg{
background:
linear-gradient(180deg, rgba(11,22,15,.55) 0%, rgba(11,22,15,.25) 32%, rgba(11,22,15,.65) 100%),
url('../photos/hero-bg.jpg') center center / cover no-repeat !important;
}
}
/* ═══════════════════════════════════════════════════════════
ALWAYS-VISIBLE NAV BAR — solid translucent bar even at the top
(was transparent-until-scroll). Matches the scrolled style.
═══════════════════════════════════════════════════════════ */
nav#main-nav{
background:rgba(20,26,22,.82)!important;
-webkit-backdrop-filter:blur(20px) saturate(160%)!important;
backdrop-filter:blur(20px) saturate(160%)!important;
border-bottom:1px solid rgba(255,255,255,.08)!important;
box-shadow:0 2px 18px rgba(0,0,0,.28)!important;
}
/* ═══════════════════════════════════════════════════════════
FIX SCROLL-START JANK — keep the nav bar a constant size and
stop the body-padding jump when .scrolled is toggled.
═══════════════════════════════════════════════════════════ */
html.scrolled body{padding-top:0!important}
html.scrolled nav#main-nav .nav-main-row{height:76px!important;min-height:76px!important}
/* keep the badge full size in both states — no shrink-on-scroll */
html.scrolled nav#main-nav .nav-center-logo img[data-cfg-logo]{height:140px!important;max-height:140px!important;top:6px!important}
@media(max-width:1000px){
html.scrolled nav#main-nav .nav-main-row{height:50px!important;min-height:50px!important}
html.scrolled nav#main-nav .nav-center-logo{height:50px!important}
html.scrolled nav#main-nav .nav-center-logo img[data-cfg-logo]{height:86px!important;max-height:86px!important;top:4px!important}
html.scrolled .floating-hamburger,html.scrolled #floatingHamburger{top:4px!important;width:42px!important;height:42px!important;right:16px!important}
}
/* ── FAQ dark-mode accents (green is invisible on dark; use gold) ── */
html:not([data-theme="light"]) .faq-h1 span{color:#C8B655!important}
html:not([data-theme="light"]) .faq-badge{color:#DCCB72!important;background:rgba(255,255,255,.05)!important;border:1px solid rgba(200,182,85,.35)!important}
html:not([data-theme="light"]) .faq-stat-n{color:#C8B655!important}
.faq-stat-l{color:#5F6470!important}
html:not([data-theme="light"]) .faq-stat-l{color:#9AA797!important}
/* ── Car Keys CTA band — consistent green band, light text (both themes) ── */
.ck-cta-band{background:#24472A!important}
.ck-cta-title{color:#F4EFDD!important}
.ck-cta-sub{color:rgba(255,255,255,.82)!important}
/* ── Blog category tag — readable green pill, white text (both themes) ── */
.blog-card .blog-tag, .blog-tag{
display:inline-block!important;width:auto!important;
background:#24472A!important;color:#FFFFFF!important;
padding:5px 14px!important;border-radius:100px!important;
font-size:11px!important;font-weight:700!important;letter-spacing:1px!important;
text-transform:uppercase!important;margin-bottom:14px!important;
}
/* Hide internal car-key tier sub-labels (Standard/Luxury/Electric) — flat list like the other menus */
.ck-tier-label,.mm-tier-label{display:none!important}
/* When a breadcrumb follows the "Back" link (brand pages), don't double the nav-clearing top space */
#page > .back-btn + .breadcrumb{margin-top:4px!important;padding-top:0!important}
/* ── Car Keys page hero — branded car-key photo background ── */
section.ck-hero[class*="hero"]{
background:
linear-gradient(90deg, rgba(11,22,15,.95) 0%, rgba(11,22,15,.74) 34%, rgba(11,22,15,.34) 60%, rgba(11,22,15,0) 100%),
linear-gradient(180deg, rgba(11,22,15,0) 60%, rgba(11,22,15,.45) 100%),
url('../photos/car-key.jpg?v=gb163') center right / cover no-repeat !important;
}
section.ck-hero .ck-hero-grid,section.ck-hero .ck-hero-glow{display:none!important}
@media(max-width:760px){
section.ck-hero[class*="hero"]{
background:
linear-gradient(180deg, rgba(11,22,15,.6) 0%, rgba(11,22,15,.32) 32%, rgba(11,22,15,.8) 100%),
url('../photos/car-key.jpg?v=gb163') center center / cover no-repeat !important;
}
}
/* ── Car brand pages (Ford, Toyota…) hero — same car-key photo background ── */
section.brand-hero{
background:
linear-gradient(90deg, rgba(11,22,15,.95) 0%, rgba(11,22,15,.74) 34%, rgba(11,22,15,.34) 60%, rgba(11,22,15,0) 100%),
linear-gradient(180deg, rgba(11,22,15,0) 60%, rgba(11,22,15,.45) 100%),
url('../photos/car-key.jpg?v=gb163') center right / cover no-repeat !important;
}
section.brand-hero > div[style*="opacity:.04"],section.brand-hero > div[style*="border-radius:50%"]{display:none!important}
@media(max-width:760px){
section.brand-hero{
background:
linear-gradient(180deg, rgba(11,22,15,.62) 0%, rgba(11,22,15,.34) 32%, rgba(11,22,15,.82) 100%),
url('../photos/car-key.jpg?v=gb163') center center / cover no-repeat !important;
}
}
/* ── Brand texture background on the otherwise-plain page heroes ── */
section.page-hero[class*="hero"],
section.faq-hero[class*="hero"],
section.blog-hero[class*="hero"],
section.brand-page-hero[class*="hero"]{
background:
linear-gradient(180deg, rgba(11,22,15,.80) 0%, rgba(11,22,15,.90) 100%),
url('../photos/brand-bg.jpg?v=gb164') center center / cover no-repeat !important;
}
/* These heroes are always on a dark photo, so force light text in BOTH themes
(in day mode the default text colors are dark and disappear). */
section.page-hero[class*="hero"] .section-title,
section.faq-hero[class*="hero"] .section-title,
section.blog-hero[class*="hero"] .section-title,
section.brand-page-hero[class*="hero"] .section-title{color:#F4EFDD!important}
section.page-hero[class*="hero"] .page-hero-content p,
section.brand-page-hero[class*="hero"] .page-hero-content p,
section.page-hero[class*="hero"] .page-hero-content,
section.brand-page-hero[class*="hero"] .page-hero-content{color:rgba(244,239,221,.92)!important}
section.page-hero[class*="hero"] .section-title [style*="--gold"],
section.page-hero[class*="hero"] .section-title .accent,
section.brand-page-hero[class*="hero"] .section-title [style*="--gold"],
section.brand-page-hero[class*="hero"] .section-title .accent{color:#C8B655!important}