/* ============================================================
   SEMZON ENGINEERING — Precision Blueprint v1.2
   Modern pass: inset rounded bands · bento · marquee · drawn
   lines · pills · watermark · scroll progress. GSAP-driven.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink-950:#0D0333; --ink-900:#140547; --brand-800:#1C0863; --brand-700:#2A1080;
  --brand-600:#3A22A8; --brand-400:#8A79CC; --brand-200:#D5CFEE; --brand-100:#EBE8F7; --brand-050:#F5F4FB;
  --accent-700:#840C0C; --accent-600:#9E1414;
  --paper:#FFFFFF; --mist:#F6F7F9; --line:#E4E6EB; --line-dk:#2B2260;
  --text-900:#14152B; --text-700:#2B2C42; --text-500:#4C4D60; --text-inv-soft:#C7C2E8;
  --font-display:"Bricolage Grotesque",Avenir,"Segoe UI",sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","Consolas",monospace;
  --sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:48px;--sp-12:64px;
  --sec-y:clamp(64px,8vw,116px);
  --container:1200px;--container-wide:1360px;--container-max:1680px;
  --margin:clamp(20px,5vw,110px);--gutter:clamp(16px,2.2vw,28px);
  --r-sm:12px;--r-md:20px;--r-lg:28px;--r-xl:36px;--r-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);--dur-1:150ms;--dur-2:280ms;--dur-3:650ms;
  --header-h:80px;--header-h-s:64px;--util-h:38px;
  --shadow-1:0 1px 2px rgba(13,3,51,.05),0 10px 30px -14px rgba(13,3,51,.16);
  --shadow-2:0 24px 70px -22px rgba(13,3,51,.35);
  --focus:2px solid var(--brand-800);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{font-size:clamp(15px,14.1px + .28vw,17.5px);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h-s) + 12px)}
body{font-family:var(--font-body);font-size:1rem;line-height:1.65;color:var(--text-700);
  background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none;padding:0}
a{color:var(--brand-800);text-decoration:none}
:focus-visible{outline:var(--focus);outline-offset:3px;border-radius:3px}
.theme-dark :focus-visible{outline-color:#fff}
::selection{background:var(--brand-800);color:#fff}

/* scroll progress */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;
  background:linear-gradient(90deg,var(--accent-700),var(--brand-600));
  transform:scaleX(0);transform-origin:left}

/* ---------- 3. TYPE ---------- */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-900);line-height:1.08;
  letter-spacing:-.015em;font-weight:700}
.display-1{font-size:clamp(2.35rem,1.05rem + 5vw,4.9rem);line-height:1.06;letter-spacing:-.022em;font-weight:800}
.display-1 .accent{color:var(--brand-600)}
.display-2{font-size:clamp(1.7rem,1.05rem + 2.9vw,3.1rem);line-height:1.12;letter-spacing:-.018em}
.wo{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.06em 0 .15em;margin:-.06em 0 -.15em}
.wo .w{display:inline-block;will-change:transform}
h3,.h3{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.3}
h4,.h4{font-family:var(--font-body);font-weight:600;font-size:1.075rem}
.lead{font-size:clamp(1rem,.94rem + .35vw,1.18rem);line-height:1.7;color:var(--text-700);max-width:56ch;text-wrap:pretty}
.small{font-size:.9rem;line-height:1.55;color:var(--text-500)}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-700);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent-700)}
.eyebrow--plain::before{display:none}
.theme-dark .eyebrow{color:#E08A8A}.theme-dark .eyebrow::before{background:#E08A8A}
.mono{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.02em}
.mono-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-500)}
.theme-dark{color:var(--text-inv-soft)}
.theme-dark h1,.theme-dark h2,.theme-dark h3,.theme-dark h4{color:#fff}
.theme-dark .lead{color:var(--text-inv-soft)}
.theme-dark .mono-label{color:var(--brand-400)}

/* ---------- 4. LAYOUT ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--margin)}
.container--wide{max-width:var(--container-wide)}
.section{padding-block:var(--sec-y);position:relative}
.section--tight{padding-block:calc(var(--sec-y)*.62)}
.section>.container,.section>.band{position:relative;z-index:1}
.sec-head{display:grid;gap:var(--sp-4);max-width:780px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head--split{max-width:none;grid-template-columns:1fr;align-items:end}

/* rounded inset band (modern full-width replacement) */
.band-wrap{padding-block:calc(var(--sec-y)*.3)}
.band{border-radius:clamp(22px,3vw,42px);margin-inline:clamp(8px,1.6vw,26px);
  padding-block:var(--sec-y);overflow:clip;position:relative}
.band--ink{background:var(--ink-950)}
.band--ink9{background:var(--ink-900)}
.band--cta::before{content:"";position:absolute;top:-140px;right:-120px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(158,20,20,.4),transparent 62%);filter:blur(30px)}
.band--cta::after{content:"";position:absolute;bottom:-160px;left:-140px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(58,34,168,.4),transparent 62%);filter:blur(34px)}

/* giant outlined section numerals */
@media (min-width:1024px){
  .section[data-idx]::after{content:attr(data-idx);position:absolute;top:14px;right:3vw;z-index:0;
    font:800 clamp(110px,13vw,190px)/1 var(--font-display);letter-spacing:-.02em;
    color:transparent;-webkit-text-stroke:1.5px var(--brand-100);pointer-events:none}
}

/* floating chip label */
.chip{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.94);color:var(--text-900);font-size:.8rem;font-weight:600;
  padding:9px 15px;border-radius:var(--r-pill);box-shadow:0 4px 18px rgba(13,3,51,.18);
  backdrop-filter:blur(6px);pointer-events:none;z-index:2;max-width:calc(100% - 24px);line-height:1.25}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-700)}

