/* Self-hosted fonts (OFL licensed) */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/inter-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/jetbrains-mono-latin-600-normal.woff2) format('woff2')}

/* =====================================================================
   MECHTRONICS — cinematic industrial theme
   Change brand colours here ↓
   ===================================================================== */
:root {
  --ink: #0a0c0f;
  --ink-2: #101318;
  --ink-3: #171b21;
  --paper: #f1f0ec;
  --paper-2: #e6e4de;
  --white: #fbfaf7;
  --text: #eceae5;
  --text-2: #9aa1aa;
  --dark: #111317;
  --dark-2: #5d646d;
  --accent: #7dd3fc;
  --accent-2: #bae6fd;
  --cyan: #38bdf8;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(17, 19, 23, 0.12);
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --side: 272px;
  --gut: clamp(16px, 4vw, 64px);
  --r: 22px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); background: var(--ink); color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.wrap { padding-inline: var(--gut); max-width: 1500px; margin-inline: auto; }
.narrow { max-width: 980px; }
.center { text-align: center; }
.label { display: inline-flex; align-items: center; gap: 12px; color: var(--text-2); margin-bottom: 22px; }
.light .label { color: var(--dark-2); }
.sq { width: 8px; height: 8px; background: var(--accent); display: inline-block; flex: none; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--text-2); max-width: 60ch; }
.light .lead { color: var(--dark-2); }
.fine { color: var(--text-2); margin-top: 22px; font-size: 10px; }
.light .fine { color: var(--dark-2); }

/* ---------- Type ---------- */
.display, .display-md, .display-lg, h2.h { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: .95; }
.display { font-size: clamp(3.1rem, 8.4vw, 9.2rem); }
.display-lg { font-size: clamp(2.6rem, 6.4vw, 6.8rem); }
.display-md { font-size: clamp(2.3rem, 4.8vw, 4.6rem); line-height: 1; }
em { font-style: italic; }
.display em, .display-lg em, .display-md em, .mega-cta em { font-style: italic; }
.dot { color: var(--accent); }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.wi { display: inline-block; will-change: transform; }

/* ---------- Layout with sidebar ---------- */
main, .site-footer { margin-left: var(--side); }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--side); z-index: 60;
  background: var(--ink); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 34px 28px 28px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand strong { display: block; font-family: var(--sans); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; color: var(--white); line-height: 1; }
.brand strong i { color: var(--accent); font-style: normal; }
.brand small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); margin-top: 7px; }
.logo-mark { width: 38px; height: 38px; color: var(--accent); display: grid; place-items: center; flex: none; }
.logo-mark svg { width: 100%; height: 100%; animation: spin 16s linear infinite; }
.side-intro { color: var(--text-2); margin: 38px 0 0; padding-top: 30px; border-top: 1px solid var(--line); line-height: 2; font-size: 10.5px; }
.side-nav { display: flex; flex-direction: column; margin-top: 34px; }
.side-nav a, .menu-overlay nav a { display: flex; align-items: baseline; gap: 16px; padding: 11px 0; position: relative; }
.side-nav .num { font-family: var(--mono); font-size: 10px; color: var(--text-2); letter-spacing: .1em; transition: color .3s; }
.side-nav .lbl { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text); transition: transform .4s var(--ease), color .3s; }
.side-nav a::before { content: ""; position: absolute; left: -28px; top: 50%; width: 3px; height: 0; background: var(--accent); transform: translateY(-50%); transition: height .35s var(--ease); }
.side-nav a:hover .lbl { transform: translateX(6px); color: var(--white); }
.side-nav a.active .lbl { color: var(--accent); }
.side-nav a.active .num { color: var(--accent); }
.side-nav a.active::before { height: 18px; }
.side-bottom { margin-top: auto; display: grid; gap: 18px; }
.status { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 10px; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.side-meta { color: var(--text-2); font-size: 10px; line-height: 1.9; padding-top: 18px; border-top: 1px solid var(--line); }
.side-cta { display: inline-flex; align-items: center; gap: 10px; color: var(--white); padding: 14px 0 0; border-top: 1px solid var(--line); }
.side-cta:hover { color: var(--accent); }
.arr { width: 13px; height: 13px; flex: none; transition: transform .35s var(--ease); }
a:hover > .arr, a:hover .arr { transform: translate(2px, -2px); }

.mobile-bar { display: none; }
.menu-overlay { display: none; }

/* ---------- Buttons & links ---------- */
.btn { display: inline-flex; align-items: center; gap: 22px; padding: 22px 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; transition: background .3s, color .3s, transform .3s var(--ease); position: relative; overflow: hidden; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary::before { content: ""; position: absolute; inset: 0; background: var(--white); transform: translateY(101%); transition: transform .5s var(--ease); }
.btn-primary:hover::before { transform: none; }
.btn-primary:hover { color: var(--ink); }
.btn > span { position: relative; }
.btn-meta { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.4); font-size: 10px; opacity: .9; }
.btn-primary:hover .btn-meta { border-color: rgba(0,0,0,.25); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateY(101%); transition: transform .5s var(--ease); }
.btn-dark:hover::before { transform: none; }
.link-u { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; padding-bottom: 6px; position: relative; }
.link-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .5s var(--ease); }
.link-u:hover::after { transform: scaleX(0); transform-origin: right; animation: line-in .5s .25s var(--ease) forwards; }
@keyframes line-in { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
.btn-row { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 11vw, 170px) 0; position: relative; }
.light { background: var(--paper); color: var(--dark); }
.white { background: var(--white); color: var(--dark); }
.dark-2 { background: var(--ink-2); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(44px, 6vw, 80px); }
.sec-head .display-md { max-width: 14ch; }
.sec-head p { max-width: 42ch; color: var(--text-2); }
.light .sec-head p { color: var(--dark-2); }

