/*
Theme Name: Dirt Works Heavy Equipment
Theme URI: https://dirtworksequipment.com
Author: Dirt Works
Description: Custom black, orange and white theme for Dirt Works Heavy Equipment. Includes a Listings post type for posting machines like a marketplace listing.
Version: 1.5.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dirtworks
*/
:root{--bg:#000;--panel:#111;--line:#2a2a2a;--tx:#fff;--mute:#b5b5b5;--or:#f27c2b;--ord:#e8692a;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.55 Barlow,system-ui,sans-serif}
h1,h2,h3{font-family:Anton,Impact,"Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;line-height:.98;margin:0}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
section{padding:88px 0}
h2{font-size:clamp(36px,6.5vw,76px);letter-spacing:.5px}
.sub{color:var(--mute);max-width:560px;margin:16px 0 0}
.btn{display:inline-block;font:600 16px/1 Barlow,sans-serif;letter-spacing:1px;text-transform:uppercase;text-decoration:none;padding:17px 26px;border:2px solid var(--or);background:var(--or);color:#000;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px);background:#ff8533}
.btn.ghost{background:transparent;color:#fff}
.btn.ghost:hover{background:var(--or);color:#000}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
nav{position:fixed;top:0;left:0;right:0;z-index:10;padding-top:env(safe-area-inset-top,0px);background:rgba(8,8,9,.82);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
nav .brand{display:block;height:44px}
nav .brand img{height:100%;width:auto;display:block}
.logo{font:400 24px Anton,sans-serif;text-transform:uppercase;text-decoration:none}
.logo b{color:var(--or);font-weight:400}
nav .links{display:flex;gap:30px;align-items:center}
nav .links a{position:relative;text-decoration:none;font-weight:600;font-size:14px;letter-spacing:1.2px;text-transform:uppercase;color:#e8e8e8;padding:6px 0;transition:color .2s}
nav .links a:not(.call)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .25s}
nav .links a:not(.call):hover{color:#fff}
nav .links a:not(.call):hover::after{transform:scaleX(1)}
nav .call{background:var(--or);color:#000;padding:11px 20px;border-radius:999px;font-weight:700;letter-spacing:.5px;transition:transform .15s,background .15s}
nav .call:hover{background:#ff9347;transform:translateY(-1px)}
@media(max-width:760px){nav .links a:not(.call){display:none}nav .brand{height:38px}}
/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:120px 0 64px;overflow:hidden;background:radial-gradient(ellipse at 70% 30%,#3a1a05 0%,#0b0502 55%,#000 100%)}
.hero svg.scene{position:absolute;right:-4%;bottom:0;width:min(900px,100%);opacity:.9}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(54px,12vw,168px);letter-spacing:1px}
.hero h1 span{color:var(--or);display:block}
.hero p.lead{font-size:clamp(18px,2.2vw,24px);max-width:560px;margin:22px 0 30px}
.hero .loc{margin-top:26px;color:var(--mute);font-weight:500}
.dust{position:absolute;inset:0;pointer-events:none;z-index:1}
.dust i{position:absolute;bottom:18%;width:6px;height:6px;border-radius:50%;background:#c8864a;opacity:0;animation:rise 5s linear infinite}
@keyframes rise{0%{opacity:0;transform:translate(0,0)}15%{opacity:.7}100%{opacity:0;transform:translate(-90px,-260px) scale(2.4)}}
.dirt{animation:fall 2.4s ease-in infinite;opacity:0}
.dirt:nth-child(2){animation-delay:.4s}.dirt:nth-child(3){animation-delay:.8s}.dirt:nth-child(4){animation-delay:1.2s}
@keyframes fall{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(120px)}}
.bucket{transform-origin:0 0;animation:dump 4.8s ease-in-out infinite}
@keyframes dump{0%,25%{transform:rotate(0)}45%,70%{transform:rotate(-38deg)}100%{transform:rotate(0)}}
/* stats */
.stats{background:var(--or);color:#000;padding:36px 0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.stats strong{display:block;font:400 clamp(34px,6vw,64px)/1 Anton,sans-serif}
.stats span{font-weight:600}
@media(max-width:640px){.stats .wrap{grid-template-columns:repeat(2,1fr)}}
/* equipment */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
@media(max-width:900px){.grid3{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .2s}
.card:hover{border-color:var(--or)}
.card .img{aspect-ratio:4/3;background:linear-gradient(135deg,#1c1c1c,#0a0a0a);display:grid;place-items:center;border-bottom:3px solid var(--or);color:#555;font-size:13px}
.card .img svg{width:70%}
.card .body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.card h3{font-size:34px}
.card ul{margin:0;padding-left:18px;color:var(--mute)}
.price{font:400 26px Anton,sans-serif;color:var(--or);text-transform:uppercase}
.card .row{display:flex;gap:10px;margin-top:auto;flex-wrap:wrap}
.card .btn{padding:13px 16px;font-size:14px}
/* featured */
.feat{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feat .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
@media(max-width:860px){.feat .wrap{grid-template-columns:1fr}}
.feat .pic{aspect-ratio:1/1;background:radial-gradient(circle at 50% 60%,#3a1a05,#0a0a0a 70%);border:1px solid var(--line);display:grid;place-items:center}
.feat .pic svg{width:80%}
.tag{display:inline-block;background:var(--or);color:#000;font-weight:600;padding:6px 12px;margin-bottom:18px}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin:26px 0;border:1px solid var(--line)}
.specs div{background:var(--bg);padding:14px 16px}
.specs small{display:block;color:var(--mute)}
.specs b{font-weight:600}
/* why */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:48px;border:1px solid var(--line)}
@media(max-width:700px){.why{grid-template-columns:1fr}}
.why div{background:var(--bg);padding:38px 30px}
.why h3{font-size:36px;color:var(--or);margin-bottom:10px}
.why p{margin:0;color:var(--mute)}
/* promo */
.promo{background:linear-gradient(100deg,var(--or),var(--ord));color:#000;text-align:center}
.promo h2{font-size:clamp(40px,8vw,110px)}
.promo p{font-size:20px;font-weight:500;max-width:640px;margin:20px auto 30px}
.promo .btn{background:#000;color:#fff;border-color:#000}
.promo .btn:hover{background:#222}
/* who */
.who{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.who span{border:2px solid var(--line);padding:16px 24px;font:400 24px Anton,sans-serif;text-transform:uppercase;transition:all .15s}
.who span:hover{border-color:var(--or);background:var(--or);color:#000}
/* attach */
.att{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:44px 0 36px}
@media(max-width:700px){.att{grid-template-columns:repeat(2,1fr)}}
.att div{background:var(--panel);border-left:4px solid var(--or);padding:26px 20px;font:400 24px Anton,sans-serif;text-transform:uppercase}
.att small{display:block;font:400 14px Barlow,sans-serif;text-transform:none;color:var(--mute);margin-top:4px}
/* about/reviews */
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media(max-width:800px){.two{grid-template-columns:1fr}}
.rev{border:2px dashed var(--line);padding:28px;color:var(--mute);margin-bottom:14px}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media(max-width:900px){.reviews{grid-template-columns:1fr}}
.review{margin:0;background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--or);padding:28px}
.stars{color:var(--or);font-size:28px;letter-spacing:4px;line-height:1}
.review blockquote{margin:16px 0;font-size:19px;font-style:italic}
.review figcaption{color:var(--mute);font-weight:600}
/* contact */
.contact{background:var(--panel);text-align:center;border-top:3px solid var(--or)}
.contact .sub{margin:18px auto 30px}
.contact .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.contact address{font-style:normal;color:var(--mute);margin-top:40px}
.contact address a{color:#fff}
.social{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.social a{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--line);padding:14px 20px;text-decoration:none;font-weight:600;color:#fff;transition:all .15s}
.social a:hover{border-color:var(--or);background:var(--or);color:#000}
footer .sf{display:inline-flex;align-items:center;gap:8px}
footer{padding:44px 0 56px;border-top:1px solid var(--line);color:var(--mute)}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:center}
footer nav,footer .fl{position:static;background:none;border:0;display:flex;gap:20px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--or)}

/* ---- motion ---- */
.js .rv{opacity:0;transform:translateY(38px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv-l{transform:translateX(-60px)}.js .rv-r{transform:translateX(60px)}.js .rv-z{transform:scale(.9) translateY(20px)}
.js .rv.in{opacity:1;transform:none}
.js .rv.in.done{transition:opacity .3s,transform .15s ease-out,border-color .2s;transition-delay:0s}
.prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:3;pointer-events:none}
.prog i{display:block;height:100%;width:var(--p,0%);background:var(--or)}
.prog svg{position:absolute;bottom:3px;left:var(--p,0%);width:40px;height:22px;transform:translateX(-90%);transition:opacity .3s}
.hero h1{animation:heroIn 1s cubic-bezier(.2,.7,.2,1) both}
.hero h1 span{animation:heroIn 1s .2s cubic-bezier(.2,.7,.2,1) both}
.hero p.lead{animation:heroIn .9s .45s both}.hero .btn,.hero .loc{animation:heroIn .9s .6s both}
@keyframes heroIn{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
.hero svg.scene{will-change:transform}
.hero .wrap{will-change:transform,opacity}
.hero .btn:first-of-type{animation:heroIn .9s .6s both,glow 2.4s 1.6s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(242,124,43,.6)}50%{box-shadow:0 0 0 14px rgba(242,124,43,0)}}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:rgba(255,255,255,.35);transform:skewX(-20deg);transition:left .5s}
.btn:hover::after{left:130%}
.ticker{background:#000;border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:16px 0}
.ticker div{display:inline-block;animation:tick 28s linear infinite;font:400 clamp(26px,4vw,44px)/1 Anton,sans-serif;text-transform:uppercase;font-style:italic}
.ticker span{padding:0 22px}.ticker b{color:var(--or);font-weight:400}
@keyframes tick{to{transform:translateX(-50%)}}
.card{transform-style:preserve-3d}
.card:hover{box-shadow:0 18px 50px rgba(242,124,43,.18)}
.card .img svg{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.card:hover .img svg{transform:scale(1.1) rotate(-2deg)}
.feat .pic svg{animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px)}}
.why div{position:relative;overflow:hidden}
.why div::after{content:"";position:absolute;left:30px;bottom:0;height:4px;width:0;background:var(--or);transition:width .9s .3s cubic-bezier(.2,.7,.2,1)}
.why div.in::after{width:70px}
.why div:hover::after{width:calc(100% - 60px)}
.promo{position:relative;background:repeating-linear-gradient(115deg,rgba(0,0,0,.1) 0 40px,transparent 40px 80px),linear-gradient(100deg,var(--or),var(--ord));background-position:calc(var(--sy,0)*.4px) 0,0 0}
.promo::before,.promo::after{content:"";position:absolute;left:0;right:0;height:26px;background:linear-gradient(135deg,var(--bg) 25%,transparent 25%) -13px 0,linear-gradient(225deg,var(--bg) 25%,transparent 25%) -13px 0;background-size:26px 26px}
.promo::before{top:-1px}.promo::after{bottom:-1px;transform:scaleY(-1)}
.who span{cursor:default}
.who span:hover{transform:translateY(-6px) rotate(-1.5deg)}
.att div{transition:transform .2s,border-color .2s}
.att div:hover{transform:translateX(8px);border-color:#fff}
.js .review .stars{clip-path:inset(0 100% 0 0);transition:clip-path .9s .35s ease-out}
.js .review.in .stars{clip-path:inset(0)}
.stick{display:none}
@media(max-width:760px){
.stick{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:#020202;border-top:3px solid var(--or);transform:translateY(120%);transition:transform .35s}
.stick.show{transform:none}
.stick .btn{flex:1;text-align:center;padding:14px 8px}
footer{padding-bottom:110px}}

/* ---- per-section scroll motion ---- */
section,.stats{position:relative;overflow:hidden}
.wrap{position:relative;z-index:1}
.js h2.sp .w{display:inline-block;opacity:0;transform:translateY(70%) rotate(4deg);transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.07s)}
.js h2.sp.in .w{opacity:1;transform:none}
h2.sp::after{content:"";display:block;height:6px;width:0;background:var(--or);margin-top:18px;transition:width .9s .6s cubic-bezier(.2,.7,.2,1)}
h2.sp.in::after{width:90px}
.promo h2::after,.contact h2::after{margin-left:auto;margin-right:auto}
.promo h2::after{background:#000}
.js .wd{color:#555;transition:color .25s}
.js .wd.lit{color:#fff}
.ticker{transition:transform .25s ease-out}
.contact{background:radial-gradient(circle at 50% calc(110% - var(--g,0)*70%),rgba(242,124,43,.3),transparent 55%),var(--panel)}
.stats .wrap{will-change:scale}
/* ---- Why Dirt Works: clean cards ---- */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:48px;background:none;border:0}
@media(max-width:700px){.why{grid-template-columns:1fr}}
.why div{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--or);padding:34px 30px;overflow:visible;translate:none!important;transition:border-color .2s,transform .2s}
.why div:hover{border-color:var(--or);transform:translateY(-3px)}
.why div::after{display:none!important}
.why h3{font-size:clamp(28px,3.4vw,36px);color:#fff;margin:0 0 10px}
.why p{margin:0;color:var(--mute);font-size:18px;line-height:1.5}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js h2.sp .w{opacity:1!important;transform:none!important}.js .wd{color:#fff!important}.js .rv{opacity:1!important;transform:none!important}.js .review .stars{clip-path:none!important}}


/* ---- listings ---- */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:44px}
.lc{background:var(--panel);border:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;transition:border-color .2s,transform .2s;position:relative}
.lc:hover,.lc:focus-visible{border-color:var(--or);transform:translateY(-4px)}
.lc .ph{aspect-ratio:1/1;background:#1a1a1a center/cover no-repeat;position:relative}
.lc .bd{padding:14px 16px 18px}
.lc .pr{font:400 28px/1 Anton,sans-serif;color:var(--or)}
.lc .ti{font-weight:500;margin:6px 0 2px;line-height:1.25}
.lc .ti strong,.mbox h3 strong{font-weight:800;color:var(--or)}
.lc .pr.nfs{font:600 15px Barlow,sans-serif;color:var(--mute);text-transform:uppercase;letter-spacing:1px}
.inv{margin-top:72px;padding-top:40px;border-top:1px solid var(--line)}
.invh{font-size:clamp(30px,5vw,48px)}
.tabs{display:flex;gap:8px;margin-top:20px}
.tab{background:transparent;color:#fff;border:2px solid var(--line);padding:12px 22px;font:700 15px Barlow,sans-serif;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .15s}
.tab:hover{border-color:var(--or)}
.tab.on{background:var(--or);border-color:var(--or);color:#000}
.mbox .desc strong{color:#fff;font-weight:800}
.adm .seg{display:flex}
.adm .seg button{flex:1;background:#000;color:#fff;border:2px solid var(--line);padding:13px;font:700 15px Barlow,sans-serif;cursor:pointer}
.adm .seg button.on{background:var(--or);border-color:var(--or);color:#000}
.adm .bb{padding:2px 10px;margin-left:8px;font-weight:800}
.lc .mt{color:var(--mute);font-size:14px}
.stat{position:absolute;top:10px;left:10px;background:var(--or);color:#000;font-weight:700;font-size:13px;padding:5px 10px;text-transform:uppercase;letter-spacing:1px}
.stat.pending{background:#fff}.stat.sold{background:#c0392b;color:#fff}
.lc.is-sold .ph{filter:grayscale(1) brightness(.55)}
.lempty{color:var(--mute);margin-top:30px}
@media(min-width:901px){.grid3.hasbig{grid-template-columns:repeat(3,1fr)}}
.card.big{}
.card.big h3{font-size:34px}
.card h3 strong{color:var(--or);font-weight:400}
.bigph{aspect-ratio:4/3;background:#1a1a1a center/cover no-repeat;position:relative;border-bottom:3px solid var(--or);cursor:pointer}
.card.big .price{font-size:26px}
.card.big ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.card.big ul li{background:#000;border:1px solid var(--line);padding:6px 12px;font-weight:600;color:#fff}
.vb{position:absolute;bottom:10px;left:10px;background:rgba(0,0,0,.8);color:#fff;font-weight:600;font-size:13px;padding:5px 10px}
.mbox video.big{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;background:#000}
.mbox .thumbs .vt{width:64px;height:64px;flex:none;display:grid;place-items:center;background:var(--or);color:#000;font-weight:700;font-size:12px;cursor:pointer;border:2px solid transparent;text-align:center;line-height:1.1}
.mbox .thumbs .vt.on{border-color:#fff}
.adm #avprev video{width:100%;max-height:220px;background:#000;margin-top:10px}
.mdl{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:16px}
.mdl[hidden],.adm[hidden]{display:none}
.mbox{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--or);max-width:980px;width:100%;max-height:92vh;overflow:auto;display:grid;grid-template-columns:1.1fr 1fr;position:relative}
@media(max-width:760px){.mbox{grid-template-columns:1fr}}
.mbox .gal img.big{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#1a1a1a}
.mbox .thumbs{display:flex;gap:6px;padding:8px;overflow-x:auto}
.mbox .thumbs img{width:64px;height:64px;object-fit:cover;cursor:pointer;border:2px solid transparent;flex:none}
.mbox .thumbs img.on{border-color:var(--or)}
.mbox .inf{padding:26px;display:flex;flex-direction:column;gap:10px}
.mbox .inf h3{font:500 28px/1.15 Barlow,sans-serif;text-transform:none}
.mbox .pr{font:400 36px/1 Anton,sans-serif;color:var(--or)}
.mbox dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:6px 0;color:var(--mute)}
.mbox dd{margin:0;color:#fff}
.mbox .desc{white-space:pre-wrap;color:#ddd}
.mbox .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.mx{position:absolute;top:8px;right:10px;z-index:2;background:#000;color:#fff;border:2px solid var(--line);width:42px;height:42px;font-size:22px;cursor:pointer}
.mx:hover{border-color:var(--or)}
.admbtn{position:fixed;left:16px;bottom:16px;z-index:60;background:#fff;color:#000;border:0;font:700 15px Barlow,sans-serif;padding:14px 18px;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.5)}
@media(max-width:760px){.admbtn{bottom:84px}}
.adm{position:fixed;inset:0;z-index:100;background:#0a0a0a;overflow:auto}
.adm .in{max-width:1100px;margin:0 auto;padding:20px 20px 80px}
.adm header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.adm h3{font-size:34px}
.adm .cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:860px){.adm .cols{grid-template-columns:1fr}}
.adm .box{background:var(--panel);border:1px solid var(--line);padding:22px}
.adm label{display:block;font-weight:600;margin:14px 0 6px}
.adm input[type=text],.adm select,.adm textarea{width:100%;background:#000;color:#fff;border:2px solid var(--line);padding:13px;font:inherit}
.adm textarea{min-height:120px;resize:vertical}
.adm input:focus,.adm select:focus,.adm textarea:focus{outline:none;border-color:var(--or)}
.adm .r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.adm .drop{border:2px dashed var(--or);padding:20px;text-align:center;cursor:pointer;color:var(--or);font-weight:600}
.adm .ths{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.adm .ths div{position:relative;width:84px;height:84px;background:center/cover}
.adm .ths button{position:absolute;top:2px;right:2px;background:#000;color:#fff;border:0;width:24px;height:24px;cursor:pointer}
.adm .ths em{position:absolute;bottom:0;left:0;background:var(--or);color:#000;font-size:11px;font-style:normal;font-weight:700;padding:1px 6px}
.adm .row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.adm .row .t{width:64px;height:64px;background:#1a1a1a center/cover;flex:none}
.adm .row .m{flex:1;min-width:0}
.adm .row .m b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm .row select{width:auto;padding:8px}
.adm .sm{background:#000;color:#fff;border:2px solid var(--line);padding:8px 12px;cursor:pointer;font:600 14px Barlow,sans-serif}
.adm .sm:hover{border-color:var(--or)}
.adm .msg{margin-top:12px;font-weight:600}
.adm .msg.err{color:#ff7b6b}
.adm .chk{display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:400}



.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px}
@media(max-width:640px){.grid4{grid-template-columns:1fr}}

/* ---- landing page hero ---- */
.hx{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:110px 0 70px;overflow:hidden;background:radial-gradient(900px 520px at 12% 8%,rgba(242,124,43,.22),transparent 60%),radial-gradient(700px 500px at 92% 92%,rgba(242,124,43,.10),transparent 60%),#050505}
.hx::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 2px,transparent 2px 36px);pointer-events:none}
.hx-in{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;width:100%}
@media(max-width:900px){.hx-in{grid-template-columns:1fr;gap:40px}.hx{padding-top:96px}}
.hx h1{font-size:clamp(58px,9.6vw,140px);line-height:.92;animation:heroIn 1s cubic-bezier(.2,.7,.2,1) both}
.hx h1 span{display:block;color:var(--or)}
.hx .lead{font-size:clamp(18px,2vw,22px);color:#d8d8d8;max-width:560px;margin:26px 0 30px;animation:heroIn .9s .25s both}
.hx-btns{display:flex;gap:12px;flex-wrap:wrap;animation:heroIn .9s .4s both}
.hx-trust{list-style:none;margin:32px 0 0;padding:0;display:flex;gap:10px 28px;flex-wrap:wrap;color:#e6e6e6;font-weight:600;animation:heroIn .9s .55s both}
.hx-trust li::before{content:"\2713";color:var(--or);margin-right:8px;font-weight:800}
.hx .loc{margin-top:22px;color:var(--mute);font-weight:500;animation:heroIn .9s .65s both}
.hx-card{position:relative;display:block;aspect-ratio:4/5;max-height:76vh;width:calc(100% - 18px);max-width:470px;justify-self:end;margin-right:18px;border:1px solid rgba(255,255,255,.14);box-shadow:18px 18px 0 0 var(--or);text-decoration:none;color:#fff;animation:heroIn 1.1s .3s both}
@media(max-width:900px){.hx-card{justify-self:start;max-height:none}}
.hx-card .hpw{position:absolute;inset:0;overflow:hidden;background:#111}
.hx-card .hp{position:absolute;left:0;right:0;top:-6%;bottom:-6%;background:center/cover no-repeat;will-change:transform}
.hx-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 20px;background:linear-gradient(transparent,rgba(0,0,0,.88));display:flex;flex-direction:column;gap:6px}
.hx-cap .stat{position:static;align-self:flex-start}
.hx-cap b{font-size:20px;line-height:1.2}
.hx-cap .pr{font:400 30px/1 Anton,sans-serif;color:var(--or)}

/* ---- WordPress additions ---- */
/* ---- header phone button ---- */
nav .links a.call{display:inline-flex;align-items:center;gap:10px;padding:7px 20px 7px 8px;border-radius:999px;background:linear-gradient(135deg,#ff9550,#f27c2b);color:#000;text-transform:none;letter-spacing:0;box-shadow:0 6px 20px rgba(242,124,43,.28);transform:none}
nav .links a.call:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(242,124,43,.42);background:linear-gradient(135deg,#ffa163,#f58a3b)}
nav .call .ci{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#000;color:var(--or);flex:none}
nav .call .ci::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(242,124,43,.6);animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.4);opacity:0}}
nav .call .cl{display:flex;flex-direction:column;line-height:1.05;text-align:left}
nav .call small{font:700 10px Barlow,sans-serif;letter-spacing:1.4px;text-transform:uppercase;opacity:.75}
nav .call b{font:800 17px Barlow,sans-serif;letter-spacing:.3px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:760px){nav .call small{display:none}nav .links a.call{padding:6px 14px 6px 6px}nav .call b{font-size:15px}}
@media(prefers-reduced-motion:reduce){nav .call .ci::after{animation:none}}

/* ---- landing hero copy ---- */
.hx h1{font-size:clamp(46px,7.2vw,108px);line-height:.95}
.hx-pin{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:9px 18px 9px 14px;margin-bottom:22px;font-weight:700;font-size:16px;color:#fff;animation:heroIn .8s both}
.hx-pin svg{color:var(--or)}
.hx-pin span{margin-left:8px;padding-left:12px;border-left:1px solid rgba(255,255,255,.25);color:var(--or);font-variant-numeric:tabular-nums}
@media(max-width:480px){.hx-pin{font-size:14px;padding:8px 14px 8px 10px}.hx-pin span{display:none}}

/* ---- category cards are fully clickable ---- */
.card{position:relative;transition:border-color .2s,transform .2s,box-shadow .2s}
.cardlink{position:absolute;inset:0;z-index:1}
.card .btn,.card a.bigph,.card h3 a,.card .mt a{position:relative;z-index:2}
.card:hover,.card:focus-within{border-color:var(--or);box-shadow:0 14px 40px rgba(242,124,43,.16)}
.card .img,.card .bigph{transition:filter .3s}
.card:hover .img,.card:hover .bigph{filter:brightness(1.12)}
.card:hover .row .btn.ghost{background:var(--or);color:#000;border-color:var(--or)}

/* ---- interactive shop ---- */
.shopbar{margin-top:26px;padding:14px 0;display:grid;gap:14px}
.shophead .shopbar{position:sticky;top:68px;z-index:6;background:rgba(5,5,5,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;border-bottom:1px solid var(--line)}
.sb-search input{width:100%;background:#0d0d0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f27c2b' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center/20px;color:#fff;border:2px solid var(--line);padding:14px 16px 14px 46px;font:500 17px Barlow,sans-serif;border-radius:12px}
.sb-search input:focus{outline:none;border-color:var(--or)}
.sb-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.sb-chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:8px;background:#0d0d0d;color:#fff;border:2px solid var(--line);border-radius:999px;padding:10px 16px;font:700 14px Barlow,sans-serif;cursor:pointer;transition:all .15s;white-space:nowrap}
.chip span{background:#222;border-radius:999px;padding:1px 8px;font-size:12px}
.chip:hover{border-color:var(--or)}
.chip.on{background:var(--or);border-color:var(--or);color:#000}
.chip.on span{background:#000;color:#fff}
.chip.zero{opacity:.55}
.sb-row{display:flex;gap:12px 18px;align-items:center;flex-wrap:wrap}
.sb-row .tabs{margin:0}
.sb-sort{display:inline-flex;align-items:center;gap:8px;color:var(--mute);font-weight:600}
.sb-sort select{background:#0d0d0d;color:#fff;border:2px solid var(--line);border-radius:10px;padding:9px 12px;font:600 14px Barlow,sans-serif}
.sb-clear{background:none;border:0;color:var(--or);font:700 14px Barlow,sans-serif;cursor:pointer;text-decoration:underline}
.sb-count{margin-left:auto;color:var(--mute);font-weight:600}
.lempty{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:30px;color:var(--mute)}
.lempty-btns{display:flex;gap:10px;flex-wrap:wrap}
.lc .ph{overflow:hidden}
.lc .ph img{transition:transform .5s}
.lc:hover .ph img{transform:scale(1.04)}
.lc .qvhint{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.78);color:#fff;font:700 12px Barlow,sans-serif;padding:6px 12px;border-radius:999px;opacity:0;transform:translateY(6px);transition:all .2s}
.lc:hover .qvhint,.lc:focus-visible .qvhint{opacity:1;transform:none}
@media(hover:none){.lc .qvhint{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lc.pop{animation:pop .35s both}

/* ---- quick view ---- */
.qv{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.9);display:grid;place-items:center;padding:14px;overflow:auto}
.qv[hidden]{display:none}
.qvbox{position:relative;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--or);width:100%;max-width:1040px;max-height:94vh;overflow:auto;display:grid;grid-template-columns:1.1fr 1fr;animation:pop .3s both}
@media(max-width:800px){.qvbox{grid-template-columns:1fr}}
.qvx{position:absolute;top:10px;right:10px;z-index:5;width:44px;height:44px;border:2px solid var(--line);background:#000;color:#fff;font-size:24px;cursor:pointer;border-radius:50%}
.qvx:hover{border-color:var(--or)}
.qvg{position:relative;background:#000;align-self:start}
.qvg .big{display:block;width:100%;max-height:70vh;object-fit:contain;background:#000}
.qvg video{display:block;width:100%;max-height:70vh;background:#000}
.qvnav{position:absolute;top:40%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.qvnav.prev{left:10px}.qvnav.next{right:10px}
.qvth{display:flex;gap:6px;padding:8px;overflow-x:auto}
.qvth img,.qvth .vt{width:64px;height:64px;flex:none;object-fit:cover;cursor:pointer;border:2px solid transparent}
.qvth .vt{display:grid;place-items:center;background:var(--or);color:#000;font:700 12px Barlow,sans-serif;text-align:center}
.qvth .on{border-color:#fff}
.qvinf{padding:26px 24px;display:flex;flex-direction:column;gap:12px}
.qvinf .pr{font:400 42px/1 Anton,sans-serif;color:var(--or)}
.qvinf h3{font:600 26px/1.15 Barlow,sans-serif;text-transform:none}
.qvinf h3 strong{color:var(--or);font-weight:800}
.qvchips{display:flex;gap:8px;flex-wrap:wrap}
.qvchips span{background:#000;border:1px solid var(--line);padding:5px 11px;font-weight:600;font-size:14px}
.qvdesc{color:#ddd;max-height:220px;overflow:auto}
.qvdesc p{margin:0 0 10px}
.qvdesc strong{color:#fff}
.qvact{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.qvact .btn{padding:14px 18px}
body.qvopen{overflow:hidden}


/* ---- phones: header and bottom bar slide away while scrolling down ---- */
@media(max-width:760px){
nav{transition:transform .3s ease}
body.nav-hide nav{transform:translateY(-115%)}
.shophead .shopbar{transition:top .3s ease}
body.nav-hide .shophead .shopbar{top:0}
.stick{transition:transform .35s ease}
body.nav-hide .stick.show{transform:translateY(125%)}
}

/* ---- category boxes: no prices, invite the click ---- */
.card .price.cp{display:flex;align-items:center;gap:8px;color:var(--or)}
.card .price.cp span{display:inline-block;transition:transform .2s}
.card:hover .price.cp span{transform:translateX(8px)}
.card .cc{color:#fff;font-weight:600;font-size:15px}
.card .cc::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--or);margin-right:8px;vertical-align:middle}

/* ---- small "built for" strip ---- */
.whostrip{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:18px 0 0}
.whostrip b{font-weight:700;font-size:14px;color:var(--mute);letter-spacing:.3px}
.whostrip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.whostrip li{border:1px solid var(--line);padding:4px 11px;font:600 12px Barlow,sans-serif;text-transform:uppercase;letter-spacing:.8px;color:#d6d6d6;border-radius:999px}

/* ---- bigger hero photo + carousel arrows ---- */
.hx-in{grid-template-columns:.9fr 1.1fr;gap:48px}
@media(max-width:900px){.hx-in{grid-template-columns:1fr}}
.hx-card{display:block;position:relative;aspect-ratio:1/1.02;max-height:88vh;width:calc(100% - 18px);max-width:680px;justify-self:end;margin-right:18px;overflow:hidden}
@media(max-width:900px){.hx-card{aspect-ratio:4/5;max-width:none;width:calc(100% - 14px);justify-self:start;margin-right:14px;max-height:none}}
.hx-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hxs{position:relative;flex:0 0 100%;display:block;height:100%;color:#fff;text-decoration:none}
.hx-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:54px;height:54px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(0,0,0,.6);color:#fff;font-size:34px;line-height:1;padding:0 0 4px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:all .15s}
.hx-nav:hover,.hx-nav:focus-visible{background:var(--or);border-color:var(--or);color:#000}
.hx-nav.prev{left:12px}
.hx-nav.next{right:12px}
.hx-dots{position:absolute;left:0;right:0;top:12px;display:flex;gap:6px;justify-content:center;z-index:3;padding:0 70px}
.hx-dots button{flex:1;max-width:34px;height:5px;border:0;border-radius:3px;background:rgba(255,255,255,.4);cursor:pointer;padding:0}
.hx-dots button.on{background:var(--or)}
@media(max-width:600px){.hx-nav{width:46px;height:46px;font-size:28px}}

/* ---- quote form photos ---- */
.qlab{font-weight:600;color:#fff;margin-top:4px}
.qlab small{font-weight:400;color:var(--mute)}
.qpick{border:2px dashed var(--or);padding:18px;text-align:center;color:var(--or);font-weight:700;cursor:pointer;border-radius:6px}
.qpick:hover{background:rgba(242,124,43,.08)}
.qprev{display:flex;flex-wrap:wrap;gap:8px}
.qpv{position:relative;width:84px;height:84px;background:#111;border:1px solid var(--line)}
.qpv img{width:100%;height:100%;object-fit:cover;display:block}
.qpv button{position:absolute;top:2px;right:2px;width:28px;height:28px;border:0;background:#000;color:#fff;font-size:18px;line-height:28px;cursor:pointer}
/* photos keep their real shape */
.lgrid{align-items:stretch}
.lc .ph{aspect-ratio:4/3;background:#111;overflow:hidden}
.lc .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.bigph,.card .img[style]{background-size:cover!important;background-repeat:no-repeat!important;background-position:50% 40%!important;background-color:#0b0b0b!important}

[hidden]{display:none!important}
body.admin-bar nav{top:32px}
@media(max-width:782px){body.admin-bar nav{top:46px}}
a.lc{text-decoration:none;color:inherit}
a.bigph{display:block}
.shophead,.single-wrap{padding-top:130px}
.shophead h1,.single-wrap h1{font-size:clamp(44px,8vw,96px)}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 0}
a.tab{text-decoration:none;display:inline-block}
.qform{max-width:640px;margin:34px auto 0;text-align:left;display:grid;gap:12px}
.qform .r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.qform .r2{grid-template-columns:1fr}}
.qform input,.qform select,.qform textarea{width:100%;background:#000;color:#fff;border:2px solid var(--line);padding:14px;font:inherit}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:none;border-color:var(--or)}
.qform textarea{min-height:120px}
.qform .hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.qmsg{max-width:640px;margin:24px auto 0;padding:14px 18px;font-weight:600;border:2px solid var(--or)}
.qmsg.err{border-color:#c0392b;color:#ff9b8f}
.single-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;margin-top:30px}
@media(max-width:860px){.single-grid{grid-template-columns:1fr}}
.gal .big{width:100%;height:auto;max-height:85vh;object-fit:contain;display:block;background:#111;border-bottom:3px solid var(--or)}
.gal .thumbs{display:flex;gap:6px;padding:8px 0;overflow-x:auto}
.gal .thumbs img{width:72px;height:72px;object-fit:cover;cursor:pointer;border:2px solid transparent;flex:none}
.gal .thumbs img.on{border-color:var(--or)}
.dwvid,.dwembed{width:100%;margin-top:14px;background:#000;display:block}
.dwembed{aspect-ratio:16/9}
.dwvid{height:auto;max-height:85vh}
.dwembed iframe{width:100%;height:100%;border:0}
.sinfo{display:flex;flex-direction:column;gap:12px}
.sinfo .pr{font:400 44px/1 Anton,sans-serif;color:var(--or)}
.sinfo dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;color:var(--mute);margin:6px 0}
.sinfo dd{margin:0;color:#fff}
.sinfo .desc{color:#ddd}
.sinfo .desc p{margin:0 0 12px}
.sinfo .desc strong{color:#fff;font-weight:800}
.sinfo .acts{display:flex;gap:10px;flex-wrap:wrap}
.backlink{color:var(--mute);text-decoration:none;font-weight:600}
.backlink:hover{color:var(--or)}
.page-body{padding-top:130px;max-width:800px;margin:0 auto;padding-left:20px;padding-right:20px;padding-bottom:80px}