/* ---------- 5. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;
  min-height:52px;padding:0 28px;border-radius:var(--r-pill);border:1.5px solid transparent;
  position:relative;overflow:hidden;
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),translate var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease)}
.btn:active{translate:0 1px}
.btn .ar{transition:translate var(--dur-2) var(--ease)}
.btn:hover .ar{translate:3px -3px}
.btn--primary{background:var(--brand-800);color:#fff;box-shadow:0 12px 28px -12px rgba(28,8,99,.5)}
.btn--primary::after{content:"";position:absolute;inset:0;translate:-110% 0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transition:translate .7s var(--ease)}
.btn--primary:hover{background:var(--brand-700)}
.btn--primary:hover::after{translate:110% 0}
.btn--secondary{border-color:var(--brand-200);color:var(--brand-800)}
.btn--secondary:hover{border-color:var(--brand-800);background:var(--brand-050)}
.btn--inverse{background:#fff;color:var(--brand-800)}
.btn--inverse:hover{background:var(--brand-100)}
.btn--ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn--sm{min-height:44px;padding:0 20px;font-size:.875rem}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;color:var(--brand-800)}
.link-arrow .ar{transition:translate var(--dur-2) var(--ease)}
.link-arrow:hover .ar{translate:4px 0}

/* ---------- 6. HEADER / NAV ---------- */
.util{background:var(--ink-950);color:var(--text-inv-soft);height:var(--util-h);font-size:.78rem}
.util .container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.util a{color:#fff}
.util .mono{font-size:.68rem;color:var(--brand-400)}
.util-l{display:flex;gap:22px;align-items:center}
.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header .container--wide{display:flex;align-items:center;justify-content:space-between;
  gap:24px;height:var(--header-h);transition:height var(--dur-2) var(--ease)}
.is-condensed .header .container--wide{height:var(--header-h-s)}
.brand img{width:168px;transition:width var(--dur-2) var(--ease)}
.is-condensed .brand img{width:146px}
.nav{display:none}
.nav>ul{display:flex;align-items:center;gap:6px}
.nav a,.nav .nav-t{display:flex;align-items:center;gap:6px;padding:10px 14px;font-weight:500;
  font-size:1rem;color:var(--text-900);border-radius:var(--r-pill)}
.nav a:hover,.nav .nav-t:hover,.nav .nav-t[aria-expanded="true"]{color:var(--brand-800);background:var(--brand-050)}
.nav .cv{transition:rotate var(--dur-2) var(--ease)}
.nav .nav-t[aria-expanded="true"] .cv{rotate:180deg}
.header-cta{display:none}
.burger{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:var(--r-pill)}
.burger span{display:block;width:20px;height:2px;background:var(--text-900);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--text-900);transition:var(--dur-2) var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;rotate:45deg}
.burger[aria-expanded="true"] span::after{top:0;rotate:-45deg}

.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);
  border-radius:0 0 var(--r-md) var(--r-md);box-shadow:var(--shadow-1);max-height:min(74vh,620px);overflow:auto;opacity:0;translate:0 6px;visibility:hidden;
  transition:opacity var(--dur-2) var(--ease),translate var(--dur-2) var(--ease),visibility 0s var(--dur-2)}
.mega.open{opacity:1;translate:0 0;visibility:visible;transition-delay:0s}
.mega-in{display:grid;grid-template-columns:repeat(4,1fr) 1.15fr;gap:var(--sp-8);padding-block:var(--sp-8) var(--sp-6)}
.mega-in--solutions{grid-template-columns:repeat(2,1fr) 1.15fr}
.mega h5{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-500);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px}
.mega li a{display:block;padding:7px 0;font-size:.92rem;color:var(--text-700)}
.mega li a:hover{color:var(--brand-800)}
.mega-feat{border-left:1px solid var(--line);padding-left:var(--sp-8)}
.mega-feat .mf-img{background:var(--mist);border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center;padding:14px}
.mega-feat .mf-img img{mix-blend-mode:multiply;object-fit:contain;max-height:100%}
.mega-feat .mf-img img.ph{mix-blend-mode:normal;object-fit:cover;width:100%;height:100%;padding:0}
.mega-feat .mono{color:var(--text-500);margin-top:10px}
.mega-foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-block:14px 20px}
@media (min-width:1024px) and (max-width:1279px){
  .mega-in{grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
  .mega-feat{display:none}
  .mega-in--solutions{grid-template-columns:repeat(2,1fr)}
}

.drawer{position:fixed;inset:0;z-index:70;background:#fff;padding:calc(var(--header-h-s) + 16px) var(--margin) 120px;
  overflow:auto;translate:100% 0;transition:translate var(--dur-3) var(--ease);visibility:hidden}
.drawer.open{translate:0 0;visibility:visible}
.drawer-top{position:fixed;top:0;left:0;right:0;height:var(--header-h-s);display:flex;align-items:center;
  justify-content:space-between;padding-inline:var(--margin);background:#fff;border-bottom:1px solid var(--line)}
.drawer nav>ul>li{border-bottom:1px solid var(--line)}
.drawer nav a,.drawer .dr-t{display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:18px 0;font-family:var(--font-display);font-weight:700;font-size:1.35rem;color:var(--text-900)}
.dr-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-2) var(--ease)}
.dr-sub>ul{overflow:hidden}
.dr-t[aria-expanded="true"]+.dr-sub{grid-template-rows:1fr}
.dr-sub a{font-family:var(--font-body);font-weight:400;font-size:1rem;padding:10px 0;color:var(--text-700)}
.dr-contact{margin-top:28px;display:grid;gap:12px}

.action-bar{position:fixed;left:10px;right:10px;bottom:10px;z-index:65;display:grid;grid-template-columns:1fr 1fr 1.25fr;
  background:rgba(13,3,51,.92);backdrop-filter:blur(10px);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow-2);padding-bottom:env(safe-area-inset-bottom);
  translate:0 0;transition:translate var(--dur-3) var(--ease)}
.action-bar.hidden{translate:0 140%}
.action-bar a{display:grid;place-items:center;gap:2px;padding:10px 4px 12px;color:#fff;
  font-size:.72rem;font-weight:600;letter-spacing:.04em;border-left:1px solid var(--line-dk)}
.action-bar a:first-child{border-left:0}
.action-bar a.q{background:var(--accent-700)}
.action-bar svg{width:20px;height:20px}

/* ---------- 7. HERO — three-panel ---------- */
.hero{position:relative;overflow:clip;padding-block:clamp(36px,5vw,64px) clamp(16px,2.5vw,30px)}
.hero-grid{display:grid;gap:clamp(26px,3.2vw,48px);align-items:stretch}
.hero-copy{display:grid;gap:var(--sp-5);align-content:center;max-width:560px}
.hero-sub{max-width:46ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--sp-2)}
.hstats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(22px,3vw,44px);
  margin-top:clamp(16px,2.2vw,28px);padding-top:18px;border-top:1px solid var(--line)}
.hstats>div{display:grid;gap:2px}
.hstats b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.35rem,1rem + 1.2vw,2rem);
  color:var(--text-900);line-height:1}
.hstats span{font-size:.74rem;color:var(--text-500)}

.hero-main{position:relative;perspective:1100px}
.hm-card{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:.82;max-height:640px;width:100%;
  background:radial-gradient(130% 100% at 78% 4%,var(--brand-700) 0%,var(--ink-900) 46%,var(--ink-950) 100%);
  box-shadow:var(--shadow-2);will-change:transform;transform-style:preserve-3d}
.hm-card::before{content:"";position:absolute;inset:0;opacity:.14;
  background:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px) 0 0/100% 64px,
    linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px) 0 0/64px 100%;
  mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 78%)}
.hm-card::after{content:"";position:absolute;left:12%;bottom:16%;width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(158,20,20,.5),transparent 62%);filter:blur(28px)}
.hm-card img{position:absolute;left:50%;bottom:4%;translate:-50% 0;width:82%;max-height:88%;object-fit:contain;
  z-index:1;filter:drop-shadow(0 34px 44px rgba(0,0,0,.5))}
