:root{
  --ink:#050403;
  --ink-2:#0d0b09;
  --ink-3:#161311;
  --bone:#ece5d0;
  --bone-2:#c8c1ab;
  --bone-3:#a8a290;
  --gold:#c89a3d;
  --gold-2:#e4b85a;
  --blue:#22ccd6;
  --blue-2:#5fe6ec;
  --line: rgba(236,229,208,.14);
  --line-2: rgba(236,229,208,.28);
  /* Type system — four distinct voices.
     --display  → Big Shoulders Display: marketing voice (hero, sections, manifesto, CTAs,
                  page titles, admin headers). Industrial Chicago signage heritage, ALL CAPS.
     --catalog  → DM Serif Display: catalog voice (product names everywhere — detail page,
                  category cards, cart, checkout, cross-sell). Premium editorial, mixed case.
     --vintage  → Bowlby One: Manual Machining page hero only. Vintage factory-floor signage.
     --type     → Special Elite: utility stamps (eyebrows, nav, buttons, stock chips, prices).
     --script   → Caveat Brush: handwritten accents ("by", "the" in heroes).
     --sans     → Inter: body text. */
  --display: "Big Shoulders Display", "Oswald", "Bebas Neue", "Impact", sans-serif;
  --catalog: "DM Serif Display", Georgia, "Times New Roman", serif;
  --vintage: "Bowlby One", "Alfa Slab One", "Impact", serif;
  --script: "Caveat Brush", "Brush Script MT", cursive;
  --sans: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --type: "Special Elite", ui-monospace, "Courier New", monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#1a1208}

/* ===== Grunge overlays ===== */
body::before{
  content:"";position:fixed;inset:-50px;pointer-events:none;z-index:60;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.9 0 0 0 0 0.82 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.18;
  mix-blend-mode:overlay;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:61;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='s'><feTurbulence type='turbulence' baseFrequency='0.008 0.4' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.9 0 0 0 0 0.82 0 0 0 0.4 -0.05'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>");
  opacity:.12;
  mix-blend-mode:overlay;
}

/* ===== Layout ===== */
.wrap{max-width:1280px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
@media (max-width:640px){.wrap{padding:0 20px}}

/* ===== Nav ===== */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,9,8,.82);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{height:58px;width:auto;flex:none;display:block}
/* legacy .brand-name styles kept harmless in case a stray page still uses them */
.brand-name{display:flex;flex-direction:column;line-height:1}
.brand-name strong{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.04em;color:var(--bone)}
.brand-name small{font-family:var(--type);font-size:10px;letter-spacing:.16em;color:var(--bone-3);text-transform:uppercase;margin-top:5px}
.nav-links{display:flex;gap:34px;font-family:var(--type);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-2)}
.nav-links a{position:relative;padding:8px 0;transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.nav-links a.active{color:var(--gold)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1)}
.nav-cta{font-family:var(--type);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;padding:11px 18px;border:1.5px solid var(--bone);border-radius:2px;color:var(--bone);transition:all .2s}
.nav-cta:hover{background:var(--bone);color:var(--ink)}
@media (max-width:900px){.nav-links{display:none}}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-family:var(--type);font-size:12px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;transition:all .25s;border:1.5px solid transparent;border-radius:2px}
.btn-primary{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-primary:hover{background:var(--gold-2);border-color:var(--gold-2)}
.btn-ghost{border-color:var(--bone);color:var(--bone)}
.btn-ghost:hover{background:var(--bone);color:var(--ink)}
.btn-neon{border-color:var(--blue);color:var(--blue-2);background:rgba(34,204,214,.07);text-shadow:0 0 8px rgba(95,230,236,.55);box-shadow:0 0 0 1px rgba(34,204,214,.5),0 0 16px rgba(34,204,214,.5),inset 0 0 13px rgba(34,204,214,.2);animation:neonPulse 2.8s ease-in-out infinite}
.btn-neon:hover{animation:none;background:rgba(34,204,214,.16);color:#fff;border-color:var(--blue-2);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(34,204,214,.72),0 0 24px rgba(34,204,214,.72),0 0 46px rgba(34,204,214,.34),inset 0 0 16px rgba(34,204,214,.3)}
@keyframes neonPulse{0%,100%{box-shadow:0 0 0 1px rgba(34,204,214,.38),0 0 11px rgba(34,204,214,.4),inset 0 0 11px rgba(34,204,214,.15)}50%{box-shadow:0 0 0 1px rgba(34,204,214,.6),0 0 22px rgba(34,204,214,.62),inset 0 0 15px rgba(34,204,214,.26)}}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(3px)}

/* ===== Eyebrow ===== */
.eyebrow{font-family:var(--type);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold);display:inline-block}

/* ===== Hero (home only) ===== */
.hero{position:relative;padding:48px 0 32px;overflow:hidden}
.hero-stars{position:absolute;inset:0;background-image:
  radial-gradient(1.5px 1.5px at 18% 22%, var(--bone) 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 71% 14%, var(--bone) 50%, transparent 51%),
  radial-gradient(1px 1px at 38% 78%, var(--bone-2) 50%, transparent 51%),
  radial-gradient(1.3px 1.3px at 83% 64%, var(--bone) 50%, transparent 51%),
  radial-gradient(1px 1px at 12% 56%, var(--bone-2) 50%, transparent 51%),
  radial-gradient(2px 2px at 51% 32%, var(--bone) 50%, transparent 51%),
  radial-gradient(1.1px 1.1px at 92% 88%, var(--bone-2) 50%, transparent 51%),
  radial-gradient(1px 1px at 4% 8%, var(--bone) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 60% 88%, var(--bone) 50%, transparent 51%),
  radial-gradient(1px 1px at 30% 12%, var(--bone-2) 50%, transparent 51%);
  opacity:.55;pointer-events:none;animation:starTwinkleA 4.2s ease-in-out infinite}
/* Second twinkle layer — different positions, offset timing, for natural-feeling motion */
.hero-stars::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 26% 42%, var(--bone) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 62%, var(--bone-2) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 8% 36%, var(--bone) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 22%, var(--bone-2) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 64% 8%, var(--bone) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 88%, var(--bone-2) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 78% 50%, var(--bone) 50%, transparent 51%),
    radial-gradient(1px 1px at 56% 76%, var(--bone-2) 50%, transparent 51%);
  opacity:.5;animation:starTwinkleB 5.6s ease-in-out infinite}
@keyframes starTwinkleA{0%,100%{opacity:.55}50%{opacity:.78}}
@keyframes starTwinkleB{0%,100%{opacity:.5}50%{opacity:.22}}
.hero-glow{position:absolute;top:-30%;right:-10%;width:60%;height:120%;background:radial-gradient(ellipse,rgba(200,154,61,.18),transparent 60%);pointer-events:none;filter:blur(20px)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:60px}}
.hero-eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--type);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.hero-eyebrow::before,.hero-eyebrow::after{content:"";flex:0 0 28px;height:1px;background:var(--gold)}
.hero-eyebrow::after{flex:1;max-width:60px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,6.5vw,108px);line-height:.86;letter-spacing:.005em;margin:14px 0 0;color:var(--bone);text-shadow:0 2px 0 rgba(0,0,0,.4)}
.hero h1 .l2{display:block;color:var(--gold)}
.hero-script{font-family:var(--script);font-size:clamp(34px,5vw,64px);color:var(--blue-2);transform:rotate(-3deg) translateX(-8px);display:inline-block;margin-top:10px}
.hero-sub{margin-top:24px;max-width:520px;color:var(--bone-2);font-size:16px;line-height:1.55}
.hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.hero-art{position:relative}
.hero-art img{width:100%;height:auto;animation:heroFloat 7s ease-in-out infinite;will-change:transform}
/* Gentle bobbing on the moon artwork — slow, vertical, no layout shift */
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion: reduce){
  .hero-art img,.hero-stars,.hero-stars::after{animation:none !important}
}
/* "Work while others sleep" — matches the "THE" script accent in OWN THE NIGHT */
.hero-tag{position:absolute;top:-12px;right:-4px;background:transparent;padding:0;box-shadow:none;border-radius:0;font-family:var(--script);font-size:clamp(34px,5vw,64px);color:var(--blue-2);text-transform:none;letter-spacing:0;transform:rotate(-3deg);text-shadow:none;line-height:.95;text-align:right;max-width:280px}
@media (max-width:980px){.hero-tag{right:10px;top:-6px;max-width:220px}}

/* ===== Ticker ===== */
.ticker{margin-top:90px;border-top:1.5px solid var(--bone);border-bottom:1.5px solid var(--bone);padding:20px 0;overflow:hidden;white-space:nowrap;background:rgba(236,229,208,.04)}
.ticker-track{display:inline-flex;gap:48px;font-family:var(--type);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);animation:scroll 40s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;gap:48px}
.ticker-track span::after{content:"✦";color:var(--gold)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== Page header (subpages) ===== */
.page-head{position:relative;background:var(--ink-2);padding:0;overflow:hidden;border-bottom:3px double var(--bone)}
.page-head-inner{padding:48px 32px 52px;border-top:3px double var(--bone);position:relative;background:
  repeating-linear-gradient(45deg, transparent 0 14px, rgba(236,229,208,.025) 14px 15px),
  var(--ink-2);
}
.page-head-stars{position:absolute;inset:0;background-image:
  radial-gradient(1px 1px at 8% 30%, var(--bone-2) 50%, transparent 51%),
  radial-gradient(1.3px 1.3px at 22% 70%, var(--bone) 50%, transparent 51%),
  radial-gradient(1px 1px at 80% 22%, var(--bone-2) 50%, transparent 51%),
  radial-gradient(1.1px 1.1px at 92% 80%, var(--bone) 50%, transparent 51%),
  radial-gradient(1px 1px at 50% 50%, var(--bone-2) 50%, transparent 51%);
  opacity:.45;pointer-events:none}
.page-head-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;position:relative;z-index:2}
.page-head-grid.no-num{grid-template-columns:1fr auto;gap:24px}
.page-head-grid.no-num .ph-title{text-align:left}
@media (max-width:780px){
  .page-head-grid,
  .page-head-grid.no-num{grid-template-columns:1fr;text-align:center;gap:14px}
}
/* CNC page header tap-to-call: text on desktop, tap-friendly chip on mobile. */
.ph-meta-phone{color:var(--bone-3);text-decoration:none;display:inline-block;padding:4px 0;transition:color .15s;white-space:nowrap}
.ph-meta-phone:hover{color:var(--blue)}
@media (max-width:780px){
  .ph-meta-phone{margin-top:10px;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:1px solid var(--line-2);border-radius:999px;color:var(--bone);font-size:14px;letter-spacing:.06em;min-height:44px;white-space:nowrap}
  .ph-meta-phone::before{content:'\260E';color:var(--blue);font-size:16px}
}
.ph-num{font-family:var(--display);font-size:clamp(56px,8vw,110px);line-height:.85;color:var(--gold);text-shadow:0 4px 0 rgba(0,0,0,.45);letter-spacing:.005em}
.ph-title{font-family:var(--display);font-size:clamp(36px,5vw,68px);line-height:.95;letter-spacing:.005em;color:var(--bone);text-align:center;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.ph-title em{font-family:var(--script);font-style:normal;color:var(--blue-2);font-size:.5em;display:block;line-height:1;transform:rotate(-3deg);margin-top:8px;text-shadow:none}
.ph-meta{font-family:var(--type);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3);text-align:right;line-height:1.7}
@media (max-width:780px){.ph-meta{text-align:center}}
.ph-meta strong{display:block;color:var(--bone);font-weight:400}

/* ===== Section basics ===== */
section{padding:120px 0;position:relative}
.section-head{display:grid;grid-template-columns:.45fr .55fr;gap:60px;margin-bottom:80px;align-items:end}
@media (max-width:900px){.section-head{grid-template-columns:1fr;gap:30px}}
.section-head h2{font-family:var(--display);font-weight:400;font-size:clamp(56px,8vw,108px);line-height:.9;letter-spacing:.005em;margin:18px 0 0;color:var(--bone)}
.section-head h2 .gold{color:var(--gold)}
.section-head h2 .script{display:block;font-family:var(--script);font-weight:400;font-size:.45em;color:var(--blue-2);text-transform:none;letter-spacing:0;margin-top:8px;transform:rotate(-2deg)}
.section-head p{color:var(--bone-2);font-size:17px;line-height:1.6;margin:0;max-width:520px}

/* ===== Services grid ===== */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:800px){.services{grid-template-columns:1fr}}
.svc{position:relative;overflow:hidden;background:var(--ink-2);border:1px solid var(--line-2);border-radius:0;transition:transform .3s,box-shadow .3s,border-color .3s;display:block}
.svc:hover{transform:translateY(-3px);box-shadow:0 24px 50px rgba(0,0,0,.6);border-color:rgba(34,204,214,.45)}
.svc::before,.svc::after{content:"";position:absolute;width:24px;height:24px;z-index:4;pointer-events:none;transition:width .3s,height .3s,border-color .3s,filter .3s}
.svc::before{top:11px;left:11px;border-top:2px solid var(--blue);border-left:2px solid var(--blue)}
.svc::after{bottom:11px;right:11px;border-bottom:2px solid var(--blue);border-right:2px solid var(--blue)}
.svc:hover::before,.svc:hover::after{width:32px;height:32px;border-color:var(--blue-2);filter:drop-shadow(0 0 5px var(--blue))}
.svc-photo{aspect-ratio:16/10;overflow:hidden;position:relative}
.svc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1);filter:contrast(1.15) saturate(.7) grayscale(.15)}
.svc:hover .svc-photo img{transform:scale(1.05)}
.svc-photo::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='turbulence' baseFrequency='0.04 0.7' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0 0.03 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");mix-blend-mode:multiply;opacity:.4;pointer-events:none;z-index:1}
.svc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(10,9,8,.92) 100%);z-index:1}
.svc-num{position:absolute;top:18px;right:20px;z-index:3;font-family:var(--display);font-size:42px;color:var(--gold);line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.5)}
.svc-body{padding:32px 30px 36px;position:relative}
.svc-body::before{content:"";position:absolute;top:0;left:30px;right:30px;height:1px;background:var(--bone);opacity:.25}
.svc h3{font-family:var(--display);font-weight:400;font-size:34px;letter-spacing:.01em;margin:0 0 12px;line-height:1.05;color:var(--bone);position:relative;padding-left:17px}
.svc h3::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--blue);box-shadow:0 0 9px rgba(34,204,214,.65)}
.svc p{color:var(--bone-2);font-size:15px;line-height:1.6;margin:0 0 24px}
.svc-link{font-family:var(--type);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:10px;transition:gap .2s}
.svc:hover .svc-link{gap:14px}
/* ====== Recent Work — horizontal scroll strip on the home page ====== */
.recent-work{padding:60px 0 80px;background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.recent-work-head{margin-bottom:28px}
.rw-strip{
  display:flex;gap:18px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:6px 4px 24px;
  scrollbar-width:thin;scrollbar-color:var(--gold) var(--ink-3);
}
.rw-strip::-webkit-scrollbar{height:8px}
.rw-strip::-webkit-scrollbar-track{background:var(--ink-3)}
.rw-strip::-webkit-scrollbar-thumb{background:var(--gold);border-radius:0}
.rw-card{
  position:relative;flex:0 0 auto;
  width:clamp(260px,28vw,360px);aspect-ratio:4/5;
  margin:0;background:var(--ink-2);
  border:1px solid var(--line-2);border-radius:2px;
  overflow:hidden;scroll-snap-align:start;
  transition:transform .25s ease, border-color .25s ease;
}
.rw-card:hover{transform:translateY(-3px);border-color:var(--gold)}
.rw-card img{width:100%;height:100%;object-fit:cover;display:block}
.rw-card figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 16px 14px 16px;
  background:linear-gradient(180deg,transparent,rgba(10,9,8,.92));
  color:var(--bone);
  font-family:var(--type);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.4;
}
@media (max-width:640px){.rw-card{width:78vw}}

