/* =========================================================================
   laserontroest.nl
   Industriële laserreiniging op locatie
   Design direction: industrial precision. Dark steel canvas, one cool laser
   accent, ember only inside imagery. Signature element: the laser line.
   ========================================================================= */

:root{
  /* palette, sampled from the hero footage */
  --canvas:#0B1219;
  --canvas-deep:#070C11;
  --panel:#131D26;
  --panel-2:#182430;
  --line:#1F2E3A;
  --line-strong:#3C505F80;
  --accent:#8FD4E0;
  --accent-hover:#B4E6EE;
  --accent-muted:rgba(143,212,224,.20);
  --accent-dim:rgba(143,212,224,.10);
  --ember:#FF7A3C;
  --text-primary:#EDF3F8;
  --text-secondary:#9FB2BF;
  --text-mute:#778996;

  /* type */
  --display:"Archivo","Archivo Fallback",system-ui,sans-serif;
  --body:"IBM Plex Sans","IBM Plex Sans Fallback",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.28s;
  --t-mid:.55s;
  --t-slow:.9s;

  /* text over footage */
  --tshadow:0 1px 2px rgba(5,7,10,.95),0 3px 12px rgba(5,7,10,.78),0 10px 44px rgba(5,7,10,.8);

  /* layout */
  --gut:clamp(20px,5vw,64px);
  --maxw:1280px;
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  opacity:0;
  transition:opacity .6s var(--ease);
}
body.ready{opacity:1}

/* ---------- the one environment: a fixed layer behind everything ---------- */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 12% 0%,rgba(143,212,224,.055) 0%,rgba(143,212,224,0) 55%),
    radial-gradient(90% 70% at 88% 100%,rgba(143,212,224,.035) 0%,rgba(143,212,224,0) 60%),
    linear-gradient(180deg,#0A111A 0%,#0B1219 40%,#070D13 100%);
}
.env::after{
  content:"";position:absolute;inset:-20%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.035;mix-blend-mode:overlay;
}
.env .drift{
  position:absolute;left:50%;top:35%;width:78vmax;height:78vmax;margin:-39vmax 0 0 -39vmax;
  background:radial-gradient(circle,rgba(143,212,224,.075) 0%,rgba(143,212,224,0) 62%);
  animation:drift 96s linear -22s infinite;
}
@keyframes drift{
  0%{transform:translate3d(-16%,-8%,0) scale(1)}
  33%{transform:translate3d(14%,10%,0) scale(1.14)}
  66%{transform:translate3d(6%,-14%,0) scale(.96)}
  100%{transform:translate3d(-16%,-8%,0) scale(1)}
}

/* ---------- structure ---------- */
main{position:relative;z-index:1;display:block}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
.sec{padding-block:clamp(72px,10vw,132px)}
.sec-tight{padding-block:clamp(56px,7vw,92px)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#04222A;padding:12px 18px;border-radius:0 0 8px 0;
  font-family:var(--mono);font-size:13px;font-weight:500;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.018em;margin:0}
h1{font-size:clamp(2.35rem,5.4vw,4.35rem)}
h2{font-size:clamp(1.95rem,4vw,3.15rem)}
h3{font-size:clamp(1.18rem,1.7vw,1.42rem);letter-spacing:-.01em;line-height:1.18}
h4{font-size:1.02rem;letter-spacing:-.005em}
p{margin:0}
a{color:inherit}

.kicker{
  font-family:var(--mono);font-size:.735rem;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:14px;margin-bottom:20px;
}
.kicker::before{
  content:"";width:34px;height:1px;background:var(--accent);opacity:.55;flex:none;
}
.lede{
  font-size:clamp(1.03rem,1.35vw,1.2rem);color:var(--text-secondary);
  max-width:62ch;margin-top:20px;line-height:1.66;
}
.sec-head{max-width:none}
.sec-head h2{max-width:19ch}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--text-mute)}

