/* Wired By Pete — site styles v4 "Trade Brand" (3E: split hero + label-maker service cards + film strip).
   Safety orange, black, white, concrete grey. Heavy italic condensed display type. Thick black rules, hard shadows. */
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-style:italic;font-display:swap;src:url(fonts/barlow-condensed-latin-800-italic.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:900;font-style:italic;font-display:swap;src:url(fonts/barlow-condensed-latin-900-italic.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")}

:root{
  color-scheme:light;
  --org:#ff5a1f; --org-2:#ff7641; --blk:#0c0c0c; --wht:#ffffff; --con:#dcdcd8; --con-2:#c9c9c4;
  --ink-2:#2e2e2e; --mute:#5c5c5a; --line:#0c0c0c;
  --f-d:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --f:"Barlow","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(16px,4vw,56px);
  --max:1440px;
  --nav-h:72px;
  --dots:radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--con);color:var(--blk);font:17px/1.55 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--org);color:var(--blk)}
:focus-visible{outline:3px solid var(--org);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:300;background:var(--org);color:var(--blk);padding:10px 14px;font-weight:600}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--f-d);font-weight:900;font-style:italic;text-transform:uppercase;line-height:.86;letter-spacing:-.005em;margin:0;text-wrap:balance}
h2{font-size:clamp(3rem,7.4vw,6.6rem)}
h3{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:900}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);font-weight:500;max-width:46ch;color:var(--ink-2)}
.label,.meta,.k{font-family:var(--f-d);font-weight:600;font-style:normal;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase}
.label{color:var(--blk)}
.meta{color:var(--mute)}
.code{font-family:var(--f-d);font-weight:900;font-style:italic;font-size:1.05rem;color:var(--org);letter-spacing:.02em}
.tape{display:inline-block;background:var(--blk);color:var(--wht);font-family:var(--f-d);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.04em;padding:4px 12px 3px;transform:rotate(-1.2deg);box-shadow:2px 2px 0 rgba(0,0,0,.2);line-height:1.2}
.tape.o{background:var(--org);color:var(--blk)}

