/* =============================================================================
   site.css — powerindex.co.uk public experience. Dark luxury, custom, no
   framework. Only transform/opacity/filter/clip-path are animated.
   ============================================================================= */
:root{
  --bg:#05060A; --bg-2:#0A0C12; --panel:rgba(20,23,31,.62); --panel-2:rgba(28,32,42,.7);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --ink:#F4F6FA; --ink-2:#AEB4C0; --ink-3:#6C7280;
  --accent:#FF4D2E; --accent-2:#FF7A3C; --cyan:#3CE1FF; --violet:#8B5CF6;
  --grad:linear-gradient(100deg,#FF4D2E,#FF8A3C 55%,#FFB23C);
  --grad-cool:linear-gradient(120deg,#3CE1FF,#8B5CF6);
  --disp:'Space Grotesk',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1); --r:16px; --maxw:1200px;
}
*{box-sizing:border-box} html,body{margin:0} html{scrollbar-color:#2a2e38 #05060A}
body{background:var(--bg); color:var(--ink); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
::selection{background:rgba(255,77,46,.3)}

/* background layers -------------------------------------------------------- */
#pi-bg{position:fixed; inset:0; width:100%; height:100%; z-index:-3; display:block}
body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 42% at 50% -8%, rgba(255,77,46,.16), transparent 60%),
    radial-gradient(50% 40% at 88% 12%, rgba(60,225,255,.08), transparent 60%),
    radial-gradient(55% 45% at 10% 30%, rgba(139,92,246,.07), transparent 60%),
    linear-gradient(180deg,#05060A, #05060A 40%, #070810);}
.pi-grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* loader ------------------------------------------------------------------- */
#pi-loader{position:fixed; inset:0; z-index:200; background:#04050A; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px}
html:not(.js) #pi-loader{display:none}
.pi-loader__mark{font-family:var(--disp); font-weight:700; letter-spacing:.28em; font-size:.9rem; opacity:.9}
.pi-loader__mark span{color:var(--accent)}
.pi-loader__bar{width:140px; height:2px; background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden}
.pi-loader__bar span{display:block; height:100%; width:0; background:var(--grad)}

/* nav ---------------------------------------------------------------------- */
.pi-nav{position:fixed; top:0; left:0; right:0; z-index:120; display:flex; align-items:center; gap:20px;
  padding:18px clamp(16px,4vw,40px); transition:padding .4s var(--ease), background .4s, border-color .4s;
  background:linear-gradient(180deg, rgba(5,6,10,.92) 0%, rgba(5,6,10,.55) 55%, rgba(5,6,10,0) 100%)}
.pi-nav.scrolled{padding:12px clamp(16px,4vw,40px); background:rgba(7,8,13,.82); backdrop-filter:blur(16px); border-bottom:1px solid var(--line)}
.pi-logo{display:inline-flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:700; letter-spacing:.16em; font-size:.82rem; text-transform:uppercase}
.pi-logo i{color:var(--accent); font-style:normal}
.pi-logo__dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent)}
.pi-nav__links{margin-left:auto; display:none; gap:26px; font-size:.9rem}
.pi-nav__links a{color:var(--ink-2); transition:color .2s} .pi-nav__links a:hover{color:var(--ink)}
@media(min-width:860px){.pi-nav__links{display:flex}}

/* buttons ------------------------------------------------------------------ */
.pi-btn{position:relative; display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:600;
  font-size:.95rem; color:#0A0507; background:var(--grad); border:0; border-radius:100px; padding:13px 24px; cursor:pointer;
  overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s; box-shadow:0 6px 26px rgba(255,77,46,.28)}
.pi-btn:hover{box-shadow:0 10px 40px rgba(255,77,46,.45)}
.pi-btn--sm{padding:10px 18px; font-size:.86rem; margin-left:auto}
@media(min-width:860px){.pi-btn--sm{margin-left:0}}
.pi-btn--ghost{background:transparent; color:var(--ink); border:1px solid var(--line-2); box-shadow:none}
.pi-btn--ghost:hover{border-color:var(--ink); box-shadow:none}
.pi-btn__arrow{transition:transform .3s var(--ease)} .pi-btn:hover .pi-btn__arrow{transform:translateX(4px)}

/* layout ------------------------------------------------------------------- */
.pi-section{position:relative; max-width:var(--maxw); margin:0 auto; padding:clamp(50px,7vw,100px) clamp(18px,4vw,40px)}
.pi-kicker{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:18px}
.pi-kicker::before{content:""; width:26px; height:1px; background:var(--accent)}
.pi-h2{font-family:var(--disp); font-weight:600; font-size:clamp(1.9rem,4.6vw,3.2rem); letter-spacing:-.02em; line-height:1.05; margin:0 0 18px}
.pi-lead{color:var(--ink-2); font-size:clamp(1rem,1.6vw,1.15rem); max-width:60ch; margin:0}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.grad-cool{background:var(--grad-cool); -webkit-background-clip:text; background-clip:text; color:transparent}

/* reveal — visible by DEFAULT; only hidden once JS confirms it can reveal them */
.pi-reveal{opacity:1; transform:none}
html.reveal-on .pi-reveal{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
html.reveal-on .pi-reveal.in{opacity:1; transform:none}
/* hero pre-hidden state only when GSAP intro is running (html.anim), else visible */
html.anim .pi-eyebrow, html.anim .pi-sub, html.anim .pi-search, html.anim .pi-search__go{opacity:0}
html.anim .pi-h1[data-split]{visibility:hidden}

/* HERO --------------------------------------------------------------------- */
.pi-hero{position:relative; min-height:100svh; display:flex; align-items:center; padding:120px clamp(18px,4vw,40px) 60px;
  max-width:var(--maxw); margin:0 auto}
.pi-hero__inner{width:100%}
.pi-eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line); border-radius:100px; padding:7px 15px; margin-bottom:26px;
  background:rgba(255,255,255,.02)}
