/* BOP CNC site styles. Colours and fonts are variables at the top. */
:root{--red:#c71215;--red-d:#9e0e11;--ink:#0b0b0b;--bg:#fff;--soft:#f5f5f5;--line:#e4e4e4;--text:#1c1c1c;--mute:#5d5d5d;--card:#fff;--w:1120px;
--h:'Montserrat','Century Gothic','Segoe UI',Arial,sans-serif;--b:'Poppins','Century Gothic','Segoe UI',Arial,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#fff;--text:#1c1c1c}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{font:300 16px/1.7 var(--b);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--h);font-weight:800;line-height:1.12;letter-spacing:.01em}
.cap{font-family:var(--h);text-transform:uppercase}
/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#050000;border-bottom:3px solid var(--red)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:#050000;z-index:30}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav img{height:46px;width:auto}
nav ul{display:flex;gap:6px;list-style:none;padding:0}
nav a{display:block;padding:8px 14px;color:#fff;text-decoration:none;font:500 13px var(--b);letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid transparent}
nav a:hover{color:#ff6b6b}nav a.on{border-color:var(--red)}
nav a.cta{background:var(--red);border-radius:3px;border:0}nav a.cta:hover{background:var(--red-d);color:#fff}
.burger{display:none;background:none;border:1px solid #444;color:#fff;border-radius:4px;padding:8px 12px;font:500 13px var(--b)}
/* buttons */
.btn{display:inline-block;padding:14px 28px;border-radius:3px;font:600 13px var(--b);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:2px solid var(--red);background:var(--red);color:#fff;cursor:pointer;transition:.2s}
.btn:hover{background:var(--red-d);border-color:var(--red-d)}
.btn.ghost{background:transparent;color:#fff;border-color:#fff}.btn.ghost:hover{background:#fff;color:#000}
.btn.ghost.d{color:var(--ink);border-color:var(--ink)}.btn.ghost.d:hover{background:var(--ink);color:#fff}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
/* sections */
section{padding:88px 0}
.dark{background:var(--ink);color:#e8e8e8}.dark h2,.dark h3{color:#fff}
.soft{background:var(--soft)}
.eyebrow{display:inline-block;background:var(--red);color:#fff;font:800 14px var(--h);letter-spacing:.06em;text-transform:uppercase;padding:8px 22px;border-radius:0 12px 12px 0;margin-left:-24px;padding-left:24px;margin-bottom:22px}
h2{font-size:clamp(26px,4vw,40px);text-transform:uppercase;margin-bottom:18px}
.red{color:var(--red)}
.lead{font-size:18px;max-width:680px}
.hero{background:radial-gradient(120% 140% at 100% 0,#5a0000 0%,#0b0000 55%);color:#fff;padding:110px 0 96px;position:relative;overflow:hidden}
.hero h1{font-size:clamp(34px,6vw,64px);text-transform:uppercase;margin-bottom:22px;max-width:760px}
.hero p{font-size:18px;max-width:620px;color:#e3e3e3}
.tags{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:40px;font:400 12px var(--b);letter-spacing:.1em;text-transform:uppercase;color:#ddd}
.tags span::before{content:"";display:inline-block;width:6px;height:6px;background:var(--red);margin-right:10px;vertical-align:middle}
/* cards */
.grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.12);border-color:var(--red)}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%;filter:grayscale(.2)}
.card div{padding:22px}
.card h3{font-size:16px;text-transform:uppercase;margin-bottom:8px;color:var(--ink)}
.card p{font-size:14px;color:var(--mute)}
.more{color:var(--red);font:600 12px var(--b);letter-spacing:.1em;text-transform:uppercase;margin-top:12px;display:block}
.steps{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:36px}
.step{display:flex;gap:14px;align-items:center;border:1px solid var(--red);border-radius:40px;padding:12px 20px 12px 12px}
.step b{flex:none;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font:800 16px var(--h)}
.two{display:grid;gap:56px;grid-template-columns:1fr 1fr;align-items:center}
/* services */
.svc{padding:72px 0;border-bottom:1px solid var(--line)}
.svc .two{gap:48px}
.svc:nth-child(even) .two>div:first-child{order:2}
.svc h2{font-size:clamp(22px,3vw,30px)}
.svc img{border-radius:6px;border:1px solid var(--red);width:100%;aspect-ratio:16/10;object-fit:cover}
ul.tick{list-style:none;padding:0;margin:18px 0}
ul.tick li{padding:6px 0 6px 24px;position:relative}
ul.tick li::before{content:"";position:absolute;left:0;top:16px;width:7px;height:7px;background:var(--red)}
.help{font-size:14px;color:var(--mute);border-left:3px solid var(--red);padding-left:14px;margin-top:18px}
/* gallery */
.gal{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.gal figure{background:#111;border-radius:6px;overflow:hidden;border:1px solid #2a2a2a}
.gal button{all:unset;display:block;cursor:zoom-in;width:100%}
.gal img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:.4s}.gal figure:hover img{transform:scale(1.04)}
.gal .ov{overflow:hidden}
.gal figcaption{padding:16px 20px;font-size:14px;color:#ddd}
.note{font-size:13px;color:var(--mute);margin-top:28px;max-width:680px}.dark .note{color:#aaa}
#lb{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;place-items:center;z-index:50;padding:24px;cursor:zoom-out}
#lb.open{display:grid}#lb img{max-height:86vh;border-radius:4px}
.show{position:relative;overflow:hidden;border-radius:6px;border:1px solid var(--red);background:#000;touch-action:pan-y}
.track{display:flex;transition:transform .7s ease}
.track figure{flex:0 0 100%;margin:0;position:relative}
.track img{width:100%;aspect-ratio:16/9;object-fit:cover}
.track figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 24px 22px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;font-size:15px}
.show .pv,.show .nx{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font:400 26px/1 var(--b);cursor:pointer}
.show .pv{left:14px}.show .nx{right:14px}.show .pv:hover,.show .nx:hover{background:var(--red)}
.dots{position:absolute;top:14px;right:16px;display:flex;gap:8px;align-items:center}
.dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}.dots i.on{background:var(--red);outline:2px solid #fff}
.dots .pp{all:unset;cursor:pointer;color:#fff;font:500 11px var(--b);letter-spacing:.08em;text-transform:uppercase;margin-left:6px;background:rgba(0,0,0,.6);padding:4px 10px;border-radius:12px}
@media(max-width:820px){.track img{aspect-ratio:4/3}.track figcaption{font-size:13px;padding:36px 16px 16px}}
/* contact */
.cgrid{display:grid;gap:56px;grid-template-columns:1fr 1.5fr;align-items:start}
.info p{margin-bottom:14px}.info strong{display:block;font:600 12px var(--b);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.info a{text-decoration:none}.info a:hover{color:var(--red)}
form{background:var(--soft);padding:32px;border-radius:6px;border-top:4px solid var(--red)}
.f2{display:grid;gap:16px;grid-template-columns:1fr 1fr}
label{display:block;font:500 13px var(--b);margin-bottom:16px}
input,textarea{width:100%;margin-top:6px;padding:12px 14px;border:1px solid #cfcfcf;border-radius:3px;font:300 15px var(--b);background:#fff;color:var(--text)}
input:focus,textarea:focus{outline:2px solid var(--red);border-color:var(--red)}
textarea{min-height:130px;resize:vertical}
.drop{border:2px dashed #b9b9b9;border-radius:4px;padding:20px;background:#fff;margin-bottom:16px}
.drop small{display:block;color:var(--mute);margin-top:4px}
#files{list-style:none;padding:0;font-size:13px;margin-top:8px}
.warn{background:#fff6e0;border:1px solid #e6c36a;color:#4d3a00;padding:14px 16px;border-radius:4px;font-size:14px;margin-bottom:20px}
#msg{margin-top:16px;font-size:14px;display:none;padding:14px 16px;border-radius:4px;background:#fff;border:1px solid var(--red)}
/* footer */
footer{background:#050000;color:#bbb;padding:48px 0 calc(32px + env(safe-area-inset-bottom,0px));border-top:4px solid var(--red);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:center}
footer img{height:52px}footer a{text-decoration:none}footer a:hover{color:#fff}
main{animation:in .45s ease}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){main{animation:none}*{transition:none!important}}
@media(max-width:820px){
 .burger{display:block}
 nav{position:absolute;left:0;right:0;top:100%;background:#050000;display:none;border-bottom:3px solid var(--red)}
 nav.open{display:block}nav ul{flex-direction:column;padding:12px 24px 20px}
 .two,.cgrid{grid-template-columns:1fr}.svc:nth-child(even) .two>div:first-child{order:0}
 section{padding:64px 0}.hero{padding:72px 0 64px}.f2{grid-template-columns:1fr}form{padding:22px}
}