/* ---------- the signature element: the laser line ---------- */
.laserline{display:block;width:100%;height:2px;overflow:visible}
.laserline line{
  stroke:var(--accent);stroke-width:1.25;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.5s var(--ease-out);
  filter:drop-shadow(0 0 6px rgba(143,212,224,.65));
}
.laserline.in line{stroke-dashoffset:0}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--accent);--btn-fg:#04222A;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:.79rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 26px;border-radius:2px;border:1px solid transparent;text-decoration:none;
  background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
  text-shadow:none;white-space:nowrap;
}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 8px 30px rgba(143,212,224,.22)}
.btn:active{transform:translateY(0)}
.btn-ghost{
  --btn-bg:transparent;--btn-fg:var(--text-primary);
  border-color:#3E5567;
}
.btn-ghost:hover{background:rgba(143,212,224,.09);border-color:var(--accent);color:var(--accent-hover);box-shadow:none}
.btn-wa{--btn-bg:#1F2C36;--btn-fg:var(--text-primary);border-color:#33454F}
.btn-wa:hover{--btn-bg:#25353F;border-color:#4A6472;color:var(--text-primary);box-shadow:none}
.btn svg{width:15px;height:15px;flex:none}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),
             backdrop-filter var(--t-mid) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(9,15,21,.86);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.nav .wrap{display:flex;align-items:center;gap:28px;width:100%}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand-mark{width:26px;height:26px;flex:none}
.brand-txt{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;line-height:1}
.brand-txt span{font-weight:400;color:var(--text-secondary)}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav-links a{
  font-family:var(--mono);font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-secondary);text-decoration:none;position:relative;padding-block:6px;
  transition:color var(--t-fast) var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);
  transition:right var(--t-fast) var(--ease);
}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after{right:0}
.nav-cta{display:flex;align-items:center;gap:16px;flex:none}
/* taalwissel / language switch */
.lang{display:flex;align-items:center;gap:5px;flex:none;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em}
.lang a{color:var(--text-mute);text-decoration:none;padding:5px 3px;
  transition:color var(--t-fast) var(--ease)}
.lang a:hover{color:var(--text-primary)}
.lang a[aria-current="true"]{color:var(--accent)}
.lang span{color:#4A5C6B}
.mobile-menu .mm-lang a{color:var(--accent)}
.nav-tel{
  font-family:var(--mono);font-size:.78rem;color:var(--text-primary);text-decoration:none;
  letter-spacing:.04em;transition:color var(--t-fast) var(--ease);white-space:nowrap;
}
.nav-tel:hover{color:var(--accent)}
.nav .btn{padding:11px 18px;font-size:.71rem}
.burger{
  display:none;width:42px;height:42px;border:1px solid var(--line-strong);background:transparent;
  border-radius:2px;cursor:pointer;align-items:center;justify-content:center;flex:none;
  transition:border-color var(--t-fast) var(--ease);
}
.burger:hover{border-color:var(--accent)}
.burger span{display:block;width:17px;height:1px;background:var(--text-primary);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1px;background:var(--text-primary);
  transition:transform var(--t-fast) var(--ease);
}
.burger span::before{top:-5px}
.burger span::after{top:5px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{transform:translateY(5px) rotate(45deg)}
.nav.open .burger span::after{transform:translateY(-5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:79;
  background:rgba(9,15,21,.97);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:transform var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease),visibility var(--t-mid);
}
.nav.open + .mobile-menu{transform:translateY(0);opacity:1;visibility:visible}
.mobile-menu ul{list-style:none;margin:0;padding:14px var(--gut) 26px}
.mobile-menu li{border-bottom:1px solid var(--line)}
.mobile-menu li:last-child{border-bottom:0}
.mobile-menu a{
  display:block;padding:16px 0;text-decoration:none;font-family:var(--mono);
  font-size:.85rem;letter-spacing:.11em;text-transform:uppercase;color:var(--text-secondary);
}
.mobile-menu a:hover{color:var(--accent)}

/* =========================================================================
   HERO (scroll-scrubbed video)
   ========================================================================= */
.hero{position:relative;height:520vh}
.hero-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  background:var(--canvas-deep);
}
.hero-poster,.hero video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero-poster{background-size:cover;background-position:center;opacity:1;transition:opacity .8s var(--ease)}
.hero video{opacity:0;transition:opacity .7s var(--ease);will-change:transform;transform:translateZ(0)}
.hero-stage.video-ready video{opacity:1}
.hero-stage.video-ready .hero-poster{opacity:0}
.hero-stage.video-failed video{display:none}

/* global base scrim: no frame is ever raw behind the page */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 120% 90% at 62% 45%,rgba(8,13,19,0) 30%,rgba(8,13,19,.66) 100%),
    linear-gradient(90deg,rgba(8,13,19,.72) 0%,rgba(8,13,19,.34) 42%,rgba(8,13,19,0) 66%),
    linear-gradient(180deg,rgba(8,13,19,.55) 0%,rgba(8,13,19,0) 22%);
}

.hero-inner{position:absolute;inset:0;display:block}
.band{
  position:absolute;left:0;right:0;top:0;bottom:0;
  opacity:0;pointer-events:none;text-shadow:var(--tshadow);
}
.band.live{pointer-events:auto}
/* per-band scrim, deepens with the band's own progress */
/* peak alphas tuned against the real footage: the plume and the ceiling light
   both cross the left column, so this band carries more weight than usual */
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 80% at 26% 50%,
    rgba(5,9,14,.82) 0%,rgba(5,9,14,.62) 48%,rgba(5,9,14,0) 78%);
}
.band-in{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:100%;padding-inline:var(--gut);
}
.band-col{width:100%;max-width:var(--maxw);margin:0 auto}
.band-txt{max-width:min(52%,700px)}
.band h1{font-size:clamp(2.2rem,4.6vw,3.85rem)}
.band h1,.band h2{margin:0}
/* bands 2 to 4 carry their headline in a <p> so the page keeps one h1;
   they still have to read as headlines */