.pi-eyebrow b{color:var(--accent)}
.pi-h1{font-family:var(--disp); font-weight:700; font-size:clamp(2.6rem,8vw,6rem); line-height:.98; letter-spacing:-.03em; margin:0 0 22px; max-width:16ch}
.pi-h1 .word{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em}
.pi-h1 .char{display:inline-block; will-change:transform,opacity}
.pi-sub{color:var(--ink-2); font-size:clamp(1.05rem,2vw,1.3rem); max-width:52ch; margin:0 0 40px}

/* THE SEARCH BOX (the star) ------------------------------------------------ */
.pi-search{position:relative; max-width:760px; border-radius:22px; padding:2px; isolation:isolate}
.pi-search::before{content:""; position:absolute; inset:-1px; border-radius:23px; z-index:-1; padding:1px;
  background:conic-gradient(from var(--ang,0deg), rgba(255,77,46,.0), rgba(255,77,46,.8), rgba(60,225,255,.6), rgba(255,77,46,.0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.9; animation:piSpin 6s linear infinite}
@property --ang{syntax:'<angle>'; inherits:false; initial-value:0deg}
@keyframes piSpin{to{--ang:360deg}}
.pi-search__inner{background:rgba(12,14,20,.86); backdrop-filter:blur(20px); border:1px solid var(--line); border-radius:21px;
  padding:clamp(16px,2.4vw,26px); box-shadow:0 30px 80px rgba(0,0,0,.5)}
.pi-tabs{display:inline-flex; gap:4px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:100px; padding:4px; margin-bottom:18px}
.pi-tab{border:0; background:none; cursor:pointer; color:var(--ink-2); font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; padding:9px 16px; border-radius:100px; transition:.25s var(--ease)}
.pi-tab.active{background:var(--ink); color:#07080C}
.pi-pane{display:none} .pi-pane.active{display:block; animation:piFade .4s var(--ease) both}
@keyframes piFade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.pi-reg-row{display:flex; gap:12px; flex-wrap:wrap}
.pi-plate{flex:1; min-width:220px; display:flex; align-items:center; gap:12px; background:#FFDB2D; border-radius:12px; padding:0 16px;
  border:2px solid #E7C400}
.pi-plate .gb{font-family:var(--disp); font-weight:700; color:#fff; background:#0B57D0; align-self:stretch; display:flex; align-items:center;
  padding:0 8px; margin:6px 0; margin-left:-16px; border-radius:8px 0 0 8px; font-size:.8rem; letter-spacing:.05em}
.pi-plate input{flex:1; background:none; border:0; outline:none; color:#0A0A0A; font-family:var(--disp); font-weight:700;
  font-size:clamp(1.3rem,3.5vw,1.9rem); letter-spacing:.08em; text-transform:uppercase; padding:14px 0}
.pi-plate input::placeholder{color:rgba(0,0,0,.35)}

.pi-fields{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
@media(max-width:640px){.pi-fields{grid-template-columns:1fr}}
.pi-field{position:relative}
.pi-field label{display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px}
.pi-select{width:100%; appearance:none; -webkit-appearance:none; background:rgba(255,255,255,.03)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236C7280' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--line-2); border-radius:11px; color:var(--ink); padding:13px 34px 13px 14px; font-family:var(--body); font-size:.95rem;
  cursor:pointer; transition:border-color .2s, box-shadow .2s}
.pi-select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,77,46,.18)}
.pi-select:disabled{opacity:.45; cursor:not-allowed}
.pi-search__go{margin-top:16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.pi-hint{font-size:.8rem; color:var(--ink-3)} .pi-hint b{color:var(--ink-2)}

/* results ------------------------------------------------------------------ */
.pi-results{margin-top:18px; display:grid; gap:10px}
.pi-result{display:flex; align-items:center; gap:16px; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; transition:border-color .25s, transform .25s var(--ease); will-change:transform,opacity}
.pi-result:hover{border-color:var(--line-2); transform:translateX(4px)}
.pi-result__ico{width:42px; height:42px; border-radius:11px; background:var(--grad); display:flex; align-items:center; justify-content:center; flex:none; color:#0A0507; font-weight:700}
.pi-result__t{font-weight:600} .pi-result__s{font-size:.8rem; color:var(--ink-3)}
.pi-result__go{margin-left:auto; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--accent)}

/* STATS -------------------------------------------------------------------- */
.pi-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(40px,6vw,64px) 0}
@media(min-width:820px){.pi-stats{grid-template-columns:repeat(4,1fr)}}
.pi-stat__num{font-family:var(--mono); font-weight:700; font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:-.02em; line-height:1}
.pi-stat__label{color:var(--ink-3); font-size:.86rem; margin-top:8px}

/* STEPS -------------------------------------------------------------------- */
.pi-steps{display:grid; grid-template-columns:1fr; gap:16px; margin-top:44px}
@media(min-width:820px){.pi-steps{grid-template-columns:repeat(3,1fr)}}
.pi-step{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; overflow:hidden}
.pi-step__n{font-family:var(--mono); font-size:.72rem; color:var(--accent); letter-spacing:.1em}
.pi-step h3{font-family:var(--disp); font-size:1.25rem; margin:14px 0 8px}
.pi-step p{color:var(--ink-2); font-size:.92rem; margin:0}

/* FEATURED ----------------------------------------------------------------- */
.pi-feat-grid{display:grid; grid-template-columns:1fr; gap:14px; margin-top:40px}
@media(min-width:640px){.pi-feat-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.pi-feat-grid{grid-template-columns:1fr 1fr 1fr}}
.pi-feat{position:relative; display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; overflow:hidden; transition:transform .35s var(--ease), border-color .35s; will-change:transform}
.pi-feat:hover{transform:translateY(-4px); border-color:var(--line-2)}
.pi-feat__glow{position:absolute; inset:0; opacity:0; transition:opacity .4s; background:radial-gradient(60% 60% at var(--mx,50%) var(--my,0%), rgba(255,77,46,.14), transparent 60%)}
.pi-feat:hover .pi-feat__glow{opacity:1}
.pi-feat__make{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.pi-feat__name{font-family:var(--disp); font-size:1.2rem; font-weight:600; margin:8px 0 4px}
.pi-feat__eng{color:var(--ink-3); font-size:.84rem}
.pi-feat__row{display:flex; align-items:baseline; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.pi-feat__gain{font-family:var(--mono); font-weight:700; font-size:1.3rem; color:var(--ink)} .pi-feat__gain span{color:var(--accent)}
.pi-feat__u{font-size:.76rem; color:var(--ink-3)}
.pi-feat__go{margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--accent)}

/* GARAGES ------------------------------------------------------------------ */
.pi-garages{position:relative; background:linear-gradient(180deg, rgba(255,77,46,.06), rgba(255,77,46,.02)); border:1px solid var(--line);
  border-radius:26px; padding:clamp(30px,5vw,60px); overflow:hidden; margin:0 auto; max-width:var(--maxw)}
.pi-garages__grid{display:grid; grid-template-columns:1fr; gap:34px; align-items:center}
@media(min-width:900px){.pi-garages__grid{grid-template-columns:1.05fr .95fr}}
.pi-garages ul{list-style:none; padding:0; margin:22px 0 28px; display:grid; gap:11px}
.pi-garages li{position:relative; padding-left:28px; color:var(--ink-2); font-size:.95rem}
.pi-garages li::before{content:"✦"; position:absolute; left:0; color:var(--accent)}
.pi-widgetbox{background:#0C0D11; border:1px solid var(--line); border-radius:18px; padding:12px; box-shadow:0 30px 70px rgba(0,0,0,.45)}
.pi-widgetbox__bar{display:flex; gap:6px; padding:6px 8px 12px}
.pi-widgetbox__bar i{width:9px; height:9px; border-radius:50%; background:#2a2e38}
.pi-widgetbox iframe{width:100%; border:0; display:block; background:transparent; border-radius:10px}

/* ============================ VEHICLE PAGE ================================= */
.pi-veh{max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,40px)}
.pi-veh-hero{padding:130px 0 40px}
.pi-crumbs{display:flex; flex-wrap:wrap; gap:8px; font-family:var(--mono); font-size:.72rem; color:var(--ink-3); margin-bottom:22px}
.pi-crumbs a{color:var(--ink-3)} .pi-crumbs a:hover{color:var(--accent)} .pi-crumbs span{color:var(--ink-3)}
.pi-veh-title{font-family:var(--disp); font-weight:700; font-size:clamp(2.1rem,5.5vw,4rem); line-height:1; letter-spacing:-.03em; margin:0 0 12px}
.pi-veh-sub{color:var(--ink-2); font-size:clamp(1rem,1.8vw,1.2rem); margin:0 0 6px}
.pi-veh-stock{display:flex; flex-wrap:wrap; gap:22px; margin-top:20px; font-family:var(--mono); font-size:.86rem; color:var(--ink-3)}
.pi-veh-stock b{color:var(--ink); font-weight:700}

.pi-stage-cards{display:grid; grid-template-columns:1fr; gap:14px; margin:34px 0}
@media(min-width:720px){.pi-stage-cards{grid-template-columns:repeat(3,1fr)}}
.pi-stage-card{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:24px; overflow:hidden}
.pi-stage-card--best{border-color:rgba(255,77,46,.4); background:linear-gradient(180deg, rgba(255,77,46,.08), var(--panel))}
.pi-stage-card__k{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.pi-odo-wrap{display:flex; align-items:baseline; gap:8px; margin:14px 0 4px}
.pi-odo{font-family:var(--mono); font-weight:700; font-size:clamp(2.4rem,6vw,3.2rem); letter-spacing:-.02em; line-height:1; color:var(--ink)}
.pi-stage-card__u{font-size:.86rem; color:var(--ink-3)}
.pi-stage-card__gain{font-family:var(--mono); font-weight:700; color:var(--accent); font-size:1rem}
.pi-stage-card__meta{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:7px; font-size:.84rem; color:var(--ink-2)}
.pi-stage-card__meta span b{color:var(--ink); font-family:var(--mono)}

/* dyno --------------------------------------------------------------------- */
.pi-dyno{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,3vw,30px); margin:12px 0 40px}
.pi-dyno__head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px}
.pi-dyno__title{font-family:var(--disp); font-size:1.3rem; font-weight:600}
.pi-legend{display:flex; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:.72rem; color:var(--ink-2)}
.pi-legend i{display:inline-block; width:20px; height:2px; margin-right:7px; vertical-align:middle; border-radius:2px}
.pi-dyno svg{width:100%; height:auto; display:block; overflow:visible}
.pi-dyno .grid line{stroke:rgba(255,255,255,.06); stroke-width:1}
.pi-dyno .curve{fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.pi-dyno .curve--stock{stroke:var(--ink-3); stroke-dasharray:5 6; opacity:.7}
.pi-dyno .curve--ptuned{stroke:var(--accent); filter:drop-shadow(0 0 8px rgba(255,77,46,.45))}
.pi-dyno .curve--ttuned{stroke:var(--cyan); filter:drop-shadow(0 0 8px rgba(60,225,255,.35))}
.pi-dyno .axis-lbl{fill:var(--ink-3); font-family:var(--mono); font-size:13px}

/* spec table --------------------------------------------------------------- */
.pi-spec{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:12px 0 40px}
.pi-spec table{width:100%; border-collapse:collapse; min-width:560px}
.pi-spec-scroll{overflow-x:auto}
.pi-spec th,.pi-spec td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:.9rem}
.pi-spec thead th{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
.pi-spec tbody th{font-weight:600; color:var(--ink)}
.pi-spec td{font-family:var(--mono); color:var(--ink-2)}
.pi-spec td b{color:var(--ink)} .pi-spec tr:last-child td,.pi-spec tr:last-child th{border-bottom:0}
.pi-spec .up{color:var(--accent)}

/* includes ----------------------------------------------------------------- */
.pi-includes{display:grid; grid-template-columns:1fr; gap:14px; margin:12px 0 40px}
@media(min-width:640px){.pi-includes{grid-template-columns:1fr 1fr}}
.pi-inc{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 22px}
.pi-inc h4{font-family:var(--disp); font-size:1.05rem; margin:0 0 7px}
.pi-inc p{color:var(--ink-2); font-size:.88rem; margin:0}
.pi-hardware{background:linear-gradient(180deg, rgba(60,225,255,.05), transparent); border:1px solid var(--line);
  border-left:2px solid var(--cyan); border-radius:12px; padding:20px 22px; margin:0 0 40px}
.pi-hardware h4{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin:0 0 8px}
.pi-hardware p{color:var(--ink-2); font-size:.9rem; margin:0}

/* accordion ---------------------------------------------------------------- */
.pi-acc{border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:10px; background:var(--panel)}
.pi-acc__q{width:100%; text-align:left; background:none; border:0; cursor:pointer; color:var(--ink); font-family:var(--body);
  font-weight:600; font-size:1rem; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px}
.pi-acc__q .pi-acc__ic{flex:none; width:22px; height:22px; position:relative; transition:transform .3s var(--ease)}
.pi-acc__q .pi-acc__ic::before,.pi-acc__q .pi-acc__ic::after{content:""; position:absolute; background:var(--accent); border-radius:2px}
.pi-acc__q .pi-acc__ic::before{top:10px; left:3px; right:3px; height:2px}
.pi-acc__q .pi-acc__ic::after{left:10px; top:3px; bottom:3px; width:2px; transition:transform .3s var(--ease)}
.pi-acc.open .pi-acc__ic::after{transform:scaleY(0)}
.pi-acc__a{overflow:hidden; height:0}
.pi-acc__a p{color:var(--ink-2); font-size:.92rem; padding:0 22px 20px; margin:0}

/* related ------------------------------------------------------------------ */
.pi-related{display:grid; grid-template-columns:1fr; gap:12px; margin-top:34px}
@media(min-width:640px){.pi-related{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.pi-related{grid-template-columns:1fr 1fr 1fr 1fr}}
.pi-rel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; transition:transform .3s var(--ease), border-color .3s}
.pi-rel:hover{transform:translateY(-3px); border-color:var(--line-2)}
.pi-rel__m{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.pi-rel__n{font-family:var(--disp); font-size:1rem; font-weight:600; margin:7px 0 3px} .pi-rel__e{font-size:.8rem; color:var(--ink-3)}

/* garage CTA on vehicle page */
.pi-cta-garage{position:relative; overflow:hidden; text-align:center; background:linear-gradient(180deg, rgba(255,77,46,.08), rgba(255,77,46,.02));
  border:1px solid var(--line); border-radius:22px; padding:clamp(34px,5vw,56px); margin:50px 0}
.pi-cta-garage h3{font-family:var(--disp); font-size:clamp(1.5rem,3.4vw,2.2rem); margin:0 0 12px; letter-spacing:-.02em}
.pi-cta-garage p{color:var(--ink-2); max-width:52ch; margin:0 auto 26px}
.pi-disc{color:var(--ink-3); font-size:.8rem; max-width:70ch; margin:26px auto 0; line-height:1.6}

/* footer ------------------------------------------------------------------- */
.pi-foot{position:relative; border-top:1px solid var(--line); margin-top:60px; padding:clamp(46px,7vw,80px) clamp(18px,4vw,40px) 30px; max-width:var(--maxw); margin-left:auto; margin-right:auto}
.pi-foot__grid{display:grid; grid-template-columns:1fr; gap:34px}
@media(min-width:760px){.pi-foot__grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.pi-foot__brand p{color:var(--ink-3); font-size:.88rem; max-width:34ch; margin:14px 0 0}
.pi-foot__col h4{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px}
.pi-foot__col a{display:block; color:var(--ink-2); font-size:.9rem; padding:5px 0; transition:color .2s} .pi-foot__col a:hover{color:var(--ink)}
.pi-foot__base{margin-top:40px; padding-top:22px; border-top:1px solid var(--line); color:var(--ink-3); font-size:.8rem}

/* readable native dropdowns (fix: was light text on near-transparent bg) ---- */
.pi-select{background-color:#13151C; color:var(--ink)}
.pi-select:hover{border-color:var(--line-2)}
.pi-select option{background-color:#0C0D11; color:#F4F6FA}
.pi-select option:disabled{color:#5b6270}
.pi-select option[value=""]{color:#9aa1b0}

/* reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .pi-reveal{opacity:1 !important; transform:none !important}
  #pi-loader{display:none !important}
  .pi-search::before{animation:none}
}