:root{
  --bg:#FAFAF8;
  --surface:#FFFFFF;
  --ink:#15171A;
  --ink-soft:#5B5F66;
  --ink-faint:#9A9DA3;
  --accent:#2F5EFF;
  --accent-ink:#0E2AA8;
  --accent-soft:#EEF1FF;
  --line:#E4E3DE;
  --line-strong:#D2D0C8;
  --radius:14px;
  --sys:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:var(--sys);
  --body:var(--sys);
  --mono:var(--sys);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:var(--body); line-height:1.5; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:1160px; margin:0 auto; padding:0 28px;}
section{padding:60px 0;}
@media (max-width:720px){ section{padding:44px 0;} .wrap{padding:0 20px;} }

h1,h2,h3,h4{font-family:var(--display); font-weight:600; letter-spacing:-0.02em; line-height:1.05;}
.eyebrow{font-family:var(--mono); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-ink); display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.eyebrow::before{content:""; width:20px; height:1px; background:var(--accent);}
.lede{color:var(--ink-soft); font-size:17px; max-width:560px;}

.topbar{background:var(--ink); color:#EDEEF0; font-family:var(--mono); font-size:12.5px; letter-spacing:0.04em; padding:9px 0; text-align:center;}
.topbar-short{display:none;}
.topbar span{opacity:0.5; margin:0 10px;}

header.nav{position:sticky; top:0; z-index:50; background:rgba(250,250,248,0.62); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid rgba(255,255,255,0.5); box-shadow:0 1px 0 rgba(21,23,26,0.04), 0 8px 24px -18px rgba(21,23,26,0.25);}
.navbar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:14px 28px; max-width:1160px; margin:0 auto;}
.logo{display:flex; align-items:center; justify-content:center; padding:0 22px;}
.logo img{height:34px; width:auto; display:block;}
.nav-side{display:flex; align-items:center; gap:22px; min-width:0;}
.nav-side--left{justify-content:flex-start;}
.nav-cta-left{display:flex; align-items:center; gap:12px; flex:none;}
.nav-cta-left a{display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong); color:var(--ink-soft); transition:border-color .15s, color .15s;}
.nav-cta-left a:hover{border-color:var(--accent); color:var(--accent-ink);}
.nav-cta-left svg{width:15px; height:15px;}
.navlinks{display:flex; font-size:14px; font-weight:500; gap:24px;}
.navlinks.left{justify-content:flex-start; flex:1;}
.navlinks.right{justify-content:flex-end; flex:1;}
.navlinks a{color:var(--ink-soft); transition:color .15s; white-space:nowrap;}
.navlinks a:hover{color:var(--ink);}
.nav-cta{display:flex; align-items:center; justify-content:space-between; flex:1; gap:24px;}
.nav-cta-right{display:flex; align-items:center; gap:12px; flex:none;}
.nav-cta-right .btn{height:38px; padding:0 18px; font-size:13.5px;}
@media (max-width:980px){ .navbar{grid-template-columns:auto 1fr auto;} .navlinks.left{display:none;} }
.phone-link{font-family:var(--mono); font-size:13.5px; color:var(--ink-soft); display:none;}
@media (min-width:860px){ .phone-link{display:inline;} }
.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; font-size:14px; font-weight:600; border:1px solid transparent; white-space:nowrap;}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{background:var(--accent);}
.btn-accent{background:var(--accent); color:#fff;}
.btn-accent:hover{background:var(--accent-ink);}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-outline:hover{border-color:var(--ink);}
@media (max-width:700px){ .navlinks.right{display:none;} }

.nav-burger{display:none; background:none; border:0; padding:6px; cursor:pointer; color:var(--ink); flex:none;}
.nav-burger svg{width:24px; height:24px; display:block;}
.nav-drawer{display:none;}
@media (max-width:700px){
  /* Phone header: burger | logo | cart. Everything else moves into the drawer. */
  .navbar{grid-template-columns:auto 1fr auto; gap:8px; padding:10px 16px;}
  .nav-burger{display:block;}
  .nav-cta-left{display:none;}
  .nav-side--left{gap:0;}
  .logo{padding:0; justify-content:center;}
  .logo img{height:30px; width:auto;}
  .nav-cta{flex:none; gap:0; justify-content:flex-end;}
  .nav-cta-right{gap:0;}
  .nav-cta-right .btn{display:none;}
  .nav-cart{display:flex;}

  .nav-drawer{display:none; flex-direction:column; padding:10px 16px 16px; background:var(--surface); border-top:1px solid var(--line);}
  .nav-drawer.is-open{display:flex;}
  .nav-drawer > a{padding:12px 2px; font-size:15.5px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line);}
  .nav-drawer-actions{display:flex; gap:10px; margin-top:14px;}
  .nav-drawer-actions .btn{flex:1; justify-content:center;}
  .nav-drawer-social{display:flex; gap:12px; margin-top:14px;}
  .nav-drawer-social a{width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--ink-soft);}
  .nav-drawer-social svg{width:16px; height:16px;}

  /* Hero order on phone: headline > eyebrow > photo+pills > Browse kits > search > hint.
     display:contents lets the text block's children be ordered individually as
     grid items (desktop keeps them in the left column, markup unchanged). */
  .hero-compact .lede{display:none;}
  .hero-compact-text{display:contents;}
  .hero-compact-text > h1{order:0; margin-bottom:10px;}
  .hero-compact-text > .eyebrow{order:1; margin-bottom:0;}
  .hero-collage-stage{order:2;}
  .hero-cta-mobile{order:3; margin-top:6px;}
  .hero-cta-mobile-btn{max-width:none; width:100%;}
  .hero-compact .hero-compact-text > .hero-vs-field{order:4; margin-top:10px; max-width:none;}
  .hero-compact-text > .hero-vs-hint{order:5; margin-top:12px;}
  .hero-collage-stage{padding-bottom:0;}

  /* Short call-to-action topbar on phone; the long location line wrapped to 3 lines. */
  .topbar-full{display:none;}
  .topbar-short{display:inline;}
  .topbar{padding:8px 16px;}
  .topbar-short a{color:#fff; font-weight:700; text-decoration:underline;}

  /* Tighten the space between the header and the headline. */
  .hero--collage{padding-top:18px;}
}

.hero{padding:52px 0 64px; position:relative; overflow:hidden; background:radial-gradient(60% 70% at 12% 0%, rgba(47,94,255,0.10), transparent 60%), radial-gradient(50% 60% at 100% 100%, rgba(47,94,255,0.08), transparent 65%), var(--bg);}

