*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* zinc-2026-09 r2: light-first — dark stays only in hero / stat band / cta / footer */
  --paper:#F3F5F8; --white:#fff; --soft:#F6F8FB;
  --ink:#0E1116; --ink-2:#161B22;
  --hd:#10151B; --tx:#39424E; --mut:#66707C;
  --dim:#AFBAC8; --d-mut:#8B96A3;
  --line-l:rgba(16,21,27,.12); --line-d:rgba(255,255,255,.10);
  --accent:#52677C; --accent-d:#9FB2C4; --accent-soft:rgba(159,178,196,.16);
  --zn-hi:#EDF2F7; --zn-mid:#C3CFDA; --zn-lo:#8DA0B3;
  --metal:linear-gradient(105deg,#F2F5F8 0%,#C9D4DF 30%,#93A5B7 52%,#E4EAF0 74%,#AAB9C8 100%);
  --metal-ink:linear-gradient(105deg,#2E3944 0%,#5D7183 38%,#26303A 60%,#4C5A68 82%,#33404C 100%);
  --metal-btn:linear-gradient(165deg,#EDF2F7 0%,#BCC9D5 55%,#D8E0E8 100%);
  --shadow:0 1px 2px rgba(16,21,27,.05),0 10px 28px -20px rgba(16,21,27,.18);
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1320px; --gut:clamp(1.15rem,4vw,3rem);
  --sect:clamp(1.9rem,4.5vw,3.8rem); --bar:68px;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--tx);font-family:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.03rem;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--zn-mid);color:#04070c}
h1,h2,h3{font-family:Archivo,Geist,system-ui,sans-serif;font-weight:800;line-height:1.05;
  letter-spacing:-.028em;color:var(--hd);text-wrap:balance}
p{text-wrap:pretty}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sect{padding-block:var(--sect)}
.light{background:var(--white)}
.eyebrow{font-family:"Geist Mono",ui-monospace,monospace;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.18em;color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:1.8rem;height:1px;background:linear-gradient(90deg,#8DA0B3,#3E505F);opacity:.8}
.h-hero{font-size:clamp(2.4rem,6vw,5.2rem);line-height:.98;letter-spacing:-.035em}
.h2{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.06;letter-spacing:-.026em}
.h3{font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.1;letter-spacing:-.022em}
.lead{font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.65;max-width:56ch}
.mono{font-family:"Geist Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* two-column section header: heading left, intro right — kills the dead right side */
.head-row{display:grid;gap:1rem;align-items:end;margin-bottom:clamp(1.2rem,2.5vw,2rem)}
@media(min-width:960px){.head-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem)}}
.head-row>p{margin:0;color:var(--mut);max-width:none;padding-bottom:.3rem}

/* side-by-side content halves for short paired sections */
.twin{display:grid;gap:clamp(2rem,4vw,3rem)}
@media(min-width:960px){.twin{grid-template-columns:1fr 1fr}}

/* metallic text: works on the plain heading AND on the kinetic word spans.
   Once .kin splits a heading into .kw spans, background-clip on the parent no
   longer reaches the text, so the gradient is applied per word as well. */
.metal:not(.kin),.metal .kw{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons: primary is polished zinc (unit identity) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:Archivo,sans-serif;
  font-weight:700;font-size:.95rem;padding:1rem 1.7rem;border-radius:12px;line-height:1;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:background .25s var(--ease),border-color .25s,color .25s,transform .12s,box-shadow .25s}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--metal-btn);color:#0B0D11;border-color:rgba(16,21,27,.16);
  box-shadow:0 12px 30px -14px rgba(93,113,131,.6),inset 0 1px 0 rgba(255,255,255,.85)}