.lead-badge{
  display:inline-block;
  font-family:var(--type);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);
  background:rgba(34,204,214,.08);
  border:1px solid rgba(34,204,214,.45);
  padding:7px 12px;border-radius:2px;
  margin:14px 0 18px;
}

/* ========== Info sections (below the wizard on machining.html) ========== */
.info-section{
  padding:84px 0;
  border-bottom:1px solid var(--line);
  background:var(--ink);
  position:relative;
}
.info-section.alt{background:var(--ink-2)}
.info-section::before{
  /* subtle accent stripe along the top edge */
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--accent,var(--gold));opacity:.5;
}
.info-gold{--accent:var(--gold)}
.info-teal{--accent:var(--blue)}
.info-blue{--accent:var(--blue-2)}

.info-grid{
  display:grid;grid-template-columns:.32fr 1fr;gap:48px;align-items:start;
}
.info-grid.reverse{grid-template-columns:1fr .32fr}
.info-grid.reverse .info-side{order:2;text-align:right}
.info-grid.reverse .info-body{order:1}
@media (max-width:880px){
  .info-grid, .info-grid.reverse{grid-template-columns:1fr;gap:18px}
  .info-grid.reverse .info-side{order:1;text-align:left}
  .info-grid.reverse .info-body{order:2}
}

.info-side{
  position:sticky;top:96px;
  padding-top:8px;
}
.info-num{
  display:block;
  font-family:var(--display);font-size:clamp(36px,4.4vw,56px);
  color:var(--accent);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;
  margin-bottom:10px;
  text-shadow:0 0 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
.info-eye{
  font-family:var(--type);font-size:11.5px;letter-spacing:.28em;
  color:var(--bone-3);text-transform:uppercase;
}

.info-body{min-width:0}
.info-headline{
  font-family:var(--display);font-weight:400;
  font-size:clamp(40px,6vw,86px);line-height:.92;letter-spacing:.005em;
  text-transform:uppercase;color:var(--bone);
  margin:0 0 22px;
}
.info-accent{color:var(--accent)}
.info-lede{
  font-family:var(--sans);font-size:clamp(16px,1.6vw,19px);line-height:1.55;
  color:var(--bone-2);max-width:720px;margin:0 0 36px;
}

.info-label{
  display:block;
  font-family:var(--type);font-size:11px;letter-spacing:.22em;
  color:var(--accent);text-transform:uppercase;
  margin-bottom:14px;padding-bottom:6px;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
}
.info-list{
  list-style:none;padding:0;margin:0;
  font-family:var(--sans);font-size:14.5px;line-height:1.45;color:var(--bone-2);
}
.info-list li{
  padding:9px 0 9px 20px;position:relative;
  border-bottom:1px dashed var(--line-2);
}
.info-list li:last-child{border-bottom:none}
.info-list li::before{
  content:"›";position:absolute;left:0;top:9px;
  color:var(--accent);font-family:var(--sans);font-weight:700;
}

.info-grid-2{
  display:grid;grid-template-columns:1fr 1fr;gap:36px;
  margin:0 0 36px;
}
@media (max-width:680px){.info-grid-2{grid-template-columns:1fr;gap:24px}}

.info-steps{
  display:flex;flex-direction:column;gap:8px;
  margin:0 0 36px;
  border-left:2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  padding-left:24px;
}
.info-step{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:14px 0;
  border-bottom:1px dashed var(--line-2);
  font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--bone-2);
}
.info-step:last-child{border-bottom:none}
.info-step strong{color:var(--bone);font-weight:600}
.info-step-num{
  font-family:var(--type);font-size:11px;letter-spacing:.22em;
  color:var(--accent);text-transform:uppercase;min-width:32px;
}

.info-art-note{
  margin:0 0 36px;padding:14px 18px;
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-left:3px solid var(--accent);
  border-radius:2px;
  font-family:var(--sans);font-size:14.5px;color:var(--bone-2);line-height:1.55;
}
.info-art-note strong{color:var(--accent);font-weight:600}

.info-cta{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:8px;
}
.info-cta-note{
  font-family:var(--type);font-size:14.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-3);
}
.info-cta-note a{color:var(--accent);text-decoration:underline}

/* ========== CNC pitch section (machining.html) ========== */
.cnc-pitch{padding:64px 0 72px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%)}
.cnc-headline{
  font-family:var(--display);font-weight:400;
  font-size:clamp(56px,9vw,128px);
  line-height:.92;letter-spacing:.005em;
  text-transform:uppercase;color:var(--bone);
  margin:14px 0 22px;
}
.cnc-headline .gold{color:var(--gold)}
.cnc-subhead{
  font-family:var(--sans);font-size:clamp(18px,2vw,22px);
  line-height:1.55;color:var(--bone-2);
  max-width:780px;margin:0 0 40px;
}
.cnc-subhead strong{color:var(--bone);font-weight:600}

.cnc-trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  padding:24px 0 28px;margin:0 0 48px;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
.cnc-trust > div{display:flex;flex-direction:column;gap:6px}
.cnc-trust-num{
  font-family:var(--display);font-size:clamp(22px,2.6vw,32px);
  letter-spacing:.02em;color:var(--gold);text-transform:uppercase;line-height:1;
}
.cnc-trust-label{
  font-family:var(--type);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-3);line-height:1.4;
}
@media (max-width:820px){
  .cnc-trust{grid-template-columns:repeat(2,1fr);gap:18px}
}

.cnc-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:40px;
}
.cnc-card{
  background:var(--ink-3);border:1px solid var(--line-2);
  border-top:2px solid var(--gold);padding:28px 26px 26px;border-radius:2px;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.cnc-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.cnc-card-num{
  font-family:var(--type);font-size:11px;letter-spacing:.22em;
  color:var(--gold);text-transform:uppercase;display:block;margin-bottom:12px;
}
.cnc-card h3{
  font-family:var(--display);font-weight:400;font-size:22px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--bone);
  margin:0 0 10px;line-height:1.1;
}
.cnc-card p{margin:0;color:var(--bone-2);font-size:14.5px;line-height:1.55}
@media (max-width:820px){.cnc-cards{grid-template-columns:1fr}}

.cnc-cta-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:8px;
}
.cnc-cta-note{
  font-family:var(--type);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-3);
}

/* ===== Split (capability) ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
@media (max-width:980px){.split{grid-template-columns:1fr;gap:48px}}
.split-img{position:relative;border:1.5px solid var(--bone);border-radius:3px;overflow:hidden;aspect-ratio:5/6}
.split-img img{width:100%;height:100%;object-fit:cover;filter:contrast(1.15) saturate(.75) grayscale(.1)}
.split-img::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g2'><feTurbulence type='turbulence' baseFrequency='0.05 0.6' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0 0.03 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g2)'/></svg>");mix-blend-mode:multiply;opacity:.45;pointer-events:none;z-index:1}
.split-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,9,8,.5));z-index:1}

/* ===== Capability list ===== */
.cap-list{list-style:none;padding:0;margin:32px 0 0}
.cap-list li{display:grid;grid-template-columns:60px 1fr;padding:24px 0;border-top:1px dashed var(--line-2);align-items:start}
.cap-list li:last-child{border-bottom:1px dashed var(--line-2)}
.cap-list .num{font-family:var(--type);font-size:12px;letter-spacing:.18em;color:var(--gold)}
.cap-list h4{margin:0 0 8px;font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.01em;color:var(--bone)}
.cap-list p{margin:0;color:var(--bone-2);font-size:14.5px;line-height:1.55}

/* ===== Process strip ===== */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--bone);border-bottom:2px solid var(--bone);margin-top:48px}
@media (max-width:900px){.process{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.process{grid-template-columns:1fr}}
.step{padding:36px 28px 40px;border-right:1px dashed var(--line-2);position:relative;transition:background .3s}
.step:nth-child(4n){border-right:none}
.step:hover{background:var(--ink-2)}
.step-num{font-family:var(--display);font-size:56px;color:var(--gold);line-height:1;margin-bottom:24px;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.step h4{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.01em;margin:0 0 10px;color:var(--bone)}
.step p{color:var(--bone-2);font-size:14px;line-height:1.55;margin:0}

/* ===== Products ===== */
.opt-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:40px;flex-wrap:wrap}
.pill{font-family:var(--type);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;padding:9px 16px;border:1.5px solid var(--bone-2);border-radius:999px;color:var(--bone-2)}
.pill .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);margin-right:10px;vertical-align:middle;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1000px){.products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.products{grid-template-columns:1fr}}
.product{background:var(--ink-2);border:1.5px solid var(--bone);border-radius:3px;overflow:hidden;transition:transform .3s,box-shadow .3s;position:relative;display:block}
.product:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.6)}
.product-img{aspect-ratio:4/3;position:relative;overflow:hidden;background:#0a0d12}
.product-img img{width:100%;height:100%;object-fit:cover;filter:contrast(1.15) saturate(.75) grayscale(.1)}
.product-img::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g3'><feTurbulence type='turbulence' baseFrequency='0.05 0.7' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0 0.03 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g3)'/></svg>");mix-blend-mode:multiply;opacity:.4;pointer-events:none}
.product-body{padding:20px 22px 24px;border-top:1px dashed var(--line-2)}
.product-name{font-family:var(--display);font-size:18px;letter-spacing:.02em;line-height:1.2;margin:0 0 10px;color:var(--bone)}
.product-meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.product-price{font-family:var(--display);font-size:24px;color:var(--gold);line-height:1}
.product-cta{font-family:var(--type);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3)}

/* ===== Gallery ===== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:48px}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gallery a{position:relative;overflow:hidden;display:block;aspect-ratio:1;background:#0a0d12}
.gallery img{width:100%;height:100%;object-fit:cover;filter:contrast(1.15) saturate(.7) grayscale(.15);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gallery a::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g4'><feTurbulence type='turbulence' baseFrequency='0.06 0.8' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0 0.03 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g4)'/></svg>");mix-blend-mode:multiply;opacity:.4;pointer-events:none;z-index:1}
.gallery a:hover img{transform:scale(1.04)}

/* ===== Poster (store feature) ===== */
.poster{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1.5px solid var(--bone);border-radius:3px;overflow:hidden;background:var(--ink-2);position:relative}
@media (max-width:900px){.poster{grid-template-columns:1fr}}
.poster::before,.poster::after{content:"";position:absolute;width:30px;height:30px;background:var(--ink);z-index:3}
.poster::before{top:-15px;left:-15px;transform:rotate(45deg);border-bottom:1.5px solid var(--bone);border-right:1.5px solid var(--bone)}
.poster::after{bottom:-15px;right:-15px;transform:rotate(45deg);border-top:1.5px solid var(--bone);border-left:1.5px solid var(--bone)}
.poster-body{padding:56px 48px;position:relative}
.poster-script{font-family:var(--script);color:var(--blue-2);font-size:36px;transform:rotate(-3deg);display:inline-block;margin-bottom:6px}
.poster h3{font-family:var(--display);font-weight:400;font-size:54px;line-height:.95;letter-spacing:.01em;margin:6px 0 24px;color:var(--bone)}
.poster h3 .gold{color:var(--gold)}
.poster p{color:var(--bone-2);line-height:1.6;margin:0 0 28px;max-width:440px}
.drop-meta{display:flex;gap:32px;margin:36px 0 0;padding-top:28px;border-top:1px dashed var(--line-2);flex-wrap:wrap}
.drop-meta div{font-family:var(--type);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3)}
.drop-meta strong{display:block;font-family:var(--display);font-weight:400;font-size:18px;color:var(--bone);letter-spacing:.02em;margin-top:6px}
.poster-img{position:relative;min-height:400px;background:var(--ink)}
.poster-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.15) saturate(.75) grayscale(.1)}
.poster-img::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g5'><feTurbulence type='turbulence' baseFrequency='0.04 0.7' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0 0.03 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g5)'/></svg>");mix-blend-mode:multiply;opacity:.4;pointer-events:none;z-index:1}

/* ===== Manifesto band ===== */
.manifesto{padding:160px 0;text-align:center;position:relative;overflow:hidden;background:var(--ink-2);border-top:3px double var(--bone);border-bottom:3px double var(--bone)}
.manifesto-bg{position:absolute;inset:0;display:grid;place-items:center;opacity:.08;pointer-events:none}
.manifesto-bg img{height:130%;width:auto;max-width:none;filter:grayscale(1) contrast(1.2)}
.manifesto-eyebrow{font-family:var(--script);color:var(--blue-2);font-size:36px;display:inline-block;transform:rotate(-2deg);margin-bottom:10px}
.manifesto h2{font-family:var(--display);font-weight:400;font-size:clamp(72px,13vw,200px);line-height:.86;letter-spacing:.005em;margin:0 auto;max-width:14ch;color:var(--bone);text-shadow:0 4px 0 rgba(0,0,0,.4)}
.manifesto h2 .gold{color:var(--gold)}
.manifesto p{color:var(--bone-2);max-width:560px;margin:36px auto 0;font-size:17px;line-height:1.6}

/* ===== CTA strip ===== */
.cta{padding:140px 0 160px;text-align:center;background:
  radial-gradient(ellipse at center top,rgba(200,154,61,.14),transparent 60%);
  position:relative}