/* ---------- Preloader & curtain ---------- */
.preloader { position: fixed; inset: 0; z-index: 1000; background: var(--ink); display: grid; place-items: center; transition: transform .8s var(--ease); }
.preloader.done { transform: translateY(-100%); }
.pre-inner { display: grid; justify-items: center; gap: 22px; }
.pre-gear { width: 64px; height: 64px; color: var(--accent); animation: spin 2.4s linear infinite; }
.pre-num { font-family: var(--serif); font-size: clamp(4rem, 12vw, 9rem); line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.pre-inner .mono { color: var(--text-2); }
.preloader.done .pre-inner { opacity: 0; transition: opacity .3s; }
.curtain { position: fixed; inset: 0; z-index: 900; background: var(--accent); transform: translateY(100%); transition: transform .5s var(--ease); display: grid; place-items: center; pointer-events: none; }
.curtain.in { transform: none; }
.curtain span { color: #fff; font-size: 14px; }
.curtain i { font-style: normal; }
html:not(.js) .preloader { display: none; }

/* ---------- Cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 950; pointer-events: none; width: 0; height: 0; }
.cursor::before { content: ""; position: absolute; width: 10px; height: 10px; left: -5px; top: -5px; border-radius: 50%; background: var(--accent); opacity: 0; transition: width .35s var(--ease), height .35s var(--ease), left .35s var(--ease), top .35s var(--ease), opacity .3s, background .3s; }
.cursor.on::before { opacity: 1; }
.cursor.link::before { width: 44px; height: 44px; left: -22px; top: -22px; background: rgba(11,79,143,.18); border: 1px solid var(--accent); }
.cursor.big::before { width: 92px; height: 92px; left: -46px; top: -46px; background: var(--accent); }
.cursor span { position: absolute; transform: translate(-50%, -50%) scale(.4); color: #fff; opacity: 0; transition: .3s; font-size: 10px; }
.cursor.big span { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: radial-gradient(ellipse at 70% 60%, #071a26 0%, var(--ink) 60%); isolation: isolate; }
.hero-scene { position: absolute; inset: 0; z-index: -2; }
.hero-scene canvas { width: 100% !important; height: 100% !important; display: block; }
.hero-scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.28); }
.hero-scene.scene-fallback { background: radial-gradient(circle at 70% 55%, rgba(11,79,143,.25), transparent 40%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.65) 34%, rgba(0,0,0,0) 62%), linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 26%); }
.hero-topline { position: absolute; top: 28px; left: var(--gut); right: var(--gut); display: flex; justify-content: space-between; color: var(--text-2); z-index: 2; }
.hero-copy { position: relative; z-index: 2; padding: 140px var(--gut) 120px; max-width: 1100px; }
.hero .label { color: var(--text); }
.hero .display { color: var(--white); }
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.06em; }
.line > span { display: inline-block; }
.hero-sub { margin: 34px 0 44px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: #c9ccd1; max-width: 34ch; line-height: 1.55; }
.hero-vert { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; color: var(--text-2); font-size: 10px; z-index: 2; }
.scroll-cue { position: absolute; left: var(--gut); bottom: 30px; display: flex; align-items: center; gap: 14px; color: var(--text-2); z-index: 2; }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(var(--accent), transparent); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: drip 1.8s infinite var(--ease); }
@keyframes drip { to { top: 110%; } }
.hero-chips { position: absolute; right: calc(var(--gut) + 70px); bottom: 34px; display: flex; gap: 10px; z-index: 2; flex-wrap: wrap; justify-content: flex-end; }
.hchip { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 10px 14px; color: var(--text); font-size: 10px; }
.hchip b { color: var(--accent); font-weight: 600; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 26px 0; white-space: nowrap; }
.marquee-track { display: inline-flex; align-items: center; gap: 40px; animation: marquee 45s linear infinite; padding-right: 40px; }
.marquee span { font-family: var(--serif); font-size: clamp(1.8rem, 3.4vw, 3.2rem); line-height: 1; color: var(--white); }
.marquee i { color: var(--accent); font-style: normal; font-size: 1.3rem; }
.marquee.rev .marquee-track { animation-direction: reverse; }
.marquee.light-m { border-color: var(--line-2); }
.marquee.light-m span { color: var(--dark); }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Statement + giant drift text ---------- */
.statement { font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 4.4rem); line-height: 1.1; letter-spacing: -0.015em; max-width: 22ch; }
.statement em { color: var(--accent); }
.giant { font-family: var(--sans); font-weight: 300; font-size: clamp(5rem, 19vw, 22rem); line-height: .85; letter-spacing: -0.06em; white-space: nowrap;
  background: linear-gradient(180deg, #c9c7c1 0%, rgba(201,199,193,.15) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.giant-wrap { overflow: hidden; padding-top: 30px; }
.dark-giant .giant { background: linear-gradient(180deg, #2a2f37 0%, rgba(42,47,55,.1) 100%); -webkit-background-clip: text; background-clip: text; }
.statement-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 50px; align-items: start; margin-top: clamp(30px, 5vw, 70px); }
.statement-side { display: grid; gap: 24px; padding-top: 12px; }
.statement-side p { color: var(--dark-2); max-width: 36ch; }

/* ---------- Category cards (rounded, tinted) ---------- */
.ccards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ccard { position: relative; border-radius: var(--r); min-height: 520px; overflow: hidden; display: flex; flex-direction: column; padding: 30px; isolation: isolate; transition: transform .6s var(--ease); }
.ccard:hover { transform: translateY(-8px); }
.ccard-head h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 2.4vw, 2.5rem); line-height: 1; margin: 16px 0 12px; letter-spacing: -0.01em; }
.ccard-head p { font-size: .95rem; opacity: .82; max-width: 34ch; }
.ccard-art { margin-top: auto; display: grid; place-items: center; padding-top: 20px; transition: transform .8s var(--ease); }
.ccard:hover .ccard-art { transform: scale(1.06) translateY(-6px); }
.ccard-go { position: absolute; right: 22px; bottom: 22px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; transform: scale(.6); opacity: 0; transition: .45s var(--ease); }
.ccard:hover .ccard-go { transform: none; opacity: 1; }
.ccard:nth-child(4), .ccard:nth-child(5) { min-height: 380px; }
.ccards .ccard:nth-child(4) { grid-column: span 1; }
.ccards .ccard:nth-child(5) { grid-column: span 2; }
.ccards .ccard:nth-child(5) .ccard-art { position: absolute; right: 30px; bottom: 20px; width: 46%; }

/* tones */
.t-sky   { background: linear-gradient(170deg, #9db4c7 0%, #c3d2de 55%, #e4ebf0 100%); color: #0f1b26; --c-ink: #13263a; --c-acc: #7dd3fc; --c-soft: rgba(255,255,255,.6); --c-line: rgba(15,27,38,.18); }
.t-steel { background: linear-gradient(170deg, #aeb2b8 0%, #d1d3d6 55%, #ececed 100%); color: #14171b; --c-ink: #1a1d22; --c-acc: #7dd3fc; --c-soft: rgba(255,255,255,.6); --c-line: rgba(20,23,27,.18); }
.t-sand  { background: linear-gradient(170deg, #ccb299 0%, #e2d2c1 55%, #f3ece4 100%); color: #20160c; --c-ink: #2b1e12; --c-acc: #7dd3fc; --c-soft: rgba(255,255,255,.6); --c-line: rgba(32,22,12,.18); }
.t-ink   { background: linear-gradient(170deg, #12161c 0%, #1d232c 60%, #2a313b 100%); color: #eef1f4; --c-ink: #c8d0da; --c-acc: #7dd3fc; --c-soft: rgba(56,189,248,.3); --c-line: rgba(255,255,255,.18); }
.t-slate { background: linear-gradient(170deg, #26303d 0%, #3d4a5a 60%, #5d6b7c 100%); color: #f3f5f8; --c-ink: #e5eaf0; --c-acc: #bae6fd; --c-soft: rgba(255,255,255,.22); --c-line: rgba(255,255,255,.2); }

/* ---------- SVG illustrations ---------- */
.illus { width: 100%; max-width: 360px; height: auto; overflow: visible; color: var(--c-ink, currentColor); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.illus.big { max-width: 420px; }
.illus.huge { max-width: 560px; stroke-width: 1.3; }
.illus .fa { fill: var(--c-acc, var(--accent)); stroke: none; }
.illus .fa-soft { fill: var(--c-acc, var(--accent)); fill-opacity: .85; stroke: none; }
.illus .fl { fill: var(--c-soft, rgba(255,255,255,.4)); }
.illus .fc { fill: currentColor; stroke: none; }
.illus .fo { fill: var(--accent); stroke: none; }
.illus .glow { stroke: var(--cyan); stroke-width: 2.2; }
.illus .thick { stroke-width: 5; }
.illus .accent { stroke: var(--accent); }
.illus .cone { fill: var(--cyan); fill-opacity: .14; stroke: none; }
.illus .ok { stroke: #22c55e; stroke-width: 3; }
.illus .ok-t { fill: #22c55e; stroke: none; font: 600 12px var(--mono); letter-spacing: .1em; text-anchor: middle; }
.illus .led-g { fill: #22c55e; stroke: none; } .illus .led-o { fill: #bae6fd; stroke: none; } .illus .led-c { fill: var(--cyan); stroke: none; }
.illus .a-belt { animation: belt 2.2s linear infinite; }
@keyframes belt { to { transform: translateX(50px); } }
.illus .a-belt-step { animation: beltstep 3.6s var(--ease) infinite; }
@keyframes beltstep { 0%, 30% { transform: translateX(0); } 50%, 80% { transform: translateX(29px); } 100% { transform: translateX(58px); } }
.illus .a-press { animation: stamp 2.4s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes stamp { 0%, 35% { transform: translateY(0); } 52%, 64% { transform: translateY(38px); } 100% { transform: translateY(0); } }
.illus .a-press-sm { animation: stamp-sm 1.8s cubic-bezier(.7,0,.3,1) infinite; }
.illus .a-press-sm.d1 { animation-delay: .3s; } .illus .a-press-sm.d2 { animation-delay: .6s; }
@keyframes stamp-sm { 0%, 40% { transform: translateY(0); } 55%, 65% { transform: translateY(14px); } 100% { transform: translateY(0); } }
.illus .a-press-fast { animation: stamp-f 1.1s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes stamp-f { 0%, 30% { transform: translateY(0); } 50%, 58% { transform: translateY(16px); } 100% { transform: translateY(0); } }
.illus .a-squash { transform-box: fill-box; transform-origin: bottom; animation: squash 2.4s infinite; }
@keyframes squash { 0%, 50% { transform: scaleY(1); } 56%, 100% { transform: scaleY(.55); } }
.illus .a-arm { animation: arm 3.6s ease-in-out infinite; }
@keyframes arm { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(22deg); } }
.illus .a-arm2 { animation: arm2 3.6s ease-in-out infinite; }
@keyframes arm2 { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(48deg); } }
.illus .a-spin { animation: spin 9s linear infinite; }
.illus .a-spin-r { animation: spin 6s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.illus .a-blink { animation: blink 1.6s steps(1) infinite; }
.illus .d1 { animation-delay: .4s; } .illus .d2 { animation-delay: .8s; } .illus .d3 { animation-delay: 1.2s; }
@keyframes blink { 50% { opacity: .15; } }
.illus .a-dash { stroke-dasharray: 6 5; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -22; } }
.illus .a-scan { animation: scan 2.2s ease-in-out infinite alternate; }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(30px); } }
.illus .a-needle { animation: needle 3s ease-in-out infinite; }
@keyframes needle { 0%, 100% { transform: rotate(-70deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(4deg); } }
.illus .a-bob { animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat { padding: 34px 26px 10px 0; border-right: 1px solid var(--line); padding-left: 26px; }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
.stat .mono { color: var(--accent); }
.stat strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(3.4rem, 6vw, 6.4rem); line-height: 1; margin: 18px 0 10px; color: var(--white); font-variant-numeric: tabular-nums; }
.stat p { color: var(--text-2); font-size: .95rem; }
.light .stats { border-color: var(--line-2); }
.light .stat { border-color: var(--line-2); }
.light .stat strong { color: var(--dark); }
.light .stat p { color: var(--dark-2); }

/* ---------- Product rows (editorial list) ---------- */
.prows { border-top: 1px solid var(--line); }
.prow { display: grid; grid-template-columns: 70px 1fr 240px 150px 50px; align-items: center; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line); position: relative; isolation: isolate; }
.prow::before { content: ""; position: absolute; inset: 0 calc(var(--gut) * -1); background: var(--ink-3); z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); }
.prow:hover::before { transform: scaleY(1); }
.prow .num { color: var(--text-2); }
.prow-name { font-family: var(--serif); font-size: clamp(1.7rem, 3.2vw, 3rem); line-height: 1.05; transition: transform .5s var(--ease), color .3s; }
.prow:hover .prow-name { transform: translateX(14px); color: var(--white); }
.prow-cat { color: var(--text-2); font-size: 10px; }
.prow-art { height: 70px; display: grid; place-items: center; --c-ink: #d0d6de; --c-soft: rgba(255,255,255,.12); opacity: .35; transition: opacity .4s; }
.prow-art .illus { height: 70px; width: auto; }
.prow:hover .prow-art { opacity: 1; }
.prow-go { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: .4s var(--ease); }
.prow:hover .prow-go { background: var(--accent); border-color: var(--accent); transform: rotate(45deg); }
.prow:hover .prow-go .arr { transform: none; }

/* ---------- Product cards ---------- */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pcard { position: relative; border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; min-height: 520px; transition: transform .6s var(--ease); }
.pcard[hidden] { display: none; }
.pcard:hover { transform: translateY(-8px); }
.pcard-link { position: absolute; inset: 0; z-index: 1; }
.pcard-top { display: flex; justify-content: space-between; padding: 24px 26px 0; font-size: 10px; opacity: .85; }
.pcard-top .mono { font-size: 10px; }
.pcard-media { flex: 1; display: grid; place-items: center; padding: 20px 30px; min-height: 230px; }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.pcard-media .illus { max-width: 300px; transition: transform .8s var(--ease); }
.pcard:hover .pcard-media .illus { transform: scale(1.08); }
.pcard-body { padding: 0 26px 26px; display: grid; gap: 10px; }
.pcard-body h3 { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.02; letter-spacing: -0.01em; }
.pcard-body p { font-size: .94rem; opacity: .85; }
.pcard-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--c-line, rgba(255,255,255,.25)); }
.pcard-actions .more { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; }
.chip-btn { position: relative; z-index: 2; padding: 9px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10px; transition: background .3s, color .3s; }
.chip-btn:hover { background: var(--accent); color: #fff; }

.toolbar { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; margin-bottom: 40px; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; align-items: flex-start; gap: 4px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; transition: .3s; }
.fchip sup { font-size: 9px; color: var(--accent); }
.fchip:hover { border-color: var(--text-2); }
.fchip.active { background: var(--white); color: var(--ink); border-color: var(--white); }
.search { background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 12px 0; color: var(--text); font: 15px var(--sans); min-width: 280px; }
.search::placeholder { color: var(--text-2); }
.search:focus { outline: none; border-color: var(--accent); }
.empty { padding: 60px 0; color: var(--text-2); text-align: center; }

/* ---------- Process (horizontal) ---------- */
.hscroll { background: var(--ink-2); overflow: hidden; }
.hscroll-inner { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(80px, 9vw, 120px) 0; }
.hscroll-viewport { overflow: visible; }
.hscroll-track { display: flex; gap: 14px; padding-inline: var(--gut); width: max-content; will-change: transform; }
.pstep { width: clamp(300px, 30vw, 440px); min-height: 380px; border: 1px solid var(--line); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); position: relative; overflow: hidden; }
.pstep .big-n { font-family: var(--serif); font-size: 8rem; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.18); }
.pstep h3 { font-family: var(--serif); font-weight: 400; font-size: 2.1rem; margin: auto 0 12px; color: var(--white); line-height: 1; }
.pstep p { color: var(--text-2); }
.pstep .mono { color: var(--accent); margin-bottom: 18px; }
.pstep:hover .big-n { -webkit-text-stroke-color: var(--accent); }
.hscroll-progress { margin: 40px var(--gut) 0; height: 1px; background: var(--line); }
.hscroll-progress i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

/* ---------- Industries ---------- */
.inds { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.ind { padding: 30px 26px 34px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); position: relative; transition: background .4s; min-height: 260px; display: flex; flex-direction: column; }
.ind:hover { background: var(--white); }
.ind .num { color: var(--dark-2); font-size: 10px; }
.ind-icon { font-size: 2.2rem; margin: 26px 0 auto; display: block; transition: transform .5s var(--ease); }
.ind:hover .ind-icon { transform: translateY(-6px) scale(1.1); }
.ind h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.05; margin: 22px 0 8px; }
.ind p { font-size: .92rem; color: var(--dark-2); }
.dark-inds .inds { border-color: var(--line); }
.dark-inds .ind { border-color: var(--line); }
.dark-inds .ind:hover { background: var(--ink-3); }
.dark-inds .ind p, .dark-inds .ind .num { color: var(--text-2); }

/* ---------- Features (why us) ---------- */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
.feat { padding: 34px 30px 36px 0; border-bottom: 1px solid var(--line-2); }
.feat:not(:nth-child(3n)) { border-right: 1px solid var(--line-2); }
.feat:not(:nth-child(3n+1)) { padding-left: 30px; }
.feat .mono { color: var(--accent); }
.feat h3 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; margin: 18px 0 10px; line-height: 1.05; }
.feat p { color: var(--dark-2); max-width: 36ch; }
.section:not(.light) .feats, .section:not(.light) .feat { border-color: var(--line); }
.section:not(.light) .feat p { color: var(--text-2); }

/* ---------- Global ---------- */
.global { text-align: center; overflow: hidden; }
.global .display-lg { max-width: 14ch; margin: 0 auto 50px; }
.globe-ring { width: min(520px, 80vw); margin: 0 auto 60px; position: relative; }
.globe-ring svg { aspect-ratio: 1; display: block; }
.globe-ring svg { width: 100%; height: 100%; overflow: visible; }
.globe-ring .orbit { fill: none; stroke: rgba(255,255,255,.12); }
.globe-ring .lat { fill: none; stroke: rgba(255,255,255,.08); }
.globe-ring .spin-g { transform-origin: 200px 200px; animation: spin 40s linear infinite; }
.globe-ring .city { fill: var(--accent); }
.globe-ring .ping { fill: none; stroke: var(--accent); transform-box: fill-box; transform-origin: center; animation: ping 2.4s infinite; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(3); opacity: 0; } }
.globe-ring .arc { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 6; animation: dash 1.6s linear infinite; }
.globe-center { display: grid; justify-items: center; text-align: center; margin-top: 18px; }
.globe-center strong { font-family: var(--serif); font-weight: 400; font-size: clamp(4rem, 9vw, 7rem); line-height: 1; color: var(--white); }
.globe-center .mono { color: var(--text-2); }

/* ---------- Testimonials ---------- */
.quotes { display: grid; min-height: 300px; }
.quote { grid-area: 1 / 1; opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none; }
.quote.active { opacity: 1; transform: none; pointer-events: auto; }
.quote blockquote { font-family: var(--serif); font-size: clamp(1.9rem, 3.8vw, 3.8rem); line-height: 1.1; letter-spacing: -0.01em; max-width: 24ch; }
.quote figcaption { margin-top: 30px; color: var(--dark-2); }
.quote-nav { display: flex; gap: 10px; margin-top: 40px; }
.quote-nav button { width: 60px; height: 20px; display: grid; align-items: center; }
.quote-nav span { display: block; height: 2px; background: var(--line-2); position: relative; overflow: hidden; }
.quote-nav span::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.quote-nav .active span::after { animation: fill 6s linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }

/* ---------- Certs ---------- */
.certs { display: flex; flex-wrap: wrap; gap: 10px; }
.cert { padding: 14px 20px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 11px; transition: .3s; }
.cert:hover { background: var(--dark); color: var(--white); }
.section:not(.light) .cert { border-color: var(--line); }

/* ---------- FAQ ---------- */
.faqs { border-top: 1px solid var(--line-2); }
.faq { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 60px 1fr 30px; gap: 16px; align-items: center; padding: 28px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mono { color: var(--dark-2); }
.faq .q { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.15; transition: color .3s; }
.faq summary:hover .q { color: var(--accent); }
.plus { width: 22px; height: 22px; position: relative; }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.plus::after { transform: rotate(90deg); }
.faq[open] .plus::after { transform: rotate(0); }
.faq-a { padding: 0 0 30px 76px; color: var(--dark-2); max-width: 72ch; }
.faq[open] .faq-a { animation: faq .5s var(--ease); }
@keyframes faq { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: clamp(130px, 16vw, 220px) 0 clamp(60px, 8vw, 110px); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero.compact { padding: 110px 0 26px; }
.page-hero .display { color: var(--white); max-width: 13ch; }
.page-hero .hero-sub { margin-bottom: 0; }
.crumbs { color: var(--text-2); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { color: var(--text); }
.page-hero .crumbs { margin-bottom: 40px; }
.page-hero.compact .crumbs { margin: 0; }
.ph-art { position: absolute; right: var(--gut); bottom: -6%; width: min(32vw, 470px); opacity: .85; pointer-events: none; --c-ink: #3b4554; --c-soft: rgba(255,255,255,.05); --c-acc: var(--accent); }

/* ---------- Product detail ---------- */
.detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 80px); padding-block: 50px clamp(80px, 10vw, 140px); align-items: start; }
.detail-media { position: sticky; top: 30px; border-radius: var(--r); aspect-ratio: 1; display: grid; place-items: center; padding: 50px; overflow: hidden; }
.detail-media > img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.corner { position: absolute; left: 24px; top: 22px; font-size: 10px; }
.corner-b { position: absolute; left: 24px; bottom: 22px; font-size: 9.5px; opacity: .8; }
.detail-info { padding-top: 30px; }
.detail-info .display-md { color: var(--white); margin-bottom: 26px; }
.detail-info .lead { margin-bottom: 30px; }
.ticks { list-style: none; display: grid; gap: 0; margin-bottom: 40px; border-top: 1px solid var(--line); }
.ticks li { padding: 15px 0 15px 34px; border-bottom: 1px solid var(--line); position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1.5px; background: var(--accent); }
.specs { border-top: 1px solid var(--line-2); margin-top: 40px; }
.specs div { display: grid; grid-template-columns: 1fr 1.6fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.specs dt { color: var(--dark-2); padding-top: 5px; }
.specs dd { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.2; }
.next-product { display: block; padding: clamp(60px, 9vw, 120px) var(--gut); border-top: 1px solid var(--line); transition: background .5s; }
.next-product .mono { color: var(--text-2); }
.next-name { display: flex; align-items: center; gap: 20px; font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 6rem); line-height: 1; margin-top: 16px; color: var(--white); }
.next-name .arr { width: .6em; height: .6em; color: var(--accent); }
.next-product:hover { background: var(--ink-3); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.about-art { border-radius: var(--r); aspect-ratio: 4/5; display: grid; place-items: center; padding: 40px; position: relative; overflow: hidden; }
.about-art .badge { position: absolute; right: 22px; bottom: 22px; background: var(--accent); color: #fff; padding: 18px 20px; border-radius: 14px; text-align: left; }
.about-art .badge strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 3.4rem; line-height: 1; }
.about-art .badge .mono { font-size: 9.5px; }
.about-copy p { color: var(--dark-2); margin-bottom: 18px; max-width: 54ch; }
.about-copy .display-md { margin-bottom: 30px; }
.mv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mv-card { border-radius: var(--r); padding: 34px; background: var(--ink-3); border: 1px solid var(--line); min-height: 300px; display: flex; flex-direction: column; }
.mv-card .mono { color: var(--accent); }
.mv-card h3 { font-family: var(--serif); font-weight: 400; font-size: 2.6rem; margin: auto 0 12px; color: var(--white); line-height: 1; }
.mv-card p { color: var(--text-2); }

/* ---------- Forms ---------- */
.form-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.form .full { grid-column: 1 / -1; }
.fieldset-t { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin: 36px 0 10px; color: var(--accent); }
.fieldset-t:first-child { margin-top: 0; }
.fieldset-t::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.light .fieldset-t::after { background: var(--line-2); }
.field { display: block; position: relative; padding-top: 20px; margin-bottom: 8px; }
.field > span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.light .field > span { color: var(--dark-2); }
.field .req { color: var(--accent); }
.field input, .field select, .field textarea { display: block; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: inherit; font: 16px var(--sans); padding: 12px 0 14px; border-radius: 0; transition: border-color .3s; }
.light .field input, .light .field select, .light .field textarea { border-color: rgba(17,19,23,.22); }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 6px top 22px, right 0 top 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 24px; }
.field select option, .field select optgroup { color: #111; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.field:focus-within::after { transform: scaleX(1); }
.file-drop { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 22px; border: 1px dashed rgba(17,19,23,.3); border-radius: 14px; cursor: pointer; transition: .3s; }
.file-drop:hover { border-color: var(--accent); background: rgba(11,79,143,.04); }
.file-drop input { display: none; }
.file-drop .mono { padding: 10px 14px; background: var(--dark); color: #fff; border-radius: 999px; font-size: 10px; flex: none; }
.file-name { color: var(--dark-2); font-size: .92rem; word-break: break-all; }
.form .btn { grid-column: 1 / -1; margin-top: 30px; justify-content: space-between; border: 0; cursor: pointer; }
.form-status { grid-column: 1 / -1; margin-top: 16px; font-size: .95rem; }
.form-status.ok { color: #16a34a; }
.form-status.err { color: #dc2626; }
.form-privacy { grid-column: 1 / -1; color: var(--dark-2); margin-top: 14px; font-size: 10px; }

.side-cards { display: grid; gap: 12px; position: sticky; top: 30px; }
.scard { display: flex; gap: 18px; align-items: center; padding: 22px; border-radius: 16px; background: var(--white); border: 1px solid var(--line-2); transition: .4s var(--ease); }
a.scard:hover { transform: translateX(6px); border-color: var(--accent); }
.scard .ci { width: 48px; height: 48px; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; flex: none; font-size: 1.2rem; }
.scard strong { display: block; font-weight: 600; }
.scard span { color: var(--dark-2); font-size: .92rem; word-break: break-word; }
.next-steps { padding: 30px; border-radius: var(--r); background: var(--dark); color: var(--text); }
.next-steps h3 { font-family: var(--serif); font-weight: 400; font-size: 2rem; color: var(--white); margin-bottom: 20px; line-height: 1; }
.next-steps ol { list-style: none; counter-reset: s; display: grid; gap: 14px; }
.next-steps li { counter-increment: s; display: grid; grid-template-columns: 38px 1fr; color: var(--text-2); }
.next-steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--accent); padding-top: 3px; }

.contact-big { display: grid; gap: 0; border-top: 1px solid var(--line); }
.contact-big a, .contact-big div { display: grid; grid-template-columns: 140px 1fr 40px; gap: 20px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.contact-big .mono { color: var(--text-2); }
.contact-big .v { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2.4rem); line-height: 1.1; word-break: break-word; transition: color .3s, transform .5s var(--ease); }
.contact-big a:hover .v { color: var(--accent); transform: translateX(8px); }
.map { border-radius: var(--r); overflow: hidden; min-height: 420px; background: var(--ink-3); }
.map iframe { width: 100%; height: 460px; border: 0; display: block; filter: grayscale(1) invert(.92) contrast(.9); }
.map-ph { min-height: 420px; display: grid; place-content: center; justify-items: center; text-align: center; gap: 8px; padding: 30px; position: relative;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; }
.map-ph .pin { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(11,79,143,.6); animation: pulse-o 2s infinite; margin-bottom: 16px; }
@keyframes pulse-o { 70% { box-shadow: 0 0 0 26px rgba(11,79,143,0); } 100% { box-shadow: 0 0 0 0 rgba(11,79,143,0); } }
.map-ph p:not(.mono) { font-family: var(--serif); font-size: 1.6rem; color: var(--white); max-width: 26ch; line-height: 1.2; }
.map-ph .mono { color: var(--text-2); }
.map-ph small { color: var(--text-2); font-size: 9.5px; margin-top: 10px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); border-top: 1px solid var(--line); }
.footer-cta { padding: clamp(90px, 13vw, 200px) var(--gut) clamp(60px, 8vw, 110px); border-bottom: 1px solid var(--line); }
.mega-cta { font-family: var(--serif); font-weight: 400; font-size: clamp(3.4rem, 10vw, 11rem); line-height: .92; letter-spacing: -0.03em; color: var(--white); max-width: 12ch; }
.mega-cta em { color: var(--accent); }
.footer-cta-row { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; margin-top: 54px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1.3fr; gap: 40px; padding: 70px var(--gut); }
.footer-grid .label { margin-bottom: 18px; font-size: 10px; }
.footer-grid ul { list-style: none; display: grid; gap: 10px; color: var(--text-2); font-size: .94rem; }
.footer-grid a:hover { color: var(--accent); }
.footer-about { color: var(--text-2); margin-top: 22px; font-size: .94rem; max-width: 34ch; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px var(--gut); border-top: 1px solid var(--line); color: var(--text-2); font-size: 10px; }
.to-top:hover { color: var(--accent); }

/* ---------- WhatsApp ---------- */
.whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(37,211,102,.35); transition: transform .4s var(--ease); }
.whatsapp-float:hover { transform: scale(1.1) rotate(-8deg); }
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: ring 2.4s infinite; }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- Motion fallbacks ---------- */
html.no-motion [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  :root { --side: 236px; }
  .prow { grid-template-columns: 56px 1fr 200px 50px; }
  .prow-art { display: none; }
}
@media (max-width: 1100px) {
  :root { --side: 0px; }
  .sidebar { display: none; }
  .mobile-bar { display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; right: 0; z-index: 70; padding: 14px var(--gut); background: rgba(0,0,0,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
  .mobile-bar .brand strong { font-size: 1.15rem; }
  .mobile-bar .logo-mark { width: 32px; height: 32px; }
  .burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 7px; }
  .burger span { display: block; width: 26px; height: 1.5px; background: var(--white); transition: transform .4s var(--ease); }
  .menu-open .burger span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .menu-open .burger span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  .menu-overlay { display: flex; flex-direction: column; justify-content: space-between; position: fixed; inset: 0; z-index: 65; background: var(--ink); padding: 110px var(--gut) 40px; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease); visibility: hidden; }
  .menu-open .menu-overlay { clip-path: inset(0); visibility: visible; }
  .menu-overlay nav a { border-bottom: 1px solid var(--line); padding: 18px 0; opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .6s var(--ease); }
  .menu-open .menu-overlay nav a { opacity: 1; transform: none; }
  .menu-open .menu-overlay nav a:nth-child(2) { transition-delay: .05s; } .menu-open .menu-overlay nav a:nth-child(3) { transition-delay: .1s; }
  .menu-open .menu-overlay nav a:nth-child(4) { transition-delay: .15s; } .menu-open .menu-overlay nav a:nth-child(5) { transition-delay: .2s; } .menu-open .menu-overlay nav a:nth-child(6) { transition-delay: .25s; }
  .menu-overlay .num { font-family: var(--mono); font-size: 11px; color: var(--accent); }
  .menu-overlay .lbl { font-family: var(--serif); font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1; color: var(--white); }
  .menu-overlay a.active .lbl { color: var(--accent); }
  .menu-foot { display: grid; gap: 10px; color: var(--text-2); }
  .menu-open { overflow: hidden; }
  .ccards, .pgrid { grid-template-columns: 1fr 1fr; }
  .ccards .ccard:nth-child(5) { grid-column: span 2; }
  .inds { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .page-hero.compact { padding-top: 100px; }
}
@media (max-width: 1023px) {
  .hscroll-inner { min-height: 0; }
  .hscroll-track { width: auto; display: grid; grid-template-columns: 1fr 1fr; }
  .pstep { width: auto; min-height: 300px; }
  .statement-grid, .about-grid, .detail, .form-layout { grid-template-columns: 1fr; }
  .detail-media { position: relative; top: 0; }
  .side-cards { position: static; }
  .mv { grid-template-columns: 1fr; }
  .mv-card { min-height: 220px; }
  .feats { grid-template-columns: 1fr 1fr; }
  .feat:nth-child(n) { padding-left: 0; border-right: 0; padding-right: 0; }
  .feats .feat:nth-child(odd) { border-right: 1px solid var(--line-2); padding-right: 24px; }
  .feats .feat:nth-child(even) { padding-left: 24px; }
  .ph-art { opacity: .2; width: 70vw; }
}
@media (max-width: 760px) {
  .hero { align-items: flex-start; }
  .hero::after { background: linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.75) 42%, rgba(0,0,0,0) 70%), linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 20%); }
  .hero-copy { padding: 110px var(--gut) 380px; }
  .hero-sub { margin: 24px 0 30px; }
  .hero-vert, .hero-topline, .ph-art { display: none; }
  .hero-chips { left: var(--gut); right: var(--gut); justify-content: flex-start; bottom: 24px; }
  .scroll-cue { display: none; }
  .btn { padding: 18px 20px; gap: 16px; }
  .ccards, .pgrid, .inds, .feats, .hscroll-track { grid-template-columns: 1fr; }
  .ccards .ccard:nth-child(5) { grid-column: auto; }
  .ccards .ccard:nth-child(5) .ccard-art { position: static; width: auto; }
  .ccard, .pcard { min-height: 440px; }
  .feats .feat:nth-child(n) { border-right: 0; padding: 28px 0; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 26px 16px 18px !important; border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .light .stat { border-bottom-color: var(--line-2); }
  .prow { grid-template-columns: 34px 1fr 40px; gap: 12px; padding: 20px 0; }
  .prow-cat { display: none; }
  .prow-go { width: 38px; height: 38px; }
  .form { grid-template-columns: 1fr; }
  .faq summary { grid-template-columns: 34px 1fr 22px; }
  .faq-a { padding-left: 50px; }
  .contact-big a, .contact-big div { grid-template-columns: 1fr; gap: 6px; }
  .contact-big .arr-cell { display: none; }
  .specs div { grid-template-columns: 1fr; gap: 6px; }
  .footer-grid { grid-template-columns: 1fr; padding-block: 50px; }
  .search { min-width: 0; width: 100%; }
  .whatsapp-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .giant { font-size: 24vw; }
  .detail-media { padding: 30px; }
}
/* Visitors can switch motion off with the "Motion" button in the menu */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation: none !important; transition: none !important; }
.motion-toggle { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 10px; padding: 0; text-align: left; }
.motion-toggle:hover { color: var(--white); }
.motion-toggle b { font-weight: 600; color: var(--accent); }
.motion-toggle i { width: 26px; height: 14px; border-radius: 99px; border: 1px solid var(--line); position: relative; flex: none; }
.motion-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transition: transform .3s var(--ease); }
.motion-toggle[aria-pressed="true"] i::after { transform: translateX(12px); }

.t-ink .chip-btn, .t-slate .chip-btn { background: #fff; color: var(--ink); }

/* =====================================================================
   PRODUCT PHOTOS & VIDEO
   ===================================================================== */
.ph { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 14px; }
.ph img, .ph video { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
/* card with a full photo: photo fills the media area */
.pcard-media.has-photo { padding: 0 14px; min-height: 280px; align-items: stretch; justify-items: stretch; }
.pcard-media.has-photo .ph { min-height: 280px; }
.pcard:hover .ph-photo img, .pcard:hover .ph-video video { scale: 1.08; }
/* cut-out photo (transparent PNG) floating over the animated drawing */
.ph-cutout { display: grid; place-items: center; overflow: visible; border-radius: 0; }
.ph-illus { position: absolute; inset: 0; display: grid; place-items: center; opacity: .28; pointer-events: none; }
.ph-illus .illus { width: 100%; }
.ph-float { position: relative; z-index: 1; width: auto !important; height: auto !important; max-width: 88%; max-height: 260px; object-fit: contain !important; animation: float-y 5s ease-in-out infinite; filter: drop-shadow(0 22px 24px rgba(0,0,0,.28)); transition: scale .8s var(--ease), rotate .8s var(--ease); }
.ph-shadow { position: absolute; z-index: 0; bottom: 4%; left: 50%; width: 55%; height: 16px; translate: -50% 0; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.35), transparent 70%); animation: float-sh 5s ease-in-out infinite; }
.pcard:hover .ph-float { scale: 1.08; rotate: -2deg; }
@keyframes float-y { 50% { transform: translateY(-12px); } }
@keyframes float-sh { 50% { transform: scaleX(.8); opacity: .6; } }
/* video badge */
.ph-live { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 99px; background: rgba(0,0,0,.6); color: #fff; font-size: 9.5px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ph-live i { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: blink 1.2s steps(1) infinite; }

/* product page gallery */
.detail-media.has-gallery { padding: 0; display: block; aspect-ratio: auto; overflow: visible; background: none !important; }
.detail-media.has-gallery .corner { z-index: 3; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.stage { position: relative; width: 100%; aspect-ratio: 1; max-width: 100%; border-radius: var(--r); overflow: hidden; background: var(--ink-3); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.slide.active { opacity: 1; z-index: 1; }
.slide .ph { border-radius: 0; }
.slide.active .ph-photo img { animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { scale: 1.14; } to { scale: 1; } }
.slide .ph-cutout { background: linear-gradient(170deg, #9db4c7 0%, #c3d2de 55%, #e4ebf0 100%); }
.slide .ph-cutout .ph-float { max-height: 78%; }
.thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.thumb { position: relative; flex: none; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--ink-3); border: 1px solid var(--line); opacity: .55; transition: opacity .3s, border-color .3s; display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .mono { color: var(--white); font-size: 14px; }
.thumb.active, .thumb:hover { opacity: 1; border-color: var(--accent); }
.thumb i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.thumb.active i { animation: fill 5s linear forwards; }

/* floating preview on the home machine list */
.row-preview { position: fixed; left: 0; top: 0; z-index: 55; width: 300px; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; pointer-events: none; opacity: 0; scale: .6; transition: opacity .35s, scale .5s var(--ease); box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.row-preview.on { opacity: 1; scale: 1; }
.row-preview img { width: 100%; height: 100%; object-fit: cover; }
.prow[data-preview] .prow-art { visibility: hidden; }
@media (max-width: 760px) { .pcard-media.has-photo, .pcard-media.has-photo .ph { min-height: 240px; } }


/* =====================================================================
   NAVY BLUE + WHITE THEME (Arial)
   Dark sections = navy with white text. ".light" sections = white with black text.
   Change the tokens below to recolour the site.
   ===================================================================== */
:root {
  --ink: #0b2a4a;        /* navy: main dark background */
  --ink-2: #0d3157;      /* navy: alternate dark section */
  --ink-3: #123b66;      /* navy: panels and hover */
  --text: #ffffff;
  --text-2: #b8cbe0;
  --white: #ffffff;
  --accent: #5ab0ff;     /* bright blue on navy */
  --accent-2: #9fd0ff;
  --cyan: #5ab0ff;
  --line: rgba(255, 255, 255, 0.14);
  --serif: Arial, Helvetica, sans-serif;
  --sans: Arial, Helvetica, sans-serif;
  --mono: Arial, Helvetica, sans-serif;
}
body { background: var(--ink); color: var(--text); }
::selection { background: #5ab0ff; color: #000; }

/* white sections */
.light, .white {
  --dark: #0a0a0a; --dark-2: #46566a; --line-2: rgba(10, 30, 60, 0.12);
  --accent: #0b4f8f;    /* deep blue on white */
  --white: #0a0a0a;
  background: #ffffff; color: #0a0a0a;
}

/* Arial headings, bold */
.display, .display-md, .display-lg, .statement, .mega-cta, .prow-name, .ccard-head h3, .pcard-body h3, .pstep h3,
.ind h3, .feat h3, .mv-card h3, .quote blockquote, .faq .q, .specs dd, .next-name, .stat strong, .pre-num,
.marquee span, .contact-big .v, .map-ph p:not(.mono), .next-steps h3, .about-art .badge strong, .exp-badge b, .globe-center strong {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.03em;
}
.display { font-size: clamp(2.6rem, 6.6vw, 7.2rem); line-height: 1.02; }
.display-lg { font-size: clamp(2.3rem, 5.4vw, 5.6rem); line-height: 1.04; }
.display-md { font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.06; }
.mega-cta { font-size: clamp(2.8rem, 8vw, 8.6rem); line-height: 1; }
.statement { font-weight: 400; letter-spacing: -0.02em; }
.mono { letter-spacing: 0.12em; font-weight: 700; }

/* hero: video under a navy fade so white text reads */
.hero { background: var(--ink); }
.hero::after {
  background: linear-gradient(90deg, rgba(11,42,74,.94) 0%, rgba(11,42,74,.72) 36%, rgba(11,42,74,0) 66%),
              linear-gradient(0deg, rgba(11,42,74,.9) 0%, rgba(11,42,74,0) 26%);
}
.hero-video::after { background: rgba(11, 42, 74, 0.25); }
.hero-sub { color: #d6e4f2; }
.hchip { background: rgba(255, 255, 255, 0.08); color: #fff; }
@media (max-width: 760px) {
  .hero::after { background: linear-gradient(180deg, rgba(11,42,74,.96) 0%, rgba(11,42,74,.8) 44%, rgba(11,42,74,0) 72%), linear-gradient(0deg, rgba(11,42,74,.92) 0%, rgba(11,42,74,0) 20%); }
}
@media (max-width: 1100px) { .mobile-bar { background: rgba(11, 42, 74, 0.9); } }

/* buttons */
.btn-primary { background: #ffffff; color: #0b2a4a; }
.btn-primary::before { background: #5ab0ff; }
.btn-primary:hover { color: #06192e; }
.btn-primary .btn-meta { border-color: rgba(11, 42, 74, 0.3); }
.light .btn-primary { background: #0b4f8f; color: #fff; }
.light .btn-primary::before { background: #0b2a4a; }
.light .btn-primary:hover { color: #fff; }
.light .btn-primary .btn-meta { border-color: rgba(255, 255, 255, 0.4); }
.btn-dark { background: #0b4f8f; color: #fff; }
.btn-dark::before { background: #0b2a4a; }
.btn-dark:hover { color: #fff; }
.btn-dark .btn-meta { border-color: rgba(255, 255, 255, 0.4); }
.chip-btn, .t-ink .chip-btn, .t-slate .chip-btn { background: #ffffff; color: #0b2a4a; }
.chip-btn:hover { background: #5ab0ff; color: #06192e; }
.fchip.active { background: #ffffff; border-color: #ffffff; color: #0b2a4a; }
.prow:hover .prow-go { color: #06192e; }
.cert { border-color: var(--line-2); }
.cert:hover { background: #0b4f8f; color: #fff; border-color: #0b4f8f; }
.file-drop { border-color: rgba(10, 30, 60, 0.25); }
.file-drop .mono { background: #0b4f8f; color: #fff; }
.curtain { background: #0b4f8f; }
.curtain span { color: #fff; }
.cursor span { color: #06192e; }
.cursor.link::before { background: rgba(90, 176, 255, 0.15); }
.about-art .badge, .exp-badge, .ccard-go { color: #fff; }
.ccard-go { background: #0b4f8f; }

/* panels */
.light .ind:hover { background: #eef5fc; }
.dark-inds .ind:hover { background: var(--ink-3); }
.scard { background: #f2f7fc; border-color: var(--line-2); }
.scard .ci { background: #0b4f8f; color: #fff; }
.next-steps { background: #0b2a4a; border: 0; }
.next-steps h3 { color: #fff; }
.next-steps li { color: #b8cbe0; }
.light .field input, .light .field select, .light .field textarea { border-color: rgba(10, 30, 60, 0.28); }
.pstep { background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); }
.pstep .big-n { -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.25); }
.footer-certs span { border-color: var(--line); color: var(--text-2); }
.globe-ring .orbit { stroke: rgba(255, 255, 255, 0.18); }
.globe-ring .lat { stroke: rgba(255, 255, 255, 0.1); }
.map { background: #0b2a4a; }
.map iframe { filter: none; }
.map-ph { background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); }
.map-ph p:not(.mono) { color: #fff; }
.map-ph .mono, .map-ph small { color: #b8cbe0; }
.giant { background: linear-gradient(180deg, #c9dcf0 0%, rgba(201, 220, 240, 0.12) 100%); -webkit-background-clip: text; background-clip: text; font-family: Arial, Helvetica, sans-serif; font-weight: 700; }
.prow-art { --c-ink: #dbeafe; --c-soft: rgba(255, 255, 255, 0.12); }
.ph-art { --c-ink: #3d6491; --c-soft: rgba(255, 255, 255, 0.06); --c-acc: #5ab0ff; }

/* category & product cards: rich blues with white text */
.t-sky   { background: linear-gradient(170deg, #1f6fc0 0%, #144f8f 55%, #0b2f57 100%); color: #fff; --c-ink: #e3f0ff; --c-acc: #9fd0ff; --c-soft: rgba(255,255,255,.14); --c-line: rgba(255,255,255,.2); }
.t-steel { background: linear-gradient(170deg, #345b82 0%, #1f3d5e 55%, #0f2440 100%); color: #fff; --c-ink: #e1ebf5; --c-acc: #9fd0ff; --c-soft: rgba(255,255,255,.12); --c-line: rgba(255,255,255,.2); }
.t-sand  { background: linear-gradient(170deg, #11799c 0%, #0b5573 55%, #06314a 100%); color: #fff; --c-ink: #ddf4fb; --c-acc: #9fe3ff; --c-soft: rgba(255,255,255,.14); --c-line: rgba(255,255,255,.2); }
.t-ink   { background: linear-gradient(170deg, #0f2e52 0%, #0a2140 60%, #06142a 100%); color: #fff; --c-ink: #cfe2f5; --c-acc: #5ab0ff; --c-soft: rgba(90,176,255,.18); --c-line: rgba(255,255,255,.18); border: 0; }
.t-slate { background: linear-gradient(170deg, #2a63a3 0%, #1a4677 55%, #0d2a4d 100%); color: #fff; --c-ink: #e6f0fb; --c-acc: #9fd0ff; --c-soft: rgba(255,255,255,.14); --c-line: rgba(255,255,255,.2); }
.ccard, .pcard { box-shadow: 0 18px 40px rgba(11, 42, 74, 0.18); }
.slide .ph-cutout { background: linear-gradient(170deg, #1f6fc0 0%, #144f8f 55%, #0b2f57 100%); }

/* =====================================================================
   CONTENT ADDITIONS: coming-soon badge, capabilities list, YouTube, 8 category cards
   ===================================================================== */
[hidden] { display: none !important; }
.pcard-media, .detail-media { position: relative; }
.soon { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 7px 12px; border-radius: 99px; background: #5ab0ff; color: #06192e; font-size: 9.5px; }
/* category cards: even grid that fits any number of categories */
.ccards { grid-template-columns: repeat(4, 1fr); }
.ccards .ccard, .ccards .ccard:nth-child(4), .ccards .ccard:nth-child(5) { grid-column: auto; min-height: 430px; padding: 26px; }
.ccards .ccard:nth-child(5) .ccard-art { position: static; width: auto; }
.ccard-head h3 { font-size: clamp(1.4rem, 1.7vw, 1.8rem); }
.ccard-head .mono { font-size: 9.5px; }
@media (max-width: 1280px) { .ccards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .ccards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .ccards { grid-template-columns: 1fr; } .ccards .ccard { min-height: 380px; } }
/* capabilities list (Company page) */
.caps { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-2); }
.caps li { display: flex; gap: 18px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line-2); font-size: 1.15rem; font-weight: 700; padding-right: 20px; }
.caps li .mono { color: var(--accent); font-size: 10px; }
@media (max-width: 760px) { .caps { grid-template-columns: 1fr; } }
/* YouTube latest uploads */
.yt-frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--r); overflow: hidden; background: #0b2a4a; box-shadow: 0 24px 60px rgba(11, 42, 74, 0.25); }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.footer-social { margin-top: 0; }
.stat { min-width: 0; }
@media (max-width: 760px) { .stat strong { font-size: clamp(1.6rem, 8.4vw, 2.2rem); } }
.stat strong { font-size: clamp(2.4rem, 4.4vw, 4.8rem); }
@media (max-width: 760px) { .stat strong { font-size: clamp(1.6rem, 8.4vw, 2.2rem); } }

/* =====================================================================
   HOME TOP: random grid of product photos (replaces the video) + short industries with YouTube
   ===================================================================== */
.hero-mosaic { position: absolute; top: 0; bottom: 0; left: 46%; right: 0; z-index: -2; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 6px; padding: 6px; background: var(--ink); }
.hm-tile { position: relative; overflow: hidden; border-radius: 10px; background: #fff; display: block; }
.hm-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .3s; }
.hm-tile img.hm-cutout { object-fit: contain; padding: 8px; background: linear-gradient(170deg, #1f6fc0, #0b2f57); }
.hm-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px; font: 700 10.5px/1.2 Arial, Helvetica, sans-serif; color: #fff; background: linear-gradient(transparent, rgba(6, 25, 46, 0.85)); }
.hm-tile:hover img { filter: brightness(1.08); }
.hm-tile:hover { outline: 2px solid #5ab0ff; outline-offset: -2px; }
.hero::after { background: linear-gradient(90deg, rgba(11,42,74,1) 0%, rgba(11,42,74,1) 45.5%, rgba(11,42,74,0) 46.5%), linear-gradient(0deg, rgba(11,42,74,.55) 0%, rgba(11,42,74,0) 14%); }
.hero-copy { max-width: 46%; padding-right: 30px; }
.hero .display { font-size: clamp(2.4rem, 4.4vw, 5rem); }
.hero-vert { display: none; }
.hero-chips { left: 46%; right: auto; margin-left: 16px; bottom: 22px; z-index: 3; }
.hero-chips .hchip { background: rgba(11, 42, 74, 0.85); }
@media (max-width: 1100px) {
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero::after { display: none; }
  .hero-copy { max-width: none; padding: 110px var(--gut) 30px; }
  .hero .display { font-size: clamp(2.4rem, 7vw, 4.4rem); }
  .hero-mosaic { position: relative; inset: auto; left: auto; z-index: 0; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(110px, 24vw, 200px); margin: 0 var(--gut) 40px; padding: 0; background: none; }
  .hero-mosaic .hm-tile:nth-child(n+10) { display: none; }
  .hero-chips, .scroll-cue, .hero-topline { display: none; }
}

/* industries: short chips + latest YouTube video side by side */
.ind-yt { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.ind-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.ind-chip { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); font-weight: 700; font-size: .98rem; }
.light .ind-chip { border-color: var(--line-2); background: #f2f7fc; }
@media (max-width: 1023px) { .ind-yt { grid-template-columns: 1fr; } }
.hero-chips { left: var(--gut); margin-left: 0; right: auto; }
@media (min-width: 1101px) { .scroll-cue { display: none; } }
@media (max-width: 1100px) { .hero-copy { order: 1; } .hero-mosaic { order: 2; } }
/* YouTube: visible frame + fallback link when the player can't load */
.yt-frame { border: 1px solid var(--line); }
.yt-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: #fff; text-align: center; font-weight: 700; background: radial-gradient(circle at 50% 45%, #1f6fc0 0%, #0b2a4a 70%); }
.yt-fallback b { width: 68px; height: 48px; border-radius: 14px; background: #ff0033; display: grid; place-items: center; font-size: 20px; }
.yt-fallback small { font: 700 10px/1 Arial, Helvetica, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #b8cbe0; }
.hero-topline > span:last-child { display: none; }

/* =====================================================================
   HOME TOP: one big product photo at a time (soft fade, random order)
   ===================================================================== */
.hero::after { display: none; }
.hero { background: radial-gradient(ellipse at 75% 50%, #123f6d 0%, var(--ink) 60%); }
.hero-show { position: absolute; z-index: 1; right: var(--gut); top: 50%; transform: translateY(-50%); width: 46%; height: min(74%, 640px); display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: #ffffff; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35); }
.hs-slides { position: relative; flex: 1; min-height: 0; background: #ffffff; }
.hs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; display: grid; place-items: center; }
.hs-slide.active { opacity: 1; z-index: 1; }
.hs-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hs-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: #0b2a4a; color: #fff; }
.hs-cat { display: block; color: #9fd0ff; font-size: 9.5px; margin-bottom: 4px; }
.hs-name { font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: #fff; }
.hs-name:hover { color: #9fd0ff; }
.hs-ctrl { display: flex; align-items: center; gap: 10px; flex: none; }
.hs-ctrl .mono { font-size: 10px; color: #b8cbe0; }
.hs-ctrl button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 20px; line-height: 1; }
.hs-ctrl button:hover { background: #5ab0ff; border-color: #5ab0ff; color: #06192e; }
.hs-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #5ab0ff; transform: scaleX(0); transform-origin: left; z-index: 2; }
.hs-progress.run { animation: hsfill 4.5s linear forwards; }
@keyframes hsfill { to { transform: scaleX(1); } }
.hero-copy { max-width: 48%; }
.hero-chips { display: none; }
@media (max-width: 1100px) {
  .hero-show { position: relative; inset: auto; transform: none; width: auto; height: 420px; margin: 0 var(--gut) 40px; order: 2; }
  .hero-copy { max-width: none; order: 1; }
}
@media (max-width: 760px) { .hero-show { height: 340px; } .hs-name { font-size: 1rem; } }
.faq summary { padding-right: 64px; }

/* =====================================================================
   LOGO: menu/footer logo + opening animation (letters, then the red arrow)
   ===================================================================== */
.logo-img { height: 34px; width: auto; display: block; flex: none; }
.mobile-bar .logo-img { height: 28px; }
.brand { gap: 14px; }
.preloader { background: #ffffff; }
.pre-inner { gap: 26px; }
.pre-logo { position: relative; width: min(360px, 68vw); aspect-ratio: 628 / 269; }
.pre-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-letters { animation: plLetters .8s cubic-bezier(.2, .7, .1, 1) .15s both; }
@keyframes plLetters { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.pl-arrow { clip-path: inset(0 100% 0 0); animation: plArrow .85s cubic-bezier(.65, 0, .25, 1) .75s forwards; }
@keyframes plArrow { to { clip-path: inset(0 0 0 0); } }
.pre-tag { font: 700 12px/1 Arial, Helvetica, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #2e3192; opacity: 0; animation: plTag .6s ease 1.35s forwards; }
@keyframes plTag { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.preloader.done .pre-inner { opacity: 0; transition: opacity .3s; }

/* =====================================================================
   EQUAL PHOTO SIZES: every product photo sits in the same 4:3 white box,
   shown whole (never cropped or stretched), on phone and desktop.
   ===================================================================== */
.pcard-media, .pcard-media.has-photo {
  flex: none; display: block; position: relative;
  aspect-ratio: 4 / 3; width: auto; height: auto; min-height: 0 !important;
  margin: 12px 14px 4px; padding: 0 !important; overflow: hidden; border-radius: 12px;
}
.pcard-media.has-photo, .pcard-media:has(.ph-cutout) { background: #ffffff; }
.pcard-media .ph, .pcard-media.has-photo .ph { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0 !important; border-radius: 0; background: #ffffff; }
.pcard-media .ph img, .pcard-media .ph video { width: 100%; height: 100%; object-fit: contain !important; scale: 1; }
.pcard:hover .pcard-media .ph-photo img, .pcard:hover .pcard-media .ph-video video { scale: 1.04; }
.pcard-media .ph-cutout { display: grid; place-items: center; }
.pcard-media .ph-cutout .ph-float { position: relative; max-width: 92%; max-height: 92%; width: auto !important; height: auto !important; animation: none; filter: none; }
.pcard-media .ph-cutout .ph-illus, .pcard-media .ph-cutout .ph-shadow { display: none; }
.pcard-media > .illus { position: absolute; inset: 8% 10%; width: 80%; height: 84%; max-width: none; }
.pcard { min-height: 0; }
/* product page gallery and home slideshow: whole photo on white, same box every time */
.stage, .slide, .slide .ph { background: #ffffff; }
.slide .ph-photo img, .slide .ph-video video, .hs-slide img { object-fit: contain !important; }
.slide.active .ph-photo img { animation: none; }
@media (max-width: 760px) {
  .pcard-media, .pcard-media.has-photo { margin: 10px 12px 2px; }
  .stage { aspect-ratio: 4 / 3; }
  .hero-show { height: auto; }
  .hs-slides { flex: none; aspect-ratio: 4 / 3; }
}

/* Slideshow photo always stays inside its white box (iPhone/Safari safe) */
.hs-slides { overflow: hidden; }
.hs-slide { display: block; }
.hs-slide img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; padding: 8px; box-sizing: border-box; background: #ffffff; }
.hero-show { overflow: hidden; }
/* product page gallery: same rule */
.slide .ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }

/* Stats: any number of figures (3 or 4) fill the row evenly */
.stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
}

/* =====================================================================
   HOME TOP: one large still photo of a packaging line (replaces the slideshow)
   ===================================================================== */
.hero { background: var(--ink); }
.hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; }
.hero::after { display: block !important; z-index: 1;
  background: linear-gradient(90deg, rgba(11,42,74,.95) 0%, rgba(11,42,74,.82) 34%, rgba(11,42,74,.25) 62%, rgba(11,42,74,0) 80%),
              linear-gradient(0deg, rgba(11,42,74,.75) 0%, rgba(11,42,74,0) 30%); }
.hero-copy { position: relative; z-index: 2; max-width: 52%; }
.hero-topline, .scroll-cue, .hero-vert, .hero-chips { z-index: 2; }
@media (max-width: 1100px) {
  .hero { min-height: 100svh; flex-direction: row; align-items: flex-end; }
  .hero-copy { max-width: none; padding-top: 120px; }
  .hero::after { background: linear-gradient(180deg, rgba(11,42,74,.55) 0%, rgba(11,42,74,.35) 30%, rgba(11,42,74,.88) 62%, rgba(11,42,74,.97) 100%) !important; }
  .hero-photo img { object-position: 72% 40%; }
}