.hm-spec{position:absolute;left:18px;right:18px;top:16px;z-index:2;display:flex;justify-content:space-between;gap:10px;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}

.hero-rail{display:grid;gap:16px;align-content:start}
.rail-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:var(--font-display);font-weight:700;font-size:1.22rem;color:var(--text-900);line-height:1.2}
.rail-head .go{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);
  border-radius:50%;color:var(--brand-800);font-size:.9rem;transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.rail-head:hover .go{background:var(--brand-800);border-color:var(--brand-800);color:#fff}
.rail-card{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;background:var(--mist)}
.rail-card img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:scale var(--dur-3) var(--ease)}
.rail-card:hover img{scale:1.05}
.rail-card--lg{aspect-ratio:16/10.2}
.rail-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rail-duo .rail-card{aspect-ratio:1/1.04}
.rail-duo .chip{left:10px;bottom:10px;padding:7px 12px;font-size:.72rem}

.scroll-cue{display:grid;justify-items:center;gap:8px;margin-top:clamp(18px,2.6vw,30px);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.3em;color:var(--text-500)}
.scroll-cue i{display:block;width:1px;height:42px;background:var(--text-500)}

/* ---------- 8. FACTS CARD (S2) ---------- */
.facts{padding-block:calc(var(--sec-y)*.35)}
.facts-card{display:grid;grid-template-columns:1fr 1fr;background:var(--brand-050);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.facts-card li{display:grid;gap:4px;padding:22px var(--sp-5);border-top:1px solid var(--line)}
.facts-card li:nth-child(-n+2){border-top:0}
.facts-card b{font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--brand-800)}
.facts-card span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-500)}

/* ---------- 9. MARQUEE ---------- */
.marquee{overflow:clip;border-block:1px solid var(--line);padding-block:16px;background:#fff}
.mq-track{display:flex;width:max-content;will-change:transform}
.mq-track>span{display:flex;align-items:center;gap:26px;padding-right:26px;white-space:nowrap;
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-500)}
.mq-track i{font-style:normal;color:var(--accent-700)}

/* ---------- 10. PRODUCTION-LINE CARDS (S3) ---------- */
.grid{display:grid;gap:var(--gutter)}
.card{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
  transition:border-color var(--dur-2) var(--ease),translate var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.card:hover{border-color:var(--brand-200);translate:0 -6px;box-shadow:var(--shadow-2)}
.card-media{background:var(--mist);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.card-media img{will-change:transform}
.card-media--render img{mix-blend-mode:multiply;object-fit:contain;width:82%;height:82%}
.card-media--photo{aspect-ratio:3/2}
.card-media--photo img{object-fit:cover;width:100%;height:100%;filter:saturate(.88)}
.card-body{display:grid;gap:8px;padding:var(--sp-5) var(--sp-5) var(--sp-6);align-content:start}
.card-idx{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-500)}
.card-spec{font-family:var(--font-mono);font-size:.78rem;color:var(--brand-800)}
.card .link-arrow{margin-top:6px;font-size:.875rem}
@media (min-width:1024px){
  .grid--3 .card:nth-child(odd) .card-media{aspect-ratio:4/3.5}
  .grid--3 .card:nth-child(even) .card-media{aspect-ratio:4/2.85}
}

/* ---------- 11. BENTO MACHINERY (S5) ---------- */
.bento{display:grid;gap:var(--gutter);grid-template-columns:1fr 1fr}
.bx{position:relative;display:grid;grid-template-rows:1fr auto;gap:12px;padding:16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  transition:border-color var(--dur-2) var(--ease),translate var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.bx:hover{border-color:var(--brand-200);translate:0 -5px;box-shadow:var(--shadow-1)}
.bx figure{background:var(--mist);border-radius:var(--r-sm);display:grid;place-items:center;overflow:hidden;min-height:96px}
.bx figure img{mix-blend-mode:multiply;object-fit:contain;max-height:86px;padding:8px;will-change:transform}
.bx b{display:block;color:var(--text-900);font-size:.95rem}
.bx>span .mono,.bx-cap .mono{font-size:.68rem;color:var(--text-500)}
.bx--xl{grid-column:span 2;padding:clamp(20px,2.4vw,30px);
  background:linear-gradient(160deg,var(--brand-050),#fff 62%)}
.bx--xl figure{background:transparent;min-height:0}
.bx--xl figure img{mix-blend-mode:normal;max-height:min(46vw,380px);padding:0;
  filter:drop-shadow(0 26px 34px rgba(13,3,51,.22))}
.bx--xl .bx-cap{display:flex;justify-content:space-between;align-items:end;gap:14px}
.bx--xl h3{font-size:clamp(1.25rem,1rem + 1vw,1.7rem)}
.bx-go{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;
  border:1.5px solid var(--brand-200);color:var(--brand-800);font-size:1rem;
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.bx:hover .bx-go{background:var(--brand-800);border-color:var(--brand-800);color:#fff}
.bx--wide{grid-column:span 2;grid-template-rows:1fr;padding:0;min-height:190px}
.bx--wide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
@media (min-width:1024px){
  .bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(180px,auto)}
  .bx--xl{grid-column:1/3;grid-row:1/3}
  .bx--wide{grid-column:3/5}
}

/* ---------- 12. PLANT FLOW (S4) ---------- */
.flow-rail{position:relative;display:grid;grid-template-columns:repeat(6,1fr);
  border-block:1px solid var(--line-dk);margin-bottom:var(--sp-8)}
.flow-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--accent-600);z-index:1}
.flow-stage{position:relative;display:grid;gap:6px;justify-items:start;text-align:left;
  padding:20px 16px 22px;border-left:1px solid var(--line-dk);color:var(--text-inv-soft)}
.flow-stage:first-child{border-left:0}
.flow-stage .n{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--brand-400)}
.flow-stage .t{font-family:var(--font-display);font-weight:700;font-size:.98rem;color:#fff;line-height:1.2}
.flow-stage:hover{background:rgba(255,255,255,.04)}
.flow-stage[aria-selected="true"]{background:rgba(255,255,255,.06)}
.flow-panel{display:grid;gap:var(--sp-8);align-items:start;min-height:230px}
.flow-desc h3{font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);margin-bottom:10px}
.flow-desc p{max-width:52ch}
.flow-mach h5{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-400);margin-bottom:12px}
.flow-mach ul{display:grid;gap:8px}
.flow-mach a{display:flex;justify-content:space-between;gap:12px;align-items:center;
  border:1px solid var(--line-dk);border-radius:var(--r-sm);padding:11px 14px;color:#fff;font-size:.9rem;
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.flow-mach a:hover{border-color:var(--brand-400);background:rgba(255,255,255,.05)}
.flow-mach .mono{color:var(--brand-400);font-size:.7rem}
.flow-foot{margin-top:var(--sp-8);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.flow-foot .mono{color:var(--brand-400)}

/* ---------- 13. TURNKEY STEPS (S6) ---------- */
.steps-wrap{position:relative}
.steps-line-bg,.steps-line{display:none}
.steps{display:grid;gap:14px}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px 20px;display:grid;gap:8px;
  transition:translate var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.step:hover{translate:0 -4px;box-shadow:var(--shadow-1)}
.step .dot{display:none}
.step .n{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--accent-700)}
.step h4{font-family:var(--font-display);font-weight:700;font-size:1.1rem}
.step p{font-size:.92rem;color:var(--text-500);max-width:34ch}
@media (min-width:768px){
  .steps-wrap{padding-top:26px}
  .steps-line-bg,.steps-line{display:block;position:absolute;top:6px;left:1%;right:1%;height:2px;border-radius:2px}
  .steps-line-bg{background:var(--line)}
  .steps-line{background:var(--accent-600);transform:scaleX(0);transform-origin:left;right:auto;width:98%}
  .steps{grid-template-columns:repeat(5,1fr);gap:var(--gutter)}
  .step .dot{display:block;position:absolute;top:-26px;left:22px;width:12px;height:12px;border-radius:50%;
    background:var(--paper);border:2px solid var(--brand-200)}
}

/* ---------- 14. FEATURE + STATS (S7) ---------- */
.feature .container--wide{display:grid;gap:clamp(40px,5vw,80px)}
.feature-copy{display:grid;gap:var(--sp-5);align-content:center}
.feature-fig{position:relative;justify-self:center;border-radius:var(--r-md);overflow:hidden;max-width:330px;
  box-shadow:var(--shadow-2);rotate:-2deg}
.feature-fig img{width:100%;object-fit:cover;aspect-ratio:4/5;scale:1.06;will-change:transform}
.feature-facts{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand-400)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-dk);
  border:1px solid var(--line-dk);border-radius:var(--r-md);overflow:hidden;margin-top:clamp(48px,6vw,80px)}
