/* CTF Photonics — storefront
   Extracted from the inline <style> blocks of index.html, in document order.
   The order is the cascade — do not reorder these sections. */

/* ==========================================================================
   01. block-1
   ========================================================================== */
  :root{
    --void:#EAEEF3; --paper:#FFFFFF; --panel:#FFFFFF; --panel-2:#F5F8FC; --wash:#F3F6FA;
    --steel:#B7C2CE; --line:#D6DEE7; --line-soft:#E7ECF2;
    --navy:#0E2A47; --blue:#1566C8; --blue-dim:#8FB2E0; --blue-glow:rgba(21,102,200,.08);
    --green:#12A06A; --green-dim:#0E8A5B;
    --ink:#111E2B; --slate:#54637A; --faint:#8896A6;
    --shadow:0 1px 2px rgba(16,42,74,.05), 0 14px 40px rgba(16,42,74,.08);
    --shadow-soft:0 1px 2px rgba(16,42,74,.04), 0 8px 24px rgba(16,42,74,.06);
    --disp:'Chakra Petch', system-ui, sans-serif; --body:'Inter', system-ui, sans-serif; --mono:'Space Mono', ui-monospace, monospace;
    --maxw:1300px;
  }
  *{box-sizing:border-box} html,body{margin:0}
  body{background:linear-gradient(180deg,#EEF2F6 0%,var(--void) 100%); color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased; line-height:1.55}
  a{color:inherit; text-decoration:none}
  ::selection{background:var(--blue); color:#fff}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--blue)}

  /* bar */
  .bar{position:sticky; top:0; z-index:40; box-shadow:0 1px 0 var(--line)}
  .bar__util{background:var(--navy); color:#B7C8DC}
  .bar__util .in{max-width:var(--maxw); margin:0 auto; padding:7px 24px; display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase}
  .bar__util .in span:last-child{color:#6E86A6}
  .bar__main{background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
  .bar__in{max-width:var(--maxw); margin:0 auto; padding:15px 24px; display:flex; align-items:center; gap:26px}
  .brand{display:flex; align-items:center; margin-right:auto}
  .brand__logo{height:56px; width:auto; display:block}
  @media(max-width:520px){ .brand__logo{height:46px} }
  .nav{display:flex; gap:26px}
  .nav a{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); transition:color .2s}
  .nav a:hover{color:var(--ink)}
  .navcta{font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--green); border:1px solid var(--green); padding:9px 16px; border-radius:3px; transition:.18s}
  .navcta:hover{background:var(--green-dim); border-color:var(--green-dim)}
  @media(max-width:900px){ .nav{display:none} .bar__util .in span:last-child{display:none} }

  /* ===== hero — night-vision film ===== */
  .hero{position:relative; overflow:hidden; background:#05070A; border-bottom:1px solid var(--line); isolation:isolate}
  .hero__stage{position:absolute; inset:0; z-index:0}
  .hero__vid{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.06) contrast(1.05)}
  /* legibility + mood scrims: dark on the copy side, top/bottom fades, vignette */
  .hero__scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(5,10,16,.94) 0%, rgba(5,10,16,.74) 30%, rgba(5,10,16,.20) 60%, rgba(5,10,16,.36) 100%),
      linear-gradient(180deg, rgba(5,10,16,.68) 0%, rgba(5,10,16,0) 26%, rgba(5,10,16,0) 56%, rgba(5,10,16,.96) 100%),
      radial-gradient(122% 92% at 52% 42%, rgba(0,0,0,0) 50%, rgba(0,0,0,.58) 100%)}
  /* faint scanlines read as an optic feed */
  .hero__scan{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.12; mix-blend-mode:overlay;
    background:repeating-linear-gradient(180deg, rgba(255,255,255,.55) 0 1px, transparent 1px 3px)}
  /* HUD: corner brackets, reticle, telemetry — phosphor green */
  .hero__hud{position:absolute; inset:0; z-index:3; pointer-events:none}
  .hero__hud .brk{position:absolute; width:44px; height:44px; opacity:.85}
  .hero__hud .brk svg{width:100%; height:100%; display:block}
  .hero__hud .brk path{fill:none; stroke:#37E0A6; stroke-width:2; filter:drop-shadow(0 0 4px rgba(55,224,166,.5))}
  .hero__hud .brk.tl{top:22px; left:22px}
  .hero__hud .brk.tr{top:22px; right:22px; transform:scaleX(-1)}
  .hero__hud .brk.bl{bottom:22px; left:22px; transform:scaleY(-1)}
  .hero__hud .brk.br{bottom:22px; right:22px; transform:scale(-1,-1)}
  /* center-over-bore reticle */
  .hero__ret{position:absolute; top:44%; left:64%; transform:translate(-50%,-50%); z-index:3;
    width:min(30vw,300px); aspect-ratio:1; pointer-events:none; opacity:.5}
  .hero__ret svg{width:100%; height:100%; display:block; overflow:visible}
  .hero__ret .rl{fill:none; stroke:#37E0A6; stroke-width:1.1; filter:drop-shadow(0 0 3px rgba(55,224,166,.55))}
  .hero__ret .rd{fill:#37E0A6}
  @keyframes retpulse{0%,100%{opacity:.4} 50%{opacity:.66}}
  .js .hero__ret{animation:retpulse 4.4s ease-in-out infinite}
  /* telemetry */
  .hero__tele{position:absolute; z-index:4; font-family:var(--mono); font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:#8FE9C6; text-shadow:0 1px 10px rgba(0,0,0,.85)}
  .hero__tele.tl{top:25px; left:80px}
  .hero__tele.tr{top:25px; right:80px; text-align:right}
  .hero__tele .rec{color:#FF6060}
  .hero__tele .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:#FF6060;
    margin-right:8px; box-shadow:0 0 8px rgba(255,96,96,.9)}
  .js .hero__tele .dot{animation:recblink 1.5s steps(1) infinite}
  @keyframes recblink{50%{opacity:.12}}
  /* content */
  .hero__inner{position:relative; z-index:5; max-width:var(--maxw); margin:0 auto; padding:120px 24px 104px;
    min-height:min(86vh,780px); display:flex; flex-direction:column; justify-content:center}
  .hero__content{max-width:640px}
  .hero__eyebrow{margin-bottom:18px; color:#37E0A6}
  .hero__title{font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.005em;
    font-size:clamp(58px,10vw,132px); line-height:.86; margin:0; color:#F2F7F5; text-shadow:0 2px 30px rgba(0,0,0,.6)}
  .hero__title span{color:#37E0A6}
  .hero__sub{font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.18em;
    font-size:clamp(13px,1.6vw,16px); color:#B7D8CD; margin:16px 0 18px}
  .hero__lede{color:#C6D5DA; font-size:16px; line-height:1.6; max-width:50ch; margin:0 0 30px;
    text-shadow:0 1px 12px rgba(0,0,0,.75)}
  /* buttons on dark: keep primary green, secondary becomes a light ghost */
  .hero .btn{background:transparent; color:#EAF2F0; border-color:rgba(233,242,240,.42)}
  .hero .btn:hover{border-color:#EAF2F0}
  .hero .btn--primary{background:var(--green); color:#fff; border-color:var(--green); box-shadow:0 10px 30px rgba(18,160,106,.35)}
  .hero .btn--primary:hover{background:var(--green-dim); border-color:var(--green-dim)}
  /* scroll cue */
  .hero__scroll{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:5;
    font-family:var(--mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:#8FE9C6;
    display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.82; text-decoration:none}
  .hero__scroll svg{width:16px; height:16px; stroke:#37E0A6; fill:none; stroke-width:1.5}
  .js .hero__scroll svg{animation:scrollnudge 1.9s ease-in-out infinite}
  @keyframes scrollnudge{0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}}
  @media(max-width:900px){
    .hero__inner{padding:96px 22px 92px; min-height:78vh}
    .hero__ret{left:74%; top:16%; width:min(34vw,140px); opacity:.34}
    .hero__tele.tr{display:none}
    .hero__scrim{background:
      linear-gradient(180deg, rgba(5,10,16,.72) 0%, rgba(5,10,16,.24) 34%, rgba(5,10,16,.36) 60%, rgba(5,10,16,.96) 100%)}
    .hero__hud .brk{width:32px; height:32px}
  }
  @media(prefers-reduced-motion:reduce){ .hero__ret,.hero__scroll svg,.hero__tele .dot{animation:none} }
  .cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
  .btn{font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.13em; font-size:13px; cursor:pointer; border:1px solid var(--line); padding:16px 22px; background:var(--paper); color:var(--ink); border-radius:3px; transition:.18s; display:inline-flex; align-items:center; gap:10px}
  .btn:hover{border-color:var(--blue-dim)}
  .btn--primary{background:var(--green); border-color:var(--green); color:#fff; box-shadow:0 8px 22px rgba(18,160,106,.24)}
  .btn--primary:hover{background:var(--green-dim); border-color:var(--green-dim)}
  .btn .arw{font-family:var(--mono); font-weight:700}

  .showcase{position:relative; aspect-ratio:1/1; background:radial-gradient(120% 100% at 50% 20%,#FFFFFF 0%,#F2F5F9 70%,#EAEFF4 100%); border:1px solid var(--line); border-radius:3px; box-shadow:var(--shadow); overflow:hidden}
  .showcase img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:5%}
  .brackets{position:absolute; inset:0; pointer-events:none}
  .brackets path{stroke:var(--blue); stroke-opacity:.7; stroke-width:1.5; fill:none; vector-effect:non-scaling-stroke}
  .showcase__tag{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; padding:12px 15px; border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.94) 55%); font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint)}
  .showcase__tag b{color:var(--blue); font-weight:400}

  /* spec ribbon */
  .ribbon{border-bottom:1px solid var(--line); background:var(--paper)}
  .ribbon__in{max-width:var(--maxw); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr))}
  @media(max-width:760px){ .ribbon__in{grid-template-columns:repeat(2,1fr)} }
  .rb{padding:18px 20px; border-right:1px solid var(--line-soft)}
  .rb:last-child{border-right:0}
  .rb__k{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:6px}
  .rb__v{display:block; font-family:var(--disp); font-weight:600; font-size:15px; letter-spacing:.02em; color:var(--ink)}

  /* generic section */
  section.blk{max-width:var(--maxw); margin:0 auto; padding:66px 24px}
  .sec-eyebrow{margin-bottom:14px}
  .sec-title{font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.01em; font-size:clamp(28px,3.6vw,42px); line-height:1; color:var(--navy); margin:0 0 16px}
  .sec-title span{color:var(--blue)}
  .sec-lede{color:var(--slate); font-size:15.5px; max-width:64ch; margin:0}

  /* heads grid */
  .heads-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px}
  @media(max-width:860px){ .heads-grid{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:520px){ .heads-grid{grid-template-columns:1fr} }
  .hcard{border:1px solid var(--line); background:var(--paper); border-radius:3px; padding:18px; box-shadow:var(--shadow-soft); transition:.18s}
  .hcard:hover{border-color:var(--blue-dim); transform:translateY(-2px)}
  .hcard__top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
  .pill{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; padding:2px 7px; border:1px solid; border-radius:2px}
  .pill--ir{color:var(--green); border-color:var(--green-dim)} .pill--white{color:#B9822A; border-color:#E0C08A}
  .hcard__name{font-family:var(--disp); font-weight:600; font-size:16px; letter-spacing:.02em; color:var(--ink)}
  .hcard__spec{font-size:12.5px; color:var(--slate); margin-top:4px; min-height:2.6em}
  .hcard__price{font-family:var(--mono); font-weight:700; font-size:14px; color:var(--navy); margin-top:10px}
  .heads-cta{margin-top:26px}

  /* night vision */
  .nv{background:var(--navy); color:#EAF1F8}
  .nv__in{max-width:var(--maxw); margin:0 auto; padding:66px 24px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
  @media(max-width:860px){ .nv__in{grid-template-columns:1fr; gap:28px} }
  .nv .sec-eyebrow{color:#5C9BE0}
  .nv .sec-title{color:#fff} .nv .sec-title span{color:#5C9BE0}
  .nv .sec-lede{color:#A9Bed4}
  .nv__imgs{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .nvtile{border:1px solid rgba(255,255,255,.12); border-radius:3px; overflow:hidden; background:#05100b}
  .nvtile img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block}
  .nvtile__cap{display:flex; justify-content:space-between; align-items:center; padding:9px 12px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#9FB6CD; border-top:1px solid rgba(255,255,255,.1)}
  .nvtile__cap .pill--ir{color:#38d68f; border-color:rgba(56,214,143,.5)}

  /* machined split */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
  @media(max-width:860px){ .split{grid-template-columns:1fr; gap:28px} }
  .split .showcase{aspect-ratio:692/446}
  .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
  .chip{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); border:1px solid var(--line); background:var(--paper); padding:8px 12px; border-radius:3px}
  .chip b{color:var(--navy); font-weight:700}

  /* closing band */
  .band{position:relative; margin:0 auto; max-width:var(--maxw); padding:0 24px}
  .band__card{position:relative; overflow:hidden; border:1px solid rgba(92,155,224,.20); border-radius:6px; background:radial-gradient(95% 125% at 72% 46%, rgba(96,160,230,.20) 0%, rgba(40,90,150,.06) 44%, rgba(0,0,0,0) 66%), radial-gradient(150% 160% at 30% 22%, #15406c 0%, #0c2848 32%, #06182e 62%, #040e1a 100%); box-shadow:var(--shadow), inset 0 0 140px rgba(0,0,0,.5); display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:20px}
  .band__card::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.55; background-image:radial-gradient(1.5px 1.5px at 16% 28%, rgba(206,224,248,.60), transparent 60%),radial-gradient(1.2px 1.2px at 63% 16%, rgba(206,224,248,.45), transparent 60%),radial-gradient(1px 1px at 83% 60%, rgba(206,224,248,.50), transparent 60%),radial-gradient(1.6px 1.6px at 41% 78%, rgba(206,224,248,.38), transparent 60%),radial-gradient(1px 1px at 7% 66%, rgba(206,224,248,.42), transparent 60%),radial-gradient(1.2px 1.2px at 93% 33%, rgba(206,224,248,.40), transparent 60%),radial-gradient(1px 1px at 52% 46%, rgba(206,224,248,.30), transparent 60%),radial-gradient(1.3px 1.3px at 27% 54%, rgba(206,224,248,.32), transparent 60%)}
  .band__card::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:2; background:radial-gradient(120% 120% at 50% 46%, transparent 52%, rgba(2,7,14,.55) 100%)}
  @media(max-width:760px){ .band__card{grid-template-columns:1fr} }
  .band__copy{position:relative; z-index:3; padding:56px 46px}
  .band__eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#78ADEC; margin-bottom:14px; text-shadow:0 0 16px rgba(70,130,210,.5)}
  .band__title{font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:clamp(28px,3.6vw,42px); line-height:1; color:#fff; margin:0 0 14px; text-shadow:0 0 26px rgba(96,156,224,.3)}
  .band__title span{color:#6BB0EA; text-shadow:0 0 22px rgba(96,156,224,.55)}
  .band__sub{color:#B6C8DC; font-size:15px; margin:0 0 26px; max-width:44ch}
  .band__img{position:relative; z-index:1; min-height:100%; align-self:stretch; display:flex; align-items:center; justify-content:center}
  .band__img::before{content:""; position:absolute; z-index:0; width:78%; height:74%; left:50%; top:47%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(120,180,240,.28) 0%, rgba(66,126,196,.13) 40%, rgba(0,0,0,0) 70%); filter:blur(4px); pointer-events:none}
  .band__img::after{content:""; position:absolute; z-index:0; left:50%; bottom:13%; width:44%; height:26px; transform:translateX(-50%); background:radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 70%); filter:blur(6px); pointer-events:none}
  .band__img img{position:relative; z-index:1; width:100%; height:100%; object-fit:contain; padding:30px; filter:drop-shadow(0 26px 34px rgba(0,0,0,.5)) drop-shadow(0 0 34px rgba(104,160,224,.16)); animation:bandFloat 7.5s ease-in-out infinite}
  @keyframes bandFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
  @media(prefers-reduced-motion:reduce){ .band__img img{animation:none} }
  @media(max-width:760px){ .band__img{min-height:280px} }

  /* film / product video */
  .film{max-width:var(--maxw); margin:0 auto; padding:72px 24px}
  .film__grid{display:grid; grid-template-columns:520px 1fr; gap:54px; align-items:center}
  @media(max-width:860px){ .film__grid{grid-template-columns:1fr; gap:34px} }
  .vframe{position:relative; aspect-ratio:4/5; width:100%; max-width:520px; margin:0 auto; border:0; border-radius:0; overflow:visible; background:transparent; box-shadow:none}
  .vframe video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; cursor:pointer}
  .vframe img,.vframe video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
#scrubVid{filter:url(#edgeClean) drop-shadow(-28px 74px 40px rgba(12,20,32,.5)) drop-shadow(-8px 20px 15px rgba(12,20,32,.34))}
  .vframe__brackets{position:absolute; inset:0; pointer-events:none; z-index:2}
  .vframe__brackets path{stroke:rgba(14,42,71,.5); stroke-width:1.5; fill:none; vector-effect:non-scaling-stroke}
  .vframe__tag{position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; justify-content:space-between; align-items:center; padding:12px 14px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#d3e2f2; background:linear-gradient(180deg,rgba(6,18,30,0),rgba(6,18,30,.7) 65%); pointer-events:none}
  .vframe__mute{position:absolute; top:12px; right:12px; z-index:4; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(6,18,30,.5); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(3px); transition:.15s; padding:0}
  .vframe__mute:hover{background:rgba(6,18,30,.85); border-color:rgba(255,255,255,.65)}
  .vframe__mute svg{width:16px; height:16px; fill:currentColor}
  .film__copy .cta-row{margin-top:26px}
  footer{max-width:var(--maxw); margin:56px auto 0; padding:26px 24px 48px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--faint); text-transform:uppercase}
  footer .fl{display:flex; align-items:center; gap:14px}
  .foot__logo{height:22px; opacity:.6}

  /* ---- deploy pass: scroll, a11y, mobile nav, reveal ---- */
  html{scroll-behavior:smooth; overflow-anchor:none}
  [id]{scroll-margin-top:112px}
  .skip{position:absolute; left:12px; top:-64px; z-index:100; background:var(--navy); color:#fff; padding:11px 16px; border-radius:0 0 4px 4px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; transition:top .2s}
  .skip:focus{top:0}
  :focus-visible{outline:2px solid var(--blue); outline-offset:3px}
  .navtoggle{display:none; margin-left:4px; width:42px; height:38px; border:1px solid var(--line); background:var(--paper); border-radius:3px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0}
  .navtoggle span{display:block; width:18px; height:2px; background:var(--ink); transition:.2s}
  .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .js .reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease}
  .js .reveal.is-in{opacity:1; transform:none}
  @media(max-width:900px){
    .navtoggle{display:flex}
    .bar__main{position:relative}
    .nav{position:absolute; left:0; right:0; top:100%; display:none; flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--shadow); padding:6px 0}
    .nav.nav--open{display:flex}
    .nav a{padding:14px 24px; border-top:1px solid var(--line-soft)}
  }
  /* footer */
  .site-foot{display:block; max-width:var(--maxw); margin:64px auto 0; padding:48px 24px 8px; border-top:1px solid var(--line)}
  .foot__grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.5fr; gap:36px; align-items:start}
  @media(max-width:860px){ .foot__grid{grid-template-columns:1fr 1fr; gap:28px} }
  @media(max-width:520px){ .foot__grid{grid-template-columns:1fr} }
  .foot__brand .foot__logo{height:26px; opacity:.9; margin-bottom:14px}
  .foot__blurb{color:var(--slate); font-size:13px; max-width:34ch; margin:0}
  .foot__col h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:0 0 14px}
  .foot__col a{display:block; color:var(--ink); font-size:13.5px; padding:5px 0; transition:color .15s}
  .foot__col a:hover{color:var(--blue)}
  .foot__cta{margin-top:14px}
  .foot__bar{margin:34px auto 0; padding:20px 0 24px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
  @media(max-width:520px){ .navcta{padding:9px 12px; font-size:11px; letter-spacing:.06em; white-space:nowrap} .bar__in{gap:12px} }
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .js .reveal{opacity:1 !important; transform:none !important; transition:none !important}
    *{animation:none !important}
  }
  /* (hero is now a full-bleed night-vision film; former hero product-image rules removed) */
  /* machined image: unboxed + blended, same as hero */
  .split .showcase{background:none; border:0; box-shadow:none; border-radius:0; overflow:visible}
  .split .showcase__tag{display:none}
  .split .brackets{display:none}
  .split .showcase img{padding:0; filter:drop-shadow(18px 22px 20px rgba(12,20,32,.20)) drop-shadow(5px 7px 8px rgba(12,20,32,.14))}
  /* in-page configurator overlay */
  .build-overlay{position:fixed; inset:0; z-index:200; background:var(--void)}
  .build-overlay[hidden]{display:none}
  #buildFrame{width:100%; height:100%; border:0; display:block; background:var(--void)}
  html.build-open, body.build-open{overflow:hidden}
  /* views + about/capabilities */
  .view[hidden]{display:none}
  .cap-ico{width:34px; height:34px; color:var(--blue); margin-bottom:12px}
  .cap-ico svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
  .hcard--cap .hcard__spec{min-height:auto; margin-top:2px}
  .steps{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:32px}
  @media(max-width:760px){ .steps{grid-template-columns:repeat(3,1fr)} }
  @media(max-width:460px){ .steps{grid-template-columns:repeat(2,1fr)} }
  .step{border:1px solid var(--line); border-radius:4px; background:var(--paper); padding:16px; box-shadow:var(--shadow-soft)}
  .step__n{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--blue)}
  .step__t{font-family:var(--disp); font-weight:600; font-size:14px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); margin-top:8px}
  .creds{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-top:26px}
  .cred{border:1px solid var(--line); border-radius:4px; background:var(--paper); padding:15px 18px}
  .cred__k{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
  .cred__v{font-family:var(--disp); font-weight:600; font-size:15px; color:var(--ink); margin-top:6px}
  .cred__v.tbd{color:var(--faint); font-weight:500; font-size:13px}
  .note-fill{margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--faint); border-left:2px solid var(--steel); padding-left:12px}
  /* contact page */
  .contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start}
  @media(max-width:860px){ .contact-grid{grid-template-columns:1fr; gap:30px} }
  .contact-meta{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:14px}
  .contact-meta li{font-family:var(--body); font-size:13.5px; color:var(--slate)}
  .contact-meta b{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); font-weight:400; margin-bottom:3px}
.contact-meta a{color:var(--green); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s ease}
.contact-meta a:hover{border-color:var(--green)}
  .contact-card{border:1px solid var(--line); border-radius:6px; background:var(--paper); box-shadow:var(--shadow); padding:26px}
  .field{margin-bottom:16px}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  @media(max-width:520px){ .field-row{grid-template-columns:1fr} }
  .field label{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin-bottom:7px}
  .field .req{color:var(--blue)}
  .field input, .field select, .field textarea{width:100%; font-family:var(--body); font-size:14px; color:var(--ink); background:var(--wash); border:1px solid var(--line); border-radius:4px; padding:11px 12px; transition:border-color .15s, background .15s}
  .field textarea{resize:vertical; min-height:120px}
  /* iOS Safari zooms the page into any field smaller than 16px when it gets focus */
  @media(max-width:760px){ .field input, .field select, .field textarea{font-size:16px} }
  .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--blue); background:var(--paper)}
  .field.invalid input, .field.invalid select, .field.invalid textarea{border-color:#C8442F; background:#FCF3F1}
  .contact-card .btn--primary{width:100%; justify-content:center}
.contact-tabs{display:flex; gap:22px; margin:0 0 22px; border-bottom:1px solid var(--line)}
.contact-tab{appearance:none; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:2px 2px 12px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); cursor:pointer; transition:color .2s ease, border-color .2s ease}
.contact-tab:hover{color:var(--slate)}
.contact-tab.is-active{color:var(--navy); border-bottom-color:var(--green)}
.contact-pane[hidden]{display:none}
.rma-lede{font-family:var(--body); font-size:13.5px; line-height:1.55; color:var(--slate); margin:0 0 20px}
  .contact-done{text-align:center; padding:26px 8px}
  .contact-done .chk{width:56px; height:56px; border-radius:50%; background:var(--green); display:grid; place-items:center; margin:0 auto 16px}
  .contact-done .chk svg{width:28px; height:28px; stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
  .contact-done h3{font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--navy); font-size:22px; margin:0 0 10px}
  .contact-done p{color:var(--slate); font-size:14px; margin:0 auto; max-width:44ch}
  .co-done{padding:48px 8px}
  .co-done .co-done__no{font-size:15px; margin:0 auto 14px; color:var(--navy)}
  .co-done .co-done__no strong{display:inline-block; margin-left:6px; padding:5px 14px; border-radius:4px; background:rgba(0,0,0,.05); font-family:var(--disp); font-size:22px; letter-spacing:.04em}
  .co-done .btn{margin-top:22px}
  .contact-done .btn{margin-top:22px; width:auto; display:inline-flex}
  /* illumination product page */
  .prods{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:34px}
  @media(max-width:820px){ .prods{grid-template-columns:1fr} }
  .prod{border:1px solid var(--line); border-radius:6px; background:var(--paper); box-shadow:var(--shadow-soft); overflow:hidden; display:flex; flex-direction:column}
  .prod__photo{position:relative; aspect-ratio:4/3; background:var(--wash); display:grid; place-items:center; border-bottom:1px solid var(--line-soft)}
  .prod__photo .ph{text-align:center; color:var(--faint); font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; padding:16px}
  .prod__photo .ph svg{width:34px; height:34px; stroke:var(--steel); fill:none; stroke-width:1.4; stroke-linejoin:round; display:block; margin:0 auto 10px}
  .prod__photo .ph__name{color:var(--slate); margin-top:6px; letter-spacing:.08em; text-transform:none; font-family:var(--body); font-size:12px}
  .prod__body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1}
  .prod__head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
  .prod__name{font-family:var(--disp); font-weight:600; font-size:18px; letter-spacing:.01em; color:var(--ink); margin:0}
  .prod__code{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--faint); margin-top:5px}
  .prod__desc{color:var(--slate); font-size:13.5px; margin:11px 0 0}
  .prod__beam{margin-top:16px; border:1px solid var(--line-soft); border-radius:4px; overflow:hidden; background:#08182a}
  .prod__beam-k{display:flex; justify-content:space-between; align-items:center; padding:8px 12px; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#9FB6CD; border-bottom:1px solid rgba(255,255,255,.08)}
  .prod__beam-k .pill{font-size:8px}
  .prod__beam img{width:100%; height:auto; display:block}
  /* ---- OUT OF STOCK ---------------------------------------------------------
     Single source of truth is window.CTF_OOS (see the script near the cart).
     Replace that array with a backend feed when the API exists. */
  .oos-badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:9px;
    letter-spacing:.14em; text-transform:uppercase; color:#8A6A1F; background:#FDF3DA;
    border:1px solid #E8CE8E; border-radius:3px; padding:3px 8px; white-space:nowrap}
  .btn.is-oos,.btn.is-oos:hover{background:#E7ECF1; border-color:#D3DCE5; color:#7C8B9A;
    cursor:not-allowed; box-shadow:none; transform:none}
  .hcard.is-oos .hcard__photo{opacity:.55}
  .hcard__oos{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.14em;
    text-transform:uppercase; color:#8A6A1F; margin-top:6px}
  .prod__beam-seg{display:inline-flex; gap:4px}
  .prod__beam-seg button{font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:#9FB6CD; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:3px; padding:3px 8px; cursor:pointer; transition:background .2s,border-color .2s,color .2s}
  .prod__beam-seg button:hover{border-color:rgba(255,255,255,.34); color:#EAF4EE}
  .prod__beam-seg button.on{background:rgba(55,224,166,.16); border-color:rgba(55,224,166,.55); color:#8FF3CE}
  .prod__beam .beam-soon{aspect-ratio:5/4; display:grid; place-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#5C7288}
  .prod__buy{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px}
  .prod__price{font-family:var(--mono); font-weight:700; font-size:18px; color:var(--navy)}
  .prod__add{white-space:nowrap; transition:.15s}
  .prod__add.added{background:var(--navy); border-color:var(--navy)}
  .prod__build{display:inline-block; margin-top:12px; font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue)}
  .prod__build:hover{color:var(--navy)}
  /* product detail page */
  .crumb{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin-bottom:22px}
  .crumb:hover{color:var(--blue)}
  .pd{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start}
  @media(max-width:860px){ .pd{grid-template-columns:1fr; gap:28px} }
  .pd__main{position:relative; aspect-ratio:4/3; background:var(--wash); border:1px solid var(--line); border-radius:6px; display:grid; place-items:center}
  .pd__main .ph{text-align:center; color:var(--faint); font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase}
  .pd__main .ph svg{width:40px; height:40px; stroke:var(--steel); fill:none; stroke-width:1.4; stroke-linejoin:round; display:block; margin:0 auto 10px}
  .pd__main .ph__name{color:var(--slate); text-transform:none; font-family:var(--body); font-size:13px; margin-top:6px}
  .pd__thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px}
  .pd__thumb{aspect-ratio:1/1; background:var(--wash); border:1px solid var(--line-soft); border-radius:4px}
  .pd__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
  .pd__name{font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.01em; font-size:28px; line-height:1.05; color:var(--navy); margin:0}
  .pd__code{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--faint); margin-top:8px}
  .pd__desc{color:var(--slate); font-size:15px; margin:16px 0 0}
  .pd__price{font-family:var(--mono); font-weight:700; font-size:26px; color:var(--navy); margin:18px 0}
  .pd__actions{display:flex; gap:10px; flex-wrap:wrap}
  .pd__build{display:inline-block; margin-top:16px; font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue)}
  .pd__build:hover{color:var(--navy)}
  .pd__section{margin-top:44px}
  .pd__h3{font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:16px; color:var(--navy); margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--line)}
  .spec{width:100%; border-collapse:collapse}
  .spec th, .spec td{text-align:left; padding:12px 4px; border-bottom:1px solid var(--line-soft); font-size:14px; vertical-align:top}
  .spec th{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:400; width:220px}
  .spec td{color:var(--ink)}
  .spec td.tba{color:var(--faint); font-style:italic}
  @media(max-width:520px){ .spec th{width:130px} }
  .pd__beam{border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#08182a; max-width:640px}
  .pd__beam img{width:100%; height:auto; display:block; max-height:440px; object-fit:cover}
  .pd__beam .beam-soon{height:200px; display:grid; place-items:center; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#5C7288}
  .prod__name a{color:inherit; text-decoration:none}
  .prod__name a:hover{color:var(--blue)}
  a.prod__photo{cursor:pointer; text-decoration:none}
  .prod__links{margin-top:12px; display:flex; gap:18px; flex-wrap:wrap}
  .prod__details{font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
  .prod__details:hover{color:var(--blue)}
  .site-toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(10px); z-index:300; background:var(--navy); color:#fff; font-family:var(--mono); font-size:12px; letter-spacing:.08em; padding:12px 20px; border-radius:4px; box-shadow:var(--shadow); opacity:0; transition:opacity .2s, transform .2s; pointer-events:none}
  .site-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
  .prod__photo--img{background:#FFFFFF}
  .prod__photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8%}
  .pd__main--img{background:#FFFFFF}
  .pd__main img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6%}
  .pd__thumb--img{position:relative; background:#FFFFFF; overflow:hidden}
  .pd__thumb--img img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10%}
  .hcard__photo{position:relative; height:185px; background:#FFFFFF; border:1px solid var(--line-soft); border-radius:3px; margin-bottom:14px; overflow:hidden}
  .hcard__photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:4%}
  /* hover-to-beam (only applied to heads that have a beam profile) */
  .hcard__photo{transition:background .28s ease}
  .hcard__thumb{transition:opacity .28s ease}
  .hcard__beam{opacity:0; transition:opacity .28s ease; padding:0 !important; object-fit:cover !important}
  .hcard[data-head="kiji"] .hcard__beam{object-position:center 32% !important}
  .hcard__beamtag{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:7px 11px; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:#CFE3F5; background:linear-gradient(180deg,rgba(6,18,30,0),rgba(6,18,30,.72)); opacity:0; transition:opacity .28s ease; pointer-events:none}
  .hcard--hasbeam .hcard__photo{cursor:pointer}
  .hcard--hasbeam .hcard__photo::after{content:none}
  .hcard--hasbeam:hover .hcard__photo, .hcard--hasbeam:focus-within .hcard__photo{background:#08182a}
  .hcard--hasbeam:hover .hcard__thumb, .hcard--hasbeam:focus-within .hcard__thumb{opacity:0}
  .hcard--hasbeam:hover .hcard__beam, .hcard--hasbeam:focus-within .hcard__beam{opacity:1}
  .hcard--hasbeam:hover .hcard__beamtag, .hcard--hasbeam:focus-within .hcard__beamtag{opacity:1}
  .hcard--hasbeam:hover .hcard__photo::after, .hcard--hasbeam:focus-within .hcard__photo::after{opacity:0}
  .hcard--hasbeam:focus{outline:none}
  .hcard--hasbeam:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
  @media(prefers-reduced-motion:reduce){ .hcard__thumb,.hcard__beam,.hcard__beamtag,.hcard__photo{transition:none} }

/* ==========================================================================
   02. block-2
   ========================================================================== */
:root{--ease:cubic-bezier(.22,.61,.36,1)}

/* ==========================================================================
   03. polish-css
   ========================================================================== */

  /* film grain atmosphere (below header, above content) */
  #grain{position:fixed; inset:0; z-index:8; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
    background-image:url("../page/image.svg"); background-size:150px 150px}
  /* boot / power-on sequence */
  #boot{position:fixed; inset:0; z-index:10001; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:radial-gradient(120% 100% at 50% 44%, #0A1622 0%, #05070A 72%);
    animation:bootOut .6s var(--ease) 1.7s forwards}
  #boot .boot__laser{width:190px; height:auto; overflow:visible; margin-top:24px}
  #boot .boot__logo{width:210px; height:auto; display:block; filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(255,255,255,.12)); opacity:0; transform:translateY(12px) scale(.97); animation:logoIn .65s var(--ease) .12s forwards}
  #boot .lbeam{fill:none; stroke:#37E0A6; stroke-width:1.7; stroke-linecap:round; filter:drop-shadow(0 0 5px rgba(55,224,166,.8));
    stroke-dasharray:104; stroke-dashoffset:104; animation:lbeamDraw .42s var(--ease) .55s forwards, lbeamFade .55s ease .95s forwards}
  #boot .ldot-halo{fill:#37E0A6; opacity:0; filter:blur(4px); transform-box:fill-box; transform-origin:center;
    animation:lhaloPop .45s var(--ease) .78s forwards, lhaloPulse 1.4s ease-in-out 1.15s infinite}
  #boot .ldot-core{fill:#EAFFF6; opacity:0; filter:drop-shadow(0 0 5px rgba(130,255,216,.95)); transform-box:fill-box; transform-origin:center;
    animation:ldotPop .3s var(--ease) .82s forwards}
  #boot .boot__kick{margin-top:24px; font-family:var(--mono); font-size:12px; letter-spacing:.42em; text-transform:uppercase;
    color:#8FE9C6; opacity:0; transform:translateY(8px); animation:bootKick .7s var(--ease) 1.05s forwards}
  @keyframes logoIn{from{opacity:0; transform:translateY(12px) scale(.97)} to{opacity:1; transform:none}}
  @keyframes lbeamDraw{to{stroke-dashoffset:0}}
  @keyframes lbeamFade{to{opacity:.22}}
  @keyframes ldotPop{from{opacity:0; transform:scale(0)} to{opacity:1; transform:scale(1)}}
  @keyframes lhaloPop{from{opacity:0; transform:scale(.2)} to{opacity:.5; transform:scale(1)}}
  @keyframes lhaloPulse{0%,100%{opacity:.4; transform:scale(1)} 50%{opacity:.72; transform:scale(1.4)}}
  @keyframes bootKick{to{opacity:1; transform:none}}
  @keyframes bootOut{to{opacity:0; visibility:hidden; pointer-events:none}}
  @media (prefers-reduced-motion:reduce){ #boot{display:none} }

/* ==========================================================================
   04. motif-css
   ========================================================================== */
#view-home{position:relative}
.motif{position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; pointer-events:none; overflow:hidden; will-change:transform,opacity; opacity:0; transition:opacity .6s ease}
.motif-pulse{opacity:var(--pulse,.7)}
@media (max-width:760px){ .motif{opacity:.8} }

/* ==========================================================================
   05. contact-art-css
   ========================================================================== */
/* Contact page: dark intro panel, distilled motif, entrance + success motion */
.contact-grid{align-items:stretch}
.contact-intro{position:relative; overflow:hidden; isolation:isolate; border-radius:6px; box-shadow:var(--shadow);
  background:linear-gradient(158deg,#0E2A47 0%, #0A1A2E 62%, #071322 100%); padding:44px 40px; min-height:600px}
.contact-intro .sec-eyebrow, .contact-intro .sec-title, .contact-intro .sec-lede, .contact-intro .contact-meta{position:relative; z-index:2}
.contact-intro .sec-eyebrow{color:var(--green)}
.contact-intro .sec-title{color:#EAF1F8}
.contact-intro .sec-title span{color:var(--green)}
.contact-intro .sec-lede{color:#AEC0D2}
.contact-intro .contact-meta li{color:#AEC0D2}
.contact-intro .contact-meta b{color:#6E86A0}
.contact-intro .contact-meta a{color:var(--green)}
.contact-intro .contact-meta a:hover{border-color:var(--green)}
/* about page: facility film */
.aboutfilm__frame{margin:0; border-radius:3px; overflow:hidden; background:#0B1622; border:1px solid var(--line); box-shadow:0 18px 44px rgba(12,20,32,.16)}
.aboutfilm__vid{display:block; width:100%; height:auto; aspect-ratio:16/9; background:#0B1622}
@media (max-width:760px){ .aboutfilm__frame{border-radius:2px} }
.contact-logo{position:absolute; z-index:2; left:50%; top:72%; transform:translate(-50%,-50%); width:240px; max-width:58%; height:auto; opacity:.9; filter:brightness(0) invert(1); pointer-events:none}
/* entrance + draw */
#view-contact.contact-play .contact-intro{animation:cRise .7s var(--ease) both}
#view-contact.contact-play .contact-card{animation:cRise .7s var(--ease) .09s both}


#view-contact.contact-play .contact-logo{animation:cLogoIn 1s ease .55s both}
@keyframes cRise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes cmDraw{from{stroke-dashoffset:1000} to{stroke-dashoffset:0}}
@keyframes cmEmber{from{opacity:0} to{opacity:1}}
@keyframes cLogoIn{from{opacity:0} to{opacity:.9}}
/* success checkmark draw + pop */
.chk{animation:chkPop .5s var(--ease) both}
.chk svg path{stroke-dasharray:32; stroke-dashoffset:32; animation:chkDraw .55s var(--ease) .18s forwards}
@keyframes chkPop{from{transform:scale(.6); opacity:0} to{transform:scale(1); opacity:1}}
@keyframes chkDraw{to{stroke-dashoffset:0}}

/* ==========================================================================
   06. cart-css
   ========================================================================== */
.cart-btn{position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-left:14px; background:none; border:0; color:var(--navy); cursor:pointer; padding:0}
.cart-btn svg{width:22px; height:22px}
.cart-btn:hover{color:var(--green)}
.cart-count{position:absolute; top:1px; right:1px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--green); color:#fff; font-family:var(--mono); font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; line-height:1}
.cart-count.bump{animation:cartBump .42s ease}
@keyframes cartBump{0%{transform:scale(1)}40%{transform:scale(1.42)}100%{transform:scale(1)}}
.cart-overlay{position:fixed; inset:0; background:rgba(10,26,46,.5); z-index:140; opacity:0; transition:opacity .3s ease}
.cart-overlay.show{opacity:1}
.cart-drawer{position:fixed; top:0; right:0; width:392px; max-width:92vw; height:100%; background:#fff; z-index:141; display:flex; flex-direction:column; transform:translateX(102%); transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:-10px 0 44px rgba(16,42,74,.18)}
.cart-drawer.open{transform:none}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); flex:0 0 auto}
.cart-head h3{margin:0; font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy)}
.cart-close{background:none; border:0; font-size:28px; line-height:1; color:var(--slate); cursor:pointer; padding:0 2px}
.cart-close:hover{color:var(--navy)}
.cart-body{flex:1 1 auto; overflow-y:auto; padding:4px 24px}
.cart-item{display:grid; grid-template-columns:1fr auto auto 22px; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--line-soft)}
.cart-item__info{display:flex; flex-direction:column; gap:3px; min-width:0}
.cart-item__name{font-family:var(--body); font-size:13px; font-weight:600; color:var(--ink); line-height:1.3}
.cart-item__code{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; color:var(--faint)}
  .cart-item__parts{font-family:var(--body); font-size:11px; line-height:1.35; color:var(--slate); margin-top:1px}
.cart-item__qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:6px; overflow:hidden}
.cart-item__qty .qbtn{width:26px; height:28px; background:none; border:0; color:var(--slate); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0}
.cart-item__qty .qbtn:hover{background:var(--wash); color:var(--navy)}
.cart-item__qty .qval{min-width:24px; text-align:center; font-family:var(--mono); font-size:12px; color:var(--navy)}
.cart-item__price{font-family:var(--mono); font-weight:700; font-size:13px; color:var(--navy); white-space:nowrap; text-align:right}
.cart-item__rm{background:none; border:0; color:var(--faint); font-size:18px; line-height:1; cursor:pointer; padding:0}
.cart-item__rm:hover{color:#c0392b}
.cart-empty{text-align:center; padding:64px 20px; color:var(--slate)}
.cart-empty svg{width:42px; height:42px; color:var(--steel); margin-bottom:14px}
.cart-empty p{font-family:var(--disp); font-weight:600; font-size:15px; color:var(--navy); margin:0 0 6px}
.cart-empty span{font-family:var(--body); font-size:12.5px}
.cart-foot{flex:0 0 auto; padding:20px 24px; border-top:1px solid var(--line); background:var(--wash)}
.cart-subtotal{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.cart-subtotal span:first-child{font-family:var(--disp); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); font-weight:700}
.cart-subtotal span:last-child{font-family:var(--mono); font-weight:700; font-size:20px; color:var(--navy)}
.cart-note{font-family:var(--mono); font-size:10px; color:var(--faint); margin:0 0 14px; line-height:1.5}
.cart-checkout{width:100%; justify-content:center}
@media (max-width:520px){ .cart-drawer{width:100%; max-width:100%} }

/* ==========================================================================
   07. itar-css
   ========================================================================== */
.legal-blk .sec-title{margin-bottom:0}
.legal-body{max-width:768px; margin-top:28px}
.legal-body p{font-family:var(--body); font-size:15px; line-height:1.75; color:var(--steel); margin:0 0 18px}
.legal-body p:first-child{font-size:15.5px; color:var(--ink)}
.legal-body p:last-child{margin-bottom:0}
.legal-refs{max-width:768px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:13px}
.legal-ref{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.legal-ref__k{min-width:300px; font-family:var(--disp); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--slate); font-weight:700}
.legal-ref a{font-family:var(--mono); font-size:13px; color:var(--green); text-decoration:none}
.legal-ref a:hover{text-decoration:underline}
.foot__legal{font-family:var(--body); font-size:12px; color:var(--slate); text-decoration:none}
.foot__legal:hover{color:var(--green)}
.cart-note a{color:var(--green); text-decoration:none}
.cart-note a:hover{text-decoration:underline}
@media(max-width:600px){ .legal-ref__k{min-width:0} }

/* ==========================================================================
   08. warranty-css
   ========================================================================== */
.legal-body a{color:var(--green); text-decoration:none}
.legal-body a:hover{text-decoration:underline}
.legal-callout{margin:24px 0; padding:18px 20px; border:1px solid var(--line); border-left:3px solid var(--navy); background:var(--wash); border-radius:4px}
.legal-callout p{margin:0; font-family:var(--body); font-size:13px; line-height:1.75; letter-spacing:.01em; color:var(--navy); font-weight:600}
.legal-h3{font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:14px; color:var(--navy); margin:36px 0 12px}
.legal-list{max-width:768px; margin:0 0 18px; padding-left:0; list-style:none}
.legal-list li{position:relative; padding-left:22px; font-family:var(--body); font-size:15px; line-height:1.6; color:var(--steel); margin-bottom:9px}
.legal-list li:before{content:''; position:absolute; left:4px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--green)}
.rma-terms{font-family:var(--body); font-size:12.5px; color:var(--slate); margin:-4px 0 18px}
.rma-terms a{color:var(--green); text-decoration:none}
.rma-terms a:hover{text-decoration:underline}

/* ==========================================================================
   09. terms-css
   ========================================================================== */
.legal-sub{font-family:var(--mono); font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--slate); margin:0 0 24px; font-weight:700}
.legal-ol{max-width:768px; margin:0 0 18px; padding-left:22px}
.legal-ol li{font-family:var(--body); font-size:15px; line-height:1.6; color:var(--steel); margin-bottom:9px; padding-left:6px}
.legal-ol li::marker{color:var(--green); font-family:var(--mono); font-weight:700}
.legal-foot{max-width:768px; margin:14px 0 6px; padding:16px 20px; border-left:2px solid var(--line); background:var(--wash); border-radius:0 4px 4px 0}
.legal-foot p{font-family:var(--body); font-size:12.5px; line-height:1.66; color:var(--slate); margin:0 0 12px}
.legal-foot p:last-child{margin-bottom:0}
.foot__legalnav{display:flex; gap:20px; flex-wrap:wrap}
.foot__legalnav a{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--faint); text-decoration:none}
.foot__legalnav a:hover{color:var(--green)}
.cart-terms{font-family:var(--mono); font-size:10px; color:var(--faint); text-align:center; margin:12px 0 0; line-height:1.5}
.cart-terms a{color:var(--green); text-decoration:none}
.cart-terms a:hover{text-decoration:underline}

/* ==========================================================================
   10. checkout-css
   ========================================================================== */
.co .crumb{display:inline-block; margin-bottom:14px}
.co-empty{text-align:center; padding:48px 20px}
.co-empty p{font-family:var(--disp); font-size:16px; color:var(--navy); margin:0 0 16px}
.co-steps{display:flex; gap:8px; margin:22px 0 30px; flex-wrap:wrap}
.co-step{display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); padding:9px 16px 9px 9px; border:1px solid var(--line); border-radius:40px}
.co-step__n{width:22px; height:22px; border-radius:50%; background:var(--void); color:var(--slate); display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px}
.co-step.is-active{color:var(--navy); border-color:var(--navy)}
.co-step.is-active .co-step__n{background:var(--navy); color:#fff}
.co-step.is-done{color:var(--green); border-color:var(--green)}
.co-step.is-done .co-step__n{background:var(--green); color:#fff}
.co-grid{display:grid; grid-template-columns:1.6fr .9fr; gap:40px; align-items:start}
.co-h3{font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:14px; color:var(--navy); margin:26px 0 14px}
.co-panel > .co-h3:first-child{margin-top:0}
.co-p{font-family:var(--body); font-size:13.5px; line-height:1.6; color:var(--slate); margin:0 0 16px; max-width:60ch}
.co-uslock{display:flex; align-items:center; gap:9px; font-family:var(--body); font-size:12.5px; color:var(--navy); background:var(--wash); border:1px solid var(--line); border-left:3px solid var(--navy); border-radius:4px; padding:11px 14px; margin:0 0 18px}
.co-uslock__flag{font-size:15px}
.opt{color:var(--faint); font-weight:400; font-size:11px; text-transform:none; letter-spacing:0}
#co-country{background:var(--void); color:var(--slate); cursor:default}
.co-block{padding:20px 22px; border:1px solid var(--line); border-radius:6px; margin-bottom:16px; background:var(--paper)}
.co-block > .co-h3:first-child{margin-top:0}
.co-check{display:flex; gap:11px; align-items:flex-start; font-family:var(--body); font-size:13.5px; line-height:1.55; color:var(--ink); padding:9px 0; cursor:pointer}
.co-check + .co-check{border-top:1px solid var(--line-soft)}
.co-check input{margin-top:2px; width:17px; height:17px; accent-color:var(--green); flex:0 0 auto; cursor:pointer}
.co-check a{color:var(--green); text-decoration:none}
.co-check a:hover{text-decoration:underline}
.co-screen{display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.co-screen__status{width:100%; font-family:var(--mono); font-size:12.5px; padding:12px 14px; border-radius:5px; display:flex; align-items:center; gap:9px; line-height:1.4}
.co-screen__status.is-running{background:var(--wash); color:var(--slate); border:1px solid var(--line)}
.co-screen__status.is-clear{background:rgba(18,160,106,.09); color:#0c7a50; border:1px solid rgba(18,160,106,.3)}
.co-screen__status.is-flag{background:rgba(192,57,43,.07); color:#a5281b; border:1px solid rgba(192,57,43,.3)}
.co-screen__status .dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto}
.is-running .dot{background:var(--slate); animation:coPulse 1s ease-in-out infinite}
.is-clear .dot{background:#12a06a}
.is-flag .dot{background:#c0392b}
@keyframes coPulse{0%,100%{opacity:.3}50%{opacity:1}}
.co-err{font-family:var(--body); font-size:13px; line-height:1.45; color:#8A1F14; margin:10px 0 0; padding:11px 13px; background:#FDECEA; border:1px solid #F3B7B0; border-radius:4px}
.co-actions{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:26px}
.co-summary{position:sticky; top:96px; border:1px solid var(--line); border-radius:8px; padding:22px; background:var(--paper)}
.co-summary__t{font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:13px; color:var(--navy); margin:0 0 16px}
.co-item{display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:12px 0; border-bottom:1px solid var(--line-soft)}
.co-item__name{font-family:var(--body); font-size:13px; font-weight:600; color:var(--ink)}
.co-item__meta{font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--faint)}
.co-item__price{font-family:var(--mono); font-weight:700; font-size:13px; color:var(--navy); text-align:right}
.co-sub{display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; font-family:var(--disp); font-weight:700; color:var(--navy)}
.co-sub span:first-child{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate)}
.co-sub span:last-child{font-family:var(--mono); font-size:18px}
.co-sub--muted{font-weight:400}
.co-sub--muted span{font-size:11px !important; color:var(--faint) !important; text-transform:none !important; letter-spacing:0 !important; font-family:var(--mono) !important}
.co-badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.co-badge{font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--slate); background:var(--wash); border:1px solid var(--line); border-radius:4px; padding:5px 9px}
.co-place:disabled{opacity:.45; cursor:not-allowed}
.co-paynote{font-family:var(--mono); font-size:11px; color:var(--faint); margin:14px 0 0; line-height:1.5; text-align:right}
/* review */
.co-rev{border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom:8px}
.co-rev__h{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:var(--wash); border-bottom:1px solid var(--line)}
.co-rev__h h4{margin:0; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:12.5px; color:var(--navy)}
.co-rev__edit{font-family:var(--mono); font-size:11px; color:var(--green); background:none; border:0; cursor:pointer}
.co-rev__b{padding:16px 18px; font-family:var(--body); font-size:13.5px; line-height:1.6; color:var(--ink)}
.co-status{display:flex; align-items:center; gap:9px; padding:7px 0; font-family:var(--body); font-size:13.5px; color:var(--ink)}
.co-status .tick{width:18px; height:18px; border-radius:50%; background:var(--green); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; flex:0 0 auto}
.co-status .tick--info{background:transparent; color:var(--slate); box-shadow:inset 0 0 0 1.5px currentColor; font-family:Georgia,serif; font-style:italic; font-weight:700}
@media (max-width:860px){ .co-grid{grid-template-columns:1fr; gap:28px} .co-summary{position:static; order:-1} }

/* ==========================================================================
   11. assemble-css
   ========================================================================== */
.split--assemble{grid-template-columns:1.95fr 1fr; gap:32px}
.showcase.showcase--assemble{background:none; border:0; box-shadow:none; border-radius:0; overflow:visible; aspect-ratio:auto; padding:0}
.showcase.showcase--assemble .assemble-canvas{width:100%; height:auto; display:block; transform:translateY(-21%); filter:drop-shadow(30px 38px 26px rgba(12,20,32,.55)) drop-shadow(9px 13px 11px rgba(12,20,32,.42))}
.showcase.showcase--assemble .showcase__tag{display:none}
.showcase.showcase--assemble .brackets{display:none}
@media (max-width:860px){ .split--assemble{grid-template-columns:1fr} .showcase.showcase--assemble .assemble-canvas{transform:none; filter:drop-shadow(30px 38px 26px rgba(12,20,32,.55)) drop-shadow(9px 13px 11px rgba(12,20,32,.42))} }

/* ==========================================================================
   12. section-lines
   ========================================================================== */
  :root{ --section-lines:url("../page/image-2.svg"); }
  .motif{ display:none !important; }
  #film, #machined{ position:relative; isolation:isolate; }
  #film::before, #machined::before{
    content:""; position:absolute; top:0; bottom:0;
    left:calc((100% - 100vw)/2); width:100vw;
    background-repeat:no-repeat; background-size:auto 104vh;
    background-attachment:fixed; background-image:var(--section-lines);
    pointer-events:none; z-index:0; opacity:1;
  }
  #film > *, #machined > *{ position:relative; z-index:1; }
  #film::before{ background-position:34% center; }
  #machined::before{ background-position:36% center; }
  @media (max-width:900px){
    #film::before, #machined::before{ background-attachment:scroll; background-position:center; opacity:1; }
  }
  :root{ --section-lines-angled:url("../page/image-3.svg"); }
  #machined::before{ background-image:var(--section-lines-angled); background-position:26% center; }

/* ==========================================================================
   13. l3-css
   ========================================================================== */
  /* trust strip */
  .trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper)}
  .trust__in{max-width:var(--maxw); margin:0 auto; padding:22px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
  @media(max-width:760px){ .trust__in{grid-template-columns:1fr 1fr; gap:20px 24px} }
  .trust__item{display:flex; align-items:center; gap:12px}
  .trust__item svg{width:23px; height:23px; flex:none; stroke:var(--blue); fill:none; stroke-width:1.6}
  .trust__t{font-weight:650; font-size:13.5px; color:var(--ink); line-height:1.2}
  .trust__s{font-size:11.5px; color:var(--slate)}
  a.trust__item--link{text-decoration:none; color:inherit; cursor:pointer; border-radius:8px; transition:opacity .15s ease}
  a.trust__item--link:hover .trust__t{color:var(--blue)}
  a.trust__item--link:hover{opacity:.92}
  /* carry the fire newsletter */
  .cf{position:relative; overflow:hidden; background:linear-gradient(120deg,#0A1A2E 0%, #0E2A47 55%, #123a63 100%); color:#EAF1F8}
  .cf::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.55; background:radial-gradient(90% 120% at 85% 18%, rgba(56,214,143,.10), transparent 60%)}
  .cf__in{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:56px 24px; display:grid; grid-template-columns:1.1fr .9fr; gap:38px; align-items:center}
  @media(max-width:760px){ .cf__in{grid-template-columns:1fr; gap:24px; padding:44px 24px} }
  .cf__kick{font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:#38d68f; margin-bottom:14px}
  .cf__title{font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:clamp(26px,3.4vw,40px); line-height:1.02; margin:0 0 12px; color:#fff}
  .cf__sub{color:#B9CCE0; font-size:14.5px; line-height:1.55; max-width:46ch; margin:0}
  .cf__form{display:flex; gap:10px; flex-wrap:wrap}
  .cf__form input{flex:1 1 220px; min-width:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); border-radius:4px; padding:14px 16px; color:#fff; font-size:15px; font-family:var(--body)}
  .cf__form input::placeholder{color:#8FA6BD}
  .co-pay{margin-top:18px}
  #sqCard{margin-top:10px; padding:2px; border-radius:4px}
  .co-place.is-busy{opacity:.7; cursor:progress}
  .cf-error{margin:14px 0 0; padding:11px 13px; border-radius:4px; background:#FDECEA; border:1px solid #F3B7B0; color:#8A1F14; font-size:13px; line-height:1.45}
  .cf__form input:focus{outline:none; border-color:#38d68f; box-shadow:0 0 0 3px rgba(56,214,143,.18)}
  .cf__btn{background:var(--green); color:#fff; border:1px solid var(--green); border-radius:4px; padding:14px 24px; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:13px; cursor:pointer; transition:background .2s}
  .cf__btn:hover{background:var(--green-dim)} .cf__btn:disabled{opacity:.6; cursor:default}
  .cf__ok{font-size:13px; font-weight:600; margin:12px 0 0; min-height:1.1em}
  .cf__note{font-size:11.5px; color:#8FA6BD; margin:10px 0 0}

/* ==========================================================================
   14. fx-css
   ========================================================================== */
  /* ===== scroll choreography (progressive enhancement; fails open; respects reduced motion) ===== */
  .js [data-stagger] .stg{opacity:0; transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay:calc(var(--i,0)*60ms); will-change:opacity,transform}
  .js [data-stagger] .stg[data-d="left"]{transform:translateX(-34px)}
  .js [data-stagger] .stg[data-d="right"]{transform:translateX(34px)}
  .js [data-stagger] .stg[data-d="scale"]{transform:translateY(18px) scale(.955)}
  .js [data-stagger].stg-in .stg{opacity:1; transform:none}
  .hero__stage,.hero__inner{will-change:transform}
  @media(prefers-reduced-motion:reduce){
    .js [data-stagger] .stg{opacity:1 !important; transform:none !important; transition:none !important}
  }

/* ==========================================================================
   15. l2-css
   ========================================================================== */
  html,body{overflow-x:clip}
  /* ===== day-to-night pivot ===== */
  .daynight{height:240px; margin:0; background:linear-gradient(180deg, var(--void) 0%, #C6D2DF 30%, #7C90A8 58%, #2C4864 82%, #0A1A2E 100%)}
  .daynight--up{background:linear-gradient(180deg, #050B14 0%, #2C4864 22%, #7C90A8 48%, #C6D2DF 74%, var(--void) 100%)}
  .nv{position:relative; overflow:hidden;
      background:radial-gradient(140% 150% at 72% 20%, #123b60 0%, #0b2643 30%, #071829 60%, #040d18 100%); color:#EAF1F8}
  .nv::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.88;
      background:
        radial-gradient(90% 72% at 84% 22%, rgba(56,214,143,.10), transparent 60%),
        radial-gradient(78% 80% at 10% 90%, rgba(70,130,205,.08), transparent 62%),
        radial-gradient(1.5px 1.5px at 18% 26%, rgba(202,224,246,.55), transparent 60%),
        radial-gradient(1.2px 1.2px at 66% 13%, rgba(202,224,246,.42), transparent 60%),
        radial-gradient(1px 1px at 84% 62%, rgba(202,224,246,.44), transparent 60%),
        radial-gradient(1.5px 1.5px at 39% 84%, rgba(202,224,246,.34), transparent 60%),
        radial-gradient(1px 1px at 7% 58%, rgba(202,224,246,.40), transparent 60%),
        radial-gradient(1.2px 1.2px at 94% 42%, rgba(202,224,246,.36), transparent 60%),
        radial-gradient(1px 1px at 52% 34%, rgba(202,224,246,.30), transparent 60%),
        repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px)}
  .nv__in{position:relative; z-index:1; grid-template-columns:1fr; gap:30px}
  .nv__in > div:first-child{max-width:760px}

  /* ===== interactive beam comparator ===== */
  .beamcmp{display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:stretch; margin-top:6px}
  @media(max-width:760px){ .beamcmp{grid-template-columns:1fr; gap:24px} .beamcmp__mid{display:none} }
  .beamcmp__pick{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
  .beamcmp__pick button{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    color:#9FB6CD; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:3px;
    padding:7px 10px; cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease}
  .beamcmp__pick button:hover{border-color:rgba(56,214,143,.5); color:#CFE3F5}
  .beamcmp__pick button.on{background:rgba(56,214,143,.15); border-color:#38d68f; color:#EAF7F1; box-shadow:0 0 16px rgba(56,214,143,.22)}
  .beamcmp__stage{position:relative; margin:0; border:1px solid rgba(120,185,155,.16); border-radius:6px;
    overflow:hidden; background:#05100b; aspect-ratio:5/4;
    box-shadow:0 28px 54px -20px rgba(0,0,0,.72), 0 0 46px rgba(56,214,143,.09)}
  .beamcmp__stage::before{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:radial-gradient(120% 104% at 50% 42%, transparent 46%, rgba(2,9,6,.60) 100%)}
  .beamcmp__img{width:100%; height:100%; object-fit:cover; display:block; opacity:1; transition:opacity .3s ease}
  .beamcmp__scan{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.12; mix-blend-mode:overlay;
    background:repeating-linear-gradient(180deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px)}
  .beamcmp__cap{position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; justify-content:space-between;
    align-items:center; padding:9px 12px; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
    text-transform:uppercase; color:#CFE3F5; background:linear-gradient(180deg,rgba(5,16,11,0),rgba(5,16,11,.82))}
  .beamcmp .pill--ir{color:#38d68f; border:1px solid rgba(56,214,143,.5); border-radius:2px; padding:2px 6px}
  .beamcmp__stats{margin-top:12px}
  .beamcmp__use{font-size:13px; line-height:1.5; color:#B9CCE0; min-height:2.9em; margin:0 0 12px}
  .beamcmp__bar{display:grid; grid-template-columns:56px 1fr; align-items:center; gap:10px; margin:8px 0}
  .beamcmp__bar label{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#8FA6BD}
  .beamcmp__bar .trk{position:relative; height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden}
  .beamcmp__bar .trk b{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:3px;
    background:linear-gradient(90deg,#1c8f63,#38d68f); box-shadow:0 0 12px rgba(56,214,143,.45); transition:width .55s cubic-bezier(.22,.61,.36,1)}
  .beamcmp__mid{display:flex; align-items:center; justify-content:center}
  .beamcmp__mid span{font-family:var(--disp); font-weight:700; font-size:12px; color:#8CBBEE;
    border:1px solid rgba(120,175,235,.45); border-radius:50%; width:44px; height:44px; line-height:42px; text-align:center;
    background:rgba(10,26,46,.35); box-shadow:0 0 24px rgba(96,156,224,.28), inset 0 0 14px rgba(96,156,224,.12); text-shadow:0 0 12px rgba(120,175,235,.5)}
  .beamcmp.boot .beamcmp__stage{animation:bcboot 1s ease}
  @keyframes bcboot{0%{filter:brightness(.28) saturate(.4)}100%{filter:none}}
  @media(prefers-reduced-motion:reduce){
    .beamcmp__img,.beamcmp__bar .trk b{transition:none}
    .beamcmp.boot .beamcmp__stage{animation:none}
  }
  @media(max-width:760px){ #beamcmp .beamcmp__mid{display:none} }

/* ==========================================================================
   16. l4-css
   ========================================================================== */
  /* one reserved control zone so every head's beam frame starts at the same height:
     the variant block (tallest case) always holds the space; the spectrum row overlays it */
  .beamcmp__ctrls{position:relative; margin:0 0 12px}
  .beamcmp__variant{margin:0}
  .beamcmp__spectra{margin:0; position:absolute; left:0; right:0; bottom:0}
  .beamcmp__variant[hidden],.beamcmp__spectra[hidden]{display:block; visibility:hidden; pointer-events:none}
  .beamcmp__variant[hidden]{display:block; visibility:hidden}
  .beamcmp__seg{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px}
  .beamcmp__plab{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#8FA6BD; margin-right:2px}
  .beamcmp__seg button{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#9FB6CD; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:3px; padding:6px 11px; cursor:pointer; transition:background .2s,border-color .2s,color .2s}
  .beamcmp__power button{width:32px; padding:6px 0; text-align:center}
  .beamcmp__seg button:hover{border-color:rgba(56,214,143,.5); color:#CFE3F5}
  .beamcmp__seg button.on{background:rgba(56,214,143,.15); border-color:#38d68f; color:#EAF7F1}
  .beamcmp__soon{position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:.16em; line-height:1.7; text-transform:uppercase; color:#7C93AB; background:repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 9px, transparent 9px 18px), #060f16}
  .beamcmp__soon[hidden]{display:none}

/* ==========================================================================
   17. sig-css
   ========================================================================== */
  :root{--ease:cubic-bezier(.22,.61,.36,1)}
  /* scroll progress */
  #scrollprog{position:fixed; top:0; left:0; height:2px; width:0; z-index:9999; background:linear-gradient(90deg,#12A06A,#37E0A6); box-shadow:0 0 8px rgba(55,224,166,.55); pointer-events:none}
  /* nav underline sweep */
  #siteNav a{position:relative}
  #siteNav a::after{content:""; position:absolute; left:0; right:0; bottom:-5px; height:1.5px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease)}
  #siteNav a:hover::after{transform:scaleX(1)}
  /* button micro-interaction */
  .btn{transition:transform .16s var(--ease), box-shadow .28s var(--ease), background .2s ease, border-color .2s ease}
  .btn:active{transform:translateY(1px) scale(.985)}
  .btn--primary:hover{box-shadow:0 12px 34px rgba(18,160,106,.45)}
  /* hero entrance (fails open; static under reduced motion) */
  .js .hero__content > *{opacity:0; will-change:transform,opacity}
  .js .hero.hero--in .hero__content > *{animation:sigRise .85s var(--ease) forwards}
  .js .hero.hero--in .hero__content > :nth-child(1){animation-delay:.05s}
  .js .hero.hero--in .hero__content > :nth-child(2){animation-delay:.14s; animation-name:sigTitle}
  .js .hero.hero--in .hero__content > :nth-child(3){animation-delay:.26s}
  .js .hero.hero--in .hero__content > :nth-child(4){animation-delay:.36s}
  .js .hero.hero--in .hero__content > :nth-child(5){animation-delay:.46s}
  @keyframes sigRise{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
  @keyframes sigTitle{from{opacity:0; transform:translateY(32px); filter:blur(16px)} to{opacity:1; transform:none; filter:blur(0)}}
  /* reticle cursor (desktop / fine pointer only) */
  #lzdot,#lzglow{display:none}
  @media (pointer:fine){
    body:not(.build-open){cursor:none}
    body input, body textarea, body select{cursor:text}
    #lzdot,#lzglow{position:fixed; top:0; left:0; border-radius:50%; display:block; pointer-events:none; opacity:0; transition:opacity .3s ease, background .2s ease, box-shadow .25s ease}
    #lzdot{width:9px; height:9px; margin:-4.5px 0 0 -4.5px; z-index:9999; background:#EAFFF6; box-shadow:0 0 7px 1px rgba(120,255,214,.9), 0 0 2px rgba(255,255,255,.9)}
    #lzglow{width:26px; height:26px; margin:-13px 0 0 -13px; z-index:9997; background:radial-gradient(circle, rgba(55,224,166,.5) 0%, rgba(55,224,166,0) 68%)}
    #lzdot.on,#lzglow.on{opacity:1}
    #lzdot.lock{background:#F4FFFB; box-shadow:0 0 11px 2px rgba(120,255,214,1), 0 0 4px rgba(255,255,255,1)}
    #lzglow.lock{background:radial-gradient(circle, rgba(55,224,166,.72) 0%, rgba(55,224,166,0) 72%)}
    body.build-open #lzdot, body.build-open #lzglow{opacity:0 !important}
  }
  @media (prefers-reduced-motion:reduce){
    .js .hero__content > *{opacity:1 !important; animation:none !important}
    #scrollprog{display:none}
    #siteNav a::after,.btn{transition:none}
  }

/* ==========================================================================
   18. foot-css
   ========================================================================== */
  /* refined light footer: clean panel, bigger mark, stronger type + layout */
  .site-foot{max-width:none; margin:0; padding:0; border-top:0; position:relative;
    background:var(--wash); color:var(--slate)}
  .site-foot::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
    background:linear-gradient(90deg, transparent, rgba(18,160,106,.55), transparent)}
  .foot__grid{max-width:var(--maxw); margin:0 auto; padding:74px 24px 50px; gap:52px; align-items:start;
    grid-template-columns:1.8fr 1fr 1fr 1.4fr}
  .foot__brand{padding-right:24px}
  .foot__brand .foot__logo{height:56px; opacity:1; margin-bottom:22px; filter:none}
  .foot__blurb{color:var(--slate); font-size:14px; line-height:1.75; max-width:34ch; margin:0}
  .foot__col h4{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
    color:var(--blue); margin:0 0 20px}
  .foot__col a{display:block; color:var(--ink); font-size:15px; font-weight:500; padding:8px 0; width:fit-content;
    transition:color .18s ease, transform .18s ease}
  .foot__col a:hover{color:var(--green); transform:translateX(4px)}
  .foot__cta{margin-top:22px}
  .foot__bar{max-width:var(--maxw); margin:0 auto; padding:26px 24px 36px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--faint)}
  .foot__bar span:last-child{color:var(--ink); font-weight:700; letter-spacing:.14em; text-transform:uppercase}
  @media(max-width:860px){ .foot__grid{grid-template-columns:1fr 1fr; gap:34px 40px; padding:56px 24px 40px} }
  @media(max-width:520px){ .foot__grid{grid-template-columns:1fr; gap:32px} .foot__bar{flex-direction:column; gap:8px} }

/* ==========================================================================
   19. scrub-css
   ========================================================================== */
  .film__pin{position:relative; height:220vh}
  .film__pin .vframe{will-change:transform}
  .film__sticky{position:sticky; top:0; height:100vh; display:flex; align-items:center}
  .film{padding-top:0; padding-bottom:0}
  @media (max-width:860px), (pointer:coarse), (prefers-reduced-motion:reduce){
    .film__pin{height:auto}
    .film__sticky{position:static; height:auto; display:block; padding:56px 0}
  }

/* ==========================================================================
   20. hcard-link-css
   ========================================================================== */
  .hcard{cursor:pointer}
  .hcard:hover{border-color:var(--green-dim); box-shadow:0 10px 26px rgba(18,42,71,.12); transform:translateY(-2px)}
  .hcard:focus-visible{outline:2px solid var(--green); outline-offset:3px}
  .hcard__go{display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); opacity:.66; transition:opacity .2s, transform .2s}
  .hcard:hover .hcard__go{opacity:1; transform:translateX(2px)}

/* ==========================================================================
   21. cmpblk-css
   ========================================================================== */
  .cmpblk{background:radial-gradient(130% 120% at 50% 0%, #12283f 0%, #0A1A2E 58%, #07132330 100%), #0A1A2E; color:#EAF2F0; border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:46px 32px 40px; margin:0 auto 64px}
  .cmpblk__in{max-width:1000px; margin:0 auto}
  .cmpblk__eye{color:#37E0A6; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:10px}
  .cmpblk__title{color:#F4F8FB; margin:0 0 8px}
  .cmpblk__title span{color:#37E0A6}
  .cmpblk__lede{color:#9FB6CD; font-size:14px; line-height:1.6; max-width:56ch; margin:0 0 26px}
  @media(max-width:600px){ .cmpblk{padding:34px 18px} }

/* ==========================================================================
   22. buildload-css
   ========================================================================== */
  .build-load{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
    background:radial-gradient(120% 100% at 50% 40%, #0E2A47 0%, #081726 68%, #05070A 100%); transition:opacity .45s ease}
  .build-load--gone{opacity:0; pointer-events:none}
  .build-load__logo{width:190px; max-width:52vw; filter:brightness(0) invert(1); opacity:.9; animation:blPulse 1.5s ease-in-out infinite}
  .build-load__bar{width:180px; height:2px; background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden; position:relative}
  .build-load__bar::after{content:""; position:absolute; top:0; bottom:0; left:-40%; width:40%; background:linear-gradient(90deg, transparent, #37E0A6, transparent); animation:blSlide 1.15s ease-in-out infinite}
  .build-load__txt{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#8FA6BD}
  @keyframes blPulse{0%,100%{opacity:.5}50%{opacity:1}}
  @keyframes blSlide{0%{left:-40%}100%{left:100%}}

/* ==========================================================================
   23. checkout-css2
   ========================================================================== */
.co .field.invalid input,.co .field.invalid select{border-color:#c0392b}.co-dl{margin-top:4px}
/* Busy button (contact/RMA while sending): dimmed, no hover/press feedback, wait cursor — same idea as .co-place.is-busy. */
.btn.is-busy,.btn.is-busy:hover,.btn.is-busy:active{opacity:.5; cursor:progress; transform:none; box-shadow:none}
.btn--primary.is-busy,.btn--primary.is-busy:hover{background:var(--green); border-color:var(--green)}
/* Bot honeypot — off-screen rather than display:none, which some bots skip. */
.hp-field{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.cf__btn.is-busy,.cf__btn.is-busy:hover{opacity:.5; cursor:progress}