.band .split{
  font-family:var(--display);font-weight:700;line-height:1.06;
  letter-spacing:-.016em;margin:0;
  font-size:clamp(1.8rem,3.4vw,2.85rem);
}
.band h1.split{font-size:clamp(2.2rem,4.6vw,3.85rem);line-height:1.04}
.band .sub{
  margin-top:22px;font-size:clamp(1rem,1.25vw,1.14rem);color:#D3DFE9;max-width:44ch;line-height:1.6;
}
.band .chip{
  display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);
  background:rgba(8,12,19,.55);border:1px solid rgba(143,212,224,.30);border-radius:10px;
  padding:8px 14px;margin-bottom:22px;backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(5,7,10,.85);
}
.band .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* text splitting */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) scatter */
.e-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
/* (f) drift-down */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px));
}
/* (d) word-punch with overshoot */
.e-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.e-punch .w.em{--ov:.22;--sd:.16;--ss:2.6}
/* (e) word-by-word rise into staged settle */
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px));
}
.e-rise-sub{--ks:clamp(0,(var(--k,0) - .60)*4,1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px))}
.e-rise-cta{--kb:clamp(0,(var(--k,0) - .74)*5,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*14px))}
.band .sub,.band .cta-row{transition:none}

/* loading ring + scroll cue */
.hero-hud{
  position:absolute;left:0;right:0;bottom:26px;display:flex;justify-content:center;
  align-items:center;pointer-events:none;color:var(--accent);
}
.ring{width:34px;height:34px;transform:rotate(-90deg);opacity:.85}
.cue{
  width:22px;height:34px;border:1px solid rgba(143,212,224,.5);border-radius:12px;position:relative;
}
.cue::after{
  content:"";position:absolute;left:50%;top:7px;width:2px;height:6px;margin-left:-1px;
  background:var(--accent);border-radius:1px;animation:cue 2.4s var(--ease) -0.4s infinite;
}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(9px);opacity:.15}}

/* static hero (phones, reduced motion) */
.hero-static{display:none;position:relative;min-height:88svh;overflow:hidden}
.hero-static .bgimg{
  position:absolute;inset:0;background-size:cover;background-position:42% 50%;
}
.hero-static .scrim{
  background:
    linear-gradient(180deg,rgba(8,13,19,.76) 0%,rgba(8,13,19,.66) 22%,rgba(8,13,19,.60) 46%,rgba(8,13,19,.60) 64%,rgba(8,13,19,.92) 82%,rgba(8,13,19,.96) 100%);
}
.hero-static .inner{
  position:relative;padding-top:calc(var(--nav-h) + 54px);padding-bottom:54px;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:88svh;
}
.hero-static .kicker{text-shadow:var(--tshadow)}
.hero-static h1{text-shadow:var(--tshadow)}
.hero-static .sub{margin-top:18px;color:#D3DFE9;max-width:38ch;text-shadow:var(--tshadow)}
.hero-static .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-static .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.hero-static .chips span{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-secondary);border:1px solid var(--line-strong);border-radius:10px;padding:6px 11px;
  background:rgba(8,12,19,.5);backdrop-filter:blur(8px);
}

/* the mobile laser wipe: one still on each side of a moving beam, in an
   overlay above the untouched .bgimg. Built by hero.js, never present
   without JS, never present under reduced motion. The layers' background
   position is copied from .bgimg by the script; the rule on .bgimg is the
   single source of truth for the composition. */
.hero-static .ws-stage{
  position:absolute;inset:0;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease);
}
.hero-static .ws-stage.on{opacity:1}
.hero-static .ws-under,.hero-static .ws-reveal{
  position:absolute;inset:0;background-size:cover;
}
.hero-static .ws-beam{position:absolute;inset:0;opacity:0;transition:opacity .48s var(--ease)}
.hero-static .ws-beam.on{opacity:1}
.hero-static .ws-core{
  position:absolute;top:0;left:0;transform-origin:0 50%;border-radius:3px;
  background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(236,255,252,.9) 55%,rgba(210,244,240,.8));
  box-shadow:0 0 10px 1px rgba(190,244,240,.85),0 0 32px 6px rgba(150,225,230,.42),0 0 88px 18px rgba(140,215,225,.18);
}
.hero-static .ws-flare{
  position:absolute;top:0;left:0;
  background:radial-gradient(closest-side,rgba(255,240,220,.92),rgba(255,176,96,.45) 42%,rgba(255,140,60,0) 72%);
}
.hero-static .ws-weld{
  position:absolute;top:0;left:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,214,170,.7),rgba(255,150,70,.28) 50%,rgba(255,140,60,0) 75%);
}