/* ---------- actions ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 24px;background:var(--blk);color:var(--wht);border:3px solid var(--blk);font-family:var(--f-d);font-weight:800;font-style:italic;font-size:1.25rem;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-3px,-3px);box-shadow:3px 3px 0 var(--blk)}
.btn.o{background:var(--org);color:var(--blk)}
.btn.wt{background:var(--wht);color:var(--blk)}
.btn.dark{background:var(--blk);color:var(--wht)}
.link{display:inline-flex;align-items:center;gap:.5em;min-height:44px;font-family:var(--f-d);font-weight:800;font-style:italic;font-size:1.15rem;text-transform:uppercase;text-decoration:none;border-bottom:3px solid var(--org)}
.link:hover{color:var(--org)}
.arr{display:inline-block;transition:transform .2s}
.btn:hover .arr,.link:hover .arr{transform:translateX(3px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:90;background:var(--wht);border-bottom:4px solid var(--blk)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:var(--nav-h)}
.nav-logo{display:flex;align-items:center;height:100%;padding-block:12px;margin-right:auto}
.nav-logo img{height:46px;width:auto;max-height:100%;object-fit:contain}
.nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{display:flex;align-items:center;min-height:44px;padding:0 12px;font-family:var(--f-d);font-weight:800;font-style:italic;font-size:1.2rem;text-transform:uppercase;text-decoration:none}
.nav-links a:hover{color:var(--org)}
.nav-links a[aria-current="page"]{box-shadow:inset 0 -4px 0 var(--org)}
.nav .btn{min-height:46px;font-size:1.05rem;padding:0 18px}
.menu-btn{display:none;align-items:center;gap:10px;height:46px;padding:0 14px;background:var(--blk);color:var(--wht);border:0;cursor:pointer;font-family:var(--f-d);font-weight:800;font-style:italic;font-size:1.1rem;text-transform:uppercase}
.menu-btn i{position:relative;width:18px;height:10px;display:block}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--wht);transition:transform .25s,top .25s}
.menu-btn i::before{top:0}.menu-btn i::after{top:8px}
.menu-open .menu-btn i::before{top:4px;transform:rotate(45deg)}
.menu-open .menu-btn i::after{top:4px;transform:rotate(-45deg)}
@media (max-width:900px){.nav-links,.nav .nav-cta{display:none}.menu-btn{display:inline-flex}.nav-logo img{height:40px}:root{--nav-h:64px}}
body.menu-open{overflow:hidden}
.mnav{position:fixed;inset:0;z-index:80;background:var(--org);padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 20px) var(--gut) calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:24px;overflow-y:auto}
.mnav ol{list-style:none;margin:0;padding:0;border-top:4px solid var(--blk)}
.mnav ol li{border-bottom:3px solid var(--blk)}
.mnav ol a{display:block;padding:12px 0;text-decoration:none;font-family:var(--f-d);font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(2.6rem,13vw,3.6rem);line-height:.9}
.mnav ol a[aria-current="page"]{color:var(--wht);-webkit-text-stroke:2px var(--blk);paint-order:stroke fill}
.mnav .svc-mini{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mnav .svc-mini a{display:block;padding:8px 10px;background:var(--blk);color:var(--wht);text-decoration:none;font-family:var(--f-d);font-weight:800;font-style:italic;text-transform:uppercase}
.mnav .meta{color:var(--blk)}
.mnav .btn{width:100%}
.mnav .link{border-color:var(--blk)}
.mnav .sig{font-family:var(--f-d);font-weight:900;font-style:italic;font-size:1.6rem;text-transform:uppercase}

/* ---------- home hero: split ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;border-bottom:6px solid var(--blk);min-height:clamp(560px,82vh,820px);background:var(--org)}
.hero-copy{padding:clamp(32px,5vw,72px) max(var(--gut),calc((100vw - var(--max))/2 + var(--gut))) clamp(32px,5vw,72px) max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));padding-right:clamp(20px,4vw,64px);display:grid;align-content:space-between;gap:28px;border-right:6px solid var(--blk)}
.hero h1{display:grid;gap:18px}
.hero .kicker{font-family:var(--f-d);font-weight:600;font-style:normal;font-size:.95rem;letter-spacing:.08em}
.hero .big{display:grid;font-size:clamp(3.6rem,8vw,8.6rem)}
.hero .big .v{color:var(--wht);-webkit-text-stroke:3px var(--blk);paint-order:stroke fill}
.hero .lede{color:var(--blk);font-size:1.15rem}
.hero-rest{display:grid;gap:22px}
.hero-media{margin:0;position:relative;background:#000;min-height:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-media figcaption{position:absolute;right:0;bottom:0;background:var(--blk);color:var(--wht);padding:10px 16px}
@media (max-width:900px){.hero{grid-template-columns:1fr;min-height:0}.hero-copy{border-right:0;border-bottom:6px solid var(--blk);padding-inline:var(--gut)}.hero-media{aspect-ratio:4/3.4}}

/* ---------- sections ---------- */
.sec{padding-block:clamp(64px,9vw,120px)}
.sec.tight{padding-block:clamp(44px,6vw,80px)}
.sec.alt{background:var(--blk);color:var(--wht)}
.sec.alt .lede{color:#cfcfcf}
.sec.alt .label{color:var(--org)}
.sec.dots{background-image:var(--dots);background-size:6px 6px}
.sec.org{background:var(--org);border-block:6px solid var(--blk)}
.head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px);max-width:70ch}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:clamp(28px,4vw,48px);border-bottom:6px solid currentColor;padding-bottom:16px}
.head-row .head{margin:0}
.head-row h2{font-size:clamp(3rem,8vw,7rem)}