.cta h2{font-family:var(--display);font-weight:400;font-size:clamp(56px,9vw,130px);line-height:.9;letter-spacing:.005em;margin:18px auto 28px;max-width:14ch;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.cta h2 .gold{color:var(--gold)}
.cta p{color:var(--bone-2);max-width:540px;margin:0 auto 40px;font-size:17px;line-height:1.55}

/* ===== Contact form ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:48px}}
.contact-card{background:var(--ink-2);border:1.5px solid var(--bone);border-radius:3px;padding:40px}
.contact-card h3{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:.01em;margin:0 0 16px;color:var(--bone)}
.contact-card p{color:var(--bone-2);font-size:15px;line-height:1.6;margin:0 0 18px}
.contact-card a.email{font-family:var(--display);font-size:22px;letter-spacing:.01em;color:var(--gold);text-transform:none}
.contact-form{display:flex;flex-direction:column;gap:18px;margin-top:24px}
.contact-form label{font-family:var(--type);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3);margin-bottom:6px;display:block}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%;background:var(--ink-3);border:1.5px solid var(--line-2);color:var(--bone);
  padding:13px 16px;border-radius:2px;font-family:var(--sans);font-size:14.5px;outline:none;transition:border-color .2s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{border-color:var(--gold)}
.contact-form textarea{min-height:140px;resize:vertical;font-family:var(--sans)}

/* Preferred-contact radio group on contact.html */
.contact-pref-fieldset{
  border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;
}
.contact-pref-fieldset legend{
  font-family:var(--type);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-3);padding:0;margin-bottom:6px;
}
.contact-pref-options{display:flex;gap:10px;flex-wrap:wrap}
.contact-pref-opt{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:var(--ink-3);border:1.5px solid var(--line-2);border-radius:2px;
  font-family:var(--sans);font-size:14.5px;color:var(--bone-2);
  cursor:pointer;flex:1;min-width:90px;justify-content:center;
  transition:border-color .2s,color .2s,background .2s;
  margin:0;text-transform:none;letter-spacing:0;
}
.contact-pref-opt:hover{border-color:var(--gold);color:var(--bone)}
.contact-pref-opt input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;border:1.5px solid var(--bone-3);border-radius:50%;
  margin:0;position:relative;cursor:pointer;flex:0 0 auto;
  transition:border-color .2s;
}
.contact-pref-opt input[type="radio"]:checked{border-color:var(--gold)}
.contact-pref-opt input[type="radio"]:checked::after{
  content:'';position:absolute;inset:3px;background:var(--gold);border-radius:50%;
}
.contact-pref-opt:has(input[type="radio"]:checked){
  border-color:var(--gold);background:rgba(200,154,61,.07);color:var(--bone);
}
.contact-info-list{list-style:none;padding:0;margin:0}
.contact-info-list li{padding:18px 0;border-top:1px dashed var(--line-2);display:grid;grid-template-columns:120px 1fr;align-items:start;gap:20px}
.contact-info-list li:last-child{border-bottom:1px dashed var(--line-2)}
.contact-info-list dt{font-family:var(--type);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.contact-info-list dd{margin:0;color:var(--bone);font-size:15.5px}

/* ===== Footer ===== */
footer{padding:80px 0 40px;background:var(--ink-2);border-top:3px double var(--bone);position:relative}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:60px}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr;gap:40px}}
@media (max-width:560px){.foot{grid-template-columns:1fr}}
.foot h5{font-family:var(--type);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 22px;font-weight:400}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:11px}
.foot a{color:var(--bone-2);font-size:14.5px;transition:color .2s}
.foot a:hover{color:var(--gold)}
/* On mobile, give every footer link a real tap height — thumbs need room. */
@media (max-width:640px){
  .foot a{display:inline-block;padding:8px 0;min-height:36px;font-size:15.5px}
}
.foot p{color:var(--bone-2);font-size:14.5px;line-height:1.6;margin:14px 0}
.newsletter{display:flex;gap:8px;margin-top:14px}
.newsletter input{flex:1;background:var(--ink-3);border:1.5px solid var(--line-2);color:var(--bone);padding:13px 16px;border-radius:2px;font-family:var(--sans);font-size:14px;outline:none;transition:border-color .2s}
.newsletter input:focus{border-color:var(--gold)}
.newsletter button{background:var(--gold);color:var(--ink);border:none;padding:0 22px;border-radius:2px;font-family:var(--type);font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.newsletter button:hover{background:var(--gold-2)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;border-top:1px dashed var(--line);font-family:var(--type);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3);flex-wrap:wrap;gap:18px}
.foot-script{font-family:var(--script);color:var(--blue-2);font-size:22px;letter-spacing:0;text-transform:none}

/* ===== Wizard / Quote Builder ===== */
.wizard-section{position:relative}
.wizard{margin-top:48px;background:var(--ink-2);border:1.5px solid var(--bone);border-radius:3px;padding:48px;position:relative}
@media (max-width:700px){.wizard{padding:32px 24px}}
.wizard::before{content:"";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;border:1px dashed var(--line-2);pointer-events:none;border-radius:5px}

.wizard-head{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:36px;padding-bottom:24px;border-bottom:1px dashed var(--line-2);flex-wrap:wrap}
.wizard-head .label{font-family:var(--type);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3)}
.wizard-head .label strong{color:var(--gold);font-weight:400}

.wizard-progress{display:flex;gap:8px;align-items:center}
.wizard-progress .dot{width:38px;height:5px;background:var(--line-2);border-radius:2px;transition:background .3s}
.wizard-progress .dot.done{background:var(--gold)}
.wizard-progress .dot.active{background:var(--bone)}

.wizard-step{display:none}
.wizard-step.is-active{display:block;animation:wfade .3s ease-out}
@keyframes wfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.wizard-q{font-family:var(--display);font-weight:400;font-size:clamp(44px,5.4vw,72px);line-height:.95;letter-spacing:.005em;margin:0 0 14px;color:var(--bone);text-shadow:0 2px 0 rgba(0,0,0,.4)}
.wizard-q em{font-family:var(--script);font-style:normal;color:var(--blue-2);font-size:.6em;text-transform:none;display:inline-block;transform:rotate(-2deg);margin-left:8px}
.wizard-hint{color:var(--bone-2);font-size:18px;line-height:1.55;margin:0 0 36px;max-width:640px}

.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:8px}
@media (max-width:700px){.choice-grid{grid-template-columns:1fr}}
.choice-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:780px){.choice-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.choice-grid.cols-3{grid-template-columns:1fr}}
.choice-grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.choice-grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.choice-grid.cols-4{grid-template-columns:1fr}}

/* Choice tiles: centered, big title, description directly under. */
.choice{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;background:var(--ink-3);
  border:1.5px solid var(--line-2);border-radius:2px;
  padding:34px 22px 30px;min-height:196px;
  cursor:pointer;color:var(--bone);font-family:var(--sans);
  position:relative;overflow:hidden;
  transition:border-color .2s ease,background .2s ease,transform .15s ease,box-shadow .2s ease;
}
.choice::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--blue);transform:scaleY(0);transform-origin:top;
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.choice:hover{
  border-color:var(--blue);background:var(--ink-2);
  transform:translateY(-2px);
  box-shadow:0 0 0 1px var(--blue),
              0 12px 26px rgba(0,0,0,.5),
              0 0 26px rgba(34,204,214,.28);
}
.choice:hover::after,.choice:focus-visible::after,.choice.selected::after{transform:scaleY(1)}
.choice:active{transform:translateY(0)}
.choice.selected{
  border-color:var(--blue);background:rgba(34,204,214,.08);
  box-shadow:0 0 0 1.5px var(--blue),
              0 12px 26px rgba(0,0,0,.5),
              0 0 28px rgba(34,204,214,.32);
}
.choice.selected::after{background:var(--blue)}
.choice.selected::before{
  content:"✓";position:absolute;top:14px;right:16px;
  color:var(--blue);font-family:var(--sans);font-weight:700;font-size:18px;line-height:1;
}
.choice-num{
  display:block;
  font-family:var(--type);font-size:13px;letter-spacing:.22em;
  color:var(--gold);text-transform:uppercase;
  margin:0 0 18px;line-height:1;
}
.choice-title{
  display:block;
  font-family:var(--display);font-weight:400;
  font-size:64px;text-transform:uppercase;letter-spacing:.02em;
  line-height:1;color:var(--bone);
  margin:0 0 14px;
  transition:color .2s ease;
}
.choice:hover .choice-title,.choice:focus-visible .choice-title{color:var(--blue-2)}
.choice.selected .choice-title{color:var(--blue-2)}
/* Title sizes scale with column density */
.choice-grid.cols-3 .choice-title{font-size:44px}
.choice-grid.cols-4 .choice-title{font-size:38px}
/* Step 1 has long phrases ("NEW PARTS FROM MY DESIGN") — shrink just there */
.wizard-step[data-step="1"] .choice-title{font-size:36px}
.choice-desc{
  display:block;
  font-family:var(--sans);font-size:16px;line-height:1.5;
  color:var(--bone-2);
  margin:0;
}
.choice-grid.cols-4 .choice-desc{font-size:14.5px}
@media (max-width:820px){
  .choice-title{font-size:48px}
  .choice-grid.cols-3 .choice-title{font-size:36px}
  .choice-grid.cols-4 .choice-title{font-size:32px}
}
/* (legacy no-hover overrides removed — title + description are always visible now) */

.wizard-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:32px;padding-top:28px;border-top:1px dashed var(--line-2);flex-wrap:wrap}
.wizard-actions .secondary{font-family:var(--type);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3);background:transparent;border:none;cursor:pointer;padding:8px 0}
.wizard-actions .secondary:hover{color:var(--bone)}
.wizard-actions .secondary:disabled{opacity:.3;cursor:default}
.wizard-actions .next-wrap{display:flex;gap:12px;align-items:center}
.wizard-actions .req-note{font-family:var(--type);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3)}
.wizard-actions button.btn:disabled{opacity:.4;cursor:not-allowed;filter:none;animation:none;box-shadow:none}

/* Ready-to-proceed glow: pulses gently around the Next button once a choice is made */
.wizard-actions button.btn.is-ready{
  box-shadow:0 0 0 1.5px var(--blue),
             0 0 0 4px rgba(34,204,214,.12),
             0 0 30px rgba(34,204,214,.35);
  animation:btnReadyPulse 1.8s ease-in-out infinite;
}
@keyframes btnReadyPulse{
  0%,100%{box-shadow:0 0 0 1.5px var(--blue),0 0 0 4px rgba(34,204,214,.12),0 0 26px rgba(34,204,214,.32)}
  50%   {box-shadow:0 0 0 1.5px var(--blue),0 0 0 7px rgba(34,204,214,.18),0 0 38px rgba(34,204,214,.55)}
}
@media (prefers-reduced-motion: reduce){
  .wizard-actions button.btn.is-ready{animation:none}
}

/* Text fields inside wizard */
.wizard-field{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.wizard-field label{font-family:var(--type);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.wizard-field input, .wizard-field textarea{
  width:100%;background:var(--ink-3);border:1.5px solid var(--line-2);color:var(--bone);
  padding:16px 18px;border-radius:2px;font-family:var(--sans);font-size:17px;outline:none;transition:border-color .2s;
}
.wizard-field input:focus, .wizard-field textarea:focus{border-color:var(--gold)}
.wizard-field textarea{min-height:120px;resize:vertical}
.wizard-field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* File picker (drawing attachment on step 5) */
.wizard-file{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--ink-3);border:1.5px dashed var(--line-2);border-radius:2px;
  padding:14px 18px;
}
.wizard-file:hover{border-color:var(--blue)}
.wizard-file-name{
  font-family:var(--sans);font-size:14.5px;color:var(--bone-2);line-height:1.4;
  flex:1;min-width:0;word-break:break-all;
}
@media (max-width:600px){.wizard-field-row{grid-template-columns:1fr}}

/* Result panel */
.wizard-result{display:grid;grid-template-columns:1fr 1fr;gap:36px}
@media (max-width:900px){.wizard-result{grid-template-columns:1fr}}
.result-rec{background:var(--ink-3);border:1.5px solid var(--gold);border-radius:3px;padding:30px 28px;position:relative}
.result-rec::before{content:"OUR RECOMMENDATION";position:absolute;top:-10px;left:18px;background:var(--ink-2);padding:2px 12px;font-family:var(--type);font-size:12px;letter-spacing:.22em;color:var(--gold)}
.result-rec h4{font-family:var(--display);font-weight:400;font-size:38px;letter-spacing:.01em;line-height:1.1;margin:8px 0 16px;color:#ffffff}
.result-rec p{color:#ffffff;font-size:16px;line-height:1.55;margin:0 0 20px}
.result-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;padding-top:18px;border-top:1px dashed var(--line-2)}
.result-meta div{font-family:var(--type);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3)}
.result-meta strong{display:block;font-family:var(--display);font-weight:400;font-size:22px;color:#ffffff;letter-spacing:.02em;margin-top:6px}

.result-summary{background:var(--ink-3);border:1.5px solid var(--line-2);border-radius:3px;padding:24px 26px;font-size:16px;line-height:1.65;color:#ffffff}
.result-summary h5{font-family:var(--type);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 16px;font-weight:400}
.result-summary dl{margin:0;display:grid;grid-template-columns:130px 1fr;gap:10px 16px}
.result-summary dt{font-family:var(--type);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3);padding-top:2px}
.result-summary dd{margin:0;color:#ffffff}

.wizard-success{text-align:center;padding:32px 0}
.wizard-success-mark{display:inline-grid;place-items:center;width:72px;height:72px;border:2px solid var(--gold);border-radius:50%;color:var(--gold);font-family:var(--display);font-size:36px;margin-bottom:24px}
.wizard-success h3{font-family:var(--display);font-weight:400;font-size:56px;letter-spacing:.01em;line-height:1;margin:0 0 18px;color:var(--bone);text-shadow:0 2px 0 rgba(0,0,0,.4)}
.wizard-success p{color:var(--bone-2);font-size:18px;line-height:1.55;max-width:540px;margin:0 auto 8px}
.wizard-success .meta{font-family:var(--type);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3);margin-top:28px}

/* "Need it sooner?" rush-contact callout on the success state */
.wizard-urgent{
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  margin:32px auto 0;padding:22px 28px;
  background:rgba(34,204,214,.06);
  border:1.5px dashed var(--blue);border-radius:3px;
  max-width:520px;
}
.wizard-urgent-label{
  font-family:var(--script);color:var(--blue-2);font-size:26px;line-height:1;
  display:inline-block;transform:rotate(-1deg);
}
.wizard-urgent-phone{
  font-family:var(--display);font-weight:400;font-size:34px;
  letter-spacing:.02em;color:var(--bone);text-decoration:none;line-height:1;
  transition:color .2s ease;
}
.wizard-urgent-phone:hover{color:var(--blue-2)}
.wizard-urgent-note{
  font-family:var(--sans);font-size:14.5px;line-height:1.4;color:var(--bone-2);
}

/* Rush / accommodate note inside recommendation */
.rush-note{margin-top:20px;padding:18px 20px;background:rgba(34,204,214,.07);border:1.5px dashed var(--blue);border-radius:3px;display:flex;gap:16px;align-items:flex-start}
.rush-note-icon{flex:0 0 36px;height:36px;display:grid;place-items:center;font-family:var(--display);font-size:20px;color:var(--blue-2);border:1.5px solid var(--blue);border-radius:50%;line-height:1}
.rush-note-body{flex:1;min-width:0}
.rush-note-title{font-family:var(--script);color:var(--blue-2);font-size:26px;line-height:1;display:inline-block;transform:rotate(-1deg);margin-bottom:6px}
.rush-note-text{font-size:15.5px;line-height:1.55;color:var(--bone-2);margin:0}

/* ===== Product configurator ===== */
.config-block{margin:28px 0 28px;padding:24px 0 0;border-top:1px dashed var(--line-2)}
.config-block .eyebrow{margin-bottom:14px;display:flex}
.qty-toggle{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.qty-btn{background:var(--ink-3);border:1.5px solid var(--line-2);border-radius:3px;color:var(--bone);padding:14px 12px 16px;text-align:center;cursor:pointer;font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.02em;line-height:1;transition:all .2s;display:flex;flex-direction:column;gap:6px;align-items:center}
.qty-btn:hover{border-color:var(--bone)}
.qty-btn.active{border-color:var(--gold);background:rgba(200,154,61,.07);box-shadow:0 0 0 3px rgba(200,154,61,.12)}
.qty-btn span{font-family:var(--type);font-size:11.5px;letter-spacing:.16em;color:var(--bone-3);font-weight:400}
.qty-btn.active span{color:var(--gold)}
.qty-save{font-family:var(--type);font-size:9.5px;letter-spacing:.16em;color:var(--blue-2);margin-top:-2px}

.verse-option{background:var(--ink-3);border:1.5px dashed var(--line-2);border-radius:3px;padding:18px 20px;transition:opacity .2s,border-color .2s}
.verse-option.disabled{opacity:.4;pointer-events:none}
.verse-option.active{border-color:var(--blue);border-style:dashed}
.verse-toggle{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14.5px;color:var(--bone);line-height:1.4}
.verse-toggle input{accent-color:var(--gold);width:18px;height:18px;flex:0 0 18px;margin:0;cursor:pointer}
.verse-toggle em{font-style:normal;color:var(--gold);font-family:var(--type);font-size:11.5px;letter-spacing:.14em;margin-left:6px}
.verse-toggle .lock{font-family:var(--type);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);margin-left:8px}
.verse-input{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-2);display:none}
.verse-input.shown{display:block;animation:wfade .25s ease-out}
.verse-input label{font-family:var(--type);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3);display:block;margin-bottom:8px}
.verse-input input{width:100%;background:var(--ink-2);border:1.5px solid var(--line-2);color:var(--bone);padding:12px 14px;border-radius:2px;font-family:var(--sans);font-size:14.5px;outline:none;transition:border-color .2s}
.verse-input input:focus{border-color:var(--gold)}
.verse-hint{font-family:var(--type);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);margin:10px 0 0}
.verse-hint .gold{color:var(--gold)}