/* =========================================================================
   ENTRANCES (page-wide, whisper level)
   ========================================================================= */
.rv{opacity:0;transform:translateY(18px);
    transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.stg > *{opacity:0;transform:translateY(16px);
    transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.stg.in > *{opacity:1;transform:none}
.stg.in > *:nth-child(1){transition-delay:.02s}
.stg.in > *:nth-child(2){transition-delay:.10s}
.stg.in > *:nth-child(3){transition-delay:.18s}
.stg.in > *:nth-child(4){transition-delay:.26s}
.stg.in > *:nth-child(5){transition-delay:.34s}
.stg.in > *:nth-child(6){transition-delay:.42s}
.stg.in > *:nth-child(7){transition-delay:.50s}
.stg.in > *:nth-child(8){transition-delay:.58s}
.stg.in > *:nth-child(9){transition-delay:.66s}
.stg.in > *:nth-child(10){transition-delay:.74s}
/* retire the stagger so later hovers never lag (must beat nth-child specificity) */
.stg.done.in > *:nth-child(n){transition-delay:0s !important}

/* =========================================================================
   STRIP: in het kort
   ========================================================================= */
.strip{border-block:1px solid var(--line);background:rgba(10,14,19,.6)}
.strip ul{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);
}
.strip li{
  padding:22px 26px;border-left:1px solid var(--line);
  font-family:var(--mono);font-size:.76rem;letter-spacing:.07em;color:var(--text-secondary);
  display:flex;align-items:center;gap:12px;line-height:1.45;
}
.strip li:first-child{border-left:0}
.strip li b{color:var(--accent);font-weight:500}

/* =========================================================================
   01 RESULTAAT: before / after
   ========================================================================= */
.ba-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.ba-tab{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-secondary);
  padding:10px 16px;border-radius:2px;cursor:pointer;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
.ba-tab:hover{color:var(--text-primary);border-color:#4A6070}
.ba-tab[aria-selected="true"]{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}

.ba{
  position:relative;margin-top:26px;border:1px solid var(--line);background:var(--panel);
  aspect-ratio:16/9;overflow:hidden;touch-action:pan-y;user-select:none;cursor:ew-resize;
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba .after-wrap{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x,50%))}
.ba .tag{
  position:absolute;top:14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 11px;border-radius:2px;
  background:rgba(7,12,17,.72);backdrop-filter:blur(8px);border:1px solid var(--line-strong);
}
.ba .tag-voor{left:14px;color:#E6C2AE}
.ba .tag-na{right:14px;color:var(--accent);border-color:rgba(143,212,224,.35)}
/* the signature laser line, doubling as the slider handle. It has to hold on
   bright bare steel as well as on dark rust, so a dark halo sits under the glow. */
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;
  background:linear-gradient(180deg,rgba(143,212,224,.35),#DFF6FA 10%,#DFF6FA 90%,rgba(143,212,224,.35));
  box-shadow:
    0 0 0 1px rgba(6,12,18,.55),
    0 0 10px rgba(143,212,224,.95),
    0 0 26px rgba(143,212,224,.6),
    0 0 60px rgba(143,212,224,.28);
  pointer-events:none;
}
.ba-knob{
  position:absolute;top:50%;left:50%;width:46px;height:46px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(143,212,224,.85);background:rgba(7,13,19,.82);
  backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;gap:4px;
  box-shadow:0 0 0 1px rgba(6,12,18,.5),0 0 22px rgba(143,212,224,.45),0 6px 20px rgba(0,0,0,.45);
}
.ba-knob i{width:0;height:0;border-block:6px solid transparent}
.ba-knob i:first-child{border-right:7px solid var(--accent)}
.ba-knob i:last-child{border-left:7px solid var(--accent)}
.ba-spec{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-top:0;
}
.ba-spec div{background:var(--canvas);padding:16px 18px}
.ba-spec dt{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-mute);margin:0 0 6px;
}
.ba-spec dd{margin:0;font-size:.92rem;color:var(--text-primary);line-height:1.4}
.ba-hint{margin-top:14px;font-family:var(--mono);font-size:.72rem;color:var(--text-mute)}

/* =========================================================================
   02 HET PROBLEEM
   ========================================================================= */
.problem{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,88px);align-items:start}
.problem .big{
  font-family:var(--display);font-weight:600;font-size:clamp(1.22rem,2vw,1.62rem);
  line-height:1.42;letter-spacing:-.012em;color:var(--text-primary);margin-top:26px;max-width:34ch;
}
.problem .big em{font-style:normal;color:var(--accent)}
.chain{list-style:none;margin:0;padding:0;position:relative}
.chain::before{
  content:"";position:absolute;left:9px;top:12px;bottom:12px;width:1px;background:var(--line);
}
.chain .drawn{
  position:absolute;left:9px;top:12px;width:1px;background:var(--accent);
  box-shadow:0 0 10px rgba(143,212,224,.7);height:0;
  transition:height 1.3s var(--ease-out);
}
.chain.in .drawn{height:calc(100% - 24px)}
.chain li{position:relative;padding:0 0 30px 40px}
.chain li:last-child{padding-bottom:0}
.chain li::before{
  content:"";position:absolute;left:5px;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--canvas);border:1px solid var(--line-strong);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.chain.in li::before{border-color:var(--accent);box-shadow:0 0 12px rgba(143,212,224,.6)}
