/* Mac Industries – laser hero preview. Colours/fonts from the live Minimog theme. */
@font-face{font-family:"MAC Heading";src:url(../fonts/mac-heading.woff2) format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"MAC Body";src:url(../fonts/mac-body.woff2) format("woff2");font-weight:400 500;font-display:swap}
:root{
  --bg:#0b0c0e;--bg2:#17191c;--red:#e21b23;--grey:#b6babf;--line:#393939;--line2:#2a2c30;
  --light:#f1f1f1;--ink:#111;--body:#52555b;
  --hh:100px;
  --fh:"MAC Heading","Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --fb:"MAC Body","Roboto Condensed","Arial Narrow",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;font:400 16px/1.5 var(--fb);color:var(--body);background:var(--light);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--fh);font-weight:800}
p{margin:0}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--red);color:#fff;padding:10px 16px}
.skip:focus{left:10px;top:10px}
.wrap{max-width:1360px;margin:0 auto;padding:0 40px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;height:var(--hh);background:var(--bg);border-bottom:1px solid #26282c}
.hdr-in{height:100%;display:flex;align-items:center;gap:24px;padding:0 70px}
.hdr-logo img{width:210px;height:auto}
.hdr-nav{display:flex;gap:4px;margin:0 auto}
.hdr-nav a{font:500 13px/1.5 var(--fb);color:var(--grey);padding:20px 12px;display:flex;align-items:center;gap:6px;transition:color .2s}
.hdr-nav a:hover{color:#fff}
.hdr-tools{display:flex;align-items:center;gap:18px}
.hdr-ico{color:#fff;display:grid;place-items:center}
.hdr-search{width:40px;height:40px;border:1px solid var(--line)}
.hdr-cart{background:var(--red);color:#fff;font:500 13px/1 var(--fb);padding:14px 20px}
.hdr-burger,.hdr-cart-m{display:none}
.hdr-burger{background:none;border:0;padding:8px;width:40px;cursor:pointer}
.hdr-burger span{display:block;height:2px;background:#fff;margin:5px 0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font:500 14px/30px var(--fb);padding:10px 30px;border:1px solid transparent;letter-spacing:.02em;white-space:nowrap;transition:background-color .25s,color .25s,border-color .25s}
.btn span{display:block;pointer-events:none}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn-primary:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn-outline{border-color:var(--line);color:#fff}
.btn-outline:hover{border-color:#fff}
.btn-ghost{color:#fff;padding-left:22px;padding-right:22px}
.btn-ghost:hover{background:#fff;color:var(--red)}
.btn-outline-dark{border-color:#3a3a3a;color:var(--ink)}
.btn-outline-dark:hover{background:var(--ink);color:#fff}
.magnet{will-change:transform}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--bg);height:calc(290vh - var(--hh))}
.hero-stick{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));min-height:560px;display:flex;overflow:hidden}
.hero-copy{flex:0 0 42%;max-width:42%;display:flex;align-items:center;position:relative;z-index:2}
.hero-copy-in{position:relative;z-index:1;padding:40px 40px 40px 60px;max-width:560px}
.hero-eyebrow{font:400 14px/21px var(--fb);color:var(--red);margin-bottom:12px}
.hero-h1{font:800 70px/63px var(--fh);color:#fff;text-transform:uppercase;margin-bottom:26px}
.hero-line{display:block}
.hero-accent{color:var(--red)}
.hero-text{font:400 18px/25px var(--fb);color:var(--grey);max-width:527px;margin-bottom:32px}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px}

/* forge-glow on the red letters (added by JS only when motion is OK) */
.forge .ch{animation:forge 1.5s cubic-bezier(.3,.6,.3,1) both;animation-delay:calc(.35s + var(--i) * .075s)}
@keyframes forge{
  0%{color:#7a1013;text-shadow:none}
  14%{color:#fff4d6;text-shadow:0 0 6px #ffd27a,0 0 22px #ff9a2e,0 0 48px rgba(255,106,0,.8)}
  40%{color:#ffa23a;text-shadow:0 0 4px #ff9a2e,0 0 20px rgba(255,90,0,.6)}
  75%{color:#f0461f;text-shadow:0 0 12px rgba(226,27,35,.35)}
  100%{color:var(--red);text-shadow:none}
}

/* stage (video -> canvas) */
/* desktop: the stage fills the whole hero behind the copy */
.stage{position:absolute;inset:0;z-index:0;background:#07080a;overflow:hidden;isolation:isolate}
.stage-shade{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,12,14,.97) 0,rgba(11,12,14,.95) 30%,rgba(11,12,14,.84) 38%,rgba(11,12,14,.5) 47%,rgba(11,12,14,.16) 57%,rgba(11,12,14,0) 66%),
    linear-gradient(180deg,rgba(11,12,14,.55) 0,rgba(11,12,14,0) 14%,rgba(11,12,14,0) 84%,rgba(11,12,14,.45) 100%)}
.still,.still img,.intro,.steel{position:absolute;inset:0;width:100%;height:100%}
.still img{object-fit:cover}
.intro,.steel{display:none}
.js .intro,.js .steel{display:block}
.js .still{display:none}
.intro{object-fit:cover;z-index:1;transition:opacity 1.3s ease,transform 2s cubic-bezier(.2,.7,.1,1),filter 1.3s ease}
.steel{z-index:2;opacity:0;transform:perspective(1100px) rotateX(34deg) scale(1.32);transform-origin:50% 85%;
  transition:opacity 1.3s ease,transform 2.1s cubic-bezier(.16,.8,.12,1)}
.stage.is-steel .steel{opacity:1;transform:none}
.stage.is-steel .intro{opacity:0;transform:scale(1.1);filter:blur(5px)}
.stage::after{content:"";position:absolute;left:0;right:0;top:0;height:110px;z-index:3;background:linear-gradient(rgba(7,8,10,.72),rgba(7,8,10,0));pointer-events:none}
.stage-tag{position:absolute;z-index:4;right:34px;top:28px;font:500 11px/1 var(--fb);letter-spacing:.14em;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:8px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.stage-tag i{width:7px;height:7px;background:var(--red);border-radius:50%;box-shadow:0 0 8px var(--red)}
.stage-tag b{color:var(--red);font-weight:500}
.stage-hint{position:absolute;z-index:4;right:34px;top:56px;font:500 11px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .5s}
.stage.is-steel.at-start .stage-hint{opacity:1}
.mouse{width:16px;height:24px;border:1.5px solid rgba(255,255,255,.7);border-radius:9px;position:relative}
.mouse i{position:absolute;left:50%;top:5px;width:2px;height:5px;margin-left:-1px;background:var(--red);border-radius:2px;animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(7px);opacity:0}100%{opacity:0}}

.readout{position:absolute;z-index:5;right:34px;width:min(620px,48%);bottom:30px;display:flex;align-items:center;gap:12px;
  font:500 13px/1.3 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:#d9dce0;
  padding:14px 18px 16px;background:rgba(9,10,12,.84);border:1px solid rgba(255,255,255,.08)}
.ro-led{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#ff7a1a;box-shadow:0 0 10px #ff7a1a}
.readout.is-idle .ro-led{background:var(--red);box-shadow:0 0 8px var(--red)}
.readout.is-done .ro-led{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7)}
.ro-txt{flex:1 1 auto;min-width:0}
.ro-state{color:#fff;font-weight:500}
.readout.is-done .ro-state{color:#fff}
.ro-sep{color:var(--red);font-weight:500;padding:0 .2em}
.ro-num{display:inline-block;text-align:right}
.ro-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.08)}
.ro-bar i{display:block;height:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 8px rgba(226,27,35,.8)}

/* no-JS / reduced motion: no pin, finished top */
html:not(.js) .hero,.rm .hero{height:auto}
html:not(.js) .hero-stick,.rm .hero-stick{position:relative;top:0}
.rm .still{display:block}
.rm .intro,.rm .steel,.rm .stage-hint{display:none}

/* ---------- strip ---------- */
.strip{background:var(--bg2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 0 56px;border-left:1px solid var(--line2)}
.pt{display:flex;align-items:center;gap:22px;padding:34px 32px;border-right:1px solid var(--line2);color:var(--grey)}
.pt svg{flex:0 0 auto}
.pt h3{font:700 14px/21px var(--fh);color:#fff;letter-spacing:.02em}
.pt p{font-size:15px;line-height:22px}

/* ---------- feature grid ---------- */
.grid-sec{background:var(--light);padding:96px 0 110px}
.grid-head{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px;margin-bottom:44px}
.grid-head h2{font-size:56px;line-height:1.04;letter-spacing:-1.4px;color:var(--ink)}
.grid-head p{max-width:460px;color:var(--body);font-size:16px;padding-bottom:8px}
.cards{display:grid;grid-template-columns:2.1fr 1fr 1fr;gap:10px}
.card{padding:20px 20px 24px;display:flex;flex-direction:column}
.card-k{font:500 11px/1 var(--fb);letter-spacing:.12em;margin-bottom:22px}
.card-img{overflow:hidden;aspect-ratio:16/10;margin-bottom:24px;background:#222}
.card-red .card-img,.card-light .card-img{aspect-ratio:4/5}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-img img{transform:scale(1.04)}
.card h3{font-size:30px;line-height:1.1;margin-bottom:14px;max-width:320px}
.card p{font-size:14px;line-height:1.6;max-width:320px;margin-bottom:24px}
.card .btn{margin-top:auto;align-self:flex-start}
.card-dark{background:linear-gradient(#040506,#0b0c0e);color:var(--grey);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.card-dark .card-k{color:var(--red)}.card-dark h3{color:#fff}
.card-red{background:var(--red);color:#fff}
.card-red h3{color:#fff}
.card-light{background:#e4e4e4;color:var(--body)}
.card-light .card-k{color:var(--red)}.card-light h3{color:var(--ink)}

/* ---------- laser band ---------- */
.laser-sec{background:#0e0e0f;color:var(--grey);padding:100px 0}
.laser-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}
.kicker{font:500 12px/1 var(--fb);letter-spacing:.14em;color:var(--red);display:flex;align-items:center;gap:14px;margin-bottom:20px}
.kicker::before{content:"";width:30px;height:2px;background:var(--red)}
.laser-sec h2{font-size:56px;line-height:1.04;letter-spacing:-1.4px;color:#fff}
.laser-sec p{font-size:16px;line-height:1.7;margin-bottom:28px;max-width:560px}
.foot{background:#070708;color:#6b6f75;font-size:13px;padding:26px 0}

/* ---------- laser-dot cursor (fine pointers only) ---------- */
.xhair{display:none}
.has-xhair,.has-xhair a,.has-xhair button{cursor:none}
.has-xhair .xhair{display:block;position:fixed;left:0;top:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .25s}
.has-xhair .xhair.on{opacity:1}
.xh-dot,.xh-ring{position:absolute;left:0;top:0;border-radius:50%}
.xh-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#ff2a2a;box-shadow:0 0 6px 2px rgba(255,40,40,.75),0 0 16px rgba(255,60,40,.5)}
.xh-ring{width:30px;height:30px;margin:-15px 0 0 -15px;transition:width .25s,height .25s,margin .25s}
.xh-ring::before,.xh-ring::after{content:"";position:absolute;background:rgba(255,70,60,.75)}
.xh-ring::before{left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;-webkit-mask:linear-gradient(#000 0 30%,transparent 30% 70%,#000 70%);mask:linear-gradient(#000 0 30%,transparent 30% 70%,#000 70%)}
.xh-ring::after{top:50%;left:0;right:0;height:1px;margin-top:-.5px;-webkit-mask:linear-gradient(90deg,#000 0 30%,transparent 30% 70%,#000 70%);mask:linear-gradient(90deg,#000 0 30%,transparent 30% 70%,#000 70%)}
.xhair.hot .xh-ring{width:46px;height:46px;margin:-23px 0 0 -23px}

.m-only{display:none}
/* ---------- tablet / mobile ---------- */
@media (max-width:1200px){
  .hdr-in{padding:0 32px}.hdr-nav a{padding:20px 8px}
  .hero-h1{font-size:60px;line-height:55px}
}
@media (max-width:991px){
  :root{--hh:64px}
  .hdr-in{padding:0 14px;justify-content:space-between;gap:0}
  .hdr-burger,.hdr-cart-m{display:grid}
  .d-only{display:none}.m-only{display:inline}
  .hdr-nav,.hdr-acct,.hdr-cart{display:none}
  .hdr-logo{position:absolute;left:50%;transform:translateX(-50%)}
  .hdr-logo img{width:128px}
  .hdr-tools{gap:10px}
  .hdr-search{border:0;width:36px}
  .hero{height:auto}
  .hero-stick{position:relative;top:0;height:auto;min-height:0;flex-direction:column;overflow:visible}
  .hero-copy{flex:none;max-width:none;background-color:var(--bg);background-image:radial-gradient(circle at center,#121418 0 25px,transparent 26px);background-size:76px 76px;background-position:-14px 10px}
  .hero-copy-in{padding:30px 20px 26px}
  .hero-eyebrow{font-size:13px;margin-bottom:10px}
  .hero-h1{font-size:44px;line-height:42px;margin-bottom:18px}
  .hero-text{font-size:16px;line-height:1.6;margin-bottom:24px}
  .hero-btns{flex-direction:column;align-items:flex-start;gap:12px}
  .btn{font-size:15px}
  .stage{position:relative;inset:auto;flex:none;width:auto;aspect-ratio:1/1;margin:0 16px 30px;border:1px solid #1c1e22}
  .stage-shade{display:none}
  .stage-tag{left:14px;right:auto;top:14px;font-size:9.5px;letter-spacing:.12em}
  .stage-hint{display:none}
  .readout{left:0;right:0;width:auto;bottom:0;padding:11px 10px 13px;font-size:10.5px;letter-spacing:.035em;gap:7px;border-width:1px 0 0;white-space:nowrap}
  .ro-sep{padding:0 .05em}
  .ro-led{width:7px;height:7px}
  .strip-in{grid-template-columns:repeat(2,1fr);margin:0}
  .pt{padding:22px 16px;gap:14px;border-bottom:1px solid var(--line2)}
  .pt svg{width:22px;height:22px}
  .pt p{font-size:13px;line-height:18px}
  .pt h3{font-size:13px}
  .wrap{padding:0 20px}
  .grid-sec{padding:60px 0 64px}
  .grid-head{grid-template-columns:1fr;gap:14px;margin-bottom:28px}
  .grid-head h2,.laser-sec h2{font-size:38px;letter-spacing:-.8px}
  .cards{grid-template-columns:1fr}
  .card-red .card-img,.card-light .card-img{aspect-ratio:16/10}
  .card h3{font-size:26px}
  .laser-sec{padding:64px 0}
  .laser-in{grid-template-columns:1fr;gap:20px}
  .laser-sec .btn{white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (prefers-reduced-motion:reduce){
  .hero{height:auto}.hero-stick{position:relative;top:0}
  .js .still{display:block}.js .intro,.js .steel,.stage-hint{display:none}
}