.wrap-studio{scroll-margin-top:96px;padding:28px 0;color:#f5f5f5}
.wrap-stage{position:relative;isolation:isolate;display:grid;gap:16px;background:#090b0a}
.wrap-photo{margin:0;position:relative;overflow:hidden;aspect-ratio:16/9;background:#101210}
.wrap-photo svg{display:block;width:100%;height:100%}
.wrap-controls{position:relative;z-index:1;display:grid;gap:10px;padding:24px;margin:0 16px 16px;border:1px solid #ffffff26;border-radius:20px;background:#121412}
.wrap-controls h2,.wrap-controls p{margin:0}.wrap-controls h2{font-size:clamp(26px,4vw,42px)}
.wrap-controls small{color:#c1c6bf}.wrap-controls input{width:100%;padding:9px;border:1px solid #535953;border-radius:8px;background:#1c201c;color:white}
.wrap-brands,.wrap-finishes,.wrap-bodies{display:grid;gap:6px;grid-template-columns:repeat(4,minmax(0,1fr))}
.wrap-brands{grid-template-columns:repeat(2,minmax(0,1fr))}
.wrap-brands button,.wrap-finishes button,.wrap-bodies button,.wrap-chip,.wrap-toggle{min-height:40px;border:1px solid #626862;border-radius:8px;background:#181b18;color:white;cursor:pointer}
.wrap-brands button{display:grid;place-items:center;background:white}.wrap-brands img{max-width:85%;object-fit:contain}
.wrap-finishes button,.wrap-bodies button{padding:4px;font-size:.75rem}.wrap-bodies svg{display:block;width:28px;margin:auto}
.wrap-stage button[aria-pressed=true]{border-color:#b6f400;box-shadow:inset 0 0 0 1px #b6f400}
.wrap-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px;max-height:132px;overflow:auto}
.wrap-chip{display:grid;place-items:center;padding:3px}.wrap-chip span{width:24px;height:24px;border:1px solid #ffffff40;border-radius:50%}
.wrap-reference{border:1px solid #535953;border-radius:8px;padding:8px}.wrap-reference summary{cursor:pointer}.wrap-reference img{display:block;width:100%;max-height:150px;object-fit:contain}.wrap-reference a{color:inherit}
#wrap-price{font-weight:700;font-size:1.4rem}.wrap-photo-toggle,.wrap-toggle,.wrap-rail{display:none}
@media(min-width:1024px){
 .wrap-stage{min-height:90svh;align-items:center;justify-items:end;padding:42px clamp(58px,6vw,100px) 28px}
 .wrap-photo{position:absolute;inset:0;aspect-ratio:auto}.wrap-controls{width:min(360px,100%);margin:0;background:#0d100de8;backdrop-filter:blur(10px)}
 .wrap-photo-toggle{display:block;position:absolute;inset:0;width:100%;height:100%;background:none;border:0;cursor:pointer}
 .wrap-toggle{display:block;position:absolute;z-index:2;right:12px;top:12px;width:42px;font-size:22px}
 .wrap-rail:not([hidden]){display:grid;position:absolute;right:12px;top:64px;z-index:2;width:42px;max-height:calc(100% - 76px);overflow:auto;gap:4px}
 .wrap-stage[data-collapsed=true] .wrap-controls{display:none}
}

.tint-photo{aspect-ratio:900/506}
.tint-glass path{fill:#98ce404a;stroke:#c3f567;stroke-width:1.2;stroke-linejoin:round;opacity:0;transition:opacity .18s ease}
.tint-glass[data-sweeping]{mask:url(#tint-film-mask)}
.tint-glass path[data-covered]{opacity:1}
@media(prefers-reduced-motion:reduce){.tint-glass path{transition:none}}
.tint-options,.tint-packages{display:grid;gap:6px;grid-template-columns:repeat(2,minmax(0,1fr))}
.tint-packages{grid-template-columns:repeat(3,minmax(0,1fr))}
.tint-options button,.tint-packages button{min-height:42px;padding:6px;border:1px solid #626862;border-radius:8px;background:#181b18;color:white;cursor:pointer;font-size:.8rem}
.tint-packages button[hidden]{display:none}
.tint-packages button span,.tint-packages button small{display:block}
.tint-packages .coverage-diagram{height:76px;width:auto;margin:auto}
.tint-roof,.tint-checkout label{display:grid;gap:4px;font-size:.82rem}
.tint-roof select{padding:7px;border:1px solid #535953;border-radius:8px;background:#1c201c;color:white}
.tint-removal{display:flex;gap:8px;align-items:center;font-size:.85rem}
.tint-removal input{width:auto}
.tint-price{font-weight:700;font-size:1.4rem}
.tint-checkout{display:grid;gap:8px;padding-top:10px}

@media(min-width:1024px){
 .tint-stage{height:auto;aspect-ratio:900/506;min-height:0;grid-template-rows:minmax(0,1fr);padding:16px 16px 16px 0}
 .tint-stage .wrap-controls{width:26%;min-width:0;max-height:100%;overflow:auto;padding:16px;gap:8px}.tint-stage .wrap-controls h2{font-size:clamp(20px,2vw,30px)}
 .tint-stage .tint-photo{aspect-ratio:auto}
}

/* Keep the compact tint menu in the reserved wall area. */
@media(min-width:1024px){.tint-stage{align-items:start}.tint-stage .wrap-controls{align-self:start}.tint-stage .tint-packages .coverage-diagram{height:58px}.tint-stage .tint-glass path{stroke-width:1.8}}

.tint-roof-icons button{display:flex;flex-direction:column;align-items:center;gap:3px}.tint-rear-addon{display:flex;gap:8px;align-items:center;font-size:13px}.tint-rear-addon[hidden]{display:none}
.tint-stage .tint-rear-addon input{width:16px;min-width:16px;margin:0;accent-color:#b6f400}.tint-stage .tint-rear-addon{justify-content:flex-start}.tint-stage .tint-roof-icons{grid-template-columns:repeat(3,minmax(0,1fr))}
.tint-stage .wrap-controls{font-size:12px}.tint-stage .wrap-controls h2{font-size:30px;line-height:1.15}.tint-stage .wrap-controls p{font-size:12px;line-height:1.4}.tint-stage .tint-options button,.tint-stage .tint-packages strong,.tint-stage .tint-rear-addon,.tint-stage .tint-removal{font-size:12px}.tint-stage #tint-studio-price{color:#b6f400;font-size:25px;font-weight:800;line-height:1.2;margin:12px 0}

.tint-stage #tint-book-now{background:#b6f400;color:#10140b;width:100%;font-weight:800}.tint-stage #tint-shades{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tint-stage #tint-shades label{font-size:11px}.tint-stage #tint-shades select{font-size:12px;padding:6px}.tint-stage[data-booking=true] .wrap-controls> :not(#tint-checkout):not(#tint-studio-price){display:none}.tint-stage .tint-checkout[hidden]{display:none}

#tint-days{display:flex;overflow-x:auto;gap:7px;cursor:grab;touch-action:pan-x;user-select:none;padding:8px 0}#tint-days>button{flex:0 0 68px;display:flex;flex-direction:column;align-items:center;gap:5px;background:#151b16;color:white;border:1px solid #66705e;border-radius:10px;padding:9px 4px}#tint-days strong{font-size:22px}#tint-days button[aria-pressed=true]{border-color:#b6f400}#tint-days button:disabled{opacity:.4}.day-capacity{display:flex;flex-wrap:wrap;justify-content:center}.day-capacity i{display:flex}.day-capacity .available{color:#b6f400}.day-capacity .occupied{color:#70766e}#tint-times button{padding:9px;margin:4px;background:#172213;color:#b6f400;border:1px solid #7eaa36;border-radius:8px}#tint-times button:disabled{opacity:.35}#tint-day-picker[hidden],#tint-customer-fields[hidden],#tint-change-date[hidden]{display:none}#tint-customer-fields label{display:block;margin-top:8px}

.tint-stage #tint-book-back,.tint-stage #tint-change-date{background:#151b16;color:#b6f400;border:1px solid #7eaa36;border-radius:9px;padding:10px 12px;font:inherit;text-align:left;cursor:pointer}.tint-stage #tint-book-back:hover,.tint-stage #tint-change-date:hover{background:#253319}.tint-stage #tint-book-back:focus-visible,.tint-stage #tint-change-date:focus-visible{outline:2px solid #b6f400;outline-offset:3px}.tint-stage #tint-checkout button[type=submit]{background:#b6f400;color:#11170a;border:1px solid #b6f400;border-radius:9px;font-weight:800}.tint-stage #tint-checkout button:disabled{opacity:.45;cursor:not-allowed}

.tint-stage #tint-customer-fields>button[type=submit]{display:block;width:100%;margin:18px 0 8px;padding:12px}.tint-stage .tint-booking-note{display:block;text-align:center;font-size:11px;line-height:1.4;margin:0;white-space:normal}.tint-stage #tint-checkout-status:empty{display:none}.tint-stage #tint-customer-fields>.tint-options{margin-bottom:12px}

.tint-stage #tint-pay-now{width:100%;margin:0 0 8px;background:#182014;border:1px solid #b6f400;color:#b6f400;padding:12px;border-radius:9px;font-weight:800}

#wrap-payment[hidden]{display:none}.payment-plan-note{font-size:11px!important;line-height:1.4;color:#c5db9b}#wrap-payment input{display:block;width:100%;padding:9px;background:#1d241d;color:white;border:1px solid #60685b;border-radius:8px}#wrap-payment label{display:block;margin:8px 0;font-size:12px}#wrap-payment button{margin-top:10px;width:100%;background:#b6f400;color:#11170a}

.tint-stage[data-booking=true] .wrap-controls>#tint-financing{display:block}#tint-financing,#wrap-financing{margin:8px 0;min-height:20px}

#tint-financing,#wrap-financing{padding:12px;border:1px solid #91c733;border-radius:10px;background:#b6f4000d;box-shadow:0 0 0 1px #b6f4000a;margin:10px 0}

.tint-addon-icon{width:24px;height:24px;flex:0 0 24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.tint-addon-green{color:#b6f400}.tint-addon-red{color:#ff6565}.tint-stage .tint-removal{display:flex;align-items:center;gap:8px}.tint-stage .tint-removal input{width:16px;min-width:16px;margin:0}.tint-stage .wrap-controls small:empty{display:none}

/* Clear film selection and a compact, touch-scroll palette. */
#color-change .wrap-brands button{transition:opacity .18s ease,border-color .18s ease;min-height:48px}
#color-change .wrap-brands button[aria-pressed=false]{opacity:.45;background:#d4d7d3}
#color-change .wrap-brands button[aria-pressed=false] img{filter:grayscale(1)}
#color-change .wrap-brands button[aria-pressed=true]{opacity:1;background:#fff;border:2px solid #b6f400;box-shadow:0 0 0 2px #b6f40026}
#color-change .wrap-brands button:focus-visible,#color-change .wrap-chip:focus-visible{outline:2px solid #b6f400;outline-offset:2px}
@media(max-width:1023px){
 #color-change .wrap-stage{gap:0;min-width:0}
 #color-change .wrap-controls{min-width:0;gap:8px;padding:16px;margin:0;border-radius:0 0 18px 18px}
 #color-change .wrap-controls>.eyebrow{display:none}
 #color-change .wrap-controls h2{font-size:24px}
 #color-change .wrap-swatches{display:flex;gap:7px;max-width:100%;max-height:none;overflow-x:auto;overflow-y:hidden;padding:5px 2px 9px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#b6f400 #242a22}
 #color-change .wrap-swatches .wrap-chip{flex:0 0 44px;height:44px;scroll-snap-align:center}
 #color-change .wrap-swatches .wrap-chip span{width:29px;height:29px}
 #color-change #wrap-selected{font-size:12px;line-height:1.4}
}

@media(max-width:1023px){
 #color-change .wrap-photo{aspect-ratio:auto;overflow:visible;margin-bottom:28px}
 #color-change .wrap-photo>svg{height:auto;aspect-ratio:16/9}
 #color-change .wrap-photo>.wrap-swatches{position:absolute;bottom:0;transform:translateY(50%);left:10px;right:10px;width:auto;z-index:2;padding:6px;background:#0b100be8;border:1px solid #ffffff26;border-radius:12px;backdrop-filter:blur(8px)}
}

/* Keep the appointment strip inside its grid track at every viewport. */
.tint-stage{grid-template-columns:minmax(0,1fr)}
.tint-stage .wrap-controls,.tint-checkout,#tint-day-picker,#tint-customer-fields{min-width:0}
.tint-checkout{grid-template-columns:minmax(0,1fr)}
#tint-days{min-width:0;max-width:100%;overscroll-behavior-x:contain}
#tint-customer-fields input{box-sizing:border-box;min-width:0;max-width:100%}
#tint-customer-fields .tint-options>label{min-width:0}
#tint-checkout h3,#tint-availability,#tint-change-date{overflow-wrap:anywhere}
@media(max-width:1023px){
 .tint-stage .wrap-controls{padding:16px}
 #tint-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 #tint-times>p{grid-column:1/-1}
 #tint-times button{min-width:0;margin:0;padding:10px 3px;font-size:12px}
}

.tint-film-benefits{display:flex;flex-wrap:wrap;gap:10px;padding:4px 0 8px}.tint-film-benefits>span{display:flex;align-items:center;gap:5px}.tint-film-benefits svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:#b6f400;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.tint-stage .tint-film-benefits small{font-size:11px;color:#e5eadf}

/* Interactive PPF package comparison. */
.ppf-studio{padding-top:44px}.ppf-stage{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr);gap:0;min-height:720px;padding:0;align-items:stretch;justify-items:stretch;overflow:hidden;border:1px solid #ffffff1c;border-radius:24px;background:#080b08;box-shadow:0 28px 90px #0008}.ppf-photo{position:relative;width:100%;min-width:0;min-height:720px;margin:0;overflow:hidden;background:radial-gradient(circle at 50% 38%,#30362f 0,#131713 52%,#080b08 100%)}.ppf-visual{position:absolute;inset:0;overflow:hidden}.ppf-visual:after{content:"";position:absolute;z-index:3;inset:0;background:linear-gradient(90deg,transparent 55%,#080b08 100%),linear-gradient(0deg,#080b08d9 0,transparent 35%);pointer-events:none}.ppf-shop-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.96) contrast(1.03)}.ppf-coverage-map{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.ppf-zone{opacity:0;transform-origin:center;transform-box:fill-box;pointer-events:none}.ppf-zone.is-active{animation:ppf-zone-reveal 1.05s cubic-bezier(.2,.78,.2,1) both}.ppf-zone-shape{fill:#b6f400;fill-opacity:.055;stroke:#dfff72;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px #b6f400cc)}.ppf-zone-full-shape{fill-opacity:.035;stroke-width:1.8}.ppf-zone-partial-cut{stroke-dasharray:7 6}.ppf-scan{position:absolute;z-index:4;top:0;bottom:0;width:14%;left:-20%;opacity:0;background:linear-gradient(90deg,transparent,#b6f4000d,#f4ffd72f,#b6f4000d,transparent);mix-blend-mode:screen;filter:blur(1px);transform:skewX(-8deg);pointer-events:none}.ppf-scan.is-scanning{animation:ppf-scan 1.15s .12s ease-out both}.ppf-stage[data-ppf-package=front] .ppf-scan{width:20%}.ppf-stage[data-ppf-package=full] .ppf-scan{width:30%;background:linear-gradient(90deg,transparent,#b6f40012,#fffbd738,#b6f40012,transparent)}.ppf-visual-caption{position:absolute;z-index:5;left:32px;bottom:28px;display:grid;gap:4px;padding:13px 16px;border:1px solid #ffffff29;border-radius:12px;background:#080b08c9;backdrop-filter:blur(12px)}.ppf-visual-caption span{color:#b6f400;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.ppf-visual-caption strong{font-size:24px}.ppf-controls{align-self:stretch;width:auto;max-width:none;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:38px;background:linear-gradient(160deg,#121712,#080b08);border-left:1px solid #ffffff17}.ppf-controls h2{margin:0;font-size:clamp(31px,3vw,47px);line-height:.98}.ppf-controls>#ppf-intro{margin:0;color:#cbd0c8;line-height:1.5}.ppf-package-menu{display:grid;gap:8px;margin-top:4px}.ppf-package-menu button{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;width:100%;padding:15px 16px;border:1px solid #ffffff1e;border-radius:12px;background:#171c17;color:#fff;text-align:left;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease}.ppf-package-menu button:hover{transform:translateX(-3px);border-color:#b6f40077}.ppf-package-menu button[aria-pressed=true]{border-color:#b6f400;background:linear-gradient(100deg,#1f2a19,#121712);box-shadow:inset 4px 0 #b6f400}.ppf-package-menu button span{display:grid;gap:2px}.ppf-package-menu button strong{font-size:15px}.ppf-package-menu button small{color:#aeb5ab;font-size:11px}.ppf-package-menu button b{color:#b6f400;font-size:20px}.ppf-package-detail{min-height:142px;padding:14px 15px;border:1px solid #ffffff17;border-radius:12px;background:#ffffff08}.ppf-package-detail p{margin:0 0 10px;color:#eef2ea;font-size:13px;font-weight:700}.ppf-package-detail ul{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;margin:0;padding:0;list-style:none}.ppf-package-detail li{position:relative;padding-left:15px;color:#c9cec6;font-size:12px;line-height:1.35}.ppf-package-detail li:before{content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;border-radius:50%;background:#b6f400;box-shadow:0 0 10px #b6f40099}.ppf-price-row{display:grid;grid-template-columns:1fr auto;align-items:end;padding-top:3px}.ppf-price-row span{color:#aeb5ab;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.ppf-price-row strong{grid-row:1/3;grid-column:2;font-size:36px;line-height:1;color:#fff}.ppf-price-row small{font-size:12px;color:#b6f400}.ppf-controls>.button{width:100%;margin:0}.ppf-controls>#ppf-disclaimer{color:#858d82;font-size:10px;line-height:1.4}.ppf-package-menu button:focus-visible{outline:2px solid #b6f400;outline-offset:2px}
@keyframes ppf-zone-reveal{0%{opacity:0;transform:scale(.97);filter:brightness(1.8)}38%{opacity:1}72%{filter:brightness(1.25)}100%{opacity:.88;transform:scale(1);filter:brightness(1)}}@keyframes ppf-scan{0%{left:-28%;opacity:0}15%{opacity:.75}80%{opacity:.58}100%{left:112%;opacity:0}}
@media(max-width:1023px){.ppf-stage{grid-template-columns:minmax(0,1fr);min-height:0;border-radius:18px}.ppf-photo{min-height:0;aspect-ratio:16/10}.ppf-controls{padding:22px 18px;border-left:0;border-top:1px solid #ffffff17}.ppf-visual:after{background:linear-gradient(0deg,#080b08b8 0,transparent 40%)}.ppf-visual-caption{left:16px;bottom:14px}.ppf-visual-caption strong{font-size:19px}.ppf-package-detail{min-height:0}.ppf-package-detail ul{grid-template-columns:1fr}.ppf-price-row strong{font-size:32px}}
@media(prefers-reduced-motion:reduce){.ppf-zone.is-active,.ppf-scan.is-scanning{animation:none}.ppf-zone.is-active{opacity:.88;transform:none}.ppf-scan{display:none}}

/* PPF desktop composition: package menu on the left, animated vehicle on the right. */
@media(min-width:1024px){
 .ppf-stage{grid-template-columns:minmax(320px,.55fr) minmax(0,1.45fr)}
 .ppf-controls{grid-column:1;grid-row:1;border-left:0;border-right:1px solid #ffffff17}
 .ppf-photo{grid-column:2;grid-row:1}
 .ppf-visual:after{background:linear-gradient(270deg,transparent 55%,#080b08 100%),linear-gradient(0deg,#080b08d9 0,transparent 35%)}
 .ppf-package-menu button:hover{transform:translateX(3px)}
}

/* Precision PPF diagram: trace the physical edges of each Panamera panel. */
.ppf-coverage-map{shape-rendering:geometricPrecision}
.ppf-zone-shape{fill:none;stroke:#dfff72;stroke-width:1.65;filter:drop-shadow(0 0 1px #b6f40099)}
.ppf-zone-full-shape{stroke-width:1.45}
.ppf-zone-partial-cut{stroke-dasharray:6 6;stroke-width:1.45;opacity:.9}
.ppf-controls{margin:0}