.chain.in li:nth-child(2)::before{transition-delay:.35s}
.chain.in li:nth-child(3)::before{transition-delay:.7s}
.chain b{
  display:block;font-family:var(--display);font-weight:700;font-size:1.14rem;letter-spacing:-.01em;
}
.chain span{display:block;color:var(--text-secondary);font-size:.94rem;margin-top:5px;line-height:1.55}

/* =========================================================================
   03 VERGELIJKING
   ========================================================================= */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:40px;border:1px solid var(--line)}
.cmp-col{padding:clamp(26px,3vw,38px)}
.cmp-col + .cmp-col{border-left:1px solid var(--line);background:rgba(143,212,224,.028)}
.cmp-col h3{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-mute)}
.cmp-col + .cmp-col h3{color:var(--accent)}
.cmp-col ul{list-style:none;margin:22px 0 0;padding:0}
.cmp-col li{
  padding:13px 0 13px 28px;border-top:1px solid var(--line);position:relative;
  font-size:.97rem;color:var(--text-secondary);line-height:1.5;
}
.cmp-col li:first-child{border-top:0}
.cmp-col li::before{
  content:"";position:absolute;left:2px;top:21px;width:11px;height:1px;background:#4A5C6B;
}
.cmp-col + .cmp-col li{color:var(--text-primary)}
.cmp-col + .cmp-col li::before{background:var(--accent);box-shadow:0 0 8px rgba(143,212,224,.6)}
.cmp-note{
  margin-top:22px;font-size:.92rem;color:var(--text-mute);max-width:70ch;
  padding-left:16px;border-left:1px solid var(--line);
}

/* =========================================================================
   04 DE TEST (the one interactive moment)
   ========================================================================= */
.test-sec{background:var(--canvas-deep);border-block:1px solid var(--line)}
.test-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center}
.plate{
  position:relative;aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden;
  background:var(--panel);touch-action:none;cursor:crosshair;
}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.plate canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.plate .dot{
  position:absolute;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;
  background:radial-gradient(circle,rgba(180,248,255,.85) 0%,rgba(143,212,224,.35) 38%,rgba(143,212,224,0) 70%);
  opacity:0;transition:opacity .2s var(--ease);pointer-events:none;mix-blend-mode:screen;
}
.plate.active .dot{opacity:1}
.plate-bar{
  position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.07);
}
.plate-bar i{display:block;height:100%;width:0%;background:var(--accent);
  box-shadow:0 0 12px rgba(143,212,224,.8);transition:width .25s var(--ease)}
.plate-hint{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-primary);background:rgba(7,12,17,.62);border:1px solid var(--line-strong);
  border-radius:10px;padding:9px 15px;backdrop-filter:blur(8px);
  transition:opacity .4s var(--ease);pointer-events:none;text-align:center;
}
.plate.touched .plate-hint{opacity:0}
/* collapsed until the visitor has actually cleaned the plate: an empty reserved
   box between the text and the button reads as a hole in the layout */
.test-done{
  opacity:0;transform:translateY(8px);
  max-height:0;margin-top:0;padding:0 22px;overflow:hidden;
  border:0 solid var(--accent);background:var(--accent-dim);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),
             max-height .5s var(--ease-out),margin-top .5s var(--ease-out),
             padding .5s var(--ease-out),border-width .5s var(--ease-out);
}
.test-done.on{
  opacity:1;transform:none;max-height:220px;margin-top:26px;padding:20px 22px;border-width:1px;
}
.test-done b{font-family:var(--display);font-size:1.1rem;display:block}
.test-done span{color:var(--text-secondary);font-size:.94rem;display:block;margin-top:4px}