.btn-p:hover{box-shadow:0 16px 38px -14px rgba(93,113,131,.8),inset 0 1px 0 rgba(255,255,255,.9);
  background:linear-gradient(165deg,#F4F7FA 0%,#C6D2DD 55%,#E2E8EE 100%)}
.btn-g{border-color:rgba(16,21,27,.28);color:var(--hd)}
.btn-g:hover{border-color:#5D7183;color:#26303A}
/* dark-band variants */
.hero .btn-g,.cta .btn-g,.next .btn-g,.m-nav .btn-g{border-color:rgba(255,255,255,.28);color:#fff}
.hero .btn-g:hover,.cta .btn-g:hover,.next .btn-g:hover{border-color:var(--zn-mid);color:var(--zn-hi)}

/* ---------- top bar ---------- */
/* fixed, not sticky: it has to float over the hero, and a sticky bar in normal
   flow would sit above the hero and show the page background through itself. */
/* always solid dark: the old transparent gradient start state washed out to a
   silvery band whenever it sat over the light page body */
.topbar{position:fixed;inset-inline:0;top:0;z-index:70;height:var(--bar);display:flex;align-items:center;
  transition:background .35s var(--ease),border-color .35s;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:color-mix(in srgb,var(--ink) 92%,transparent);
  backdrop-filter:blur(14px) saturate(140%)}
.topbar.solid{background:color-mix(in srgb,var(--ink) 97%,transparent);border-bottom-color:var(--line-d)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-width:0}
/* the RZF hex mark is an SVG that carries itself on dark — no white box */
.brand img{width:40px;height:40px;object-fit:contain;flex:none}
.brand b{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:.98rem;color:#fff;
  letter-spacing:-.015em;line-height:1.15;white-space:nowrap}
.brand i{display:block;font-style:normal;font-family:"Geist Mono",monospace;font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-d);margin-top:.15rem;white-space:nowrap}
.topnav{display:none;align-items:center;gap:.35rem}
@media(min-width:900px){.topnav{display:flex}}
.topnav a{padding:.55rem .85rem;border-radius:9px;font-size:.9rem;color:#C4CFDC;text-decoration:none;
  transition:color .2s,background .2s;white-space:nowrap}
.topnav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.topnav a.on{color:#fff;background:rgba(255,255,255,.09)}
.topnav .btn{margin-left:.5rem;padding:.7rem 1.15rem;font-size:.86rem}
/* .topnav a (0,1,1) outguns .btn-p (0,1,0), so restate the metal button ink */
.topnav a.btn-p,.m-nav a.btn-p{color:#0B0D11}
.topnav a.btn-p:hover{color:#0B0D11;background:linear-gradient(165deg,#F4F7FA 0%,#C6D2DD 55%,#E2E8EE 100%)}
.bar-side{display:flex;align-items:center;gap:.5rem}
@media(min-width:900px){.bar-side{display:none}}
.bar-call{display:inline-flex;align-items:center;gap:.45rem;font-family:"Geist Mono",monospace;font-size:.82rem;
  color:#fff;text-decoration:none;padding:.55rem .8rem;border-radius:9px;border:1px solid var(--line-d)}
.bar-call:hover{border-color:var(--zn-mid)}
.menu-btn{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:42px;height:38px;
  padding:0 11px;border-radius:9px;border:1px solid var(--line-d);background:transparent;cursor:pointer}
.menu-btn i{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
body.nav-open .menu-btn i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .menu-btn i:nth-child(2){opacity:0}
body.nav-open .menu-btn i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.m-nav{position:fixed;top:var(--bar);inset-inline:0;z-index:69;display:none;
  background:color-mix(in srgb,var(--ink) 95%,transparent);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line-d);padding:.6rem var(--gut) 1.2rem}
body.nav-open .m-nav{display:grid;gap:.15rem}
@media(min-width:900px){body.nav-open .m-nav{display:none}}
.m-nav a{padding:.85rem .6rem;color:#DEE5EC;text-decoration:none;font-size:1rem;
  border-bottom:1px solid rgba(255,255,255,.06)}
.m-nav a.on{color:#fff;font-weight:600}
.m-nav .btn{margin-top:.8rem;border-bottom:0;justify-content:center}

/* ---------- hero (dark band on a light site) ---------- */
.hero{position:relative;min-height:94svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:var(--ink)}
.hero-bg{position:absolute;inset:-8% 0 0;z-index:0;background-size:cover;background-position:center;will-change:transform}
/* round-1 vertical scrim: dark top and bottom, image crisp in the mid band */
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(14,17,22,.82) 0%,rgba(14,17,22,.4) 34%,rgba(14,17,22,.76) 76%,var(--ink) 100%)}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(3rem,7vw,6rem);padding-top:calc(var(--bar) + clamp(3rem,7vw,6rem))}
/* ch resolves against the PARENT font size, so 34ch here was ~270px and made
   the 77px headline wrap to six lines. Size the hero column in rem instead. */
.hero-in{max-width:min(50rem,95%)}
@media(min-width:1000px) and (max-height:860px){.h-hero{font-size:clamp(2.2rem,4.4vw,3.7rem)}}
@media(min-width:1000px) and (max-height:720px){.h-hero{font-size:clamp(2rem,3.9vw,3.1rem)}
  .hero .wrap{padding-block:clamp(2rem,5vw,3.5rem)}}
.hero h1{margin-top:1.4rem;color:#fff}
.hero .lead{margin-top:1.5rem;color:#D3DBE4}
.hero .eyebrow{color:var(--accent-d)}
.hero-cta{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero-meta{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.55rem}
.hero .chip{background:rgba(255,255,255,.07);border-color:var(--line-d);color:#C4CFDC}
.chip{display:inline-flex;font-family:"Geist Mono",monospace;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.42rem .8rem;border-radius:999px;background:var(--white);border:1px solid rgba(16,21,27,.16);color:#414B57}
.bar-sentinel{position:absolute;left:0;top:66vh;width:1px;height:1px;pointer-events:none}
.hero.sub .bar-sentinel{top:26vh}
.scroll-cue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:2;display:none;
  flex-direction:column;align-items:center;gap:.5rem}
@media(min-width:900px){.scroll-cue{display:flex}}
.scroll-cue span{font-family:"Geist Mono",monospace;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:#8794A3}
.scroll-rail{width:1px;height:2.6rem;background:rgba(255,255,255,.2);position:relative;overflow:hidden}
.scroll-rail i{position:absolute;inset-inline:0;top:0;height:1rem;background:var(--zn-mid);animation:cue 2.1s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}

/* compact hero for inner pages — round-1 geometry and scrim: taller, vertical
   fade, image crisp in the mid band (the short diagonal version cropped these
   square photos into a blurry strip) */
.hero.sub{min-height:58svh;align-items:flex-end}
.hero.sub .h-hero{font-size:clamp(2.1rem,4.4vw,3.8rem)}
.hero.sub .wrap{padding-block:clamp(2.2rem,4.5vw,3.6rem);padding-top:calc(var(--bar) + clamp(2.2rem,4.5vw,3.6rem))}
.crumb{font-family:"Geist Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.crumb,.crumb a{color:#93A2B2;text-decoration:none}
.crumb a:hover{color:#fff}
.crumb b{color:var(--zn-hi);font-weight:500}

/* ---------- the one number (dark metallic band) ---------- */
.figure{border-block:1px solid var(--line-d);position:relative;overflow:hidden;color:var(--dim);
  background:linear-gradient(120deg,var(--ink-2) 0%,color-mix(in srgb,#9FB2C4 14%,var(--ink-2)) 100%)}
.figure .wrap{display:grid;gap:1.2rem;padding-block:clamp(1.7rem,4vw,2.9rem);align-items:end}
@media(min-width:860px){.figure .wrap{grid-template-columns:auto 1fr;gap:3.5rem}}
.figure-n{font-family:Archivo,sans-serif;font-weight:800;line-height:.86;letter-spacing:-.04em;color:#fff;
  font-size:clamp(3.6rem,11vw,8.5rem);font-variant-numeric:tabular-nums}
/* metallic digits: gradient must sit on whichever node holds the glyphs —
   the figure itself when plain, each odometer digit cell when animated */
.figure-n:not(.odo),.figure-n .odo-c b{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.figure-n em{font-style:normal;background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--accent-d);font-size:.42em;letter-spacing:-.02em}
.figure-l{font-family:Archivo,sans-serif;font-weight:700;color:#fff;font-size:clamp(1.05rem,1.6vw,1.35rem)}
.figure-note{margin-top:.5rem;font-size:.94rem;color:var(--d-mut)}

/* ---------- process (light) ---------- */
.proc-head{margin-bottom:clamp(1.3rem,2.6vw,2.2rem)}
.proc-head h2{margin-top:1.1rem}
.proc-head p{margin-top:1rem;color:var(--mut)}
.proc-grid{display:grid;gap:clamp(1.5rem,3vw,3rem)}
@media(min-width:1000px){.proc-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}}
.proc-media{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;border:1px solid var(--line-l);
  background:var(--white);box-shadow:var(--shadow)}
@media(min-width:1000px){.proc-media{position:sticky;top:calc(50vh - 21vw);aspect-ratio:1/1;max-height:60vh}}
.proc-media figure{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.proc-media figure.on{opacity:1}
.proc-media img{width:100%;height:100%;object-fit:cover}
.proc-media .badge{position:absolute;left:1rem;top:1rem;z-index:3;font-family:"Geist Mono",monospace;font-size:.72rem;
  letter-spacing:.12em;padding:.42rem .75rem;border-radius:999px;background:rgba(11,13,17,.72);
  border:1px solid var(--line-d);color:var(--zn-mid);backdrop-filter:blur(8px)}
.steps{display:grid;gap:0}
.step{padding:clamp(1.4rem,2.6vw,2.2rem) 0;border-top:1px solid var(--line-l);display:grid;
  grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;opacity:.45;transition:opacity .45s var(--ease)}
.step:last-child{border-bottom:1px solid var(--line-l)}
.step.on{opacity:1}
.step-n{font-family:"Geist Mono",monospace;font-size:.78rem;letter-spacing:.1em;color:var(--accent);
  padding-top:.35rem;min-width:2.2rem}
.step h3{font-size:clamp(1.1rem,1.7vw,1.4rem);letter-spacing:-.02em}
.step p{margin-top:.6rem;font-size:.97rem;color:var(--mut);max-width:52ch}
.step.on p{color:var(--tx)}

/* ---------- capability plates ---------- */
.caps{display:grid;gap:1px;background:var(--line-l);border:1px solid var(--line-l);border-radius:18px;
  overflow:hidden;margin-top:clamp(1.8rem,3vw,2.8rem);box-shadow:var(--shadow)}
@media(min-width:760px){.caps{grid-template-columns:1fr 1fr}}
.cap{background:var(--soft);padding:clamp(1.5rem,2.6vw,2.2rem)}
.light .cap{background:var(--soft)}
.cap h3{font-size:1.08rem;letter-spacing:-.02em}
.cap p{margin-top:.65rem;font-size:.95rem;color:var(--mut)}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,1.2vw,1rem);margin-top:clamp(1.8rem,3vw,2.8rem)}
@media(min-width:900px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal figure{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--white);border:1px solid var(--line-l);box-shadow:var(--shadow)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gal figure:hover img{transform:scale(1.06)}

/* ---------- proof ---------- */
.proof{display:grid;gap:1px;background:var(--line-l);border:1px solid var(--line-l);border-radius:18px;
  overflow:hidden;margin-top:clamp(1.8rem,3vw,2.6rem);box-shadow:var(--shadow)}
@media(min-width:640px){.proof{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.proof{grid-template-columns:repeat(3,1fr)}}
.proof div{background:var(--white);padding:1.2rem 1.4rem;font-size:.95rem;color:var(--tx);
  display:flex;align-items:center;gap:.75rem}
.proof div::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--metal-ink);flex:none}

/* ---------- location + cta ---------- */
.loc{display:grid;gap:1px;background:var(--line-l);border:1px solid var(--line-l);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow)}
@media(min-width:820px){.loc{grid-template-columns:1.3fr 1fr}}
.loc>div{background:var(--white);padding:clamp(1.5rem,3vw,2.4rem)}
.loc h3{font-size:1.05rem}
.loc p{margin-top:.9rem;font-size:.98rem;color:var(--tx);line-height:1.6}
.loc a.line{display:block;margin-top:.5rem;color:var(--hd);text-decoration:none;font-size:1rem}
.loc a.line:hover{color:#5D7183}
.maplink{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;color:#41566A;
  font-family:Archivo,sans-serif;font-weight:700;font-size:.92rem;text-decoration:none}
/* dark variant inside the cta band */
.cta .loc{background:var(--line-d);border-color:var(--line-d);box-shadow:none}
.cta .loc>div{background:var(--ink-2)}
.cta .loc h3{color:#fff}
.cta .loc p{color:#C4CFDC}
.cta .loc a.line{color:#fff}
.cta .loc a.line:hover{color:var(--zn-mid)}
.cta .maplink{color:var(--zn-mid)}

.cta{position:relative;overflow:hidden;background:var(--ink);border-top:1px solid var(--line-d);color:var(--dim)}
.cta h2{color:#fff}
.cta .eyebrow{color:var(--accent-d)}
.cta .wrap{position:relative;z-index:2;padding-block:clamp(2.2rem,5vw,4rem);display:grid;gap:clamp(1.8rem,3vw,2.6rem)}
.cta-top{display:grid;gap:1.6rem;align-items:center}
@media(min-width:900px){.cta-top{grid-template-columns:1.25fr 1fr}}
.cta-top p{margin-top:1.1rem;color:var(--dim);max-width:48ch}
.cta-b{display:flex;flex-wrap:wrap;gap:.9rem}
@media(min-width:900px){.cta-top .cta-b{justify-content:flex-end}}
.cta-glow{position:absolute;right:-14rem;top:-14rem;width:38rem;height:38rem;border-radius:50%;z-index:1;
  background:radial-gradient(circle,var(--accent-soft),transparent 68%);filter:blur(40px);pointer-events:none}

footer{border-top:1px solid var(--line-d);background:var(--ink);color:var(--dim)}
footer .wrap{padding-block:1.8rem;display:grid;gap:1.6rem}
@media(min-width:760px){footer .wrap{grid-template-columns:1fr auto;align-items:center}}
.f-brand{display:flex;align-items:center;gap:.85rem}
.f-brand img{width:40px;height:40px}
.f-brand b{display:block;font-family:Archivo,sans-serif;font-weight:800;color:#fff;font-size:.98rem;letter-spacing:-.01em}
.f-brand span{display:block;font-family:"Geist Mono",monospace;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-d);margin-top:.15rem}
.f-links{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.9rem}
.f-links a{color:var(--d-mut);text-decoration:none}
.f-links a:hover{color:#fff}
.f-legal{grid-column:1/-1;padding-top:1.4rem;border-top:1px solid var(--line-d);font-size:.82rem;color:var(--d-mut);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between}
footer .note{color:var(--d-mut)}

/* floating whatsapp */
.wa{position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;display:inline-flex;align-items:center;gap:.55rem;
  padding:.9rem 1.15rem;border-radius:999px;background:#25D366;color:#04240f;text-decoration:none;
  font-family:Archivo,sans-serif;font-weight:700;font-size:.9rem;box-shadow:0 14px 34px -12px rgba(0,0,0,.4)}
.wa svg{flex:none}
.wa span{display:none}
@media(min-width:640px){.wa span{display:inline}}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .step{opacity:1}
  .proc-media figure{opacity:0}
  .proc-media figure:first-child{opacity:1}
}

/* ===== refresh-2026-08 ===== */
/* kinetic word rise: no-JS pages never get .kin, so text renders plainly */
.kw-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.kin .kw{display:inline-block;transform:translateY(112%);transition:transform .7s var(--ease);transition-delay:var(--kd,0s)}
.kin.kin-go .kw{transform:none}
/* odometer digits in the headline figure */
.odo{display:inline-flex;overflow:hidden;height:1em;line-height:1;vertical-align:baseline}
.odo-c{display:block;transition:transform 1.15s var(--ease)}
.odo-c b{display:block;height:1em;line-height:1;font-weight:inherit;text-align:center}
/* light sweep across the figure band */
.figure::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.075) 50%,transparent 58%);
  transform:translateX(-100%);animation:fig-sweep 8s var(--ease) infinite}
@keyframes fig-sweep{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
/* before/after slider */
.ba{position:relative;aspect-ratio:3/2;border-radius:18px;overflow:hidden;border:1px solid var(--line-l);
  background:var(--white);user-select:none;-webkit-user-select:none;margin-top:clamp(1.8rem,3vw,2.8rem);box-shadow:var(--shadow)}
.ba>img,.ba-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-top{position:absolute;inset:0;clip-path:inset(0 44% 0 0)}
.ba-h{position:absolute;top:0;bottom:0;left:56%;width:44px;transform:translateX(-50%);cursor:ew-resize;touch-action:none}
.ba-h:focus-visible{outline:2px solid #5D7183;outline-offset:2px}
.ba-line{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.9);
  box-shadow:0 0 12px rgba(0,0,0,.4)}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;
  background:linear-gradient(165deg,#5c6e80,#2c3948);display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.ba-tag{position:absolute;bottom:.9rem;z-index:2;font-family:"Geist Mono",monospace;font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;padding:.4rem .75rem;border-radius:999px;
  background:rgba(11,13,17,.72);border:1px solid var(--line-d);color:#C4CFDC;backdrop-filter:blur(6px)}
.ba-tag.l{left:.9rem}.ba-tag.r{right:.9rem}
/* road: where the part goes next */
.next{border-top:1px solid var(--line-d);background:var(--ink-2);position:relative;overflow:hidden;color:var(--dim)}
.next h2{color:#fff}
.next .eyebrow{color:var(--accent-d)}
.next .wrap{position:relative;padding-block:clamp(1.8rem,4vw,3rem);display:grid;gap:1.8rem;align-items:center}
@media(min-width:900px){.next .wrap{grid-template-columns:1.3fr 1fr}}
.next-road{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden}
.next-road i{position:absolute;top:0;bottom:0;width:22%;background:linear-gradient(90deg,transparent,var(--zn-mid),transparent);
  animation:road-run 4.5s linear infinite}
@keyframes road-run{0%{left:-22%}100%{left:100%}}
.next-b{display:flex;flex-wrap:wrap;gap:.9rem}
@media(min-width:900px){.next-b{justify-content:flex-end}}
@media(prefers-reduced-motion:reduce){
  .kin .kw{transform:none;transition:none}
  .figure::after,.next-road i{animation:none}
  .odo-c{transition:none}
}

/* clarivox credit */
.credit{flex-basis:100%;font-size:.76rem;color:var(--d-mut);text-align:center}
.credit a{color:inherit;text-decoration:none}
.credit a:hover{color:#fff}

/* ===== briefs-2026-08 ===== */
.cards{display:grid;gap:.8rem;margin-top:clamp(1.4rem,2.5vw,2rem)}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.cards{grid-template-columns:repeat(3,1fr)}}
.cards.two{grid-template-columns:1fr}
@media(min-width:700px){.cards.two{grid-template-columns:1fr 1fr}}
.cards.four{grid-template-columns:1fr}
@media(min-width:700px){.cards.four{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.cards.four{grid-template-columns:repeat(4,1fr)}}
.card{position:relative;background:var(--white);border:1px solid var(--line-l);border-radius:16px;
  padding:1.2rem 1.3rem;box-shadow:var(--shadow)}
/* brushed steel top light on every card */
.card::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(70,86,102,.35),transparent)}
.card i{display:block;font-style:normal;font-family:"Geist Mono",monospace;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.45rem}
.card b{display:block;font-family:Archivo,sans-serif;font-weight:800;color:var(--hd);font-size:1.02rem;letter-spacing:-.01em;line-height:1.2}
.card small{display:block;font-size:.8rem;color:var(--accent);margin-top:.2rem}
.card p{margin-top:.55rem;font-size:.9rem;color:var(--mut);line-height:1.55}
.card ul{list-style:none;margin-top:.6rem;display:grid;gap:.25rem}
.card li{font-size:.84rem;color:var(--tx);padding-left:.9rem;position:relative}
.card li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:#7C90A2}
.flow{display:grid;gap:.6rem .9rem;margin-top:1.4rem}
@media(min-width:700px){.flow{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.flow{grid-template-columns:repeat(3,1fr)}}
.flow div{border-top:1px solid rgba(16,21,27,.18);padding-top:.6rem;font-size:.9rem;color:var(--tx)}
.flow div span{display:block;font-family:"Geist Mono",monospace;font-size:.62rem;letter-spacing:.14em;color:var(--accent);margin-bottom:.15rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.sub{margin-top:clamp(2rem,4vw,3rem)}
.note{margin-top:1.6rem;font-size:.78rem;color:var(--mut);line-height:1.6;max-width:none}
.note a{color:#41566A;text-decoration:none}

/* ===== zinc-2026-09: multi-page components ===== */
/* two big technology doors on the home page */
.duo{display:grid;gap:1rem;margin-top:clamp(1.6rem,3vw,2.4rem)}
@media(min-width:860px){.duo{grid-template-columns:1fr 1fr}}
.door{position:relative;display:block;border-radius:20px;overflow:hidden;border:1px solid var(--line-l);
  background:var(--white);text-decoration:none;isolation:isolate;box-shadow:var(--shadow);
  transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.door:hover{border-color:rgba(93,113,131,.55);transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(16,21,27,.05),0 18px 40px -22px rgba(16,21,27,.28)}
.door-img{aspect-ratio:16/9;overflow:hidden}
.door-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.door:hover .door-img img{transform:scale(1.05)}
.door-body{padding:1.4rem 1.5rem 1.6rem}
.door-body i{display:block;font-style:normal;font-family:"Geist Mono",monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.door-body b{display:block;font-family:Archivo,sans-serif;font-weight:800;color:var(--hd);font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.02em}
.door-body small{display:block;font-size:.86rem;color:#5D7183;margin-top:.25rem}
.door-body p{margin-top:.7rem;font-size:.93rem;color:var(--mut);line-height:1.6}
.door-go{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-family:Archivo,sans-serif;
  font-weight:700;font-size:.92rem;color:#26303A}
.door-go::after{content:"\2192";transition:transform .3s var(--ease)}
.door:hover .door-go::after{transform:translateX(4px)}

/* feature checklist, two columns */
.feat{display:grid;gap:.45rem .9rem;margin-top:1.4rem;list-style:none}
@media(min-width:700px){.feat{grid-template-columns:1fr 1fr}}
.feat li{position:relative;padding:.55rem 0 .55rem 1.7rem;font-size:.95rem;color:var(--tx);
  border-bottom:1px solid rgba(16,21,27,.1)}
.feat li::before{content:"";position:absolute;left:.15rem;top:1.05em;width:.55rem;height:.55rem;border-radius:2px;
  background:var(--metal-ink);transform:rotate(45deg)}

/* spec stat band: big metallic values in a row */
.spec{display:grid;gap:1px;background:var(--line-l);border:1px solid var(--line-l);border-radius:18px;
  overflow:hidden;margin-top:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow)}
@media(min-width:760px){.spec{grid-template-columns:repeat(3,1fr)}}
.spec>div{background:var(--white);padding:1.4rem 1.5rem}
.spec b{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(1.7rem,3vw,2.5rem);
  letter-spacing:-.03em;line-height:1;background:var(--metal-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.spec span{display:block;margin-top:.5rem;font-size:.88rem;color:var(--mut)}
.spec em{font-style:normal;font-family:"Geist Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.55rem}

/* value chain: requirement to approved component */
.vflow{display:grid;gap:0;margin-top:clamp(1.6rem,3vw,2.4rem)}
.vflow>div{position:relative;padding:.85rem 0 .85rem 2.4rem;font-size:.98rem;color:var(--tx)}
.vflow>div b{color:var(--hd);font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.01em}
.vflow>div::before{content:"";position:absolute;left:.55rem;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(70,86,102,.55),rgba(70,86,102,.15))}
.vflow>div::after{content:"";position:absolute;left:.28rem;top:1.35rem;width:.6rem;height:.6rem;border-radius:50%;
  background:var(--metal-ink);box-shadow:0 0 0 4px rgba(93,113,131,.14)}
.vflow>div:first-child::before{top:1.35rem}
.vflow>div:last-child::before{bottom:auto;height:1.35rem}
.vflow>div span{display:block;font-family:"Geist Mono",monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}

/* product hero panel on tech pages */
.tech-head{display:grid;gap:clamp(1.5rem,3vw,3rem);align-items:center}
@media(min-width:960px){.tech-head{grid-template-columns:1.15fr .85fr}}
.tech-img{border-radius:18px;overflow:hidden;border:1px solid var(--line-l);background:var(--white);box-shadow:var(--shadow)}
.tech-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* page-to-page pager at the bottom of inner pages */
.pager{display:grid;gap:.8rem;margin-top:clamp(1.8rem,3vw,2.6rem)}
@media(min-width:760px){.pager{grid-template-columns:1fr 1fr}}
.pager a{display:flex;flex-direction:column;gap:.3rem;padding:1.2rem 1.4rem;border:1px solid var(--line-l);
  border-radius:16px;background:var(--white);text-decoration:none;box-shadow:var(--shadow);transition:border-color .3s}
.pager a:hover{border-color:rgba(93,113,131,.55)}
.pager i{font-style:normal;font-family:"Geist Mono",monospace;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.pager b{font-family:Archivo,sans-serif;font-weight:800;color:var(--hd);font-size:1.05rem;letter-spacing:-.01em}

/* ===== zinc-2026-09 r2: enquiry form (static site — composes WhatsApp / email) ===== */
.cgrid{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
@media(min-width:1000px){.cgrid{grid-template-columns:1.25fr .75fr}}
.cform{background:var(--white);border:1px solid var(--line-l);border-radius:18px;box-shadow:var(--shadow);
  padding:clamp(1.4rem,2.6vw,2.2rem)}
.cform h3{font-size:1.15rem}
.cform .frow{display:grid;gap:.9rem;margin-top:1.1rem}
@media(min-width:700px){.cform .frow{grid-template-columns:1fr 1fr}}
.cform .frow.one{grid-template-columns:1fr}
.cform label{display:block}
.cform label span{display:block;font-family:"Geist Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.cform input,.cform select,.cform textarea{width:100%;font:inherit;font-size:.97rem;color:var(--hd);
  background:var(--soft);border:1px solid rgba(16,21,27,.16);border-radius:10px;padding:.75rem .9rem;
  transition:border-color .2s,box-shadow .2s}
.cform textarea{min-height:6.5rem;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:#5D7183;
  box-shadow:0 0 0 3px rgba(93,113,131,.18)}
.cform .fbtns{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.4rem;align-items:center}
.cform .fnote{margin-top:1rem;font-size:.82rem;color:var(--mut)}
.cform .ferr{display:none;margin-top:1rem;font-size:.88rem;color:#8C3A2E}
.cform.show-err .ferr{display:block}
.cside{display:grid;gap:.9rem}
.cside .card p{margin-top:.4rem}
.cside .card a{text-decoration:none;color:var(--hd)}
.cside .card a:hover{color:#5D7183}
.cside .card .mono{display:block;margin-top:.35rem;font-size:.95rem}

/* ===== zinc-2026-09 r3: scroll effects ===== */
/* metallic scroll progress bar */
.sprog{position:fixed;left:0;top:0;height:2.5px;width:100%;z-index:72;pointer-events:none;
  background:var(--metal);transform:scaleX(0);transform-origin:left;will-change:transform}

/* staggered child reveals: opacity + the separate `translate` property, so they
   never fight a component's own transform (door hover lift, gallery zoom) */
[data-stagger]>*{opacity:0;translate:0 18px;
  transition:opacity .7s var(--ease),translate .7s var(--ease);transition-delay:var(--sd,0s)}
[data-stagger].in>*{opacity:1;translate:0 0}

/* frame-open image reveal */
.wipe{clip-path:inset(12% 8% 12% 8% round 18px);transition:clip-path 1.1s var(--ease)}
.wipe.in{clip-path:inset(0 0 0 0 round 18px)}
/* drift parallax images get a little overscan so edges never show */
.tech-img img{scale:1.09;will-change:translate}

@media(prefers-reduced-motion:reduce){
  [data-stagger]>*{opacity:1;translate:none;transition:none}
  .wipe{clip-path:none;transition:none}
  .tech-img img{scale:none}
  .sprog{display:none}
}

/* ===== zinc-2026-09 r4: polish + scroll + 3D packs ===== */
/* metallic sheen sweep on primary buttons */
.btn-p{position:relative;overflow:hidden}
.btn-p::after{content:"";position:absolute;top:-4px;bottom:-4px;left:-50%;width:46%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.8),transparent);
  transform:skewX(-18deg) translateX(-40%)}
.btn-p:hover::after{animation:sheen .75s var(--ease)}
@keyframes sheen{to{transform:skewX(-18deg) translateX(320%)}}

/* drifting hex-grid texture in the dark bands (echoes the RZF nut mark) */
.figure::before,.cta::after,.next::after,footer::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 96 84'%3E%3Cpolygon points='72,42 60,62.8 36,62.8 24,42 36,21.2 60,21.2' fill='none' stroke='rgba(255,255,255,0.05)'/%3E%3C/svg%3E");
  background-size:96px 84px;animation:hexdrift 90s linear infinite}
@keyframes hexdrift{to{background-position:96px 84px}}
footer{position:relative}
.figure .wrap,.next .wrap,footer .wrap{position:relative;z-index:2}

/* JS tilt returns smoothly through these */
.card,.pager a{transition:transform .3s ease-out,border-color .3s}

/* pinned horizontal process rail (desktop only; mobile keeps the grid) */
@media(min-width:1000px){
  .rail{overflow:hidden}
  .rail .flow{display:flex;gap:clamp(2rem,3vw,3.2rem);width:max-content;margin-top:1.4rem;padding:1rem 8vw 1rem 0}
  .rail .flow>div{min-width:300px;max-width:300px;border-top-width:2px;font-size:1rem}
  .rail .flow>div span{font-size:.7rem}
}

@media(prefers-reduced-motion:reduce){
  .btn-p:hover::after{animation:none}
  .figure::before,.cta::after,.next::after,footer::after{animation:none}
}

/* ===== zinc-2026-09 r5: coating cross-section ===== */
.xsec-card{background:var(--white);border:1px solid var(--line-l);border-radius:18px;
  box-shadow:var(--shadow);padding:clamp(1.2rem,2.5vw,2rem);margin-top:1.4rem}
.xsec-card svg{display:block;width:100%;height:auto}
.xsec-legend{display:flex;flex-wrap:wrap;gap:.8rem 1.8rem;margin-top:1.1rem;font-size:.88rem;color:var(--tx)}
.xs-label{display:inline-flex;align-items:center;gap:.55rem}
.xs-label i{width:14px;height:14px;border-radius:4px;border:1px solid var(--line-l);flex:none}

/* ===== zinc-2026-09 r6: FAQ (AEO) ===== */
.faq{display:grid;gap:.7rem;margin-top:clamp(1.4rem,2.5vw,2rem)}
.faq details{background:var(--white);border:1px solid var(--line-l);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden}
.faq summary{cursor:pointer;padding:1.05rem 1.3rem;font-family:Archivo,sans-serif;font-weight:700;
  color:var(--hd);list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Geist Mono",monospace;color:var(--accent);font-size:1.15rem;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details>p{padding:0 1.3rem 1.15rem;color:var(--mut);font-size:.95rem}