/* Pit Lane, Split layout (opt2), Original colors. Source: tt-07 prototypes a-pitlane/style.css + variants.css(opt2) + themes.css(orig). Only change: asset urls ../assets -> ../img/pitlane. */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700 900;font-display:swap;src:url('fonts/bigshoulders-normal-700-900.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/barlow-normal-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/barlow-normal-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlow-normal-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/barlow-normal-700.woff2') format('woff2')}
/* Look A: Pit Lane. Bold, dark, racing-signage energy. Black + TrueTech blue, one hot orange for the single action: Text us. */
:root{
  --bg:#050507; --panel:#0e1014; --panel2:#15181e; --line:rgba(var(--text-rgb),.15);
  --text:#eceae4; --body:#cfd2d8; --muted:#a3a8b2; --blue:#4a9cf0; --hot:#ff6b1a; --hot-ink:#190800;
  --display:'Big Shoulders Display','Arial Narrow',sans-serif; --sans:'Barlow',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --gutter:max(24px,(100vw - 1240px)/2);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:7.5rem;scrollbar-color:#3a3f49 var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--hot);color:var(--hot-ink)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:900;text-transform:uppercase;color:var(--text);margin:0;text-wrap:balance}
p{margin:0 0 1.1em}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--hot);color:var(--hot-ink);padding:.7rem 1rem;z-index:100;font-weight:700}
.skip:focus{left:0}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.muted{color:var(--muted)}
.i{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font:800 1.2rem/1 var(--display);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;padding:1rem 1.6rem;border:2px solid transparent;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.btn.sm{font-size:1.05rem;padding:.75rem 1.1rem}
.btn.hot{background:var(--hot);color:var(--hot-ink)}
.btn.hot:hover{background:var(--hot-hover);transform:translateY(-2px)}
.btn.ghost{border-color:rgba(var(--text-rgb),.35);color:var(--text);background:transparent}
.btn.ghost:hover{border-color:var(--text);background:rgba(var(--text-rgb),.06)}
.btn.ink{background:#000;color:var(--text)}
.btn.ink:hover{background:var(--ink-hover);transform:translateY(-2px)}
.link{display:inline-flex;align-items:center;gap:.5rem;color:var(--text);text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:.3em;text-decoration-thickness:2px}
.link:hover{color:var(--blue)}

/* header */
.top{position:sticky;top:0;z-index:50;background:#000;border-bottom:1px solid var(--line)}
.top-in{width:min(1360px,100% - 40px);margin-inline:auto;height:80px;display:flex;align-items:center;gap:2rem}
.brand img{height:62px;width:auto}
.nav{margin-left:auto;display:flex;gap:2.2rem}
.nav a{position:relative;font:800 1.2rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--text);padding:.5rem 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--hot);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.top-act{display:flex;align-items:center;gap:1rem}
.icon-btn{display:inline-flex;align-items:center;gap:.4rem;color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem;padding:.4rem}
.icon-btn:hover{color:var(--blue)}
.cart .i{width:1.6rem;height:1.6rem}
.cart b{font-weight:700;font-size:.8rem;background:var(--blue);color:#000;border-radius:99px;min-width:1.25rem;height:1.25rem;display:grid;place-items:center}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;padding:.5rem;color:var(--text);display:grid}
.menu summary::-webkit-details-marker{display:none}
.menu .shut{display:none}
.menu[open] .shut{display:block}.menu[open] .open{display:none}
.menu nav{position:absolute;right:-20px;top:calc(100% + 14px);width:min(100vw,360px);background:#000;border:1px solid var(--line);padding:.6rem 1.2rem 1.2rem;display:grid}
.menu nav a{font:800 1.8rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;padding:1rem 0;border-bottom:1px solid var(--line);color:var(--text)}
.menu nav a:last-child{color:var(--hot);border-bottom:0}

/* hero */
.hero{position:relative;overflow:hidden;min-height:min(86svh,820px);display:grid;align-items:center;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;background:url(img/hero-engine.jpeg) 30% 50%/cover;filter:grayscale(1) contrast(1.1);opacity:.34}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 18%,rgba(var(--bg-rgb),.6) 62%,rgba(var(--bg-rgb),.25))}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;padding-block:clamp(2.5rem,6vw,5rem)}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(3.4rem,9.2vw,6rem);line-height:.88;letter-spacing:-.005em}
.w{display:block;overflow:hidden;padding-bottom:.06em}
.w>span{display:block;animation:rise 1s var(--ease) both}
.w:nth-child(2)>span{animation-delay:.08s}.w:nth-child(3)>span{animation-delay:.16s}
.w.hl{color:var(--blue)}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero-sub{font:800 clamp(1.25rem,2.4vw,1.6rem)/1.15 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--hot);margin:1.6rem 0 .9rem}
.hero-lead{font-weight:600;font-size:1.3rem;color:var(--text);line-height:1.35;margin-bottom:.9rem;max-width:34ch}
.hero-p{max-width:54ch;color:var(--body)}
.hero-act{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero-photo{margin:0 calc(-1 * var(--gutter)) 0 -3.5rem;height:clamp(380px,48vw,640px);clip-path:polygon(15% 0,100% 0,100% 100%,0 100%)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* machine tiles */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--line)}
.tile{position:relative;overflow:hidden;aspect-ratio:3/4.1;display:block;text-decoration:none;background:#000}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.72);transform:scale(1.02);transition:transform 1s var(--ease),filter .5s}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),transparent 58%)}
.tile::before{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--hot);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:3}
.tile div{position:absolute;left:1.3rem;right:1.3rem;bottom:1.4rem;z-index:2}
.tile h3{font-size:clamp(2rem,3.4vw,3rem);line-height:.9}
.tile p{margin:.4rem 0 0;color:#d5d7dc;font-weight:500;font-size:1rem;line-height:1.3}
.tile .go{position:absolute;top:1.1rem;right:1.1rem;z-index:2;width:2rem;height:2rem;color:var(--hot);opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .4s var(--ease)}
.tile:hover img{transform:scale(1.09);filter:saturate(1) brightness(.88)}
.tile:hover::before{transform:scaleX(1)}
.tile:hover .go,.tile:focus-visible .go{opacity:1;transform:none}
@media (hover:none){.tile .go{opacity:1;transform:none}}

/* sections */
h2{font-size:clamp(2.2rem,5vw,3.8rem);line-height:.95}
.why{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,5.5rem);align-items:center;padding-block:clamp(4rem,9vw,8rem) clamp(3rem,6vw,5rem)}
.why-photo,.certs-photo{margin:0;clip-path:polygon(0 0,100% 0,100% 90%,90% 100%,0 100%)}
.why-photo img{width:100%;aspect-ratio:4/4.6;object-fit:cover;object-position:35% 50%}
.why-copy h2,.certs-copy h2{margin-bottom:1.5rem}
.spec{padding-bottom:clamp(4rem,8vw,7rem)}
.spec-h{font-size:clamp(1.9rem,3.6vw,2.7rem);padding-bottom:1.2rem}
.spec-list{margin:0}
.spec-list>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.5rem 2.5rem;padding:1.35rem 0;border-top:1px solid var(--line);transition:background-color .3s}
.spec-list>div:last-child{border-bottom:1px solid var(--line)}
.spec-list dt{font:800 clamp(1.4rem,2.4vw,1.85rem)/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--text);transition:color .3s}
.spec-list dd{margin:0;color:var(--muted);font-size:1.1rem;align-self:center}
.spec-list>div:hover dt{color:var(--blue)}
.certs{background:var(--panel);padding-block:clamp(5rem,10vw,9rem) clamp(4rem,8vw,7rem);clip-path:polygon(0 clamp(24px,4vw,56px),100% 0,100% 100%,0 100%);margin-top:-1px}
.certs-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,5.5rem);align-items:center}
.certs-photo img{width:100%;aspect-ratio:4/3.7;object-fit:cover;object-position:50% 35%}
.serving{position:relative;min-height:clamp(440px,60vw,640px);display:grid;align-items:end;overflow:hidden;background:#000}
.serving>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;filter:brightness(.62) saturate(.9)}
.serving::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--bg-rgb),.92),rgba(var(--bg-rgb),0) 70%)}
.serving-in{position:relative;z-index:2;padding-block:clamp(2.5rem,6vw,4.5rem)}
.serving h2{margin-bottom:1rem}
.serving p{max-width:60ch;font-size:1.15rem;color:var(--text);margin:0}
.diff{padding-block:clamp(4.5rem,10vw,8.5rem);text-align:center}
.diff h2{font-size:clamp(2.4rem,6.4vw,5rem);margin-bottom:1.5rem}
.diff p{max-width:62ch;margin-inline:auto;font-size:1.3rem;line-height:1.55}

