/* PPF and caravan protection pages (Car PPF, Caravan PPF, Caravan Ceramic Coatings).
   Every rule is scoped under .ppf so it cannot collide with the site's Tailwind classes.
   Shared components (.btn, .panel, .field, .metal, .eyebrow) come from src/styles.css. */
.ppf{padding-top:72px;color:var(--silver);font-family:var(--font-sans)}
@media (min-width:80rem){.ppf{padding-top:88px}}
.ppf *,.ppf *::before,.ppf *::after{box-sizing:border-box}
.ppf [hidden]{display:none!important}
.ppf h1,.ppf h2,.ppf h3{margin:0}
.ppf p{margin:0}
.ppf button,.ppf input,.ppf select,.ppf textarea{font:inherit;color:inherit}
.ppf .eyebrow{display:flex;align-items:center;gap:12px}
.ppf .eyebrow::before{content:"";width:32px;height:1px;background:rgb(47 143 255 / .6)}
.ppf .display-lg{font-size:clamp(1.8rem,4.6vw,3.5rem);font-stretch:115%;letter-spacing:-.025em;text-transform:uppercase;overflow-wrap:break-word}
.ppf{--ink:#06080b; --carbon:#0a0e13; --graphite:#11161d; --slate-panel:#161d26;
  --steel:#263140; --steel-soft:#38465a; --silver:#b9c4d1; --silver-bright:#e9eff6; --mist:#8c98a7;
  --volt:#2f8fff; --volt-deep:#0d59c9; --volt-dim:#1b4d8a;
  --bad:#e0574d; --ok:#5cc28f; --amber:#f0c46a;
  --font-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-sans:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --shadow-lift:0 30px 70px -30px rgb(0 0 0 / .9);
  --shadow-volt:0 20px 60px -25px rgb(47 143 255 / .5);
  color-scheme:dark;}