.hero--bold{position:relative; padding:0; min-height:min(92vh,860px); display:flex; align-items:flex-end; overflow:hidden;}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04);}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,12,16,.35) 0%, rgba(10,12,16,.15) 30%, rgba(10,12,16,.72) 78%, rgba(10,12,16,.9) 100%);}
.hero-bold-inner{position:relative; z-index:1; padding:64px 28px 76px; max-width:760px;}
.eyebrow--light{color:#BFD0FF;}
.eyebrow--light::before{background:#7FA0FF;}
.hero-bold-h1{font-size:clamp(38px,6.4vw,68px); color:#fff; margin-bottom:22px; line-height:1.03; letter-spacing:-0.02em; text-shadow:0 2px 24px rgba(0,0,0,.25);}
.hero-bold-h1 em{font-style:normal; color:#7FA0FF;}
.lede--light{color:#E7E9EE; font-size:18px; max-width:600px;}
.btn-outline--light{color:#fff; border-color:rgba(255,255,255,.5);}
.btn-outline--light:hover{border-color:#fff; background:rgba(255,255,255,.08);}
.trust-row--light{margin-top:40px;}
.trust-row--light .trust-item{color:#C7CBD4;}
.trust-row--light .trust-item b{color:#fff;}
@media (max-width:720px){ .hero--bold{min-height:640px;} .hero-bold-inner{padding:44px 20px 52px;} }
@media (max-width:480px){ .hero--bold{min-height:560px;} }
.hero-full{width:100%; padding:0 32px; box-sizing:border-box;}
@media (max-width:900px){ .hero-full{padding:0 20px;} }

.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }

.hero--collage{padding:56px 0 60px; overflow:visible; position:relative; background:radial-gradient(56% 62% at 6% 8%, rgba(47,94,255,0.38), transparent 62%), radial-gradient(52% 58% at 98% 92%, rgba(153,60,29,0.22), transparent 58%), radial-gradient(50% 55% at 62% 100%, rgba(47,94,255,0.2), transparent 62%), linear-gradient(155deg, #D9E2FF 0%, #ECF0FC 42%, var(--bg) 78%);}
.hero-collage-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
@media (max-width:900px){ .hero-collage-grid{grid-template-columns:1fr; gap:64px;} }
.hero-collage-stage{position:relative; display:flex; align-items:center; justify-content:center; min-height:460px;}
.hero-collage-blob{position:absolute; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(47,94,255,0.16) 0%, rgba(47,94,255,0.02) 72%); top:50%; left:52%; transform:translate(-50%,-50%);}
.hero-collage-ghost{position:absolute; width:78%; aspect-ratio:4/3; border:1.5px solid var(--line-strong); border-radius:22px; transform:rotate(6deg) translate(18px,-10px); background:var(--surface);}
.hero-collage-card{position:relative; width:98%; aspect-ratio:4/3; border-radius:22px; overflow:hidden; transform:rotate(-3deg); box-shadow:0 40px 70px -30px rgba(21,23,26,0.4); border:1px solid var(--line); background:#0D0F12; transition:transform .3s ease;}
.hero-collage-card:hover{transform:rotate(-1deg) translateY(-4px);}
.hero-h1{font-family:var(--display); font-size:clamp(34px,5vw,54px); font-weight:600; line-height:1.05; letter-spacing:-0.02em; margin-bottom:22px; color:var(--ink);}
.hero-h1 em{font-style:normal; color:var(--accent);}
.hero-promo-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:44px; padding-top:32px; border-top:1px solid var(--line);}
.hero-promo{display:flex; align-items:center; gap:14px; padding:12px 16px 12px 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-decoration:none; transition:border-color .15s, transform .15s, box-shadow .15s;}
.hero-promo:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 16px 30px -20px rgba(21,23,26,0.3);}
.hero-promo-thumb{flex:none; width:58px; height:58px; border-radius:10px; overflow:hidden; background:#F1F2F0;}
.hero-promo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-promo-text{display:flex; flex-direction:column; gap:3px; min-width:0;}
.hero-promo-title{font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.25;}
.hero-promo-cta{font-size:12.5px; font-weight:600; color:var(--accent-ink);}
@media (max-width:900px){ .hero-promo-strip{grid-template-columns:1fr; margin-top:32px; padding-top:24px;} }
.hero-intro{max-width:720px; margin-bottom:64px;}
.hero-intro .hero-vs-field{max-width:520px;}
.hero-rows{display:flex; flex-direction:column; gap:72px;}
.hero-row{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.hero-row:nth-child(even) .hero-row-media{order:2;}
.hero-row-media{position:relative;}
.hero-row-media .hero-collage-blob{position:absolute; width:78%; aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle, rgba(47,94,255,0.16) 0%, rgba(47,94,255,0.02) 72%); top:50%; left:50%; transform:translate(-50%,-50%); z-index:0;}
.hero-row-media .hero-collage-card{position:relative; z-index:1; display:block; width:100%; aspect-ratio:4/3; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:#0D0F12; box-shadow:0 30px 60px -30px rgba(21,23,26,0.4); transition:transform .3s ease;}
.hero-row-media .hero-collage-card:hover{transform:translateY(-4px);}
.hero-row-num{font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--accent-ink); display:block; margin-bottom:12px;}
.hero-row-title{font-size:clamp(24px,3vw,34px); line-height:1.1; letter-spacing:-0.02em; margin-bottom:14px;}
.hero-row-title em{font-style:normal; color:var(--accent);}
.hero-row-text .lede{margin-bottom:24px;}
@media (max-width:900px){ .hero-intro{margin-bottom:44px;} .hero-rows{gap:48px;} .hero-row{grid-template-columns:1fr; gap:24px;} .hero-row:nth-child(even) .hero-row-media{order:0;} }
.hero-compact{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;}
.hero-compact-text{min-width:0;}
.hero-compact h1{font-size:clamp(30px,3.9vw,46px); line-height:1.06; margin-bottom:16px;}
.hero-compact .lede{max-width:540px; margin-bottom:26px;}
.hero-compact .hero-vs-field{max-width:520px;}
.hero-kit{position:relative; aspect-ratio:1/1; min-width:0;}
.hero-kit-glow{position:absolute; width:82%; aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle, rgba(47,94,255,0.18) 0%, rgba(47,94,255,0.04) 62%, transparent 74%); top:50%; left:50%; transform:translate(-50%,-50%);}
.hero-kit-part{position:absolute; margin:0; display:flex; flex-direction:column; align-items:center; gap:7px;}
.hero-kit-part img{display:block; width:100%; height:auto; filter:drop-shadow(0 18px 26px rgba(21,23,26,0.22));}
.hero-kit-part figcaption{font-size:11px; font-weight:600; color:var(--ink-soft); background:rgba(255,255,255,0.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:4px 10px; border-radius:999px; white-space:nowrap; border:1px solid rgba(255,255,255,0.7);}
.hero-kit-part--unit{width:46%; top:2%; left:50%; transform:translateX(-50%); z-index:3;}
.hero-kit-part--fascia{width:30%; bottom:12%; left:0; z-index:2;}
.hero-kit-part--harness{width:28%; bottom:6%; right:0; z-index:2;}
.hero-kit-part--tools{width:21%; bottom:0; left:50%; transform:translateX(-50%); z-index:4;}
@media (max-width:900px){ .hero-compact{grid-template-columns:1fr; gap:20px;} .hero-collage-stage{min-height:0;} .hero-kit{aspect-ratio:4/3;} .hero-kit-part figcaption{font-size:10px; padding:3px 8px;} }
.nav-cart{position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; color:var(--ink); flex:none; transition:background .15s;}
.nav-cart:hover{background:rgba(0,0,0,0.05);}
.nav-cart svg{width:20px; height:20px;}
.nav-cart-count{position:absolute; top:-1px; right:-1px; min-width:17px; height:17px; border-radius:9px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; box-sizing:border-box;}
.hero-cta-mobile{display:none;}
@media (max-width:900px){
  .hero-cta-mobile{display:flex; justify-content:center; margin-top:4px;}
  .hero-cta-mobile-btn{display:inline-flex; align-items:center; justify-content:center; width:100%; max-width:320px; height:48px; border-radius:999px; background:var(--accent); color:#fff; font-size:15px; font-weight:600; box-shadow:0 8px 18px -10px rgba(47,94,255,0.45);}
  .hero-cta-mobile-btn:hover{background:var(--accent-ink);}
}
/* ---- Hero entrance animation ---------------------------------------- */
@keyframes ray-rise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
@keyframes ray-card-in{ from{opacity:0; transform:rotate(-3deg) scale(.94);} to{opacity:1; transform:rotate(-3deg) scale(1);} }
@keyframes ray-badge-in{ from{opacity:0; transform:translateY(10px) scale(.9);} to{opacity:1; transform:none;} }
@keyframes ray-shine{ 0%{background-position:130% 0;} 55%,100%{background-position:-30% 0;} }

.hero-compact-text > .eyebrow{animation:ray-rise .7s cubic-bezier(.2,.7,.3,1) .05s backwards;}
.hero-compact-text > h1{animation:ray-rise .8s cubic-bezier(.2,.7,.3,1) .12s backwards;}
.hero-compact-text > .lede{animation:ray-rise .8s cubic-bezier(.2,.7,.3,1) .22s backwards;}
.hero-compact-text > .hero-vs-field{animation:ray-rise .8s cubic-bezier(.2,.7,.3,1) .3s backwards;}
.hero-compact-text > .hero-vs-hint{animation:ray-rise .8s cubic-bezier(.2,.7,.3,1) .38s backwards;}
.hero-cta-mobile{animation:ray-rise .8s cubic-bezier(.2,.7,.3,1) .34s backwards;}
.hero-collage-card{animation:ray-card-in .9s cubic-bezier(.2,.7,.3,1) .18s backwards;}
.hero-badge{animation:ray-badge-in .6s cubic-bezier(.2,.7,.3,1) backwards;}
.hero-badge--carplay{animation-delay:.55s;}
.hero-badge--android{animation-delay:.65s;}
.hero-badge--youtube{animation-delay:.75s;}
.hero-badge--netflix{animation-delay:.85s;}
.hero-badge--warranty{animation-delay:.95s;}
.hero-badge--rating{animation-delay:1.05s;}

/* Light sweep across the accent words. Guarded so the text can never vanish
   if background-clip:text is unsupported. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-compact h1 em{
    background-image:linear-gradient(100deg, var(--accent) 0%, var(--accent) 38%, #A8C0FF 50%, var(--accent) 62%, var(--accent) 100%);
    background-size:230% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation:ray-shine 5s ease-in-out 1.3s infinite;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-compact-text > .eyebrow,
  .hero-compact-text > h1,
  .hero-compact-text > .lede,
  .hero-compact-text > .hero-vs-field,
  .hero-compact-text > .hero-vs-hint,
  .hero-cta-mobile,
  .hero-collage-card,
  .hero-badge{animation:none;}
  .hero-compact h1 em{animation:none; background:none; -webkit-text-fill-color:var(--accent); color:var(--accent);}
}

.hero-viewport{overflow:hidden;}
.hero-track{display:flex; transition:transform .55s cubic-bezier(.4,0,.2,1); will-change:transform;}
.hero-panel{flex:0 0 100%; min-width:100%; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.hero-panel-cta{margin-top:26px; align-self:flex-start;}
.hero-below{display:flex; align-items:center; gap:20px; margin-top:34px;}
.hero-below .hero-vs-field{flex:1; margin:0;}
.hero-dots{position:static; display:flex; gap:8px; flex:none;}
.hero-dot{width:9px; height:9px; padding:0; border-radius:50%; border:0; cursor:pointer; background:var(--line-strong); transition:background .2s, width .2s;}
.hero-dot.is-active{background:var(--accent); width:24px; border-radius:5px;}
.hero-vs-hint{margin-top:12px;}
@media (prefers-reduced-motion:reduce){ .hero-track{transition:none;} }
@media (max-width:900px){ .hero-panel{grid-template-columns:1fr; gap:28px;} .hero-below{flex-direction:column; align-items:stretch;} .hero-dots{justify-content:center;} }
.hero-collage-card img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s ease; display:block; text-decoration:none;}
.hero-slide.is-active{opacity:1; visibility:visible;}
.hero-slide-label{position:absolute; left:14px; bottom:14px; background:rgba(255,255,255,0.55); backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%); border:1px solid rgba(255,255,255,0.6); color:var(--ink); font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:999px; box-shadow:0 8px 18px -8px rgba(21,23,26,0.3);}
.hero-dots{position:absolute; right:14px; bottom:16px; display:flex; gap:7px; z-index:3;}
.hero-dot{width:8px; height:8px; padding:0; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,0.55); box-shadow:0 1px 4px rgba(0,0,0,.3); transition:background .2s, width .2s;}
.hero-dot.is-active{background:#fff; width:20px; border-radius:4px;}
@media (prefers-reduced-motion:reduce){ .hero-slide{transition:none;} }
.hero-badge{position:absolute; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.5); backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); border:1px solid rgba(255,255,255,0.6); border-radius:999px; padding:8px 15px 8px 8px; font-size:12px; font-weight:600; color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 14px 30px -14px rgba(21,23,26,0.35); white-space:nowrap;}
.hero-badge-ico{width:24px; height:24px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.hero-badge-ico img{width:100%; height:100%; object-fit:contain; display:block;}
.hero-badge-ico svg{width:14px; height:14px;}
.hero-badge-ico--carplay{background:#0D0F12; color:#fff;}
.hero-badge-ico--android{background:#E1F5EE; color:#0F6E56;}
.hero-badge-ico--youtube{background:#FCEBEB; color:#A32D2D;}
.hero-badge-ico--netflix{background:#FCEBEB; color:#A32D2D;}
.hero-badge-ico--warranty{background:var(--accent-soft); color:var(--accent-ink);}
.hero-badge--carplay{top:2%; right:2%;}
.hero-badge--android{top:28%; left:-12%;}
.hero-badge--youtube{top:56%; right:-10%;}
.hero-badge--netflix{bottom:8%; left:-6%;}
.hero-badge--warranty{bottom:-4%; right:14%;}
.hero-badge--rating{bottom:16%; right:-8%; text-decoration:none; padding:7px 14px 7px 10px;}
.hero-stars{display:inline-flex; gap:1px; flex:none;}
.hero-stars svg{width:12px; height:12px; fill:#F5A623;}
.hero-rating-text{white-space:nowrap;}
.hero-rating-text strong{font-weight:700;}
@media (max-width:900px){ .hero-collage-stage{min-height:0;} .hero-collage-blob{width:280px; height:280px;} .hero-badge{font-size:10.5px; padding:6px 12px 6px 6px; gap:6px;} .hero-badge-ico{width:20px; height:20px;} .hero-badge-ico svg{width:12px; height:12px;} }
@media (max-width:640px){ .hero-badge--android, .hero-badge--youtube, .hero-badge--netflix, .hero-badge--carplay, .hero-badge--warranty, .hero-badge--rating{position:static; margin:6px 6px 0 0; display:inline-flex;} .hero-collage-stage{flex-wrap:wrap; padding-bottom:0;} }.hero h1{font-size:clamp(34px,5vw,54px); margin-bottom:22px;}
.hero h1 em{font-style:normal; color:var(--accent);}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.trust-row{display:flex; gap:28px; margin-top:44px; flex-wrap:wrap;}
.trust-item{font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);}
.trust-item b{display:block; font-family:var(--display); font-size:22px; color:var(--ink); font-weight:700;}

.dash-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:14px; box-shadow:0 20px 50px -30px rgba(21,23,26,0.25);}
.hero-photo{border-radius:12px; overflow:hidden; background:#0D0F12;}
.hero-photo img{width:100%; height:auto; display:block;}
.dash-caption{text-align:center; font-size:13px; color:var(--ink-soft); margin:14px 0 4px;}
.dash-caption b{color:var(--ink);}

.cat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:44px;}
@media (max-width:960px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .cat-grid{grid-template-columns:1fr;} }
.cat-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s, transform .15s;}
.cat-card:hover{border-color:var(--accent); transform:translateY(-2px);}
.cat-image{aspect-ratio:4/3; overflow:hidden; background:var(--bg); position:relative; border-bottom:1px solid var(--line);}
.cat-image img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
.cat-card:hover .cat-image img{transform:scale(1.04);}
.cat-body{padding:18px 20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.cat-card h4{font-size:15.5px; line-height:1.25;}
.cat-card p{font-size:12.5px; color:var(--ink-soft);}
.cat-card .cat-go{font-family:var(--mono); font-size:11.5px; color:var(--accent-ink); margin-top:auto; letter-spacing:.03em;}

.cat-head{max-width:640px;}
.cat-grid--bold{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:12px;}
@media (max-width:960px){ .cat-grid--bold{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .cat-grid--bold{grid-template-columns:1fr;} }
.cat-grid--bold .cat-card{border:1.5px solid var(--line-strong); border-radius:18px;}
.cat-grid--bold .cat-card:hover{border-color:var(--accent); box-shadow:0 20px 40px -26px rgba(21,23,26,0.35);}
.cat-grid--bold .cat-image{aspect-ratio:16/11; position:relative;}
.cat-grid--bold .cat-body{padding:22px 22px 24px;}
.cat-grid--bold h4{font-size:19px; font-weight:700; letter-spacing:-0.01em;}
.cat-grid--bold p{font-size:13.5px;}
.cat-grid--bold .cat-go{font-size:12.5px; font-weight:600; letter-spacing:.02em;}
.cat-badge{position:absolute; top:14px; left:14px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.03em; padding:6px 13px; border-radius:999px; box-shadow:0 12px 24px -8px rgba(47,94,255,0.55), 0 2px 6px rgba(21,23,26,0.15); transform:translateY(0); transition:transform .2s ease, box-shadow .2s ease;}
.cat-card--slide:hover .cat-badge{transform:translateY(-3px); box-shadow:0 18px 32px -8px rgba(47,94,255,0.6), 0 4px 10px rgba(21,23,26,0.18);}

.cat-carousel-wrap{position:relative; width:100%; margin-top:20px;}
.cat-carousel{width:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.cat-carousel::-webkit-scrollbar{display:none;}
.cat-carousel-track{display:flex; gap:22px; width:max-content;}
.cat-help{display:none;}
.cat-carousel-pad{flex:none; width:28px; scroll-snap-align:start;}
.cat-swipe-cue{position:absolute; top:50%; left:0; transform:translateY(-50%); z-index:6; width:52px; height:52px; border-radius:50%; background:var(--accent); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; box-shadow:0 10px 24px -8px rgba(47,94,255,0.55); animation:cat-cue-pulse 1.8s ease-in-out infinite; pointer-events:none; transition:opacity .3s ease;}
.cat-swipe-cue svg{width:15px; height:15px;}
.cat-swipe-cue span{font-size:9px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;}
@keyframes cat-cue-pulse{0%,100%{transform:translateY(-50%) translateX(0) scale(1);}50%{transform:translateY(-50%) translateX(6px) scale(1.08);}}
@media(prefers-reduced-motion:reduce){.cat-swipe-cue{animation:none;}}
@media (max-width:640px){ .cat-swipe-cue{display:none;} }
.cat-card--slide{scroll-snap-align:start; flex:none; width:min(320px, 78vw); display:flex; flex-direction:column; border:1.5px solid var(--line-strong); border-radius:18px; overflow:hidden; background:var(--surface); transition:border-color .15s, transform .15s, box-shadow .15s;}
.cat-card--slide:hover{border-color:var(--accent); box-shadow:0 20px 40px -26px rgba(21,23,26,0.35); transform:translateY(-3px);}

#locations{background:var(--bg);}
.kit-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:56px; align-items:start;}
.kit-piece{position:relative; text-align:left;}
.kit-piece:nth-child(2){margin-top:36px;}
.kit-piece:nth-child(3){margin-top:8px;}
.kit-piece:nth-child(4){margin-top:44px;}
.kit-piece-num{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--accent-ink); display:block; margin-bottom:10px;}
.kit-piece-photo{position:relative; aspect-ratio:1/1; background:linear-gradient(155deg, #F4F5F3 0%, #ECEEEB 100%); border-radius:18px; display:flex; align-items:center; justify-content:center; padding:22px; margin-bottom:18px; transition:transform .3s ease, box-shadow .3s ease;}
.kit-piece-blob{position:absolute; top:-8px; right:-8px; z-index:2; width:48px; height:48px; border-radius:50%; background:var(--accent); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.01em; display:flex; align-items:center; justify-content:center; transform:rotate(-12deg); box-shadow:0 8px 18px -8px rgba(47,94,255,0.6);}
.kit-piece-photo img{max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 14px 20px rgba(21,23,26,0.12));}
.kit-piece:hover .kit-piece-photo{transform:translateY(-6px); box-shadow:0 24px 40px -20px rgba(21,23,26,0.25);}
.kit-piece h4{font-size:16px; margin-bottom:6px;}
.kit-piece p{font-size:13px; color:var(--ink-soft); line-height:1.5;}
.kit-piece.rv{opacity:0; transform:translateY(40px); transition:opacity .55s ease, transform .6s cubic-bezier(.2,.8,.3,1);}
.kit-piece.rv.in{opacity:1; transform:translateY(0);}
@media (max-width:900px){ .kit-strip{grid-template-columns:repeat(2,1fr); row-gap:40px;} .kit-piece:nth-child(n){margin-top:0;} }
@media (max-width:560px){
  /* Categories become an even 2-col grid on phones so nothing is missed
     off-screen. All tiles identical, and the description is hidden so the
     tiles stay short and scannable. */
  .cat-carousel{overflow:visible; scroll-snap-type:none;}
  .cat-carousel-track{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:auto; padding:0 20px; box-sizing:border-box;}
  .cat-carousel-pad{display:none;}
  .cat-arrow, .cat-swipe-cue{display:none;}
  .cat-card--slide{width:auto; min-width:0; scroll-snap-align:none;}
  .cat-card--slide .cat-image{aspect-ratio:4/3;}
  .cat-card--slide .cat-body{padding:11px 12px 13px;}
  .cat-card--slide h4{font-size:13.5px; line-height:1.25; margin-bottom:0;}
  .cat-card--slide p{display:none;}
  /* "Can't find it?" tile fills the empty 8th slot left by 7 categories. */
  .cat-help{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; padding:16px 14px; border:1.5px dashed var(--line-strong); border-radius:18px; background:var(--surface); min-width:0;}
  .cat-help-ico{width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; margin-bottom:2px;}
  .cat-help-ico svg{width:16px; height:16px;}
  .cat-help h4{font-size:13.5px; line-height:1.25; margin:0;}
  .cat-help p{display:block; font-size:11.5px; line-height:1.35; color:var(--ink-soft); margin:0;}
  .cat-help-btn{margin-top:6px; height:34px; padding:0 16px; font-size:13px;}
}
@media (max-width:560px){
  .kit-strip{grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:28px;}
  .kit-piece-num{font-size:9px; letter-spacing:.04em; margin-bottom:5px;}
  .kit-piece-photo{border-radius:10px; padding:7px; margin-bottom:8px;}
  .kit-piece-blob{top:-5px; right:-4px; width:27px; height:27px; font-size:8.5px; box-shadow:0 4px 10px -5px rgba(47,94,255,0.6);}
  .kit-piece h4{font-size:10.5px; line-height:1.2; margin-bottom:0; letter-spacing:-0.01em;}
  .kit-piece p{display:none;}
}
@media (prefers-reduced-motion:reduce){ .kit-piece.rv{opacity:1; transform:none; transition:none;} }
.loc-editorial{padding:60px 0;}
.loc-ed-head{margin-bottom:44px; max-width:680px;}
.loc-ed-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.loc-ed-photo{position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 26px 50px -30px rgba(21,23,26,0.45);}
.loc-ed-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.loc-ed-content{display:flex; flex-direction:column;}
.loc-ed-list{margin-top:0; border-top:1px solid var(--line);}
.loc-ed-cta{margin-bottom:22px;}
.loc-ed-line{display:flex; align-items:baseline; gap:12px; padding:16px 0; border-bottom:1px solid var(--line);}
.loc-ed-name{font-family:var(--display); font-size:17px; font-weight:600; flex:none;}
.loc-ed-dash{flex:1; border-bottom:1px dotted var(--line-strong); margin-bottom:5px;}
.loc-ed-status{font-size:13px; color:var(--ink-soft); flex:none;}
.loc-ed-status.is-free{color:var(--accent-ink); font-weight:600;}
@media (max-width:900px){ .loc-ed-grid{grid-template-columns:1fr; gap:32px;} .loc-editorial{padding:44px 0;} .loc-ed-head{margin-bottom:28px;} }
.loc-head--split{display:flex; align-items:flex-end; justify-content:space-between; gap:40px;}
.loc-head-text{flex:1; min-width:0;}
.btn-avail{flex:none; display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg, #4472FF 0%, #2F5EFF 100%); color:#fff; font-weight:700; font-size:14.5px; padding:0 26px; height:52px; border-radius:999px; box-shadow:0 16px 34px -10px rgba(47,94,255,0.55), 0 0 0 4px rgba(47,94,255,0.12); transition:transform .15s ease, box-shadow .15s ease;}
.btn-avail:hover{transform:translateY(-2px); box-shadow:0 20px 40px -10px rgba(47,94,255,0.6), 0 0 0 5px rgba(47,94,255,0.16);}
@media (max-width:760px){ .loc-head--split{flex-direction:column; align-items:flex-start; gap:20px;} .btn-avail{width:100%; justify-content:center;} }
.loc-banner{position:relative; height:340px; overflow:hidden;}
.loc-banner img{width:100%; height:100%; object-fit:cover; display:block; filter:none;}
.loc-head{margin-top:32px; position:relative; z-index:1;}
.loc-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:40px;}
.loc-row{display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--surface);}
.loc-row .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none;}
.loc-row.ship .dot{background:var(--line-strong);}
.loc-row-text{flex:1; min-width:0;}
.loc-row-text h4{font-size:15.5px; margin-bottom:2px;}
.loc-row-text p{font-size:13px; color:var(--ink-soft);}
.loc-booking{margin-top:32px; background:var(--ink); border-radius:20px; padding:36px 40px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;}
.loc-booking h3{color:#fff; font-size:22px; margin-bottom:8px;}
.loc-booking p{color:#B7B9BE; font-size:14.5px; max-width:440px;}
.loc-booking-actions{display:flex; gap:12px; flex-wrap:wrap;}
.loc-booking .btn-outline{color:#fff; border-color:#3A3D42;}
.loc-booking .btn-outline:hover{border-color:#fff;}
@media (max-width:760px){ .loc-grid{grid-template-columns:1fr;} .loc-booking{flex-direction:column; align-items:flex-start; padding:28px 24px;} }
@media (max-width:640px){ .loc-banner{height:220px;} }
.cat-card--slide .cat-image{aspect-ratio:16/11; position:relative;}
.cat-card--slide .cat-body{padding:20px 20px 22px;}
.cat-card--slide h4{font-size:18px; font-weight:700; letter-spacing:-0.01em;}
.cat-card--slide p{font-size:13.5px;}
.cat-card--slide .cat-go{font-size:12.5px; font-weight:600; letter-spacing:.02em;}
.cat-arrow{position:absolute; top:calc(50% - 20px); z-index:5; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.55); backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%); border:1px solid rgba(255,255,255,0.6); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 24px -12px rgba(21,23,26,0.3); font-size:22px; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s, transform .15s;}
.cat-arrow:hover{border-color:var(--accent); color:var(--accent-ink); transform:translateY(-1px);}
.cat-arrow--prev{left:16px;}
.cat-arrow--next{right:16px;}
@media (max-width:720px){ .cat-arrow{display:none;} }

.vs-field{position:relative; max-width:520px; margin-top:22px;}
.hero-vs-field{max-width:460px; margin:26px 0 0;}
.hero-vs-field .vs-wrap{background:rgba(255,255,255,0.9); box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 20px 40px -18px rgba(21,23,26,0.35);}
.hero-vs-hint{font-size:12.5px; color:var(--ink-soft); margin:10px 0 0;}
.hero-vs-hint a{color:var(--accent-ink); font-weight:500;}
.vs-field--cat{margin-top:24px;}
.vs-wrap{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.55); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border:1px solid rgba(255,255,255,0.6); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 20px -14px rgba(21,23,26,0.25); border-radius:999px; padding:0 20px; height:52px; transition:border-color .15s, box-shadow .15s;}
.vs-wrap.is-active{border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,94,255,.13);}
.vs-icon{width:18px; height:18px; flex:none; color:var(--ink-faint);}
.vs-input{flex:1; border:0; background:none; height:50px; font-family:var(--body); font-size:15px; color:var(--ink); outline:0; min-width:0;}
.vs-results{position:absolute; left:0; right:0; top:58px; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; z-index:60; display:none; box-shadow:0 18px 44px -24px rgba(21,23,26,.4);}
.vs-results.is-open{display:block;}
.vs-row{display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); transition:background .14s, padding-left .14s;}
.vs-row:last-child{border-bottom:0;}
.vs-row:hover, .vs-row.is-cursor{background:var(--accent-soft); padding-left:22px;}
.vs-thumb{width:38px; height:38px; flex:none; border-radius:8px; object-fit:cover; background:var(--bg);}
.vs-name{flex:1; font-size:14px;}
.vs-price{font-size:13px; color:var(--ink-soft); white-space:nowrap; font-weight:500;}
.vs-empty{padding:16px; font-size:14px; color:var(--ink-soft);}
.vs-empty a{color:var(--accent); font-weight:500;}
.vs-all{display:block; padding:11px 16px; text-align:center; font-size:13px; color:var(--accent-ink); font-weight:600; background:var(--accent-soft); text-decoration:none;}
.vs-hint{font-size:13.5px; color:var(--ink-soft); margin-top:14px;}
.vs-hint a{color:var(--accent-ink); font-weight:500;}

#vehicle-search{padding:44px 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
@media (max-width:720px){ #vehicle-search{padding:44px 0;} }
.vs-standalone{max-width:560px; margin:0 auto; text-align:center;}
.vs-standalone .eyebrow{justify-content:center;}
.vs-standalone .vs-field{margin:24px auto 0; text-align:left;}
.vs-standalone .vs-hint{text-align:center;}

.reels-head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;}
.reels-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px;}
@media (max-width:900px){ .reels-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .reels-grid{grid-template-columns:1fr;} }
.reel-card{position:relative; aspect-ratio:9/16; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(150deg,#1B1E24,#0D0F12);}
.reel-card video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.reel-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,0.14); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; border:1px solid rgba(255,255,255,0.3); pointer-events:none; transition:opacity .2s;}
.reel-card.is-playing .reel-play{opacity:0;}
.reel-badge{position:absolute; top:12px; left:12px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:#fff; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.25); padding:4px 9px; border-radius:999px; backdrop-filter:blur(6px); pointer-events:none;}
.reel-caption{position:absolute; left:0; right:0; bottom:0; padding:16px 13px 14px; background:linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.6) 45%, transparent); color:#fff; pointer-events:none;}
.reel-job{display:block; font-size:13px; font-weight:600; line-height:1.28; color:#fff;}
.reel-spec{display:block; font-size:11px; line-height:1.35; color:#C9CBD1; margin-top:5px;}
.reel-caption .name{font-size:12.5px; font-weight:500; color:#D7DAE0; display:flex; align-items:center; gap:5px;}
.reel-caption .role{font-family:var(--mono); font-size:10.5px; color:#C9CBD1; margin-top:2px; display:block;}
.reel-avatar{position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.9); box-shadow:0 2px 8px rgba(0,0,0,0.35); z-index:5; pointer-events:none; background:var(--accent);}
.reel-avatar--initials{display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:600; letter-spacing:.02em;}
.reel-handle{pointer-events:auto; position:relative; z-index:5;}
.reel-handle:hover{color:#fff; text-decoration:underline;}
@media (max-width:900px){ .reels-grid[style]{grid-template-columns:1fr !important;} }
.reels-note{margin-top:24px; font-size:13px; color:var(--ink-soft); border:1px dashed var(--line-strong); border-radius:10px; padding:14px 16px; background:var(--surface);}

.reels-section{position:relative; background:#FAFAF8; overflow:hidden;}
.reels-section::before{content:""; position:absolute; top:34%; left:50%; transform:translate(-50%,-50%); width:820px; height:820px; border-radius:50%; background:radial-gradient(circle, rgba(47,94,255,0.22) 0%, rgba(47,94,255,0.10) 42%, rgba(47,94,255,0) 70%); filter:blur(46px); pointer-events:none;}
.reels-section::after{content:""; position:absolute; top:72%; left:24%; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle, rgba(47,94,255,0.12) 0%, rgba(47,94,255,0) 68%); filter:blur(40px); pointer-events:none;}
.reels-section > .wrap{position:relative; z-index:1;}
.reels-grid--row{display:grid; grid-template-columns:repeat(4,1fr); gap:64px 48px; margin-top:34px;}
@media (max-width:900px){ .reels-grid--row{grid-template-columns:repeat(2,1fr); gap:56px 40px;} }
@media (max-width:520px){ .reels-grid--row{grid-template-columns:repeat(2,1fr); gap:40px 12px;} }

.reel-item{display:flex; flex-direction:column; gap:0; background:none; border:0; border-radius:0; overflow:visible; position:relative; max-width:none; margin:0;}
.reel-item:hover{transform:none; z-index:9;}
.reel-media{position:relative; width:100%; aspect-ratio:9/16; background:#0D0F12; cursor:zoom-in; border-radius:18px; overflow:hidden; box-shadow:0 22px 44px -24px rgba(21,23,26,0.5); transition:transform .25s ease, box-shadow .25s ease;}
.reel-item:hover .reel-media{transform:none; box-shadow:0 22px 44px -24px rgba(21,23,26,0.5);}
.reel-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.reel-media .reel-badge{position:absolute; top:10px; left:10px; font-size:10px; letter-spacing:.06em; color:#fff; background:rgba(255,255,255,0.18); backdrop-filter:blur(10px) saturate(180%); -webkit-backdrop-filter:blur(10px) saturate(180%); padding:3px 8px; border-radius:999px; pointer-events:none; border:1px solid rgba(255,255,255,0.25); z-index:2;}
.reel-expand{position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,0.2); backdrop-filter:blur(10px) saturate(180%); -webkit-backdrop-filter:blur(10px) saturate(180%); border:1px solid rgba(255,255,255,0.28); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; pointer-events:none; z-index:2;}
.reel-media .reel-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.22); backdrop-filter:blur(12px) saturate(180%); -webkit-backdrop-filter:blur(12px) saturate(180%); border:1px solid rgba(255,255,255,0.4); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; pointer-events:none; transition:opacity .2s; z-index:2;}
.reel-item.is-playing .reel-play{opacity:0;}
.reel-overlay{position:absolute; left:0; right:0; bottom:0; z-index:1; display:flex; align-items:center; gap:12px; padding:36px 14px 14px; background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 55%, transparent 100%); pointer-events:auto;}
.reel-overlay-sway{display:flex; align-items:center; gap:12px; min-width:0; animation:reel-sway 5.5s ease-in-out infinite;}
.reel-item:nth-child(1) .reel-overlay-sway{animation-delay:0s;}
.reel-item:nth-child(2) .reel-overlay-sway{animation-delay:.6s;}
.reel-item:nth-child(3) .reel-overlay-sway{animation-delay:1.2s;}
.reel-item:nth-child(4) .reel-overlay-sway{animation-delay:1.8s;}
@keyframes reel-sway{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}
.reel-item:hover .reel-overlay-sway{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.reel-overlay-sway{animation:none;}}
.reel-face{width:36px; height:36px; flex:none; border-radius:50%; object-fit:cover; background:var(--accent); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:600; border:2px solid rgba(255,255,255,0.85); box-shadow:0 4px 12px rgba(0,0,0,0.35);}
.reel-corner{position:absolute; z-index:5; display:flex; align-items:center; gap:8px; animation:reel-corner-sway 4.2s ease-in-out infinite;}
.reel-face--corner{width:64px; height:64px; font-size:18px; border:3px solid #fff; box-shadow:0 12px 28px -8px rgba(21,23,26,0.45);}
.reel-corner-user{background:var(--surface); border:1px solid var(--line); color:var(--ink); padding:7px 14px; border-radius:14px; box-shadow:0 8px 18px -8px rgba(21,23,26,0.3); white-space:nowrap; display:flex; flex-direction:column; gap:1px;}
.reel-corner-name{display:flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; color:var(--ink);}
.reel-corner-name .reel-tick{width:13px; height:13px; flex:none;}
.reel-corner-handle{font-size:11px; color:var(--ink-soft);}
.reel-item:nth-child(1) .reel-corner{top:-48px; left:-48px; flex-direction:row;}
.reel-item:nth-child(2) .reel-corner{top:-48px; right:-48px; flex-direction:row-reverse;}
.reel-item:nth-child(3) .reel-corner{bottom:-48px; left:-48px; flex-direction:row;}
.reel-item:nth-child(4) .reel-corner{bottom:-48px; right:-48px; flex-direction:row-reverse;}
.reel-item:nth-child(1) .reel-corner, .reel-item:nth-child(3) .reel-corner{animation-delay:0s;}
.reel-item:nth-child(2) .reel-corner, .reel-item:nth-child(4) .reel-corner{animation-delay:.7s;}
@keyframes reel-corner-sway{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(0,-10px) rotate(-2deg);}}
.reel-item:nth-child(2) .reel-corner, .reel-item:nth-child(4) .reel-corner{animation-name:reel-corner-sway-r;}
@keyframes reel-corner-sway-r{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(0,-10px) rotate(2deg);}}
.reel-item:hover .reel-corner{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.reel-corner{animation:none;}}
@media (max-width:900px){ .reel-face--corner{width:52px; height:52px; font-size:15px;} .reel-corner-user{font-size:11px; padding:5px 10px;} .reel-item:nth-child(1) .reel-corner, .reel-item:nth-child(3) .reel-corner{top:-40px; left:-40px; bottom:auto; flex-direction:row;} .reel-item:nth-child(2) .reel-corner, .reel-item:nth-child(4) .reel-corner{top:-40px; right:-40px; bottom:auto; flex-direction:row-reverse;} }
@media (max-width:520px){ .reel-face--corner{width:34px; height:34px; font-size:12px;} .reel-item .reel-corner{top:-26px !important; left:auto !important; right:2px !important; bottom:auto !important; flex-direction:row-reverse !important; gap:5px;} .reel-corner-user{padding:3px 7px; border-radius:9px;} .reel-corner-name{font-size:10.5px;} .reel-corner-name .reel-tick{width:10px; height:10px;} .reel-corner-handle{display:none;} }
.reel-who-text{min-width:0;}
.reel-name{display:flex; align-items:center; gap:5px; font-size:13.5px; font-weight:600; line-height:1.25; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,0.4);}
.reel-tick{width:14px; height:14px; flex:none;}
.reel-user{display:block; font-size:11.5px; color:#E4E6EB; margin-top:2px;}
.reel-user:hover{color:#fff; text-decoration:underline;}

.rlb{position:fixed; inset:0; z-index:200; background:rgba(10,11,13,0.92); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .2s;}
.rlb.is-open{opacity:1;}
.rlb video{max-height:88vh; max-width:min(94vw,460px); width:auto; border-radius:18px; display:block; background:#000;}
.rlb-close{position:absolute; top:20px; right:24px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.14); backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%); border:1px solid rgba(255,255,255,0.3); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.rlb-close:hover{background:rgba(255,255,255,0.24);}
.rlb-cap{position:absolute; bottom:24px; left:0; right:0; text-align:center; color:#EDEEF0; font-size:14px; padding:0 24px;}

.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px;}
@media (max-width:900px){ .services-grid{grid-template-columns:1fr;} }
.service-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px; display:flex; flex-direction:column; gap:14px;}
.service-card .tag{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--accent-ink); text-transform:uppercase;}
.service-card h3{font-size:21px;}
.service-card p{color:var(--ink-soft); font-size:14.5px;}
.service-card .icon{width:44px; height:44px; border-radius:10px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; color:var(--accent-ink);}
.service-card .icon svg{width:22px; height:22px;}
.service-card ul{margin-top:6px; display:flex; flex-direction:column; gap:8px;}
.service-card li{font-size:13.5px; color:var(--ink-soft); display:flex; gap:8px;}
.service-card li::before{content:"\2014"; color:var(--accent);}

.ba-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px;}
.row-dots{display:none;}

/* ---- Enquiry form ---------------------------------------------------- */
.eq{margin-top:36px; border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:26px; box-shadow:0 26px 50px -36px rgba(21,23,26,0.35);}
.eq-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
.eq-field--wide{grid-column:1 / -1;}
.eq-field span em{font-style:normal; color:var(--ink-soft); font-weight:400;}
.eq-photo{gap:8px;}
.eq-photo-btn{display:inline-flex; align-items:center; gap:9px; align-self:flex-start; padding:10px 16px; border:1px dashed var(--line-strong); border-radius:999px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink-soft); transition:border-color .15s, color .15s;}
.eq-photo-btn:hover{border-color:var(--accent); color:var(--accent-ink);}
.eq-photo-btn.has-file{border-style:solid; border-color:var(--accent); color:var(--accent-ink);}
.eq-photo-btn svg{width:17px; height:17px; flex:none;}
.eq-photo-btn input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.eq-foot{display:flex; align-items:center; gap:16px; margin-top:20px; flex-wrap:wrap;}
.eq-send{min-width:170px; justify-content:center;}
.eq-alt{font-size:13.5px; color:var(--ink-soft); margin:0;}
.eq-alt a{font-weight:600;}
.eq-done.is-active{display:block;}
.eq-done h3{font-size:20px; margin-bottom:8px;}
.eq-done p{font-size:14.5px; color:var(--ink-soft);}
@media (max-width:760px){ .eq-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .eq{padding:18px; border-radius:16px;} .eq-grid{grid-template-columns:1fr; gap:12px;} .eq-send{width:100%;} .eq-foot{gap:10px;} }
.eq-steps{display:flex; gap:8px; list-style:none; margin:0 0 24px; padding:0 0 20px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.eq-steps li{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink-soft); flex:1; min-width:120px;}
.eq-steps li span{width:24px; height:24px; border-radius:50%; background:var(--bg); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:11.5px; flex:none;}
.eq-steps li.is-active{color:var(--ink);}
.eq-steps li.is-active span{background:var(--accent); border-color:var(--accent); color:#fff;}
.eq-steps li.is-done span{background:var(--accent-soft); border-color:var(--accent-soft); color:var(--accent-ink);}

.eq-panel, .eq-done{display:none;}
.eq-panel.is-active, .eq-done.is-active{display:block; animation:ray-rise .4s ease backwards;}
.eq-title{font-size:20px; margin:0 0 6px;}
.eq-sub{font-size:14px; color:var(--ink-soft); line-height:1.5; margin:0 0 20px;}

.eq-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
.eq-field{display:flex; flex-direction:column; gap:6px;}
.eq-field--full{margin-top:14px;}
.eq-field > span{font-size:12.5px; font-weight:600; color:var(--ink);}
.eq-field > span em{font-style:normal; font-weight:500; color:var(--ink-soft);}
.eq-field input, .eq-field select, .eq-field textarea{width:100%; font:inherit; font-size:15px; color:var(--ink); background:var(--bg); border:1px solid var(--line-strong); border-radius:10px; padding:12px 14px; outline:none; transition:border-color .15s, box-shadow .15s;}
.eq-field input:focus, .eq-field select:focus, .eq-field textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,94,255,0.13);}
.eq-field .is-bad{border-color:#D64545; box-shadow:0 0 0 3px rgba(214,69,69,0.12);}
.eq-field textarea{resize:vertical;}
.eq-file{padding:10px 12px; font-size:13.5px;}
.eq-privacy{font-size:12px; color:var(--ink-soft); margin-top:12px;}

.eq-picks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
.eq-pick{display:flex; align-items:flex-start; gap:11px; padding:14px; border:1px solid var(--line-strong); border-radius:12px; cursor:pointer; background:var(--bg); transition:border-color .15s, background .15s;}
.eq-pick:hover{border-color:var(--accent);}
.eq-pick input{margin:2px 0 0; accent-color:var(--accent); flex:none; width:17px; height:17px;}
.eq-pick:has(input:checked){border-color:var(--accent); background:var(--accent-soft);}
.eq-pick-body{display:flex; flex-direction:column; gap:3px; min-width:0;}
.eq-pick-title{font-size:14px; font-weight:600; color:var(--ink); line-height:1.25;}
.eq-pick-desc{font-size:12.5px; color:var(--ink-soft); line-height:1.35;}

.eq-error{color:#B93030; font-size:13.5px; margin-top:14px; min-height:18px;}
.eq-nav{display:flex; gap:10px; justify-content:flex-end; margin-top:18px; padding-top:18px; border-top:1px solid var(--line);}

.eq-done{text-align:center; padding:20px 0 10px;}
.eq-done-tick{width:52px; height:52px; margin:0 auto 16px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center;}
.eq-done-tick svg{width:24px; height:24px;}
.eq-done .eq-sub{max-width:440px; margin-left:auto; margin-right:auto;}

.eq-alt{font-size:14px; color:var(--ink-soft); margin-top:16px; text-align:center;}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.eq-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

@media (max-width:700px){
  .eq{padding:18px; border-radius:16px; margin-top:26px;}
  .eq-steps{gap:6px; margin-bottom:18px; padding-bottom:16px;}
  .eq-steps li{font-size:0; gap:0; flex:1; min-width:0; justify-content:center;}
  .eq-steps li span{font-size:11.5px;}
  .eq-row{grid-template-columns:1fr;}
  .eq-picks{grid-template-columns:1fr;}
  .eq-nav{flex-direction:row;}
  .eq-nav .btn{flex:1; justify-content:center;}
}
@media (max-width:760px){ .ba-grid{grid-template-columns:1fr;} }
@media (max-width:600px){
  /* Before/after on phone: one swipeable row rather than 5 stacked sliders.
     touch-action:pan-x on the slider would fight the row scroll, so the row
     scrolls and each slider still handles its own drag horizontally. */
  .ba-grid{display:flex; gap:12px; margin-top:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-snap-stop:always; scroll-padding-left:0; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .ba-grid::-webkit-scrollbar{display:none;}
  .ba-grid .ba-item{flex:0 0 88%; scroll-snap-align:start; scroll-snap-stop:always;}
  /* The slider captures horizontal drag, which would block the row swipe.
     On phone let the browser own horizontal gestures so the row snaps card
     to card; the handle is still tappable/draggable vertically-tolerant. */
  .ba-grid .ba-slider{touch-action:pan-x pan-y;}
  /* Swipe dots — only meaningful on the phone rows. */
  .row-dots{display:flex; justify-content:center; gap:7px; margin-top:14px;}
  .row-dot{width:7px; height:7px; padding:0; border:0; border-radius:50%; background:var(--line-strong); cursor:pointer; transition:background .2s, width .2s;}
  .row-dot.is-active{background:var(--accent); width:20px; border-radius:4px;}
}
.ba-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.ba-slider{position:relative; aspect-ratio:16/10; overflow:hidden; cursor:ew-resize; user-select:none; -webkit-user-select:none; touch-action:pan-y; background:#0D0F12;}
.ba-slider img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;}
.ba-after-wrap{position:absolute; inset:0; overflow:hidden; will-change:clip-path; clip-path:inset(0 0 0 50%);}
.ba-tag{position:absolute; bottom:12px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:#fff; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.3); padding:4px 9px; border-radius:999px; backdrop-filter:blur(10px) saturate(180%); -webkit-backdrop-filter:blur(10px) saturate(180%); pointer-events:none; z-index:3;}
.ba-tag.before{left:12px;}
.ba-tag.after{right:12px;}
.ba-handle{position:absolute; top:0; bottom:0; width:2px; background:#fff; z-index:4; pointer-events:auto; touch-action:none; cursor:ew-resize; box-shadow:0 0 0 1px rgba(0,0,0,0.25); left:50%;}
/* Invisible wide grab area so the 2px line is actually tappable on a phone. */
.ba-handle::before{content:""; position:absolute; top:0; bottom:0; left:-26px; right:-26px;}
.ba-handle::after{content:"\21C4"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:14px; box-shadow:0 2px 10px rgba(0,0,0,0.3);}
.ba-caption{padding:14px 18px; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.ba-caption strong{font-family:var(--display); font-size:15px; font-weight:600;}
.ba-caption span{font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.04em;}
.ba-note{margin-top:22px; font-size:13.5px; color:var(--ink-soft); border:1px dashed var(--line-strong); border-radius:10px; padding:14px 16px; background:var(--surface);}

.map-wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:36px; align-items:center; margin-top:44px;}
@media (max-width:860px){ .map-wrap{grid-template-columns:1fr;} }
.map-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:0 20px 50px -35px rgba(21,23,26,0.3);}
.coverage-card{position:relative; border-radius:24px; overflow:hidden; min-height:420px; display:flex; align-items:flex-end; box-shadow:0 30px 60px -30px rgba(21,23,26,0.4);}
.coverage-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.coverage-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,23,48,0) 0%, rgba(10,23,48,0.15) 40%, rgba(10,23,48,0.85) 100%);}
.coverage-stats{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:28px;}
.coverage-stat{background:rgba(255,255,255,0.16); backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); border:1px solid rgba(255,255,255,0.28); border-radius:14px; padding:16px 16px; display:flex; flex-direction:column; gap:4px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);}
.coverage-num{font-family:var(--display); font-size:clamp(22px,3vw,28px); font-weight:600; color:#fff; line-height:1;}
.coverage-label{font-size:12.5px; color:#E4E9F5; line-height:1.4;}
@media (max-width:520px){ .coverage-card{min-height:320px;} .coverage-stats{grid-template-columns:1fr 1fr; padding:18px; gap:10px;} .coverage-stat{padding:12px 14px;} }
.map-card--photo{position:relative; padding:0; overflow:hidden; border-radius:22px; box-shadow:0 34px 64px -30px rgba(10,14,20,0.55);}
.map-photo{width:100%; height:auto; display:block; aspect-ratio:1260/1547;}
.map-illustration{object-fit:cover;}
.map-pin{position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:7px; z-index:2;}
.map-pin-dot-el{width:11px; height:11px; border-radius:50%; background:#fff; border:2.5px solid var(--accent); box-shadow:0 0 0 5px rgba(47,94,255,0.25), 0 4px 10px rgba(0,0,0,0.4);}
.map-pin-dot-el--lg{width:15px; height:15px; border-width:3px; box-shadow:0 0 0 7px rgba(47,94,255,0.3), 0 4px 12px rgba(0,0,0,0.45);}
.map-pin-chip{background:rgba(13,15,18,0.72); backdrop-filter:blur(6px); color:#fff; font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:8px; white-space:nowrap; box-shadow:0 6px 16px -6px rgba(0,0,0,0.5); line-height:1.3;}
.map-pin-chip--strong{background:var(--accent); font-size:12.5px; padding:6px 12px;}
.map-pin-chip em{display:block; font-style:normal; font-weight:500; font-size:10px; opacity:.85; margin-top:1px;}
@media (max-width:640px){ .map-pin-chip{font-size:10px; padding:4px 8px;} .map-pin-chip--strong{font-size:11px;} .map-pin-chip em{font-size:9px;} }
.area-list{display:flex; flex-direction:column; gap:12px; margin-top:22px;}
.area-item{display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:14px; position:relative; overflow:hidden; background:rgba(255,255,255,0.45); backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%); border:1px solid rgba(255,255,255,0.6); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 12px 28px -16px rgba(21,23,26,0.25); transition:transform .15s ease, box-shadow .15s ease;}
.area-item:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 18px 34px -16px rgba(21,23,26,0.3);}
.locations--photo{position:relative; overflow:hidden; padding:40px 0 60px; min-height:760px; display:flex; align-items:center;}
.locations-content{width:100%;}
.locations-title{max-width:560px; margin-bottom:210px;}
.locations-h2{color:var(--ink); text-shadow:0 1px 2px rgba(255,255,255,0.6), 0 2px 18px rgba(255,255,255,0.4);}
.locations-title .eyebrow--light{color:#1A2233; text-shadow:0 1px 10px rgba(255,255,255,0.5);}
.locations-title .eyebrow--light::before{background:#2F5EFF;}
.locations-title .lede--light{color:#2B3244; text-shadow:0 1px 10px rgba(255,255,255,0.5);}
@media (max-width:760px){ .locations--photo{min-height:auto; padding:56px 0 40px;} .locations-title{margin-bottom:36px;} }
.locations-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.locations-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,14,28,0.1) 0%, rgba(8,14,28,0.02) 22%, rgba(8,14,28,0.05) 55%, rgba(8,14,28,0.55) 100%);}
.locations-content{position:relative; z-index:1;}
.coverage-stats--section{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px;}
.area-list--photo{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px;}
.area-list--photo .area-item{background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.28); box-shadow:inset 0 1px 0 rgba(255,255,255,0.22), 0 14px 30px -16px rgba(0,0,0,0.4);}
.area-list--photo .area-item h4{color:#fff;}
.area-list--photo .area-item p{color:#D7DAE8;}
.area-list--photo .dot{background:#fff;}
@media (max-width:900px){ .coverage-stats--section{grid-template-columns:repeat(2,1fr);} .area-list--photo{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .area-list--photo{grid-template-columns:1fr;} }
.area-item .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); margin-top:6px; flex-shrink:0;}
.area-item.ship .dot{background:var(--line-strong);}
.area-item h4{font-size:15px; margin-bottom:3px; display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.loc-free{font-size:11px; font-weight:700; letter-spacing:.03em; color:#1D9E75; background:#E1F5EE; padding:3px 9px; border-radius:999px;}
.loc-enquire{font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--ink-soft); background:var(--bg); border:1px solid var(--line-strong); padding:3px 9px; border-radius:999px;}
.area-item p{font-size:13px; color:var(--ink-soft);}
.area-item.has-photo{border-color:transparent; background-size:cover; background-position:center; min-height:92px; align-items:center;}
.area-item.has-photo::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,13,16,.86) 0%,rgba(11,13,16,.64) 55%,rgba(11,13,16,.3) 100%);}
.area-item.has-photo>*{position:relative; z-index:2;}
.area-item.has-photo h4{color:#fff;}
.area-item.has-photo p{color:#D7DAE0;}
.area-item.has-photo .dot{background:#fff;}

.repair-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px;}
@media (max-width:860px){ .repair-grid{grid-template-columns:1fr;} }
.repair-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;}
.repair-card .repair-img{height:180px; overflow:hidden; border-bottom:1px solid var(--line);}
.repair-card .repair-img img{width:100%; height:100%; object-fit:cover; display:block;}
.repair-body{padding:26px 28px;}
.repair-body .tag{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--accent-ink); text-transform:uppercase;}
.repair-body h3{font-size:20px; margin:8px 0 12px;}
.repair-body p{font-size:14.5px; color:var(--ink-soft); margin-bottom:16px;}
.spec-list{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line);}
.spec-row{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.spec-row dt{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-faint); text-transform:uppercase;}
.spec-row dd{color:var(--ink); text-align:right; font-weight:500;}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:46px;}
@media (max-width:900px){ .steps{grid-template-columns:1fr;} }
.step{position:relative; padding-top:34px;}
.step .num{font-family:var(--mono); font-size:13px; color:var(--accent-ink); border:1px solid var(--line-strong); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.step h4{font-size:18px; margin-bottom:8px;}
.step p{color:var(--ink-soft); font-size:14.5px;}

.reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px;}
@media (max-width:960px){ .reviews-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .reviews-grid{grid-template-columns:1fr;} }
.review-card{border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--surface);}
.stars{color:var(--accent); font-size:13px; letter-spacing:2px; margin-bottom:12px;}
.review-card p{font-size:14.5px; color:var(--ink); margin-bottom:14px;}
.review-meta{font-family:var(--mono); font-size:12px; color:var(--ink-soft);}