/* CTA band */
.band{background:var(--hot);color:var(--hot-ink);padding-block:clamp(3.5rem,7vw,5.5rem);clip-path:polygon(0 clamp(20px,3vw,44px),100% 0,100% 100%,0 100%);margin-top:-1px}
.band-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);align-items:center;padding-top:clamp(1rem,2vw,2rem)}
.band h2{color:var(--hot-ink);font-size:clamp(2.4rem,5.6vw,4.7rem);line-height:.92}
.phone-big{display:block;font:900 clamp(2.4rem,4.6vw,3.6rem)/1 var(--display);letter-spacing:.02em;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.15em;margin-bottom:1rem;padding-block:.35rem;color:var(--hot-ink)}
.band p{font-weight:500;font-size:1.05rem;margin-bottom:1.3rem}
.band :focus-visible{outline-color:#000}

/* visit */
.visit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,4rem);padding-block:clamp(3.5rem,7vw,6rem)}
.visit h2{font-size:1.7rem;color:var(--blue);margin-bottom:1.1rem;letter-spacing:.04em}
.hours{margin:0 0 .8rem}
.hours>div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.hours dt{color:var(--text);font-weight:600}.hours dd{margin:0;font-variant-numeric:tabular-nums}
.social{display:flex;gap:.7rem}
.social a{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(var(--text-rgb),.3);color:var(--text);transition:background-color .25s,color .25s,border-color .25s}
.social a:hover{background:var(--hot);border-color:var(--hot);color:var(--hot-ink)}
.social.big a{width:58px;height:58px}.social.big .i{width:1.6rem;height:1.6rem}

