/* Nitrofuze Garage: graphite ground, logo red for actions, steel neutrals. Fonts are self-hosted. */
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../assets/fonts/i7dOIFdwYjGaAMFtZd_QA1ZbYFc.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700 900;font-display:swap;src:url('../assets/fonts/fC1_PZJEZG-e9gHhdI4-NBbfd2ys3SjJCx1czNDu.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:300 400;font-display:swap;src:url('../assets/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ground:#171717; --deep:#000000; --panel:#242424; --panel-2:#2E2E2E; --line:#3A3A3A;
  --steel:#A0A0A0; --steel-light:#D6D6D6; --steel-dim:#8C8C8C; --white:#FFFFFF;
  --red:#E20000; --red-press:#B80000;
  --blue:#1850B0; --blue-press:#123E8C;
  --paper:#1E1E1E; --ink:#F2F2F2; --ink-soft:#B3B3B3;
  --grad-panel:linear-gradient(180deg,#363636 0%,#232323 60%,#1B1B1B 100%);
  --grad-panel-2:linear-gradient(180deg,#404040 0%,#252525 60%,#202020 100%);
  --grad-ground:linear-gradient(180deg,#292929 0%,#151515 60%,#0E0E0E 100%);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --cond:'Roboto Condensed','Arial Narrow',sans-serif;
  --body:'Albert Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(16px,4vw,40px); --header-h:112px; --nav-gap:clamp(18px,2vw,34px);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35); --shadow-md:0 10px 28px rgba(0,0,0,.45); --shadow-lg:0 20px 52px rgba(0,0,0,.6);
  --radius-ui:12px;
  --hairline-top:inset 0 1px 0 rgba(255,255,255,.05);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:#505050 var(--ground);scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ground);color:var(--white);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--red);color:#fff}
img,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.2em}
p{margin:0 0 1em}
ul{margin:0;padding:0}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.05;letter-spacing:.005em;margin:0;text-wrap:balance}
h1{font-size:clamp(3rem,9.5vw,6rem)}
h2{font-size:clamp(2rem,4.6vw,3.25rem)}
h3{font-size:clamp(1.5rem,2.6vw,1.9rem)}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--white);color:var(--ink);padding:10px 16px;font-weight:700}
.skip:focus{top:8px}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:820px}
.ic{width:20px;height:20px;flex:none}

/* ---------- buttons ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--radius-ui);font:700 1rem/1 var(--body);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:transform 160ms var(--ease-out),background-color 160ms var(--ease-out),border-color 160ms var(--ease-out),color 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.btn-line{border-color:#5C5C5C;color:var(--white);background:transparent}
@media (hover:hover) and (pointer:fine){.btn-red:hover{background:var(--red-press);box-shadow:0 10px 22px rgba(0,0,0,.45);transform:translateY(-1px)}.btn-red:active{transform:scale(.97) translateY(0)}.btn-line:hover{border-color:var(--white);transform:translateY(-1px)}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--red);padding-bottom:2px}
.link .ic{transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.link:hover .ic{transform:translateX(3px)}}
.more{margin:32px 0 0}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--deep);box-shadow:var(--shadow-sm)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,rgba(226,0,0,0) 0,var(--red) 9%,var(--red) 100%)}
.site-header .wrap{max-width:1440px}
.bar{display:flex;align-items:flex-end;gap:24px;padding-block:14px 16px}
.brand{align-self:center}
.brand img{width:auto;height:clamp(64px,5.6vw,88px)}
.nav{display:flex;align-items:flex-end;gap:var(--nav-gap);margin-left:clamp(24px,3vw,52px);padding-bottom:0;margin-bottom:-6px}
.nav a:not(.btn){position:relative;font:800 clamp(1.05rem,1.45vw,1.4rem)/1 var(--display);white-space:nowrap;letter-spacing:.01em;text-decoration:none;padding:8px 0;border-bottom:3px solid transparent;transition:border-color 160ms var(--ease-out)}
.nav a:not(.btn)+a:not(.btn)::before{content:"";position:absolute;left:calc(var(--nav-gap) / -2);top:50%;width:2px;height:clamp(18px,1.7vw,26px);background:#7A7A7A;transform:translate(-50%,-50%)}
.nav a[aria-current="page"]{border-color:var(--red)}
@media (hover:hover) and (pointer:fine){.nav a:not(.btn):hover{border-color:var(--steel)}}
.nav-msg{display:none}
.bar-actions{display:flex;align-items:center;gap:16px;align-self:center;margin-left:auto}
.call{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;white-space:nowrap}
.call .ic{color:var(--red)}
.menu-btn{display:none;width:44px;height:44px;border:1.5px solid #5C5C5C;background:transparent;border-radius:var(--radius-ui);cursor:pointer;position:relative}
.menu-bars,.menu-bars::before,.menu-bars::after{position:absolute;left:11px;width:20px;height:2px;background:var(--white);transition:transform 200ms var(--ease-out),opacity 150ms var(--ease-out)}
.menu-bars{top:20px}.menu-bars::before,.menu-bars::after{content:"";left:0}
.menu-bars::before{top:-6px}.menu-bars::after{top:6px}
.menu-btn[aria-expanded="true"] .menu-bars{background:transparent}
.menu-btn[aria-expanded="true"] .menu-bars::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-bars::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1099px){
  :root{--header-h:59px;--nav-gap:clamp(9px,2.5vw,18px)}
  .bar{flex-wrap:nowrap;align-items:center;height:56px;padding-block:0;gap:clamp(8px,2.4vw,20px)}
  .brand{flex:none}
  .brand img{height:clamp(26px,7.4vw,40px)}
  .menu-btn,.bar-actions,.bar-msg,.nav-msg{display:none}
  .nav{order:0;flex:1 1 auto;min-width:0;margin:0;padding:0;align-items:center;justify-content:flex-start}
  .nav a:not(.btn){flex:none;font-size:clamp(.55rem,2.7vw,1.05rem);letter-spacing:0;padding:18px 0 15px;border-bottom-width:2px}
  .nav a:not(.btn)+a:not(.btn)::before{width:1px;height:16px}
}
@media (min-width:1100px) and (max-width:1559px){.call span{display:none}.call{width:44px;height:44px;justify-content:center;border:1.5px solid #5C5C5C;border-radius:var(--radius-ui)}}

/* ---------- hero ---------- */
.hero{position:relative;display:grid;align-content:end;min-height:min(calc(100svh - var(--header-h)),820px);overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;z-index:-2}
.hero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(23,23,23,.86) 0%,rgba(23,23,23,.56) 40%,rgba(23,23,23,.04) 72%),linear-gradient(0deg,var(--ground) 0%,rgba(23,23,23,0) 34%)}
.hero-body{padding-top:clamp(48px,8vh,88px);padding-bottom:clamp(48px,8vh,88px)}
.hero h1{max-width:15ch;font-size:clamp(2.9rem,7.6vw,5.25rem)}
.hl{display:block}
.hero-sub{max-width:46ch;font:400 clamp(.95rem,1.1vw,1.05rem)/1.45 var(--cond);letter-spacing:.005em;color:#F5F5F5;margin:24px 0 0}
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{clip-path:inset(0 0 100% 0);transform:translateY(14px)}to{clip-path:inset(0 0 0 0);transform:none}}
  @keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .hl{animation:rise 720ms var(--ease-out) backwards}
  .hl:nth-child(2){animation-delay:140ms}
  .hero-sub,.hero .cta-row{animation:fadeup 520ms var(--ease-out) 420ms backwards}
  .reveal.pre-reveal{opacity:0;transform:translateY(14px)}
  .reveal.pre-reveal.in-view{opacity:1;transform:none;transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out)}
  .reveal-2.pre-reveal.in-view{transition-delay:90ms}
  .choose-item.pre-reveal .ci-card img{transform:scale(.9)}
  .choose-item.in-view .ci-card img{transform:none;transition:transform 400ms var(--ease-out) 120ms}
  .choose-item:nth-child(2).in-view,.how-step:nth-child(2).in-view{transition-delay:50ms}
  .choose-item:nth-child(3).in-view,.how-step:nth-child(3).in-view{transition-delay:100ms}
  .choose-item:nth-child(4).in-view,.how-step:nth-child(4).in-view{transition-delay:150ms}
  .choose-item:nth-child(5).in-view{transition-delay:200ms}
  .tile-grid>.reveal:nth-child(even).in-view,.tile-grid-6>.reveal:nth-child(even).in-view{transition-delay:60ms}
  .sf-small-grid>.reveal:nth-child(2).in-view,.shop-pair>.reveal:nth-child(2).in-view{transition-delay:60ms}
  .sf-small-grid>.reveal:nth-child(3).in-view{transition-delay:120ms}
  @media (min-width:700px){.tile-grid-6>.reveal:nth-child(even).in-view{transition-delay:0ms}.tile-grid-6>.reveal:nth-child(3n+2).in-view{transition-delay:60ms}.tile-grid-6>.reveal:nth-child(3n).in-view{transition-delay:120ms}}
}