.stat{display:grid;gap:6px;padding:26px 22px;background:rgba(255,255,255,.03)}
.stat b{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,1.4rem + 2vw,3rem);color:#fff;line-height:1}
.stat b sup{font-size:.5em;color:var(--brand-400)}
.stat span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-400)}
@media (min-width:768px){.stats{grid-template-columns:repeat(4,1fr)}}

/* ---------- 15. INDUSTRY PILLS (S8) ---------- */
.pillbox{display:flex;flex-wrap:wrap;gap:12px;max-width:900px}
.pill{display:inline-flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:13px 20px;color:var(--text-900);font-weight:600;font-size:.95rem;background:#fff;
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),translate var(--dur-2) var(--ease)}
.pill .mono{font-size:.64rem;letter-spacing:.1em;color:var(--text-500)}
.pill:hover{background:var(--brand-800);border-color:var(--brand-800);color:#fff;translate:0 -3px}
.pill:hover .mono{color:var(--brand-200)}

/* ---------- 16. QUALITY (S9) ---------- */
.quality-grid{display:grid;gap:var(--gutter)}
.iso{background:linear-gradient(165deg,var(--brand-050),#fff 70%);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(28px,3.5vw,44px);display:grid;gap:10px;align-content:center;text-align:center}
.iso .big{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.4rem);color:var(--brand-800)}
.qa-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px)}
.qa-p{display:grid;gap:6px;padding-block:16px;border-top:1px solid var(--line)}
.qa-p:first-of-type{border-top:0;padding-top:0}
.qa-p b{color:var(--text-900)}
.qa-p p{font-size:.92rem;color:var(--text-500)}
@media (min-width:768px){.quality-grid{grid-template-columns:.85fr 1.15fr;align-items:stretch}}

/* ---------- 17. GLOBAL (S10) ---------- */
.globe{display:grid;gap:var(--sp-10)}
.mk{display:grid;gap:2px;padding:14px 0;border-top:1px solid var(--line)}
.mk:first-child{border-top:0}
.mk b{color:var(--text-900)}
.mk span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-500)}
.gmap-card{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--brand-050);overflow:clip;aspect-ratio:16/11;min-height:300px}
#gmap{position:absolute;inset:0}
.gmap-fallback{position:absolute;inset:0;display:grid;padding:8px;margin:0}
.gmap-fallback svg{width:100%;height:100%}
.gmap-note{position:absolute;left:12px;bottom:12px;z-index:2;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-500);background:rgba(255,255,255,.92);padding:6px 11px;border-radius:var(--r-pill);box-shadow:0 2px 10px rgba(13,3,51,.12)}
.gmap-card.live .gmap-fallback,.gmap-card.live .gmap-note{display:none}
@media (min-width:768px){.globe{grid-template-columns:1fr 1fr;align-items:center}}

/* ---------- 18. LEADERSHIP (S11) ---------- */
.lead-band{background:linear-gradient(180deg,var(--brand-050),#fff);border-block:1px solid var(--line)}
.lead-grid{display:grid;gap:var(--sp-10);align-items:center}
.lead-fig{max-width:300px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-2);rotate:2deg}
.lead-fig img{aspect-ratio:4/3;object-fit:cover;width:100%}
.lead-q{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,1rem + 1.4vw,1.9rem);
  line-height:1.3;color:var(--text-900)}
.lead-q .qm{color:var(--accent-700)}
.lead-by{display:grid;gap:2px;margin-top:var(--sp-5)}
.lead-by b{color:var(--text-900)}
@media (min-width:768px){.lead-grid{grid-template-columns:auto 1fr}}

/* ---------- 19. FAQ (S12) ---------- */
.faq{max-width:860px;display:grid;gap:12px}
.faq-item{background:var(--mist);border:1px solid transparent;border-radius:18px;padding:2px 20px;
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.faq-item.open{background:#fff;border-color:var(--brand-200);box-shadow:var(--shadow-1)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%;
  padding:18px 2px;text-align:left;font-weight:600;font-size:1.02rem;color:var(--text-900)}
.faq-q .pm{position:relative;width:14px;height:14px;flex:none}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--brand-800);inset:6px 0;transition:rotate var(--dur-2) var(--ease)}
.faq-q .pm::after{rotate:90deg}
.faq-q[aria-expanded="true"] .pm::after{rotate:0deg}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-2) var(--ease)}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 40px 18px 2px;color:var(--text-500);max-width:66ch}
.faq-q[aria-expanded="true"]+.faq-a{grid-template-rows:1fr}