.config-total{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:24px;border-top:1px dashed var(--line-2);gap:18px;flex-wrap:wrap}
.config-total .label{font-family:var(--type);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.config-total .price{font-family:var(--display);font-weight:400;font-size:42px;color:var(--gold);line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.config-total .price-sub{display:block;font-family:var(--type);font-size:10.5px;letter-spacing:.14em;color:var(--bone-3);margin-top:6px}

/* M-Lok Cross poster art placeholder (drop in real PNG later) */
.cross-poster{position:relative;background:#000;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;min-height:560px}
.cross-poster::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='cg'><feTurbulence type='turbulence' baseFrequency='0.03 0.6' numOctaves='2' seed='8'/><feColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.9 0 0 0 0 0.82 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23cg)'/></svg>");mix-blend-mode:overlay;opacity:.6;pointer-events:none;z-index:3}
.cross-poster::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.55) 100%);pointer-events:none;z-index:2}
.cross-poster-inner{position:relative;z-index:4;text-align:center;padding:36px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.cross-title, .cross-verse{
  font-family:"Rubik Wet Paint", "Anton", sans-serif;
  font-weight:400;
  color:var(--bone);
  line-height:.95;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-shadow:0 4px 0 rgba(0,0,0,.7), 2px 0 0 rgba(0,0,0,.5);
}
.cross-title{font-size:clamp(36px,5.5vw,62px)}
.cross-verse{font-size:clamp(26px,4vw,42px);line-height:.92}
.cross-svg{width:clamp(160px,22vw,240px);height:auto;filter:drop-shadow(0 8px 0 rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(0,0,0,.8))}
.cross-ref{font-family:"Rubik Wet Paint","Special Elite",monospace;font-size:clamp(14px,1.7vw,20px);letter-spacing:.06em;color:var(--bone);text-transform:uppercase;margin-top:-2px;text-shadow:0 3px 0 rgba(0,0,0,.6)}
@media (max-width:900px){.cross-poster{min-height:480px}}

/* Verse capture extras */
.verse-input .field-label{font-family:var(--type);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3);display:block;margin:14px 0 8px}
.verse-input .field-label .hint{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;color:var(--bone-3);margin-left:6px}
.verse-input .input-error{display:block;margin-top:6px;font-family:var(--type);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#e07a5f;min-height:14px}

/* Reserve button as <button> styled like .btn */
button.btn{font:inherit;cursor:pointer}
button.btn:disabled{opacity:.5;cursor:not-allowed}

/* Checkout transition overlay */
.checkout-overlay{position:fixed;inset:0;background:rgba(10,9,8,.92);backdrop-filter:blur(8px);z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.checkout-overlay.is-open{display:flex;animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.checkout-card{max-width:520px;width:100%;background:var(--ink-2);border:1.5px solid var(--bone);border-radius:3px;padding:48px 40px;text-align:center;position:relative}
.checkout-card::before{content:"";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;border:1px dashed var(--line-2);pointer-events:none;border-radius:5px}
.checkout-mark{display:inline-grid;place-items:center;width:64px;height:64px;border:2px solid var(--gold);border-radius:50%;color:var(--gold);font-family:var(--display);font-size:32px;margin:0 auto 24px;animation:pulse 1.8s ease-in-out infinite}
.checkout-card h3{font-family:var(--display);font-weight:400;font-size:34px;letter-spacing:.01em;line-height:1;margin:0 0 14px;color:var(--bone);text-shadow:0 2px 0 rgba(0,0,0,.4)}
.checkout-steps{list-style:none;padding:0;margin:24px 0 0;text-align:left;display:flex;flex-direction:column;gap:10px}
.checkout-steps li{font-family:var(--type);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);padding:10px 14px;border:1px dashed var(--line-2);border-radius:3px;display:flex;align-items:center;gap:12px;transition:all .3s}
.checkout-steps li.active{color:var(--bone);border-color:var(--gold);background:rgba(200,154,61,.06)}
.checkout-steps li.done{color:var(--bone-2);border-style:solid;border-color:var(--line-2)}
.checkout-steps li.done::before{content:"✓";color:var(--gold);font-family:var(--display);font-size:14px}
.checkout-steps li.active::before{content:"●";color:var(--gold);font-size:10px;animation:pulse 1s ease-in-out infinite}
.checkout-steps li.pending::before{content:"○";color:var(--bone-3);font-size:10px}
.checkout-note{font-family:var(--type);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);margin-top:24px;padding-top:16px;border-top:1px dashed var(--line-2)}
.checkout-demo-flag{display:inline-block;font-family:var(--type);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-2);padding:4px 10px;border:1px solid var(--blue);border-radius:999px;margin-bottom:14px}

/* ===== Mobile navigation ===== */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:48px;height:42px;flex:none;padding:0;background:transparent;border:1.5px solid var(--line-2);border-radius:2px;cursor:pointer;transition:border-color .2s}
.nav-toggle:hover{border-color:var(--bone)}
.nav-toggle span{display:block;width:21px;height:2px;margin:0 auto;background:var(--bone);border-radius:2px;transition:transform .28s ease,opacity .18s ease}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{position:absolute;left:0;right:0;top:100%;background:rgba(10,9,8,.98);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.2,.7,.2,1)}
.nav.open .nav-mobile{max-height:480px}
.nav-mobile-inner{max-width:1280px;margin:0 auto;padding:4px 32px 28px;display:flex;flex-direction:column}
.nav-mobile a{font-family:var(--type);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-2);padding:17px 2px;border-bottom:1px dashed var(--line-2);transition:color .2s}
.nav-mobile a:hover,.nav-mobile a:active,.nav-mobile a.active{color:var(--gold)}
.nav-mobile-cta{margin-top:22px;border:1.5px solid var(--gold)!important;background:var(--gold);color:var(--ink)!important;text-align:center;border-radius:2px;padding:16px 2px!important;transition:background .2s}
.nav-mobile-cta:hover{background:var(--gold-2);color:var(--ink)!important}
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav-cta{display:none}
}
@media (min-width:901px){
  .nav-mobile{display:none}
}
@media (max-width:640px){
  .nav-mobile-inner{padding:4px 20px 28px}
}

/* ===== Scroll reveal ===== */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal-stagger>*{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal-stagger.in>*{opacity:1;transform:none}
.js .reveal-stagger.in>*:nth-child(2){transition-delay:.09s}
.js .reveal-stagger.in>*:nth-child(3){transition-delay:.18s}
.js .reveal-stagger.in>*:nth-child(4){transition-delay:.27s}

/* ===== Responsive spacing ===== */
@media (max-width:780px){
  section{padding:78px 0}
  .hero{padding:54px 0 60px}
  .ticker{margin-top:50px}
  .manifesto{padding:96px 0}
  .cta{padding:84px 0 96px}
  .section-head{margin-bottom:46px}
  .page-head-inner{padding:64px 24px 72px}
}
@media (max-width:520px){
  section{padding:60px 0}
  .manifesto{padding:74px 0}
  .cta{padding:66px 0 74px}
}

/* ===== Accessibility & motion ===== */
html{scroll-behavior:smooth}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.choice:focus-visible,.qty-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ticker-track{animation:none}
  .js .reveal,.js .reveal-stagger>*{opacity:1!important;transform:none!important}
}

/* ===== Compact brand on small screens (keeps the menu button reachable) ===== */
@media (max-width:560px){
  .nav-inner{height:66px}
  .brand-mark{height:46px;width:auto}
  .brand-name strong{font-size:15px}
  .brand-name small{font-size:8.5px;letter-spacing:.13em;margin-top:4px}
}
@media (max-width:360px){
  .brand-name small{display:none}
}

/* ===== Optics: platform picker ===== */
.platform-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:6px}
@media (max-width:760px){.platform-grid{grid-template-columns:1fr}}
.platform{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:repeating-linear-gradient(0deg,transparent 0 33px,rgba(34,204,214,.05) 33px 34px),repeating-linear-gradient(90deg,transparent 0 33px,rgba(34,204,214,.05) 33px 34px),var(--ink-2);border:1.5px solid var(--line-2);border-radius:0;padding:42px 38px 38px;min-height:440px;transition:border-color .25s,transform .25s,box-shadow .25s;overflow:hidden}
.platform:hover{border-color:var(--blue);transform:translateY(-5px);box-shadow:0 0 0 1px var(--blue),0 26px 56px rgba(0,0,0,.62),0 0 40px rgba(34,204,214,.26)}
.platform::before,.platform::after{content:"";position:absolute;width:30px;height:30px;pointer-events:none;z-index:3;transition:width .3s,height .3s,filter .3s}
.platform::before{top:14px;left:14px;border-top:2px solid var(--blue);border-left:2px solid var(--blue)}
.platform::after{bottom:14px;right:14px;border-bottom:2px solid var(--blue);border-right:2px solid var(--blue)}
.platform:hover::before,.platform:hover::after{width:42px;height:42px;filter:drop-shadow(0 0 7px var(--blue))}
.platform-scan{position:absolute;left:0;right:0;height:150px;top:-150px;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(34,204,214,.14) 46%,rgba(95,230,236,.42) 50%,rgba(34,204,214,.14) 54%,transparent);opacity:0}
.platform:hover .platform-scan{opacity:1;animation:platformScan 2.1s linear infinite}
@keyframes platformScan{0%{top:-150px}100%{top:100%}}
.platform-code{font-family:var(--type);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-3);position:relative;z-index:2;transition:color .25s}
.platform:hover .platform-code{color:var(--blue)}
.platform-sight{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:208px;margin:4px 0 0;z-index:2}
.platform-reticle{position:absolute;width:238px;height:238px;fill:none;stroke:var(--blue);stroke-width:1.4;opacity:.17;transition:opacity .3s}
.platform:hover .platform-reticle{opacity:.6}
.ret-ring{stroke-dasharray:3 13;transform-box:fill-box;transform-origin:center}
.platform:hover .ret-ring{animation:retSpin 17s linear infinite}
@keyframes retSpin{to{transform:rotate(360deg)}}
.ret-dot{fill:var(--blue);stroke:none;opacity:.35;transition:opacity .3s}
.platform:hover .ret-dot{opacity:1;animation:retDot 1.15s ease-in-out infinite}
@keyframes retDot{0%,100%{opacity:1}50%{opacity:.4}}
.platform-name{position:relative;z-index:2;font-family:var(--display);font-weight:400;font-size:clamp(54px,8vw,88px);letter-spacing:.02em;color:var(--gold);line-height:.95;text-shadow:0 3px 0 rgba(0,0,0,.5);transition:transform .3s,text-shadow .3s}
.platform:hover .platform-name{transform:scale(1.05);text-shadow:0 3px 0 rgba(0,0,0,.5),0 0 28px rgba(34,204,214,.6)}
.platform-tag{font-family:var(--type);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:14px 0 0;position:relative;z-index:2}
.platform-desc{color:#fff;font-size:15px;line-height:1.6;margin:12px 0 22px;max-width:354px;position:relative;z-index:2}
.platform-cta{margin-top:auto;font-family:var(--type);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:10px;position:relative;z-index:2;transition:gap .2s,color .2s}
.platform:hover .platform-cta{gap:16px;color:var(--blue-2)}

/* ===== Optics: cut option cards ===== */
.cut-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
@media (max-width:920px){.cut-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cut-grid{grid-template-columns:1fr}}
.cut-card{position:relative;background:var(--ink-2);border:1.5px solid var(--line-2);border-radius:0;padding:28px 24px 22px;display:flex;flex-direction:column;gap:9px;transition:border-color .22s,transform .22s,box-shadow .22s;overflow:hidden}
.cut-card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 0 0 1px var(--blue),0 14px 30px rgba(0,0,0,.55),0 0 22px rgba(34,204,214,.18)}
.cut-card::before{content:"";position:absolute;top:11px;left:11px;width:20px;height:20px;border-top:2px solid var(--blue);border-left:2px solid var(--blue);pointer-events:none;transition:width .25s,height .25s}
.cut-card:hover::before{width:26px;height:26px}
.cut-name{font-family:var(--type);font-size:18px;text-transform:uppercase;letter-spacing:.03em;color:var(--gold);line-height:1.25;margin-top:6px}
.cut-fit{font-size:13.5px;color:#fff;line-height:1.55;flex:1}
.cut-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:6px;padding-top:14px;border-top:1px dashed var(--line-2)}
.cut-price{font-family:var(--display);font-weight:400;font-size:25px;color:var(--bone);line-height:1}
.cut-price small{font-family:var(--type);font-size:9.5px;letter-spacing:.12em;color:var(--bone-3);display:block;margin-bottom:3px}
.cut-order{font-family:var(--type);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:inline-flex;gap:8px;align-items:center;transition:gap .2s,color .2s}
.cut-card:hover .cut-order{gap:12px;color:var(--blue-2)}