/* ---------- service cards (label maker) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{background:var(--wht);color:var(--blk);border:3px solid var(--blk);box-shadow:6px 6px 0 var(--blk);display:grid;grid-template-rows:auto 1fr;text-decoration:none;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--org)}
.card .ph{position:relative;border-bottom:3px solid var(--blk);overflow:hidden}
.card .ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card .ph .tape{position:absolute;left:12px;top:12px}
.card .b{padding:18px;display:grid;gap:10px;align-content:start}
.card h3{font-size:clamp(1.8rem,2.4vw,2.2rem)}
.card p{font-size:.98rem;color:var(--ink-2)}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-family:var(--f-d);font-weight:600;text-transform:uppercase;font-size:.9rem;border:2px solid var(--blk);padding:2px 8px}
.card .go{font-family:var(--f-d);font-weight:800;font-style:italic;text-transform:uppercase;color:var(--org);margin-top:4px}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cards{grid-template-columns:1fr}.card .ph img{aspect-ratio:16/10}}

/* ---------- film strip ---------- */
.film{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 18px;scroll-padding-inline:var(--gut);scrollbar-width:thin;scrollbar-color:var(--blk) var(--con-2)}
.film figure{margin:0;flex:0 0 clamp(250px,30vw,420px);scroll-snap-align:start;background:var(--wht);border:4px solid var(--blk)}
.film button{all:unset;cursor:zoom-in;display:block;border-bottom:4px solid var(--blk);overflow:hidden}
.film button:focus-visible{outline:3px solid var(--org);outline-offset:-3px}
.film img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s}
.film button:hover img{transform:scale(1.04)}
.film figcaption{padding:12px 14px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.film figcaption b{font-family:var(--f-d);font-weight:900;font-style:italic;text-transform:uppercase;font-size:1.35rem;line-height:1}
.film figcaption span{font-family:var(--f-d);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;color:var(--org);white-space:nowrap}
.film .more{display:none}
.film-foot{padding-inline:var(--gut);max-width:var(--max);margin:18px auto 0}

/* ---------- portfolio grid (work page, service pages) ---------- */
.pf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;grid-auto-flow:dense}
.it{grid-column:span 4;margin:0;background:var(--wht);border:3px solid var(--blk);box-shadow:5px 5px 0 var(--blk);display:grid;grid-template-rows:auto 1fr;transition:transform .15s,box-shadow .15s}
.it:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--org)}
.it.F{grid-column:span 8}
.it.H{grid-column:span 6}
.it .ph{all:unset;cursor:zoom-in;display:block;position:relative;overflow:hidden;aspect-ratio:4/5;border-bottom:3px solid var(--blk)}
.it.F .ph{aspect-ratio:16/10}
.it.H .ph{aspect-ratio:6/5}
.it .ph:focus-visible{outline:3px solid var(--org);outline-offset:-3px}
.it img{width:100%;height:100%;object-fit:cover}
.it .count{position:absolute;right:0;bottom:0;padding:5px 10px;background:var(--blk);color:var(--wht);font-family:var(--f-d);font-weight:800;font-style:italic;text-transform:uppercase;font-size:.95rem}
.it .sig-tag{position:absolute;left:12px;top:12px;background:var(--org);color:var(--blk);font-family:var(--f-d);font-weight:800;font-style:italic;text-transform:uppercase;padding:3px 10px;transform:rotate(-1.2deg)}
.it figcaption{padding:12px 14px;display:grid;gap:4px;align-content:start}
.it .top{display:flex;justify-content:space-between;gap:10px;font-size:.85rem;color:var(--mute)}
.it .top .label{color:var(--org);font-size:.85rem}
.it h3{font-size:clamp(1.3rem,1.7vw,1.6rem);line-height:1}
.it .more{display:none}
.it[hidden]{display:none}
@media (max-width:1023px) and (min-width:641px){.pf{grid-template-columns:repeat(6,minmax(0,1fr))}.it,.it.H{grid-column:span 3}.it.H .ph{aspect-ratio:4/5}.it.F{grid-column:span 6}}
@media (max-width:640px){.pf{grid-template-columns:1fr 1fr;gap:12px}.it,.it.H{grid-column:span 1}.it.H .ph{aspect-ratio:4/5}.it.F{grid-column:span 2}.it.F .ph{aspect-ratio:4/3}.it h3{font-size:1.15rem}.it .top{flex-direction:column;gap:0}.it{box-shadow:3px 3px 0 var(--blk)}}

/* filters */
.filters{display:flex;gap:8px;overflow-x:auto;padding:12px var(--gut);margin:0 calc(var(--gut) * -1) 28px;scrollbar-width:none;position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));z-index:30;background:var(--con);border-bottom:4px solid var(--blk)}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;min-height:44px;padding:0 14px;background:var(--wht);border:3px solid var(--blk);font-family:var(--f-d);font-weight:800;font-style:italic;font-size:1.05rem;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:8px}
.filters button span{font-weight:600;font-style:normal;font-size:.85rem;color:var(--mute)}
.filters button:hover{background:var(--con-2)}
.filters button[aria-pressed="true"]{background:var(--org)}
.filters button[aria-pressed="true"] span{color:var(--blk)}