/* ---------- finder ---------- */
.finder{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px 32px;background:var(--grad-panel);border:1px solid var(--line);padding:18px 22px;box-shadow:var(--shadow-md),var(--hairline-top)}
.finder-title{margin:0;font:800 1.7rem/1 var(--display);text-transform:uppercase;white-space:nowrap}
.finder-fields{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) auto;gap:12px;align-items:end}
.finder label{display:grid;gap:4px;font-size:.82rem;color:var(--steel)}
.finder select{width:100%;min-height:48px;padding:0 32px 0 12px;background-color:var(--panel-2);color:var(--white);border:1px solid #4D4D4D;border-radius:var(--radius-ui);font:600 1rem var(--body);appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),linear-gradient(135deg,var(--steel) 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.finder select:disabled{opacity:.5}
.finder .btn[disabled]{background:#454545;color:var(--steel);cursor:not-allowed}
@media (max-width:900px){.hero{min-height:0}.hero-body{padding-bottom:40px}.finder{grid-template-columns:minmax(0,1fr)}.finder-fields{grid-template-columns:1fr 1fr}.finder-fields .btn{grid-column:1/-1}}
@media (max-width:340px){.finder-fields{grid-template-columns:1fr}}
.finder-result{background:var(--grad-panel);border-block:1px solid var(--line);padding:clamp(40px,6vw,72px) 0}
.finder-result.enter{animation:fadeup 320ms var(--ease-out)}
.finder-result h2{font-size:clamp(1.9rem,4vw,2.75rem);margin-bottom:16px}
.finder-result p{font-size:.82rem;line-height:1.45;max-width:60ch;color:var(--steel-light)}
.finder-result .builds{margin-top:28px}

/* ---------- sections ---------- */
.section{padding-block:clamp(64px,9vw,120px)}
.band-panel{background:var(--grad-panel);border-block:1px solid var(--line)}
.band-light{background:var(--paper);color:var(--ink)}
.sec-head{max-width:64ch;margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{margin-bottom:20px}
.sec-head p{font-size:.82rem;line-height:1.45;color:var(--steel-light);margin:0}
.sec-head p+p{margin-top:12px}
.band-light .sec-head p{color:var(--ink-soft)}
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}
@media (min-width:900px){.two{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.grp{margin-top:clamp(40px,6vw,72px);margin-bottom:16px}
.grp-note{font-size:.82rem;line-height:1.45;max-width:64ch;color:var(--steel-light);margin-bottom:20px}
.none{color:var(--steel-light);margin-top:24px}

/* ---------- service tiles ---------- */
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.tile{position:relative;display:block;width:100%;min-width:0;overflow:hidden;background:var(--grad-panel);text-decoration:none;min-height:240px;aspect-ratio:4/3;grid-column:span 4;box-shadow:var(--shadow-sm);transition:box-shadow 220ms var(--ease-out),transform 160ms var(--ease-out)}
.tile.s6,.tile.s7{aspect-ratio:16/10}
.tile.s6{grid-column:span 6}.tile.s7{grid-column:span 7}.tile.s5{grid-column:span 5}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 300ms var(--ease-out)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,13,13,.94) 0%,rgba(13,13,13,.5) 42%,rgba(13,13,13,0) 72%)}
.tile-text{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:20px 22px;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.tile-name{font:800 clamp(1.5rem,2.4vw,1.9rem)/1 var(--display);text-transform:uppercase}
.tile-sum{font-size:.82rem;line-height:1.45;color:var(--steel-light);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover) and (pointer:fine){.tile:hover img{transform:scale(1.04)}.tile:hover{box-shadow:var(--shadow-md)}}
.tile:active{transform:scale(.99)}
@media (max-width:900px){.tile,.tile.s6,.tile.s7,.tile.s5{grid-column:span 6;aspect-ratio:4/3}}
@media (max-width:560px){.tile,.tile.s6,.tile.s7,.tile.s5{grid-column:span 12;aspect-ratio:16/11;min-height:0}.tile-sum{-webkit-line-clamp:5}}

/* ---------- sound library ---------- */
.search{display:block;max-width:560px;margin-bottom:28px}
.search input{width:100%;min-height:52px;padding:0 16px;background:var(--panel-2);border:1px solid #4D4D4D;border-radius:var(--radius-ui);color:var(--white);font:500 1rem var(--body)}
.search input::placeholder{color:var(--steel-dim)}
.search input:focus-visible{outline-offset:2px}
.builds{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.build{background:var(--grad-ground);border:1px solid var(--line);display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:box-shadow 220ms var(--ease-out),border-color 220ms var(--ease-out)}
.build[hidden]{display:none}
.build-media{aspect-ratio:4/3;overflow:hidden;background:var(--deep)}
.build-media img{width:100%;height:100%;object-fit:cover}
.build-body{padding:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;flex:1;align-content:start}
.specs{margin:0;display:grid;gap:8px}
.specs div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:12px;font-size:1rem}
.specs dt{color:var(--steel)}
.specs dd{margin:0}
.meter{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;font-size:.8rem;color:var(--steel-dim)}
.meter span{border-top:3px solid var(--line);padding-top:6px}
.meter span:nth-child(1){border-image:linear-gradient(90deg,rgba(91,98,109,.5),rgba(197,202,209,.85),rgba(91,98,109,.5)) 1}
.meter span:nth-child(2){border-image:linear-gradient(90deg,rgba(138,146,157,.5),rgba(243,244,246,.85),rgba(138,146,157,.5)) 1}
.meter span:nth-child(3){border-color:rgba(226,0,0,.45)}
.clip-soon{display:flex;align-items:center;gap:10px;margin:0;padding-top:12px;border-top:1px solid var(--line);color:var(--steel);font-size:.95rem}
@media (hover:hover) and (pointer:fine){.build:hover{box-shadow:var(--shadow-md);border-color:#4D4D4D}}

/* ---------- muffler origin list ---------- */
.origin{list-style:none}
.origin li{display:grid;grid-template-columns:8.5rem 6.5rem minmax(0,1fr);gap:6px 16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.origin li:first-child{border-top:1px solid var(--line)}
.o-name{font:800 1.5rem/1 var(--display);text-transform:uppercase}
.o-n{color:var(--steel);font-weight:600}
.o-txt{color:var(--steel-light);font-size:.82rem;line-height:1.45}
@media (max-width:640px){.origin li{grid-template-columns:1fr auto}.o-txt{grid-column:1/-1}}
.plain{padding-left:1.2em;max-width:64ch}.plain li{margin-bottom:.7em}

/* ---------- feature bands ---------- */
.feature{display:grid;grid-template-columns:minmax(0,1fr);background:var(--grad-panel);border-block:1px solid var(--line)}
.feature-img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;min-height:0}
.feature-text{padding:clamp(28px,6vw,88px);display:flex;flex-direction:column;justify-content:center;gap:16px}
.feature-text h2,.feature-text h3{margin-bottom:8px}
.kicker{margin:0 0 -8px;font:700 .8rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.feature-text p{font-size:.82rem;line-height:1.45;color:var(--steel-light);max-width:52ch;margin:0}
.feature-text .cta-row{margin-top:12px}
.feature-text .fine{font-size:.82rem;color:var(--steel)}
.feature-text .more{margin-top:8px}
@media (min-width:900px){
  .feature{grid-template-columns:1fr 1fr;min-height:520px}
  .feature-img{aspect-ratio:4/3;height:auto;align-self:start}
  .feature-flip .feature-img{order:2}
}
.accent{color:var(--red)}
.feature-head{grid-column:1/-1;padding:clamp(28px,5vw,48px) clamp(20px,6vw,88px) clamp(24px,4vw,36px);background:var(--grad-panel)}
.feature-head .kicker{margin:0 0 2px}
.feature-head h2{margin:0}
.feature-gallery{display:grid;grid-template-columns:1fr;gap:2px;min-height:0}
.feature-gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (min-width:900px){
  .feature-gallery{height:100%;align-self:start}
  .feature-gallery img{height:auto;aspect-ratio:4/3}
}
.feature-svc:nth-of-type(even){background:var(--grad-panel-2)}
.stack .grp{margin:0 0 20px}.stack{padding-top:clamp(40px,6vw,80px)}
.mini{margin:0;display:grid;gap:10px}
.mini div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:12px;align-items:baseline}
.mini dt{font:800 1.4rem/1 var(--display);text-transform:uppercase}
.mini dd{margin:0;color:var(--steel-light);font-size:.82rem;line-height:1.45}

/* ---------- reviews ---------- */
.rv{margin:0}
.rv blockquote{margin:0}
.rv blockquote p{margin:0}
.rv figcaption{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.95rem}
.rv-name{font-weight:700}
.rv-sub{color:var(--ink-soft)}
.rv-feature{max-width:1000px;margin-bottom:clamp(36px,5vw,64px)}
.rv-feature blockquote p{font:700 clamp(1.6rem,3.6vw,2.6rem)/1.2 var(--body);text-wrap:balance}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:32px 40px}
.rv-grid .rv{border-top:1px solid #B8B8B8;padding-top:18px}
.rv-grid .rv blockquote p{font-size:.82rem;line-height:1.45}
.band-panel .rv-sub{color:var(--steel)}

/* ---------- shop ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.shop-grid img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
@media (max-width:700px){.shop-grid{grid-template-columns:1fr}}

/* ---------- videos ---------- */
.slider{position:relative}
.slider-btns{display:flex;gap:8px;justify-content:flex-end;margin:-72px 0 20px}
@media (max-width:700px){.slider-btns{margin:0 0 16px}}
.sbtn{width:44px;height:44px;display:grid;place-items:center;background:var(--ground);color:var(--white);border:1px solid #4D4D4D;border-radius:var(--radius-ui);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform 160ms var(--ease-out),border-color 160ms var(--ease-out)}
.sbtn:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){.sbtn:hover{border-color:var(--white)}}
.vrow{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.vrow .vcard{flex:0 0 clamp(168px,42vw,210px);scroll-snap-align:start}
.vcard{display:block;text-align:left;padding:0;background:none;border:0;color:inherit;font:inherit;cursor:pointer;transition:transform 160ms var(--ease-out)}
.vcard:active{transform:scale(.98)}
.vthumb{position:relative;display:block;aspect-ratio:9/16;background:var(--deep);overflow:hidden}
.vthumb img{width:100%;height:100%;object-fit:cover}
.vdur{position:absolute;left:8px;bottom:8px;background:rgba(13,13,13,.85);padding:2px 8px;font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums}
.vplay{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;display:grid;place-items:center;background:var(--red);color:#fff;border-radius:50%;box-shadow:0 8px 20px rgba(0,0,0,.5);transition:transform 200ms var(--ease-out)}
.vplay .ic{width:24px;height:24px;margin-left:2px}
@media (hover:hover) and (pointer:fine){.vcard:hover .vplay{transform:scale(1.08)}}
.vtitle{display:block;margin-top:10px;font-weight:600;font-size:1rem;line-height:1.3}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:28px 16px}
.vgrid-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.vgrid .vcard[hidden]{display:none}
.vcard-wide .vthumb{aspect-ratio:2/1}
.vgrid-eps .vthumb{aspect-ratio:16/9}
/* episode thumbnails are title cards already: no overlay on top, the episode name sits under the picture */
.vgrid-eps .vcap,.vgrid-eps .vthumb::after{display:none}
.vgrid-eps .vtitle.sr{position:static!important;width:auto!important;height:auto!important;margin:12px 2px 0!important;padding:0!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important;display:block;text-align:left;font:800 1.25rem/1.15 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--white)}
.vgrid-eps .vplay{left:50%;top:50%;margin:-23px 0 0 -23px;width:46px;height:46px;opacity:1!important;transform:none!important}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{min-height:44px;padding:0 18px;background:transparent;color:var(--white);border:1.5px solid #5C5C5C;border-radius:var(--radius-ui);font:600 1rem var(--body);cursor:pointer;transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),transform 160ms var(--ease-out)}
.chip:active{transform:scale(.97)}
.chip.is-on{background:var(--white);color:var(--ink);border-color:var(--white)}
.vdlg{width:min(92vw,420px);max-height:92svh;padding:0;border:1px solid var(--line);background:#000;color:var(--white);overflow:hidden;opacity:0;transform:scale(.96);box-shadow:var(--shadow-lg);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),display 200ms allow-discrete,overlay 200ms allow-discrete}
.vdlg[open]{opacity:1;transform:none}
@starting-style{.vdlg[open]{opacity:0;transform:scale(.96)}}
.vdlg.wide{width:min(94vw,980px)}
.vdlg::backdrop{background:rgba(13,13,13,.86)}
.vdlg-bar{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;background:var(--grad-panel)}
.vdlg-bar p{margin:0;flex:1;font-weight:600;font-size:.95rem;line-height:1.3}
.vdlg-x{width:44px;height:44px;display:grid;place-items:center;background:transparent;color:var(--white);border:0;cursor:pointer}
.vdlg video{width:100%;max-height:calc(92svh - 64px);background:#000}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:20px 0;font-weight:700;font-size:1.125rem;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:16px;height:16px;background:linear-gradient(var(--white),var(--white)) center/16px 2px no-repeat,linear-gradient(var(--white),var(--white)) center/2px 16px no-repeat;transition:transform 200ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;max-width:62ch;color:var(--steel-light)}

/* ---------- visit ---------- */
.info{margin:0 0 24px;display:grid;gap:14px}
.info div{display:grid;grid-template-columns:6rem minmax(0,1fr);gap:12px}
.info dt{color:var(--steel)}.info dd{margin:0;font-weight:500}
.visit h2{margin-bottom:24px}
.visit p{font-size:.82rem;line-height:1.45;color:var(--steel-light);max-width:52ch}
.map{min-height:340px;background:var(--deep);border:1px solid var(--line)}
.map iframe{width:100%;height:100%;min-height:340px;border:0;filter:grayscale(.85) contrast(1.05)}

/* ---------- page heads and details ---------- */
.page-head{padding:clamp(48px,7vw,96px) 0 clamp(36px,5vw,64px);background:var(--grad-panel);border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(2.75rem,7vw,5rem);margin-bottom:20px}
.page-head p{font-size:.82rem;line-height:1.45;max-width:60ch;color:var(--steel-light)}
.page-head .cta-row{margin-top:24px}
.crumb{margin:0 0 12px!important;font-size:.95rem;color:var(--steel)!important}
.svc-img{width:100%;aspect-ratio:4/3;object-fit:cover}
.rel{list-style:none;display:grid;gap:8px}.rel a{font-weight:600}
.rel-h{margin-top:40px;margin-bottom:12px;font-size:1.75rem}
.owners{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.owners figure{margin:0}
.owners img{width:100%;aspect-ratio:16/9;object-fit:cover}
.owners figcaption{padding-top:14px;display:grid;gap:2px}
.owners figcaption span{color:var(--steel)}

/* ---------- footer, mobile bar, toast ---------- */
.site-footer{background:var(--deep);border-top:1px solid var(--line);padding-top:clamp(40px,6vw,72px)}
.foot-grid{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:800px){.foot-grid{grid-template-columns:1.4fr 1fr 1.2fr}}
.foot-brand p{max-width:34ch;color:var(--steel);margin-top:14px;font-size:.82rem;line-height:1.45}
.foot-h{font:800 1.3rem/1 var(--display);text-transform:uppercase;margin-bottom:14px}
.foot-list{list-style:none;display:grid;gap:8px;color:var(--steel-light)}
.foot-list a{text-decoration:none;font-weight:600;border-bottom:1px solid transparent}
@media (hover:hover) and (pointer:fine){.foot-list a:hover{border-color:var(--white)}}
.foot-base{padding-block:32px;margin-top:32px;border-top:1px solid var(--line);color:var(--steel-dim);font-size:.95rem}
.foot-base p{margin:0}
.mobile-bar{display:none}
@media (max-width:1099px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .mobile-bar{display:grid;grid-template-columns:auto 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--deep);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -10px 26px rgba(0,0,0,.4)}
  .mobile-bar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;font-weight:700;text-decoration:none;transition:transform 160ms var(--ease-out)}
  .mobile-bar a:active{transform:scale(.97)}
  .mb-call{padding:0 22px;border-right:1px solid var(--line)}
  .mb-call .ic{color:var(--red)}
  .mb-msg{background:var(--red);color:#fff}
}
.toast{position:fixed;left:50%;bottom:24px;z-index:80;max-width:min(92vw,420px);padding:12px 18px;background:var(--white);color:var(--ink);font-weight:600;font-size:.95rem;border-radius:var(--radius-ui);box-shadow:var(--shadow-lg);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:transform 150ms var(--ease-out),opacity 150ms var(--ease-out)}
.toast.show{opacity:1;transform:translate(-50%,0);transition:transform 220ms var(--ease-out),opacity 220ms var(--ease-out)}
@media (max-width:1099px){.toast{bottom:calc(76px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* hero on phones and short screens */
@media (max-width:900px){.hero-scrim{background:none}.hero-sub{font-size:.82rem;text-shadow:0 2px 10px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.9)}.hero h1{text-shadow:0 2px 10px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.9)}.hero .btn-line{text-shadow:0 1px 4px rgba(0,0,0,.85)}.hero-img{object-position:50% 22%}}

/* ---------- why drivers choose us / how it works rows ---------- */
#choose-us{padding-block:clamp(40px,6vw,72px)}
#choose-us .sec-head{margin-bottom:clamp(20px,3vw,32px)}
.choose-us{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;list-style:none;padding:0;margin:0}
.choose-item{display:block}
.choose-item:last-child{grid-column:1/-1}
@media (min-width:700px){.choose-us{grid-template-columns:repeat(5,1fr);gap:16px}.choose-item:last-child{grid-column:auto}}
.ci-card{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:22px 12px;background:#fff;border:1px solid #DADADA;border-radius:16px;transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.choose-item:last-child .ci-card{flex-direction:row;gap:16px}
@media (min-width:700px){.choose-item:last-child .ci-card{flex-direction:column;gap:12px}}
.ci-card img{width:52px;height:52px;object-fit:contain;flex:none}
.ci-card span{font:700 .82rem/1.3 var(--body);text-transform:uppercase;letter-spacing:.03em}

.how-works{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 16px;list-style:none;padding:0;margin:0;counter-reset:step}
@media (min-width:700px){.how-works{grid-template-columns:repeat(4,1fr)}}
.how-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.how-step .num{counter-increment:step;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font:800 .82rem/1 var(--display)}
.how-step .num::before{content:counter(step)}
.how-step img{width:34px;height:34px;object-fit:contain;margin-top:2px}
.how-step h4{margin:0;font:800 1rem/1.15 var(--display);text-transform:uppercase}
.how-step p{margin:0;font-size:.82rem;line-height:1.4;color:var(--ink-soft)}

/* ---------- simple 2/3 column tile grids (services, mufflers) ---------- */
.tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile-grid .tile{grid-column:auto;aspect-ratio:1/1.05;min-height:0}
.tile-grid .tile-name{font-size:1.05rem;line-height:1.15}
.tile-grid .tile-sum{-webkit-line-clamp:2}
.tile-grid-6{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile-grid-6 .tile{aspect-ratio:1/1.05;min-height:0}
.tile-grid-6 .tile-name{font-size:1.05rem;line-height:1.15}
.tile-grid-6 .tile-sum{-webkit-line-clamp:2}
@media (min-width:700px){
  .tile-grid-6{grid-template-columns:repeat(3,1fr)}
  .tile-grid .tile,.tile-grid-6 .tile{aspect-ratio:4/3}
  .tile-grid .tile-name,.tile-grid-6 .tile-name{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.1}
}

/* ---------- brand logos row ---------- */
.brand-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(24px,5vw,56px)}
.brand-row img{height:clamp(36px,7vw,52px);width:auto;max-width:130px;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}
.band-light .brand-row img{filter:none;opacity:1}

/* ---------- spitfire featured muffler ---------- */
.spitfire-feature{position:relative;overflow:hidden;background:var(--deep)}
.spitfire-feature .sf-main{width:100%;height:auto;display:block}
.sf-overlay{position:absolute;left:0;top:0;bottom:0;width:min(48%,440px);display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,4vw,52px);gap:16px;z-index:1}
.sf-overlay img.sf-logo{width:clamp(150px,24vw,230px);height:auto}
.sf-overlay p{font-size:.82rem;line-height:1.5;color:var(--steel-light);max-width:32ch;margin:0}
.sf-small-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.sf-small-grid img{width:100%;aspect-ratio:1;object-fit:cover}
@media (max-width:700px){
  .spitfire-feature{background:var(--grad-panel)}
  .sf-overlay{position:static;width:auto;padding:clamp(20px,5vw,32px) var(--gutter) 0}
  .sf-overlay p{max-width:none}
}

/* ---------- shop photo pair ---------- */
.shop-pair{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:700px){.shop-pair{grid-template-columns:1fr 1fr}}
.shop-pair img{width:100%;aspect-ratio:4/3;object-fit:cover}


/* ---------- polish pass: rhythm, radius, blue accents ---------- */
:root{--radius-card:16px;--blue-light:#5B8DEF}
.section{padding-block:clamp(48px,7vw,88px)}
#choose-us,#documentary,#how-it-works,#brands{padding-block:clamp(36px,5vw,64px)}
#choose-us .sec-head,#how-it-works .sec-head,#brands .sec-head{margin-bottom:clamp(20px,3vw,32px)}
.tile,.spitfire-feature,.vthumb,.vdlg{border-radius:var(--radius-card)}
.sf-small-grid img,.shop-pair img{border-radius:var(--radius-card)}
.kicker{color:var(--blue-light)}
.band-light .kicker{color:var(--blue)}

/* spitfire: video beside the three photos on desktop */
.sf-media{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}
.sf-media .vthumb{aspect-ratio:16/9}
.sf-media .sf-small-grid{gap:8px}
@media (min-width:900px){
  .sf-media{grid-template-columns:1.7fr 1fr}
  .sf-media .vcard{align-self:start}
  .sf-media .sf-small-grid{grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));min-height:0;contain:size}
  .sf-media .sf-small-grid img{aspect-ratio:auto;height:100%;min-height:0}
}

/* documentary: bigger video, centered against the copy */
#documentary .vthumb{aspect-ratio:16/9}
@media (min-width:900px){#documentary .two{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:center}}

/* how it works: connected step cards */
.how-works{gap:16px}
.how-step{position:relative;background:#fff;border:1px solid #DADADA;border-radius:var(--radius-card);padding:22px 14px}
@media (min-width:700px){
  .how-works{gap:28px}
  .how-step:not(:last-child)::after{content:"";position:absolute;right:-19px;top:50%;width:9px;height:9px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:translateY(-50%) rotate(45deg)}
}

/* brands: dark strip so white and colored logos both read */
.brand-row{background:#101010;border-radius:var(--radius-card);padding:clamp(20px,3vw,32px);gap:clamp(20px,3.5vw,44px)}
.brand-row img{height:clamp(34px,5.5vw,50px);max-width:150px;width:auto;filter:none;opacity:1}
.brand-row img.on-light{background:#fff;padding:5px 10px;border-radius:8px}


/* phones: comfortable reading size for small copy */
#spitfire .sec-head{margin-bottom:clamp(16px,2.5vw,28px)}
#spitfire .sec-head .kicker{margin:0 0 2px}
@media (max-width:700px){
  .sec-head p,.grp-note,.feature-text p,.finder-result p,.visit p,.page-head p,.fine,.foot-brand p,.o-txt,.mini dd,.how-step p,.rv-grid .rv blockquote p,.sf-overlay p,.hero-sub{font-size:.9375rem;line-height:1.5}
}
.sec-head p.kicker{color:var(--blue-light);font-size:.8rem;line-height:1}
.band-light .sec-head p.kicker{color:var(--blue)}

/* ---------- premium finish ---------- */
.btn-red{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 16px rgba(0,0,0,.35)}
.tile,.spitfire-feature,.sf-small-grid img,.shop-pair img,.vthumb{outline:1px solid rgba(255,255,255,.09);outline-offset:-1px}
.tile:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.band-light{background:linear-gradient(180deg,#F5F5F5 0%,#E8E8E8 100%);border-block:1px solid #D9D9D9}
.kicker{letter-spacing:.16em}
h2{letter-spacing:.012em}
.ci-card,.how-step{box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 18px rgba(0,0,0,.05)}


/* ask kuya ron title cards */
.vcard-cap .vthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.68) 34%,rgba(0,0,0,0) 66%);pointer-events:none}
.vcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 12px 15px;display:grid;gap:8px}
.vtag{font:700 .75rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-light)}
.vbar{width:30px;height:3px;background:var(--red)}
.vname{font:800 1.25rem/1.04 var(--display);text-transform:uppercase;color:#fff;text-wrap:balance}
.vcard-cap .vdur{left:auto;right:10px;top:10px;bottom:auto;z-index:2}
.vcard-cap .vplay{z-index:2;top:40%;width:46px;height:46px;margin:-23px 0 0 -23px}
.vcard-cap .vplay .ic{width:20px;height:20px}
.vcard-cap .vplay{left:10px;top:10px;margin:0;width:38px;height:38px}
.vcard-cap .vplay .ic{width:16px;height:16px;margin-left:1px}
@media (hover:hover) and (pointer:fine){
  .vcard-cap .vplay{left:50%;top:50%;margin:-23px 0 0 -23px;width:46px;height:46px;opacity:0;transform:scale(.9);transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
  .vcard-cap .vplay .ic{width:20px;height:20px}
  .vcard-cap:hover .vplay,.vcard-cap:focus-visible .vplay{opacity:1;transform:scale(1)}
}

/* hero: Nissan 400Z video loop over a still poster */
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media .hero-img,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 45%;z-index:auto}
.hero-video{opacity:0;transition:opacity 900ms var(--ease-out)}
.hero-video.is-playing{opacity:1}
.hero-scrim{background:linear-gradient(90deg,rgba(14,14,14,.88) 0%,rgba(14,14,14,.58) 42%,rgba(14,14,14,.06) 76%),linear-gradient(0deg,var(--ground) 0%,rgba(23,23,23,0) 30%)}
@media (max-width:900px){.hero-scrim{background:linear-gradient(0deg,rgba(14,14,14,.86) 0%,rgba(14,14,14,.34) 55%,rgba(14,14,14,.18) 100%)}}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}

/* hero headline: the word "right." in the site blue */
.hero h1 .hl-accent{color:var(--blue-light)}

/* ===== featured project: wide photo band + three balanced columns (desktop); stacked as before on phones ===== */
.feature-project{display:block;min-height:0}
.fp-head{padding:clamp(28px,5vw,48px) clamp(20px,6vw,88px) clamp(24px,4vw,36px)}
.fp-head .kicker{margin:0 0 2px}
.fp-head h2{margin:0}
.fp-photo{margin:0;position:relative}
.fp-photo>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.fp-chips{display:none}
.fp-cols{padding:clamp(28px,6vw,88px);display:flex;flex-direction:column;gap:16px}
.fp-lead{margin:0;font-size:.82rem;line-height:1.45;color:var(--steel-light);max-width:52ch}
.fp-body{display:flex;flex-direction:column;gap:16px}
.fp-body p{margin:0;font-size:.82rem;line-height:1.45;color:var(--steel-light);max-width:52ch}
@media (max-width:700px){.fp-lead,.fp-body p{font-size:.9375rem;line-height:1.5}}

@media (min-width:900px){
  .feature.feature-project{grid-template-columns:none;padding-bottom:clamp(56px,6vw,96px)}
  .fp-head,.fp-photo,.fp-cols{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
  .fp-head{padding-top:clamp(56px,6vw,88px);padding-bottom:clamp(24px,3vw,36px)}
  .fp-head h2{font-size:clamp(2.4rem,5vw,4rem);line-height:1}
  .fp-photo>img{aspect-ratio:21/9;object-position:50% 52%;border-radius:var(--radius-card);outline:1px solid rgba(255,255,255,.09);outline-offset:-1px}
  .fp-photo{padding-inline:var(--gutter)}
  .fp-photo>img{width:100%}
  .fp-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;position:absolute;left:calc(var(--gutter) + 20px);bottom:20px;right:calc(var(--gutter) + 20px)}
  .fp-chips li{font:700 .72rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:9px 12px;border-radius:999px;background:rgba(14,14,14,.66);border:1px solid rgba(255,255,255,.18)}
  .fp-cols{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4.6fr) minmax(0,4fr);gap:clamp(28px,4vw,56px);align-items:start;padding-block:clamp(36px,4vw,56px) 0}
  .fp-lead{position:relative;padding-top:20px;font:800 clamp(1.5rem,2.3vw,2.1rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.008em;color:#fff;max-width:none;text-wrap:balance}
  .fp-lead::before{content:"";position:absolute;left:0;top:0;width:44px;height:4px;background:var(--red)}
  .fp-body p{font-size:.9375rem;line-height:1.55}
  .fp-video{align-self:start}
  .fp-video .vthumb{aspect-ratio:16/9}
}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .fp-photo.pre-reveal>img{transform:scale(1.035)}
  .fp-photo.in-view>img{transform:none;transition:transform 900ms var(--ease-out)}
  .fp-cols .pre-reveal.in-view:nth-child(2){transition-delay:70ms}
  .fp-cols .pre-reveal.in-view:nth-child(3){transition-delay:140ms}
}

/* ===== why drivers choose us: four photo tiles with readable titles ===== */
.why-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.why-tile{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:16/10;border-radius:var(--radius-card);background:#111;box-shadow:0 1px 2px rgba(0,0,0,.08),0 10px 28px rgba(0,0,0,.14)}
.why-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.why-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,8,8,.9) 0%,rgba(8,8,8,.62) 30%,rgba(8,8,8,0) 62%),linear-gradient(180deg,rgba(8,8,8,.32) 0%,rgba(8,8,8,0) 26%);pointer-events:none}
.why-tile{outline:1px solid rgba(255,255,255,.1);outline-offset:-1px}
.why-cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2.4vw,26px);display:grid;gap:10px;justify-items:start}
.why-cap::before{content:"";width:34px;height:4px;background:var(--red);border-radius:2px}
.why-tile h3{margin:0;color:#fff;font:800 clamp(1.7rem,3vw,2.5rem)/1 var(--display);text-transform:uppercase;letter-spacing:.008em;text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.55)}
@media (min-width:640px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}}
@media (prefers-reduced-motion:no-preference){
  .why-tile.pre-reveal img{transform:scale(1.06)}
  .why-tile.in-view img{transform:none;transition:transform 900ms var(--ease-out)}
  .why-grid>.why-tile:nth-child(even).in-view{transition-delay:80ms}
}

/* colour: alternating brand red and brand blue tints, numbered chips */
.why-tile:nth-child(odd){--tone:118,0,0;--chip:var(--red)}
.why-tile:nth-child(even){--tone:10,38,102;--chip:var(--blue)}
.why-tile::after{background:linear-gradient(0deg,rgba(var(--tone),.96) 0%,rgba(var(--tone),.78) 26%,rgba(var(--tone),.28) 52%,rgba(var(--tone),0) 72%),linear-gradient(180deg,rgba(8,8,8,.28) 0%,rgba(8,8,8,0) 24%)}
.why-cap::before{background:#fff}
.why-num{position:absolute;z-index:2;left:clamp(14px,2vw,22px);top:clamp(14px,2vw,22px);min-width:42px;padding:8px 12px;border-radius:999px;background:var(--chip);color:#fff;font:800 .82rem/1 var(--body);letter-spacing:.14em;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.3)}

/* video slider: keep its scrolling content from widening the page on phones */
.vrow{contain:paint}

/* ===== service tiles: "click here for options" line; on phones the text sits below the photo, never over it ===== */
.tile-cta{display:inline-flex;align-items:center;gap:8px;font:700 .72rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-light)}
.tile-cta::after{content:"\2192";font-size:1rem;line-height:1;letter-spacing:0;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.tile:hover .tile-cta::after{transform:translateX(4px)}}
@media (max-width:699px){
  .tile-grid .tile{display:flex;flex-direction:column;aspect-ratio:auto;min-height:0;background:var(--grad-panel)}
  .tile-grid .tile img{position:static;inset:auto;width:100%;height:auto;aspect-ratio:4/3;flex:none}
  .tile-grid .tile::after{display:none}
  .tile-grid .tile-text{position:static;padding:12px 12px 14px;gap:10px;align-content:start;flex:1}
  .tile-grid .tile-name{font-size:1.1rem;line-height:1.1}
}

/* services intro line + smaller phone caption type */
#services .sec-head{max-width:68ch}
#services .sec-head p strong{color:#fff;font-weight:600}
.tile-cta{display:block;text-wrap:balance}
.tile-cta::after{display:inline-block;margin-left:6px;vertical-align:-1px}
@media (max-width:699px){
  .tile-grid .tile-text{padding:10px 12px 12px;gap:8px}
  .tile-grid .tile-name{font-size:.98rem;line-height:1.1}
  .tile-cta{font-size:.75rem;letter-spacing:.08em;line-height:1.3}
  .tile-cta::after{font-size:.9rem;margin-left:4px}
}

/* ===== service tiles v2: "Click here for options" as a clear pill; phones get full-width rows (photo left, text right) ===== */
.tile-cta{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;font:600 .8rem/1 var(--body);letter-spacing:.01em;text-transform:none;text-wrap:nowrap;transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out)}
.tile-cta::after{content:"\2192";display:inline-block;margin:0;vertical-align:baseline;font-size:.95em;letter-spacing:0}
@media (hover:hover) and (pointer:fine){.tile:hover .tile-cta{background:var(--red);border-color:var(--red)}}
@media (max-width:699px){
  .tile-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .tile-grid .tile{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);align-items:stretch;aspect-ratio:auto;min-height:0}
  .tile-grid .tile img{position:static;width:100%;height:100%;min-height:136px;aspect-ratio:auto;object-fit:cover}
  .tile-grid .tile-text{padding:14px 14px 14px 16px;gap:12px;align-content:center}
  .tile-grid .tile-name{font-size:1.1rem;line-height:1.1}
  .tile-cta{font-size:.76rem;padding:8px 12px}
}

/* ===== service tiles v3: photos are never cropped; each tile takes its photo's own proportions ===== */
#services .tile-grid .tile{aspect-ratio:auto;min-height:0}
#services .tile-grid .tile img{position:static;display:block;width:100%;height:auto;min-height:0;aspect-ratio:auto;object-fit:contain}
@media (min-width:700px){
  #services .tile-grid{align-items:stretch}
  #services .tile-grid>.reveal{display:flex}
  #services .tile-grid .tile{flex:1}
}
@media (max-width:699px){
  #services .tile-grid{grid-template-columns:minmax(0,1fr)}
  #services .tile-grid .tile{display:block}
  #services .tile-grid .tile::after{display:none}
  #services .tile-grid .tile-text{position:static;padding:14px 16px 16px;gap:12px;align-content:start}
  #services .tile-grid .tile-name{font-size:1.15rem}
}

/* ===== spitfire small photos: names + short descriptions ===== */
.sf-item{position:relative;margin:0;min-width:0;min-height:0;overflow:hidden;border-radius:var(--radius-card);background:var(--grad-panel);outline:1px solid rgba(255,255,255,.09);outline-offset:-1px}
.sf-item img{outline:0;border-radius:0}
.sf-item figcaption{display:grid;gap:4px;align-content:center}
.sf-name{font:800 1.05rem/1.1 var(--display);text-transform:uppercase;letter-spacing:.008em;color:#fff}
.sf-desc{font-size:.8rem;line-height:1.4;color:var(--steel-light)}
/* photo on the left, name and description on the right (phones and desktop); nothing covers the photo */
.sf-item{display:grid;grid-template-columns:clamp(104px,9vw,136px) minmax(0,1fr);align-items:stretch}
.sf-item img{width:100%;height:100%;min-height:104px;aspect-ratio:1;object-fit:cover}
.sf-item figcaption{padding:12px 16px}
.sf-desc{font-size:.875rem}
@media (max-width:899px){.sf-media .sf-small-grid{grid-template-columns:minmax(0,1fr);gap:10px}}
@media (min-width:900px){
  .sf-media .sf-small-grid{gap:8px}
  .sf-item img{min-height:0}
  .sf-name{font-size:clamp(1rem,1.4vw,1.2rem)}
  .sf-desc{font-size:.8rem}
}

/* spitfire small cards v2: room for full descriptions */
.sf-item{min-height:0}
@media (max-width:899px){
  /* photo on top, shown whole; text below */
  .sf-item{display:block}
  .sf-item img{width:100%;height:auto;min-height:0;aspect-ratio:auto;object-fit:contain;display:block}
  .sf-item figcaption{padding:14px 16px 16px;gap:8px}
  .sf-name{font-size:1.2rem}
  .sf-desc{font-size:.9375rem;line-height:1.5}
}
@media (min-width:900px){
  /* video and cards share the width evenly; the video stretches to the height of the card stack */
  .sf-media{grid-template-columns:1fr 1fr;align-items:stretch}
  .sf-media .vcard{align-self:stretch;height:100%}
  .sf-media .vcard .vthumb{height:100%;aspect-ratio:auto}
  .sf-media .vcard .vthumb img{height:100%;object-fit:cover}
  .sf-media .sf-small-grid{contain:none;grid-template-rows:none;grid-auto-rows:auto;align-content:stretch}
  .sf-item{min-height:128px;grid-template-columns:clamp(112px,10vw,150px) minmax(0,1fr)}
  .sf-item figcaption{padding:14px 18px;gap:6px}
  .sf-name{font-size:clamp(1.05rem,1.4vw,1.25rem)}
  .sf-desc{font-size:.8125rem;line-height:1.5}
}

/* spitfire small cards v3: on phones a small photo on the left, short description on the right */
.sf-desc-short{display:none}
@media (max-width:899px){
  .sf-media .sf-small-grid{gap:10px}
  .sf-item{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:14px;align-items:start;padding:12px}
  .sf-item img{width:112px;height:auto;min-height:0;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
  .sf-item figcaption{padding:0;gap:6px;align-content:start}
  .sf-name{font-size:1.05rem}
  .sf-desc{font-size:.84rem;line-height:1.45}
  .sf-desc-full{display:none}
  .sf-desc-short{display:block}
}

/* spitfire small cards v4 (phones): bigger photo that matches the text height */
@media (max-width:899px){
  .sf-item{grid-template-columns:128px minmax(0,1fr);align-items:stretch;column-gap:14px}
  .sf-item img{width:128px;height:100%;min-height:128px;aspect-ratio:auto;object-fit:cover}
  .sf-item figcaption{align-content:center}
}

/* spitfire small cards v5 (phones): photos shown whole, never cropped; slightly smaller type to match */
@media (max-width:899px){
  .sf-item{grid-template-columns:140px minmax(0,1fr);align-items:center;column-gap:12px;padding:12px}
  .sf-item img{width:140px;height:auto;min-height:0;aspect-ratio:auto;object-fit:contain;border-radius:10px;align-self:center}
  .sf-item figcaption{align-content:center;gap:5px}
  .sf-name{font-size:1rem}
  .sf-desc{font-size:.76rem;line-height:1.4}
}

/* ===== reviews: big animated proof numbers, ring, quote cards ===== */
.rv-hero{margin-bottom:clamp(28px,4vw,48px)}
.rv-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,4vw,56px);align-items:end;max-width:760px;text-transform:none;letter-spacing:0;font-weight:400}
.rv-stat{display:grid;justify-items:start;gap:10px;min-width:0}
.rv-num{display:block;font:800 clamp(4.2rem,12vw,9.5rem)/.86 var(--display);color:var(--ink);letter-spacing:.005em;font-variant-numeric:tabular-nums}
.rv-lab{font:700 clamp(.72rem,1.1vw,.9rem)/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.rv-fig{position:relative;display:grid;place-items:center;width:clamp(128px,18vw,232px);aspect-ratio:1}
.rv-fig .rv-num{font-size:clamp(2.5rem,6.6vw,5.2rem);line-height:1;position:relative}
.rv-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.rv-track,.rv-arc{fill:none;stroke-width:5}
.rv-track{stroke:#D5D5D5}
.rv-arc{stroke:var(--red);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.rv-note{margin:clamp(18px,3vw,28px) 0 0;max-width:56ch;font-size:.9375rem;line-height:1.5;color:var(--ink-soft)}
.reviews-pro .rv-hero::after{content:"";display:block;height:3px;width:min(100%,220px);margin-top:clamp(22px,3vw,34px);background:var(--red);transform-origin:left}

/* featured quote with a large red mark */
.reviews-pro .rv-feature{position:relative;max-width:1000px;padding-top:clamp(40px,5vw,64px)}
.reviews-pro .rv-feature::before{content:"\201C";position:absolute;left:-.02em;top:0;font:800 clamp(5rem,9vw,8rem)/.7 var(--display);color:var(--red)}
.reviews-pro .rv-feature blockquote p{font:700 clamp(1.5rem,3.4vw,2.5rem)/1.22 var(--body);text-wrap:balance}
.reviews-pro .rv-feature figcaption{margin-top:16px}
.reviews-pro .rv-feature .rv-name{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}

/* quote cards */
.reviews-pro .rv-grid{gap:16px}
.reviews-pro .rv-grid .rv{border-top:0;padding:clamp(20px,2.4vw,28px);background:#fff;border:1px solid #DADADA;border-radius:var(--radius-card);box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 22px rgba(0,0,0,.06);display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.reviews-pro .rv-grid .rv blockquote p{font-size:.9375rem;line-height:1.55}
.reviews-pro .rv-grid .rv figcaption{margin-top:0;padding-top:14px;border-top:1px solid #E6E6E6;font-size:.875rem}
.reviews-pro .rv-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.reviews-pro .rv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.reviews-pro .rv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* motion: scroll-linked by JS (values set on each element); cards keep their staggered fade */
.rv-scrub .rv-hero::after{transform:scaleX(var(--rule,0))}
@media (prefers-reduced-motion:no-preference){
  .reviews-pro .rv-grid>.rv:nth-child(3n+2).in-view{transition-delay:70ms}
  .reviews-pro .rv-grid>.rv:nth-child(3n).in-view{transition-delay:140ms}
}

/* ===== homepage motion layer (motion.js) ===== */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wi{display:inline-block}
.motion-on .hl{animation:none}
.motion-on .hero-sub,.motion-on .hero .cta-row{animation:none}

/* why drivers choose us: quieter colour. Neutral dark fade, one small red accent, dark number chip */
.why-tile:nth-child(odd),.why-tile:nth-child(even){--tone:8,8,8}
.why-tile::after{background:linear-gradient(0deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.66) 30%,rgba(8,8,8,0) 62%),linear-gradient(180deg,rgba(8,8,8,.28) 0%,rgba(8,8,8,0) 22%)}
.why-cap::before{background:var(--red);width:34px;height:3px}
.why-num{background:rgba(14,14,14,.62);border:1px solid rgba(255,255,255,.28);box-shadow:none;color:#fff}

/* featured project: phones get a shorter version of the story (same wording, fewer sentences) */
.fp-short{display:none}
.fp-full{display:flex;flex-direction:column;gap:16px}
@media (max-width:899px){
  .fp-full{display:none}
  .fp-short{display:block;margin:0;font-size:.9rem;line-height:1.5;color:var(--steel-light)}
}

/* reviews on phones: three cards, the rest stay on tablet and desktop */
@media (max-width:699px){.reviews-pro .rv-grid .rv.rv-extra{display:none}}

/* muffler tiles: restrained colour. Red bar over each name, blue descriptions, a hairline red edge on hover */
.tile-grid-6 .tile-text::before{content:"";display:block;width:34px;height:3px;background:var(--red);border-radius:2px;margin-bottom:8px}
.tile-grid-6 .tile-sum{color:var(--blue-light);font-weight:600}
@media (hover:hover) and (pointer:fine){.tile-grid-6 .tile:hover{outline-color:rgba(226,0,0,.7)}}

/* ===== muffler cards: photo shown whole on top, text in its own panel (nothing covers the photo) ===== */
.mtile-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.mtile{display:flex;flex-direction:column;overflow:hidden;background:var(--grad-panel);border-radius:var(--radius-card);outline:1px solid rgba(255,255,255,.09);outline-offset:-1px;box-shadow:var(--shadow-sm);color:inherit;text-decoration:none;transition:box-shadow 220ms var(--ease-out),outline-color 220ms var(--ease-out)}
.mtile img{display:block;width:100%;height:auto}
.mtile-text{display:grid;gap:8px;align-content:start;padding:16px 18px 20px}
.mtile-text::before{content:"";width:34px;height:3px;background:var(--red);border-radius:2px}
.mtile-name{margin:0;font:800 clamp(1.25rem,1.6vw,1.5rem)/1.05 var(--display);text-transform:uppercase;color:#fff}
.mtile-sum{font-size:.875rem;line-height:1.5;color:var(--steel-light)}
.mtile:active{transform:scale(.99)}
.mtile:focus-visible{outline:2px solid var(--white);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.mtile:hover{box-shadow:var(--shadow-md);outline-color:rgba(226,0,0,.7)}}
@media (min-width:640px){.mtile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:1000px){
  .mtile-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
  .mtile{grid-column:span 2}
  .mtile:nth-child(4){grid-column:2 / span 2}
  .mtile:nth-child(5){grid-column:4 / span 2}
}

/* muffler cards: same frame for every photo; wider photos sit whole inside it instead of being cropped */
.mtile img{aspect-ratio:4/3;object-fit:contain;background:#101010}

/* muffler cards on phones: compact rows. Small whole photo on the left, text on the right */
@media (max-width:639px){
  .mtile-grid{gap:10px}
  .mtile{flex-direction:row;align-items:flex-start;gap:12px;padding:12px}
  .mtile img{width:118px;flex:none;border-radius:10px;aspect-ratio:4/3}
  .mtile-text{padding:0;gap:6px;min-width:0}
  .mtile-text::before{width:26px;height:3px}
  .mtile-name{font-size:1.05rem}
  .mtile-sum{font-size:.8rem;line-height:1.42}
}

/* muffler cards on phones v2: same layout as the Spitfire cards (140px photo left, centred beside the text, short description) */
.mtile-short{display:none}
@media (max-width:639px){
  .mtile{align-items:center;gap:12px;padding:12px}
  .mtile img{width:140px;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:10px;align-self:center}
  .mtile-text{align-content:center;gap:5px}
  .mtile-text::before{display:none}
  .mtile-name{font-size:1rem}
  .mtile-full{display:none}
  .mtile-short{display:block;font-size:.76rem;line-height:1.4}
}

/* label + heading + paragraph blocks (Who Is Nitrofuze Garage?): proper spacing */
.two .kicker{margin:0 0 8px}
.two h2{margin:0 0 16px}

/* documentary thumbnail: use the image's own 2:1 shape so its title is never cropped */
#documentary .vthumb{aspect-ratio:2/1}
#documentary .vthumb img{object-fit:contain;background:#0d0d0d}

/* spitfire cards: same red-bar highlight as the muffler cards (no hover effect: they are not links) */
.sf-item figcaption::before{content:"";width:34px;height:3px;background:var(--red);border-radius:2px;margin-bottom:2px}
@media (max-width:899px){.sf-item figcaption::before{width:26px}}

/* ===== documentary feature ===== */
.doc-pro{padding-block:clamp(56px,8vw,112px)}
.doc-head{display:grid;gap:clamp(18px,2.4vw,28px);margin-bottom:clamp(28px,4vw,52px)}
.doc-head h2{margin:0;font-size:clamp(2.4rem,7.2vw,5.6rem);line-height:.95;text-wrap:balance}
.doc-head h2::before{content:"";display:block;width:56px;height:4px;background:var(--red);border-radius:2px;margin-bottom:clamp(16px,2vw,24px)}
.doc-head p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--steel-light);max-width:60ch}
@media (min-width:900px){
  .doc-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:clamp(40px,6vw,96px)}
  .doc-head p{font-size:1.02rem;padding-bottom:.4em}
}
.doc-frame{display:block;width:100%;padding:0;border-radius:var(--radius-card)}
.doc-frame .vthumb{aspect-ratio:2/1;border-radius:var(--radius-card);overflow:hidden;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5);outline:1px solid rgba(255,255,255,.12);outline-offset:-1px}
.doc-frame .vthumb img{width:100%;height:100%;object-fit:contain;background:#0d0d0d;transition:transform 900ms var(--ease-out)}
.doc-frame .vthumb::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(8,8,8,.7) 0%,rgba(8,8,8,0) 34%)}
.doc-cta{position:absolute;left:clamp(12px,2.4vw,28px);bottom:clamp(12px,2.4vw,28px);z-index:2;display:inline-flex;align-items:center;gap:clamp(10px,1.4vw,16px);padding:8px clamp(14px,1.8vw,22px) 8px 8px;border-radius:999px;background:rgba(12,12,12,.78);border:1px solid rgba(255,255,255,.22);color:#fff;transition:background 220ms var(--ease-out),border-color 220ms var(--ease-out)}
.doc-play{display:grid;place-items:center;width:clamp(38px,4.4vw,56px);aspect-ratio:1;border-radius:50%;background:var(--red);flex:none}
.doc-play .ic{width:44%;height:44%;margin-left:6%}
.doc-cta-text{display:grid;gap:3px;text-align:left}
.doc-cta-text strong{font:700 clamp(.82rem,1.1vw,1rem)/1 var(--body)}
.doc-cta-text span{font:600 clamp(.7rem,.9vw,.8rem)/1 var(--body);letter-spacing:.14em;color:var(--steel-light)}
.doc-credit{margin:clamp(14px,1.6vw,20px) 0 0;font:700 .72rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
@media (hover:hover) and (pointer:fine){
  .doc-frame:hover .vthumb img{transform:scale(1.03)}
  .doc-frame:hover .doc-cta{background:rgba(226,0,0,.9);border-color:var(--red)}
  .doc-frame:hover .doc-play{background:#fff;color:var(--red)}
}
.doc-frame:focus-visible{outline:2px solid var(--white);outline-offset:4px}

/* documentary on phones: the button sits under the photo, never over it */
@media (max-width:899px){
  .doc-frame .vthumb{aspect-ratio:auto;overflow:visible;display:grid;gap:14px;box-shadow:none;outline:0;background:none}
  .doc-frame .vthumb::after{display:none}
  .doc-frame .vthumb img{height:auto;aspect-ratio:2/1;border-radius:var(--radius-card);box-shadow:0 20px 50px rgba(0,0,0,.45);outline:1px solid rgba(255,255,255,.12);outline-offset:-1px}
  .doc-cta{position:static;justify-self:start;padding:8px 20px 8px 8px}
  .doc-credit{font-size:.75rem;letter-spacing:.14em}
}

/* documentary title: two lines, second in the site blue; label above */
.doc-head .kicker{margin:0 0 -4px}
.doc-head h2::before{display:none}
.doc-head .kicker::after{content:"";display:block;width:56px;height:4px;background:var(--red);border-radius:2px;margin-top:14px}
.doc-line{display:block}
.doc-accent{color:var(--blue-light)}
.doc-head h2{font-size:clamp(2.4rem,6.4vw,5rem)}
.doc-title{display:grid;gap:0;min-width:0}
.doc-title h2{margin-top:14px}

/* ask kuya ron intro: three short lines */
#ask .sec-head{max-width:64ch}

/* ===== ask kuya ron: lesson path ===== */
.ask-pro{padding-block:clamp(56px,8vw,112px)}
.ask-head{display:grid;gap:clamp(24px,3vw,36px);margin-bottom:clamp(28px,4vw,52px)}
.ask-title-block .kicker{margin:0 0 -4px}
.ask-title-block .kicker::after{content:"";display:block;width:56px;height:4px;background:var(--red);border-radius:2px;margin-top:14px}
.ask-title-block h2{margin:14px 0 clamp(16px,2vw,24px);font-size:clamp(2.4rem,6.4vw,5rem);line-height:.95}
.ask-lead{margin:0;font-size:.9375rem;line-height:1.65;color:var(--steel-light);max-width:58ch}
.ask-stats{display:flex;gap:clamp(28px,5vw,64px);margin:0}
.ask-stats div{display:grid;gap:8px;align-content:start}
.ask-stats dt{order:2;font:700 .72rem/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--blue-light)}
.ask-stats dd{order:1;margin:0;font:800 clamp(3.4rem,8vw,6.2rem)/.85 var(--display);color:#fff;font-variant-numeric:tabular-nums}
@media (min-width:900px){
  .ask-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(40px,6vw,96px)}
}
.ask-body{display:grid;gap:clamp(28px,4vw,40px)}
.ask-flag{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:700 .72rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#fff}
.ask-flag span{width:26px;height:3px;background:var(--red);border-radius:2px}
.ask-feature .vcard{display:block;width:100%;max-width:300px}
.ask-feature .vthumb{border-radius:var(--radius-card)}
.ask-list{display:grid;gap:10px;align-content:start}
.ask-list .ask-flag{margin-bottom:6px}

/* lesson rows */
.vcard.ask-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:12px 16px 12px 14px;background:var(--grad-panel);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);text-align:left;color:inherit;transition:border-color 220ms var(--ease-out),background 220ms var(--ease-out),transform 160ms var(--ease-out)}
.ask-num{font:800 1.6rem/1 var(--display);color:var(--steel);min-width:2ch;font-variant-numeric:tabular-nums;transition:color 220ms var(--ease-out)}
.ask-thumb{display:block;width:56px;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#111;flex:none}
.ask-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ask-info{display:grid;gap:5px;min-width:0}
.ask-cat{font:700 .75rem/1.1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-light)}
.ask-title{font:800 clamp(1.05rem,1.3vw,1.25rem)/1.12 var(--display);text-transform:uppercase;color:#fff;text-wrap:balance}
.ask-dur{font:600 .76rem/1 var(--body);letter-spacing:.12em;color:var(--steel-light)}
.ask-play{display:grid;place-items:center;width:40px;aspect-ratio:1;border-radius:50%;background:var(--red);color:#fff;flex:none;transition:background 220ms var(--ease-out),color 220ms var(--ease-out),transform 200ms var(--ease-out)}
.ask-play .ic{width:44%;height:44%;margin-left:6%}
.vcard.ask-row:active{transform:scale(.99)}
.vcard.ask-row:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .vcard.ask-row:hover{border-color:rgba(226,0,0,.7);background:linear-gradient(180deg,#3a3a3a 0%,#262626 100%)}
  .vcard.ask-row:hover .ask-num{color:var(--red)}
  .vcard.ask-row:hover .ask-play{background:#fff;color:var(--red);transform:scale(1.06)}
}

/* desktop: featured video left at its natural vertical shape, lesson list right at the same height */
@media (min-width:900px){
  .ask-body{grid-template-columns:minmax(0,340px) minmax(0,1fr);column-gap:clamp(32px,5vw,72px);align-items:start}
  .ask-feature .vcard{max-width:none}
  .vcard.ask-row{padding:14px 20px 14px 18px;gap:20px}
  .ask-num{font-size:2rem}
  .ask-thumb{width:62px}
  .ask-play{width:46px}
}
/* phones: featured video at a modest size, four lessons */
@media (max-width:899px){
  .ask-feature .vcard{max-width:260px}
  .ask-list .ask-row:nth-of-type(n+5){display:none}
  .ask-stats dd{font-size:clamp(3rem,15vw,4.4rem)}
}
@media (max-width:420px){
  .vcard.ask-row{gap:11px;padding:10px 12px 10px 10px}
  .ask-num{font-size:1.25rem}
  .ask-thumb{width:48px}
  .ask-play{width:34px}
  .ask-title{font-size:.98rem}
}

/* ask kuya ron on phones: tighter */
@media (max-width:899px){
  .ask-pro{padding-block:44px}
  .ask-head{margin-bottom:26px;gap:22px}
  .ask-feature .vcard{max-width:232px}
  .ask-list .ask-row:nth-of-type(n+4){display:none}
  .ask-stats{gap:32px}
}

/* ===== ask kuya ron: premium carousel (swipe on phones, arrows on desktop) ===== */
.ask-slider{position:relative}
.ask-controls{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);margin-bottom:clamp(16px,2vw,24px)}
.ask-count{margin:0;font:800 1.6rem/1 var(--display);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.ask-count strong{font-weight:800}
.ask-count span{color:var(--steel)}
.ask-progress{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.ask-progress span{display:block;height:100%;width:0;background:var(--red);border-radius:2px;transition:width 160ms var(--ease-out)}
.ask-controls .slider-btns{margin:0;flex:none}
.ask-track.vrow{gap:14px;padding:4px max(var(--gutter),calc((100vw - 1240px)/2 + var(--gutter))) 20px;scroll-padding-inline:max(var(--gutter),calc((100vw - 1240px)/2 + var(--gutter)));scrollbar-width:none;contain:none}
.ask-track.vrow::-webkit-scrollbar{display:none}
.ask-track .vcard.ask-card{flex:0 0 clamp(210px,66vw,272px);scroll-snap-align:start}
.ask-card .vthumb{border-radius:var(--radius-card);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.ask-card .vthumb::after{background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.66) 36%,rgba(0,0,0,0) 68%)}
.ask-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:7px;padding:16px 14px 16px}
.ask-no{font:800 2.6rem/.8 var(--display);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.75);letter-spacing:.01em}
.ask-topic{font:700 .75rem/1.1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-light)}
.ask-name{font:800 1.15rem/1.06 var(--display);text-transform:uppercase;color:#fff;text-wrap:balance}
@media (hover:hover) and (pointer:fine){
  .ask-card .vthumb img{transition:transform 700ms var(--ease-out)}
  .ask-card:hover .vthumb img{transform:scale(1.04)}
  .ask-card:hover .ask-no{-webkit-text-stroke-color:var(--red)}
}
.ask-card:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (max-width:899px){.ask-pro{padding-block:44px}.ask-head{margin-bottom:26px}}

/* ask kuya ron v2: refined intro (three ruled lines), tighter stats, softer carousel edge */
.ask-points{list-style:none;margin:0;padding:0;max-width:52ch;border-bottom:1px solid rgba(255,255,255,.14)}
.ask-points li{padding:13px 0;border-top:1px solid rgba(255,255,255,.14);font-size:.95rem;line-height:1.45;color:#e6e6e6;text-wrap:balance}
.ask-points li:first-child{color:#fff;font-weight:600}
.ask-stats{padding-top:0}
@media (max-width:899px){
  .ask-head{gap:22px;margin-bottom:24px}
  .ask-title-block h2{margin-bottom:16px}
  .ask-stats{gap:0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);padding:16px 0}
  .ask-stats div{flex:1;gap:8px}
  .ask-stats div + div{border-left:1px solid rgba(255,255,255,.14);padding-left:20px}
  .ask-stats dd{font-size:clamp(2.6rem,13vw,3.6rem)}
  .ask-stats dt{font-size:.75rem;letter-spacing:.14em}
}
@media (min-width:900px){
  .ask-track.vrow{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 64px),transparent)}
  .ask-stats div + div{border-left:1px solid rgba(255,255,255,.14);padding-left:clamp(28px,5vw,64px)}
  .ask-stats{gap:clamp(28px,5vw,64px)}
}

/* ask kuya ron: with the stats gone, the header is a single column */
@media (min-width:900px){.ask-head{grid-template-columns:minmax(0,1fr)}}

/* ask kuya ron intro: plain paragraph, same type as the other section intros */
.ask-lead{margin:0;font-size:.9375rem;line-height:1.55;color:var(--steel-light);max-width:60ch}

/* muffler cards: six cards fill a clean 3 x 2 grid on desktop */
@media (min-width:1000px){.mtile:nth-child(4),.mtile:nth-child(5){grid-column:span 2}}

/* ===== variety of mufflers: premium header + numbered cards ===== */
.muf-pro{padding-block:clamp(56px,8vw,112px)}
.muf-head{display:grid;gap:clamp(18px,2.4vw,28px);margin-bottom:clamp(28px,4vw,52px)}
.muf-title .kicker{margin:0 0 -4px}
.muf-title .kicker::after{content:"";display:block;width:56px;height:4px;background:var(--red);border-radius:2px;margin-top:14px}
.muf-title h2{margin:14px 0 0;font-size:clamp(2.4rem,6.4vw,5rem);line-height:.95;text-wrap:balance}
.muf-lead{margin:0;font-size:.9375rem;line-height:1.6;color:var(--steel-light);max-width:58ch}
@media (min-width:900px){
  .muf-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:clamp(40px,6vw,96px)}
  .muf-lead{font-size:1.02rem;padding-bottom:.4em}
}
.mtile-grid{counter-reset:muf}
.mtile{counter-increment:muf;position:relative}
.mtile::before{content:counter(muf,decimal-leading-zero);position:absolute;z-index:2;top:12px;left:12px;padding:7px 11px;border-radius:999px;font:800 .76rem/1 var(--body);letter-spacing:.14em;color:#fff;background:rgba(14,14,14,.62);border:1px solid rgba(255,255,255,.28)}
@media (max-width:639px){.mtile::before{display:none}}
.mtile-name{font-size:clamp(1.3rem,1.7vw,1.6rem)}
.mtile-text::after{content:"Explore \2192";margin-top:6px;font:700 .72rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-light);transition:transform 200ms var(--ease-out),color 200ms var(--ease-out)}
@media (max-width:639px){.mtile-text::after{display:none}}
@media (hover:hover) and (pointer:fine){.mtile:hover .mtile-text::after{transform:translateX(4px);color:#fff}}

/* variety of mufflers header: same stacked layout as Ask Kuya Ron */
.muf-head{display:block}
.muf-title h2{margin-bottom:clamp(16px,2vw,24px)}
@media (min-width:900px){.muf-head{display:block}.muf-lead{padding-bottom:0;font-size:.9375rem}}

/* our shop: four photos in justified rows (equal height per row, nothing cropped) */
.shop-gallery{display:grid;gap:12px}
.shop-row{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.shop-row img{display:block;width:100%;height:auto;border-radius:var(--radius-card);outline:1px solid rgba(255,255,255,.09);outline-offset:-1px}
@media (min-width:700px){
  .shop-gallery{gap:16px}
  .shop-row{gap:16px;grid-template-columns:calc(var(--r-a,1)*1fr) 1fr;display:flex;align-items:flex-start}
  .shop-row img{flex:var(--r) 1 0;min-width:0}
}

/* brands: all-black section, white heading, logos on the same black */
#brands.band-light{background:#000;color:#fff;border-block:1px solid #262626}
#brands h2{color:#fff}
#brands .brand-row{background:transparent;border:0;box-shadow:none;outline:0;padding-inline:0}

/* ===== footer: editorial intro, navigation, credential panel, legal strip ===== */
.ft-pro{background:linear-gradient(180deg,#1c1c1c 0%,#101010 55%,#0a0a0a 100%);border-top:1px solid #2c2c2c;padding-top:clamp(48px,7vw,96px);color:#c9c9c9}
.ft-pro .wrap{max-width:1440px}
.ft-title{margin:0 0 clamp(14px,2vw,22px);font:800 clamp(2rem,4.6vw,3.6rem)/1 var(--display);text-transform:uppercase;letter-spacing:.008em;color:#f2f2f2;text-wrap:balance;max-width:20ch}
.ft-lead p{margin:0;max-width:96ch;font-size:.98rem;line-height:1.7;color:#b8b8b8}
.ft-blocks{display:grid;gap:clamp(24px,3vw,36px);margin-top:clamp(32px,4vw,52px);padding-top:clamp(28px,3vw,40px);border-top:1px solid #303030}
.ft-block{padding-left:0}
.ft-bh{margin:0 0 10px;font:800 clamp(1.15rem,1.6vw,1.4rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:#ececec;text-wrap:balance}
.ft-block p{margin:0;font-size:.9rem;line-height:1.65;color:#a9a9a9;max-width:56ch}
.ft-motto{margin:clamp(26px,3vw,40px) 0 0;font:800 clamp(1.4rem,2.6vw,2rem)/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:#fff}
.ft-motto::before{content:"";display:block;width:56px;height:4px;background:var(--red);border-radius:2px;margin-bottom:16px}
@media (min-width:900px){.ft-blocks{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(32px,4vw,64px)}}

.ft-main{display:grid;gap:clamp(36px,4vw,56px);margin-top:clamp(44px,6vw,80px);padding-top:clamp(36px,4vw,56px);border-top:1px solid #303030}
.ft-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
.ft-h{margin:0 0 16px;font:800 1.05rem/1 var(--display);text-transform:uppercase;letter-spacing:.14em;color:#f2f2f2}
.ft-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ft-list a{display:block;padding:8px 0;color:#a9a9a9;text-decoration:none;font-size:.92rem;line-height:1.3;transition:color 180ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ft-list a:hover{color:#fff}}
.ft-list a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ft-h-creds{margin-bottom:18px}
.ft-badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ft-badges img{display:block;width:100%;height:auto;mix-blend-mode:lighten}
@media (min-width:1000px){
  .ft-main{grid-template-columns:minmax(0,1fr) minmax(300px,360px);column-gap:clamp(40px,5vw,80px)}
  .ft-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px}
  .ft-creds{padding-left:clamp(32px,4vw,64px);border-left:1px solid #303030}
}

.ft-base{display:grid;gap:22px;align-items:center;margin-top:clamp(40px,5vw,64px);padding-block:28px clamp(32px,4vw,44px);border-top:1px solid #303030}
.ft-brand{display:grid;gap:10px;justify-items:start}
.ft-brand img{width:150px;height:auto}
.ft-brand p{margin:0;font:700 .7rem/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#8d8d8d}
.ft-legal{display:grid;gap:8px}
.ft-legal p{margin:0;font-size:.85rem;color:#8d8d8d}
.ft-links a{color:#b8b8b8;text-decoration:underline;text-underline-offset:3px;padding-block:6px;display:inline-block}
@media (hover:hover) and (pointer:fine){.ft-links a:hover{color:#fff}}
.ft-social{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.ft-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid #3a3a3a;color:#b8b8b8;transition:color 180ms var(--ease-out),border-color 180ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ft-social a:hover{color:#fff;border-color:#8d8d8d}}
.ft-social a:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (min-width:900px){.ft-base{grid-template-columns:auto 1fr auto;column-gap:clamp(32px,5vw,80px)}}
@media (max-width:899px){.site-footer.ft-pro{padding-bottom:64px}}

/* footer colours sampled from the reference: charcoal #3e3e3e fading to #1f1f1f, silver text */
.ft-pro{background:linear-gradient(180deg,#3e3e3e 0%,#343434 40%,#2b2b2b 65%,#1f1f1f 100%);border-top:1px solid #4a4a4a;color:#a1a1a2}
.ft-title{color:#f4f4f4}
.ft-lead p{color:#b3b3b3}
.ft-bh{color:#d6d6d6}
.ft-block p{color:#a1a1a2}
.ft-motto{color:#f4f4f4}
.ft-blocks,.ft-main,.ft-base{border-top-color:#4a4a4a}
.ft-creds{border-left-color:#4a4a4a}
.ft-h{color:#f8f8f8}
.ft-list a{color:#a7a5a7}
.ft-brand p{color:#9a9a9a}
.ft-legal p{color:#9a9a9a}
.ft-links a{color:#bababa}
.ft-social a{border-color:#5a5a5a;color:#bababa}
@media (hover:hover) and (pointer:fine){.ft-social a:hover{border-color:#bababa}}

/* brands + footer read as one continuous charcoal surface (footer gradient starts at the brands colour) */
#brands.band-light{background:#3e3e3e;border-block:0;color:#fff}
.ft-pro{border-top:0}
#brands + .site-footer,.site-footer.ft-pro{margin-top:0}
.ft-pro .wrap:first-child::before{content:"";display:block;height:1px;background:#4a4a4a;margin-bottom:clamp(40px,6vw,80px);margin-top:calc(-1 * clamp(8px,2vw,24px))}
.ft-pro{padding-top:clamp(20px,3vw,40px)}

/* brands: black again; the footer below keeps its charcoal gradient */
#brands.band-light{background:#000;border-block:1px solid #262626}
.ft-pro .wrap:first-child::before{display:none}
.ft-pro{padding-top:clamp(48px,7vw,96px);border-top:0}

/* ===== taste pass (2026-09-25): redesign-existing-projects audit fixes ===== */
/* surfaces: no pure black; one warm-neutral off-black family; fine film grain over everything */
:root{--deep:#0B0B0B}
.site-header{background:#0B0B0B}
#brands.band-light{background:#0B0B0B;border-block:1px solid #222}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.band-light{background:linear-gradient(180deg,#F3F2F0 0%,#E9E8E5 100%)}

/* typography: small grey copy was 13px on desktop; lift it to a readable size and stop orphans */
p,li,blockquote{text-wrap:pretty}
.hero-sub{font:400 clamp(1rem,1.15vw,1.125rem)/1.55 var(--body);max-width:44ch;color:#EDEDED}
.sec-head p,.grp-note,.feature-text p,.finder-result p,.visit p,.page-head p,.o-txt,.mini dd,.tile-sum,.sf-overlay p,.foot-brand p{font-size:.9375rem;line-height:1.6}
@media (min-width:900px){.sec-head p,.page-head p,.visit p,.feature-text p{font-size:1rem}.how-step p{font-size:.9375rem}}
.sec-head p,.muf-lead,.ask-lead,.doc-head p{max-width:62ch}

/* section heads: every home section gets the same red rule above its title */
#choose-us .sec-head h2::before,#services .sec-head h2::before,#how-it-works .sec-head h2::before,#brands .sec-head h2::before{content:"";display:block;width:56px;height:4px;background:var(--red);border-radius:2px;margin-bottom:clamp(16px,2vw,22px)}

/* how it works: from four white template cards to an open numbered sequence */
.how-works{gap:0;counter-reset:step}
.how-step{background:none;border:0;border-radius:0;box-shadow:none;align-items:flex-start;text-align:left;gap:10px;padding:22px 0 0;border-top:1px solid #CFCDC8}
.how-step .num{width:auto;height:auto;border-radius:0;background:none;color:var(--red);font:800 clamp(2.6rem,4vw,3.4rem)/.9 var(--display);display:block}
.how-step .num::before{content:counter(step,decimal-leading-zero)}
.how-step img{width:28px;height:28px;margin:4px 0 2px;filter:grayscale(1) brightness(.35)}
.how-step h4{font-size:1.2rem}
.how-step p{text-align:left}
@media (min-width:700px){
  .how-works{gap:0 clamp(24px,3vw,40px)}
  .how-step:not(:last-child)::after{display:none}
}
@media (max-width:699px){.how-works{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 20px}}

/* review cards: drop the border + shadow card look; paper tiles separated by space only */
.reviews-pro .rv-grid .rv{border:0;box-shadow:none;background:rgba(255,255,255,.72)}
.reviews-pro .rv-grid .rv figcaption{border-top-color:#E4E2DE}

/* optical rhythm: a little more room under each section than above it */
.section{padding-bottom:calc(clamp(48px,7vw,88px) + 12px)}

/* ===== colour system (2026-09-25, design-taste-frontend): one dark theme, steel neutrals, logo red as the only accent ===== */
:root{
  --red:#DC1F1F; --red-press:#B51717;          /* logo red, calibrated a touch below full saturation */
  --blue:#8F8F8F; --blue-light:#B3B3B3;        /* retired: the old blue slots now resolve to steel */
  --white:#F2F2F2; --steel-light:#CFCFCF;
  --raised:#1E1E1E;                            /* the "lifted" band that replaces the light sections */
  --ink:#F2F2F2; --ink-soft:#B3B3B3;
}
body{color:var(--white)}
::selection{background:var(--red);color:#fff}

/* theme lock: former light bands become raised graphite */
.band-light{background:linear-gradient(180deg,#222 0%,var(--raised) 100%);color:var(--white);border-block:1px solid #2C2C2C}
.band-light .sec-head p,.rv-note,.how-step p,.rv-sub{color:var(--ink-soft)}
#brands.band-light{background:#0E0E0E;border-block:1px solid #222}
.site-header,.mobile-bar{background:#0E0E0E}

/* accent words in headlines: red, same family, no second hue */
.hero h1 .hl-accent,.doc-accent{color:var(--red)}

/* small labels: steel, never coloured */
.kicker,.sec-head p.kicker,.band-light .kicker,.band-light .sec-head p.kicker,.rv-lab,.vtag,.ask-topic,.ask-cat,.ask-stats dt{color:#B0B0B0}
.tile-cta,.mtile-text::after{color:var(--white)}
.tile-grid-6 .tile-sum{color:var(--steel-light);font-weight:400}

/* reviews on graphite */
.rv-num{color:var(--white)}
.rv-track{stroke:#333}
.reviews-pro .rv-grid .rv{background:#262626}
.reviews-pro .rv-grid .rv figcaption{border-top-color:#353535}
.reviews-pro .rv-feature blockquote p{color:var(--white)}

/* how it works on graphite */
.how-step{border-top-color:#3A3A3A}
.how-step img{filter:grayscale(1) invert(1) brightness(.8)}

/* red is saved for actions and the few accents: soften the big button glow */
.btn-red{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px rgba(0,0,0,.35)}
/* elements that sit on white keep dark text */
.skip,.toast,.chip.is-on{color:#171717}
.chip.is-on{background:var(--white);border-color:var(--white)}
.ci-card{background:#262626;border-color:#333}

/* footer badges: smaller seals (about 110px) so they support the footer instead of dominating it */
.ft-badges{grid-template-columns:repeat(2,minmax(0,112px));gap:14px 18px}
@media (max-width:999px){.ft-badges{grid-template-columns:repeat(2,minmax(0,120px));gap:14px 20px}}
@media (max-width:999px){.ft-badges{justify-content:center}.ft-h-creds{text-align:center}}

/* ===== meet the team: one wide crew photo, the two owners below it ===== */
#team .sec-head h2::before{content:"";display:block;width:56px;height:4px;background:var(--red);border-radius:2px;margin-bottom:clamp(16px,2vw,22px)}
.team-photo{margin:0}
.team-photo img,.team-owners img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-card);outline:1px solid rgba(255,255,255,.09);outline-offset:-1px}
.team-owners{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,28px);margin-top:clamp(20px,3vw,28px)}
.team-owners figure{margin:0}
.team-owners figcaption{display:grid;gap:4px;padding-top:14px}
.team-owners figcaption strong{font:800 clamp(1.3rem,2vw,1.6rem)/1.05 var(--display);text-transform:uppercase;letter-spacing:.008em}
.team-owners figcaption span{font-size:.9375rem;color:var(--steel)}
@media (min-width:700px){.team-owners{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== critique fixes (2026-09-25) ===== */
/* phones: the Ask carousel's entrance must never widen the page (it pushed the bottom bar off-centre) */
.ask-slider,main{overflow-x:clip}

/* how it works: step titles are h3 now (no h2 > h4 skip); closing Message/Call row */
.how-step h3{margin:0;font:800 1.2rem/1.15 var(--display);text-transform:uppercase}
#how-it-works .cta-row{margin-top:clamp(28px,4vw,40px)}

/* phones: one Menu button instead of six 10px links */
@media (max-width:699px){
  .menu-btn{display:block;margin-left:auto;flex:none;border-color:#4A4A4A}
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0;position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:55;margin:0;padding:8px var(--gutter) calc(96px + env(safe-area-inset-bottom));background:#0E0E0E;overflow-y:auto;overscroll-behavior:contain}
  .nav.open a:not(.btn){font-size:1.75rem;letter-spacing:.01em;padding:16px 0;border-bottom:1px solid #262626;min-height:56px}
  .nav.open a:not(.btn)+a:not(.btn)::before{display:none}
  .nav.open a[aria-current="page"]{color:var(--red);border-bottom-color:#262626}
  .nav.open .nav-msg{display:none}
}
@media (max-width:699px) and (prefers-reduced-motion:no-preference){
  .nav.open{animation:fadeup 220ms var(--ease-out)}
}

/* phones: shorter page. Why tiles in a 2 x 2 grid, footer essays left to the About page */
@media (max-width:639px){
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .why-tile{aspect-ratio:4/5}
  .why-tile h3{font-size:1.25rem}
  .why-cap{padding:12px;gap:8px}
  .why-num{font-size:.7rem;padding:6px 9px;min-width:0}
}
@media (max-width:699px){.ft-blocks{display:none}}

/* ===== critique leftovers (2026-09-25) ===== */
/* labels were ~10px: 12px floor */
.ask-topic,.vtag,.ask-cat{font-size:.75rem;letter-spacing:.12em}
.why-num{font-size:.75rem}

/* contrast: grey text on the lighter charcoal panels lifted to at least 4.5:1 */
.kicker,.sec-head p.kicker,.band-light .kicker,.band-light .sec-head p.kicker,.rv-lab,.ask-stats dt{color:#ADADAD}
.ft-block p,.ft-lead p{color:#C4C4C4}
.ft-brand p,.ft-legal p,.ft-list a{color:#B8B8B8}
.foot-base,.foot-brand p{color:#B8B8B8}

/* text on red is pure white (4.9:1), and red buttons cast a neutral shadow, not a red glow */
.btn-red,.mb-msg{color:#fff}
.btn-red{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px rgba(0,0,0,.35)}
@media (hover:hover) and (pointer:fine){
  .btn-red:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 22px rgba(0,0,0,.45)}
  .tile:hover .tile-cta{color:#fff}
}

/* ===== "Tell us your car" message builder (right under the hero) ===== */
.msgb{padding-block:clamp(36px,5vw,64px)}
.msgb-panel{display:grid;gap:clamp(20px,3vw,40px);background:linear-gradient(180deg,#232323 0%,#1C1C1C 100%);border:1px solid #2E2E2E;border-radius:var(--radius-card);padding:clamp(22px,3.4vw,40px)}
.msgb-head h2::before{content:"";display:block;width:56px;height:4px;background:var(--red);border-radius:2px;margin-bottom:clamp(14px,2vw,20px)}
.msgb-head p{margin:14px 0 0;max-width:46ch;font-size:1rem;line-height:1.6;color:var(--steel-light)}
.msgb-form{display:grid;gap:18px;min-width:0}
.msgb-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.msgb-fields label{display:grid;gap:6px}
.msgb-fields span,.msgb-goals legend,.msgb-label{font-size:.8125rem;color:#ADADAD;margin:0;padding:0}
.msgb select{width:100%;min-height:48px;padding:0 36px 0 12px;background-color:#2A2A2A;color:var(--white);border:1px solid #4A4A4A;border-radius:var(--radius-ui);font:500 1rem var(--body);appearance:none;background-image:linear-gradient(45deg,transparent 50%,#ADADAD 50%),linear-gradient(135deg,#ADADAD 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat;transition:border-color 160ms var(--ease-out)}
.msgb select:disabled{opacity:.45}
@media (hover:hover) and (pointer:fine){.msgb select:not(:disabled):hover{border-color:#7A7A7A}}
.msgb-goals{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.msgb-chips{display:flex;flex-wrap:wrap;gap:8px}
.msgb-msg{display:block;background:#141414;border:1px solid #333;border-radius:var(--radius-ui);padding:14px 16px;font-size:1rem;line-height:1.55;color:var(--white);margin-top:-10px}
.msgb .cta-row{margin-top:0}
.msgb .cta-row .btn{gap:10px}
.msgb-note{margin:0;font-size:.875rem;line-height:1.5;color:#ADADAD;max-width:62ch}
@media (min-width:640px){.msgb-fields{grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,.8fr)}}
@media (min-width:1000px){.msgb-panel{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);align-items:start}}
@media (max-width:639px){.msgb .cta-row .btn-red{flex:1 1 100%}}
/* goal buttons: Sound, Looks and Performance always share one row */
.msgb-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:460px}
.msgb-chips .chip{padding:0 6px;white-space:nowrap;text-align:center}
@media (max-width:639px){.msgb-panel{padding:22px 18px}.msgb-chips .chip{font-size:.875rem}}

/* ===== section redesign (2026-09-25) ===== */
/* numbers only where order matters (How it works): drop the 01/02 badges elsewhere */
.why-num,.mtile::before,.ask-no{display:none}

/* services on Home: a workshop menu board, not a card grid */
.svc-list{display:grid;border-top:1px solid #333}
.svc-list>.reveal{display:block}
.svc-list .tile{display:grid;grid-template-columns:clamp(112px,16vw,220px) minmax(0,1fr) auto;align-items:center;gap:clamp(16px,3vw,40px);aspect-ratio:auto;min-height:0;padding:clamp(14px,2vw,22px) 0;background:none;border-radius:0;border-bottom:1px solid #333;box-shadow:none;outline:0;overflow:visible}
.svc-list .tile::after{display:none}
.svc-list .tile img{position:static;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;outline:1px solid rgba(255,255,255,.09);outline-offset:-1px;transition:transform 300ms var(--ease-out)}
.svc-list .tile-text{position:static;padding:0;display:contents}
.svc-list .tile-name{font:800 clamp(1.5rem,3.4vw,2.9rem)/1 var(--display);text-transform:uppercase;letter-spacing:.005em;color:var(--white);transition:color 200ms var(--ease-out);text-wrap:balance}
.svc-list .tile-cta{justify-self:end;background:transparent;border:1px solid #5C5C5C;color:var(--white)}
@media (hover:hover) and (pointer:fine){
  .svc-list .tile:hover .tile-name{color:var(--red)}
  .svc-list .tile:hover img{transform:scale(1.03)}
  .svc-list .tile:hover .tile-cta{background:var(--red);border-color:var(--red);color:#fff}
}
.svc-list .tile:focus-visible{outline:2px solid var(--white);outline-offset:4px}
@media (max-width:699px){
  .svc-list .tile{grid-template-columns:104px minmax(0,1fr);row-gap:10px}
  .svc-list .tile-text{display:grid;gap:10px;justify-items:start}
  .svc-list .tile-name{font-size:1.3rem;line-height:1.05}
  .svc-list .tile-cta{justify-self:start;font-size:.76rem;padding:7px 12px}
}

/* reviews: an uneven wall of quotes instead of a neat grid */
.reviews-pro .rv-grid{display:block;columns:3 280px;column-gap:16px}
.reviews-pro .rv-grid>.rv{break-inside:avoid;margin:0 0 16px;display:flex}
.reviews-pro .rv-grid>.rv:nth-child(3n+2){background:#2C2C2C}
.reviews-pro .rv-grid>.rv:nth-child(4n+1) blockquote p{font-size:1.0625rem;line-height:1.5}

/* closing: one full-width shop photo and the invitation */
.closing{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(72px,11vw,150px);background:#0E0E0E}
.closing-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.55}
.closing::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,14,14,.94) 0%,rgba(14,14,14,.78) 45%,rgba(14,14,14,.35) 100%),linear-gradient(0deg,rgba(14,14,14,.9) 0%,rgba(14,14,14,0) 40%)}
.closing h2{font-size:clamp(2.6rem,7vw,5.5rem);line-height:.95;max-width:12ch}
.closing h2::before{content:"";display:block;width:56px;height:4px;background:var(--red);border-radius:2px;margin-bottom:clamp(16px,2vw,24px)}
.closing-info{margin:clamp(24px,3vw,36px) 0 0;display:grid;gap:12px;max-width:560px}
.closing-info div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:12px;align-items:baseline}
.closing-info dt{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:#ADADAD}
.closing-info dd{margin:0;font-size:1.0625rem;color:var(--white)}
.closing .cta-row{margin-top:clamp(28px,3vw,40px)}
@media (max-width:699px){.closing::before{background:linear-gradient(0deg,rgba(14,14,14,.95) 0%,rgba(14,14,14,.8) 60%,rgba(14,14,14,.55) 100%)}}

/* ===== signature detail (2026-09-25): a brushed-stainless strip ending in a red weld bead, above every section heading ===== */
:root{
  --weld:linear-gradient(90deg,var(--red),var(--red)) right center/12px 100% no-repeat,
         linear-gradient(90deg,#5E5E5E 0%,#D8D8D8 28%,#8C8C8C 52%,#E4E4E4 74%,#767676 100%) left center/calc(100% - 16px) 100% no-repeat;
}
#choose-us .sec-head h2::before,#services .sec-head h2::before,#how-it-works .sec-head h2::before,#brands .sec-head h2::before,
#team .sec-head h2::before,.msgb-head h2::before,.closing h2::before,
.doc-head .kicker::after,.ask-title-block .kicker::after,.muf-title .kicker::after{width:76px;height:4px;border-radius:2px;background:var(--weld)}
.fp-lead::before,.ft-motto::before{width:76px;background:var(--weld)}

/* ===== type scale (2026-09-25): clear steps. Hero 1 > closing 2 > section titles 3 > card titles > body ===== */
.hero h1{font-size:clamp(3rem,8vw,5.75rem);line-height:.98}
.sec-head h2,.fp-head h2,.muf-title h2,.ask-title-block h2,.doc-head h2,.msgb-head h2{font-size:clamp(2.4rem,5.8vw,4.5rem);line-height:.95;letter-spacing:.005em}
#spitfire .sec-head h2,#brands .sec-head h2{font-size:clamp(2.2rem,5vw,3.75rem)}
.closing h2{font-size:clamp(2.8rem,7.6vw,6rem)}
@media (min-width:900px){.sec-head p,.muf-lead,.ask-lead,.doc-head p,.msgb-head p{font-size:1.0625rem;line-height:1.6}}
.closing h2{max-width:16ch}

/* visit map: taller on desktop, rounded like the photos, and colour kept so the red pin and name stand out */
.map{min-height:0;border:0;border-radius:var(--radius-card);overflow:hidden;outline:1px solid rgba(255,255,255,.09);outline-offset:-1px}
.map iframe{min-height:300px;height:300px;filter:grayscale(.35) contrast(1.02)}
@media (min-width:900px){.map iframe{height:460px;min-height:460px}}

/* ===== sound cards: Hear the build (Home) and the Sound Library ===== */
.snd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px}
.snd-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:1000px){.snd-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.snd{display:flex;flex-direction:column;background:#232323;border-radius:var(--radius-card);overflow:hidden;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;transition:outline-color 200ms var(--ease-out)}
.snd[hidden]{display:none}
.snd.is-playing{outline-color:rgba(220,31,31,.8)}
.snd-media{position:relative;aspect-ratio:4/3;background:#111}
.snd-media img{width:100%;height:100%;object-fit:cover;display:block}
.snd-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,0) 45%);pointer-events:none}
.snd-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.snd-play>span{display:grid;place-items:center;width:clamp(52px,6vw,64px);aspect-ratio:1;border-radius:50%;background:var(--red);box-shadow:0 6px 18px rgba(0,0,0,.4);transition:transform 200ms var(--ease-out),background 200ms var(--ease-out)}
.snd-play .ic{width:44%;height:44%}
.snd-i-play .ic{margin-left:6%}
.snd-i-pause{display:none!important}
.snd.is-playing .snd-i-play{display:none!important}
.snd.is-playing .snd-i-pause{display:grid!important;background:#fff;color:var(--red)}
.snd-play:active>span{transform:scale(.94)}
.snd-play:focus-visible{outline:2px solid #fff;outline-offset:-6px}
@media (hover:hover) and (pointer:fine){.snd-play:hover>span{transform:scale(1.07)}}
.snd-dur{position:absolute;right:10px;bottom:12px;z-index:1;padding:3px 8px;border-radius:6px;background:rgba(10,10,10,.75);font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.snd-bar{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;background:rgba(255,255,255,.12)}
.snd-bar span{display:block;height:100%;width:100%;background:var(--red);transform:scaleX(var(--p,0));transform-origin:left}
.snd-body{display:grid;gap:10px;padding:14px 16px 18px;align-content:start}
.snd-body h3{margin:0;font:800 clamp(1.25rem,1.6vw,1.5rem)/1.05 var(--display);text-transform:uppercase}
.snd-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#ADADAD}
.snd-level{display:inline-flex;align-items:center;gap:7px;color:var(--white)}
.snd-bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.snd-bars i{display:block;width:4px;border-radius:1px;background:#4A4A4A}
.snd-bars i:nth-child(1){height:5px}.snd-bars i:nth-child(2){height:8px}.snd-bars i:nth-child(3){height:12px}
.lvl-1 .snd-bars i:nth-child(-n+1),.lvl-2 .snd-bars i:nth-child(-n+2){background:#D6D6D6}
.lvl-3 .snd-bars i{background:var(--red)}
.snd .specs{gap:6px}
.snd .specs div{grid-template-columns:4.5rem minmax(0,1fr);font-size:.9375rem}
@media (max-width:639px){
  .snd-grid-4 .snd-body{padding:10px 12px 14px;gap:8px}
  .snd-grid-4 .specs{display:none}
  .snd-grid-4 .snd-body h3{font-size:1.05rem}
  .snd-grid-4 .snd-meta{flex-direction:column;align-items:flex-start;gap:4px;font-size:.75rem}
}
.snd-filters{display:grid;gap:10px;margin:0 0 24px}
.snd-filters .chips{margin:0}
#sounds + .none + .grp,#sounds + .grp{margin-top:clamp(48px,6vw,72px)}

/* ===== best builds row (Home): swipe on phones, arrows on desktop ===== */
.snd-rowwrap{position:relative}
.snd-arrows{margin:0 0 16px}
@media (min-width:700px){.snd-arrows{position:absolute;right:0;top:-72px;margin:0}}
.snd-row.vrow{gap:14px;padding-bottom:18px;contain:paint;scrollbar-width:thin}
.snd-row .snd{flex:0 0 clamp(240px,72vw,290px);scroll-snap-align:start}
.snd-row .snd .specs div{font-size:.875rem}
.snd-row:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* ===== Find your car in our builds: the Facebook search guide ===== */
.fbg{margin-top:clamp(40px,6vw,64px);padding:clamp(22px,3.4vw,40px);background:linear-gradient(180deg,#232323 0%,#1C1C1C 100%);border:1px solid #2E2E2E;border-radius:var(--radius-card);display:grid;gap:clamp(20px,3vw,28px)}
.fbg-head h3{margin:0;font:800 clamp(1.8rem,3.6vw,2.6rem)/1 var(--display);text-transform:uppercase}
.fbg-head p{margin:12px 0 0;max-width:56ch;font-size:1rem;line-height:1.6;color:var(--steel-light)}
.fbg-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;counter-reset:none}
.fbg-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n t" "n ui";column-gap:14px;row-gap:12px;align-items:start;padding:16px;background:#161616;border:1px solid #2C2C2C;border-radius:14px}
.fbg-n{grid-area:n;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;font:800 1.2rem/1 var(--display)}
.fbg-steps p{grid-area:t;margin:0;font-size:1rem;line-height:1.5;color:var(--white)}
.fbg-steps strong{font-weight:700}
.fbg-ui{grid-area:ui;justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:10px;background:#F2F2F2;color:#171717;font:600 .9375rem/1 var(--body)}
.fbg-ui .ic{width:18px;height:18px}
.fbg-dots{gap:4px;padding:0 12px;border-radius:999px}
.fbg-dots i{display:block;width:6px;height:6px;border-radius:50%;background:#171717}
.fbg-field{background:#E9E9E9;color:#4A4A4A;font-weight:500;min-width:min(100%,220px)}
.fbg-cta{margin:0}
@media (min-width:900px){.fbg-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ===== photos in the text-heavy sections (2026-09-25) ===== */
/* Tell us your car: showroom photo under the heading (desktop) */
.msgb-img{display:none}
@media (min-width:1000px){.msgb-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin-top:24px;border-radius:12px;outline:1px solid rgba(255,255,255,.09);outline-offset:-1px}}

/* Reviews: the lounge beside the big quote */
.rv-split{display:grid;gap:clamp(20px,3vw,48px);align-items:center;margin-bottom:clamp(36px,5vw,64px)}
.rv-split .rv-feature{margin:0}
.rv-photo{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-card);outline:1px solid rgba(255,255,255,.09);outline-offset:-1px}
@media (min-width:900px){.rv-split{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.rv-photo{aspect-ratio:4/3}}

/* How it works: finished car beside the steps */
.how-split{display:grid;gap:clamp(24px,3vw,48px)}
.how-photo{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 60%;border-radius:var(--radius-card);outline:1px solid rgba(255,255,255,.09);outline-offset:-1px;order:-1}
@media (min-width:1000px){
  .how-split{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
  .how-photo{order:0;aspect-ratio:1}
  .how-split .how-works{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
}

/* Home: one-line Facebook pointer */
.fbg-short{margin-top:clamp(28px,4vw,40px);padding:clamp(18px,2.6vw,28px);display:grid;gap:16px;background:#1C1C1C;border:1px solid #2E2E2E;border-radius:var(--radius-card)}
.fbg-short p{margin:0;max-width:60ch;font-size:1rem;line-height:1.55;color:var(--steel-light)}
.fbg-short strong{color:var(--white)}
.fbg-short-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
@media (min-width:900px){.fbg-short{grid-template-columns:minmax(0,1fr) auto;align-items:center}}

/* ===== layout plan (2026-09-25) ===== */
/* Mufflers + Spitfire: Spitfire is the big band, the six origins a compact strip under it */
.muf-spit{margin-top:clamp(8px,2vw,16px)}
.muf-spit-h,.muf-strip-h{margin:0 0 14px;font:800 clamp(1.3rem,2vw,1.6rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--white)}
.muf-strip-h{margin-top:clamp(40px,5vw,64px)}
.muf-strip.mtile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.muf-strip .mtile{flex-direction:column;align-items:stretch;padding:0;gap:0;grid-column:auto!important}
.muf-strip .mtile img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;background:#101010}
.muf-strip .mtile-text{padding:12px 14px 14px;gap:4px}
.muf-strip .mtile-text::before,.muf-strip .mtile-text::after,.muf-strip .mtile-full{display:none}
.muf-strip .mtile-short{display:block;font-size:.8125rem;line-height:1.4;color:var(--steel-light)}
.muf-strip .mtile-name{font-size:clamp(1rem,1.3vw,1.2rem)}
@media (min-width:700px){.muf-strip.mtile-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (min-width:1100px){.muf-strip.mtile-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.muf-strip .mtile-short{display:none}}

/* Inside Nitrofuze: story video, crew, owners and shop in one mosaic */
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.b-doc,.b-crew,.b-wide{grid-column:1/-1}
.b-doc .doc-frame{height:100%}
.b-tile{position:relative;margin:0;overflow:hidden;border-radius:var(--radius-card);background:#111;outline:1px solid rgba(255,255,255,.09);outline-offset:-1px}
.b-tile img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 600ms var(--ease-out)}
.b-crew img,.b-wide img{aspect-ratio:16/9}
.b-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;display:grid;gap:2px;background:linear-gradient(0deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,0) 100%);font:700 .8125rem/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.b-tile figcaption strong{font:800 1.05rem/1.05 var(--display);letter-spacing:.01em}
.b-tile figcaption span{font:500 .75rem/1.3 var(--body);letter-spacing:.04em;text-transform:none;color:var(--steel-light)}
/* owner tiles on phones/tablets: name and role sit under the photo so they never cover the face */
@media (max-width:899px){
  .b-owner{display:flex;flex-direction:column;background:#161616}
  .b-owner img{height:auto;aspect-ratio:4/3}
  .b-owner figcaption{position:static;padding:12px 14px 14px;background:none}
}
@media (hover:hover) and (pointer:fine){.b-tile:hover img{transform:scale(1.03)}}
@media (min-width:900px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:14px}
  .b-doc{grid-column:1/3;grid-row:1/3}
  .b-crew{grid-column:3/5;grid-row:1}
  .b-owner{grid-row:2}
  .b-wide{grid-column:1/3}
  .b-doc .vthumb{height:100%;aspect-ratio:auto}
  .b-doc .vthumb img{height:100%;object-fit:cover}
  .b-tile img{height:100%}
  .b-shop:not(.b-wide) img{aspect-ratio:auto}
}

/* Footer: brand logos as a thin strip on top */
.ft-brands{display:grid;gap:14px;padding-bottom:clamp(32px,4vw,48px);margin-bottom:clamp(32px,4vw,48px);border-bottom:1px solid #4a4a4a}
.ft-brands-h{margin:0;font:700 .75rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#B8B8B8}
.ft-brands .brand-row{justify-content:flex-start;background:none;padding:0;gap:clamp(18px,3vw,36px)}
.ft-brands .brand-row img{height:clamp(26px,3.4vw,38px);max-width:120px}
/* mosaic v2 (desktop): three even rows so the wide documentary image is barely cropped */
@media (min-width:900px){
  .bento{grid-auto-rows:clamp(220px,23vw,300px)}
  .b-doc{grid-column:1/3;grid-row:1}
  .b-crew{grid-column:3/5;grid-row:1}
  .b-owner{grid-row:2}
  .b-wide{grid-column:3/5;grid-row:2}
  .b-shop:not(.b-wide){grid-column:span 2;grid-row:3}
  .b-tile img,.b-crew img,.b-wide img,.b-shop:not(.b-wide) img{aspect-ratio:auto;height:100%}
  .b-doc .doc-frame,.b-doc .vthumb{height:100%}
  .b-doc .vthumb img{object-fit:cover;object-position:50% 50%}
}
.rv-photo{object-position:42% 45%}
/* how it works photo: the handover shot is wide, so keep it 4:3 on desktop and centre on the people and the car */
.how-photo{object-position:45% 50%}
@media (min-width:1000px){.how-photo{aspect-ratio:4/3;align-self:center}}
/* range strip with the Exhaust Tips card: the tips card takes a full row on phones/tablets, two columns on desktop (4 + 4 grid) */
.muf-strip .mtile:last-child{grid-column:1/-1!important}
.muf-strip .mtile:last-child img{aspect-ratio:16/9}
@media (min-width:1100px){
  .muf-strip.mtile-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .muf-strip .mtile:last-child{grid-column:span 2!important}
  .muf-strip .mtile-short{display:block}
  .muf-strip .mtile img,.muf-strip .mtile:last-child img{aspect-ratio:4/3}
  .muf-strip .mtile:last-child img{aspect-ratio:auto;height:100%;min-height:0;flex:1}
}
@media (min-width:1100px){.muf-strip .mtile:last-child img{aspect-ratio:8/3;height:auto;flex:none;object-position:50% 55%}}

/* brands: its own section again (Ronald 2026-09-25), all black with the white heading */
#brands.band-light{background:#000;border-block:0;color:#fff}
#brands h2{color:#fff}
#brands .brand-row{background:transparent;padding-inline:0;justify-content:center}
#brands .sec-head{margin-inline:auto;text-align:center}
#brands .sec-head h2::before{margin-inline:auto}

/* ===== Hear our best builds: premium featured build (photo + after-sound with its real waveform) ===== */
.sf2{display:grid;grid-template-columns:minmax(0,1fr);background:linear-gradient(160deg,#242424 0%,#161616 70%);border-radius:20px;overflow:hidden;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.sf2-media{position:relative;background:#0e0e0e}
.sf2-media img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover}
.sf2-body{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2vw,22px);padding:clamp(22px,4vw,56px)}
.sf2-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font:700 .75rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#ADADAD}
.sf2-kicker span+span::before{content:"";display:inline-block;width:4px;height:4px;margin-right:10px;border-radius:50%;background:#5A5A5A;vertical-align:middle}
.sf2-kicker span:first-child{color:var(--red)}
.sf2-car{margin:0;font:800 clamp(3rem,7vw,5.75rem)/.9 var(--display);text-transform:uppercase;letter-spacing:.005em;color:var(--white)}
.sf2-sub{margin:0;max-width:38ch;font-size:1.0625rem;line-height:1.55;color:var(--steel-light)}
.sf2-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:4px 0 0;border-top:1px solid #333}
.sf2-specs div{padding:14px 0 0;display:grid;gap:4px}
.sf2-specs dt{font:700 .75rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#8F8F8F}
.sf2-specs dd{margin:0;font:800 1.35rem/1.1 var(--display);text-transform:uppercase;color:var(--white)}
.sf2-player{display:flex;align-items:center;gap:clamp(12px,2vw,20px);margin-top:clamp(6px,1.5vw,14px);padding:14px 18px 14px 14px;background:#101010;border:1px solid #2C2C2C;border-radius:999px}
.snd-play.sf2-play{position:relative;inset:auto;width:auto;height:auto;flex:none}
.sf2-play>span{width:clamp(56px,6vw,68px)}
.sf2-wave{position:relative;flex:1;height:48px;min-width:0}
.sf2-bars{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
.sf2-bars i{flex:1;min-width:1px;height:calc(var(--h) * 100%);border-radius:2px;background:#454545}
.sf2-fill{clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0);transition:clip-path 120ms linear}
.sf2-fill i{background:var(--red)}
.sf2-dur{flex:none;font:600 .875rem/1 var(--body);font-variant-numeric:tabular-nums;color:#ADADAD}
.sf2-note{margin:0;font-size:.8125rem;line-height:1.5;color:#8F8F8F}
.sf2.is-playing{outline-color:rgba(220,31,31,.6)}
@media (min-width:900px){
  .sf2{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .sf2-media img{aspect-ratio:auto;min-height:100%}
}
@media (max-width:420px){.sf2-player{padding:10px 14px 10px 10px}.sf2-wave{height:40px}.sf2-bars{gap:1px}}
.snd-more{margin-top:clamp(20px,3vw,32px)}
/* real car-maker logo beside the car name */
.sf2-title{display:flex;align-items:center;gap:clamp(12px,1.6vw,18px)}
.car-logo{flex:none;width:clamp(44px,5vw,64px);height:auto;aspect-ratio:1;color:var(--white)}

/* ===== best builds review fixes (2026-09-25) ===== */
/* 1. hierarchy: the car name sits clearly below the section title */
.sf2-car{font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:.92}
.car-logo{width:clamp(38px,3.6vw,50px)}
/* 5. the photo plays the sound too */
.sf2-media{cursor:pointer}
.sf2-tap{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:rgba(12,12,12,.72);border:1px solid rgba(255,255,255,.2);font:600 .8125rem/1 var(--body);color:#fff;transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out)}
.sf2-tap .ic{width:16px;height:16px;padding:3px;border-radius:50%;background:var(--red);box-sizing:content-box}
@media (hover:hover) and (pointer:fine){.sf2-media:hover .sf2-tap{background:var(--red);border-color:var(--red)}.sf2-media:hover img{transform:scale(1.02)}}
.sf2-media img{transition:transform 600ms var(--ease-out)}
.sf2.is-playing .sf2-tap{opacity:0;transition:opacity 200ms var(--ease-out)}
/* 6. the waveform is a seek bar */
.sf2-wave{cursor:pointer}
/* 4. loading: the button pulses until the sound starts */
@keyframes sndpulse{0%{box-shadow:0 0 0 0 rgba(220,31,31,.55)}100%{box-shadow:0 0 0 16px rgba(220,31,31,0)}}
.snd.is-loading .snd-play>span{animation:sndpulse 900ms var(--ease-out) infinite}
/* 7. the Facebook line is a plain row, not a second box */
.fbg-short{background:none;border:0;border-top:1px solid #2E2E2E;border-radius:0;padding:clamp(22px,3vw,30px) 0 0}
/* motion: the played part of the waveform moves like a live meter while the sound plays */
@media (prefers-reduced-motion:no-preference){
  @keyframes meter{from{transform:scaleY(.72)}to{transform:scaleY(1.08)}}
  .sf2.is-playing .sf2-fill i{animation:meter 420ms ease-in-out infinite alternate;transform-origin:center}
  .sf2.is-playing .sf2-fill i:nth-child(3n){animation-delay:-140ms}
  .sf2.is-playing .sf2-fill i:nth-child(3n+1){animation-delay:-280ms}
}
/* several featured builds: stacked, photo side alternates on desktop */
.sf2+.sf2{margin-top:clamp(16px,2.4vw,28px)}
@media (min-width:900px){
  .sf2-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .sf2-flip .sf2-media{order:2}
}
.sf2-kicker span:first-child{color:#ADADAD}
.sf2-kicker .sf2-feat{color:var(--red)}
/* small build cards (swipe row): logo beside the car name */
.snd-title{display:flex;align-items:center;gap:10px}
.snd-title .car-logo{width:28px;flex:none}

/* ===== Best builds SHOWROOM (2026-09-26): one build on stage, the rest in a photo rail ===== */
.shw{display:grid;gap:clamp(14px,2vw,20px)}
/* every card sits in the same grid cell, so the stage keeps the height of the tallest build (no page jump) */
.shw-stage{display:grid}
.shw-stage>.shw-card{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity 380ms var(--ease-out),transform 380ms var(--ease-out),visibility 0s linear 380ms}
.shw-stage>.shw-card.is-active{visibility:visible;opacity:1;transform:none;transition:opacity 380ms var(--ease-out),transform 380ms var(--ease-out),visibility 0s}
.shw-stage>.sf2+.sf2{margin-top:0}
@media (prefers-reduced-motion:reduce){.shw-stage>.shw-card{transform:none;transition:none}}

/* the rail: square photos with the car name; scrolls sideways when there are many builds */
.shw-rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(96px,11vw,132px);gap:clamp(8px,1.2vw,12px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:4px 2px 10px;scrollbar-width:thin;scrollbar-color:#4a4a4a transparent}
.shw-thumb{scroll-snap-align:start;display:grid;gap:8px;padding:0;margin:0;border:0;background:none;color:#ADADAD;text-align:left;cursor:pointer;font:600 .75rem/1.25 var(--body);letter-spacing:.02em}
.shw-thumb img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;outline:2px solid transparent;outline-offset:-2px;filter:saturate(.7) brightness(.72);transition:filter 260ms var(--ease-out),outline-color 200ms var(--ease-out),transform 200ms var(--ease-out)}
.shw-thumb span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.06em}
.shw-thumb.is-active{color:var(--white)}
.shw-thumb.is-active img{filter:none;outline-color:var(--red)}
@media (hover:hover) and (pointer:fine){.shw-thumb:hover img{filter:none}.shw-thumb:hover{color:var(--white)}}
.shw-thumb:active img{transform:scale(.97)}
.shw-thumb:focus-visible{outline:none}
.shw-thumb:focus-visible img{outline-color:#fff}
/* phones: the rail sits above the stage so visitors see all builds before the tall card */
@media (max-width:899px){
  .shw-rail{order:-1;grid-auto-columns:84px;padding-bottom:6px}
  .shw-thumb{font-size:.75rem}
}
.shw-thumb span{white-space:normal;overflow:visible;text-overflow:clip;min-height:2.5em;line-height:1.25}

/* stage photos: never cropped. The whole photo is shown; any space around it is filled with a soft blurred copy */
.sf2-media{position:relative;overflow:hidden;display:grid;place-items:center;background:#0e0e0e}
.sf2-media::before{content:"";position:absolute;inset:-24px;background:var(--bg) center/cover no-repeat;filter:blur(22px) brightness(.45) saturate(.8);transform:scale(1.1)}
.sf2-media img{position:relative;z-index:1;width:100%;height:auto;max-height:100%;aspect-ratio:auto;object-fit:contain}
@media (min-width:900px){
  .sf2-media{aspect-ratio:1}
  .sf2-media img{width:100%;height:100%;min-height:0;object-fit:contain}
}
.sf2-media{aspect-ratio:1}
.sf2-media::before{filter:blur(26px) brightness(.62) saturate(.9)}
.sf2-media::before{content:none}
.sf2-bg{position:absolute;inset:-24px;background-position:center;background-size:cover;background-repeat:no-repeat;filter:blur(26px) brightness(.62) saturate(.9);transform:scale(1.1)}
/* wide (landscape) photos: shown whole at their own shape, no bands. Desktop: photo across the full card, details below */
.sf2-wide .sf2-media{aspect-ratio:auto}
.sf2-wide .sf2-bg{display:none}
.sf2-wide .sf2-media img{height:auto;object-fit:contain}
@media (min-width:900px){
  .sf2.sf2-wide{grid-template-columns:minmax(0,1fr)}
  .sf2-wide .sf2-media{aspect-ratio:auto}
  .sf2-wide .sf2-media img{height:auto;max-height:none;min-height:0}
  .sf2-wide .sf2-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:clamp(24px,4vw,56px);align-items:center}
  .sf2-wide .sf2-title{grid-column:1}
  .sf2-wide .sf2-specs{grid-column:1}
  .sf2-wide .sf2-player,.sf2-wide .sf2-note{grid-column:2}
  .sf2-wide .sf2-player{grid-row:1/3}
}
/* wide photos: a slight zoom, centred on the exhaust, fills the frame */
.sf2-wide .sf2-media{aspect-ratio:4/3}
.sf2-wide .sf2-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
@media (min-width:900px){.sf2-wide .sf2-media{aspect-ratio:2/1}.sf2-wide .sf2-media img{height:100%}}
/* Porsche GT4: centre on the car (its exhaust sits left of the photo's middle) */
#build-porsche-gt4-full-exhaust .sf2-media img{object-position:45% 50%}
@media (min-width:900px){#build-porsche-gt4-full-exhaust .sf2-media img{object-position:45% 38%}}

/* phones: the player sits straight under the photo, before the car name and specs */
@media (max-width:899px){
  .sf2-body{padding-top:14px}
  .sf2-player{order:-1;margin-top:0}
  .sf2-note{order:-1;margin-top:-6px;margin-bottom:6px}
}
@media (max-width:899px){.sf2-body{justify-content:flex-start}}
@media (max-width:899px){.sf2{grid-template-rows:auto 1fr;align-content:start}}
.sf2-story{margin:0;max-width:44ch;font-size:.9375rem;line-height:1.55;color:var(--steel-light)}
/* phones: specs stack in one column so long setups read cleanly */
@media (max-width:899px){
  .sf2-specs{grid-template-columns:minmax(0,1fr);gap:0}
  .sf2-specs div{padding:12px 0 0}
  .sf2-specs dd{font-size:1.2rem;line-height:1.15}
}
.sf2-specs div{align-content:start}

/* ===== impeccable pass (critique 2026-09-26): shorter page, variety in headings, readable footer ===== */

/* distill: story gallery is now documentary + crew + the two owners */
@media (min-width:900px){.bento .b-owner{grid-column:span 2;grid-row:2}}
.about-intro .ft-title{color:#f4f4f4}
.about-intro .ft-blocks{border-top-color:#4a4a4a}
.about-intro .ft-lead p{color:#c4c4c4}
.about-intro .ft-block p{color:#c4c4c4}
.about-intro .ft-bh{color:#e6e6e6}

/* typeset: full label + bar + giant title only on the three anchors (hero, reviews, closing).
   Every other section gets a plain, smaller heading with no red bar. */
#services .sec-head h2::before,#how-it-works .sec-head h2::before,#brands .sec-head h2::before,
#mufflers .muf-title .kicker::after,#ask .ask-title-block .kicker::after,#inside .doc-head .kicker::after,
#inside .doc-head h2::before,.muf-title h2::before{content:none;display:none}
#featured-project h2,#hear h2,#services h2,#mufflers .muf-title h2,#how-it-works h2,#ask h2,#brands h2,#inside h2{font-size:clamp(1.9rem,3.6vw,2.75rem);line-height:1.02}
#inside .doc-line{display:inline}
#inside .doc-head{gap:clamp(12px,1.6vw,20px)}
#featured-project .fp-head h2{margin-top:0}

/* audit: footer links are real 44px targets; small labels get a readable floor */
.ft-list{gap:0}
.ft-list a{display:flex;align-items:center;min-height:44px;padding-block:0}
.ask-topic,.ask-cat,.rv-lab{font-size:.72rem}
.rv-note{font-size:.875rem}

/* polish: one card language for reviews, Spitfire and muffler cards (same radius, hairline, no stray shadows) */
.reviews-pro .rv-grid .rv,.sf-item,.mtile{border-radius:var(--radius-card)}

/* sound player: only the active build takes up space (inactive ones sit out of flow), so no card is stretched to the tallest one */
.shw-stage{position:relative}
.shw-stage>.shw-card:not(.is-active){position:absolute;top:0;left:0;right:0;pointer-events:none}
.shw-stage>.shw-card.is-active{align-self:start}

/* brands: continuous logo loop (plain CSS). Pauses on hover, and stops for people who prefer reduced motion. */
.brand-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);padding-block:8px}
.bm-track{display:flex;align-items:center;width:max-content;animation:bm-scroll 42s linear infinite}
.bm-track img{flex:none;height:clamp(36px,5.5vw,52px);width:auto;max-width:150px;object-fit:contain;margin-right:clamp(36px,5vw,64px);filter:none;opacity:1}
.bm-track img.on-light{background:#fff;padding:5px 10px;border-radius:8px}
@keyframes bm-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){.brand-marquee:hover .bm-track{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){
  .brand-marquee{-webkit-mask-image:none;mask-image:none}
  .bm-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:24px}
  .bm-track img[aria-hidden="true"]{display:none}
}

/* brands: two rows, the second travelling the other way at a slightly different speed */
.brand-marquee{display:grid;gap:clamp(18px,3vw,32px);padding-block:8px}
.bm-row{overflow:hidden}
.bm-b .bm-track{animation-direction:reverse;animation-duration:50s}
.bm-a .bm-track{animation-duration:46s}
@media (prefers-reduced-motion:reduce){.bm-row{overflow:visible}}

/* ask kuya ron: coverflow. Cards centre on snap; distance from the middle (--d, set by site.js) drives scale and dimming. */
.ask-slider{--cw:clamp(220px,64vw,280px)}
.ask-track.vrow{padding-inline:calc(50% - var(--cw) / 2);scroll-padding-inline:calc(50% - var(--cw) / 2);gap:clamp(10px,2vw,20px);padding-block:18px 26px}
.ask-track .vcard.ask-card{flex:0 0 var(--cw);scroll-snap-align:center;transform:scale(calc(1 - var(--d,0) * .1));opacity:calc(1 - var(--d,0) * .34);transform-origin:50% 55%;will-change:transform,opacity}
.ask-track .vcard.ask-card[style*="--d: 0"]{}
@media (prefers-reduced-motion:reduce){.ask-track .vcard.ask-card{will-change:auto}}
.ask-track.vrow{-webkit-mask-image:none;mask-image:none}
.ask-track .vcard.ask-card{will-change:auto}
/* muffler gallery: photo grid + zoom view */
.origin li .o-gallery{grid-column:1/-1;margin-top:10px}
.origin li .o-gal-h{margin:0 0 10px;font:600 .8rem/1.3 var(--body);letter-spacing:.04em;color:var(--steel)}
.mg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.origin .mg-grid li{display:block;padding:0;border:0}
@media (min-width:700px){.mg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
.mg-item{position:relative;display:block;width:100%;padding:0;border:0;background:#0b0b0b;border-radius:var(--radius-card);overflow:hidden;cursor:zoom-in;outline:1px solid rgba(255,255,255,.09);outline-offset:-1px;transition:transform 160ms var(--ease-out)}
.mg-item:active{transform:scale(.98)}
.mg-item:focus-visible{outline:2px solid #fff;outline-offset:3px}
.mg-item img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform 320ms var(--ease-out)}
/* spotlight tiles: the soft graphite light behind each muffler is built into the photo files themselves (no browser-side
   blending, so the metal stays perfectly sharp); the tile only adds a fine highlight on its top edge */
.mg-item::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.mgdlg img{background:#171717}
@media (hover:hover) and (pointer:fine){.mg-item:hover img{transform:scale(1.04)}}
.mg-tag{position:absolute;left:8px;bottom:8px;padding:5px 9px;border-radius:999px;background:rgba(10,10,10,.82);color:#fff;font:700 .75rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase}
.mgdlg{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0;color:#fff}
.mgdlg::backdrop{background:rgba(0,0,0,.92)}
.mgdlg[open]{display:grid;place-items:center}
.mgdlg figure{margin:0;display:grid;gap:12px;justify-items:center;max-width:min(94vw,1100px)}
.mgdlg img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:12px;background:#000}
.mgdlg figcaption{display:grid;gap:4px;text-align:center}
.mgdlg figcaption span{font:800 1.25rem/1.2 var(--display);text-transform:uppercase}
.mgdlg-x,.mgdlg-nav{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:1px solid #5C5C5C;border-radius:50%;background:rgba(20,20,20,.85);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer}
.mgdlg-x{top:14px;right:14px}.mgdlg-x .ic{width:20px;height:20px}
.mgdlg-nav{top:50%;margin-top:-24px}
.mgdlg-prev{left:10px}.mgdlg-next{right:10px}
@media (hover:hover) and (pointer:fine){.mgdlg-x:hover,.mgdlg-nav:hover{background:var(--red);border-color:var(--red)}}
/* coverflow depth: side cards tilt back toward the centre and tuck behind it (tilt follows the signed distance --s from site.js) */
@media (min-width:600px) and (prefers-reduced-motion:no-preference){
  .ask-track.vrow{perspective:1000px;perspective-origin:50% 45%}
  .ask-track .vcard.ask-card{
    margin-inline:calc(var(--cw) * -.07);
    transform:translateZ(calc(var(--d,0) * -70px)) rotateY(calc(var(--s,0) * -22deg)) scale(calc(1 - var(--d,0) * .06));
    z-index:calc(10 - var(--d,0) * 4);
    transition:none
  }
}

/* reviews: extra motion (all off for reduced-motion, where site.js does not run these) */
.rv-num{transition:filter 120ms linear}
.rv-fig{--ping:0}
.rv-fig::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--red);opacity:0;transform:scale(1);pointer-events:none}
.rv-done .rv-arc{filter:drop-shadow(0 0 7px rgba(226,0,0,.55));transition:filter 600ms var(--ease-out)}
.rv-done .rv-fig::after{animation:rv-ping 1500ms var(--ease-out) 1}
@keyframes rv-ping{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.28)}}
.reviews-pro .rv-feature blockquote .qw{color:rgba(242,242,242,.28);transition:color 260ms var(--ease-out)}
.reviews-pro .rv-feature blockquote .qw.on{color:inherit}
@media (prefers-reduced-motion:reduce){.rv-fig::after{display:none}}

/* ---- polish pass 2026-09-26: tighter section rhythm, gallery, focus rings, print ---- */
.section{padding-block:clamp(40px,5.5vw,72px);padding-bottom:clamp(40px,5.5vw,72px)}
.sec-head{margin-bottom:clamp(22px,3.2vw,36px)}

/* focus: one visible ring on dark and on light bands; ring follows the element's shape where it can */
:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.band-light :focus-visible,.btn-line.on-light:focus-visible{outline-color:#0B0B0B}
.btn:focus-visible,.btn-red:focus-visible{outline:2px solid var(--white);outline-offset:3px;box-shadow:0 0 0 5px rgba(226,0,0,.55)}
.skip:focus-visible{outline-offset:0}
@media (forced-colors:active){:focus-visible{outline:2px solid Highlight}}

/* gallery page: photos keep their own proportions (no cropping), laid out in balanced columns */
.gal{columns:3 260px;column-gap:clamp(12px,1.6vw,20px)}
.gal-item{break-inside:avoid;margin:0 0 clamp(12px,1.6vw,20px);background:var(--grad-panel);border-radius:var(--radius-card);overflow:hidden;outline:1px solid rgba(255,255,255,.09);outline-offset:-1px}
.gal-item img{display:block;width:100%;height:auto}
.gal-item figcaption{padding:12px 16px 14px;font:600 .9rem/1.3 var(--body);color:var(--steel-light)}
.gal-item{transition:outline-color 220ms var(--ease-out),transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.gal-item:hover{outline-color:rgba(255,255,255,.28);transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.gal-item{transition:none}.gal-item:hover{transform:none}}

/* print: a clean black-on-white page with the address, no motion or media */
@media print{
  :root{--ground:#fff}
  html,body{background:#fff!important;color:#000!important}
  .site-header,.mobile-bar,.toast,.vdlg,.hero-media,.hero-video,video,.brand-marquee,.ask-slider,.shw-rail,.snd-play,.cta-row,.skip,.ft-badges,.ft-social,.menu-btn{display:none!important}
  .section,.page-head,.band-panel,.band-light,.site-footer{background:#fff!important;color:#000!important;padding-block:14px!important;border:0!important}
  h1,h2,h3,p,li,a,blockquote,figcaption{color:#000!important;text-shadow:none!important}
  img{max-width:60%!important;height:auto!important;break-inside:avoid}
  a[href^="http"]:not(.brand)::after{content:" (" attr(href) ")";font-size:.8em;word-break:break-all}
  .reveal,.pre-reveal,.w,.wi{opacity:1!important;transform:none!important;clip-path:none!important;overflow:visible!important}
}
/* Corvette feature: one approved paragraph beside the video (desktop), no lead line */
.fp-one{margin:0;font-size:.9375rem;line-height:1.6;color:var(--steel-light);max-width:60ch}
@media (min-width:900px){.fp-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fp-one{font-size:1.0625rem}}

/* ===== consistency pass (2026-09-27) ===== */
/* 2. Spitfire buttons side by side, like every other button pair */
.sf-overlay .cta-row{flex-direction:row;flex-wrap:wrap;align-items:center}
/* 4. no red bar on the Spitfire cards: they match the range cards */
.sf-item figcaption::before{content:none;display:none}
/* 5. one card radius */
.sf2{border-radius:var(--radius-card)}
/* 6. brands heading aligned left like every section */
#brands .sec-head{margin-inline:0;text-align:left}
#brands .sec-head h2::before{margin-inline:0}
#brands .brand-row{justify-content:flex-start}
/* 7. story heading stacked, text under it */
@media (min-width:900px){#inside .doc-head{grid-template-columns:minmax(0,1fr);align-items:start}#inside .doc-head p{max-width:62ch;padding-bottom:0}}
/* 8. how it works: photo on top, all five steps in one row on desktop */
@media (min-width:1000px){
  .how-split{grid-template-columns:minmax(0,1fr)}
  .how-photo{order:-1;aspect-ratio:21/9}
  .how-split .how-works{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(20px,2.4vw,32px)}
}
/* 12. reviews numbers: real values stay in the page; the count-up is drawn on top */
.rv-num[data-shown]{position:relative;color:transparent}
.rv-num[data-shown]::after{content:attr(data-shown);position:absolute;inset:0;color:var(--white);text-align:inherit}
.rv-fig .rv-num[data-shown]::after{text-align:center}
/* Spitfire panel wide enough for its two buttons side by side (desktop) */
@media (min-width:900px){.sf-overlay{width:min(58%,600px)}.sf-overlay .cta-row{flex-wrap:nowrap}}
/* brands: when motion is off, the still logo rows start on the left like the heading */
@media (prefers-reduced-motion:reduce){.bm-track{justify-content:flex-start}}

/* Sound Library search redesign 2026-09-30: Make/Model search over real projects, results play Facebook's
   soundcheck video live (linked, not downloaded). See finder_form()/project_card() in build.py and the
   #finder handler in site.js. */
#find .finder{max-width:640px;margin-inline:auto;grid-template-columns:minmax(0,1fr)}
#find .finder-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
#find .finder-fields .btn{grid-column:1/-1}
#find .finder label .fine{font-weight:400;text-transform:none;letter-spacing:0;color:var(--steel-dim)}
/* narrow phones: two selects per row leaves too little width for the text (it was clipping) — stack instead */
@media (max-width:480px){#find .finder-fields{grid-template-columns:minmax(0,1fr)}}
.finder-result{min-width:0}
.finder-result .wrap{min-width:0}
.finder-result h2{text-transform:none}
.rc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.rcard{min-width:0}
.rc-video{min-width:0;aspect-ratio:auto!important;padding:16px;background:#101010!important}
.rc-video::before{content:none}
.rc-video .fb-video{width:100%;min-width:0;max-width:100%;border-radius:10px;overflow:hidden}
.rc-video .fb-video span,.rc-video iframe{max-width:100%!important}
.rc-variant{margin:-8px 0 0;font:600 .8125rem/1 var(--body);letter-spacing:.02em;color:var(--steel)}
.rc-clip{display:block;width:100%;aspect-ratio:16/9;background:#000;object-fit:cover}
.finder-result .cta-row .btn{max-width:100%;white-space:normal;text-align:center}
@media (max-width:480px){.finder-result .cta-row .btn{flex:1 1 100%}}
.sf2-name{min-width:0}
.sf2-name .rc-variant{margin:10px 0 0;line-height:1.3}
@media (min-width:900px){.rc-video{padding:24px}}

/* Home "Hear our best builds": Facebook soundcheck video under the specs (replaces the audio player) */
.sf2-fbv{width:100%;max-width:480px;min-height:120px;margin-top:clamp(6px,1.5vw,14px);border-radius:12px;overflow:hidden;background:#101010;border:1px solid #2C2C2C}
.sf2-fbv .fb-video{display:block;width:100%;min-width:0;max-width:100%}
.sf2-fbv .fb-video span,.sf2-fbv iframe{max-width:100%!important}
.sf2-fb .sf2-media{cursor:default}
.sf2-fb .sf2-media:hover img{transform:none}
/* vertical reels are tall: keep them narrow so the card doesn't grow past the photo */
.sf2-fbv-tall{max-width:260px}
/* Home "Hear our best builds": the two portrait builds (Z4, GT4) play as cropped landscape clips hosted on the site */
.sf2-lv{width:100%;max-width:480px;margin-top:clamp(6px,1.5vw,14px);border-radius:12px;overflow:hidden;background:#101010;border:1px solid #2C2C2C}
.sf2-lv video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}

/* Hero on phones and tablets (2026-10-04): a real photo on top, the words below on solid ground (no text over a busy picture),
   smaller headline, full-width buttons. Desktop keeps the video hero. */
@media (max-width:899px){
  .hero{display:block;min-height:0;overflow:visible}
  .hero-media{position:relative;inset:auto;z-index:auto;height:min(92vw,52svh,460px);overflow:hidden}
  .hero-media .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
  .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--ground) 0%,rgba(23,23,23,.55) 22%,rgba(23,23,23,0) 55%)}
  .hero-scrim{display:none}
  .hero-body{position:relative;margin-top:-56px;padding-top:0;padding-bottom:36px}
  .hero h1{max-width:100%;font-size:clamp(2.6rem,12vw,3.4rem);line-height:.98;text-shadow:none}
  .hero-sub{max-width:36ch;margin-top:18px;font:400 1rem/1.55 var(--body);color:#D6D6D6;text-shadow:none}
  .hero .cta-row{flex-direction:column;align-items:stretch;gap:10px;margin-top:24px}
  .hero .cta-row .btn{width:100%;justify-content:center}
  .hero .btn-line{text-shadow:none}
}
/* phones and tablets: the Call button already lives in the bar pinned to the bottom of the screen */
@media (max-width:899px){.hero .cta-row .btn-line{display:none}}
/* phones and tablets: both hero buttons are already in the bar pinned to the bottom of the screen */
@media (max-width:899px){.hero .cta-row{display:none}}

/* phones and tablets: the build picker is a plain grid (4 across, equal size, nothing hidden off-screen), no sideways scrolling */
@media (max-width:899px){
  .shw-rail{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;gap:14px 10px;padding:0 0 6px}
  .shw-thumb{gap:6px}
  .shw-thumb span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.5em;font-size:.75rem;line-height:1.25}
}
@media (max-width:899px){.shw-thumb span{font-size:.75rem;letter-spacing:.015em}}
@media (max-width:899px){.shw-thumb span{-webkit-line-clamp:3}}

/* Home: "Find your car's sound" bar right under the hero (Borla-style). Sits over the bottom edge of the hero on desktop,
   a plain card under the hero text on phones. Submits to the Sound Library with ?make=&model= so the search runs on arrival. */
.hfind{position:relative;z-index:3;padding-block:0 clamp(28px,4vw,48px)}
.hf{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:clamp(20px,3vw,28px);background:linear-gradient(180deg,#2B2B2B 0%,#1F1F1F 100%);border:1px solid rgba(255,255,255,.1);border-top:3px solid var(--red);border-radius:16px;box-shadow:0 22px 56px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.04) inset}
.hf-kicker{margin:0 0 6px;font:700 .75rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.hf-title{margin:0;font:800 clamp(1.8rem,5vw,2.4rem)/1 var(--display);text-transform:uppercase;color:var(--white)}
.hf-sub{margin:8px 0 0;max-width:40ch;font-size:.9375rem;line-height:1.5;color:var(--steel-light)}
.hf-field{display:grid;gap:6px;min-width:0;font:600 .75rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.hf-field select{width:100%;min-height:52px;padding:0 38px 0 14px;background-color:#171717;color:var(--white);border:1px solid #4A4A4A;border-radius:12px;font:600 1rem var(--body);text-transform:none;letter-spacing:0;appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),linear-gradient(135deg,var(--steel) 50%,transparent 50%);background-position:calc(100% - 20px) 23px,calc(100% - 15px) 23px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;transition:border-color 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.hf-field select:disabled{opacity:.45;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){.hf-field select:not(:disabled):hover{border-color:#7A7A7A}}
.hf-field select:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hf-go{min-height:52px;width:100%;transition:transform 160ms var(--ease-out),background-color 160ms var(--ease-out),opacity 160ms var(--ease-out)}
.hf-go:active:not([disabled]){transform:scale(.97)}
.hf-go[disabled]{background:#454545;color:var(--steel);cursor:not-allowed;box-shadow:none}
@media (min-width:900px){
  .hfind{margin-top:-52px}
  .hf{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:20px 24px}
  .hf-go{width:auto;min-width:190px}
}
.rc-video .nf-fbv{display:block;width:100%;min-width:0}
/* the hero has no buttons now; the finder bar overlaps its bottom edge, so keep the paragraph clear of it */
@media (min-width:900px){.hero-body{padding-bottom:calc(clamp(48px,8vh,88px) + 56px)}}

/* ===== Premium pass 2026-10-04 (critique fixes + a quieter, more consistent finish) ===== */

/* phone bar: one-line label on narrow screens */
.mb-short{display:none}
@media (max-width:420px){.mb-long{display:none}.mb-short{display:inline}}

/* hero: short enough on desktop that the whole finder bar is on the first screen */
@media (min-width:900px){.hero{min-height:max(500px,min(calc(100svh - 232px),760px))}}
/* phones: smaller photo so the first dropdown is on the first screen too */
@media (max-width:899px){.hero-media{height:min(80vw,42svh,420px)}}

/* video boxes reserve their final shape, so nothing jumps while Facebook loads */
.sf2-fbv{aspect-ratio:16/9;min-height:0}
.sf2-fbv.sf2-fbv-tall{aspect-ratio:9/16}

/* image zoom on hover: quick and subtle (the long fades stay for the one-time scroll reveals) */
@media (hover:hover) and (pointer:fine){
  .b-tile img,.sf2-media img,.doc-frame .vthumb img,.ask-card .vthumb img,.svc-list .tile img,.mtile img{transition-duration:320ms}
}

/* finder bar: the red edge fades out instead of a flat stripe; calmer shadow */
.hf{position:relative;border-top-width:1px;box-shadow:0 24px 60px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.hf::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,var(--red) 0%,var(--red) 30%,rgba(226,0,0,0) 100%)}
.hf-field select{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.hf-go:not([disabled]){box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 18px -6px rgba(0,0,0,.6)}
.sf2-lv video{aspect-ratio:var(--ar,16/9)}
/* short laptop screens (about 650 to 820px tall): tighter hero and finder so the whole bar still fits on the first screen */
@media (min-width:900px) and (max-height:820px){
  .hero h1{font-size:clamp(2.6rem,5.4vw,4rem)}
  .hero-body{padding-top:32px}
  .hero-sub{margin-top:14px}
  .hf{padding:18px 24px;gap:12px 24px}
  .hf-title{font-size:clamp(1.6rem,2.6vw,2rem)}
}
/* phones: compact enough that the finder's first dropdown clears the pinned bottom bar on the first screen */
@media (max-width:899px){
  .hero-media{height:min(70vw,33svh,380px)}
  .hero h1{font-size:clamp(2.6rem,12vw,3.4rem)}
  .hero-sub{margin-top:12px;font-size:.9375rem;line-height:1.5}
  .hero-body{padding-bottom:20px}
  .hf{padding:16px;gap:12px}
  .hf-sub{display:none}
  .hf-title{font-size:1.7rem}
}
@media (max-width:899px){.hero-media{height:min(66vw,31svh,360px)}.hf-field{gap:5px}}

/* Sound Library cards with a hero photo: photo, details, then the Facebook soundcheck video at the bottom (same as Home) */
.rc-vid{width:100%;max-width:480px;min-height:120px;margin-top:clamp(6px,1.5vw,14px);border-radius:12px;overflow:hidden;background:#101010;border:1px solid #2C2C2C}
.rc-vid .nf-fbv,.rc-vid .fb-video{display:block;width:100%;min-width:0}
.rc-vid .fb-video span,.rc-vid iframe{max-width:100%!important}
.rcard-photo .sf2-media img{object-fit:cover}

/* US mufflers: Borla hero + three model cards */
.origin li .us-borla{grid-column:1/-1;margin-top:14px;display:grid;gap:16px}
.usb-hero{margin:0;border-radius:var(--radius-card);overflow:hidden;background:var(--deep);outline:1px solid rgba(255,255,255,.09);outline-offset:-1px}
.usb-hero img{display:block;width:100%;height:auto}
.usb-hero figcaption{padding:clamp(16px,3vw,28px);display:grid;gap:14px;max-width:70ch}
.usb-hero figcaption p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--steel-light)}
.origin .usb-grid{list-style:none;display:grid;gap:12px;grid-template-columns:1fr;padding:0;margin:0}
.origin .usb-grid li.usb-card{display:block;padding:0;border:0;border-radius:var(--radius-card);overflow:hidden;background:var(--grad-panel);outline:1px solid rgba(255,255,255,.09);outline-offset:-1px}
.usb-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.usb-body{padding:14px 16px 18px;display:grid;gap:6px}
.usb-name{font:800 1.2rem/1.1 var(--display);text-transform:uppercase;letter-spacing:.008em;color:#fff}
.usb-tag{font:600 .75rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.usb-body p{margin:4px 0 0;font-size:.9375rem;line-height:1.55;color:var(--steel-light)}
@media (min-width:760px){.origin .usb-grid{grid-template-columns:repeat(3,1fr);gap:14px}.usb-body p{font-size:.875rem}}

.origin li .o-hero{grid-column:1/-1;margin:14px 0 4px}
#japan .o-hero{margin:0 0 6px}
#japan .o-txt{grid-column:1/-1;max-width:80ch}

.mg-more{display:none}
@media (max-width:699px){
  .mg-fold.is-folded li:nth-child(n+7){display:none}
  .mg-more{display:inline-flex;margin-top:14px}
}
#thailand .o-hero{margin:0 0 6px}
#thailand .o-txt{grid-column:1/-1;max-width:80ch}
#china .o-hero{margin:0 0 6px}
#china .o-txt{grid-column:1/-1;max-width:80ch}
#japan .o-copy,#thailand .o-copy,#china .o-copy,#us .o-copy{display:grid;gap:12px;max-width:68ch}
#japan .o-copy p,#thailand .o-copy p,#china .o-copy p,#us .o-copy p{margin:0}
.o-lead{margin:0;font:800 clamp(1.3rem,5.2vw,1.9rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--white)}
.nw{white-space:nowrap}
@media (min-width:760px){.origin .usb-grid.usb-grid-1{grid-template-columns:repeat(3,1fr)}}
@media (min-width:760px){.origin .usb-grid.usb-grid-2{grid-template-columns:repeat(2,1fr)}}
.usb-hero figcaption .sf-logo{width:clamp(130px,30vw,190px);height:auto}
.range-wrap .origin{max-width:960px}
.range-wrap .origin li:first-child{border-top:0}
/* visible name on each muffler gallery tile */
.mg-item .mg-label{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;text-align:left;font:700 .8rem/1.2 var(--body);letter-spacing:.01em;color:#fff;background:linear-gradient(0deg,rgba(8,8,8,.88) 0%,rgba(8,8,8,.55) 55%,rgba(8,8,8,0) 100%);pointer-events:none}
@media (min-width:700px){.mg-item .mg-label{font-size:.875rem;padding:30px 12px 11px}}

/* Borla: ATAK leads, the other two sit side by side beneath it (desktop) */
@media (min-width:760px){
  .origin .usb-grid.usb-lead{grid-template-columns:repeat(2,minmax(0,1fr))}
  .origin .usb-grid.usb-lead li.usb-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}
  .origin .usb-grid.usb-lead li.usb-card:first-child img{height:auto;aspect-ratio:4/3}
  .origin .usb-grid.usb-lead li.usb-card:first-child .usb-body{align-content:center;padding:clamp(20px,3vw,40px)}
  .origin .usb-grid.usb-lead li.usb-card:first-child .usb-name{font-size:clamp(1.6rem,3vw,2.4rem)}
  .origin .usb-grid.usb-lead li.usb-card:first-child .usb-body p{font-size:.9375rem}
}

/* Learn: lead video, folded list on phones, 2-up grid on phones, one-row filters */
.vgrid:not(.is-filtered) .vcard.vlead{grid-column:span 2}
@media (min-width:700px){.vgrid:not(.is-filtered) .vcard.vlead{grid-row:span 2}}
.v-more{display:none}
@media (max-width:699px){
  #vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  #vgrid.is-folded:not(.is-filtered) .vcard:nth-child(n+8){display:none}
  #vgrid.is-folded:not(.is-filtered)~.v-more{display:inline-flex;margin-top:24px}
  #vgrid:not(.is-folded):not(.is-filtered)~.v-more{display:inline-flex;margin-top:24px}
  #vgrid .vcard:not(.vlead) .vcap{padding:10px 9px 11px;gap:6px}
  #vgrid .vcard:not(.vlead) .vname{font-size:.95rem;line-height:1.05}
}
@media (max-width:899px){
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter,16px)*-1);padding:0 var(--gutter,16px) 4px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;white-space:nowrap}
}
#vgrid{scroll-margin-top:96px}

/* Learn FAQ: grouped */
.faq-intro{margin:0 0 8px;max-width:62ch;color:var(--steel-light)}
.faq-grp{margin:44px 0 14px;font:800 clamp(1.2rem,4.4vw,1.5rem)/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--white)}
.faq-intro+.faq-grp{margin-top:28px}
.faq details p+p,.faq details p+ol,.faq details ol+p{margin-top:-8px}
.faq details ol{margin:0 0 22px;padding-left:1.3em;max-width:62ch;color:var(--steel-light)}
.faq details ol li{margin:0 0 8px;padding-left:4px}

/* ---------- Learn FAQ v2: grouped, numbered, collapsible on phones, sticky topic list on desktop ---------- */
:root{interpolate-size:allow-keywords}
#faq h2{margin-bottom:18px}
#faq .faq-intro{margin:0 0 34px;max-width:60ch}
#faq .faq-main{counter-reset:q}
#faq .faq-index{display:none}
#faq .faq-group{border-top:1px solid var(--line)}
#faq .faq-group:last-child{border-bottom:1px solid var(--line)}
#faq .faq-grp{margin:0;font:inherit;letter-spacing:0;text-transform:none}
#faq .faq-grp button{width:100%;display:flex;align-items:baseline;gap:14px;padding:22px 0;background:none;border:0;color:var(--white);text-align:left;cursor:pointer;font:inherit}
#faq .g-name{font:800 clamp(1.3rem,5.4vw,1.7rem)/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em}
#faq .g-count{margin-left:auto;font:600 .8rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#9C9C9C;white-space:nowrap}
#faq .g-ic{flex:none;align-self:center;width:14px;height:14px;background:linear-gradient(var(--white),var(--white)) center/14px 2px no-repeat,linear-gradient(var(--white),var(--white)) center/2px 14px no-repeat;transition:transform 200ms var(--ease-out)}
#faq .faq-group.is-open .g-ic{transform:rotate(45deg)}
#faq .faq-gbody{display:none;padding-bottom:10px}
#faq .faq-group.is-open .faq-gbody{display:block}
#faq .faq{margin:0}
#faq .faq details{border-bottom:1px solid var(--line);border-left:2px solid transparent;padding-left:14px;transition:border-color 200ms var(--ease-out)}
#faq .faq details:first-child{border-top:0}
#faq .faq details:last-child{border-bottom:0}
#faq .faq details[open]{border-left-color:var(--red)}
#faq .faq summary{justify-content:flex-start;gap:14px;padding:18px 0}
#faq .faq summary::before{counter-increment:q;content:counter(q,decimal-leading-zero);flex:none;min-width:1.9em;font:600 .78rem/1 var(--body);letter-spacing:.08em;color:var(--red)}
#faq .faq summary::after{margin-left:auto}
#faq .faq details p strong{color:var(--white);font-weight:600}
#faq .faq details p,#faq .faq details ol{padding-right:4px}
#faq details::details-content{block-size:0;overflow:hidden;transition:block-size 220ms var(--ease-out),content-visibility 220ms allow-discrete}
#faq details[open]::details-content{block-size:auto}
@media (min-width:900px){
  #faq .faq-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:start}
  #faq .faq-index{display:grid;gap:2px;position:sticky;top:104px}
  #faq .faq-index a{padding:9px 0 9px 14px;border-left:2px solid var(--line);color:#9C9C9C;font:600 .95rem/1.25 var(--body);text-decoration:none;transition:color 160ms var(--ease-out),border-color 160ms var(--ease-out)}
  #faq .faq-index a:hover{color:var(--white)}
  #faq .faq-index a.is-on{color:var(--white);border-left-color:var(--red)}
  #faq .faq-group{border-top:0;scroll-margin-top:96px;padding-bottom:34px}
  #faq .faq-group:last-child{border-bottom:0}
  #faq .faq-grp button{pointer-events:none;cursor:default;padding:0 0 12px}
  #faq .g-ic{display:none}
  #faq .g-name{font-size:1.9rem}
  #faq .faq-gbody{display:block;border-top:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){#faq details::details-content,#faq .g-ic,#faq .faq details{transition:none}}

/* phones: muffler photo galleries are one sideways row per origin instead of a tall grid */
@media (max-width:699px){
  .mg-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:0 var(--gutter,16px) 8px;margin:0 calc(var(--gutter,16px)*-1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mg-grid::-webkit-scrollbar{display:none}
  .origin .mg-grid>li,.mg-grid>li{flex:0 0 66%;scroll-snap-align:start}
  .mg-fold.is-folded li:nth-child(n+7){display:block}
  .mg-more{display:none!important}
}
/* phones: reviews are one sideways row, and the "how it works" photo steps aside so the steps come first */
@media (max-width:699px){
  .reviews-pro .rv-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(var(--gutter,16px)*-1);padding:0 var(--gutter,16px) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .reviews-pro .rv-grid::-webkit-scrollbar{display:none}
  .reviews-pro .rv-grid .rv{flex:0 0 82%;scroll-snap-align:start}
  .reviews-pro .rv-grid .rv.rv-extra{display:block}
  .how-photo{display:none}
}
@media (max-width:699px){.mg-grid,.reviews-pro .rv-grid{scroll-padding-inline:var(--gutter,16px)}}
/* Home muffler tiles: 8 tiles now (Spitfire added), so Exhaust Tips is a normal tile and the grid is a clean 2 / 2 / 4 columns */
.muf-strip .mtile:last-child{grid-column:auto!important}
.muf-strip .mtile:last-child img{aspect-ratio:4/3!important;height:auto!important;flex:none!important;object-position:50% 50%!important}
@media (min-width:700px) and (max-width:1099px){.muf-strip.mtile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Mufflers page on desktop: use the full content width (it was a 960 px column with an empty third on the right), and fix the US intro that fell into a narrow cell */
.range-wrap .origin{max-width:none}
#us .o-txt{grid-column:1/-1;max-width:80ch}
@media (min-width:1100px){
  .mg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .origin .o-hero img{max-height:540px;object-fit:cover}
}
/* a single Magnaflow card leads like the Borla ATAK card instead of sitting alone in one of three columns */
@media (min-width:760px){
  .origin .usb-grid.usb-grid-1{grid-template-columns:minmax(0,1fr)}
  .origin .usb-grid.usb-grid-1 li.usb-card:first-child{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}
  .origin .usb-grid.usb-grid-1 li.usb-card:first-child img{height:auto;aspect-ratio:4/3}
  .origin .usb-grid.usb-grid-1 li.usb-card:first-child .usb-body{align-content:center;padding:clamp(20px,3vw,40px)}
  .origin .usb-grid.usb-grid-1 li.usb-card:first-child .usb-name{font-size:clamp(1.6rem,3vw,2.4rem)}
}
/* desktop alignment: narrow reading sections and the Sound Library finder start at the same left edge as the page heading instead of floating in the middle */
.narrow{margin-left:max(0px,calc((100% - 1240px)/2));margin-right:auto}
#find .finder{margin-inline:0;max-width:720px}