/* Back link */
.back-link{display:inline-flex;align-items:center;gap:9px;font-family:var(--type);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3);transition:color .2s;padding:8px 0;min-height:24px}
.back-link:hover{color:var(--blue)}
/* On mobile, bump the tap target to ≥44px and bump the font slightly so it's
   actually readable and tappable with a thumb. */
@media (max-width:640px){
  .back-link{font-size:12.5px;padding:14px 0;min-height:44px}
}
.cut-grid.two{grid-template-columns:repeat(2,1fr);max-width:780px}
/* Optional cut photo at top of card (admin-managed cuts) */
.cut-photo{width:calc(100% + 48px);margin:-28px -24px 8px;aspect-ratio:4/3;background:#000;border-bottom:1.5px solid var(--line-2);overflow:hidden}
.cut-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:560px){.cut-grid.two{grid-template-columns:1fr}}

/* ===== Start-a-project intake ===== */
.order-summary{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;background:var(--ink-2);border:1.5px solid var(--blue);padding:24px 28px;margin:6px 0 22px;box-shadow:0 0 0 1px var(--blue),0 0 26px rgba(34,204,214,.16)}
.os-label{font-family:var(--type);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.os-cut{font-family:var(--type);font-size:clamp(20px,3vw,27px);text-transform:uppercase;letter-spacing:.03em;color:var(--gold);line-height:1.2;margin-top:6px}
.os-plat{font-size:13px;color:#fff;margin-top:5px}
.os-price{font-family:var(--display);font-weight:400;font-size:48px;color:var(--bone);line-height:1;text-align:right}
.os-price small{display:block;font-family:var(--type);font-weight:400;font-size:9.5px;letter-spacing:.16em;color:var(--bone-3);text-transform:uppercase;margin-bottom:4px}
.proj-check{display:flex;align-items:flex-start;gap:13px;background:var(--ink-3);border:1.5px dashed var(--line-2);padding:16px 18px;cursor:pointer;margin-bottom:18px;transition:border-color .2s}
.proj-check:hover{border-color:var(--bone-3)}
.proj-check input{accent-color:var(--blue);width:18px;height:18px;flex:none;margin:1px 0 0;cursor:pointer}
.pc-label{font-size:14.5px;color:var(--bone);line-height:1.4}
.pc-sub{display:block;font-size:12.5px;color:var(--bone-3);margin-top:3px}

/* ===== Start-a-project checkout card (M-Lok Cross style) ===== */
.proj-card{position:relative;background:var(--ink-2);border:1.5px solid var(--bone);margin:34px 0 60px}
.proj-card::before,.proj-card::after{content:"";position:absolute;width:30px;height:30px;background:var(--ink);z-index:3}
.proj-card::before{top:-16px;left:-16px;transform:rotate(45deg);border-bottom:1.5px solid var(--bone);border-right:1.5px solid var(--bone)}
.proj-card::after{bottom:-16px;right:-16px;transform:rotate(45deg);border-top:1.5px solid var(--bone);border-left:1.5px solid var(--bone)}
.proj-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-bottom:1px dashed var(--line-2)}
@media (max-width:900px){.proj-hero{grid-template-columns:1fr}}
.proj-hero-text{padding:50px 48px 42px;position:relative}
@media (max-width:600px){.proj-hero-text{padding:38px 26px 32px}}
.proj-hero-script{font-family:var(--script);color:var(--blue-2);font-size:32px;transform:rotate(-3deg);display:inline-block;margin-bottom:4px}
.proj-cut{font-family:var(--display);font-weight:400;font-size:clamp(46px,6vw,68px);line-height:.95;letter-spacing:.005em;color:var(--bone);margin:6px 0 16px;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.proj-cut .gold{color:var(--gold)}
.proj-desc{color:#fff;line-height:1.6;max-width:480px;margin:0 0 28px;font-size:15px}
.proj-meta{display:flex;gap:32px;margin-top:8px;padding-top:24px;border-top:1px dashed var(--line-2);flex-wrap:wrap}
.proj-meta div{font-family:var(--type);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3)}
.proj-meta strong{display:block;font-family:var(--display);font-weight:400;font-size:18px;color:var(--bone);letter-spacing:.02em;margin-top:6px}
.proj-hero-img{position:relative;min-height:340px;background:var(--ink);overflow:hidden}
.proj-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.1) saturate(.85) grayscale(.08)}
.proj-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,9,8,.55));pointer-events:none}
.proj-cw{margin:28px 48px 0}
@media (max-width:600px){.proj-cw{margin:24px 24px 0}}
.proj-form-section{padding:34px 48px 22px}
@media (max-width:600px){.proj-form-section{padding:26px 24px 18px}}
.proj-form-section .eyebrow{margin-bottom:22px;display:inline-flex}
.proj-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:24px 48px 30px;border-top:1px dashed var(--line-2);background:linear-gradient(180deg,rgba(34,204,214,.06),rgba(34,204,214,.02))}
@media (max-width:600px){.proj-foot{padding:22px 24px 26px}}
.proj-total{display:flex;flex-direction:column;gap:2px}
.proj-total-label{font-family:var(--type);font-size:10.5px;letter-spacing:.22em;color:var(--bone-3)}
.proj-total-price{font-family:var(--display);font-weight:400;font-size:46px;color:var(--gold);line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.proj-total-note{font-family:var(--type);font-size:10px;letter-spacing:.16em;color:var(--bone-3);text-transform:uppercase;margin-top:4px}
.proj-reserve{padding:18px 32px;font-size:13.5px}
.proj-payment{margin-top:20px}
.proj-payment .eyebrow{margin-bottom:14px;display:inline-flex}
#card-container{width:100%;background:var(--ink-3);border:1.5px solid var(--line-2);border-radius:2px;padding:14px 16px;min-height:54px;transition:border-color .22s}
#card-container.is-focus{border-color:var(--blue)}
.proj-error{color:#ff8b6b;font-family:var(--type);font-size:11px;letter-spacing:.06em;margin-top:10px;min-height:14px}
.proj-trust{margin-top:12px;font-family:var(--type);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3)}
.field-tri{display:grid;grid-template-columns:1.6fr .6fr .8fr;gap:18px}
@media (max-width:600px){.field-tri{grid-template-columns:1fr}}

/* ===== Cart icon (nav) ===== */
.nav-cart{position:relative;color:var(--bone-2);display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;border:1.5px solid var(--line-2);border-radius:2px;transition:border-color .2s,color .2s;flex:none}
.nav-cart:hover{border-color:var(--bone);color:var(--bone)}
.nav-cart svg{display:block}
.nav-cart-badge{position:absolute;top:-7px;right:-9px;background:var(--blue);color:var(--ink);font-family:var(--type);font-size:10px;font-weight:600;min-width:20px;height:20px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;letter-spacing:0;line-height:1;box-shadow:0 0 0 2px var(--ink),0 0 12px rgba(34,204,214,.4)}
.nav-cart-badge.empty{display:none}

/* ===== Cart page ===== */
.cart-wrap{max-width:980px;margin:0 auto}
.cart-empty{text-align:center;padding:60px 20px}
.cart-empty h2{font-family:var(--display);font-weight:400;font-size:clamp(46px,7vw,72px);line-height:1;color:var(--bone);text-shadow:0 3px 0 rgba(0,0,0,.4);margin:0 0 12px}
.cart-empty p{color:#fff;font-size:15px;max-width:420px;margin:18px auto 28px;line-height:1.55}
.cart-list{margin-top:8px;border-top:1px dashed var(--line-2)}
.cart-line{display:grid;grid-template-columns:96px 1fr auto 150px 150px 42px;gap:24px;align-items:center;padding:28px 0;border-bottom:1px dashed var(--line-2)}
.cart-line-img{width:96px;height:96px;background:var(--ink-3);border:1.5px solid var(--line-2);border-radius:2px;overflow:hidden;flex:none}
.cart-line-img img{width:100%;height:100%;object-fit:cover;display:block}
.cart-line-img.empty{background:repeating-linear-gradient(135deg,var(--ink-3) 0 6px,var(--ink-2) 6px 12px)}

/* ===== Product builder (ANR-style two-column product page) ===== */
.product-builder{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;margin-top:14px}
@media (max-width:920px){.product-builder{grid-template-columns:1fr;gap:40px}}

.pb-left{padding:4px 0}
.pb-left .poster-script{font-family:var(--script);color:var(--blue-2);font-size:34px;display:inline-block;transform:rotate(-3deg);margin-bottom:4px}
.poster-script.poster-script-red{color:#ff5247;display:block;margin:14px 0 18px;transform:rotate(-2deg)}
.pb-title{font-family:var(--display);font-weight:400;font-size:clamp(58px,8.6vw,104px);letter-spacing:.005em;line-height:.92;margin:6px 0 0;color:var(--bone);text-shadow:0 4px 0 rgba(0,0,0,.45)}
.pb-title .gold{color:var(--gold)}
.pb-subtitle{font-family:var(--type);font-size:13px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;margin:20px 0 18px}
.pb-desc{color:#fff;font-size:15.5px;line-height:1.6;margin:0 0 28px;max-width:520px}

.pb-features{list-style:none;padding:22px 0;margin:0;border-top:1px dashed var(--line-2);border-bottom:1px dashed var(--line-2)}
.pb-features li{font-size:14.5px;color:#fff;line-height:1.55;padding:7px 0 7px 28px;position:relative}
.pb-features li::before{content:"✓";position:absolute;left:2px;color:var(--blue);font-weight:bold;font-size:14px;top:7px}
.pb-features li strong{color:var(--gold);font-weight:400;font-family:var(--type);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-right:8px}

.pb-section{margin:30px 0 0}
.pb-section-label{font-family:var(--type);font-size:11.5px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;display:inline-block;margin-bottom:14px}

/* Right column */
.pb-right{position:sticky;top:104px;display:flex;flex-direction:column}
@media (max-width:920px){.pb-right{position:static}}

.pb-image{aspect-ratio:1;background:#000;border:1.5px solid var(--line-2);border-radius:0;overflow:hidden;position:relative;margin-bottom:18px}
.pb-image img{width:100%;height:100%;object-fit:contain;display:block;filter:contrast(1.05) saturate(.92)}
.pb-image::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='turbulence' baseFrequency='0.03 0.6' numOctaves='2' seed='8'/><feColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.9 0 0 0 0 0.82 0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");mix-blend-mode:overlay;opacity:.5;pointer-events:none;z-index:2}
.pb-image::after{content:"";position:absolute;top:14px;left:14px;width:26px;height:26px;border-top:2px solid var(--gold);border-left:2px solid var(--gold);z-index:3;pointer-events:none}

.pb-ship{background:var(--ink-3);border-left:3px solid #4ade80;padding:14px 18px;margin-bottom:20px;display:flex;flex-direction:column;gap:4px}
.pb-ship strong{font-family:var(--type);font-size:12px;letter-spacing:.2em;color:#4ade80;text-transform:uppercase;font-weight:400}
.pb-ship span{font-size:13.5px;color:var(--bone-2)}

.pb-total{display:flex;justify-content:space-between;align-items:flex-end;padding:22px 0;border-top:1px dashed var(--line-2);border-bottom:1px dashed var(--line-2);margin-bottom:24px;gap:20px;flex-wrap:wrap}
.pb-total-label{font-family:var(--type);font-size:12.5px;letter-spacing:.22em;color:var(--bone-3);text-transform:uppercase;display:block}
.pb-total-price{font-family:var(--display);font-weight:400;font-size:64px;color:var(--gold);line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.4);margin-top:8px}
.pb-total-sub{font-family:var(--type);font-size:11px;letter-spacing:.16em;color:var(--bone-3);text-transform:uppercase;display:block;margin-top:8px}

.pb-add{width:100%;justify-content:center;padding:22px 28px;font-size:15.5px;letter-spacing:.18em}
.pb-fineprint{font-family:var(--type);font-size:10.5px;letter-spacing:.14em;color:var(--bone-3);text-transform:uppercase;margin:14px 0 0;line-height:1.6}
.variant-each{display:block;font-family:var(--type);font-size:10.5px;letter-spacing:.16em;color:var(--bone-3);text-transform:uppercase;margin-top:4px}
.variant-btn.active .variant-each{color:var(--gold);opacity:.85}
/* Per-tile stock chip — sits at the bottom of every variant button so the
   customer can see how many of each size/option are left at a glance. */
.variant-stock{display:inline-block;margin-top:8px;padding:3px 8px;border-radius:999px;font-family:var(--type);font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line-2);color:var(--bone-3);background:rgba(255,255,255,.02)}
.variant-stock.ok{color:#7be58f;border-color:rgba(123,229,143,.4);background:rgba(123,229,143,.06)}
.variant-stock.low{color:var(--gold);border-color:rgba(200,154,61,.5);background:rgba(200,154,61,.08)}
.variant-stock.out{color:#ff8a6b;border-color:rgba(255,139,107,.5);background:rgba(255,139,107,.08)}
.variant-stock.pre{color:var(--blue);border-color:rgba(34,204,214,.5);background:rgba(34,204,214,.08)}
/* Red accent word inside a product title — for model codes like "RR-M". */
.title-red{color:#ff5247;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.variant-btn.active .variant-stock{opacity:.95}

/* Personalization block on product page */
.pb-personalization{margin-top:18px}
.pb-personalization-item{padding:14px 16px;border:1.5px solid var(--line-2);border-radius:2px;margin-bottom:10px;background:rgba(34,204,214,.025);transition:border-color .15s,background .15s}
.pb-personalization-item.active{border-color:var(--gold);background:rgba(200,154,61,.06)}
.pb-personalization-item.disabled{opacity:.55}
.pb-personalization-row{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer}
.pb-personalization-row input[type="checkbox"]{width:20px;height:20px;accent-color:var(--gold);cursor:pointer;flex-shrink:0}
.pb-personalization-label{flex:1;font-family:var(--sans);font-size:14.5px;color:var(--bone);line-height:1.4}
.pb-personalization-label .req{font-family:var(--type);font-size:10px;letter-spacing:.16em;color:var(--bone-3);text-transform:uppercase;display:block;margin-top:2px}
.pb-personalization-price{font-family:var(--type);font-size:12px;letter-spacing:.14em;color:var(--gold);text-transform:uppercase;white-space:nowrap}
.pb-personalization-text{margin-top:12px;display:none}
.pb-personalization-item.active .pb-personalization-text{display:block}
.pb-personalization-text input{width:100%;background:var(--ink);border:1px solid var(--line-2);color:var(--bone);padding:10px 14px;font-family:var(--sans);font-size:14px;border-radius:2px}
.pb-personalization-text input:focus{outline:none;border-color:var(--gold)}
.pb-personalization-text .chars{margin-top:4px;font-family:var(--type);font-size:10px;letter-spacing:.14em;color:var(--bone-3);text-transform:uppercase;text-align:right}

/* ===== "Pairs well with" add-on tiles (multi-select on product page) ===== */
.addon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:8px}
.addon-tile{position:relative;background:transparent;border:1.5px solid var(--line-2);border-radius:2px;cursor:pointer;padding:14px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:border-color .2s,background .2s,transform .15s;color:inherit;font-family:inherit;text-align:center;outline:none}
.addon-tile:hover{border-color:var(--blue);transform:translateY(-1px)}
.addon-tile.selected{border-color:var(--gold);background:rgba(200,154,61,.08);box-shadow:inset 0 0 16px rgba(200,154,61,.12)}
.addon-tile.selected::after{content:"✓";position:absolute;top:8px;right:10px;color:var(--gold);font-size:14px;font-weight:bold}
.addon-tile-img{width:64px;height:64px;background:#000;border:1px solid var(--line-2);overflow:hidden;border-radius:2px;margin-bottom:10px;flex-shrink:0}
.addon-tile-img img{width:100%;height:100%;object-fit:cover;display:block}
.addon-tile-img.empty{background:repeating-linear-gradient(135deg,var(--ink-3) 0 6px,var(--ink-2) 6px 12px)}
.addon-tile-name{font-family:var(--display);font-weight:400;font-size:15px;color:var(--bone);letter-spacing:.01em;line-height:1.15;margin:0 0 6px}
.addon-tile-price{font-family:var(--type);font-size:11.5px;letter-spacing:.14em;color:var(--gold)}
.addon-tile.sold-out{opacity:.4;cursor:not-allowed}
.addon-tile.sold-out:hover{transform:none;border-color:var(--line-2)}

/* Grouped add-on tile — one tile per product with inline variant pills.
   Used when a product has singleTileAddon=true so apparel sizes don't blow
   out into N separate tiles. Tile itself is not clickable; pills are. */
.addon-tile-grouped{position:relative;background:transparent;border:1.5px solid var(--line-2);border-radius:2px;padding:14px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;grid-column:span 2}
.addon-tile-grouped .addon-tile-img{margin-bottom:10px}
.addon-tile-grouped .addon-tile-name{margin-bottom:10px}
.addon-pill-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.addon-pill{font-family:var(--type);font-size:11px;letter-spacing:.12em;color:var(--bone);background:transparent;border:1px solid var(--line-2);border-radius:2px;padding:6px 10px;cursor:pointer;text-transform:uppercase;transition:border-color .2s,background .2s}
.addon-pill:hover{border-color:var(--blue);color:var(--blue-2)}
.addon-pill.selected{border-color:var(--gold);background:rgba(200,154,61,.12);color:var(--gold)}
.addon-pill.sold-out{opacity:.4;cursor:not-allowed}
.addon-pill.sold-out:hover{border-color:var(--line-2);color:var(--bone)}

/* ===== "Pairs well with" — bigger featured cross-sell cards (full-width section) ===== */
.crosssell-section{padding:60px 0;border-top:1px dashed var(--line-2);margin-top:48px}
.crosssell-section .eyebrow{display:block;margin-bottom:6px}
.crosssell-section h3{font-family:var(--display);font-weight:400;font-size:clamp(36px,4.5vw,52px);line-height:1;letter-spacing:.005em;margin:14px 0 32px;text-shadow:0 3px 0 rgba(0,0,0,.4);color:var(--bone)}
.crosssell-section h3 .gold{color:var(--gold)}
.crosssell-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.crosssell-tile{position:relative;background:var(--ink-2);border:1.5px solid var(--line-2);border-radius:2px;overflow:hidden;cursor:pointer;text-align:center;transition:border-color .2s,transform .15s,box-shadow .2s;color:inherit;font-family:inherit;padding:0;display:flex;flex-direction:column;outline:none}
.crosssell-tile:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.5),0 0 18px rgba(34,204,214,.14)}
.crosssell-tile.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 14px 28px rgba(200,154,61,.18),inset 0 0 22px rgba(200,154,61,.08)}
.crosssell-tile.selected::before{content:"✓ ADDED";position:absolute;top:12px;right:12px;background:var(--gold);color:var(--ink);font-family:var(--type);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;border-radius:2px;z-index:3;font-weight:400}
.crosssell-tile-img{width:100%;aspect-ratio:1;background:#000;border-bottom:1.5px solid var(--line-2);position:relative;overflow:hidden}
.crosssell-tile-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.crosssell-tile:hover .crosssell-tile-img img{transform:scale(1.04)}
.crosssell-tile-img.empty{background:repeating-linear-gradient(135deg,var(--ink-3) 0 10px,var(--ink-2) 10px 20px);display:flex;align-items:center;justify-content:center;color:var(--bone-3);font-family:var(--type);font-size:10.5px;letter-spacing:.2em}
.crosssell-tile-img::after{content:"";position:absolute;top:10px;left:10px;width:18px;height:18px;border-top:2px solid var(--gold);border-left:2px solid var(--gold);z-index:2;opacity:.6}
.crosssell-tile-body{padding:18px 20px 20px;display:flex;flex-direction:column;align-items:center;flex:1}
.crosssell-tile-name{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.005em;color:var(--bone);margin:0 0 8px;line-height:1.15}
.crosssell-tile-price{font-family:var(--type);font-size:12px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;margin-bottom:14px}
.crosssell-tile-cta{margin-top:auto;font-family:var(--type);font-size:11px;letter-spacing:.22em;color:var(--blue-2);text-transform:uppercase;padding:10px 16px;border-top:1.5px solid var(--blue);background:rgba(34,204,214,.07);width:100%;text-align:center;box-shadow:inset 0 0 12px rgba(34,204,214,.14)}

/* Grouped cross-sell tile — single tile per product with inline pills.
   Same idea as .addon-tile-grouped but bigger / catalog scale. */
.crosssell-tile-grouped{position:relative;background:var(--ink-2);border:1.5px solid var(--line-2);border-radius:2px;overflow:hidden;text-align:center;color:inherit;padding:0;display:flex;flex-direction:column}
.crosssell-tile-grouped .crosssell-tile-img{aspect-ratio:1;width:100%;background:#000;border-bottom:1.5px solid var(--line-2)}
.crosssell-tile-grouped .crosssell-tile-img img{width:100%;height:100%;object-fit:cover;display:block}
.crosssell-tile-grouped .crosssell-tile-img.empty{background:repeating-linear-gradient(135deg,var(--ink-3) 0 10px,var(--ink-2) 10px 20px);display:flex;align-items:center;justify-content:center;color:var(--bone-3);font-family:var(--type);font-size:10.5px;letter-spacing:.2em}
.crosssell-tile-grouped .crosssell-tile-body{padding:18px 20px 22px;display:flex;flex-direction:column;align-items:center;flex:1}
.crosssell-pill-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.crosssell-pill{font-family:var(--type);font-size:12px;letter-spacing:.14em;color:var(--bone);background:transparent;border:1px solid var(--line-2);border-radius:2px;padding:8px 12px;cursor:pointer;text-transform:uppercase;transition:border-color .2s,background .2s}
.crosssell-pill:hover{border-color:var(--blue);color:var(--blue-2)}
.crosssell-pill.selected{border-color:var(--gold);background:rgba(200,154,61,.12);color:var(--gold)}
.crosssell-pill.sold-out{opacity:.4;cursor:not-allowed}
.crosssell-pill.sold-out:hover{border-color:var(--line-2);color:var(--bone)}
.crosssell-tile.selected .crosssell-tile-cta{color:var(--gold);border-top-color:var(--gold);background:rgba(200,154,61,.1);box-shadow:inset 0 0 14px rgba(200,154,61,.15)}
.crosssell-tile.sold-out{opacity:.45;cursor:not-allowed}
.crosssell-tile.sold-out:hover{transform:none;border-color:var(--line-2);box-shadow:none}

/* ===== Page-specific background textures (all subtle, all premium) =====
   Each pattern sits BEHIND the global grunge overlay (body::before z:60)
   and ABOVE the base --ink body color. Fixed attachment so they don't
   scroll with content — adds a sense of depth. */

/* Carbon-fiber weave — store landing */
body.page-store{
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.03) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,.03) 25%, transparent 25%),
    linear-gradient( 45deg, rgba(0,0,0,.20)     25%, transparent 25%),
    linear-gradient(315deg, rgba(0,0,0,.20)     25%, transparent 25%);
  background-position: 8px 0, 8px 0, 0 0, 0 0;
  background-size: 16px 16px;
  background-attachment: fixed;
}

/* Honeycomb dot mesh — product detail + category landing pages.
   Two offset radial-gradient grids combine into hex-spaced dots that read
   as a faint honeycomb when scanned. */
body.page-product, body.page-category{
  background-image:
    radial-gradient(circle at center, rgba(236,229,208,.05) 1px, transparent 1.4px),
    radial-gradient(circle at center, rgba(236,229,208,.05) 1px, transparent 1.4px);
  background-size: 32px 56px, 32px 56px;
  background-position: 0 0, 16px 28px;
  background-attachment: fixed;
}

/* Brushed grain — machining. Fine vertical hairlines suggesting tool marks. */
body.page-machining{
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0,
      transparent 3px,
      rgba(236,229,208,.02) 3px,
      rgba(236,229,208,.02) 4px);
  background-attachment: fixed;
}

/* Blueprint cross-hatch — design. Faint teal grid like drafting paper. */
body.page-design{
  background-image:
    linear-gradient(rgba(34,204,214,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,204,214,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  background-attachment: fixed;
}

/* Precision dot matrix — optics + cut-platform sub-pages. Tight reticle feel. */
body.page-optics{
  background-image:
    radial-gradient(circle at center, rgba(236,229,208,.045) 0.8px, transparent 1.2px);
  background-size: 14px 14px;
  background-attachment: fixed;
}

/* ===== Store landing — category tile stack (full-width banners) ===== */
.category-tiles{display:flex;flex-direction:column;gap:28px;margin-top:14px}
.cat-tile{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--ink-2);border:1.5px solid var(--line-2);border-radius:2px;text-decoration:none;color:inherit;transition:border-color .25s,transform .2s,box-shadow .25s}
.cat-tile:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 22px 44px rgba(0,0,0,.55),0 0 32px rgba(200,154,61,.18)}

/* Corner brackets — top-left teal, bottom-right teal · flip to gold on hover */
.cat-tile::before,.cat-tile::after{content:"";position:absolute;width:32px;height:32px;z-index:4;pointer-events:none;transition:border-color .25s,width .25s,height .25s}
.cat-tile::before{top:14px;left:14px;border-top:2.5px solid var(--blue);border-left:2.5px solid var(--blue)}
.cat-tile::after{bottom:14px;right:14px;border-bottom:2.5px solid var(--blue);border-right:2.5px solid var(--blue)}
.cat-tile:hover::before,.cat-tile:hover::after{border-color:var(--gold);width:40px;height:40px}

/* Wide banner image area — 25% shorter than the full-cinematic 21:9 */
.cat-tile-imgwrap{position:relative;aspect-ratio:28/9;background:#000;overflow:hidden}
.cat-tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .6s ease}
.cat-tile:hover .cat-tile-img{transform:scale(1.03)}
.cat-tile-empty{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#15130f 0 16px,#1c1a17 16px 32px);display:flex;align-items:center;justify-content:center;color:var(--bone-3);font-family:var(--type);font-size:12px;letter-spacing:.22em}

/* Footer band: bigger headline + tagline + Shop now CTA */
.cat-tile-footer{padding:22px 30px 24px;border-top:1px solid var(--line-2);background:var(--ink-2);display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:90px;position:relative}
.cat-tile-footer::after{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--gold);transition:width .4s ease}
.cat-tile:hover .cat-tile-footer::after{width:100%}
.cat-tile-footer-text{flex:1;min-width:0}
.cat-tile-name{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.4vw,42px);letter-spacing:.01em;color:var(--bone);margin:0 0 6px;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.cat-tile:hover .cat-tile-name{color:var(--gold)}
.cat-tile-tagline{font-family:var(--type);font-size:13px;letter-spacing:.16em;color:var(--bone-3);text-transform:uppercase;margin:0;line-height:1.5}
.cat-tile-cta{font-family:var(--type);font-size:11.5px;letter-spacing:.2em;color:var(--blue-2);text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:11px 18px;border:1.5px solid var(--blue);border-radius:2px;transition:background .2s,color .2s,border-color .2s,transform .2s}
.cat-tile:hover .cat-tile-cta{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:translateX(4px)}
.cat-tile-arrow{font-size:15px;line-height:1;transition:transform .2s}
.cat-tile:hover .cat-tile-arrow{transform:translateX(2px)}

@media (max-width:760px){
  .cat-tile-imgwrap{aspect-ratio:4/3}
  .cat-tile-footer{flex-direction:column;align-items:flex-start;min-height:0;padding:22px 22px 24px;gap:14px}
  .cat-tile-name{font-size:30px}
  .cat-tile-cta{align-self:stretch;justify-content:center}
}

/* ===== Category landing — hero with image on the LEFT ===== */
.category-hero{display:flex;align-items:flex-start;gap:36px;margin-bottom:56px}
/* Text-only variant — title spans full width, no photo column. */
.category-hero.category-hero-text{gap:0;margin-bottom:36px}
.category-hero.category-hero-text .category-hero-body{max-width:880px}
.category-hero-img{flex:0 0 320px;aspect-ratio:1;background:#000;border:1.5px solid var(--line-2);position:relative;overflow:hidden;padding:14px}
.category-hero-img img{width:100%;height:100%;object-fit:contain;display:block}
.category-hero-img::before{content:"";position:absolute;top:10px;left:10px;width:22px;height:22px;border-top:2px solid var(--gold);border-left:2px solid var(--gold);z-index:2;pointer-events:none}
.category-hero-img.empty{display:flex;align-items:center;justify-content:center;color:var(--bone-3);font-family:var(--type);font-size:11px;letter-spacing:.22em;text-transform:uppercase;background:repeating-linear-gradient(135deg,#15130f 0 12px,#1c1a17 12px 24px)}
.category-hero-body{flex:1;min-width:0}
.category-hero-tagline{font-family:var(--type);font-size:12px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;margin:0 0 14px}
.category-hero-title{font-family:var(--display);font-weight:400;font-size:clamp(54px,7.5vw,84px);letter-spacing:.005em;line-height:.92;margin:0 0 20px;color:var(--bone);text-shadow:0 4px 0 rgba(0,0,0,.45)}
.category-hero-title .gold{color:var(--gold)}
.category-hero-desc{color:#fff;font-size:15.5px;line-height:1.6;margin:0 0 22px;max-width:560px}
.category-hero-count{font-family:var(--type);font-size:11px;letter-spacing:.22em;color:var(--bone-3);text-transform:uppercase;margin:0}
@media (max-width:780px){
  .category-hero{flex-direction:column;gap:24px}
  .category-hero-img{flex:0 0 auto;width:min(280px,70%)}
}

/* ===== Category-page product cards (polished ANR-style with teal CTA) ===== */
.cat-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.cat-product-card{position:relative;background:var(--ink-2);border:1.5px solid var(--line-2);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .15s,box-shadow .2s}
.cat-product-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 18px rgba(34,204,214,.14)}
.cat-product-card .cp-img{aspect-ratio:1;background:#000;border-bottom:1.5px solid var(--line-2);position:relative;display:block}
.cat-product-card .cp-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.cat-product-card:hover .cp-img img{transform:scale(1.03)}
.cat-product-card .cp-img.empty{display:flex;align-items:center;justify-content:center;color:var(--bone-3);font-family:var(--type);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;background:repeating-linear-gradient(135deg,var(--ink-3) 0 8px,var(--ink-2) 8px 16px)}
.cat-product-card .cp-img::before{content:"";position:absolute;top:8px;left:8px;width:16px;height:16px;border-top:2px solid var(--gold);border-left:2px solid var(--gold);z-index:2;pointer-events:none;opacity:.7}
.cat-product-card .cp-body{padding:22px 22px 18px;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.cat-product-card .cp-name{font-family:var(--display);font-weight:400;font-size:24px;color:var(--bone);letter-spacing:.01em;margin:0 0 8px;line-height:1.15}
.cat-product-card .cp-name a{color:inherit;text-decoration:none}
.cat-product-card .cp-name a:hover{color:var(--blue-2)}
.cat-product-card .cp-price{font-family:var(--display);font-size:30px;color:var(--gold);letter-spacing:.005em;margin:6px 0 14px;line-height:1}
.cat-product-card .cp-stock{font-family:var(--type);font-size:10px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin:0 0 14px}
.cat-product-card .cp-stock.out{color:#ff8b6b}
.cat-product-card .cp-cta{display:block;width:100%;background:rgba(34,204,214,.07);color:var(--blue-2);border:none;border-top:1.5px solid var(--blue);padding:18px 16px;font-family:var(--type);font-size:12px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;text-decoration:none;text-align:center;transition:background .2s,color .2s,text-shadow .2s;box-shadow:inset 0 0 14px rgba(34,204,214,.18);margin-top:auto;font-weight:400}
.cat-product-card .cp-cta:hover{background:rgba(34,204,214,.18);color:#fff;text-shadow:0 0 8px rgba(95,230,236,.7)}
.cat-product-card .cp-cta:disabled,.cat-product-card .cp-cta.out{opacity:.45;cursor:not-allowed;border-top-color:rgba(255,139,107,.4);color:#ff8b6b;background:rgba(255,139,107,.05);box-shadow:none;text-shadow:none}

/* Photo gallery thumbnails (product detail page) */
.pb-thumbs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.pb-thumb{width:64px;height:64px;background:var(--ink-3);border:1.5px solid var(--line-2);cursor:pointer;overflow:hidden;border-radius:2px;padding:0;transition:border-color .15s,transform .15s}
.pb-thumb img{width:100%;height:100%;object-fit:cover}
.pb-thumb:hover{border-color:var(--blue);transform:translateY(-1px)}
.pb-thumb.active{border-color:var(--gold)}
.pb-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--type);font-size:11px;letter-spacing:.18em;color:var(--bone-3);text-transform:uppercase;margin-bottom:24px;text-decoration:none;transition:color .15s;padding:8px 0;min-height:24px}
.pb-back:hover{color:var(--blue)}
@media (max-width:640px){
  .pb-back{font-size:12.5px;padding:14px 0;min-height:44px;margin-bottom:16px}
}
.pb-empty{padding:80px 24px;text-align:center;color:var(--bone-3)}
.pb-empty h2{font-family:var(--display);font-size:48px;color:var(--gold);margin:0 0 12px;letter-spacing:.005em}
.pb-stock-line{font-family:var(--type);font-size:14.5px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;margin:0}
.pb-stock-line.out{color:#ff8b6b}
.pb-sold-out{opacity:.5;cursor:not-allowed}
.product-link-name{color:inherit;text-decoration:none}
.product-link-name:hover{color:var(--blue)}
.product-img-link{display:block}

/* ===== Variant grid (multi-option picker for Charge RR-M etc.) ===== */
.variant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.variant-btn{background:transparent;border:1.5px solid var(--line-2);color:var(--bone);font-family:var(--type);text-transform:uppercase;letter-spacing:.12em;padding:14px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .2s,background .2s,transform .15s;border-radius:2px;text-align:center}
.variant-btn strong{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.01em;color:var(--bone)}
.variant-btn span{font-size:13px;letter-spacing:.16em;color:var(--bone-3)}
.variant-btn:hover{border-color:var(--blue);background:rgba(34,204,214,.05);transform:translateY(-1px)}
.variant-btn.active{border-color:var(--gold);background:rgba(200,154,61,.08)}
.variant-btn.active strong{color:var(--gold)}
.variant-btn.active span{color:var(--bone)}

/* Parts grid Add to Cart buttons */
.product .product-add{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1.5px solid var(--line-2);color:var(--bone);font-family:var(--type);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:8px 12px;cursor:pointer;border-radius:2px;transition:border-color .2s,color .2s;margin-left:auto}
.product .product-add:hover{border-color:var(--blue);color:var(--blue)}
.product .product-add:disabled{opacity:.45;cursor:not-allowed}
.product .product-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Admin-product variant selector */
.admin-variant-select{width:100%;background:var(--ink-3);color:var(--bone);border:1.5px solid var(--line-2);border-radius:2px;padding:9px 12px;font-family:var(--sans);font-size:13px;margin-bottom:12px;cursor:pointer;outline:none;transition:border-color .15s;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 6 5-6' stroke='%23c89a3d' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.admin-variant-select:focus{border-color:var(--blue)}
.admin-variant-select option{background:var(--ink-3);color:var(--bone)}
@media (max-width:720px){
  .cart-line{grid-template-columns:80px 1fr;grid-auto-rows:auto;gap:10px 16px;align-items:start;padding:24px 0;position:relative}
  .cart-line-img{width:80px;height:80px;grid-column:1;grid-row:1 / span 4}
  .cart-line-info{grid-column:2;grid-row:1}
  .cart-line-price{grid-column:2;grid-row:2;justify-self:start;text-align:left}
  .cart-line-qty{grid-column:2;grid-row:3}
  .cart-line-total{grid-column:2;grid-row:4;justify-self:start;text-align:left}
  .cart-line-remove{position:absolute;top:20px;right:0}
}
.cart-line-info h3{font-family:var(--type);font-weight:400;font-size:24px;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);margin:0 0 10px;line-height:1.25}
.cart-line-opt{font-size:18px;color:#fff;line-height:1.45;display:block;margin:5px 0}
.cart-line-sku{font-family:var(--type);font-size:13px;letter-spacing:.18em;color:var(--bone-3);text-transform:uppercase;display:block;margin-top:12px}
.cart-line-price{font-family:var(--display);font-size:34px;color:var(--bone);line-height:1;text-align:right;justify-self:end}
.qty-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line-2);border-radius:2px;overflow:hidden}
.qty-stepper button{width:42px;height:42px;background:transparent;border:none;color:var(--bone);font-size:24px;cursor:pointer;font-family:var(--display);font-weight:400;line-height:1}
.qty-stepper button:hover{background:var(--ink-3);color:var(--blue)}
.qty-stepper input{width:60px;height:42px;background:var(--ink-3);border:none;color:var(--bone);text-align:center;font-family:var(--sans);font-size:20px;outline:none;border-left:1px solid var(--line-2);border-right:1px solid var(--line-2)}
.cart-line-total{font-family:var(--display);font-size:34px;color:var(--gold);line-height:1;text-align:right;justify-self:end}
.cart-line-remove{background:transparent;border:none;color:var(--bone-3);cursor:pointer;font-size:28px;line-height:1;padding:6px;border-radius:2px;transition:color .2s}
.cart-line-remove:hover{color:#ff8b6b}
.cart-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1.5px solid var(--bone)}
.cart-sub-label{font-family:var(--type);font-size:14px;letter-spacing:.22em;color:var(--bone-3)}
.cart-sub-total{font-family:var(--display);font-weight:400;font-size:80px;color:var(--gold);line-height:1;margin-top:8px;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.cart-sub-note{font-family:var(--type);font-size:13px;letter-spacing:.16em;color:var(--bone-3);text-transform:uppercase;margin-top:12px}
.cart-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ===== Promo code panel on cart ===== */
.cart-coupon{margin-top:32px;padding:20px 22px;border:1px dashed var(--line-2);border-radius:4px;background:rgba(255,255,255,.015)}
.cart-coupon .cc-row{display:flex;gap:10px;align-items:stretch}
.cart-coupon #ccInput{flex:1;background:var(--ink-2);border:1.5px solid var(--line-2);color:var(--bone);font-family:var(--display);font-size:18px;letter-spacing:.06em;padding:14px 16px;min-height:48px;border-radius:2px;outline:none;transition:border-color .15s}
.cart-coupon #ccInput:focus{border-color:var(--blue)}
.cart-coupon .cc-row .btn{padding:0 26px;white-space:nowrap}
.cart-coupon .cc-applied{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.cart-coupon .cc-applied-label{font-family:var(--type);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#7be58f}
.cart-coupon .cc-applied-label strong{color:var(--gold);letter-spacing:.04em}
.cart-coupon .cc-remove{background:none;border:none;color:var(--bone-3);font-size:24px;line-height:1;cursor:pointer;padding:6px 10px;transition:color .15s}
.cart-coupon .cc-remove:hover{color:#ff8a6b}
.cart-coupon .cc-msg{margin-top:10px;font-family:var(--type);font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:14px}
.cart-coupon .cc-msg.is-err{color:#ff8a6b}
.cart-coupon .cc-msg.is-ok{color:#7be58f}

/* Cart totals stack — subtotal, discount, total */
.cart-totals{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.cart-totals-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--type);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3)}
.cart-totals-row span:last-child{font-family:var(--sans);font-size:20px;color:var(--bone);letter-spacing:0}
.cart-totals-discount{color:var(--blue)}
.cart-totals-discount span:last-child{color:var(--blue)}
.cart-totals-shipping{color:var(--blue)}
.cart-totals-shipping span:last-child{color:var(--blue)}
.cart-totals-grand{padding-top:10px;border-top:1px solid var(--line-2);margin-top:6px;font-size:14px;letter-spacing:.22em}
.cart-totals-grand span:last-child{font-family:var(--display);font-size:64px;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.4)}

/* ===== Cart toast ===== */
.cart-toast{position:fixed;bottom:24px;right:24px;background:var(--ink-2);border:1.5px solid var(--blue);padding:16px 22px;display:flex;gap:14px;align-items:center;z-index:200;font-family:var(--type);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);transform:translateY(20px);opacity:0;transition:transform .3s,opacity .3s;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 22px rgba(34,204,214,.25);max-width:calc(100% - 48px)}
.cart-toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
.cart-toast .toast-msg{color:var(--gold)}
.cart-toast a{color:var(--blue);text-decoration:none}
.cart-toast a:hover{color:var(--blue-2)}

/* ===== Out-of-stock variant button — clickable, opens pre-order modal =====
   Looks visually distinct from in-stock (slightly faded, dashed border) but
   still feels tappable — cursor:pointer, hover lift. Removes the harsh
   "disabled" feel without changing the variant grid layout. */
.variant-btn.is-out-clickable{
  cursor:pointer;
  opacity:.72;
  border-style:dashed;
  position:relative;
}
.variant-btn.is-out-clickable:hover{
  opacity:1;
  border-color:var(--blue);
  transform:translateY(-1px);
}
.variant-btn.is-out-clickable::after{
  content:"Tap to pre-order";
  position:absolute;bottom:-10px;left:50%;
  transform:translateX(-50%);
  font-family:var(--type);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue-2);
  background:var(--ink-2);padding:2px 8px;border-radius:2px;
  opacity:0;transition:opacity .2s;
  white-space:nowrap;pointer-events:none;
}
.variant-btn.is-out-clickable:hover::after{opacity:1}

/* ===== Pre-order modal ===== */
.po-modal{
  position:fixed;inset:0;z-index:200;
  background:rgba(5,4,3,.78);
  align-items:center;justify-content:center;
  padding:24px;
  opacity:0;transition:opacity .22s ease;
  backdrop-filter:blur(4px);
}
.po-modal.show{opacity:1}
.po-modal-inner{
  background:var(--ink-2);
  border:1.5px solid var(--gold);
  border-radius:2px;
  padding:42px 38px 36px;
  max-width:520px;width:100%;
  box-shadow:0 30px 60px rgba(0,0,0,.7),0 0 0 1px rgba(200,154,61,.12);
  position:relative;
}
.po-modal-eyebrow{
  font-family:var(--type);font-size:11px;letter-spacing:.26em;
  color:var(--gold);text-transform:uppercase;
  margin-bottom:14px;text-align:center;
}
.po-modal-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,4.6vw,52px);
  line-height:.94;letter-spacing:.005em;
  color:var(--bone);margin:0 0 22px;
  text-align:center;text-transform:uppercase;
  text-shadow:0 3px 0 rgba(0,0,0,.5);
}
.po-modal-title .gold{color:var(--gold)}
/* Script perk — celebrates the unlocked discount. Caveat Brush blue,
   slightly rotated for that handwritten "stamped on the receipt" feel. */
.po-modal-perk{
  font-family:var(--script);
  color:var(--blue-2);
  font-size:clamp(28px,3.4vw,40px);
  line-height:.98;
  text-align:center;
  margin:0 0 22px;
  transform:rotate(-2.5deg);
  text-shadow:0 2px 0 rgba(0,0,0,.45);
}
.po-modal-product{
  background:var(--ink-3);border:1px solid var(--line-2);
  border-radius:2px;padding:14px 18px;margin:0 0 18px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.po-mod-name{
  font-family:var(--display);font-weight:700;
  font-size:18px;letter-spacing:.005em;color:var(--bone);
  text-transform:uppercase;flex:1;line-height:1.2;
}
.po-mod-prices{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--type);letter-spacing:.14em;text-transform:uppercase;
}
.po-mod-was{
  font-size:12.5px;color:var(--bone-3);text-decoration:line-through;
}
.po-mod-now{
  font-size:15px;color:var(--gold);font-weight:400;
}
.po-modal-blurb{
  font-family:var(--sans);font-size:14.5px;line-height:1.55;
  color:var(--bone-2);margin:0 0 22px;
}
.po-modal-blurb strong{color:var(--bone);font-weight:600}
.po-modal-actions{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
}
.po-modal-actions .btn{flex:1;min-width:150px;justify-content:center}

/* Confirm vs decline — used in pre-order modal and cross-sell info modal.
   Confirm = positive action on the right (green). Decline = negative/secondary
   on the left (pale red). Matches the user expectation in the screenshots. */
.po-btn-confirm{
  background:#3d9e5f;color:#04341c;
  border:1.5px solid #3d9e5f;
  font-family:var(--type);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:400;padding:15px 26px;border-radius:2px;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.po-btn-confirm:hover{
  background:#4cb070;border-color:#4cb070;
  transform:translateY(-2px);
  box-shadow:0 6px 0 rgba(0,0,0,.5),0 0 20px rgba(61,158,95,.35);
}
.po-btn-decline{
  background:rgba(220,90,90,.12);color:#dc5a5a;
  border:1.5px solid rgba(220,90,90,.6);
  font-family:var(--type);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:400;padding:15px 26px;border-radius:2px;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.po-btn-decline:hover{
  background:rgba(220,90,90,.22);
  border-color:#dc5a5a;
  transform:translateY(-2px);
}
@media (max-width:520px){
  .po-modal-inner{padding:32px 24px 28px}
  .po-modal-title{font-size:30px}
}

/* ===== Featured campaign — admin-managed "limited drop" banner =====
   v55 rebuild: dramatic enough to drive conversion. Layered tactical background
   (diagonal stripes + dot grid + huge gold radial glow), oversized CTA with
   thick tactile shadow, animated scope reticle, beefier corner brackets, bigger
   product photo with strong gold underglow. Layout shifted to 1.2fr 1fr so the
   title gets enough room to breathe. */
.featured-campaign{
  display:block;position:relative;padding:96px 0 88px;
  background:#070605;color:inherit;text-decoration:none;
  overflow:hidden;
  border-top:1px solid rgba(200,154,61,.32);
  border-bottom:1px solid rgba(200,154,61,.32);
  box-shadow:inset 0 0 80px rgba(0,0,0,.6);
}
/* Layer 1: diagonal tactical stripes — caution-tape / military adjacent */
.featured-campaign::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0,transparent 80px,
      rgba(200,154,61,.025) 80px,rgba(200,154,61,.025) 82px),
    radial-gradient(circle,rgba(236,229,208,.08) 1.6px,transparent 1.6px);
  background-size:auto, 24px 24px;
  pointer-events:none;z-index:0;
}
/* Layer 2: HUGE gold radial glow centered on the product side */
.featured-campaign::after{
  content:"";position:absolute;top:50%;right:5%;
  width:780px;height:780px;
  background:radial-gradient(circle,rgba(200,154,61,.32),rgba(200,154,61,.12) 35%,transparent 70%);
  transform:translateY(-50%);
  pointer-events:none;filter:blur(20px);z-index:0;
}
.featured-campaign-wrap{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.15fr 1fr;
  gap:60px;align-items:center;
}
.featured-campaign-text{display:flex;flex-direction:column;gap:20px}
.fc-tag{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--type);font-size:13.5px;letter-spacing:.3em;
  color:var(--gold);text-transform:uppercase;
  border:2px solid var(--gold);padding:11px 22px;
  border-radius:2px;align-self:flex-start;background:rgba(200,154,61,.08);
  box-shadow:0 0 20px rgba(200,154,61,.18),inset 0 0 12px rgba(200,154,61,.06);
}
.fc-tag::before{content:"⬢";font-size:11px;color:var(--gold)}
.fc-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(44px,6vw,88px);
  line-height:.9;letter-spacing:.005em;
  margin:8px 0 4px;color:var(--bone);
  text-transform:uppercase;
  text-shadow:0 4px 0 rgba(0,0,0,.65),0 0 24px rgba(200,154,61,.15);
}
.fc-red{
  /* Accent color only — same font family as the rest of the headline so the
     word reads as part of the title, not a separate stamp. Subtle drop shadow,
     no neon glow. */
  color:#d23b3b;
  text-shadow:0 4px 0 rgba(0,0,0,.55);
}
.fc-sub{
  font-family:var(--sans);font-size:18px;line-height:1.55;
  color:var(--bone-2);margin:8px 0 24px;max-width:540px;
  font-weight:400;
  /* Preserve newlines from the admin's subtitle textarea so multi-line
     spec sheets render as separate lines instead of one wall of text. */
  white-space:pre-line;
}
/* Script tagline — handwritten Caveat Brush callout above the headline.
   Optional admin field for adding a flavor line like "Stay flat" that
   matches the hero's handwritten accent voice. */
.fc-script{
  display:inline-block;
  font-family:var(--script);font-size:clamp(30px,3.6vw,52px);
  color:var(--blue-2);
  transform:rotate(-2deg) translateX(-2px);
  margin:-4px 0 -6px;line-height:.9;
}

/* Spotlight badge — pulses with a warm red/orange glow to signal urgency.
   Sits in the eyebrow slot above the headline, replacing the FIRST RUN tag.
   Used to be top-right absolute; now inline-flex at the top of the text column. */
.fc-spotlight{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--type);font-size:11.5px;letter-spacing:.22em;
  color:#ff7644;text-transform:uppercase;font-weight:400;
  background:rgba(255,118,68,.1);
  border:1.5px solid #ff7644;
  padding:9px 16px;border-radius:2px;
  box-shadow:0 0 22px rgba(255,118,68,.45),inset 0 0 12px rgba(255,118,68,.1);
  animation:spotlightPulse 1.8s ease-in-out infinite;
  white-space:nowrap;
  margin-bottom:8px;
}
/* Old admin-managed FIRST RUN tag — superseded by the spotlight badge.
   Hidden so we don't double-stack two eyebrows. The admin can still set
   tagText, but it won't render unless we re-enable this rule. */
.fc-tag{display:none !important}
.fc-spotlight-icon{
  font-size:14px;line-height:1;
  filter:drop-shadow(0 0 6px rgba(255,118,68,.7));
  animation:flameFlicker 0.8s ease-in-out infinite;
}
.fc-spotlight-text{transform:translateY(0.5px)}
@keyframes spotlightPulse{
  0%,100%{box-shadow:0 0 22px rgba(255,118,68,.45),inset 0 0 12px rgba(255,118,68,.1)}
  50%{box-shadow:0 0 38px rgba(255,118,68,.85),inset 0 0 18px rgba(255,118,68,.18)}
}
@keyframes flameFlicker{
  0%,100%{transform:scale(1) rotate(-1deg)}
  50%{transform:scale(1.12) rotate(2deg)}
}
@media (prefers-reduced-motion: reduce){
  .fc-spotlight,.fc-spotlight-icon{animation:none}
}
@media (max-width:760px){
  .fc-spotlight{
    position:static;
    margin:0 auto 18px;
    align-self:center;
    font-size:11px;letter-spacing:.2em;
  }
}
.fc-cta{
  display:inline-flex;align-items:center;gap:18px;
  align-self:flex-start;
  font-family:var(--type);font-size:16px;letter-spacing:.26em;
  color:var(--ink);background:var(--gold);
  padding:26px 44px;border-radius:2px;
  text-transform:uppercase;font-weight:400;
  transition:background .2s,transform .2s,box-shadow .2s;
  box-shadow:
    0 8px 0 rgba(0,0,0,.65),
    0 0 0 0 rgba(200,154,61,0),
    0 0 24px rgba(200,154,61,.25);
  text-shadow:0 1px 0 rgba(255,255,255,.2);
}
.featured-campaign:hover .fc-cta{
  background:var(--gold-2);
  transform:translateY(-4px);
  box-shadow:
    0 12px 0 rgba(0,0,0,.7),
    0 0 48px rgba(200,154,61,.6),
    0 0 64px rgba(200,154,61,.3);
}
.fc-arrow{transition:transform .2s;font-family:var(--sans);font-size:22px;letter-spacing:0;font-weight:700}
.featured-campaign:hover .fc-arrow{transform:translateX(8px)}

/* Photo frame — reticle ring + corner brackets + dramatic shadow.
   Container is square via aspect-ratio:1, so inset-based positioning on the
   pseudo-element keeps the reticle perfectly centered AND perfectly circular
   (since width and height of the inset box are equal). */
.featured-campaign-photo{
  position:relative;
  aspect-ratio:1;
  padding:40px;
}
/* Dashed circular target ring — perfectly centered, perfectly round.
   inset:8% means 8% margin on every side, so width = height = 84% of container.
   Container is square, so the inset box is square, so border-radius:50% is a circle. */
.featured-campaign-photo::before{
  content:"";position:absolute;
  inset:8%;
  border-radius:50%;
  border:2.5px dashed rgba(34,204,214,.55);
  pointer-events:none;
  animation:reticleSpin 60s linear infinite;
  box-shadow:0 0 22px rgba(34,204,214,.16) inset;
}
/* Top-left bracket — teal */
.featured-campaign-photo::after{
  content:"";position:absolute;
  top:0;left:0;width:60px;height:60px;
  border-top:4px solid var(--blue);
  border-left:4px solid var(--blue);
  pointer-events:none;
}
/* Bottom-right bracket — teal */
.fc-photo-corner-br{
  position:absolute;bottom:0;right:0;width:60px;height:60px;
  border-bottom:4px solid var(--blue);
  border-right:4px solid var(--blue);
  pointer-events:none;
}
.featured-campaign-photo img{
  position:relative;z-index:2;
  width:100%;height:100%;object-fit:contain;display:block;
  filter:
    drop-shadow(0 32px 40px rgba(0,0,0,.7))
    drop-shadow(0 0 32px rgba(200,154,61,.22))
    drop-shadow(0 0 64px rgba(200,154,61,.12));
  transition:transform .35s ease;
}
.featured-campaign:hover .featured-campaign-photo img{
  transform:scale(1.03);
}
@keyframes reticleSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .featured-campaign-photo::before{animation:none}
}
@media (max-width:760px){
  .featured-campaign{padding:64px 0 56px}
  .featured-campaign-wrap{grid-template-columns:1fr;gap:36px}
  .fc-sub{font-size:16px}
  .fc-cta{padding:20px 32px;font-size:14px}
  .featured-campaign::after{width:480px;height:480px;right:-15%}
}

/* ===== Sitewide display rendering — MUST stay at end of file =====
   All display selectors render in ALL CAPS because Big Shoulders Display reads at its
   best as condensed industrial caps. Letter-spacing slightly opened so caps breathe. */
.hero h1,
.ph-title, .ph-num,
.section-head h2,
.svc-num, .svc h3,
.step-num, .step h4,
.cap-list h4,
.poster h3,
.drop-meta strong,
.manifesto h2,
.cta h2,
.contact-card h3,
.wizard-q,
.result-rec h4,
.result-meta strong,
.wizard-success h3,
.qty-btn,
.checkout-card h3,
.platform-name,
.proj-cut,
.proj-meta strong,
.cart-empty h2,
.crosssell-section h3,
.cat-tile-name,
.category-hero-title,
.variant-btn strong,
.brand-name strong,
.mm-title,
.pb-title{
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* ===== Catalog voice — product names everywhere render in DM Serif Display =====
   Mixed case (no uppercase transform), no extra tracking. Reads like a premium product
   catalog. Applies to product detail page, category cards, cross-sell tiles, generic
   product names, addon tiles. */
.pb-title,
.cat-product-card .cp-name,
.crosssell-tile-name,
.product-name,
.addon-tile-name{
  font-family: var(--catalog);
  text-transform: none;
  letter-spacing: 0;
}

/* ===== Vintage voice — Manual Machining page hero =====
   Bowlby One. Vintage factory-floor signage / shop sign painted on brick. */
.mm-title{
  font-family: var(--vintage);
}

/* ===== Hero single-CTA: one big button replacing the twin Start/Explore pair.
   Stretches to the natural width of the hero copy column so it reads as the
   primary action. Slight uppercase + thicker outline so it carries the visual
   weight of two buttons. ===== */
.hero-actions-single{display:block}
.hero-actions-single .btn-hero-wide{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:min(100%, 460px);
  padding:22px 36px;
  font-size:clamp(15px, 1.7vw, 19px);
  font-weight:700;
  letter-spacing:.14em;
  border-width:2px;
}
@media (max-width:640px){
  .hero-actions-single .btn-hero-wide{
    width:100%;
    padding:20px 24px;
    font-size:15px;
  }
}