/* footer */
.foot{background:#000;border-top:1px solid var(--line);padding-block:2.5rem}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 3rem}
.foot-logo{height:64px;width:auto}
.foot address{font-style:normal;display:grid;gap:.35rem;color:var(--muted);font-size:.98rem}
.foot address span,.foot address a{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}
.foot address a:hover{color:var(--text)}
.legal{margin:0 0 0 auto;color:var(--muted);font-size:.9rem}

/* services */
.page-head{padding-block:clamp(3rem,7vw,5.5rem) 2.2rem}
.page-head h1{font-size:clamp(3.6rem,11vw,6rem);line-height:.88}
.page-head p{font-size:1.25rem;color:var(--muted);max-width:54ch;margin:1.2rem 0 0}
.chips{position:sticky;top:80px;z-index:40;background:var(--bg);border-block:1px solid var(--line)}
.chips .wrap{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none}
.chips a{white-space:nowrap;font:800 1.15rem/1 var(--display);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:1.05rem 1.1rem;transition:color .2s}
.chips a:hover{color:var(--hot)}
.svc{padding-block:clamp(2.5rem,6vw,5rem)}
.svc-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
.svc figure{grid-column:1/8;grid-row:1;margin:0;height:clamp(300px,38vw,500px);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0);}
.svc figure img{width:100%;height:100%;object-fit:cover}
.svc-card{grid-column:6/13;grid-row:1;position:relative;z-index:2;background:var(--panel);padding:clamp(1.6rem,3.5vw,3rem);margin-top:clamp(3rem,7vw,5.5rem);border:1px solid var(--line)}
.svc.flip figure{grid-column:6/13}.svc.flip .svc-card{grid-column:1/8}
.svc-card h2{font-size:clamp(1.9rem,3.5vw,2.8rem);margin-bottom:.8rem}
.svc-sub{font:800 1.25rem/1.15 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--hot);margin-bottom:1.1rem}
.svc-card p{max-width:60ch}
.svc-card .btn{margin-top:.8rem}
.parts{background:var(--panel);padding-block:clamp(3.5rem,8vw,6rem);margin-top:2rem}
.parts-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem)}
.parts h2{margin-bottom:1rem}
.ticks{list-style:none;padding:0;margin:0 0 1.2rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;padding:.3rem 0}
.ticks .i{color:var(--hot);margin-top:.25em}
.other{padding-block:clamp(3.5rem,8vw,6rem)}
.other-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}
.other article{border-top:1px solid var(--line);padding-top:1.4rem}
.other h3{font-size:1.9rem;line-height:1;margin-bottom:.9rem}