/* ---------- before / after ---------- */
.ba{margin:0;display:grid;gap:14px;align-content:start}
.ba-frame{position:relative;aspect-ratio:var(--ar,1200/1383);max-width:100%;overflow:hidden;background:#000;border:6px solid var(--org);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;--pos:50%}
.ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-frame .after{clip-path:inset(0 0 0 var(--pos))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:6px;margin-left:-3px;background:var(--org);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--pos);width:62px;height:62px;margin:-31px 0 0 -31px;background:var(--org);border:4px solid var(--blk);display:grid;place-items:center;pointer-events:none}
.ba-knob svg{width:28px;height:28px;stroke:var(--blk);fill:none;stroke-width:2.4}
.lab{position:absolute;top:0;padding:6px 12px;font-family:var(--f-d);font-weight:900;font-style:italic;text-transform:uppercase;background:var(--blk);color:var(--wht);pointer-events:none}
.lab.b{left:0}.lab.a{right:0;background:var(--org);color:var(--blk)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none}
.ba-frame:has(.ba-range:focus-visible){outline:3px solid var(--wht);outline-offset:3px}
.ba figcaption{display:grid;gap:6px}
.ba figcaption .label{color:var(--org)}
.ba .fromto{display:flex;flex-wrap:wrap;gap:4px 10px;font-weight:600}
.ba .fromto s{text-decoration:none;opacity:.65}
.ba .fromto .arr{color:var(--org)}
.ba figcaption p{opacity:.8;font-size:.95rem;max-width:56ch}
.ba h3{font-size:clamp(1.8rem,2.8vw,2.6rem)}
.ba-all{display:grid;gap:clamp(40px,5vw,64px) clamp(20px,3vw,40px)}
@media (min-width:900px){.ba-all{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ba-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.ba-feature h2 span{color:var(--org)}
@media (max-width:820px){.ba-feature{grid-template-columns:1fr}}

/* ---------- Pete's standard + about ---------- */
.standard .big{font-family:var(--f-d);font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(4rem,12vw,12rem);line-height:.78;margin:12px 0 0}
.standard .big span{display:block}
.standard .big span:last-child{color:var(--org)}
.std-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end}
@media (max-width:820px){.std-grid{grid-template-columns:1fr}}
.quote{margin:0;background:var(--blk);color:var(--wht);padding:20px;border-left:8px solid var(--org);font-family:var(--f-d);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:.95}
.quote small{display:block;margin-top:8px;font-family:var(--f);font-style:normal;font-weight:500;text-transform:none;font-size:.85rem;color:#bdbdbd}
.about{display:grid;gap:clamp(28px,4vw,64px)}
@media (min-width:900px){.about{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}}
.about figure{margin:0;background:var(--wht);border:3px solid var(--blk);box-shadow:8px 8px 0 var(--blk);padding:10px 10px 0;transform:rotate(-1.5deg)}
.about figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.about figcaption{padding:10px 0}
.about-copy{display:grid;gap:20px}
.about-copy .statement{font-family:var(--f-d);font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(2.4rem,5vw,4.6rem);line-height:.88}
.about-copy p{max-width:56ch;color:var(--ink-2)}
.about-copy p a,.incl a,.faq p a{text-decoration-color:var(--org);text-decoration-thickness:2px;text-underline-offset:3px;font-weight:600}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 20px;border-top:4px solid var(--blk)}
.facts div{padding:14px 0 0;display:grid;gap:4px}
.facts dt{font-family:var(--f-d);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.9rem;color:var(--mute)}
.facts dd{margin:0;font-family:var(--f-d);font-weight:900;font-style:italic;text-transform:uppercase;font-size:1.6rem;line-height:1}
.places{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.places li{font-family:var(--f-d);font-weight:600;text-transform:uppercase;border:2px solid currentColor;padding:3px 10px}
.caps-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}

/* ---------- quote block ---------- */
.quote-block{background:var(--org);border-top:6px solid var(--blk)}
.quote-block .wrap{display:grid;gap:clamp(28px,4vw,48px);padding-block:clamp(56px,8vw,112px)}
@media (min-width:1024px){.quote-block .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end}}
.quote-block h2{font-size:clamp(3.6rem,10vw,9rem);line-height:.82}
.quote-block p{max-width:42ch;font-weight:500;font-size:1.1rem}
.quote-block p a{font-weight:700;text-decoration-thickness:2px}
.pick{display:grid;gap:12px}
.pick .meta{color:var(--blk)}
.pick ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pick li a{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:52px;padding:0 14px;background:var(--wht);border:3px solid var(--blk);text-decoration:none;font-family:var(--f-d);font-weight:800;font-style:italic;text-transform:uppercase;font-size:1.1rem;transition:background .15s}
.pick li a:hover{background:var(--blk);color:var(--wht)}