/* ---------- 20. CTA (S13) ---------- */
.cta-band{text-align:center}
.cta-band .container{display:grid;gap:var(--sp-6);justify-items:center;max-width:820px;position:relative;z-index:1}
.cta-band p{max-width:52ch}
.cta-acts{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cta-band .mono{color:var(--brand-400)}

/* ---------- 21. FOOTER ---------- */
.footer{background:var(--ink-950);color:var(--text-inv-soft);font-size:.92rem;
  border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:calc(var(--sec-y)*.3);overflow:clip}
.f-mark{font-family:var(--font-display);font-weight:800;text-align:center;line-height:.9;
  font-size:clamp(56px,15vw,230px);letter-spacing:-.02em;color:transparent;
  -webkit-text-stroke:1px var(--line-dk);user-select:none;padding-top:clamp(30px,4vw,54px);
  margin-bottom:calc(clamp(30px,4vw,54px)*-.4)}
.footer-grid{display:grid;gap:var(--sp-10);padding-block:clamp(40px,5vw,64px) var(--sp-10)}
.f-brand{display:grid;gap:14px;align-content:start}
.f-logo{width:min(210px,58vw);height:auto}
.f-word{font-family:var(--font-display);font-weight:800;font-size:1.45rem;color:#fff;letter-spacing:.02em}
.f-word .o{color:var(--accent-600)}
.footer h5{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-400);margin-bottom:14px}
.footer li a{display:inline-block;padding:5px 0;color:var(--text-inv-soft)}
.footer li a:hover{color:#fff}
.f-contact li{display:grid;gap:1px;padding:8px 0}
.f-contact b{color:#fff;font-weight:500}
.f-bottom{border-top:1px solid var(--line-dk);padding-block:20px calc(20px + 84px);display:grid;gap:8px;
  font-size:.78rem;color:var(--brand-400)}
.f-bottom a{color:inherit}
.f-bottom a:hover{color:#fff}
.f-bottom .mono{font-size:.66rem;letter-spacing:.1em}
@media (min-width:768px){
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1.2fr}
  .f-bottom{grid-template-columns:1fr auto;padding-bottom:20px}
}

/* ---------- 21b. SUBPAGE SCAFFOLDING ---------- */
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-500);margin-bottom:var(--sp-5)}
.crumb a{color:inherit}.crumb a:hover{color:var(--brand-800)}
.crumb i{font-style:normal;color:var(--brand-200)}
.page-hero{padding-block:clamp(36px,5vw,60px) clamp(22px,3vw,38px)}
.page-hero .display-1{font-size:clamp(1.95rem,1.1rem + 3.1vw,3.6rem)}
.page-hero .lead{margin-top:14px}
.page-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tag{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-700);background:#fff}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-700)}
.page-grid{display:grid;gap:clamp(26px,4vw,52px)}
.pg-media{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,var(--brand-050),#fff 62%);border:1px solid var(--line);display:grid;place-items:center;min-height:280px;padding:clamp(18px,3vw,32px)}
.pg-media img{mix-blend-mode:multiply;max-height:420px;object-fit:contain}
.pg-media img.cut{mix-blend-mode:normal;filter:drop-shadow(0 24px 30px rgba(13,3,51,.2))}
.pg-media img.ph{mix-blend-mode:normal;object-fit:cover;width:100%;height:100%;position:absolute;inset:0;padding:0}
.pg-media .code{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,6vw,4.2rem);color:var(--brand-200);letter-spacing:-.02em}
.prose{max-width:64ch}
.prose p{margin-bottom:14px}
.prose p:last-child{margin-bottom:0}
.spec-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-size:.95rem;background:#fff}
.spec-table th,.spec-table td{padding:13px 16px;text-align:left;border-top:1px solid var(--line);vertical-align:top}
.spec-table tr:first-child th,.spec-table tr:first-child td{border-top:0}
.spec-table th{width:42%;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-500);background:var(--mist);font-weight:500}
.spec-table td{color:var(--text-900);font-weight:500}
.feat-list{display:grid;gap:10px}
.feat-list li{position:relative;padding-left:20px;color:var(--text-700)}
.feat-list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--brand-100);border:2px solid var(--accent-700)}
.h-min{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--text-900);margin-bottom:12px}
.form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-500)}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:13px 16px;background:#fff;color:var(--text-900);transition:border-color var(--dur-2) var(--ease)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand-800)}
.form-note{font-size:.8rem;color:var(--text-500)}
.contact-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,30px);background:var(--brand-050);display:grid;gap:14px;align-content:start}
.proj-facts{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-500)}
@media (min-width:900px){
  .page-grid{grid-template-columns:1.05fr .95fr;align-items:start}
  .page-grid--rev{grid-template-columns:.95fr 1.05fr}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
}

/* ---------- 22. TOAST ---------- */
.toast{position:fixed;left:50%;bottom:96px;translate:-50% 20px;z-index:80;background:var(--text-900);color:#fff;
  padding:12px 20px;font-size:.85rem;border-radius:var(--r-pill);opacity:0;pointer-events:none;
  transition:opacity var(--dur-2) var(--ease),translate var(--dur-2) var(--ease)}
.toast.show{opacity:1;translate:-50% 0}

/* ============================================================
   MQ — structure
   ============================================================ */