/* shop */
.crumbs{font-size:.95rem;color:var(--muted);margin-bottom:1.4rem}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--text)}
.shop-head{position:relative;overflow:hidden;padding-block:2.2rem clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line)}
.shop-head-bg{position:absolute;inset:0;background:url(img/shop-banner.jpg) 50% 45%/cover;filter:grayscale(1);opacity:.3}
.shop-head-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 20%,rgba(var(--bg-rgb),.55))}
.shop-head .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,4rem);align-items:end}
.shop-head .crumbs{grid-column:1/-1}
.shop-head h1{font-size:clamp(3.4rem,9vw,5.8rem);line-height:.88;margin-bottom:1.1rem}
.shop-intro{max-width:46ch;font-size:1.15rem;margin:0}
.ship{display:grid;gap:.2rem;border:1px solid var(--blue);padding:1.1rem 1.4rem;grid-row:2/4;grid-column:2;background:rgba(var(--bg-rgb),.7)}
.ship strong{font:800 1.4rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.ship span{color:var(--text)}.ship .blue{color:var(--blue);font-weight:700;letter-spacing:.02em}
.ship small{color:var(--muted);font-size:.9rem;margin-top:.3rem}
.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;padding-block:1.1rem;border-bottom:1px solid var(--line);margin-top:2rem}
.cats{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem}
.cats a{font:800 1.25rem/1 var(--display);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:.4rem 0;border-bottom:3px solid transparent}
.cats a:hover{color:var(--text)}.cats a[aria-current]{color:var(--text);border-color:var(--hot)}
.tools{display:flex;align-items:center;gap:1.6rem;color:var(--muted);font-size:.98rem}
.tools select{background:var(--panel);color:var(--text);border:1px solid var(--line);padding:.5rem .7rem;font:inherit;margin-left:.4rem;accent-color:var(--hot)}
.grid{list-style:none;padding:0;margin:2rem 0 clamp(3.5rem,7vw,6rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem 1.25rem}
.pcard{display:block;text-decoration:none}
.pimg{display:grid;place-items:center;background:#fff;aspect-ratio:1;overflow:hidden}
.pimg img{width:88%;transition:transform .6s var(--ease)}
.pcard:hover .pimg img{transform:scale(1.07)}
.pname{display:block;margin-top:.85rem;font-weight:600;font-size:1.08rem;line-height:1.25;color:var(--text);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;text-decoration-thickness:2px;transition:text-decoration-color .2s}
.pcard:hover .pname{text-decoration-color:var(--hot)}
.pprice{display:block;margin-top:.15rem;font:800 1.55rem/1.2 var(--display);letter-spacing:.02em;color:var(--blue);font-variant-numeric:tabular-nums}
.related{padding-top:1rem}
.related .grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1.5rem}

/* product */
.pdp{padding-block:2.2rem clamp(3rem,6vw,5rem)}
.pdp-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.pdp-img{margin:0;background:#fff;aspect-ratio:1;display:grid;place-items:center;clip-path:polygon(0 0,100% 0,100% 92%,92% 100%,0 100%)}
.pdp-img img{width:90%}
.pdp h1{font-size:clamp(2.6rem,5vw,4.2rem);line-height:.92}
.pdp-price{font:800 2.6rem/1 var(--display);color:var(--blue);margin:.8rem 0 1.6rem;letter-spacing:.02em}
.buy{display:grid;gap:.8rem;margin-bottom:2rem}
.qty{display:grid;gap:.4rem;color:var(--muted);font-size:.95rem}
.qty span{display:inline-flex;border:1px solid var(--line);width:max-content}
.qty button{background:none;border:0;color:var(--text);width:46px;cursor:pointer;display:grid;place-items:center}
.qty button:hover{background:var(--panel2)}
.qty input{width:56px;text-align:center;background:none;border:0;border-inline:1px solid var(--line);color:var(--text);font:600 1.1rem var(--sans);-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{display:none}
.pdp-copy{margin-bottom:1.4rem;max-width:56ch}

/* team + faq */
.svc-copy h3{font-size:1.55rem;line-height:1;margin:1.6rem 0 .7rem;color:var(--text)}
.svc-copy h3:first-child{margin-top:0}
.svc-copy .ticks{margin-bottom:1.4rem}
.who{font:600 .95rem/1.3 var(--sans);letter-spacing:.04em;color:var(--muted);margin:-.4rem 0 1.4rem}
.team-tiles .tile{aspect-ratio:3/4.3}
.faq{background:var(--panel);padding-block:clamp(3.5rem,8vw,6rem)}
.faq-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,4.5rem)}
.faq h2{margin-bottom:1rem}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-of-type{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.2rem 0;font:800 clamp(1.2rem,2vw,1.55rem)/1.15 var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--text);transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--blue)}
.faq-item .pm{color:var(--hot);width:1.5rem;height:1.5rem;transition:transform .35s var(--ease)}
.faq-item[open] .pm{transform:rotate(45deg)}
.faq-a{padding:0 0 1.5rem;max-width:64ch}
.faq-end{margin:2rem 0 0;color:var(--muted)}