/* =========================================================================
   05 WERKWIJZE
   ========================================================================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:44px}
.step{background:var(--canvas);padding:clamp(22px,2.4vw,30px);position:relative}
.step .n{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--accent);
  display:block;margin-bottom:16px;
}
.step h3{margin-bottom:10px}
.step p{color:var(--text-secondary);font-size:.94rem;line-height:1.55}
.step::after{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--accent);
  box-shadow:0 0 10px rgba(143,212,224,.7);transition:width .9s var(--ease-out);
}
.steps.in .step::after{width:100%}
.steps.in .step:nth-child(2)::after{transition-delay:.18s}
.steps.in .step:nth-child(3)::after{transition-delay:.36s}
.steps.in .step:nth-child(4)::after{transition-delay:.54s}

/* =========================================================================
   06 DIENSTEN
   ========================================================================= */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);margin-top:44px}
.svc-card{
  display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);
  background:var(--panel);overflow:hidden;
  transition:border-color var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
}
.svc-card:hover{border-color:rgba(143,212,224,.45);transform:translateY(-3px);
  box-shadow:0 16px 44px rgba(0,0,0,.42)}
.svc-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel-2)}
.svc-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease-out)}
.svc-card:hover .svc-thumb img{transform:scale(1.045)}
.svc-thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,15,21,0) 40%,rgba(9,15,21,.6) 100%);
}
.svc-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.svc-body h3{margin-bottom:9px}
.svc-body p{color:var(--text-secondary);font-size:.94rem;line-height:1.55;flex:1}
.svc-more{
  margin-top:20px;font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:9px;
}
.svc-more i{display:block;width:16px;height:1px;background:var(--accent);
  transition:width var(--t-fast) var(--ease)}
.svc-card:hover .svc-more i{width:26px}
.svc-also{
  margin-top:26px;font-family:var(--mono);font-size:.76rem;color:var(--text-mute);
  letter-spacing:.05em;line-height:1.9;
}
.svc-also b{color:var(--text-secondary);font-weight:400}

/* =========================================================================
   07 BRANCHES
   ========================================================================= */
.branches{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:44px;
}
.branch{
  background:var(--canvas);padding:26px 20px;display:flex;flex-direction:column;gap:8px;
  transition:background var(--t-mid) var(--ease);
}
.branch:hover{background:var(--panel)}
.branch .bn{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;color:var(--text-mute)}
.branch b{font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:-.008em}
.branch span{font-size:.86rem;color:var(--text-secondary);line-height:1.45}

/* =========================================================================
   08 PROJECTEN
   ========================================================================= */
.proj{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:44px}
.proj-card{border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column}
.proj-card .ph{padding:22px 22px 0}
.proj-card .ph .t{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);
}
.proj-card h3{margin-top:12px}
.proj-card dl{margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.proj-card .row{display:grid;grid-template-columns:38% 1fr;gap:14px;padding:11px 22px;
  border-bottom:1px solid var(--line)}
.proj-card dt{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-mute);margin:0;
}
.proj-card dd{margin:0;font-size:.9rem;color:var(--text-primary);line-height:1.45}
.proj-note{margin-top:22px;font-family:var(--mono);font-size:.74rem;color:var(--text-mute)}

/* =========================================================================
   09 VEILIGHEID
   ========================================================================= */
.safety{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,22px);margin-top:44px}
.safe-card{
  border:1px solid var(--line);padding:clamp(24px,2.6vw,32px);position:relative;
  background:linear-gradient(180deg,rgba(18,26,34,.7),rgba(11,15,20,.7));
}
.safe-card::before{
  content:"";position:absolute;left:-1px;top:-1px;width:34px;height:1px;background:var(--accent);
  box-shadow:0 0 10px rgba(143,212,224,.65);
}
.safe-card h3{margin-bottom:10px}
.safe-card p{color:var(--text-secondary);font-size:.95rem;line-height:1.58}
.safety-note{
  margin-top:26px;padding:18px 22px;border:1px solid var(--line);background:var(--panel);
  font-size:.94rem;color:var(--text-secondary);line-height:1.6;
}

/* =========================================================================
   10 FAQ
   ========================================================================= */
.faq{max-width:900px;margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(1.02rem,1.4vw,1.16rem);
  letter-spacing:-.008em;line-height:1.35;
  transition:color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:1px;background:var(--accent);
  transition:transform var(--t-fast) var(--ease);
}
.faq summary::before{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:1px;background:var(--accent);
  transform:rotate(90deg);transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.faq details[open] summary::before{transform:rotate(0);opacity:0}
.faq .a{padding:0 0 24px;color:var(--text-secondary);max-width:74ch;line-height:1.68}

/* =========================================================================
   11 AANVRAAG
   ========================================================================= */
.cta-sec{background:var(--canvas-deep);border-top:1px solid var(--line)}
.form-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,72px);align-items:start}
.wa-card{
  border:1px solid var(--line);background:var(--panel);padding:clamp(24px,2.6vw,32px);margin-top:34px;
}
.wa-card h3{margin-bottom:8px}
.wa-card p{color:var(--text-secondary);font-size:.94rem;line-height:1.55;margin-bottom:20px}
.contact-list{list-style:none;margin:26px 0 0;padding:0}
.contact-list li{
  display:flex;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line);
  font-size:.95rem;
}
.contact-list li:first-child{border-top:0}
.contact-list .lbl{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-mute);width:82px;flex:none;
}
.contact-list a{color:var(--text-primary);text-decoration:none;
  transition:color var(--t-fast) var(--ease)}