/* ---------- inner page heads (split, like the home hero) ---------- */
.phead{background:var(--org);border-bottom:6px solid var(--blk)}
.phead .wrap{display:grid;gap:clamp(24px,4vw,56px);padding-block:clamp(28px,4vw,56px) clamp(36px,5vw,64px)}
@media (min-width:1024px){.phead .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.phead-copy{display:grid;gap:18px;align-content:end}
.phead h1{font-size:clamp(3.2rem,7vw,7rem)}
.phead .lede{color:var(--blk)}
.h1-loc{display:block;font-size:.34em;color:var(--wht);-webkit-text-stroke:1.5px var(--blk);paint-order:stroke fill;margin-top:.3em;line-height:1}
.phead figure{margin:0;background:var(--blk);border:6px solid var(--blk);box-shadow:10px 10px 0 var(--blk)}
.phead figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.phead figcaption{color:var(--wht);padding:8px 12px;font-family:var(--f-d);font-weight:800;font-style:italic;text-transform:uppercase}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-family:var(--f-d);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem}
.crumbs li+li::before{content:"/";margin-right:8px}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}

/* service detail list */
.incl{display:grid;gap:40px}
@media (min-width:1024px){.incl{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}.incl .sticky{position:sticky;top:calc(var(--nav-h) + 32px)}}
.incl h2{font-size:clamp(2.8rem,5.4vw,4.8rem)}
.install-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.install-list li{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:18px;background:var(--wht);border:3px solid var(--blk);box-shadow:5px 5px 0 var(--blk)}
.install-list h3{font-size:clamp(1.7rem,2.6vw,2.2rem)}
.install-list small{display:block;margin-top:6px;font-size:1rem;color:var(--ink-2)}
.install-list .code{font-size:1.4rem;padding-top:2px}

/* FAQ */
.faqs{max-width:1000px;display:grid;gap:10px}
.faq{background:var(--wht);border:3px solid var(--blk);color:var(--blk)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:16px 18px;font-family:var(--f-d);font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:2rem;color:var(--org);transition:transform .2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 18px 18px;max-width:72ch;color:var(--ink-2)}