/* responsive */
@media (max-width:1100px){
  .text-us span{display:none}.text-us{padding:.75rem}
  .grid,.related .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .menu summary{padding:.75rem}.cart{padding:.7rem .5rem}.foot address a,.visit .link{padding:.7rem 0}
  .nav,.login{display:none}.menu{display:block}.top-in{gap:1rem}.brand{margin-right:auto}
  .hero{min-height:0}
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{margin:2.5rem calc(-1 * var(--gutter)) 0;height:auto;aspect-ratio:4/3;clip-path:polygon(0 8%,100% 0,100% 100%,0 100%)}
  .tiles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:2px}
  .tile{flex:0 0 74vw;max-width:340px;scroll-snap-align:start}
  .why,.certs-in,.band-in,.parts-in,.shop-head .wrap,.pdp-grid,.faq-in{grid-template-columns:1fr}
  .certs-photo{order:2}
  .certs{padding-block:3.5rem 3rem}
  .spec-list>div{grid-template-columns:1fr;gap:.4rem}
  .visit,.other-grid{grid-template-columns:1fr}
  .svc-in{display:block}
  .svc figure{height:clamp(240px,60vw,380px)}
  .svc-card,.svc.flip .svc-card{margin:-2.2rem 12px 0;position:relative}
  .ship{grid-column:1;grid-row:auto;margin-top:1.6rem}
  .legal{margin-left:0}
}
@media (max-width:640px){
  .link{min-height:44px}.tools select{min-height:44px}
  .text-us{display:none}
  .cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .cats a{white-space:nowrap;padding:.85rem 0}
  .qty button,.qty input{height:48px}
  .wrap{width:calc(100% - 40px)}
  .grid,.related .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem .9rem}
  .hero-act .btn{flex:1 1 100%}
  .pname{font-size:1rem}.pprice{font-size:1.35rem}
  .tools{width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Look A layout options for image + text-box sections. Loaded after style.css.
   .opt1 "Overlap": text card overlaps the photo (base style.css, no overrides).
   .opt2 "Split": photo and text panel sit edge to edge, side by side, nothing overlaps (default).
   .opt4 "Storefront": store-first layout, see option4.css. */

/* ---------- option 2: split ---------- */
.opt2 .svc{padding-block:0;border-top:1px solid var(--line)}
.opt2 .svc:first-of-type{border-top:0}
.opt2 .svc-in{width:100%;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;background:var(--panel)}
.opt2 .svc figure{grid-column:1;grid-row:1;height:auto;min-height:clamp(360px,42vw,600px);clip-path:polygon(0 0,100% 0,calc(100% - 56px) 100%,0 100%)}
.opt2 .svc.flip figure{grid-column:2;clip-path:polygon(56px 0,100% 0,100% 100%,0 100%)}
.opt2 .svc-card{grid-column:2;grid-row:1;margin:0;border:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,5vw,5rem);background:none}
.opt2 .svc.flip .svc-card{grid-column:1}
.opt2 .svc-card h2{font-size:clamp(2rem,3.6vw,3rem)}

