/* ============================================================
   BedrijfsStack

   Material: cold zinc ground, graphite machines, safety yellow.
   The page is a workbench; the software sits on it as physical
   equipment — a metal chassis with a recessed screen. Every screen
   in this site is that same programme, never an invented toy UI.

   No orange-on-charcoal, no beige, no paper, no grain, no ghost
   letters, no decorative grids, no numbered cards, no caps eyebrows.
   Type is self-hosted: Schibsted Grotesk + Barlow Condensed.
   ============================================================ */

@font-face{
  font-family:'Grotesk';
  src:url('/assets/fonts/grotesk.woff2') format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Label';
  src:url('/assets/fonts/label.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  /* ground — cold rolled zinc, never warm, never paper */
  --zinc:#C5CCD2;
  --zinc-2:#B7BFC7;
  --zinc-3:#A9B2BB;
  --line:#7E8993;
  --line-2:#9AA4AD;

  --ink:#101418;
  --ink-2:#39424B;
  --ink-3:#5C6670;

  /* machine — graphite chassis, recessed display */
  --steel-hi:#39424B;
  --steel:#242B32;
  --steel-2:#191F25;
  --steel-3:#0F1418;
  --screen:#0C1015;
  --screen-2:#141A20;
  --screen-3:#1D242B;
  --glow:#E4E9ED;
  --glow-2:#8B959E;
  --glow-3:#5A636B;

  /* one signal colour: safety yellow */
  --sig:#F5C400;
  --sig-hi:#FFD522;
  --sig-ink:#171200;

  --sans:'Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --label:'Label','Helvetica Neue',Helvetica,Arial,sans-serif;

  --pad:clamp(20px,5vw,76px);
  --maxw:1440px;
  --out:cubic-bezier(.16,1,.3,1);
  --io:cubic-bezier(.65,0,.35,1);
  --th:28px;               /* how thick a machine is */
  --nav:66px;              /* the fixed header; JS rewrites this with the measured height */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--zinc);overflow-x:clip;scroll-padding-top:calc(var(--nav) + 18px)}
body{
  margin:0;background:var(--zinc);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-.04em;line-height:.93}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
strong{font-weight:800}
::selection{background:var(--sig);color:var(--sig-ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

section[id],main[id]{scroll-margin-top:calc(var(--nav) + 18px)}

.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:var(--zinc);padding:12px 18px;font-weight:700;font-size:14px}
.skip:focus{left:12px;top:12px}

/* a section is named by a short rule and a plain word. no number, no caps. */
.tab{display:flex;align-items:center;gap:14px;margin-bottom:20px;font-size:14.5px;font-weight:600;color:var(--ink-3)}
.tab::before{content:"";width:34px;height:2px;background:var(--ink);flex:none}

.h2{font-size:clamp(33px,4.1vw,56px)}
.h2 .dim{color:var(--ink-3)}
.lead{margin-top:24px;font-size:clamp(16px,1.85vw,20px);line-height:1.58;color:var(--ink-2);max-width:54ch}

/* the one place colour is allowed to shout: a struck block of safety yellow */
.hit{background:var(--sig);color:var(--ink);padding:.04em .1em .02em;display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--sig);color:var(--sig-ink);
  font-weight:800;font-size:15px;line-height:1;letter-spacing:-.015em;
  padding:17px 22px;border:0;
  box-shadow:0 3px 0 #B99500, 0 12px 22px rgba(16,20,24,.22);
  transition:transform .22s var(--out),background .18s linear,box-shadow .22s var(--out);
}
.btn svg{width:20px;height:20px;flex:none;transition:transform .3s var(--out)}
.btn:hover{background:var(--sig-hi);transform:translateY(-2px);box-shadow:0 5px 0 #B99500, 0 16px 28px rgba(16,20,24,.26)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 #B99500, 0 6px 14px rgba(16,20,24,.2)}
.btn:hover svg{transform:translateX(4px)}
.btn--sm{padding:11px 15px;font-size:13.5px;gap:8px;box-shadow:0 2px 0 #B99500}
.btn--lg{padding:20px 28px;font-size:17px}
.btn--full{width:100%;justify-content:space-between;margin-top:26px}
@media (max-width:640px){.btn--full{font-size:14.5px;padding:18px 20px}}

.lnk{font-size:15px;font-weight:600;color:var(--ink-2);border-bottom:2px solid var(--line);padding-bottom:4px;transition:color .18s,border-color .18s}
.lnk:hover{color:var(--ink);border-color:var(--ink)}

.ticks li{position:relative;padding-left:28px;margin-bottom:12px;color:var(--ink-2);font-size:16px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.56em;width:13px;height:3px;background:var(--ink)}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(14px)}
.is-in [data-reveal]{opacity:1;transform:none;transition:opacity .7s var(--out),transform .8s var(--out)}
.is-in [data-reveal="1"]{transition-delay:.04s}
.is-in [data-reveal="2"]{transition-delay:.10s}
.is-in [data-reveal="3"]{transition-delay:.17s}
.is-in [data-reveal="4"]{transition-delay:.24s}
.is-in [data-reveal="5"]{transition-delay:.33s}
.is-in [data-reveal="6"]{transition-delay:.41s}
.is-in [data-reveal="7"]{transition-delay:.49s}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--pad);border-bottom:1px solid transparent;
  transition:background .3s linear,border-color .3s linear;
}
.nav.is-stuck{background:rgba(197,204,210,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.mark{display:flex;align-items:center;gap:12px}
.mark__cube{position:relative;width:24px;height:24px;flex:none;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(45deg)}
.mark__plate{position:absolute;inset:2px}
.mark__plate--a{background:var(--sig);transform:translateZ(7px)}
.mark__plate--b{background:var(--steel);transform:translateZ(0)}
.mark__plate--c{background:var(--line);transform:translateZ(-7px)}
.mark__word{font-weight:900;font-size:17.5px;letter-spacing:-.04em}
.nav__right{display:flex;align-items:center;gap:20px}
.nav__price{font-size:14px;color:var(--ink-2);font-weight:600}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;gap:clamp(30px,4.6vw,74px);
  /* the bottom padding is headroom for the machine: the tray and the cast
     shadow hang below the board and must land inside the hero, never on the
     next section's opening line */
  padding:clamp(122px,15vh,168px) var(--pad) clamp(116px,14vh,162px);
  max-width:var(--maxw);margin:0 auto;
}
.hero__copy{position:relative;z-index:3;max-width:670px}
.hero__h1{font-size:clamp(42px,5.3vw,76px);line-height:1.04;margin-bottom:26px}
.hero__h1 .line{display:block}
.hero__sub{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--ink-2);max-width:50ch}
.hero__cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:32px 0 36px}
.hero__price{display:flex;gap:46px;margin:0;padding-top:22px;border-top:2px solid var(--ink)}
.hero__price dt{font-size:13.5px;color:var(--ink-3);margin-bottom:8px;font-weight:600}
.hero__price dd{font-variant-numeric:tabular-nums;margin:0;font-weight:900;font-size:clamp(27px,3vw,35px);line-height:1;letter-spacing:-.05em;display:flex;align-items:baseline;gap:9px}
.hero__price dd span{font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink-3)}
.hero__first{margin-top:13px;font-size:13.5px;font-weight:600;color:var(--ink-3)}
.hero__by{margin-top:6px;font-size:13.5px;font-weight:600;color:var(--ink-3)}
.hero__by a{color:var(--ink-2);border-bottom:2px solid var(--line);transition:color .18s,border-color .18s}
.hero__by a:hover{color:var(--ink);border-color:var(--ink)}