.contact-list a:hover{color:var(--accent)}

form{border:1px solid var(--line);background:var(--panel);padding:clamp(24px,3vw,38px)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{margin-bottom:16px}
.f label{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:8px;
}
.f label .req{color:var(--accent)}
.f input,.f select,.f textarea{
  width:100%;background:var(--canvas);border:1px solid var(--line-strong);border-radius:2px;
  color:var(--text-primary);font-family:var(--body);font-size:.97rem;padding:13px 14px;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.f textarea{min-height:104px;resize:vertical;line-height:1.55}
.f input:hover,.f select:hover,.f textarea:hover{border-color:#4A6070}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent);outline:none;
  background:#0F1821}
.f select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238FD4E0' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.f .f-file{
  border:1px dashed var(--line-strong);border-radius:2px;padding:20px 16px;text-align:center;
  cursor:pointer;display:block;transition:border-color var(--t-fast) var(--ease),
  background var(--t-fast) var(--ease);
  text-transform:none;letter-spacing:normal;
}
.f .f-file:hover{border-color:var(--accent);background:var(--accent-dim)}
.f .f-file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.f .f-file .fl{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--accent);
  display:block;text-transform:none;
}
.f .f-file .fs{display:block;font-size:.84rem;color:var(--text-mute);margin-top:6px}
/* honeypot: onzichtbaar voor mensen, onweerstaanbaar voor spamrobots */
.hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

.f-note{font-size:.82rem;color:var(--text-mute);margin-top:14px;line-height:1.5}
.f-err{color:#FF9B7A;font-size:.82rem;margin-top:7px;display:none;font-family:var(--mono)}
.f.bad input,.f.bad select{border-color:#FF9B7A}
.f.bad .f-err{display:block}
.form-ok{
  display:none;border:1px solid var(--accent);background:var(--accent-dim);padding:30px;
  text-align:left;
}
.form-ok.on{display:block}
.form-ok b{font-family:var(--display);font-size:1.28rem;display:block;margin-bottom:8px}
.form-ok p{color:var(--text-secondary);line-height:1.6}
.form-ok .mailto{
  display:inline-flex;margin-top:18px;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
}

/* =========================================================================
   FOOTER + mobile bar
   ========================================================================= */
footer{border-top:1px solid var(--line);background:var(--canvas-deep);position:relative;z-index:1}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px);
  padding-block:clamp(48px,6vw,72px)}
.f-top p{color:var(--text-secondary);font-size:.94rem;line-height:1.6;margin-top:16px;max-width:40ch}
.f-top h4{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-mute);margin-bottom:16px}
.f-top ul{list-style:none;margin:0;padding:0}
.f-top li{margin-bottom:10px}
.f-top a{color:var(--text-secondary);text-decoration:none;font-size:.94rem;
  transition:color var(--t-fast) var(--ease)}
.f-top a:hover{color:var(--accent)}
.f-bot{
  border-top:1px solid var(--line);padding-block:24px;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--text-mute);
  letter-spacing:.05em;
}

.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  grid-template-columns:repeat(3,1fr);
  background:rgba(9,15,21,.95);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.mbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:11px 6px;text-decoration:none;color:var(--text-secondary);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  border-left:1px solid var(--line);min-height:56px;
}
.mbar a:first-child{border-left:0}
.mbar a.primary{color:var(--accent)}
.mbar svg{width:17px;height:17px}

/* =========================================================================
   SUBPAGE bits
   ========================================================================= */