/* automotive callout */
.callout{display:grid;gap:18px;padding:clamp(24px,4vw,48px);background:var(--blk);color:var(--wht);border:4px solid var(--blk);box-shadow:10px 10px 0 var(--org)}
@media (min-width:900px){.callout{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
.callout h3{font-size:clamp(2rem,4vw,3.4rem)}
.callout .label{color:var(--org)}

/* ---------- contact ---------- */
.form-grid{display:grid;gap:48px}
@media (min-width:1024px){.form-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}.form-grid .side{position:sticky;top:calc(var(--nav-h) + 32px)}}
.qform{display:grid;gap:22px;background:var(--wht);border:4px solid var(--blk);box-shadow:10px 10px 0 var(--blk);padding:clamp(20px,3vw,36px)}
.row2{display:grid;gap:20px}
@media (min-width:640px){.row2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.field label,.field legend{font-family:var(--f-d);font-weight:800;font-style:italic;text-transform:uppercase;font-size:1.15rem}
.field em{color:var(--org);font-style:normal}
.field .opt{font-family:var(--f);font-style:normal;text-transform:none;font-weight:400;font-size:.9rem;color:var(--mute)}
.field input,.field textarea{width:100%;min-height:56px;padding:12px 14px;background:var(--wht);border:3px solid var(--blk);color:var(--blk);font:inherit;font-size:16px;border-radius:0}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;box-shadow:4px 4px 0 var(--org)}
.field [aria-invalid="true"]{border-color:#d4260f}
.err{color:#b8200b;font-weight:600;font-size:.92rem}
.err:empty{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chips label{cursor:pointer;position:relative;font-family:var(--f);font-style:normal;text-transform:none;font-size:1rem;font-weight:400}
.chips input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;min-height:46px;padding:0 14px;border:3px solid var(--blk);font-family:var(--f-d);font-weight:800;font-style:italic;text-transform:uppercase;font-size:1.05rem;background:var(--wht)}
.chips label:hover span{background:var(--con)}
.chips input:checked+span{background:var(--org)}
.chips input:focus-visible+span{outline:3px solid var(--org);outline-offset:2px}
.drop{border:3px dashed var(--blk);padding:20px;display:grid;gap:4px;cursor:pointer;position:relative;font-style:normal}
.drop:hover{background:var(--con)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop small{font-family:var(--f);text-transform:none;font-style:normal;font-weight:400;font-size:.92rem;color:var(--mute)}
.files{font-size:.92rem}
.form-note{padding:20px;border:4px solid var(--blk);background:var(--org);display:grid;gap:12px}
.side{display:grid;gap:22px}
.side h1{font-size:clamp(3.2rem,7vw,6.4rem)}
.side ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.side ol li{display:grid;grid-template-columns:40px 1fr;gap:8px;padding:12px;background:var(--wht);border:3px solid var(--blk);font-weight:500}
.side .big-link{font-family:var(--f-d);font-weight:900;font-style:italic;text-transform:uppercase;font-size:2.4rem;text-decoration:none;line-height:1}
.side .big-link:hover{color:var(--org)}

/* ---------- footer ---------- */
.foot{background:var(--blk);color:var(--wht);padding-block:56px calc(36px + env(safe-area-inset-bottom,0px))}
.foot-sig{font-family:var(--f-d);font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(3rem,9vw,8rem);line-height:.8;color:var(--org);margin-bottom:44px}
.foot-top{display:grid;gap:32px}
@media (min-width:900px){.foot-top{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-logo{height:64px;width:auto}
.foot h4{font-family:var(--f-d);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8d8d8d;margin:0 0 10px;font-size:.95rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{text-decoration:none;color:#e6e6e6}
.foot a:hover{color:var(--org)}
.foot-sys{color:#a8a8a8;font-size:.95rem;margin-top:14px;max-width:32ch}
.foot-bot{margin-top:40px;padding-top:16px;border-top:2px solid #2a2a2a;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.88rem;color:#8d8d8d}
.wave{display:block;width:100%;height:28px;color:var(--org);margin-top:32px}
.wave path{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke}

/* ---------- mobile dock ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--wht);border-top:4px solid var(--blk);transform:translateY(110%);transition:transform .3s}
.dock.show{transform:none}
.dock .btn{flex:1;min-height:52px;background:var(--org);color:var(--blk)}
.dock .sec-act{flex:0 0 auto;display:grid;place-items:center;min-width:68px;min-height:52px;background:var(--blk);color:var(--wht);text-decoration:none;font-family:var(--f-d);font-weight:800;font-style:italic;font-size:1.15rem;text-transform:uppercase}
@media (max-width:900px){.dock{display:flex}.foot{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,8,8,.97);color:var(--wht);display:grid;grid-template-rows:auto minmax(0,1fr) auto;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.lb.open{opacity:1;visibility:visible}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top,0px)) var(--gut) 12px;font-family:var(--f-d);font-weight:800;font-style:italic;font-size:1.2rem}
.lb-btn{background:var(--org);color:var(--blk);border:3px solid var(--blk);width:52px;height:52px;display:grid;place-items:center;cursor:pointer}
.lb-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4}
.lb-stage{position:relative;display:grid;place-items:center;min-height:0;padding:0 var(--gut);touch-action:pan-y}
.lb-stage img{max-width:100%;max-height:100%;width:auto;object-fit:contain;border:4px solid var(--wht);transition:opacity .2s}
.lb-stage img.swap{opacity:0}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%)}
.lb-prev{left:var(--gut)}.lb-next{right:var(--gut)}
.lb-cap{padding:14px var(--gut) calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 32px}
.lb-cap div{display:grid;gap:4px;max-width:70ch}
.lb-cap .label{color:var(--org)}
.lb-cap h3{font-size:clamp(1.6rem,3vw,2.4rem)}
.lb-cap p{color:#cfcfcf}
.lb-cap .btn{background:var(--org);color:var(--blk);border-color:var(--org)}
@media (max-width:767px){.lb-prev,.lb-next{display:none}.lb-cap .btn{width:100%}}

.nf{min-height:50vh;display:grid;align-content:center;gap:24px}
.nf h1{font-size:clamp(4rem,14vw,12rem)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.card h2{font-size:clamp(1.8rem,2.4vw,2.2rem)}
.sec.alt .places li{color:var(--wht)}
.side .crumbs li{display:inline;padding:0;background:none;border:0;grid-template-columns:none}
@media (max-width:600px){
  .cards{grid-template-columns:1fr 1fr;gap:12px}
  .card{box-shadow:4px 4px 0 var(--blk)}
  .card .ph img{aspect-ratio:1/1}
  .card .ph .tape{font-size:.72rem;left:6px;top:6px;padding:2px 6px}
  .card .b{padding:10px;gap:6px}
  .card h3,.card h2{font-size:1.3rem}
  .card .tags,.card p{display:none}
  .card .go{font-size:.85rem}
}

/* ================= MOBILE PASS ================= */
/* contact layout: title, then form, then tips on phones; two columns on desktop */
.form-grid{grid-template-areas:"top" "form" "help"}
.side-top{grid-area:top}.form-wrap{grid-area:form}.side-help{grid-area:help}
@media (min-width:1024px){.form-grid{grid-template-areas:"top form" "help form";grid-template-rows:auto 1fr}.form-grid .side{position:static}.side-help{align-self:start}}
.side .crumbs{display:flex;gap:8px}
.side .crumbs li{display:inline}

/* services index keeps full cards on phones */
@media (max-width:600px){
  .cards.full{grid-template-columns:1fr;gap:18px}
  .cards.full .card .ph img{aspect-ratio:16/10}
  .cards.full .card .b{padding:16px;gap:10px}
  .cards.full .card h2{font-size:1.9rem}
  .cards.full .card .tags,.cards.full .card p{display:flex}
  .cards.full .card p{display:block}
  .cards.full .card .tape{font-size:.85rem;left:10px;top:10px;padding:3px 10px}
  .cards:not(.full) .card .go{display:none}
}

@media (max-width:640px){
  body{font-size:16px}
  .nav-logo img{height:48px}
  .sec{padding-block:56px}
  .sec.tight{padding-block:40px}
  h2{font-size:clamp(2.6rem,12vw,3.4rem)}
  .head-row{margin-bottom:24px;padding-bottom:12px;border-bottom-width:4px}
  .head-row h2{font-size:clamp(2.8rem,13vw,3.6rem)}
  .btn{min-height:54px;font-size:1.15rem;padding:0 20px}
  .actions .btn{flex:1 1 auto}
  /* home hero */
  .hero-copy{gap:22px;padding-block:28px 32px}
  .hero .big{font-size:clamp(3rem,14.5vw,4.2rem)}
  .hero .big .v{-webkit-text-stroke:2px var(--blk)}
  .hero .lede{font-size:1.05rem}
  .hero-media{aspect-ratio:4/3}
  /* inner heads */
  .phead .wrap{padding-block:22px 32px;gap:26px}
  .phead h1{font-size:clamp(2.8rem,13vw,3.8rem)}
  .h1-loc{font-size:.42em;color:var(--blk);-webkit-text-stroke:0}
  .phead figure{box-shadow:6px 6px 0 var(--blk);border-width:4px}
  .phead figure img{aspect-ratio:4/3}
  .phead figcaption{font-size:.95rem}
  /* film strip */
  .film{gap:12px}
  .film figure{flex-basis:74vw;border-width:3px}
  .film figcaption{flex-direction:column;gap:4px}
  .film figcaption b{font-size:1.25rem}
  /* before / after: shorter frames so six sliders don't take forever to scroll */
  .ba-all{gap:44px}
  .ba-all .ba-frame,.ba-feature .ba-frame{aspect-ratio:1/1!important;border-width:4px}
  .ba-knob{width:58px;height:58px;margin:-29px 0 0 -29px}
  .ba h3{font-size:1.9rem}
  .ba .fromto{font-size:.95rem}
  /* about block on home: drop the photo, keep the words */
  .standard .big{font-size:clamp(3.4rem,17vw,4.6rem)}
  .std-grid{gap:24px}
  .about{gap:24px}
  .about figure{transform:none;box-shadow:6px 6px 0 var(--blk)}
  .about figure img{aspect-ratio:4/3}
  .about-copy .statement{font-size:clamp(2.2rem,10vw,2.8rem)}
  .quote{font-size:1.35rem;padding:16px}
  /* service detail list */
  .incl{gap:28px}
  .incl h2{font-size:clamp(2.4rem,11vw,3rem)}
  .install-list li{grid-template-columns:48px 1fr;padding:14px;gap:10px;box-shadow:4px 4px 0 var(--blk)}
  .install-list h3{font-size:1.5rem}
  .install-list .code{font-size:1.15rem}
  .install-list small{font-size:.95rem}
  /* quote block */
  .quote-block .wrap{padding-block:52px;gap:26px}
  .quote-block h2{font-size:clamp(3.2rem,16vw,4.4rem)}
  .quote-block p{font-size:1rem}
  .pick li a{min-height:50px;font-size:1rem;padding:0 10px}
  /* gallery */
  .filters{padding-block:10px;margin-bottom:20px}
  .filters button{min-height:42px;font-size:.98rem;padding:0 12px}
  /* faq */
  .faq summary{font-size:1.3rem;padding:14px}
  .faq p{padding:0 14px 14px}
  /* contact */
  .side h1{font-size:clamp(2.8rem,13vw,3.8rem)}
  .qform{box-shadow:6px 6px 0 var(--blk);padding:18px}
  .chips span{min-height:44px;font-size:.98rem;padding:0 12px}
  .side .big-link{font-size:2rem}
  /* footer */
  .foot{padding-top:44px}
  .foot-sig{font-size:clamp(2.6rem,13vw,3.6rem);margin-bottom:32px}
  .foot-top{grid-template-columns:1fr 1fr;gap:28px 16px}
  .foot-top > div:first-child{grid-column:1/-1}
  .foot-top > div:last-child{grid-column:1/-1}
  .foot ul a{display:inline-block;padding-block:4px}
  /* menu */
  .mnav ol a{font-size:clamp(2.4rem,12vw,3rem)}
  /* lightbox */
  .lb-stage img{border-width:2px}
  .lb-cap h3{font-size:1.5rem}
}
@media (max-width:370px){
  .hero .big{font-size:2.8rem}
  .pick ul{grid-template-columns:1fr}
  .cards:not(.full){gap:10px}
}
@media (max-width:640px){.hide-sm{display:none!important}}
@media (max-width:640px){
  .nav-logo img{height:52px}
  .qform button[type=submit]{width:100%}
  .hero .kicker{font-size:.85rem}
}
/* compact page head (no photo) */
.phead.compact .wrap{grid-template-columns:1fr;padding-block:clamp(28px,4vw,48px) clamp(28px,4vw,44px)}
.phead.compact .phead-copy{max-width:900px}
.phead.compact h1{font-size:clamp(3.4rem,8vw,7.4rem)}
.side .crumbs li{box-shadow:none!important;background:none!important;border:0!important;padding:0!important;color:inherit!important;display:inline}

.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.photo-note{font-size:.95rem;opacity:.85}
.photo-note a{color:inherit;text-decoration-color:var(--org);text-decoration-thickness:2px;font-weight:600}

/* ===== DARK PAGE BASE (shared by all dark themes) ===== */
:root{--con:#141414;--con-2:#2a2a2a;--ink-2:#c3c3be;--mute:#8e8e89}
body{background:var(--con);color:#efefea}
.sec.dots{background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px)}
.label{color:#efefea}
.lede,.about-copy p{color:#c3c3be}
.nav{background:#0a0a0a;border-bottom-color:var(--org)}
.nav-links a{color:#efefea}
.nav-links a:hover{color:var(--org)}
.menu-btn{background:var(--org);color:#0c0c0c}
.menu-btn i::before,.menu-btn i::after{background:#0c0c0c}
.head-row{border-bottom-color:#efefea}
.filters{background:var(--con);border-bottom-color:#2e2e2e}
.dock{background:#0a0a0a;border-top-color:var(--org)}
.dock .sec-act{background:#262626}
.foot{background:#0a0a0a;border-top:4px solid var(--org)}
.sec.alt{background:#0a0a0a}
.quote{background:#0a0a0a}
.film{scrollbar-color:#555 var(--con)}
.incl a,.about-copy p a,.faq p a{color:inherit}
.drop{border-color:#555}
.drop:hover{background:rgba(255,255,255,.04)}
.qform .btn,.qform button[type=submit]{background:var(--org);color:#0c0c0c;border-color:var(--org)}
/* orange blocks keep black ink */
.hero,.phead,.quote-block,.mnav{color:#0c0c0c}
.quote-block .label,.phead .label,.hero .label{color:#0c0c0c}

/* ===== DARK SURFACES: cards, forms and lists go dark too ===== */
.card,.it,.film figure,.install-list li,.faq,.qform,.side ol li,.about figure{background:var(--surf);color:#efefea;border-color:var(--edge);box-shadow:6px 6px 0 var(--shadow)}
.card .ph,.it .ph,.film button{border-color:var(--edge)}
.card p,.install-list small,.faq p{color:#bdbdb8}
.card:hover,.it:hover{box-shadow:8px 8px 0 var(--org)}
.faq summary,.it h3,.card h2,.card h3{color:#efefea}
.tags li{border-color:#555;color:#dcdcd7}
.filters button{background:var(--surf);color:#efefea;border-color:var(--edge)}
.filters button:hover{background:#262626}
.filters button[aria-pressed="true"]{background:var(--org);color:#0c0c0c;border-color:var(--org)}
.field input,.field textarea{background:#0e0e0e;color:#efefea;border-color:#3a3a3a}
.field input::placeholder,.field textarea::placeholder{color:#6f6f6a}
.chips span{background:#0e0e0e;color:#efefea;border-color:#3a3a3a}
.chips label:hover span{background:#1f1f1f}
.chips input:checked+span{background:var(--org);color:#0c0c0c;border-color:var(--org)}
.pick li a{background:#0c0c0c;color:#efefea;border-color:#0c0c0c}
.pick li a:hover{background:#efefea;color:#0c0c0c}
.form-note{color:#0c0c0c}

/* ===== THEME: CHARCOAL. Dark grey page, dark cards with hard black edges. Orange hero stays. ===== */
:root{--con:#1a1a1a;--surf:#242424;--edge:#050505;--shadow:#050505}