/* ============================================================
   THE MACHINE
   A slab is a real solid: a graphite chassis, two folded side
   faces, a back plate, a recessed screen, and a shadow that lives
   behind it in Z. Light travels across the metal as it turns.
   ============================================================ */
.slab{position:relative;min-width:0;transform-style:preserve-3d}
.slab__face{
  position:relative;z-index:2;padding:9px;
  background:linear-gradient(168deg,#3A434C 0%,#242B33 34%,#171D23 72%,#10151A 100%);
  border:1px solid #090C10;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(0,0,0,.85), inset 1px 0 0 rgba(255,255,255,.07);
}
/* the four side faces. each is hinged on its own edge and folded away from
   the viewer; backface-visibility means only the ones actually facing you
   are drawn, whichever way the machine happens to be turned. */
.slab__edge{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.slab__edge--r{
  top:0;bottom:0;left:100%;width:var(--th);
  transform-origin:left center;transform:rotateY(90deg);
  background:linear-gradient(180deg,#39424B 0%,#1B2228 52%,#0C1014 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.slab__edge--l{
  top:0;bottom:0;right:100%;width:var(--th);
  transform-origin:right center;transform:rotateY(-90deg);
  background:linear-gradient(180deg,#333C45 0%,#171D23 52%,#0A0E12 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.slab__edge--b{
  left:0;right:0;top:100%;height:var(--th);
  transform-origin:top center;transform:rotateX(-90deg);
  background:linear-gradient(90deg,#20272E 0%,#404A54 46%,#161C22 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.slab__edge--t{
  left:0;right:0;bottom:100%;height:var(--th);
  transform-origin:bottom center;transform:rotateX(90deg);
  background:linear-gradient(90deg,#2A323A 0%,#3D4650 44%,#171D23 100%);
}
.slab__back{position:absolute;inset:0;transform:translateZ(calc(var(--th) * -1));background:#0A0E12}
/* specular — the light source. the pointer moves it across the metal. */
.slab__sheen{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(56% 62% at var(--lx,24%) var(--ly,2%), rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    linear-gradient(186deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 22%);
}
/* on a light ground the shadow is cool grey, never black */
.slab__cast{
  position:absolute;left:1%;right:-6%;top:14%;bottom:-18%;
  transform:translateZ(calc(var(--th) * -4));
  background:radial-gradient(56% 50% at 52% 60%, rgba(28,36,44,.62), rgba(28,36,44,0) 72%);
  filter:blur(26px);pointer-events:none;
}
/* the hero machine stands closest to the section edge, so its shadow is kept
   shorter than on the slabs further down the page */
.board .slab__cast{top:15%;bottom:-11%}

/* silkscreened equipment label on the chassis */
.mach__lbl{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:2px 4px 8px;
  font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:#7B858F;
}
.mach__lbl b{color:#9BA5AF;font-weight:600}
.lamp{display:inline-block;width:7px;height:7px;background:var(--sig);box-shadow:0 0 8px rgba(245,196,0,.7);margin-right:8px;vertical-align:-1px}
/* the screen is recessed into the metal */
/* the pan affordance sits on the metal, under the screen, so it reads as
   part of the machine rather than a caption floating on the page */
.mach__pan{display:none;align-items:center;justify-content:space-between;gap:10px;padding:7px 4px 1px;font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--sig)}
.mach__pan i{position:relative;display:block;width:26px;height:2px;background:var(--sig);flex:none}
.mach__pan i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:2px solid var(--sig);border-right:2px solid var(--sig);transform:rotate(45deg)}
.mach__scr{position:relative;min-width:0;background:var(--screen);border:1px solid #04060A;box-shadow:inset 0 2px 12px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.10)}

/* ---------- HERO STAGE ---------- */
.stage{position:relative;z-index:2;min-width:0;perspective:1500px;perspective-origin:36% 42%}
.board{position:relative;transform-style:preserve-3d;will-change:transform;transform:rotateY(-16deg) rotateX(10deg)}
.tilt{position:relative;transform-style:preserve-3d;will-change:transform}

/* --- the planning programme on the screen --- */
.plan{--u:34px;color:var(--glow)}
.plan__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-bottom:1px solid rgba(228,233,237,.09)}
.plan__day{font-weight:800;font-size:13.5px;letter-spacing:-.02em}
.plan__day i{font-style:normal;color:var(--glow-3);font-weight:500;margin-left:9px}
.plan__views{display:flex}
.plan__views span{font-size:11.5px;font-weight:700;color:var(--glow-2);padding:5px 11px;border:1px solid rgba(228,233,237,.12);margin-left:-1px}
.plan__views span.on{color:var(--sig-ink);background:var(--sig);border-color:var(--sig)}

.plan__grid{--hd:32px;position:relative;display:grid;grid-template-columns:42px repeat(4,minmax(0,1fr))}
.plan__hd{height:var(--hd);border-right:1px solid rgba(228,233,237,.09);border-bottom:1px solid rgba(228,233,237,.09)}
.plan__hours{position:relative;height:calc(11 * var(--u));border-right:1px solid rgba(228,233,237,.09)}
.plan__hours i{font-variant-numeric:tabular-nums;position:absolute;left:0;right:7px;text-align:right;font-style:normal;font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.06em;color:var(--glow-3);transform:translateY(-5px)}
.col__hd{
  height:var(--hd);padding:0 9px;min-width:0;
  border-right:1px solid rgba(228,233,237,.09);border-bottom:1px solid rgba(228,233,237,.09);
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:11.5px;font-weight:800;letter-spacing:-.005em;color:var(--glow);
}
.col__hd:last-of-type{border-right:0}
.col__hd>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col__hd em{flex:none;font-style:normal;font-weight:600;font-size:10px;color:var(--glow-3);font-family:var(--label);letter-spacing:.08em}
.col__body{
  position:relative;height:calc(11 * var(--u));min-width:0;
  border-right:1px solid rgba(228,233,237,.09);
  background-image:repeating-linear-gradient(180deg,rgba(228,233,237,.055) 0 1px,transparent 1px var(--u));
}
.col__body:last-of-type{border-right:0}

.job{
  position:absolute;left:3px;right:3px;
  top:calc(var(--s) * var(--u) + 2px);height:calc(var(--d) * var(--u) - 4px);
  background:var(--screen-3);border-left:3px solid var(--glow-3);
  padding:6px 8px;overflow:hidden;
  font-size:11.5px;font-weight:700;line-height:1.2;letter-spacing:-.015em;color:var(--glow);
  box-shadow:0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.job__t{display:block;overflow:hidden;text-overflow:ellipsis}
.job b{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.05em;color:var(--glow-3)}
.nowline{position:absolute;left:42px;right:0;height:1px;z-index:4;pointer-events:none;top:calc(var(--hd) + var(--s) * var(--u));background:var(--sig);box-shadow:0 0 9px rgba(245,196,0,.55)}
.nowline::before{content:"";position:absolute;left:-4px;top:-3px;width:7px;height:7px;background:var(--sig)}
.drop{
  position:absolute;left:3px;right:3px;
  top:calc(var(--s) * var(--u) + 2px);height:calc(var(--d) * var(--u) - 4px);
  border:1px dashed rgba(245,196,0,.42);background:rgba(245,196,0,.05);
}

/* --- layers floating above the machine in Z --- */
.float{
  position:absolute;
  background:linear-gradient(168deg,#39424B,#1A2027);
  border:1px solid #090C10;color:var(--glow);
  box-shadow:0 30px 54px rgba(22,29,36,.5), inset 0 1px 0 rgba(255,255,255,.18);
}
.tray{left:-9%;bottom:-13%;width:min(236px,52%);z-index:6;transform:translateZ(108px);padding:11px}
.tray__label{display:block;font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7B858F;margin-bottom:9px}
.chip{
  position:relative;background:var(--screen-3);border-left:3px solid var(--glow-3);
  padding:8px 22px 8px 9px;margin-bottom:7px;
  font-size:11.5px;font-weight:700;line-height:1.2;color:var(--glow);
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.chip:last-child{margin-bottom:0}
.chip__t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip b{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.05em;color:var(--glow-3)}
.chip--dim{opacity:.4}
.grip{position:absolute;right:8px;top:9px;width:9px;height:12px;opacity:.5;background-image:radial-gradient(circle,var(--glow-2) 1px,transparent 1px);background-size:4px 4px}
.tag{left:4%;top:-10%;z-index:6;transform:translateZ(154px);padding:10px 14px;display:flex;align-items:center;gap:13px}
.tag__n{font-variant-numeric:tabular-nums;font-weight:900;font-size:23px;line-height:1;letter-spacing:-.06em;color:var(--sig)}
.tag__t{font-size:11.5px;line-height:1.35;color:var(--glow-2);font-weight:600}

.ghost{
  position:absolute;left:0;top:0;width:180px;opacity:0;pointer-events:none;z-index:9;overflow:hidden;
  background:var(--screen-3);border-left:3px solid var(--sig);color:var(--glow);
  padding:8px 22px 8px 9px;font-size:11.5px;font-weight:700;line-height:1.2;
  box-shadow:0 26px 44px rgba(12,16,20,.75);
}
.ghost b{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.05em;color:var(--glow-3)}
/* the dropped job is a real cell in its column: it pans with the day and
   stays glued to 14:00 in Dennis, whatever the scroller is showing */
.placed{
  position:absolute;left:3px;right:3px;
  top:calc(var(--s) * var(--u) + 2px);height:calc(var(--d) * var(--u) - 4px);
  pointer-events:none;z-index:3;overflow:hidden;
  background:linear-gradient(180deg,#2C2A14,#1E1D12);border-left:3px solid var(--sig);color:var(--glow);
  padding:6px 8px;font-size:11.5px;font-weight:700;line-height:1.2;letter-spacing:-.015em;
  box-shadow:0 0 0 1px rgba(245,196,0,.3), 0 6px 18px rgba(0,0,0,.55);
}
.placed b{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.05em;color:#B7A45C}
.cursor{position:absolute;left:0;top:0;width:19px;opacity:0;pointer-events:none;z-index:12;filter:drop-shadow(0 5px 9px rgba(12,16,20,.6))}

.stage__cap{margin-top:clamp(58px,7vw,96px);font-size:14px;color:var(--ink-3);font-weight:600}
.scroll-hint{position:absolute;left:var(--pad);bottom:30px;z-index:3;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-3);font-weight:600}
.scroll-hint span{display:block;width:30px;height:2px;background:var(--ink-3);transform-origin:left;animation:sweep 2.6s var(--io) infinite}
@keyframes sweep{0%,100%{transform:scaleX(.28)}50%{transform:scaleX(1)}}

/* ---------- FLOW ---------- */
/* the flow is its own page. It sits on its own layer above the hero, on its
   own ground, so the machine that hangs out of the hero is covered here
   rather than drifting into this opening. */
.flow{position:relative;z-index:4;isolation:isolate;border-top:1px solid var(--line);background:var(--zinc-2)}
.flow__rail{height:300vh}
/* the block starts under the nav with a band of air, not centred in the
   viewport — otherwise the eyebrow floats in the middle of nowhere. Only the
   horizontal axis is clipped, so the heading is never cut off. */
.flow__sticky{
  position:sticky;top:var(--nav);height:calc(100svh - var(--nav));
  display:flex;align-items:flex-start;
  padding:clamp(44px,9vh,104px) 0 clamp(24px,3.5vh,48px);
  overflow-x:clip;overflow-y:visible;
}
.flow__inner{
  width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.52fr);
  align-items:center;gap:clamp(28px,3.6vw,56px);
}
.flow__text{position:relative;z-index:2;max-width:680px}
.steps{margin:0 0 34px}
.step{position:relative;padding:20px 0 20px 34px;border-top:2px solid var(--line-2);transition:opacity .5s var(--io)}
.js .step{opacity:.34}
.step:last-child{border-bottom:2px solid var(--line-2)}
.step.is-active{opacity:1}
.step::before{content:"";position:absolute;left:0;top:29px;width:16px;height:3px;background:var(--ink)}
.step h3{font-size:clamp(27px,3.1vw,40px);margin-bottom:10px}
.step p{color:var(--ink-2);font-size:15.5px;line-height:1.55;max-width:44ch}
.step::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--sig);transition:width .55s var(--out)}
.step.is-active::after{width:100%}
.flow__prog{height:3px;background:var(--line-2);position:relative;overflow:hidden}
.flow__prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink)}

.flow__device{position:relative;min-width:0;display:flex;justify-content:center;align-items:center;perspective:1500px}
/* a device held next to the steps, not a second page: narrow enough that the
   three beats stay the subject, turned just enough to read as a solid */
.phone{position:relative;width:min(258px,24vw);aspect-ratio:9/17;transform-style:preserve-3d;will-change:transform;transform:rotateY(-9deg) rotateX(3deg)}
.phone__deck{
  position:absolute;inset:-10px;border-radius:44px;transform:translateZ(-16px);
  background:linear-gradient(158deg,#454E57 0%,#20262D 44%,#0D1116 100%);
  box-shadow:0 64px 96px rgba(24,32,40,.5), 0 12px 26px rgba(24,32,40,.4);
}
.phone__glass{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:var(--screen);border:1px solid #04060A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.phone__sheen{
  position:absolute;inset:-10px;border-radius:44px;pointer-events:none;transform:translateZ(1px);
  background:
    radial-gradient(48% 38% at var(--lx,22%) var(--ly,4%), rgba(255,255,255,.20), rgba(255,255,255,0) 58%),
    linear-gradient(122deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 76%, rgba(255,255,255,.06) 100%);
}
.phone__bar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 4px;font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--glow-2)}
.phone__bar svg{width:19px;height:12px;fill:var(--glow-2)}

.screen{position:absolute;inset:36px 0 0;padding:14px 18px 18px;display:flex;flex-direction:column;color:var(--glow);background:var(--screen)}
.js .screen{opacity:0}
.scr__k{display:block;font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--sig);margin-bottom:11px}
.screen h4{font-size:23px;letter-spacing:-.04em;margin-bottom:6px}
.scr__meta{font-size:12.5px;color:var(--glow-3);margin-bottom:18px;font-weight:600}
.scr__rows{border-top:1px solid rgba(228,233,237,.09)}
.row,.field{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid rgba(228,233,237,.09)}
.row span,.field span{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--glow-3)}
.row b,.field b{font-size:13px;font-weight:700;color:var(--glow)}
.scr__sp{flex:1 1 auto;min-height:8px}
.scr__note{margin-top:15px;padding:11px 12px;border-left:3px solid var(--glow-3);background:rgba(228,233,237,.045);font-size:12.5px;line-height:1.45;color:var(--glow-2)}
.scr__btn{margin-top:20px;background:var(--sig);color:var(--sig-ink);text-align:center;padding:13px;font-size:13.5px;font-weight:800}
.fields{border-top:1px solid rgba(228,233,237,.09);margin-top:2px}
.js .field{opacity:0}
.thumbs{display:flex;gap:5px}
.thumbs i{width:27px;height:20px;background:var(--screen-3);border:1px solid rgba(228,233,237,.1);display:block}
.thumbs i:nth-child(2){background:#28313A}
.thumbs i:nth-child(3){background:#1F272E}
.scr__sum{display:flex;align-items:center;gap:9px;margin:12px 0 4px}
.scr__sum b{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.06em;color:var(--glow-2);white-space:nowrap}
.scr__sum i{width:3px;height:3px;background:var(--glow-3);flex:none}
.pad{position:relative;margin-top:10px;border:1px solid rgba(228,233,237,.14);background:rgba(228,233,237,.03);padding:14px 8px 22px}
.pad svg{width:100%;height:auto}
.pad__hint{position:absolute;left:10px;bottom:6px;font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--glow-3)}
.done{display:flex;align-items:center;gap:10px;margin-top:16px;color:var(--sig);font-weight:800;font-size:15px}
.scr__foot{margin-top:14px;padding:11px 12px;border:1px solid rgba(228,233,237,.14);background:rgba(228,233,237,.03);font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--glow-2)}
.js .scr__foot{opacity:0}
.done svg{width:20px;height:20px;flex:none}
.js .done{opacity:0}

.inbox{
  /* it hangs off the phone's left edge in Z. On the smaller device it rides
     lower, in the clear band under "Bon vastgelegd" — a layer in front of the
     glass, never a layer on top of a line of the screen */
  position:absolute;left:-16%;bottom:17%;width:min(228px,56%);z-index:5;transform:translateZ(120px);
  background:linear-gradient(168deg,#39424B,#1A2027);border:1px solid #090C10;color:var(--glow);
  box-shadow:0 34px 60px rgba(22,29,36,.5), inset 0 1px 0 rgba(255,255,255,.18);padding:11px;
}
.js .inbox{opacity:0}
.inbox__t{display:block;font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#7B858F;margin-bottom:9px}
.inbox__row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;background:var(--screen-3);border-left:3px solid var(--sig);font-size:11.5px;font-weight:700}
.inbox__row em{font-style:normal;font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.06em;color:var(--sig)}

/* ---------- MODULES ---------- */
.mods{max-width:var(--maxw);margin:0 auto;padding:clamp(90px,13vh,150px) var(--pad)}
.mods__head{margin-bottom:clamp(44px,7vh,80px);max-width:820px}
.mod{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(28px,4.4vw,74px);align-items:center;
  padding:clamp(46px,6vh,76px) 0;border-top:2px solid var(--line-2);
}
.mod--alt .mod__vis{order:-1}
.mod__body h3{font-size:clamp(30px,3.8vw,50px);margin-bottom:16px}
.mod__lead{color:var(--ink-2);font-size:clamp(16px,1.7vw,19px);line-height:1.5;margin-bottom:26px;max-width:40ch}
.mod__vis{position:relative;min-width:0;perspective:1400px;display:flex;justify-content:center}
.mod__slab{--th:14px;width:100%;min-width:0;max-width:540px;transform-style:preserve-3d;will-change:transform}

/* week grid */
.wk{color:var(--glow)}
.wk__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-bottom:1px solid rgba(228,233,237,.09)}
.wk__t{font-size:13px;font-weight:800;letter-spacing:-.02em}
.wk__t i{font-style:normal;font-weight:500;color:var(--glow-3);margin-left:9px}
.wk__nav{display:flex;gap:6px}
.wk__nav i{display:block;width:19px;height:19px;border:1px solid rgba(228,233,237,.14);position:relative}
.wk__nav i::after{content:"";position:absolute;left:6px;top:6px;width:5px;height:5px;border-top:1px solid var(--glow-2);border-right:1px solid var(--glow-2);transform:rotate(45deg)}
.wk__nav i:first-child::after{transform:rotate(-135deg);left:7px}
.wk__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.wk__head,.wk__row{display:grid;grid-template-columns:70px repeat(5,minmax(72px,1fr));gap:4px;padding:0 10px;min-width:420px}
.wk__head{padding-top:9px;padding-bottom:8px;border-bottom:1px solid rgba(228,233,237,.09)}
.wk__head em{font-style:normal;font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--glow-3)}
.wk__row{align-items:center;min-height:30px;margin:5px 0}
.wk__row>span{font-size:11.5px;font-weight:800;color:var(--glow);white-space:nowrap;overflow:hidden}
.wk__row i{
  display:flex;align-items:center;height:26px;padding:0 8px;
  background:var(--screen-3);border-left:3px solid var(--glow-3);
  font-style:normal;font-size:10.5px;font-weight:700;color:var(--glow);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:left center;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.wk__row i.on{background:linear-gradient(180deg,#2E2B14,#201E12);border-left-color:var(--sig);color:#F0DFA0}
.wk__foot{display:flex;gap:16px;flex-wrap:wrap;padding:9px 13px 11px;border-top:1px solid rgba(228,233,237,.09);font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--glow-3)}
.wk__foot b{color:var(--glow);font-weight:600}

/* werkbon screen */
.bon{color:var(--glow)}
.bon__bar{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 15px;border-bottom:1px solid rgba(228,233,237,.12)}
.bon__bar span{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sig)}
.bon__bar b{font-size:19px;font-weight:900;letter-spacing:-.04em}
.bon__body{padding:2px 15px 15px}
.br{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid rgba(228,233,237,.09)}
.br span{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--glow-3)}
.br b{font-size:13px;font-weight:700}
.bon__sig{position:relative;margin-top:13px;border:1px solid rgba(228,233,237,.14);padding:6px 8px 16px}
.bon__sig span{position:absolute;left:9px;bottom:4px;font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--glow-3)}
.bon__stamp{
  position:absolute;right:-14px;bottom:20px;z-index:7;transform:translateZ(52px) rotate(-5deg);
  background:var(--sig);color:var(--sig-ink);padding:8px 13px;
  font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 16px 30px rgba(22,29,36,.45);
}
.js .bon__stamp{opacity:0}
/* if motion never arrives the day simply shows the finished state */
.js .placed{opacity:0}
html:not(.js) .drop{display:none}

/* ---------- KANTOOR ---------- */
.kant{border-top:1px solid var(--line);background:var(--zinc-2)}
.kant__inner{
  max-width:var(--maxw);margin:0 auto;padding:clamp(90px,13vh,150px) var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.96fr);
  gap:clamp(32px,5vw,76px);align-items:center;
}
.kant__vis{position:relative;min-width:0;perspective:1400px;display:flex;justify-content:center}
.kant__slab{--th:16px;width:100%;min-width:0;max-width:470px;transform-style:preserve-3d;will-change:transform}
.ib{color:var(--glow)}
.ib__bar{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid rgba(228,233,237,.09)}
.ib__bar b{font-size:13.5px;font-weight:800;letter-spacing:-.02em}
.ib__bar em{font-style:normal;font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--sig)}
.ib__list{padding:8px 9px 11px}
.ib__row{
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  padding:9px 11px;margin-bottom:6px;background:var(--screen-3);border-left:3px solid var(--sig);
  box-shadow:0 3px 10px rgba(0,0,0,.45);
}
.ib__row b{min-width:0;font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib__row em{font-style:normal;font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sig);justify-self:end}
.ib__row span{grid-column:1/3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.05em;color:var(--glow-3)}
.ib__foot{display:flex;justify-content:space-between;gap:12px;padding:9px 14px 11px;border-top:1px solid rgba(228,233,237,.09);font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.07em;color:var(--glow-3)}
.ib__card{
  position:absolute;right:-3%;bottom:-13%;width:min(212px,54%);z-index:7;transform:translateZ(100px);
  background:linear-gradient(168deg,#39424B,#1A2027);border:1px solid #090C10;color:var(--glow);
  box-shadow:0 32px 58px rgba(22,29,36,.5), inset 0 1px 0 rgba(255,255,255,.18);padding:12px;
}
.ib__card b{display:block;font-size:12.5px;font-weight:800;margin-bottom:8px}
.ib__card p{font-size:11.5px;color:var(--glow-2);line-height:1.5;font-weight:500}
.ib__card .thumbs{margin-top:9px}

/* ---------- BAND (three facts, no numbers, no cards) ---------- */
.band{border-top:1px solid var(--line)}
.band__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(46px,7vh,74px) var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.band__i{padding:0 clamp(16px,2.4vw,40px);border-left:2px solid var(--line-2)}
.band__i:first-child{padding-left:0;border-left:0}
.band__i h4{font-size:clamp(19px,2vw,23px);letter-spacing:-.03em;margin-bottom:8px}
.band__i p{color:var(--ink-2);font-size:15px;line-height:1.5}

/* ---------- PRIJS ---------- */
.prijs{border-top:1px solid var(--line);background:var(--zinc-3)}
.prijs__inner{
  max-width:var(--maxw);margin:0 auto;padding:clamp(90px,13vh,150px) var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(36px,5vw,80px);align-items:center;
}
.card{position:relative;background:var(--steel);color:var(--glow);padding:clamp(24px,3vw,38px);border:1px solid #090C10;box-shadow:0 40px 70px rgba(22,29,36,.45), inset 0 1px 0 rgba(255,255,255,.16)}
.card__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:26px;border-bottom:1px solid rgba(228,233,237,.14)}
.card__price{display:flex;flex-direction:column;gap:6px}
.card__lbl{font-size:13.5px;font-weight:600;color:var(--glow-2)}
.card__big{font-variant-numeric:tabular-nums;font-weight:900;font-size:clamp(38px,5.4vw,62px);line-height:1;letter-spacing:-.06em;color:var(--sig)}
.card__price--alt .card__big{color:var(--glow)}
.card__ex{font-size:12.5px;font-weight:600;color:var(--glow-3)}
.card__inc{margin-top:6px;font-size:14px;font-weight:700;color:var(--glow)}
.card__maat{margin-top:8px;padding:14px 16px;border-left:3px solid var(--glow-3);background:rgba(228,233,237,.045);font-size:14.5px;line-height:1.5;color:var(--glow-2)}
.card__maat b{display:block;margin-bottom:3px;color:var(--glow);font-weight:800}
.card__maat a{color:var(--sig);font-weight:700;border-bottom:1px solid rgba(245,196,0,.45);transition:border-color .18s}
.card__maat a:hover{border-color:var(--sig)}
.card__list{padding:24px 0 0}
.card__list li{position:relative;padding-left:26px;margin-bottom:12px;color:var(--glow-2);font-size:15px}
.card__list li::before{content:"";position:absolute;left:0;top:.56em;width:13px;height:3px;background:var(--sig)}
.card__fine{margin-top:20px;font-size:13px;line-height:1.55;color:var(--glow-3)}

/* ---------- WACHTLIJST ----------
   The form sits in the same graphite card as the price: a panel on the
   machine, not a web form pasted onto the bench. Inputs are recessed
   screens; the one signal colour marks focus and choice. */
.wl{border-top:1px solid var(--line);background:var(--zinc-2)}
.wl [hidden]{display:none!important}
.wl__inner{
  max-width:var(--maxw);margin:0 auto;padding:clamp(90px,13vh,150px) var(--pad);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(36px,5vw,80px);align-items:start;
}
.wl__copy{position:sticky;top:calc(var(--nav) + 40px)}
.wl__ticks{margin-top:28px}
.wl__alt{margin-top:24px;padding-top:20px;border-top:2px solid var(--line-2);font-size:15px;font-weight:600;color:var(--ink-3)}
.wl__card{scroll-margin-top:calc(var(--nav) + 18px)}
.wl__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 18px}
.wl__full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld>label,.keus legend{font-size:13.5px;font-weight:600;color:var(--glow-2);line-height:1.4}
.fld__opt{font-weight:500;color:var(--glow-3)}
.wl__form input[type=text],.wl__form input[type=email],.wl__form input[type=tel],.wl__form select,.wl__form textarea{
  width:100%;font:inherit;font-size:16px;font-weight:600;color:var(--glow);
  background:var(--screen);border:1px solid rgba(228,233,237,.16);border-radius:0;
  padding:12px 13px;box-shadow:inset 0 2px 8px rgba(0,0,0,.55);
  -webkit-appearance:none;appearance:none;transition:border-color .18s,box-shadow .18s;
}
.wl__form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B959E' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px;cursor:pointer;
}
.wl__form select option{background:var(--screen-2);color:var(--glow)}
.wl__form select:has(option[value=""]:checked){color:var(--glow-3)}
.wl__form textarea{resize:vertical;min-height:104px;line-height:1.5}
.wl__form input:focus,.wl__form select:focus,.wl__form textarea:focus{outline:none;border-color:var(--sig);box-shadow:inset 0 2px 8px rgba(0,0,0,.55), 0 0 0 1px var(--sig)}
.wl__form [aria-invalid="true"]{border-color:#FF8B7B}
.fld__err{font-size:13px;font-weight:600;color:#FFA396;line-height:1.4}
.fld__err:empty{display:none}

/* hoe werk je nu: four keys instead of a dropdown, one tap on a phone */
.keus{min-width:0;margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.keus legend{grid-column:1/-1;padding:0;margin-bottom:7px}
.keus label{position:relative;display:flex;cursor:pointer}
.keus input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.keus span:not(.fld__err){
  flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:8px 6px;
  background:var(--screen-3);border:1px solid rgba(228,233,237,.12);border-left:3px solid var(--glow-3);
  font-size:14px;font-weight:700;line-height:1.2;color:var(--glow);
  transition:background .18s linear,border-color .18s linear,color .18s linear;
}
.keus label:hover span{border-color:rgba(228,233,237,.3)}
.keus input:checked+span{background:var(--sig);border-color:var(--sig);color:var(--sig-ink)}
.keus input:focus-visible+span{outline:2px solid var(--sig);outline-offset:2px}
.keus[aria-invalid="true"] span:not(.fld__err){border-color:#FF8B7B}
.keus .fld__err{grid-column:1/-1}

.wl__chips{display:flex;flex-wrap:wrap;gap:7px}
.wl__chip{
  font:inherit;font-size:13px;font-weight:700;line-height:1.2;color:var(--glow-2);cursor:pointer;
  background:transparent;border:1px solid rgba(228,233,237,.2);padding:8px 11px;
  transition:color .18s,border-color .18s,background .18s;
}
.wl__chip::before{content:"+ ";color:var(--sig)}
.wl__chip:hover{color:var(--glow);border-color:rgba(228,233,237,.4)}
.wl__chip[aria-pressed="true"]{color:var(--sig);border-color:var(--sig);background:rgba(245,196,0,.08)}
.wl__chip[aria-pressed="true"]::before{content:"\2713  "}
.wl__chip:focus-visible{outline:2px solid var(--sig);outline-offset:2px}

.vink{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--glow-2);cursor:pointer}
.vink input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--sig);cursor:pointer}
.vink input:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
.vink a{color:var(--glow);font-weight:700;border-bottom:1px solid var(--glow-3)}
.vink a:hover{border-color:var(--sig)}
.vink b{color:var(--glow);font-weight:800}
.vink--test{padding:14px 15px;border-left:3px solid var(--sig);background:rgba(245,196,0,.07)}
#wl-privacy-f{display:block;margin-top:8px}

.wl__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.wl__msg{padding:13px 15px;border-left:3px solid #FF8B7B;background:rgba(255,139,123,.08);font-size:14.5px;line-height:1.5;color:var(--glow)}
.wl__msg a{color:var(--sig);font-weight:700;border-bottom:1px solid currentColor}
.wl__send .btn--full{margin-top:4px}
.wl__send .card__fine{margin-top:14px}
.btn[disabled]{cursor:progress;transform:none;box-shadow:0 1px 0 #B99500;opacity:.8}
.wl__spin{display:none;width:18px;height:18px;flex:none;border:2px solid rgba(23,18,0,.25);border-top-color:var(--sig-ink);border-radius:50%;animation:wl-spin .8s linear infinite}
.btn.is-busy .wl__spin{display:block}
.btn.is-busy svg{display:none}
@keyframes wl-spin{to{transform:rotate(360deg)}}

.wl__thanks{padding:6px 0 4px}
.wl__thanks:focus{outline:none}
.wl__ok{display:grid;place-items:center;width:52px;height:52px;background:var(--sig);color:var(--sig-ink);box-shadow:0 3px 0 #B99500}
.wl__ok svg{width:26px;height:26px}
.wl__thanks h3{margin-top:22px;font-size:clamp(30px,3.4vw,42px);color:var(--glow)}
.wl__thanks p{margin-top:12px;font-size:17px;line-height:1.55;color:var(--glow-2);max-width:36ch}
.wl__thanks .wl__thanks-test{color:var(--sig);font-weight:700}

@media (max-width:1080px){
  .wl__inner{grid-template-columns:minmax(0,1fr);gap:44px}
  .wl__copy{position:static}
}
@media (max-width:640px){
  .wl__form{grid-template-columns:minmax(0,1fr);gap:16px}
  .keus{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- END ---------- */
.end{border-top:1px solid var(--line)}
.end__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(92px,15vh,158px) var(--pad) clamp(80px,12vh,126px);display:flex;flex-direction:column;align-items:flex-start;gap:44px}
.end__h{font-size:clamp(44px,7vw,102px);line-height:1.04}
.end__cta{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.end__alt{font-size:15px;font-weight:600;color:var(--ink-3)}
.end__alt a,.wl__alt a{color:var(--ink-2);border-bottom:2px solid var(--line);padding-bottom:2px;transition:color .18s,border-color .18s}
.end__alt a:hover,.wl__alt a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- FOOT ---------- */
.foot{border-top:2px solid var(--ink);max-width:var(--maxw);margin:0 auto;padding:24px var(--pad) 34px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-3);font-weight:600}
.foot a{color:var(--ink-2);border-bottom:1px solid var(--line);transition:color .18s,border-color .18s}
.foot a:hover{color:var(--ink);border-color:var(--ink)}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .hero{grid-template-columns:minmax(0,1fr);gap:clamp(40px,7vw,64px);padding-top:clamp(112px,14vh,142px)}
  .hero__copy{max-width:none}
  .stage{perspective:1300px;perspective-origin:50% 44%;padding-top:108px}
  .board{transform:rotateY(-12deg) rotateX(6deg)}
  /* the badge hangs into that headroom, on the board's top edge — never over
     the monthly figure or the first-invoice line */
  .tag{left:auto;right:0;top:-8%;transform:translateZ(120px)}
  .tray{left:0;bottom:-12%;width:min(224px,54%)}
  .scroll-hint{display:none}
  /* stacked, the block fills the pin on its own — it stays centred and
     clipped exactly as before */
  .flow__sticky{align-items:center;padding:0;overflow:hidden}
  .flow__inner{grid-template-columns:minmax(0,1fr);gap:26px}
  .flow__device{order:-1}
  .flow__rail{height:340vh}
  .phone{width:min(226px,54vw);transform:rotateY(-8deg) rotateX(3deg)}
  .inbox{left:-9%;bottom:16%;width:min(196px,62%)}
  .js .steps{position:relative;min-height:196px;margin-bottom:22px}
  .js .step{position:absolute;inset:0;border:0;padding:0 0 0 34px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--io)}
  .js .step:last-child{border-bottom:0}
  .js .step::after{display:none}
  .step::before{top:12px}
  .step h3{font-size:30px;margin-bottom:8px}
  .step p{font-size:15px;max-width:38ch}
  .js .step.is-active{opacity:1;visibility:visible;pointer-events:auto}
  .mod{grid-template-columns:minmax(0,1fr);gap:38px}
  .mod--alt .mod__vis{order:0}
  .kant__inner{grid-template-columns:minmax(0,1fr);gap:54px}
  .prijs__inner{grid-template-columns:minmax(0,1fr);gap:44px}
  .band__inner{grid-template-columns:minmax(0,1fr);gap:0}
  .band__i{padding:20px 0;border-left:0;border-top:2px solid var(--line-2)}
  .band__i:first-child{padding-top:0;border-top:0}
}

@media (max-width:640px){
  body{font-size:16px}
  :root{--th:13px}
  .nav__price{display:none}
  .hero{padding-bottom:66px}
  .hero__price{gap:30px;flex-wrap:wrap}

  /* the whole day stays on the machine — you pan it, nothing is cut off */
  .stage{perspective:1050px;perspective-origin:50% 40%}
  .board{transform:rotateY(-9deg) rotateX(5deg)}
  .plan{--u:27px}
  .plan__scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;scrollbar-width:none;overscroll-behavior-x:contain}
  .plan__scroll::-webkit-scrollbar{display:none}
  /* a fading right edge says: there is more day over there */
  .plan__wrap{position:relative}
  .plan__wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;z-index:4;
    background:linear-gradient(90deg,rgba(12,16,21,0),rgba(12,16,21,.9));transition:opacity .25s linear}
  .plan__wrap.is-end::after{opacity:0}
  .mach__pan{display:flex}
  .plan__grid{--hd:29px;grid-template-columns:32px repeat(4,minmax(94px,1fr));min-width:408px}
  .plan__hd,.plan__hours{position:sticky;left:0;z-index:5;background:var(--screen)}
  .nowline{left:32px}
  .plan__hours i{font-size:10px;right:5px}
  .job{font-size:11px;padding:5px 7px}
  .job b{font-size:10px}
  .col__hd{padding:0 7px;font-size:11px}
  .plan__bar{padding:9px 10px}
  .plan__day{font-size:12px}
  .plan__day i{display:none}

  .tray{position:relative;left:auto;bottom:auto;width:100%;transform:translateZ(56px);margin-top:15px}
  .stage{padding-top:96px}
  .tag{transform:translateZ(100px);padding:9px 12px;gap:11px}
  .tag__n{font-size:20px}
  .stage__cap{margin-top:22px;font-size:13px}

  .flow__rail{height:320vh}
  .phone{width:min(210px,60vw)}
  .inbox{left:-3%;bottom:-7%;width:min(182px,70%);transform:translateZ(86px)}
  .screen h4{font-size:21px}
  .step h3{font-size:26px}

  .wk__head,.wk__row{grid-template-columns:60px repeat(5,minmax(68px,1fr));min-width:398px}
  .bon__stamp{right:-6px;bottom:14px}
  .ib__card{right:0;bottom:-10%;width:min(184px,64%)}
  .card__grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .foot{flex-direction:column;gap:8px}
}

/* pan affordance — only where a surface really pans */
.pan{display:none;align-items:center;gap:9px;margin-top:12px;font-size:13px;color:var(--ink-3);font-weight:600}
.pan i{display:block;width:22px;height:2px;background:var(--ink-3);position:relative}
.pan i::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:2px solid var(--ink-3);border-right:2px solid var(--ink-3);transform:rotate(45deg)}
.wk__pan{color:var(--glow-3);padding:0 13px 11px;margin-top:0}
.wk__pan i{background:var(--glow-3)}
.wk__pan i::after{border-color:var(--glow-3)}
@media (max-width:640px){.wk__pan{display:flex}}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important}
  .scroll-hint span{animation:none;transform:scaleX(1)}
  .flow__rail{height:auto}
  .flow__sticky{position:static;height:auto;padding:88px 0;overflow:visible}
  /* the one-beat-at-a-time stack is a motion device; with motion off the three
     steps go back to being three paragraphs, never three headings on one spot */
  .steps,.js .steps{position:static;min-height:0}
  .step,.js .step{
    position:relative;inset:auto;opacity:1!important;visibility:visible!important;
    pointer-events:auto;padding:20px 0 20px 34px;border-top:2px solid var(--line-2);
  }
  .js .step::before{top:29px}
  .flow__device{margin-top:44px}
  .js .screen{opacity:0}
  .js #scr3{opacity:1}
  .js .field,.js .done,.js .inbox,.js .scr__foot,.js .bon__stamp,.js .placed{opacity:1}
}

/* ============ PRIVACY ============ */
.priv{max-width:820px;margin:0 auto;padding:clamp(132px,18vh,180px) var(--pad) clamp(80px,12vh,126px)}
.priv h2{margin:44px 0 12px;font-size:clamp(21px,2.2vw,26px);letter-spacing:-.03em}
.priv>p:not(.tab):not(.lead){color:var(--ink-2);font-size:16.5px;line-height:1.6;max-width:62ch}
.priv>p+p{margin-top:12px}
.priv .ticks{margin-top:4px}
.priv p a{color:var(--ink);font-weight:700;border-bottom:2px solid var(--line);transition:border-color .18s}
.priv p a:hover{border-color:var(--ink)}