@media (min-width:480px){
  .facts-card{grid-template-columns:repeat(4,1fr)}
  .facts-card li{border-top:0;border-left:1px solid var(--line)}
  .facts-card li:first-child{border-left:0}
}
@media (max-width:479px){
  .hstats{grid-template-columns:repeat(3,1fr);gap:12px}
  .hstats span{font-size:.68rem}
  .rail-duo{gap:12px}
  .rail-duo .chip{font-size:.66rem;padding:6px 10px}
  .hero-ctas{gap:10px}
  .hero-ctas .btn{flex:1 1 100%;justify-content:center}
  .btn{min-height:50px;padding:0 22px}
  .facts-card li:nth-child(2n){border-left:1px solid var(--line)}
  .sec-head{margin-bottom:30px}
  .bento{gap:12px}
  .flow-panel{min-height:0}
}
@media (min-width:768px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr 1fr}
  .hero-copy{grid-column:1/-1;max-width:640px}
  .sec-head--split{grid-template-columns:1fr auto}
  .flow-panel{grid-template-columns:1.1fr .9fr}
}
@media (min-width:1024px){
  .nav{display:block}
  .header-cta{display:inline-flex}
  .burger,.action-bar{display:none}
  .grid--3{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1200px){
  .hero-grid{grid-template-columns:1.02fr 1.12fr .82fr;align-items:center}
  .hero-copy{grid-column:auto;max-width:none}
}
@media (max-width:1023px){
  :root{--header-h:64px}
  .util{display:none}
  .flow-rail{grid-template-columns:1fr;border:1px solid var(--line-dk);border-radius:var(--r-md);overflow:hidden}
  .flow-progress{display:none}
  .flow-stage{border-left:0;border-top:1px solid var(--line-dk);grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:15px 16px}
  .flow-stage:first-child{border-top:0}
  .flow-stage::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-600);
    scale:1 0;transform-origin:top;transition:scale var(--dur-2) var(--ease)}
  .flow-stage[aria-selected="true"]::after{scale:1 1}
}
@media (min-width:1920px){
  .container,.container--wide{max-width:var(--container-max)}
  :root{--sec-y:140px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .card:hover,.bx:hover,.step:hover,.pill:hover{translate:0 0}
}

/* ---------- print ---------- */
@media print{
  .header,.util,.action-bar,.drawer,.cta-band,.toast,.scroll-cue,.marquee,.scroll-progress{display:none}
  .theme-dark,.band--ink,.band--ink9{background:#fff;color:#000}
}


/* ================================================================
   24. V1.5 FIXES & OVERRIDES
   ================================================================ */
/* never allow sideways scroll anywhere */
html,body{overflow-x:clip}

/* full-width layout on large screens + bigger type on very large */
:root{--container:1440px;--container-wide:1800px;--container-max:1920px;--margin:clamp(20px,4vw,150px)}
@media (min-width:1800px){html{font-size:18.5px}}

/* sticky contact bar: fits every phone, never overflows */
.action-bar{left:8px;right:8px;bottom:8px;max-width:560px;margin-inline:auto}
.action-bar a{font-size:.76rem;letter-spacing:.02em;padding:9px 2px 11px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.action-bar svg{width:18px;height:18px}

/* footer watermark: soft fill (stroke rendered badly on some devices) */
.f-mark{color:rgba(199,194,232,.09);-webkit-text-fill-color:rgba(199,194,232,.09);-webkit-text-stroke:0 transparent}

/* dropdown polish */
.mega{max-height:min(84vh,700px)}
.nav-t .cv{transition:rotate .25s var(--ease)}
.nav-t[aria-expanded="true"] .cv{rotate:180deg}
.nav-t[aria-expanded="true"]{background:var(--brand-050);color:var(--brand-800)}

/* fixed image frames — swap any image of the same category size, layout never breaks */
.card-media{aspect-ratio:16/10;height:auto}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-media--render{display:grid;place-items:center}
.card-media--render img{width:auto;height:auto;max-width:76%;max-height:78%;object-fit:contain}
.pg-media{aspect-ratio:4/3;min-height:0}
.pg-media img:not(.ph){max-width:86%;max-height:84%}
.bx figure{aspect-ratio:4/3;height:auto;display:grid;place-items:center}
.bx figure img{max-width:80%;max-height:82%;object-fit:contain}
.bx figure img.ph{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover}
.bx--xl figure,.bx--wide figure{aspect-ratio:auto}
.lead-fig img{aspect-ratio:3/2;width:100%;object-fit:cover}
.mega-feat .mf-img{aspect-ratio:4/3}

/* readability: micro text raised site-wide */
.mono{font-size:.74rem}
.util-l a{font-size:.85rem}
.eyebrow{font-size:.78rem}
.mono-label{font-size:.72rem}
.hstats span{font-size:.78rem}
.card-idx{font-size:.78rem}
.card-spec{font-size:.9rem}
.tag{font-size:.74rem}
.crumb{font-size:.72rem}
.gmap-note{font-size:.68rem}
.spec-table{font-size:1rem}
.spec-table th{font-size:.72rem}
.field label{font-size:.72rem}
.form-note{font-size:.86rem}
.proj-facts{font-size:.76rem}
.steps .n{font-size:.8rem}
.pill{font-size:.86rem}
.f-bottom{font-size:.85rem}
.small{font-size:.92rem}
.facts-card li span{font-size:.76rem}
#flow .mono,.flow-desc .mono{font-size:.78rem}
@media (max-width:479px){
  .hstats span{font-size:.7rem}
  .action-bar a{font-size:.72rem}
}


/* ================================================================
   25. AURORA / PREMIUM VISUAL SYSTEM  v2.0
   Luminous light aesthetic — glass, gradient glow, depth.
   Additive only: colours, gradients, borders, shadows, filters.
   ================================================================ */
:root{
  --grad-brand:linear-gradient(120deg,#2A1080 0%,#3A22A8 46%,#6C4FE0 100%);
  --grad-accent:linear-gradient(120deg,#840C0C 0%,#B81A1A 100%);
  --grad-sheen:linear-gradient(135deg,rgba(108,79,224,.16),rgba(132,12,12,.10));
  --glow-brand:0 0 0 1px rgba(108,79,224,.16),0 18px 50px -18px rgba(58,34,168,.5);
  --glass:saturate(160%) blur(14px);
}

/* page atmosphere: faint blueprint grid + soft colour wash */
body{
  background:
    radial-gradient(1200px 680px at 78% -8%, rgba(108,79,224,.09), transparent 60%),
    radial-gradient(1000px 620px at -6% 12%, rgba(132,12,12,.05), transparent 55%),
    linear-gradient(180deg,#FBFAFE 0%, #FFFFFF 22%);
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(28,8,99,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(28,8,99,.028) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(1100px 700px at 50% -5%,#000,transparent 78%);
          mask-image:radial-gradient(1100px 700px at 50% -5%,#000,transparent 78%);
}

/* header: real glass + luminous hairline */
.header{
  background:rgba(255,255,255,.72);
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(108,79,224,.35),rgba(132,12,12,.25),transparent) 1;
}
.header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(108,79,224,.5),transparent);opacity:.6}

/* eyebrow: glowing accent dot */
.eyebrow{color:var(--brand-600)}
.eyebrow::before{background:var(--grad-accent)!important;box-shadow:0 0 10px rgba(158,20,20,.55)}

/* gradient accent word in display headings */
.display-1 .accent,.display-2 .accent{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* BUTTONS — gradient + glow + sheen */
.btn--primary{
  background:var(--grad-brand);border:0;
  box-shadow:0 10px 30px -10px rgba(58,34,168,.6),0 0 0 1px rgba(108,79,224,.25) inset}
.btn--primary:hover{filter:brightness(1.07) saturate(1.05);box-shadow:0 16px 44px -12px rgba(58,34,168,.7)}
.btn--secondary{background:rgba(255,255,255,.6);backdrop-filter:blur(6px);border-color:var(--brand-200)}
.btn--secondary:hover{border-color:var(--brand-600);background:rgba(245,244,251,.9);box-shadow:var(--glow-brand)}
.btn--inverse{box-shadow:0 12px 40px -12px rgba(0,0,0,.55)}

/* HERO product card — neon ring + gradient backdrop */
.hm-card{
  background:linear-gradient(165deg,#160A4A 0%,#0D0333 62%);
  box-shadow:0 40px 90px -30px rgba(13,3,51,.7),0 0 0 1px rgba(108,79,224,.25)}
.hm-card::after{background:radial-gradient(circle,rgba(120,90,240,.55),transparent 68%)!important;opacity:.9!important}
.hm-card::before{opacity:.2!important}
.hero-main::after{content:"";position:absolute;inset:-8% -6%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 140deg,rgba(108,79,224,.0),rgba(108,79,224,.18),rgba(132,12,12,.12),rgba(108,79,224,.0));
  filter:blur(46px);border-radius:50%}

/* CARDS / TILES — glass surface, gradient hover border + lift glow */
.card,.bx,.qa-card,.contact-card,.iso,.spec-table,.mega{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.72));
  backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px)}
.card{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.card:hover,.bx:hover{
  border-color:transparent;
  box-shadow:var(--glow-brand);
  transform:translateY(-6px)}
.card:hover{outline:1px solid rgba(108,79,224,.25);outline-offset:-1px}
.bx::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(108,79,224,.4),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s var(--ease)}
.bx:hover::after{opacity:1}

/* tags & pills — glassy gradient */
.tag{background:linear-gradient(180deg,#fff,rgba(245,244,251,.8));border-color:rgba(108,79,224,.22)}
.pill{border-color:rgba(108,79,224,.22)}
.pill:hover{border-color:var(--brand-600);box-shadow:0 8px 22px -12px rgba(58,34,168,.5)}

/* dark bands — deeper gradient + aurora glow */
.band--ink,.band--ink9,.footer{
  background:
    radial-gradient(900px 500px at 82% -20%,rgba(108,79,224,.30),transparent 60%),
    radial-gradient(700px 460px at 0% 120%,rgba(132,12,12,.22),transparent 60%),
    linear-gradient(165deg,#160A4A,#0D0333)!important}
.band--cta::before{background:radial-gradient(circle,rgba(120,90,240,.5),transparent 68%)!important}
.band--cta::after{background:radial-gradient(circle,rgba(158,20,20,.4),transparent 66%)!important}

/* section number watermark + footer mark faint luminous */
.f-mark{color:rgba(120,90,240,.10)!important;-webkit-text-fill-color:rgba(120,90,240,.10)!important}
.footer{border-top:1px solid rgba(108,79,224,.25)}
.footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(108,79,224,.6),rgba(132,12,12,.4),transparent)}

/* map card glow */
.gmap-card{box-shadow:0 30px 70px -30px rgba(28,8,99,.4);border-color:rgba(108,79,224,.22)}

/* scroll progress a touch brighter */
.scroll-progress{background:linear-gradient(90deg,#B81A1A,#6C4FE0,#3A22A8)!important;height:3px}

/* custom scrollbar */
*{scrollbar-width:thin;scrollbar-color:#9A8BE0 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:linear-gradient(#6C4FE0,#3A22A8);border-radius:20px;border:2px solid #fff}
::-webkit-scrollbar-track{background:transparent}

/* link-arrow gradient on hover */
.link-arrow:hover{color:var(--brand-600)}

/* sticky action bar — glass + glow to match */
.action-bar{
  background:linear-gradient(180deg,rgba(22,10,74,.92),rgba(13,3,51,.96));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 44px -14px rgba(13,3,51,.6),0 0 0 1px rgba(108,79,224,.3)}
.action-bar a.q{background:var(--grad-accent)}

@media (prefers-reduced-motion:reduce){
  .hero-main::after{animation:none}
}


/* ================================================================
   26. WORDPRESS / ELEMENTOR BRIDGE
   Maps Elementor + Hello Elementor markup onto the design tokens
   above so an Elementor-built layout renders identically to the
   original coded build. Nothing here changes the design — it only
   stops the platform's own defaults from overriding it.
   ================================================================ */

/* Hello Elementor sets its own page wrapper padding; the design system
   owns horizontal rhythm through --margin on .container. */
.site-main,
.page-content,
.entry-content > .elementor { padding: 0; margin: 0; max-width: none; }

/* Elementor "boxed" containers inherit our container tokens so
   --margin / --container stay the single source of truth for width. */
.e-con.e-con--boxed > .e-con-inner,
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container-wide);
  padding-inline: var(--margin);
  margin-inline: auto;
}

/* Elementor injects a default 20px gap between widgets which breaks the
   design system's explicit grid gaps. Reset it; spacing comes from tokens. */
.e-con > .e-con-inner { gap: 0; }
.elementor-widget:not(:last-child) { margin-block-end: 0; }

/* Elementor's own container query padding must not double up with .container. */
.e-con .container,
.e-con .container--wide { padding-inline: 0; max-width: none; }

/* Sticky header must clear the WP admin bar for logged-in editors. */
.admin-bar .header { top: 32px; }
.admin-bar .drawer,
.admin-bar .drawer-top { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .header { top: 46px; }
  .admin-bar .drawer,
  .admin-bar .drawer-top { top: 46px; }
}

/* Elementor Nav Menu widget → desktop nav pill styling. */
.header .elementor-nav-menu { display: flex; align-items: center; gap: 6px; }
.header .elementor-nav-menu a.elementor-item {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  font-weight: 500; font-size: 1rem; color: var(--text-900);
  border-radius: var(--r-pill); background: none; border: 0;
}
.header .elementor-nav-menu a.elementor-item:hover,
.header .elementor-nav-menu a.elementor-item.elementor-item-active,
.header .elementor-nav-menu a.elementor-item.highlighted {
  color: var(--brand-800); background: var(--brand-050);
}
/* Elementor draws its own underline/pointer — the design uses a pill only. */
.header .e--pointer-underline .elementor-item:after,
.header .e--pointer-double-line .elementor-item:before,
.header .e--pointer-double-line .elementor-item:after { display: none; }

/* Elementor Icon List → .feat-list bullet treatment when the class is applied. */
.feat-list .elementor-icon-list-items { display: grid; gap: 10px; }
.feat-list .elementor-icon-list-item { position: relative; padding-left: 20px; color: var(--text-700); }
.feat-list .elementor-icon-list-item::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--brand-100); border: 2px solid var(--accent-700);
}
.feat-list .elementor-icon-list-icon { display: none; }

/* Elementor Loop Grid used for the bento / related tiles — the design
   controls the columns, so neutralise Elementor's own grid variables. */
.bento .elementor-grid,
.grid .elementor-grid { display: contents; }

/* WordPress core alignment + caption classes inside .prose. */
.prose .alignleft { float: left; margin: 0 var(--sp-5) var(--sp-4) 0; }
.prose .alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-5); }
.prose .aligncenter { margin-inline: auto; }
.prose figcaption,
.wp-caption-text { font-size: .85rem; color: var(--text-500); margin-top: 8px; }

/* Elementor form widget → the design's .field styling. */
.form .elementor-field-group { display: grid; gap: 6px; }
.form .elementor-field-group > label {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-500);
}
.form .elementor-field-textual {
  width: 100%; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 13px 16px; background: #fff; color: var(--text-900);
  transition: border-color var(--dur-2) var(--ease); min-height: auto;
}
.form .elementor-field-textual:focus { outline: none; border-color: var(--brand-800); box-shadow: none; }
.form textarea.elementor-field-textual { min-height: 130px; resize: vertical; }

/* Skip link — Hello Elementor prints one; keep it accessible but silent. */
.skip-link:focus { z-index: 300; }

/* Elementor editor: keep the sticky header from covering the panel handles. */
.elementor-editor-active .header { position: relative; }


/* ================================================================
   27. RESPONSIVE RANGES — the six required layout bands
   Elementor's custom breakpoints are registered to match these in
   the SEMZON Setup plugin, so the editor's device switcher and this
   stylesheet always agree.
   Elementor requires its breakpoint slots to ascend in a fixed order
   (mobile, mobile_extra, tablet, tablet_extra, laptop, widescreen), so
   the required ranges map onto the slots like this:
     mobile        < 576      slot max 575
     mobile_extra  576 – 767  slot max 767
     tablet        768 – 1023 slot max 1023
     tablet_extra  1024 – 1279  slot max 1279  ("Laptop" in the design)
     laptop        1280 – 1535  slot max 1535  ("Laptop L" in the design)
     widescreen    1536+      slot min 1536
   ================================================================ */

/* Mobile landscape — recover horizontal room the portrait rules gave up. */
@media (min-width: 576px) and (max-width: 767px) {
  .hero-ctas .btn { flex: 0 1 auto; }
  .rail-duo { gap: 16px; }
  .facts-card { grid-template-columns: repeat(4, 1fr); }
  .facts-card li { border-top: 0; border-left: 1px solid var(--line); }
  .facts-card li:first-child { border-left: 0; }
}

/* Laptop L — widen the shell before the 1536+ jump so 1280–1535 doesn't
   inherit the 1024 container and look narrow on common 1440 screens. */
@media (min-width: 1280px) and (max-width: 1535px) {
  :root { --container: 1240px; --container-wide: 1440px; }
}

/* Wide screen — the original expands at 1800/1920; 1536+ steps toward it
   so ultrawide monitors don't strand content in a narrow column. */
@media (min-width: 1536px) {
  :root { --container: 1440px; --container-wide: 1660px; }
}
@media (min-width: 1920px) {
  :root { --container: 1440px; --container-wide: 1800px; --container-max: 1920px; }
}

/* Guarantee no accidental horizontal scrollbar at any width, including
   inside Elementor containers that set their own overflow. */
html, body { overflow-x: clip; }
.e-con, .elementor-section { max-width: 100vw; }

/* Wide content that legitimately overflows scrolls inside its own box
   rather than pushing the page sideways. */
.spec-table { display: block; overflow-x: auto; }
@media (min-width: 576px) { .spec-table { display: table; overflow-x: visible; } }

/* Build notes carried by the shipped Elementor templates. They mark where a
   dynamic binding or Loop Grid belongs. Visible while editing, never on the
   front end — so a template left half-wired degrades to a blank slot rather
   than printing instructions to a visitor. */
.semzon-build-note { display: none; }
.elementor-editor-active .semzon-build-note,
.elementor-editor-preview .semzon-build-note {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.5;
  color: #7A6BB8;
  background: repeating-linear-gradient(45deg, #F5F4FB, #F5F4FB 8px, #EDEBF7 8px, #EDEBF7 16px);
  border: 1px dashed var(--brand-200);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}


/* ================================================================
   28. CLASSIC SECTION BRIDGE
   The shipped Elementor templates use section > column > widget
   (universally importable). A layout class sits on the section, but
   the children it needs to lay out are Elementor's columns, one level
   further down inside .elementor-container. These rules forward the
   grid to the right element so the class behaves exactly as it does
   in the original hand-written markup.
   ================================================================ */

.elementor-section.page-grid > .elementor-container,
.elementor-section.bento > .elementor-container,
.elementor-section.grid > .elementor-container,
.elementor-section.footer-grid > .elementor-container,
.elementor-section.hero-grid > .elementor-container {
  display: grid;
  gap: var(--gutter);
}

/* .page-grid is a single column until the design's own 900px switch. */
.elementor-section.page-grid > .elementor-container { gap: clamp(26px, 4vw, 52px); }
@media (min-width: 900px) {
  .elementor-section.page-grid > .elementor-container { grid-template-columns: 1.05fr .95fr; align-items: start; }
  .elementor-section.page-grid--rev > .elementor-container { grid-template-columns: .95fr 1.05fr; }
}

.elementor-section.bento > .elementor-container { grid-template-columns: 1fr 1fr; }
@media (min-width: 1024px) {
  .elementor-section.bento > .elementor-container { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(180px, auto); }
}

@media (min-width: 768px) { .elementor-section.grid--3 > .elementor-container { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .elementor-section.grid--3 > .elementor-container { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 768px) {
  .elementor-section.footer-grid > .elementor-container { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--sp-10); }
}

/* Once the container is a grid, Elementor's percentage column widths would
   fight it — the grid tracks decide the layout instead. */
.elementor-section.page-grid > .elementor-container > .elementor-column,
.elementor-section.bento > .elementor-container > .elementor-column,
.elementor-section.grid > .elementor-container > .elementor-column,
.elementor-section.footer-grid > .elementor-container > .elementor-column,
.elementor-section.hero-grid > .elementor-container > .elementor-column {
  width: 100%;
  max-width: 100%;
  flex: none;
}

/* Section classes that describe vertical rhythm apply to the section itself. */
.elementor-section.section { padding-block: var(--sec-y); }
.elementor-section.section--tight { padding-block: calc(var(--sec-y) * .62); }
.elementor-section.page-hero { padding-block: clamp(36px,5vw,60px) clamp(22px,3vw,38px); }
.elementor-section.band-wrap { padding-block: calc(var(--sec-y) * .3); }

/* The CTA band is a full-bleed inset card; as a section it needs the band
   treatment applied to its own container. */
.elementor-section.band-wrap > .elementor-container {
  border-radius: clamp(22px,3vw,42px);
  padding: var(--sec-y) var(--margin);
  overflow: clip;
  position: relative;
  text-align: center;
  background:
    radial-gradient(900px 500px at 82% -20%, rgba(108,79,224,.30), transparent 60%),
    radial-gradient(700px 460px at 0% 120%, rgba(132,12,12,.22), transparent 60%),
    linear-gradient(165deg, #160A4A, #0D0333);
}
.elementor-section.band-wrap .elementor-heading-title { color: #fff; }
.elementor-section.band-wrap .eyebrow { color: #E08A8A; justify-content: center; }
.elementor-section.band-wrap .lead { color: var(--text-inv-soft); margin-inline: auto; }
.elementor-section.band-wrap .elementor-widget-button { display: inline-block; }

/* Elementor wraps every widget; the design system's classes are applied to
   that wrapper, so headings and buttons inside must not re-introduce margins. */
.elementor-widget-heading .elementor-heading-title { margin: 0; }
.eyebrow .elementor-heading-title,
.lead .elementor-heading-title,
.mono .elementor-heading-title { font: inherit; color: inherit; letter-spacing: inherit; }