.sub-hero .wrap{position:relative;z-index:1}
.crumbs{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-secondary);padding-top:calc(var(--nav-h) + 34px);
}
.crumbs a{color:var(--text-secondary);text-decoration:none;transition:color var(--t-fast) var(--ease)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin-inline:9px;opacity:.5}
.sub-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.sub-hero .bgimg{
  position:absolute;inset:0;background-size:cover;background-position:center;opacity:.4;
}
.sub-hero .veil{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,13,19,.95) 0%,rgba(8,13,19,.72) 48%,rgba(8,13,19,.42) 100%),
             linear-gradient(180deg,rgba(8,13,19,.7) 0%,rgba(8,13,19,.25) 40%,rgba(8,13,19,.9) 100%);
}
.sub-hero .inner{position:relative;padding-block:clamp(34px,5vw,60px) clamp(56px,8vw,96px)}
.sub-hero h1{max-width:16ch}
.sub-hero .lede{max-width:56ch}
.sub-hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.sub-hero .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.sub-hero .chips span{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-secondary);border:1px solid var(--line-strong);border-radius:10px;padding:6px 11px;
}
.prose{max-width:74ch}
.prose p{color:var(--text-secondary);line-height:1.72;margin-bottom:18px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--text-primary);font-weight:500}
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,76px);align-items:start}
.fig{border:1px solid var(--line);overflow:hidden;background:var(--panel)}
.fig img{display:block;width:100%;height:auto}
.fig figcaption{
  padding:14px 18px;border-top:1px solid var(--line);font-family:var(--mono);
  font-size:.72rem;color:var(--text-mute);letter-spacing:.05em;line-height:1.5;
}
.ticks{list-style:none;margin:26px 0 0;padding:0}
.ticks li{position:relative;padding:11px 0 11px 26px;border-top:1px solid var(--line);
  color:var(--text-secondary);font-size:.97rem;line-height:1.5}
.ticks li:first-child{border-top:0}
.ticks li::before{content:"";position:absolute;left:0;top:19px;width:12px;height:1px;
  background:var(--accent);box-shadow:0 0 8px rgba(143,212,224,.6)}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.rel a{
  display:block;border:1px solid var(--line);padding:22px;text-decoration:none;background:var(--panel);
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.rel a:hover{border-color:rgba(143,212,224,.45);transform:translateY(-2px)}
.rel b{font-family:var(--display);font-weight:600;font-size:1.02rem;display:block}
.rel span{display:block;color:var(--text-secondary);font-size:.88rem;margin-top:6px;line-height:1.5}

/* Grid children default to min-width:auto, so one unbreakable child (the long
   uppercase submit label) can widen the whole track past the viewport. Let them shrink. */
.form-grid > *,.f-row > *,.two > *,.problem > *,.test-grid > *,
.svc > *,.steps > *,.branches > *,.proj > *,.safety > *,.rel > *{min-width:0}
.contact-list li{flex-wrap:wrap}
.contact-list a,.f-note,.svc-also{overflow-wrap:anywhere}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1100px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-cta .btn{display:none}
  .strip ul{grid-template-columns:repeat(2,1fr)}
  .strip li:nth-child(3){border-left:0}
  .strip li:nth-child(n+3){border-top:1px solid var(--line)}
  .branches{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .svc,.proj,.rel{grid-template-columns:1fr}
  .problem,.test-grid,.form-grid,.two{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr 1fr}
  .ba-spec{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  body{font-size:16px}
  /* a full-width button may wrap; nowrap here is what pushed the form off screen */
  .btn{white-space:normal;text-align:center;line-height:1.35;letter-spacing:.09em}
  :root{--nav-h:62px}
  .hero{display:none}
  .hero-static{display:block}
  .strip ul{grid-template-columns:1fr}
  .strip li{border-left:0;border-top:1px solid var(--line)}
  .strip li:first-child{border-top:0}
  .cmp{grid-template-columns:1fr}
  .cmp-col + .cmp-col{border-left:0;border-top:1px solid var(--line)}
  .safety{grid-template-columns:1fr}
  .branches{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr}
  .ba-spec{grid-template-columns:1fr}
  .mbar{display:grid}
  main{padding-bottom:58px}
  footer{padding-bottom:58px}
  .nav-cta .nav-tel{display:none}
}
@media (orientation:portrait) and (max-width:1024px){
  .hero{display:none}
  .hero-static{display:block}
}
@media (orientation:portrait) and (pointer:coarse){
  .hero{display:none}
  .hero-static{display:block}
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero{display:none}
  .hero-static{display:block}
}
@media (max-height:560px){
  .hero-hud{display:none}
}
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .ba-tab{min-height:44px}
  .faq summary{padding-block:20px}
}

/* =========================================================================
   REDUCED MOTION: honoured completely, and in both directions
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .hero{display:none}
  .hero-static{display:block}
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  .rv,.stg > *{opacity:1;transform:none}
  .laserline line{stroke-dashoffset:0}
  .chain .drawn{height:calc(100% - 24px)}
  .steps .step::after{width:100%}
  .env .drift{animation:none}
}
/* live flip: JS adds .pinned to the same effect */
.pinned .rv,.pinned .stg > *{opacity:1;transform:none}
.pinned .laserline line{stroke-dashoffset:0}
.pinned .chain .drawn{height:calc(100% - 24px)}
.pinned .steps .step::after{width:100%}

/* pause every loop when the tab is hidden or the section is off screen */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* anchor targets clear the fixed nav */
section[id],main[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}