/* ==========================================================================
   NIKO — interactive tools, upgraded header, motion.  Loaded after styles.css
   ========================================================================== */

/* ---------------------------------------------------------------- HEADER ---- */
.header{transition:height .3s ease, background .3s ease, backdrop-filter .3s ease, border-color .3s ease;}
.header.scrolled{height:62px;background:rgba(9,9,11,.82);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--line);}
.header.scrolled .logo-img{height:42px;}
.logo-img{transition:height .3s ease;}
.header.hide{transform:translateY(-104%);}          /* hide on scroll-down */

.nav-desktop .navlink{position:relative;}
.nav-desktop .navlink::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.4,0,.2,1);}
.nav-desktop .navlink:hover::after,.nav-desktop .navlink[aria-current="page"]::after,.has-mega:hover .navlink::after{transform:scaleX(1);}

/* Mega-menu */
.has-mega{position:static;display:inline-flex;align-items:center;}
.has-mega>.navlink{display:inline-flex;align-items:center;gap:6px;}
.has-mega>.navlink::before{}
.mega{position:fixed;left:50%;top:var(--header-h);transform:translateX(-50%) translateY(10px);width:min(1120px,94vw);
  background:linear-gradient(180deg,#16161a,#111114);border:1px solid var(--line-2);border-radius:20px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);padding:18px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;z-index:120;display:grid;grid-template-columns:1.6fr 1fr;gap:18px;}
.header.scrolled .mega{top:62px;}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.mega-card{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;border:1px solid transparent;transition:.2s;text-align:left;}
.mega-card:hover{background:var(--surface-2);border-color:var(--line);transform:translateY(-2px);}
.mega-ico{flex:0 0 40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:19px;}
.mega-card h5{font-family:var(--font-alt);font-weight:800;font-size:15px;color:#fff;margin:0 0 2px;}
.mega-card p{font-size:12.5px;color:var(--muted);line-height:1.4;margin:0;}
.mega-feature{border-radius:16px;overflow:hidden;position:relative;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;
  background:linear-gradient(0deg,rgba(8,8,10,.92),rgba(8,8,10,.15)),var(--surface-2);}
.mega-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.75;}
.mega-feature>*{position:relative;z-index:1;}
.mega-feature .tagline{font-family:var(--font-display);font-size:26px;line-height:.98;letter-spacing:.5px;color:#fff;text-transform:uppercase;}
.mega-feature .btn{margin-top:12px;align-self:flex-start;}
@media(max-width:1000px){.mega{display:none!important;}}

/* Mobile drawer polish */
.mobile-menu a{transition:transform .35s ease, opacity .35s ease;transform:translateY(12px);opacity:0;}
.mobile-menu.open a{transform:translateY(0);opacity:1;}
.mobile-menu.open a:nth-child(1){transition-delay:.05s}.mobile-menu.open a:nth-child(2){transition-delay:.09s}
.mobile-menu.open a:nth-child(3){transition-delay:.13s}.mobile-menu.open a:nth-child(4){transition-delay:.17s}
.mobile-menu.open a:nth-child(5){transition-delay:.21s}.mobile-menu.open a:nth-child(6){transition-delay:.25s}
.mobile-menu.open a:nth-child(n+7){transition-delay:.29s}

/* ------------------------------------------------------------ TOOLS SHELL --- */
.tools{background:radial-gradient(120% 90% at 80% -10%,rgba(12,131,223,.10),transparent 55%),var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.tools .eyebrow .spark{color:var(--accent);}
.tool-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px;}
.tool-tab{display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--text-2);font-family:var(--font-alt);font-weight:700;font-size:14px;cursor:pointer;transition:.2s;}
.tool-tab .ti{font-size:16px;}
.tool-tab:hover{border-color:var(--accent-ring);color:#fff;transform:translateY(-2px);}
.tool-tab.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 10px 26px -10px var(--accent-ring);}
.tool-panel{display:none;animation:toolIn .4s ease;}
.tool-panel.on{display:block;}
@keyframes toolIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Estimator (shared) */
/* Configurator layout: the visual stage sits on the LEFT and the controls +
   price on the RIGHT, so the car and the option buttons are on screen together
   (was stage-on-top, which pushed the buttons below the fold). */
.est{background:linear-gradient(180deg,#141418,#0f0f12);border:1px solid var(--line-2);border-radius:22px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"stage main" "side main";box-shadow:var(--shadow);align-items:start;}
/* controls-only tools (wrap, fleet) have no visual stage -> don't reserve a column for it */
.est.est--nostage{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"main side";}
/* min-width:0 on the grid items: a 1fr track is minmax(auto,1fr), so without
   this the widest child's min-content pushes the whole card past the viewport
   on phones instead of letting the content wrap. */
.est-main{grid-area:main;min-width:0;padding:clamp(20px,3vw,30px);}
.est:not(.est--nostage) .est-main{border-left:1px solid var(--line);}
.est-side{grid-area:side;min-width:0;background:linear-gradient(180deg,#101014,#0b0b0e);border-top:1px solid var(--line);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;}
.est.est--nostage .est-side{border-top:none;border-left:1px solid var(--line);}
.est-step{margin-bottom:15px;}
.est-step>.lab{display:flex;align-items:center;gap:10px;font-family:var(--font-alt);font-weight:800;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px;}
.est-step>.lab b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--accent-soft);color:var(--accent);font-size:12px;}
.opt-row{display:flex;flex-wrap:wrap;gap:10px;}
.opt{flex:1 1 130px;min-width:120px;text-align:left;padding:13px 15px;border-radius:13px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;transition:.18s;position:relative;}
.opt:hover{border-color:var(--accent-ring);transform:translateY(-2px);}
.opt.sel{border-color:var(--accent);background:var(--accent-soft);}
.opt.sel::after{content:"✓";position:absolute;top:9px;right:11px;color:var(--accent);font-weight:900;font-size:13px;}
.opt .on{display:block;font-family:var(--font-alt);font-weight:800;font-size:15px;color:#fff;padding-right:18px;}
.opt .od{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35;}
.chk{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;transition:.18s;font-weight:600;font-size:14px;}
.chk:hover{border-color:var(--accent-ring);}
.chk.sel{border-color:var(--accent);background:var(--accent-soft);color:#fff;}
.chk .box{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:12px;color:transparent;transition:.15s;}
.chk.sel .box{background:var(--accent);border-color:var(--accent);color:#fff;}
.chk .px{margin-left:auto;color:var(--muted-2);font-size:12.5px;font-weight:700;}
.chk-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;}
/* add-on already bundled into the chosen package — shown, priced at zero, not clickable */
.chk.inc{border-color:var(--accent-ring);background:var(--accent-soft);color:#fff;cursor:default;}
.chk.inc:hover{transform:none;}
.chk.inc .box{background:var(--accent);border-color:var(--accent);color:#fff;}
.chk.inc .px{color:var(--accent);font-size:11px;letter-spacing:1.1px;text-transform:uppercase;font-weight:800;}

.est-side .sk{font-family:var(--font-alt);font-weight:800;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted-2);}
.est-price{font-family:var(--font-display);font-size:clamp(34px,4.5vw,52px);line-height:1;color:#fff;margin:8px 0 2px;letter-spacing:.5px;}
.est-price .cur{color:var(--accent);font-size:.6em;vertical-align:top;margin-right:2px;}
.est-price.pulse{animation:pricePulse .5s ease;}
@keyframes pricePulse{0%{transform:scale(1)}40%{transform:scale(1.06);color:#fff}100%{transform:scale(1)}}
.est-note{font-size:12px;color:var(--muted-2);line-height:1.5;margin-top:6px;}
.est-summary{margin:16px 0;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:7px;}
.est-summary .row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;}
.est-summary .row span:first-child{color:var(--muted);}
.est-summary .row span:last-child{color:var(--text);font-weight:600;text-align:right;}
.est-side .btn{margin-top:auto;}
.est-badge{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--muted-2);border:1px solid var(--line);border-radius:999px;padding:5px 11px;margin-top:12px;align-self:flex-start;}
.est-badge .g{width:7px;height:7px;border-radius:50%;background:#39d353;box-shadow:0 0 8px #39d353;}
@media(max-width:820px){.est,.est.est--nostage{grid-template-columns:1fr;grid-template-areas:"stage" "main" "side";}.est:not(.est--nostage) .est-main{border-left:none;}.est-stage{border-bottom:1px solid var(--line);align-self:stretch;}.est-side{border-left:none;border-top:1px solid var(--line);}}
/* phones: two add-on tiles side by side forces 3-line labels, so stack them */
@media(max-width:560px){.chk-row{grid-template-columns:1fr;}.chk{font-size:13.5px;}}

/* ------------------------------------------- PHOTO COVERAGE STAGE --------- */
/* One dim plate + one bright plate, both real photos of a car NIKO wrapped.
   Each coverage zone is the bright plate clipped by its own alpha mask, so the
   outer edges follow the car pixel-for-pixel.  The masks are a disjoint
   partition of the car, which means stacking any subset unions cleanly with no
   half-lit hairline down the seams.  All url() here are relative to this file
   (assets/), which is why deploy_build.py never has to rewrite them. */
.est-stage{grid-area:stage;padding:clamp(14px,2.4vw,24px);align-self:center;
  background:radial-gradient(120% 130% at 50% 0%,rgba(12,131,223,.07),transparent 60%);}
.es-frame{position:relative;width:100%;max-width:960px;margin:0 auto;aspect-ratio:1400/788;
  border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#090a0d;isolation:isolate;}
.es-plate{position:absolute;inset:0;background:url(img/est/z1-front.png) center/100% 100% no-repeat;}
.es-zones{position:absolute;inset:0;pointer-events:none;}
/* Coverage read, manufacturer-diagram style: the clean bright car is always
   visible and covered panels get a translucent brand-blue film.  ONE overlay
   carries the blue; the active zones are composed into its CSS mask as a UNION
   (tools.js sets the mask-image list).  Painting the blue once means adjacent
   zones can never double-draw a darker seam line where they meet — the old
   per-zone stacked layers did exactly that along every panel boundary. */
/* The treatment itself is reverse-engineered from the partner shop's visualizer
   (same stock render, permission confirmed by Dejan): their covered panels are a
   FLAT colour at 38.5% opacity with plain normal blending — fitted per-channel as
   tinted = 0.615*base + m, C = rgb(253,191,40).  Ours is the identical model with
   the hue swapped to Niko blue: C = rgb(40,157,252), same alpha.  No gradient,
   no blend mode — that heavier look was the old version's problem. */
.es-zones .cover{position:absolute;inset:0;display:block;opacity:0;
  background:#289DFC;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  transition:opacity .3s cubic-bezier(.4,0,.2,1);}
.es-zones .cover.on{opacity:.385;}
/* no mask-image support (very old browsers): just show the lit car, no overlay */
.es-frame.nomask .es-plate{background-image:url(img/est/est-car.jpg);}
.es-frame.nomask .es-zones{display:none;}

.es-cap{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:9px;max-width:calc(100% - 24px);
  padding:8px 14px;border-radius:999px;background:rgba(8,9,12,.72);border:1px solid var(--line-2);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
.es-cap .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);}
.es-cap b{font-family:var(--font-alt);font-weight:800;font-size:13px;color:#fff;letter-spacing:.3px;white-space:nowrap;}
.es-cap .sub{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted-2);white-space:nowrap;}
.es-note{max-width:960px;margin:10px auto 0;font-size:11.5px;color:var(--muted-2);text-align:center;letter-spacing:.2px;}
@media(max-width:560px){.es-cap .sub{display:none;}}

/* ------------------------------------------------- TINT / WRAP STAGE ------- */
/* The tint + wrap tools reuse the .est shell and the .es-frame photo stage.
   Every url() below is CSS-relative so it resolves at any page depth. */

/* --- glass panes: two stacked layers per zone, sharing one mask ---------- */
.es-zones .g{position:absolute;inset:0;display:block;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  transition:opacity .28s cubic-bezier(.4,0,.2,1),background-color .28s linear;}
.g[data-g="wind"] {-webkit-mask-image:url(img/est/m-g-wind.png); mask-image:url(img/est/m-g-wind.png);}
.g[data-g="side"] {-webkit-mask-image:url(img/est/m-g-side.png); mask-image:url(img/est/m-g-side.png);}
.g[data-g="strip"]{-webkit-mask-image:url(img/est/m-g-strip.png);mask-image:url(img/est/m-g-strip.png);}
.g[data-g="rear"] {-webkit-mask-image:url(img/est/m-g-rear.png); mask-image:url(img/est/m-g-rear.png);}

/* The film itself.  MULTIPLY, not alpha-compositing.
   The previous stage photo had near-black glass, so the film had to be faked by
   SCREENING light back in.  This render is a bright studio silver whose glass
   sits around luminance 140 with the dash, wiper, headrest and A-pillar all
   legible through it -- so the film can simply darken, which is what film
   actually does.  Multiply preserves the relative structure inside the pane;
   plain opacity would flood it toward a flat slab and throw all that away. */
.es-zones .g.fill{mix-blend-mode:multiply;background:#080d14;opacity:0;}

/* Surface sheen.  Each .g spans the WHOLE frame and is masked, so every pane
   samples ONE shared gradient -- the door glass lands at ~14-29% across, the
   windshield at ~27-68% -- and they pick up different reflections for free.
   screen over #000 is a no-op, so the near-black bands are deliberate: they let
   the interior read through instead of milking the pane out.  Amplitude is far
   lower than the old version because the photo now carries its own reflections;
   this only adds the specular streak that stops dark tint looking like a hole.
   It gets STRONGER as the film gets darker, which is true of real glass. */
.es-zones .g.lit{mix-blend-mode:screen;opacity:0;
  background:linear-gradient(103deg,#10161e 0%,#2c3949 9%,#161e28 15%,#05080c 22%,
    #1b2431 29%,#38485c 34%,#141c26 40%,#05080b 47%,#0a0e14 54%,#232e3d 60%,
    #0b1017 67%,#05080b 74%,#18212c 84%,#070a0e 100%);}
/* keep the blue rim off the glass layers — it belongs to the PPF zones only */
.es-frame.glass .es-zones{filter:none;}
.es-frame.glass .es-plate{background-image:url(img/est/est-car.jpg);}
.es-cap.vlt b{font-variant-numeric:tabular-nums;}

/* --- VLT slider, film-type tabs, stat tiles, legality note --------------- */
.type-tabs{display:flex;gap:7px;margin:2px 0 0;}
.type-tab{flex:1;min-width:0;padding:10px 6px;border-radius:11px;border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);font-family:var(--font-alt);font-weight:700;font-size:13px;cursor:pointer;transition:.18s;}
.type-tab.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.type-tab:hover:not(.on){border-color:var(--accent-ring);color:#fff;}
.vlt-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;}
.vlt-label .t{font-family:var(--font-alt);font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2);}
.vlt-label .d{font-size:12.5px;color:var(--text-2);font-weight:700;white-space:nowrap;}
input[type=range].vlt{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,#05070c 0%,#2a3444 45%,#9fb6cd 100%);border:1px solid var(--line-2);}
input[type=range].vlt::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.5);cursor:grab;}
input[type=range].vlt::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--accent);cursor:grab;}
.vlt-scale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted-2);margin-top:6px;letter-spacing:.4px;}
.tint-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px;}
.tstat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center;}
.tstat .v{font-family:var(--font-display);font-size:23px;color:#fff;line-height:1;}
.tstat .k{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2);margin-top:5px;}
.legal-note{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.45;border-radius:12px;padding:11px 13px;margin-bottom:14px;transition:.2s;}
.legal-note.ok{background:rgba(57,211,83,.08);border:1px solid rgba(57,211,83,.3);color:#bfe9c8;}
.legal-note.warn{background:rgba(255,176,32,.09);border:1px solid rgba(255,176,32,.35);color:#f2d69a;}
.legal-note .li{font-size:15px;line-height:1;margin-top:1px;}

/* --------------------------------------------------------------- MOTION ----- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal][data-reveal="l"]{transform:translateX(-30px);}
[data-reveal][data-reveal="r"]{transform:translateX(30px);}
.reveal-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.reveal-stagger.in>*{opacity:1;transform:none;}
.reveal-stagger.in>*:nth-child(2){transition-delay:.08s}.reveal-stagger.in>*:nth-child(3){transition-delay:.16s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.24s}.reveal-stagger.in>*:nth-child(5){transition-delay:.32s}
.reveal-stagger.in>*:nth-child(6){transition-delay:.40s}

.hero-media img{will-change:transform;}
.lift{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;}
.lift:hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px rgba(0,0,0,.7);}
.stat .n,.rating-hero .big{transition:none;}
.count[data-count]{font-variant-numeric:tabular-nums;}

/* magnetic-ish primary buttons + shine */
.btn-primary{position:relative;overflow:hidden;}
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .6s ease;}
.btn-primary:hover::after{left:130%;}

/* scroll progress bar */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),#3FC0FF);z-index:200;transition:width .1s linear;}

@media(prefers-reduced-motion:reduce){
  [data-reveal],.reveal-stagger>*{opacity:1!important;transform:none!important;transition:none!important;}
  .btn-primary::after{display:none;}
  .header.hide{transform:none;}
  .tool-panel{animation:none;}
  .es-zones .z{transition:none!important;}
}

/* ==========================================================================
   LIGHT SECTIONS — break up the dark theme with white / soft bands.
   Full-bleed background painted by ::before (works even when the section is
   also .container-constrained). CSS variables are remapped so every
   descendant that reads them flips to an ink-on-light palette.
   ========================================================================== */
.section--light{
  --bg:#ffffff; --bg-2:#f4f5f7; --bg-3:#eef0f3;
  --surface:#ffffff; --surface-2:#f6f7f9;
  --text:#16171c; --text-2:#3a3c44; --muted:#5d606a; --muted-2:#70737d; --faint:#a2a7b0;
  --line:rgba(12,14,22,.10); --line-2:rgba(12,14,22,.16);
  --accent-soft:rgba(12,131,223,.10);
  --shadow:0 18px 44px -24px rgba(20,22,40,.22);
  position:relative;color:var(--text);
}
.section--light::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:100%;background:#ffffff;
  border-top:1px solid rgba(12,14,22,.07);border-bottom:1px solid rgba(12,14,22,.07);
  z-index:0;pointer-events:none;
}
.section--light.is-soft::before{background:#eef1f5;}
.section--light>*{position:relative;z-index:1;}

/* flip hard-coded near-white ink to dark inside light bands */
.section--light h1,.section--light h2,.section--light h3,.section--light h4,
.section--light .h1,.section--light .h2,.section--light .h3,
.section--light .svc-card h3,.section--light .svc-card .go,
.section--light .stat .t,.section--light .step h3,.section--light .mini h4,
.section--light .review .who,.section--light .prose h2,.section--light .prose h3,
.section--light .rating-hero .big,.section--light .faq-q,.section--light .info-card .v,
.section--light .price-val,.section--light .svc-row h2,
.section--light .hours-row span:last-child{color:#16171c;}
.section--light .svc-card .go .arw{color:var(--accent);}

/* buttons on light */
.section--light .btn-outline{border-color:var(--line-2);color:#16171c;}
.section--light .btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.section--light .btn-ghost{background:rgba(12,14,22,.05);color:#16171c;border-color:var(--line-2);}
.section--light .btn-ghost:hover{background:rgba(12,14,22,.10);}

/* cards gain a soft shadow to separate from the light band */
.section--light .svc-card,.section--light .review,.section--light .mini,
.section--light .info-card,.section--light .form-card,.section--light .svc-row{
  box-shadow:0 12px 32px -24px rgba(20,22,40,.4);
}
.section--light .step .n{color:#dfe2e8;}
.section--light .filter{background:#fff;color:var(--text-2);}
.section--light .filter:hover{color:#16171c;}
.section--light .pill{background:#fff;color:var(--text-2);}

/* form controls on light */
.section--light .field input,.section--light .field select,.section--light .field textarea,
.section--light .chip{background:#fff;color:#16171c;border-color:var(--line-2);}
.section--light .field input::placeholder,.section--light .field textarea::placeholder{color:#9a9da6;}
.section--light .chip[aria-pressed="true"]{background:var(--accent-soft);color:#16171c;border-color:var(--accent);}

/* ------------------------------------------------- AWARD BADGE ------------ */
.award{display:inline-flex;align-items:center;gap:13px;text-align:left;}
.award img{width:60px;height:60px;border-radius:12px;object-fit:cover;border:1px solid var(--line-2);flex:none;background:#fff;}
.award figcaption b{display:block;font-family:var(--font-alt);font-weight:800;font-size:14px;letter-spacing:.2px;color:var(--text);line-height:1.15;}
.award figcaption span{display:block;font-size:12px;color:var(--muted);margin-top:3px;}
.award-lg img{width:94px;height:94px;border-radius:16px;}
.award-band{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;text-align:left;}
.award-band .award figcaption b{font-size:16px;}

/* ---------------------------------------------- SQUARE IG-STYLE GALLERY --- */
.gallery{grid-template-columns:repeat(auto-fill,minmax(232px,1fr));}
.gal-item{aspect-ratio:1/1;}

/* ----------------------------------------- MEGA-MENU hover bridge + open -- */
.mega::before{content:"";position:absolute;left:0;right:0;top:-20px;height:22px;background:transparent;}
.has-mega.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.has-mega.open .navlink::after{transform:scaleX(1);}

/* ---------------------------------------------------- SERVICE ICONS (SVG) --- */
.mega-ico svg{width:22px;height:22px;}
.tool-tab .ti{display:inline-flex;align-items:center;}
.tool-tab .ti svg{width:18px;height:18px;display:block;}

/* -------------------------------------------------- TINT SHADE GUIDE -------- */
/* Replaces the old glass car simulator: a bright CSS "view" that darkens to the
   chosen shade, plus a swatch strip of the film's real shades.  No image URLs. */
.shade-view{position:relative;width:100%;max-width:960px;margin:0 auto;aspect-ratio:1400/788;
  border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0a0c10;isolation:isolate;}
.sv-scene{position:absolute;inset:0;
  background:
    radial-gradient(circle at 75% 28%,rgba(255,248,226,.95),rgba(255,213,138,.4) 15%,transparent 40%),
    linear-gradient(180deg,#8fd0ff 0%,#bfe3ff 33%,#eaf4ff 51%,#f6efe0 59%,#d9b98a 65%,#6b7684 70%,#39424f 83%,#222833 100%);}
.sv-scene::after{content:"";position:absolute;inset:0;opacity:.45;
  background:
    linear-gradient(180deg,transparent 62%,rgba(18,22,28,.55) 66%,transparent 67%),
    repeating-linear-gradient(90deg,transparent 0 64px,rgba(0,0,0,.10) 64px 66px);}
.sv-film{position:absolute;top:0;bottom:0;left:50%;right:0;background:#05070c;opacity:.4;
  transition:opacity .35s cubic-bezier(.4,0,.2,1);}
.sv-split{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-1px);z-index:3;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.12));}
.sv-tag{position:absolute;top:12px;z-index:4;font-family:var(--font-alt);font-weight:800;font-size:10px;
  letter-spacing:1.3px;text-transform:uppercase;color:#fff;background:rgba(8,9,12,.62);
  padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.sv-tag.l{left:12px;}.sv-tag.r{right:12px;}
.sv-glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.12) 46%,transparent 53%);}
@media(max-width:820px){.shade-view{aspect-ratio:16/10;}}

.shade-row{display:flex;flex-wrap:wrap;gap:8px;}
.shade-chip{flex:1 1 58px;min-width:54px;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 6px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;transition:.16s;}
.shade-chip:hover{border-color:var(--accent-ring);transform:translateY(-2px);}
.shade-chip.on{border-color:var(--accent);background:var(--accent-soft);}
.shade-chip .sw{width:100%;height:34px;border-radius:8px;border:1px solid rgba(0,0,0,.3);
  background:
    linear-gradient(rgba(5,7,12,var(--a,.5)),rgba(5,7,12,var(--a,.5))),
    linear-gradient(160deg,#d3e8ff,#9fb6cd 55%,#6e7d8f);}
.shade-chip .pc{font-family:var(--font-alt);font-weight:800;font-size:12.5px;color:var(--text-2);}
.shade-chip.on .pc{color:#fff;}