.ppf button,.ppf input,.ppf select,.ppf textarea{font:inherit;color:inherit}
.ppf h1,.ppf h2,.ppf h3{font-family:var(--font-display);font-weight:700;font-stretch:112%;color:var(--silver-bright);line-height:1.04;letter-spacing:-.015em;text-wrap:balance;margin:0}
.ppf .wrap{max-width:1200px;margin:0 auto;box-sizing:border-box;padding-left:max(1.25rem,env(safe-area-inset-left,0px));padding-right:max(1.25rem,env(safe-area-inset-right,0px))}
.ppf .wrap.wide{max-width:1440px}
@media (min-width:40rem){.ppf .wrap{padding-left:max(2rem,env(safe-area-inset-left,0px));padding-right:max(2rem,env(safe-area-inset-right,0px))}}
.ppf .eyebrow{font-family:var(--font-display);font-size:.6875rem;font-weight:600;font-stretch:118%;letter-spacing:.22em;text-transform:uppercase;color:var(--volt);display:flex;align-items:center;gap:12px;margin:0}
.ppf .eyebrow::before{content:"";width:32px;height:1px;background:rgb(47 143 255 / .6)}
.ppf .subnav{border-bottom:1px solid rgb(255 255 255 / .07);background:var(--carbon)}
.ppf .subnav .wrap{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;padding-block:10px}
.ppf .subnav .wrap::-webkit-scrollbar{display:none}
.ppf .subnav .lab{font-family:var(--font-display);font-size:.6rem;font-weight:600;font-stretch:118%;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);margin-right:6px;white-space:nowrap}
.ppf .subnav a{color:var(--silver);border-color:rgb(185 196 209 / .2)}
.ppf .subnav a:hover{border-color:rgb(47 143 255 / .6)}
.ppf .subnav a[aria-current="page"]{background:linear-gradient(180deg,#3f9bff 0%,#0f61d4 100%);color:#f4f9ff;border-color:transparent;box-shadow:inset 0 1px 0 rgb(255 255 255 / .32)}
.ppf .intro{position:relative;isolation:isolate}
.ppf .intro::after{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;background:radial-gradient(60% 100% at 50% 0%,rgb(47 143 255 / .16),transparent 70%);pointer-events:none;z-index:-1}
.ppf .intro .wrap{padding-block:30px 20px;display:grid;gap:12px}
.ppf .lede{margin:0;color:var(--mist);max-width:62ch}
/* Preview vehicle tabs, directly above the 3D viewer */
.ppf .vpick .wrap{padding-block:4px 16px;display:grid;gap:10px}
.ppf .vtabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:620px;width:100%;background:rgb(255 255 255 / .03);border:1px solid rgb(185 196 209 / .2);border-radius:16px;padding:6px}
.ppf .vtabs button{position:relative;min-height:64px;display:grid;align-content:center;justify-items:center;gap:3px;padding:10px 12px;border:1px solid transparent;border-radius:11px;background:transparent;cursor:pointer;color:var(--mist);text-align:center;-webkit-tap-highlight-color:transparent;transition:background-color .2s,color .2s,border-color .2s}
.ppf .vtabs button b{font-family:var(--font-display);font-weight:700;font-stretch:112%;font-size:clamp(.95rem,3.6vw,1.12rem);letter-spacing:.12em;text-transform:uppercase;color:inherit;line-height:1.1}
.ppf .vtabs button span{font-size:.74rem;letter-spacing:.02em;opacity:.85}
.ppf .vtabs button:hover{color:var(--silver-bright);border-color:rgb(47 143 255 / .45)}
.ppf .vtabs button[aria-selected="true"]{background:linear-gradient(180deg,#3f9bff 0%,#0f61d4 100%);color:#f4f9ff;box-shadow:inset 0 1px 0 rgb(255 255 255 / .32),0 10px 30px -12px rgb(47 143 255 / .7)}
.ppf .vtabs button[aria-selected="true"] span{opacity:1}
.ppf .vtabs button:focus-visible{outline:2px solid var(--silver-bright);outline-offset:2px}
.ppf .vnote{font-size:.82rem;color:var(--mist);max-width:70ch}
.ppf .extras{font-size:.8rem;margin-top:-4px}
.ppf .loader[hidden]{display:none}
.ppf .stage{position:relative;height:min(58vh,620px);min-height:340px;overflow:hidden;border-block:1px solid rgb(255 255 255 / .07);
  background:radial-gradient(110% 80% at 50% 12%,#1c2632 0%,#0e141b 46%,var(--ink) 80%)}
.ppf .stage::before,.ppf .vanstage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgb(185 196 209 / .05) 1px,transparent 1px),linear-gradient(90deg,rgb(185 196 209 / .05) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 70%,#000 20%,transparent 100%);mask-image:radial-gradient(70% 55% at 50% 70%,#000 20%,transparent 100%)}
@media (max-width:640px){.ppf .stage{height:48vh;min-height:300px}}
.ppf .stage canvas{position:relative;display:block;width:100%!important;height:100%!important;touch-action:none;cursor:grab}
.ppf .stage canvas:active{cursor:grabbing}
.ppf .ov{position:absolute;pointer-events:none;z-index:2}
.ppf .chipov{background:rgb(6 8 11 / .62);border:1px solid rgb(185 196 209 / .16);border-radius:99px;backdrop-filter:blur(6px)}
.ppf .hint{left:max(16px,env(safe-area-inset-left,0px));top:14px;font-size:.78rem;color:var(--mist);padding:6px 12px;transition:opacity .6s}
.ppf .hint.gone{opacity:0}
.ppf .views{right:max(16px,env(safe-area-inset-right,0px));top:12px;display:flex;gap:6px;pointer-events:auto;flex-wrap:wrap;justify-content:flex-end}
.ppf .views button{font-family:var(--font-display);font-weight:600;font-stretch:112%;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--silver-bright);padding:7px 11px;cursor:pointer}
.ppf .views button:hover{border-color:rgb(47 143 255 / .65)}
.ppf .legend{left:max(16px,env(safe-area-inset-left,0px));bottom:12px;display:flex;gap:14px;font-size:.76rem;color:var(--mist);padding:5px 12px}
.ppf .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.ppf .legend .c i{background:#9fd8ff;box-shadow:0 0 0 2px #02050a,0 0 10px #9fd8ff}
.ppf .legend .n i{background:var(--steel-soft)}
.ppf .modelcredit{max-width:1400px;margin:0 auto;padding:6px 16px 10px;font-size:9px;line-height:1.4;text-align:right;color:var(--mist);opacity:.45}
.ppf .modelcredit a{color:inherit;text-decoration:none}
@media (max-width:640px){.ppf .hint{top:auto;bottom:84px}
.ppf .views{left:max(16px,env(safe-area-inset-left,0px));justify-content:flex-start}
.ppf .legend{bottom:48px}}
.ppf .tip{background:var(--graphite);border:1px solid rgb(255 255 255 / .1);border-radius:10px;padding:8px 11px;font-size:.84rem;line-height:1.4;transform:translate(-50%,calc(-100% - 12px));white-space:nowrap;box-shadow:var(--shadow-lift);opacity:0;transition:opacity .15s;color:var(--silver)}
.ppf .tip.on{opacity:1}
.ppf .tip b{display:block;color:var(--silver-bright);font-weight:600}
.ppf .tip .in{color:#9fd8ff}
.ppf .tip .out{color:var(--mist)}
.ppf .loader{inset:0;display:grid;place-items:center;text-align:center;color:var(--mist);font-size:.85rem;transition:opacity .5s}
.ppf .loader.done{opacity:0}
.ppf .loader .bar{width:180px;height:2px;background:var(--steel);margin:12px auto 0;overflow:hidden;border-radius:2px}
.ppf .loader .bar i{display:block;height:100%;width:0;background:var(--volt);transition:width .2s}
.ppf .err{inset:0;display:grid;place-items:center;padding:24px;text-align:center;pointer-events:auto}
.ppf .picker{background:linear-gradient(180deg,var(--carbon),var(--ink))}
.ppf .picker .wrap{padding-block:14px 22px;display:grid;gap:12px}
.ppf .pricenote{font-size:.82rem;color:var(--mist);margin:0;max-width:70ch}
.ppf .pkgs{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:12px}
@media (max-width:1100px){.ppf .pkgs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-block:2px 6px;margin-inline:calc(-1 * max(1.25rem,env(safe-area-inset-left,0px)));padding-inline:max(1.25rem,env(safe-area-inset-left,0px));scroll-padding-inline:max(1.25rem,env(safe-area-inset-left,0px));scrollbar-width:none}
.ppf .pkgs::-webkit-scrollbar{display:none}
.ppf .pkg{flex:0 0 min(60vw,220px);scroll-snap-align:start}}
.ppf .pkg{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;padding:15px 16px 16px;min-height:128px;transition:border-color .25s,box-shadow .25s}
.ppf .pkg:hover{border-color:rgb(47 143 255 / .45)}
.ppf .pkg .kick{font-family:var(--font-display);font-size:.6rem;font-weight:600;font-stretch:118%;letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
.ppf .pkg b{font-family:var(--font-display);font-weight:800;font-stretch:112%;font-size:1rem;line-height:1.1;text-transform:uppercase;letter-spacing:-.005em;color:var(--silver-bright)}
.ppf .pkg .pr{margin-top:auto;padding-top:9px;border-top:1px solid rgb(255 255 255 / .08);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.ppf .pkg .pr strong{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--silver-bright);line-height:1}
.ppf .pkg .pr strong.enq{font-size:.92rem;letter-spacing:.02em}
.ppf .pkg .pr small{font-size:.72rem;color:var(--mist)}
.ppf .pkg[aria-checked="true"]{border-color:rgb(47 143 255 / .6);background:linear-gradient(180deg,rgb(47 143 255 / .14) 0%,rgb(10 14 19 / .95) 55%,#0a0e13 100%);box-shadow:var(--shadow-volt)}
.ppf .pkg[aria-checked="true"]::before{background:linear-gradient(90deg,transparent,var(--volt),transparent)}
.ppf .pkg[aria-checked="true"] .kick{color:var(--volt)}
.ppf .console .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:28px;padding-block:8px 48px;align-items:start}
@media (max-width:900px){.ppf .console .wrap{grid-template-columns:minmax(0,1fr);gap:22px}}
.ppf .opts{display:grid;gap:22px}
.ppf .step{display:grid;gap:12px;padding-bottom:22px;border-bottom:1px solid rgb(255 255 255 / .07)}
.ppf .step:last-child{border-bottom:0;padding-bottom:0}
.ppf .step.dimmed{opacity:.6}
.ppf .lbl{font-family:var(--font-display);font-weight:700;font-stretch:112%;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--silver-bright)}
.ppf .note{font-size:.88rem;color:var(--mist);margin:0}
.ppf .seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:rgb(255 255 255 / .03);border:1px solid rgb(185 196 209 / .2);border-radius:12px;padding:4px;max-width:100%;width:max-content}
.ppf .seg button{border:0;background:transparent;border-radius:8px;padding:.7rem 1.4rem;cursor:pointer;color:var(--mist);font-family:var(--font-display);font-weight:600;font-stretch:112%;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;transition:background .2s,color .2s}
.ppf .seg button[aria-checked="true"]{background:linear-gradient(180deg,#3f9bff 0%,#0f61d4 100%);color:#f4f9ff;box-shadow:inset 0 1px 0 rgb(255 255 255 / .32)}
.ppf .seg button:disabled{opacity:.35;cursor:not-allowed}
.ppf .colourbox{display:grid;gap:4px;padding:4px 0 4px 18px;border-left:2px solid rgb(47 143 255 / .4)}
.ppf .colourbox b{font-family:var(--font-display);font-weight:700;font-stretch:112%;color:var(--silver-bright);font-size:1.15rem}
.ppf .toggle{display:flex;align-items:center;gap:12px;cursor:pointer;width:max-content;max-width:100%;font-size:.95rem;color:var(--silver)}
.ppf .toggle input{appearance:none;width:42px;height:24px;border-radius:99px;background:var(--steel);position:relative;cursor:pointer;margin:0;flex:none;transition:background .2s}
.ppf .toggle input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--silver-bright);transition:transform .2s}
.ppf .toggle input:checked{background:var(--volt)}
.ppf .toggle input:checked::after{transform:translateX(18px)}
.ppf .nar{display:grid;gap:10px;padding:18px 20px}
.ppf .nar h3{font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em}
.ppf .nar ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.ppf .nar li{display:flex;gap:12px;font-size:.9rem;flex-wrap:wrap}
.ppf .nar li span:first-child{color:var(--silver-bright);font-weight:600;min-width:9.5ch}
.ppf .nar li span:last-child{color:var(--mist);min-width:0}
.ppf .summary{padding:24px;display:grid;gap:15px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 88px)}
@media (max-width:900px){.ppf .summary{position:static}}
.ppf .sumtop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ppf .badge{font-family:var(--font-display);font-size:.6rem;font-weight:600;font-stretch:118%;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);border:1px solid rgb(240 196 106 / .45);padding:4px 10px;border-radius:99px}
.ppf .summary h2{font-size:clamp(1.6rem,3vw,2.1rem);text-transform:uppercase;letter-spacing:-.02em}
.ppf .summary p{margin:0;color:var(--mist);font-size:.95rem}
.ppf .chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.ppf .chips li{font-size:.8rem;border:1px solid rgb(47 143 255 / .35);color:#cfe3ff;background:rgb(47 143 255 / .08);padding:4px 10px;border-radius:99px}
.ppf .chips.no li{border-color:rgb(185 196 209 / .2);color:var(--mist);background:transparent}
.ppf .sublbl{font-family:var(--font-display);font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin:0}
.ppf .spec{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 16px;margin:0;font-size:.9rem;border-top:1px solid rgb(255 255 255 / .08);padding-top:14px}
.ppf .spec dt{color:var(--mist)}
.ppf .spec dd{margin:0;text-align:right;color:var(--silver-bright)}
.ppf .price{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-top:1px solid rgb(255 255 255 / .08);padding-top:14px}
.ppf .price span{color:var(--mist);font-size:.85rem}
.ppf .price strong{font-family:var(--font-display);font-weight:800;font-stretch:112%;font-size:2rem;line-height:1;color:var(--silver-bright);text-align:right}
.ppf .price strong small{font-size:.8rem;font-weight:600;color:var(--mist);letter-spacing:.06em;margin-left:6px}
.ppf .price strong.enq{font-size:1.2rem}
.ppf .fine{font-size:.78rem;color:var(--mist);margin:0;border-left:2px solid rgb(255 255 255 / .15);padding-left:12px}
.ppf .w100{width:100%}
.ppf .confirm{margin:0;font-size:.84rem;color:var(--silver);display:flex;gap:8px;align-items:center}
.ppf .confirm::before{content:"";flex:none;width:6px;height:6px;transform:rotate(45deg);background:var(--volt)}
.ppf .vanwrap .wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px;align-items:start;padding-block:4px 48px}
@media (max-width:980px){.ppf .vanwrap .wrap{grid-template-columns:minmax(0,1fr);gap:18px}}
.ppf .vanstage{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgb(255 255 255 / .07);
  background:radial-gradient(90% 70% at 55% 35%,#1c2632 0%,#0e141b 50%,var(--ink) 85%)}
.ppf .vanstage svg{position:relative;display:block;width:100%;height:auto}
.ppf .zone{cursor:pointer;transition:fill-opacity .35s,stroke-opacity .35s}
.ppf .zone .fill{fill:#6fbfff;fill-opacity:0}
.ppf .zone .edge{fill:none;stroke:#cfe8ff;stroke-width:2;stroke-opacity:.35;stroke-dasharray:7 6;vector-effect:non-scaling-stroke}
.ppf .zone:hover .fill{fill-opacity:.14}
.ppf .zone.on .fill{fill-opacity:.42}
.ppf .zone.on .edge{stroke:#e9f5ff;stroke-opacity:.95;stroke-dasharray:none;stroke-width:2.5}
.ppf .zone:focus-visible{outline:none}
.ppf .zone:focus-visible .edge{stroke:var(--volt);stroke-opacity:1;stroke-width:3}
@media (prefers-reduced-motion:no-preference){.ppf .zone.pulse .fill{animation:zp 1.1s ease-in-out 2}}
@keyframes zp{50%{fill-opacity:.62}}
.ppf .vanlegend{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--mist);padding:12px 4px 0}
.ppf .vanlegend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.ppf .vanlegend .c i{background:rgb(111 191 255 / .55);border:1px solid #e9f5ff}
.ppf .vanlegend .a i{border:1px dashed rgb(207 232 255 / .6)}
.ppf .zone.cer{pointer-events:none}
.ppf .zone.cer .fill{fill:url(#hatch)}
.ppf .zone.cer .fill{fill-opacity:1;opacity:0;transition:opacity .35s}
.ppf .zone.cer.on .fill{opacity:1}
.ppf .zone.win .fill{fill:#b9a6ff}
.ppf .zone.win .edge{stroke:#e6dcff;stroke-dasharray:4 4}
.ppf .zone.win{display:none}
.ppf .zone.win.show{display:inline}
.ppf .zone.win.show .fill{fill-opacity:.38}
.ppf .zone.win.show .edge{stroke-opacity:.9}
.ppf .vanlegend .k i{background:repeating-linear-gradient(45deg,rgb(246 214 143 / .7) 0 3px,rgb(240 196 106 / .25) 3px 8px)}
.ppf .topcoat{pointer-events:none}
.ppf .topcoat .fill{fill:url(#hatchTop);opacity:0;transition:opacity .35s}
.ppf .topcoat.on .fill{opacity:1}
.ppf .vanlegend .t i{background:repeating-linear-gradient(-45deg,rgb(246 214 143 / .9) 0 2px,rgb(111 191 255 / .55) 2px 6px);border:1px solid #e9f5ff}
.ppf .vanlegend .w i{background:rgb(185 166 255 / .5);border:1px dashed #e6dcff}
.ppf .winbox{display:grid;gap:10px;padding:16px 18px;margin-top:14px}
.ppf .step .winbox:first-child{margin-top:0}
.ppf .xlink{display:grid;gap:4px;margin-top:4px;padding:14px 16px;border:1px solid rgb(47 143 255 / .35);border-radius:12px;background:rgb(47 143 255 / .06);text-decoration:none;transition:border-color .25s,background .25s}
.ppf .xlink:hover{border-color:rgb(47 143 255 / .7);background:rgb(47 143 255 / .1)}
.ppf .xlink b{font-family:var(--font-display);font-weight:700;font-stretch:112%;text-transform:uppercase;color:var(--silver-bright);font-size:1rem}
.ppf .xlink span:last-child{font-size:.86rem;color:var(--mist)}
.ppf .cerhero .wrap{display:grid;gap:14px;padding-block:0 8px}
.ppf .cerstage{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgb(255 255 255 / .07);padding:clamp(12px,3vw,36px) clamp(8px,3vw,40px) clamp(18px,3vw,40px);
  background:radial-gradient(80% 70% at 55% 40%,#1c2632 0%,#0e141b 52%,var(--ink) 88%)}
.ppf .cerstage::after{content:"";position:absolute;left:12%;right:6%;bottom:6%;height:9%;background:radial-gradient(50% 50% at 50% 50%,rgb(0 0 0 / .75),transparent 72%);pointer-events:none}
.ppf .cerstage img{position:relative;z-index:1;display:block;width:100%;height:auto;max-width:1100px;margin:0 auto;aspect-ratio:1880/1210}
.ppf .cerstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ppf .stat{display:grid;gap:2px;padding:16px 18px}
.ppf .stat strong{font-family:var(--font-display);font-weight:800;font-stretch:112%;font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.05;color:var(--silver-bright);text-transform:uppercase}
.ppf .stat span:last-child{font-size:.86rem;color:var(--mist)}
.ppf .cerpkgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:520px){.ppf .cerpkgs{grid-template-columns:minmax(0,1fr)}}
.ppf .cerpkgs .pkg{min-height:0}
.ppf .pkg .sub{font-size:.8rem;color:var(--mist)}
.ppf .ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
@media (max-width:440px){.ppf .ticks{grid-template-columns:minmax(0,1fr)}}
.ppf .ticks li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--silver)}
.ppf .ticks li::before{content:"";flex:none;width:14px;height:8px;margin-top:6px;border-left:2px solid var(--volt);border-bottom:2px solid var(--volt);transform:rotate(-45deg)}
.ppf .plus{font-size:.75rem;letter-spacing:.08em;color:var(--volt);border:1px solid rgb(47 143 255 / .5);border-radius:99px;padding:2px 9px;margin-left:8px;vertical-align:2px}
.ppf .breakdown{border-top:1px dashed rgb(255 255 255 / .12)}
.ppf .gallery .wrap{padding-block:8px 56px;display:grid;gap:20px}
.ppf .galhead{display:grid;gap:10px}
.ppf .galhead h2{font-size:clamp(1.6rem,3.6vw,2.6rem)}
.ppf .ggrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.ppf .ggrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.ppf .gtile{position:relative;display:block;width:100%;padding:0;border:1px solid rgb(255 255 255 / .08);border-radius:14px;overflow:hidden;cursor:zoom-in;background:var(--graphite);aspect-ratio:4/5}
.ppf .gtile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.ppf .gtile:hover img{transform:scale(1.04)}
.ppf .gcap{position:absolute;inset:auto 0 0 0;display:grid;gap:1px;text-align:left;padding:28px 12px 10px;background:linear-gradient(180deg,transparent,rgb(6 8 11 / .9))}
.ppf .gcap b{font-family:var(--font-display);font-weight:700;font-stretch:112%;font-size:.86rem;color:var(--silver-bright);line-height:1.2}
.ppf .gcap small{font-family:var(--font-display);font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--volt)}
.ppf .galcta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ppf .lb{position:fixed;inset:0;z-index:80;background:rgb(3 5 8 / .94);display:grid;grid-template-rows:auto 1fr auto;padding:calc(env(safe-area-inset-top,0px) + 12px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 14px) max(16px,env(safe-area-inset-left,0px))}
.ppf .lb[hidden]{display:none}
.ppf .lbtop{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ppf .lbtop p{margin:0;font-size:.9rem;color:var(--silver)}
.ppf .lbtop p b{color:var(--silver-bright)}
.ppf .lb img{max-width:100%;max-height:100%;margin:auto;object-fit:contain;align-self:center;justify-self:center;min-height:0;border-radius:10px}
.ppf .lbnav{display:flex;justify-content:center;gap:10px}
.ppf .lb .btn{padding:.7rem 1.1rem}
.ppf .winbox b{color:var(--silver-bright);font-weight:600}
.ppf .vanpkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.ppf .vanpkgs .pkg:last-child{grid-column:1/-1;min-height:0}
@media (max-width:560px){.ppf .vanpkgs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ppf .vanpkgs .pkg:last-child{grid-column:1/-1;min-height:0}}
@media (min-width:981px) and (max-width:1199px){.ppf .vanpkgs{grid-template-columns:repeat(2,minmax(0,1fr))}
.ppf .vanpkgs .pkg:last-child{grid-column:1/-1}}
.ppf .vanpkgs .pkg{min-height:118px;flex:auto}
.ppf .enq .wrap{padding-block:0 56px}
.ppf .enqbox{padding:clamp(20px,4vw,36px);display:grid;gap:22px}
.ppf .enqhead{display:grid;gap:10px}
.ppf .enqhead h2{font-size:clamp(1.6rem,3.6vw,2.6rem)}
.ppf .enqsum{font-size:.92rem;color:var(--mist);margin:0}
.ppf .enqsum b{color:var(--silver-bright);font-weight:600}
.ppf fieldset{border:0;margin:0;padding:0;display:grid;gap:14px;min-width:0}
.ppf legend{padding:0;margin-bottom:12px}
.ppf .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ppf .grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ppf .grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.ppf .grid,.ppf .grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.ppf .grid,.ppf .grid.c3,.ppf .grid.c2{grid-template-columns:minmax(0,1fr)}}
.ppf .f{min-width:0}
.ppf .check{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;cursor:pointer}
.ppf .check input{width:18px;height:18px;margin-top:3px;accent-color:var(--volt);flex:none}
.ppf .err-msg{color:#ef8a80;font-size:.88rem;margin:0}
.ppf .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ppf #sendBtn[disabled]{opacity:.7;cursor:progress}
.ppf .actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ppf .done{border:1px solid rgb(92 194 143 / .4);background:rgb(92 194 143 / .07);border-radius:12px;padding:16px 18px;display:grid;gap:6px}
.ppf .done b{color:var(--ok);font-family:var(--font-display);font-stretch:112%;text-transform:uppercase;letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){.ppf *::before,.ppf *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ================= Ceramic page: "What's Included" explorer (.ppf.embed.wi) ================= */
.ppf.embed{padding-top:0}
.ppf.wi{display:grid;gap:16px}
.ppf .wi-tabs{margin-inline:auto}
.ppf .wi-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
@media (max-width:960px){.ppf .wi-grid{grid-template-columns:minmax(0,1fr)}}
.ppf .wi-stage{height:clamp(320px,52vh,520px);min-height:0;border:1px solid rgb(255 255 255 / .08);border-radius:18px}
@media (max-width:640px){.ppf .wi-stage{height:clamp(260px,72vw,340px)}}
.ppf .wi-side,.ppf .wi-mode{display:grid;gap:14px;align-content:start}
/* controls card */
.ppf .wi-ctrl{display:grid;gap:14px;padding:16px;border-radius:16px;background:#0d1218;border:1px solid rgb(185 196 209 / .14)}
.ppf .wi-ctrl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ppf .wi-ctrl-title{font-family:var(--font-display);font-size:.64rem;font-weight:600;font-stretch:118%;letter-spacing:.2em;text-transform:uppercase;color:var(--silver);margin:0}
.ppf .wi-group{display:grid;gap:8px;padding-top:12px;border-top:1px solid rgb(255 255 255 / .07)}
.ppf .wi-gh{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:.78rem;color:var(--mist)}
.ppf .wi-areas{display:flex;flex-wrap:wrap;gap:8px}
.ppf .wi-area{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 14px;border-radius:12px;border:1px solid rgb(185 196 209 / .22);background:#141b24;color:var(--silver-bright);cursor:pointer;font-size:.9rem;line-height:1.2;text-align:left;-webkit-tap-highlight-color:transparent;transition:background-color .2s,border-color .2s,box-shadow .2s}
.ppf .wi-area i{width:14px;height:14px;border-radius:4px;flex:none;background:var(--c);box-shadow:0 0 0 2px #02050a}
.ppf .wi-area:hover{border-color:var(--c,rgb(47 143 255 / .6))}
.ppf .wi-area:focus-visible{outline:2px solid var(--silver-bright);outline-offset:2px}
.ppf .wi-area[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,#141b24);box-shadow:inset 0 0 0 1px var(--c)}
.ppf .wi-area.all{min-height:40px;padding:6px 14px;border-radius:99px;font-family:var(--font-display);font-weight:600;font-stretch:112%;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;background:transparent}
.ppf .wi-area.all[aria-pressed="true"]{background:linear-gradient(180deg,#3f9bff 0%,#0f61d4 100%);color:#f4f9ff;border-color:transparent;box-shadow:inset 0 1px 0 rgb(255 255 255 / .3)}
/* details card */
.ppf .wi-info{display:grid;gap:10px;padding:18px 20px;border-radius:16px;background:#161d26;border:1px solid rgb(185 196 209 / .14)}
.ppf .wi-info>div{display:grid;gap:8px;justify-items:start}
.ppf .wi-info>div[data-wi-info]:not([data-wi-info="all"]){border-left:4px solid var(--c);padding-left:14px;margin-left:-6px}
.ppf .wi-info h4{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-stretch:112%;font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;color:var(--silver-bright);margin:0}
.ppf .wi-info h4 i{width:14px;height:14px;border-radius:4px;background:var(--c);box-shadow:0 0 0 2px #02050a}
.ppf .wi-info p{margin:0;color:var(--silver);font-size:.94rem;line-height:1.55}
.ppf .wi-info p.note{font-size:.82rem;color:var(--mist)}
.ppf .wi-info .wi-note{padding-top:10px;border-top:1px solid rgb(255 255 255 / .07)}
.ppf .wi-tag{display:inline-block;font-family:var(--font-display);font-size:.6rem;font-weight:600;font-stretch:118%;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;border-radius:99px;white-space:nowrap}
.ppf .wi-tag.main{background:#0f61d4;color:#f4f9ff}
.ppf .wi-tag.extra{border:1px solid var(--amber);color:var(--amber)}
/* in-viewer colour legend (larger screens; on phones the colour key sits right below) */
.ppf .wi-key{left:max(12px,env(safe-area-inset-left,0px));bottom:12px;display:flex;flex-wrap:wrap;gap:6px 14px;max-width:calc(100% - 24px);margin:0;padding:6px 12px;list-style:none;font-size:.74rem;color:var(--silver);border-radius:12px}
.ppf .wi-key li{display:flex;align-items:center;gap:6px;transition:opacity .25s}
.ppf .wi-key li.dim{opacity:.35}
.ppf .wi-key i{width:10px;height:10px;border-radius:3px;background:var(--c);box-shadow:0 0 0 2px #02050a}
.ppf .wi-stage .hint{top:12px}
@media (max-width:640px){.ppf .wi-key{display:none}.ppf .wi-stage .hint{top:10px;bottom:auto;font-size:.72rem;padding:5px 10px}}
.ppf .wi-preview-note{font-size:.8rem;color:var(--mist);text-align:center;max-width:70ch;margin-inline:auto}
.ppf.wi .modelcredit{text-align:center;padding:0 0 4px}

/* Car PPF: summary exclusions (Off-Road Bush Pack) */
.ppf #cNoWrap{display:grid;gap:8px}
/* Car PPF: 200+ colours section with the colour sample video */
.ppf .colours .wrap{padding-block:8px 28px}
.ppf .colgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(18px,3vw,40px);align-items:center;padding:clamp(18px,3vw,32px);border-radius:20px}
@media (max-width:860px){.ppf .colgrid{grid-template-columns:minmax(0,1fr)}}
.ppf .coltext{display:grid;gap:12px;justify-items:start}
.ppf .coltext h2{font-size:clamp(1.5rem,3.6vw,2.3rem);text-transform:uppercase}
.ppf .colprice{font-size:.9rem;color:var(--mist);margin:0}
.ppf .colprice strong{font-family:var(--font-display);font-size:1.35rem;color:var(--silver-bright);font-weight:800}
.ppf .colvid{margin:0;display:grid;gap:10px}
.ppf .colvid figcaption{font-size:.8rem;color:var(--mist);line-height:1.5}
.ppf .vidbox{position:relative;width:100%;max-height:70vh;border-radius:14px;overflow:hidden;background:#05070a center/cover no-repeat;border:1px solid rgb(255 255 255 / .08)}
.ppf .vidbox video{display:block;width:100%;height:100%;object-fit:cover;background:#05070a}
.ppf .vidplay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;border:0;background:linear-gradient(180deg,rgb(6 8 11 / .05),rgb(6 8 11 / .55));color:var(--silver-bright);cursor:pointer;font-family:var(--font-display);font-weight:600;font-stretch:112%;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}
.ppf .vidplay .ico{width:64px;height:64px;border-radius:50%;background:linear-gradient(180deg,#3f9bff,#0f61d4);box-shadow:0 10px 30px -10px rgb(47 143 255 / .8);position:relative}
.ppf .vidplay .ico::after{content:"";position:absolute;left:26px;top:20px;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.ppf .vidplay:focus-visible{outline:2px solid var(--silver-bright);outline-offset:-4px}
.ppf .vidbox.pending{border-style:dashed;background:repeating-linear-gradient(135deg,rgb(255 255 255 / .02) 0 12px,transparent 12px 24px),#070a0e}
.ppf .vidbox.pending .vidplay{cursor:default;color:var(--mist)}
.ppf .vidbox.pending .ico{opacity:.35;box-shadow:none}
.ppf .tip .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:0;box-shadow:0 0 0 2px #02050a}
/* portrait colour video: keep it compact and centred */
.ppf .vidbox.portrait{width:min(100%,340px,calc(58vh * 9 / 16));margin-inline:auto}
@media (max-width:860px){.ppf .vidbox.portrait{width:min(78%,300px,calc(56vh * 9 / 16))}}
.ppf .colvid figcaption{text-align:center}