.reviews-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px;}
.google-rating{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 20px;}
.g-logo{width:34px; height:34px; flex:none;}
.google-rating-score{font-size:22px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px;}
.g-stars{color:#FBBC05; font-size:14px; letter-spacing:1px;}
.google-rating-count{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.review-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.review-top .stars{margin-bottom:0;}
.g-badge{width:20px; height:20px; flex:none;}
.reviews-cta{text-align:center; margin-top:32px;}

.reviews-grid--tile{grid-template-columns:repeat(3,1fr);}
@media (max-width:960px){ .reviews-grid--tile{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){
  /* Reviews on phone: a single swipeable row instead of 11 stacked tiles.
     Uses .reviews-grid.reviews-grid--tile (2 classes) so it beats the
     earlier .reviews-grid{grid-template-columns:1fr} rule. */
  .reviews-grid.reviews-grid--tile{display:flex; gap:12px; margin-top:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-snap-stop:always; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .reviews-grid.reviews-grid--tile::-webkit-scrollbar{display:none;}
  .review-tile{flex:0 0 88%; scroll-snap-align:start; scroll-snap-stop:always; padding:14px;}
  .review-tile-top{gap:10px; margin-bottom:9px;}
  .review-avatar{width:36px; height:36px; border-radius:8px;}
  .review-tile p{font-size:13px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;}
  .reviews-head{gap:12px;}
  .google-rating{padding:10px 14px; gap:10px;}
}
.review-tile{border:1px solid var(--line); border-radius:14px; padding:18px; background:var(--surface); transition:border-color .15s, transform .15s;}
.review-tile:hover{border-color:var(--accent); transform:translateY(-2px);}
.review-tile-top{display:flex; align-items:flex-start; gap:12px; margin-bottom:12px;}
.review-avatar{width:44px; height:44px; flex:none; border-radius:9px; object-fit:cover; background:var(--bg);}
.review-avatar--blank{background:var(--accent-soft);}
.review-tile .stars{font-size:13px; margin-bottom:3px;}
.review-tile-name{font-size:13.5px; font-weight:600; color:var(--ink);}
.review-tile-fit{font-size:12px; color:var(--ink-soft); margin-top:1px;}
.review-tile p{font-size:13.5px; color:var(--ink); line-height:1.5;}

#reviews{background:linear-gradient(180deg, #EFF3FF 0%, #F7F8FC 100%);}
#categories{background:linear-gradient(180deg, #F1F4FC 0%, var(--bg) 60%);}
#results{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
#faq{background:linear-gradient(180deg, var(--bg) 0%, #EEF1FB 100%);}

.faq-list{margin-top:40px; border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; background:none; border:none; text-align:left; padding:22px 4px; display:flex; justify-content:space-between; align-items:center; font-size:16px; font-weight:600; color:var(--ink); font-family:var(--body);}
.faq-q .plus{font-family:var(--mono); font-size:18px; color:var(--accent); transition:transform .2s;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{color:var(--ink-soft); font-size:14.5px; padding:0 4px 22px; max-width:640px;}

.social-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px;}
.social-btn{display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px; border:1px solid var(--line-strong); font-size:14px; font-weight:600; background:var(--surface); transition:border-color .15s, color .15s;}
.social-btn:hover{border-color:var(--accent); color:var(--accent-ink);}
.social-btn svg{width:18px; height:18px; flex:none;}
.social-btn small{font-weight:400; color:var(--ink-faint); font-size:13px;}
.footer-social{display:flex; gap:10px; margin-top:4px;}
.footer-social a{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); color:var(--ink-soft); margin:0;}
.footer-social a:hover{border-color:var(--accent); color:var(--accent);}
.footer-social svg{width:17px; height:17px;}

.cta{background:var(--ink); color:#fff; border-radius:24px; padding:56px; margin-top:0; text-align:center;}
.cta h2{color:#fff; font-size:clamp(28px,4vw,38px);}
.cta p{color:#B7B9BE; margin-top:14px; max-width:520px; margin-left:auto; margin-right:auto;}
.cta-actions{display:flex; justify-content:center; gap:14px; margin-top:30px; flex-wrap:wrap;}
.cta .btn-outline{color:#fff; border-color:#3A3D42;}
.cta .btn-outline:hover{border-color:#fff;}
@media (max-width:600px){ .cta{padding:36px 22px;} }

footer{border-top:1px solid var(--line); padding:56px 0 40px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.footer-grid h5{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px;}
.footer-grid a, .footer-grid p{font-size:14px; color:var(--ink-soft); display:block; margin-bottom:8px;}
.footer-grid a:hover{color:var(--ink);}
.footer-grid .logo img{height:28px;}
.footer-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--ink-faint); font-family:var(--mono);}

.section-head{max-width:640px;}

.rv{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
.rv.in{opacity:1; transform:none;}
.rv-d1{transition-delay:.08s;} .rv-d2{transition-delay:.16s;} .rv-d3{transition-delay:.24s;} .rv-d4{transition-delay:.32s;}
html.no-rv .rv{opacity:1; transform:none;}

.marquee{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); padding:14px 0; position:relative;}
.marquee-track{display:flex; gap:44px; width:max-content; animation:mq 28s linear infinite; will-change:transform;}
.marquee span{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; display:flex; align-items:center; gap:44px;}
.marquee span::after{content:"\2022"; color:var(--accent);}
@keyframes mq{to{transform:translateX(-50%);}}
.marquee:hover .marquee-track{animation-play-state:paused;}

.btn{transition:background .15s, border-color .15s, transform .18s cubic-bezier(.22,.61,.36,1);}
.reel-media{transform-style:preserve-3d;}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none;}
  .marquee-track{animation:none;}
  .reel-media{transform:none !important;}
  .btn{transform:none !important;}
}