.opt2 .team-bio figure{background:var(--panel)}
.opt2 .team-bio figure img{position:sticky;top:100px;height:clamp(340px,40vw,560px)}

.opt2 .hero-photo{margin-left:0}
.opt2 .hero-grid{column-gap:clamp(1.5rem,4vw,3rem)}
.opt2 .serving{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:0;background:var(--panel);align-items:stretch}
.opt2 .serving>img{position:static;height:100%;min-height:clamp(380px,44vw,600px);filter:none;clip-path:polygon(0 0,100% 0,calc(100% - 56px) 100%,0 100%)}
.opt2 .serving::after{display:none}
.opt2 .serving-in{width:auto;margin:0;padding:clamp(2rem,5vw,5rem);align-self:center}

@media (max-width:900px){
  .opt2 .svc-in{display:block}
  .opt2 .svc figure,.opt2 .svc.flip figure{min-height:0;height:clamp(240px,60vw,380px);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  .opt2 .svc-card,.opt2 .svc.flip .svc-card{padding:1.8rem 20px 2.2rem}
  .opt2 .team-bio figure img{position:static;height:clamp(240px,60vw,380px)}
  .opt2 .hero-photo{margin:2.5rem calc(-1 * var(--gutter)) 0}
  .opt2 .serving{display:block}
  .opt2 .serving>img{min-height:0;height:clamp(240px,60vw,380px);width:100%;clip-path:none}
  .opt2 .serving-in{padding:1.8rem 0 2.4rem;width:calc(100% - 40px);margin-inline:auto}
}
:root,html[data-theme="orig"]{--bg:#050507;--panel:#0e1014;--panel2:#15181e;--text:#eceae4;--body:#cfd2d8;--muted:#a3a8b2;--blue:#4a9cf0;--hot:#ff6b1a;--hot-ink:#190800;--hot-hover:#ff8442;--ink-hover:#1b1b1f;--bg-rgb:5,5,7;--text-rgb:236,234,228;--line:rgba(236,234,228,.15)}